@acorex/platform 21.0.0-next.85 → 21.0.0-next.88

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 (74) hide show
  1. package/fesm2022/acorex-platform-auth.mjs +1 -1
  2. package/fesm2022/acorex-platform-auth.mjs.map +1 -1
  3. package/fesm2022/{acorex-platform-common-common-settings.provider-Ytey9uhY.mjs → acorex-platform-common-common-settings.provider-VfmZct9H.mjs} +43 -3
  4. package/fesm2022/acorex-platform-common-common-settings.provider-VfmZct9H.mjs.map +1 -0
  5. package/fesm2022/acorex-platform-common.mjs +1709 -870
  6. package/fesm2022/acorex-platform-common.mjs.map +1 -1
  7. package/fesm2022/acorex-platform-contracts.mjs +1160 -9
  8. package/fesm2022/acorex-platform-contracts.mjs.map +1 -1
  9. package/fesm2022/acorex-platform-core.mjs +210 -131
  10. package/fesm2022/acorex-platform-core.mjs.map +1 -1
  11. package/fesm2022/acorex-platform-domain-contracts.mjs +58 -0
  12. package/fesm2022/acorex-platform-domain-contracts.mjs.map +1 -0
  13. package/fesm2022/acorex-platform-domain.mjs +2 -50
  14. package/fesm2022/acorex-platform-domain.mjs.map +1 -1
  15. package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
  16. package/fesm2022/acorex-platform-layout-components.mjs +59 -23
  17. package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
  18. package/fesm2022/acorex-platform-layout-designer.mjs +3 -2
  19. package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
  20. package/fesm2022/acorex-platform-layout-entity-attachments-page.component-CwG6n_Yb.mjs.map +1 -1
  21. package/fesm2022/acorex-platform-layout-entity-contracts.mjs +1114 -0
  22. package/fesm2022/acorex-platform-layout-entity-contracts.mjs.map +1 -0
  23. package/fesm2022/acorex-platform-layout-entity-file-list-popup.component--IeMZLIr.mjs.map +1 -1
  24. package/fesm2022/acorex-platform-layout-entity.mjs +661 -742
  25. package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
  26. package/fesm2022/acorex-platform-layout-views.mjs +333 -119
  27. package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
  28. package/fesm2022/acorex-platform-layout-widget-core.mjs +11 -105
  29. package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
  30. package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-CFyfix31.mjs +513 -0
  31. package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-CFyfix31.mjs.map +1 -0
  32. package/fesm2022/{acorex-platform-layout-widgets-tabular-data-edit-popup.component-DjpZU6gz.mjs → acorex-platform-layout-widgets-tabular-data-edit-popup.component-D4MOHEpI.mjs} +4 -4
  33. package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-D4MOHEpI.mjs.map +1 -0
  34. package/fesm2022/acorex-platform-layout-widgets.mjs +868 -57
  35. package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
  36. package/fesm2022/acorex-platform-runtime.mjs.map +1 -1
  37. package/fesm2022/{acorex-platform-themes-default-entity-master-single-view.component-Br9p5aXT.mjs → acorex-platform-themes-default-entity-master-single-view.component-DrUwqKKA.mjs} +2 -3
  38. package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-DrUwqKKA.mjs.map +1 -0
  39. package/fesm2022/acorex-platform-themes-default.mjs +740 -96
  40. package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
  41. package/fesm2022/{acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs → acorex-platform-themes-shared-settings.provider-BUwPqwUS.mjs} +3 -3
  42. package/fesm2022/acorex-platform-themes-shared-settings.provider-BUwPqwUS.mjs.map +1 -0
  43. package/fesm2022/acorex-platform-themes-shared.mjs +4 -3
  44. package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
  45. package/fesm2022/acorex-platform-workflow.mjs +6 -8
  46. package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
  47. package/package.json +9 -5
  48. package/types/acorex-platform-auth.d.ts +2 -1
  49. package/types/acorex-platform-common.d.ts +419 -1083
  50. package/types/acorex-platform-contracts.d.ts +1791 -260
  51. package/types/acorex-platform-core.d.ts +2153 -2806
  52. package/types/acorex-platform-domain-contracts.d.ts +416 -0
  53. package/types/acorex-platform-domain.d.ts +4 -415
  54. package/types/acorex-platform-layout-builder.d.ts +2 -1
  55. package/types/acorex-platform-layout-components.d.ts +15 -4
  56. package/types/acorex-platform-layout-designer.d.ts +2 -1
  57. package/types/acorex-platform-layout-entity-contracts.d.ts +864 -0
  58. package/types/acorex-platform-layout-entity.d.ts +88 -269
  59. package/types/acorex-platform-layout-views.d.ts +48 -14
  60. package/types/acorex-platform-layout-widget-core.d.ts +9 -5
  61. package/types/acorex-platform-layout-widgets.d.ts +89 -13
  62. package/types/acorex-platform-runtime.d.ts +1 -1
  63. package/types/acorex-platform-themes-default.d.ts +173 -70
  64. package/types/acorex-platform-workflow.d.ts +5 -18
  65. package/fesm2022/acorex-platform-common-common-settings.provider-Ytey9uhY.mjs.map +0 -1
  66. package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-J0zcGKBX.mjs +0 -116
  67. package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-J0zcGKBX.mjs.map +0 -1
  68. package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-DjpZU6gz.mjs.map +0 -1
  69. package/fesm2022/acorex-platform-native.mjs +0 -155
  70. package/fesm2022/acorex-platform-native.mjs.map +0 -1
  71. package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-Br9p5aXT.mjs.map +0 -1
  72. package/fesm2022/acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs.map +0 -1
  73. package/native/README.md +0 -4
  74. package/types/acorex-platform-native.d.ts +0 -28
@@ -1,5 +1,5 @@
1
1
  import * as i1 from '@acorex/platform/layout/widget-core';
2
- import { AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXP_NAME_PROPERTY, AXP_DISABLED_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, cloneProperty, AXP_TEXT_PROPERTY, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ACTION_CATEGORY, AXP_DATA_PATH_PROPERTY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXP_LABEL_PROPERTY, AXP_READONLY_PROPERTY, AXP_TRIGGERS_PROPERTY, booleanDefaultProperty, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_PLACEHOLDER_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_DATA_PROPERTY_GROUP, AXP_HAS_LABEL_PROPERTY, AXP_HAS_ICON_PROPERTY, createSelectProperty, AXP_BEHAVIOR_PROPERTY_GROUP, createStringProperty, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, createBooleanProperty, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_MULTI_LANGUAGE_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, largeTextDefaultProperty, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, numberDefaultProperty, numberMinValueProperty, numberMaxValueProperty, createNumberProperty, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, richTextDefaultProperty, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, selectEditorDefaultValueProperty, AXP_DIRECTION_PROPERTY, selectionListEditorDefaultValueProperty, plainTextDefaultProperty, AXP_FALSY_TEXT_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXPWidgetsCatalog, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_STYLING_PROPERTY_GROUP, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXP_WIDGETS_LAYOUT_SUB_GRID, AXPBlockBaseLayoutWidgetComponent, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_TITLE_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXPFlexBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_PROPERTY, AXPFlexItemBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_THEME_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXPTableBaseLayoutWidgetComponent, AXP_TABLE_COLUMNS_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXPTableItemBaseLayoutWidgetComponent, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, findNonEmptyBreakpoints, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_APPEARANCE_PROPERTY_GROUP, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXPGridItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGET_DEFINITION_PROVIDER, normalizeDefinitionCategories } from '@acorex/platform/layout/widget-core';
2
+ import { AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXP_NAME_PROPERTY, AXP_DISABLED_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, cloneProperty, AXP_TEXT_PROPERTY, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ACTION_CATEGORY, AXP_DATA_PATH_PROPERTY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXP_LABEL_PROPERTY, AXP_READONLY_PROPERTY, AXP_TRIGGERS_PROPERTY, booleanDefaultProperty, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_PLACEHOLDER_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_DATA_PROPERTY_GROUP, AXP_HAS_LABEL_PROPERTY, AXP_HAS_ICON_PROPERTY, createSelectProperty, AXP_BEHAVIOR_PROPERTY_GROUP, createStringProperty, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, createBooleanProperty, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_MULTI_LANGUAGE_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, largeTextDefaultProperty, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, numberDefaultProperty, numberMinValueProperty, numberMaxValueProperty, createNumberProperty, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, richTextDefaultProperty, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, selectEditorDefaultValueProperty, AXP_DIRECTION_PROPERTY, selectionListEditorDefaultValueProperty, plainTextDefaultProperty, AXP_FALSY_TEXT_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_STYLING_PROPERTY_GROUP, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXP_WIDGETS_LAYOUT_SUB_GRID, AXPBlockBaseLayoutWidgetComponent, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_TITLE_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXPFlexBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_PROPERTY, AXPFlexItemBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_THEME_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXPTableBaseLayoutWidgetComponent, AXP_TABLE_COLUMNS_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXPTableItemBaseLayoutWidgetComponent, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, findNonEmptyBreakpoints, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_APPEARANCE_PROPERTY_GROUP, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXPGridItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex/platform/layout/widget-core';
3
3
  export * from '@acorex/platform/layout/widget-core';
4
4
  import { AXActionSheetService } from '@acorex/components/action-sheet';
5
5
  import * as i1$3 from '@acorex/components/badge';
@@ -10,7 +10,7 @@ import * as i1$2 from '@acorex/components/check-box';
10
10
  import { AXCheckBoxModule } from '@acorex/components/check-box';
11
11
  import * as i2$1 from '@acorex/components/decorators';
12
12
  import { AXDecoratorModule } from '@acorex/components/decorators';
13
- import * as i3 from '@acorex/components/form';
13
+ import * as i4 from '@acorex/components/form';
14
14
  import { AXFormModule } from '@acorex/components/form';
15
15
  import * as i2 from '@acorex/components/label';
16
16
  import { AXLabelModule, AXLabelComponent } from '@acorex/components/label';
@@ -21,20 +21,20 @@ import * as i1$6 from '@acorex/components/text-box';
21
21
  import { AXTextBoxModule } from '@acorex/components/text-box';
22
22
  import * as i6 from '@acorex/core/translation';
23
23
  import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString } from '@acorex/core/translation';
24
- import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, AXPFileActionsService, normalizePositiveNumberOption, resolveEntityRowDisplayText, resolveEntityRowDisplayTitle, downloadGraphicFromElement, printGraphicFromElement, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
25
- import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex/platform/core';
24
+ import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, AXPFileActionsService, AXPIntegrationProviderRegistryService, normalizePositiveNumberOption, resolveEntityRowDisplayText, resolveEntityRowDisplayTitle, downloadGraphicFromElement, printGraphicFromElement, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
25
+ import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex/platform/core';
26
26
  import * as i1$4 from '@angular/common';
27
27
  import { CommonModule, AsyncPipe } from '@angular/common';
28
28
  import * as i0 from '@angular/core';
29
29
  import { inject, signal, computed, Component, InjectionToken, viewChild, effect, untracked, HostBinding, Directive, ChangeDetectionStrategy, EventEmitter, linkedSignal, Injectable, model, input, ViewEncapsulation, ChangeDetectorRef, afterNextRender, output, Input, ElementRef, afterEveryRender, NgZone, importProvidersFrom, NgModule } from '@angular/core';
30
30
  import * as i1$5 from '@angular/forms';
31
31
  import { FormsModule } from '@angular/forms';
32
- import * as i3$1 from '@acorex/components/select-box';
32
+ import * as i3 from '@acorex/components/select-box';
33
33
  import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
34
34
  import { set, get, castArray, isNil, isNull, isEmpty, isNumber, defaultTo, isEqual, cloneDeep } from 'lodash-es';
35
35
  import * as i2$2 from '@acorex/components/loading';
36
36
  import { AXLoadingModule } from '@acorex/components/loading';
37
- import { AXPCommandService, provideQuerySetups } from '@acorex/platform/runtime';
37
+ import { AXPCommandService, AXPQueryService, provideQuerySetups } from '@acorex/platform/runtime';
38
38
  import { AXPConditionBuilderComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPOutcomeResultsViewerComponent, AXPSignatureEditorService, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
39
39
  import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
40
40
  import { AXColorUtil } from '@acorex/core/utils';
@@ -45,10 +45,11 @@ import { AXPLayoutBuilderService, AXPLayoutRendererComponent } from '@acorex/pla
45
45
  import * as i8 from '@acorex/components/collapse';
46
46
  import { AXCollapseModule } from '@acorex/components/collapse';
47
47
  import { AXFormatService } from '@acorex/core/format';
48
- import * as i3$3 from '@acorex/components/datetime-box';
48
+ import { AXPRegionalSetting, AXPWidgetsCatalog, AXPDataGenerator, AXP_INTEGRATION_AUTH_METHOD_TYPE, normalizeDefinitionCategories } from '@acorex/platform/contracts';
49
+ import * as i3$2 from '@acorex/components/datetime-box';
49
50
  import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
50
51
  import { AXCalendarService, AXTimeDurationFormatter } from '@acorex/core/date-time';
51
- import * as i3$2 from '@acorex/components/popover';
52
+ import * as i3$1 from '@acorex/components/popover';
52
53
  import { AXPopoverModule, AXPopoverComponent } from '@acorex/components/popover';
53
54
  import * as i2$4 from '@acorex/components/selection-list';
54
55
  import { AXSelectionListModule } from '@acorex/components/selection-list';
@@ -56,16 +57,16 @@ import { AXSafePipe } from '@acorex/core/pipes';
56
57
  import { AXPlatform } from '@acorex/core/platform';
57
58
  import { AXEditorComponent } from '@acorex/components/editor';
58
59
  import { AXPopupService } from '@acorex/components/popup';
59
- import * as i4 from '@acorex/components/text-area';
60
+ import * as i4$1 from '@acorex/components/text-area';
60
61
  import { AXTextAreaModule } from '@acorex/components/text-area';
61
62
  import { toSignal } from '@angular/core/rxjs-interop';
62
63
  import * as i1$7 from '@acorex/components/number-box';
63
64
  import { AXNumberBoxModule } from '@acorex/components/number-box';
64
- import * as i3$4 from '@acorex/components/password-box';
65
+ import * as i3$3 from '@acorex/components/password-box';
65
66
  import { AXPasswordBoxModule } from '@acorex/components/password-box';
66
67
  import * as i1$8 from '@acorex/components/progress-bar';
67
68
  import { AXProgressBarModule } from '@acorex/components/progress-bar';
68
- import * as i3$5 from '@acorex/components/range-slider';
69
+ import * as i3$4 from '@acorex/components/range-slider';
69
70
  import { AXRangeSliderModule } from '@acorex/components/range-slider';
70
71
  import { AXRatePickerComponent } from '@acorex/components/rate-picker';
71
72
  import * as i2$5 from '@acorex/components/wysiwyg';
@@ -93,6 +94,7 @@ import * as i1$d from '@acorex/components/media-viewer';
93
94
  import { AXMediaViewerModule } from '@acorex/components/media-viewer';
94
95
  import * as i1$e from '@acorex/components/image';
95
96
  import { AXImageModule } from '@acorex/components/image';
97
+ import { AXPSessionService } from '@acorex/platform/auth';
96
98
  import * as i1$f from '@acorex/components/json-viewer';
97
99
  import { AXJsonViewerModule } from '@acorex/components/json-viewer';
98
100
  import * as i1$g from '@acorex/components/map';
@@ -117,12 +119,12 @@ import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
117
119
  import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
118
120
  import * as i1$k from '@acorex/components/cron-job';
119
121
  import { AXCronJobModule } from '@acorex/components/cron-job';
120
- import * as i3$6 from '@acorex/components/time-duration';
122
+ import * as i3$5 from '@acorex/components/time-duration';
121
123
  import { AXTimeDurationModule } from '@acorex/components/time-duration';
122
124
  import * as i1$l from '@acorex/components/alert';
123
125
  import { AXAlertModule } from '@acorex/components/alert';
124
126
  import { DomSanitizer } from '@angular/platform-browser';
125
- import * as i4$1 from '@acorex/components/tooltip';
127
+ import * as i4$2 from '@acorex/components/tooltip';
126
128
  import { AXTooltipModule } from '@acorex/components/tooltip';
127
129
  import { AXP_ENTITY_DEFINITION_CRUD_SERVICE } from '@acorex/platform/domain';
128
130
 
@@ -1285,7 +1287,7 @@ class AXPCheckBoxWidgetEditComponent extends AXPValueWidgetComponent {
1285
1287
  <ax-label>{{ label() }}</ax-label>
1286
1288
  }
1287
1289
  </ax-check-box>
1288
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1290
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1289
1291
  }
1290
1292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
1291
1293
  type: Component,
@@ -1597,7 +1599,7 @@ class AXPColorBoxWidgetEditComponent extends AXPValueWidgetComponent {
1597
1599
  <ax-clear-button></ax-clear-button>
1598
1600
  }
1599
1601
  </ax-color-box>
1600
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1602
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1601
1603
  }
1602
1604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
1603
1605
  type: Component,
@@ -2761,7 +2763,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
2761
2763
  </ax-select-box>
2762
2764
  }
2763
2765
  </div>
2764
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2766
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2765
2767
  }
2766
2768
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
2767
2769
  type: Component,
@@ -3589,7 +3591,7 @@ class AXPAddressWidgetEditComponent extends AXPValueWidgetComponent {
3589
3591
  </div>
3590
3592
  </div>
3591
3593
  }
3592
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i8.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i8.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3594
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i8.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i8.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3593
3595
  }
3594
3596
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAddressWidgetEditComponent, decorators: [{
3595
3597
  type: Component,
@@ -3838,6 +3840,7 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
3838
3840
  this.formatter = inject(AXFormatService);
3839
3841
  this.settingsService = inject(AXPSettingsService);
3840
3842
  this.convertedValue = signal(typeof this.rawValue === 'string' ? this.rawValue : null, ...(ngDevMode ? [{ debugName: "convertedValue" }] : /* istanbul ignore next */ []));
3843
+ this.displayValue = computed(() => this.convertedValue() ?? '---', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
3841
3844
  this.dateMode = computed(() => this.options['mode'] || 'short', ...(ngDevMode ? [{ debugName: "dateMode" }] : /* istanbul ignore next */ []));
3842
3845
  this.format = computed(() => {
3843
3846
  const rawValue = this.options['format'];
@@ -3854,7 +3857,7 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
3854
3857
  this.updateValue = async () => {
3855
3858
  const rawValue = this.rawValue;
3856
3859
  if (rawValue == null) {
3857
- this.convertedValue.set(null);
3860
+ this.convertedValue.set('---');
3858
3861
  return;
3859
3862
  }
3860
3863
  this.convertedValue.set(await this.handleFormat(rawValue));
@@ -3885,7 +3888,7 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
3885
3888
  }
3886
3889
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
3887
3890
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "axp-date-time-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex">
3888
- <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
3891
+ <span [dir]="'ltr'" [title]="displayValue()">{{ displayValue() }}</span>
3889
3892
  </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3890
3893
  }
3891
3894
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, decorators: [{
@@ -3893,7 +3896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
3893
3896
  args: [{
3894
3897
  selector: 'axp-date-time-box-widget-column',
3895
3898
  template: `<div class="ax-flex">
3896
- <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
3899
+ <span [dir]="'ltr'" [title]="displayValue()">{{ displayValue() }}</span>
3897
3900
  </div>`,
3898
3901
  changeDetection: ChangeDetectionStrategy.OnPush,
3899
3902
  imports: [],
@@ -3971,7 +3974,7 @@ class AXPFilterOperationsComponent {
3971
3974
  return resolved.length > 0 ? resolved : base;
3972
3975
  }
3973
3976
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3974
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n #operatorsPopover\n [target]=\"changeOperator\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n [adaptivityEnabled]=\"true\"\n>\n <div\n class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n >\n <ax-selection-list\n class=\"\"\n [valueField]=\"'name'\"\n [textField]=\"'title'\"\n [(ngModel)]=\"selectedOperation\"\n (ngModelChange)=\"operatorsPopover.close()\"\n [direction]=\"'vertical'\"\n [items]=\"operationItems()\"\n [multiple]=\"false\"\n ></ax-selection-list>\n </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3977
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n #operatorsPopover\n [target]=\"changeOperator\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n [adaptivityEnabled]=\"true\"\n>\n <div\n class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n >\n <ax-selection-list\n class=\"\"\n [valueField]=\"'name'\"\n [textField]=\"'title'\"\n [(ngModel)]=\"selectedOperation\"\n (ngModelChange)=\"operatorsPopover.close()\"\n [direction]=\"'vertical'\"\n [items]=\"operationItems()\"\n [multiple]=\"false\"\n ></ax-selection-list>\n </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3975
3978
  }
3976
3979
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
3977
3980
  type: Component,
@@ -4290,7 +4293,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
4290
4293
  return cls;
4291
4294
  }
4292
4295
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4293
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n @if (filterUi() === 'simple') {\n <div class=\"ax-flex ax-items-center ax-w-full\">\n <!-- Between operation: from / to range inputs -->\n @if (operation().type === 'between') {\n <div class=\"ax-flex-1 ax-flex ax-gap-2\">\n <ax-datetime-box\n #dateTimeBox\n class=\"ax-w-full\"\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterFromMinValue()\"\n [maxValue]=\"filterFromMaxValue()\"\n [placeholder]=\"'@general:terms.common.from' | translate | async\"\n [disabled]=\"isValuelessOperation()\"\n [ngModel]=\"filterRangeValue().from\"\n (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n <ax-datetime-box\n class=\"ax-w-full\"\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterToMinValue()\"\n [maxValue]=\"filterToMaxValue()\"\n [placeholder]=\"'@general:terms.common.to' | translate | async\"\n [disabled]=\"isValuelessOperation()\"\n [ngModel]=\"filterRangeValue().to\"\n (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n </div>\n } @else {\n <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n <ax-datetime-box\n #dateTimeBox\n class=\"ax-flex-1\"\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n [disabled]=\"isValuelessOperation()\"\n [ngModel]=\"filterValue()\"\n (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n }\n\n <!-- Operation selector (equal, between, isEmpty, ...) -->\n <axp-filter-operations\n type=\"datetime\"\n [operations]=\"filterOperations()\"\n [selectedOperation]=\"operation().type\"\n (selectedOperationChange)=\"handleOperationChange($event)\"\n ></axp-filter-operations>\n </div>\n } @else {\n <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n <div class=\"ax-flex ax-flex-col ax-items-center ax-w-full\">\n <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n @if (resolvedPresets().length) {\n <ax-select-box\n #selectBox\n class=\"ax-w-full\"\n [dataSource]=\"translatedPresets()\"\n [valueField]=\"'id'\"\n [textField]=\"'title'\"\n [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n [ngModel]=\"selectedPresetId()\"\n (onValueChanged)=\"handlePresetChange($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n }\n\n <!-- Manual preset: custom between range -->\n @if (selectedManualPreset()?.operationType === 'between') {\n <div class=\"ax-flex ax-gap-2 ax-mt-2 ax-w-full\">\n <ax-datetime-box\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterFromMinValue()\"\n [maxValue]=\"filterFromMaxValue()\"\n [placeholder]=\"'@general:terms.common.from' | translate | async\"\n [ngModel]=\"filterRangeValue().from\"\n (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n >\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n <ax-clear-button></ax-clear-button>\n </ax-datetime-box>\n <ax-datetime-box\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterToMinValue()\"\n [maxValue]=\"filterToMaxValue()\"\n [placeholder]=\"'@general:terms.common.to' | translate | async\"\n [ngModel]=\"filterRangeValue().to\"\n (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n </div>\n }\n\n <!-- Manual preset: single bound for greaterThan / lessThan -->\n @if (\n selectedManualPreset()?.operationType === 'greaterThan' ||\n selectedManualPreset()?.operationType === 'lessThan'\n ) {\n <div class=\"ax-w-full ax-mt-2\">\n <ax-datetime-box\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [ngModel]=\"filterValue()\"\n (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n >\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n <ax-clear-button></ax-clear-button>\n </ax-datetime-box>\n </div>\n }\n </div>\n }\n} @else {\n <!-- Standard form edit: single date/time value bound to entity or form field -->\n <ax-datetime-box\n [ngModel]=\"getValue()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n (onValueChanged)=\"handleValueChange($event)\"\n [minValue]=\"minValue()\"\n [maxValue]=\"maxValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [format]=\"calendarFormat()\"\n [placeholder]=\"placeholder()\"\n >\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n @if (clearButton()) {\n <ax-clear-button></ax-clear-button>\n }\n </ax-datetime-box>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "yearRange", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4296
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n @if (filterUi() === 'simple') {\n <div class=\"ax-flex ax-items-center ax-w-full\">\n <!-- Between operation: from / to range inputs -->\n @if (operation().type === 'between') {\n <div class=\"ax-flex-1 ax-flex ax-gap-2\">\n <ax-datetime-box\n #dateTimeBox\n class=\"ax-w-full\"\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterFromMinValue()\"\n [maxValue]=\"filterFromMaxValue()\"\n [placeholder]=\"'@general:terms.common.from' | translate | async\"\n [disabled]=\"isValuelessOperation()\"\n [ngModel]=\"filterRangeValue().from\"\n (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n <ax-datetime-box\n class=\"ax-w-full\"\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterToMinValue()\"\n [maxValue]=\"filterToMaxValue()\"\n [placeholder]=\"'@general:terms.common.to' | translate | async\"\n [disabled]=\"isValuelessOperation()\"\n [ngModel]=\"filterRangeValue().to\"\n (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n </div>\n } @else {\n <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n <ax-datetime-box\n #dateTimeBox\n class=\"ax-flex-1\"\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n [disabled]=\"isValuelessOperation()\"\n [ngModel]=\"filterValue()\"\n (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n }\n\n <!-- Operation selector (equal, between, isEmpty, ...) -->\n <axp-filter-operations\n type=\"datetime\"\n [operations]=\"filterOperations()\"\n [selectedOperation]=\"operation().type\"\n (selectedOperationChange)=\"handleOperationChange($event)\"\n ></axp-filter-operations>\n </div>\n } @else {\n <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n <div class=\"ax-flex ax-flex-col ax-items-center ax-w-full\">\n <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n @if (resolvedPresets().length) {\n <ax-select-box\n #selectBox\n class=\"ax-w-full\"\n [dataSource]=\"translatedPresets()\"\n [valueField]=\"'id'\"\n [textField]=\"'title'\"\n [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n [ngModel]=\"selectedPresetId()\"\n (onValueChanged)=\"handlePresetChange($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n }\n\n <!-- Manual preset: custom between range -->\n @if (selectedManualPreset()?.operationType === 'between') {\n <div class=\"ax-flex ax-gap-2 ax-mt-2 ax-w-full\">\n <ax-datetime-box\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterFromMinValue()\"\n [maxValue]=\"filterFromMaxValue()\"\n [placeholder]=\"'@general:terms.common.from' | translate | async\"\n [ngModel]=\"filterRangeValue().from\"\n (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n >\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n <ax-clear-button></ax-clear-button>\n </ax-datetime-box>\n <ax-datetime-box\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [minValue]=\"filterToMinValue()\"\n [maxValue]=\"filterToMaxValue()\"\n [placeholder]=\"'@general:terms.common.to' | translate | async\"\n [ngModel]=\"filterRangeValue().to\"\n (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n >\n <ax-clear-button></ax-clear-button>\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n </ax-datetime-box>\n </div>\n }\n\n <!-- Manual preset: single bound for greaterThan / lessThan -->\n @if (\n selectedManualPreset()?.operationType === 'greaterThan' ||\n selectedManualPreset()?.operationType === 'lessThan'\n ) {\n <div class=\"ax-w-full ax-mt-2\">\n <ax-datetime-box\n [format]=\"calendarFormat()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n [ngModel]=\"filterValue()\"\n (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n >\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n <ax-clear-button></ax-clear-button>\n </ax-datetime-box>\n </div>\n }\n </div>\n }\n} @else {\n <!-- Standard form edit: single date/time value bound to entity or form field -->\n <ax-datetime-box\n [ngModel]=\"getValue()\"\n [picker]=\"format()\"\n [depth]=\"inputDepth()\"\n (onValueChanged)=\"handleValueChange($event)\"\n [minValue]=\"minValue()\"\n [maxValue]=\"maxValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [format]=\"calendarFormat()\"\n [placeholder]=\"placeholder()\"\n >\n @for (validation of validationRules(); track $index) {\n <ax-validation-rule\n [rule]=\"validation.rule\"\n [message]=\"validation.options?.message\"\n [options]=\"validation.options\"\n ></ax-validation-rule>\n }\n @if (clearButton()) {\n <ax-clear-button></ax-clear-button>\n }\n </ax-datetime-box>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "yearRange", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4294
4297
  }
4295
4298
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
4296
4299
  type: Component,
@@ -4537,7 +4540,7 @@ class AXPEditorJsWidgetEditComponent extends AXPValueWidgetComponent {
4537
4540
  ></ax-validation-rule>
4538
4541
  }
4539
4542
  </ax-editor>
4540
- `, isInline: true, dependencies: [{ kind: "component", type: AXEditorComponent, selector: "ax-editor", inputs: ["look", "readonly", "disabled", "value", "modules", "imageConfig"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4543
+ `, isInline: true, dependencies: [{ kind: "component", type: AXEditorComponent, selector: "ax-editor", inputs: ["look", "readonly", "disabled", "value", "modules", "imageConfig"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4541
4544
  }
4542
4545
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEditorJsWidgetEditComponent, decorators: [{
4543
4546
  type: Component,
@@ -4805,7 +4808,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
4805
4808
  }
4806
4809
  </div>
4807
4810
  </div>
4808
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4811
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4809
4812
  }
4810
4813
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLargeTextWidgetEditComponent, decorators: [{
4811
4814
  type: Component,
@@ -5202,7 +5205,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPValueWidgetComponent {
5202
5205
  </ax-button>
5203
5206
  }
5204
5207
  </div>
5205
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5208
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5206
5209
  }
5207
5210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, decorators: [{
5208
5211
  type: Component,
@@ -5500,7 +5503,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
5500
5503
  <ax-clear-button></ax-clear-button>
5501
5504
  }
5502
5505
  </ax-password-box>
5503
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$4.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5506
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$3.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5504
5507
  }
5505
5508
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, decorators: [{
5506
5509
  type: Component,
@@ -5844,7 +5847,7 @@ class AXPProgressBarWidgetEditComponent extends AXPValueWidgetComponent {
5844
5847
  </div>
5845
5848
  }
5846
5849
  </div>
5847
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$5.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5850
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5848
5851
  }
5849
5852
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPProgressBarWidgetEditComponent, decorators: [{
5850
5853
  type: Component,
@@ -6130,7 +6133,7 @@ class AXPRatePickerWidgetEditComponent extends AXPValueWidgetComponent {
6130
6133
  ></ax-validation-rule>
6131
6134
  }
6132
6135
  </ax-rate-picker>
6133
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "max", "step", "hasTransition"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6136
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "max", "step", "hasTransition"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6134
6137
  }
6135
6138
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRatePickerWidgetEditComponent, decorators: [{
6136
6139
  type: Component,
@@ -6574,7 +6577,7 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
6574
6577
  [options]="validation.options"
6575
6578
  ></ax-validation-rule>
6576
6579
  }
6577
- </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
6580
+ </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
6578
6581
  }
6579
6582
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
6580
6583
  type: Component,
@@ -6997,6 +7000,14 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
6997
7000
  this.refresh();
6998
7001
  }, ...(ngDevMode ? [{ debugName: "#clearOnDataSourceChangedEffect" }] : /* istanbul ignore next */ []));
6999
7002
  }
7003
+ /**
7004
+ * In filter mode the stored value is wrapped as `{ value, operation, displayText }`.
7005
+ * Item resolution in the base widget needs the unwrapped key(s), so expose the same
7006
+ * display value used by the template to avoid resolving items with an `undefined` key.
7007
+ */
7008
+ resolveSelectedItemsValue() {
7009
+ return this.filterMode() ? this.selectFilterDisplayValue() : this.getValue();
7010
+ }
7000
7011
  #focusEffect;
7001
7012
  focus() {
7002
7013
  this.shouldFocus.set(true);
@@ -7172,7 +7183,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
7172
7183
  ></ax-validation-rule>
7173
7184
  }
7174
7185
  </ax-select-box>
7175
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7186
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7176
7187
  }
7177
7188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
7178
7189
  type: Component,
@@ -7561,7 +7572,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
7561
7572
  ></ax-validation-rule>
7562
7573
  }
7563
7574
  </ax-selection-list>
7564
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7575
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7565
7576
  }
7566
7577
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
7567
7578
  type: Component,
@@ -7986,7 +7997,7 @@ class AXPTagEditorWidgetEditComponent extends AXPValueWidgetComponent {
7986
7997
  </div>
7987
7998
  </div>
7988
7999
  </ng-template>
7989
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i1$9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXAutocompleteModule }, { kind: "component", type: i2$6.AXAutocompleteComponent, selector: "ax-autocomplete", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "delayTime", "itemHeight", "maxVisibleItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "listHeaderTemplate", "listFooterTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemClick", "onItemSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8000
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i1$9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXAutocompleteModule }, { kind: "component", type: i2$6.AXAutocompleteComponent, selector: "ax-autocomplete", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "delayTime", "itemHeight", "maxVisibleItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "listHeaderTemplate", "listFooterTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemClick", "onItemSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7990
8001
  }
7991
8002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTagEditorWidgetEditComponent, decorators: [{
7992
8003
  type: Component,
@@ -8360,7 +8371,7 @@ class AXPTemplateBoxWidgetEditComponent extends AXPValueWidgetComponent {
8360
8371
  </div>
8361
8372
  </div>
8362
8373
  </div>
8363
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8374
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8364
8375
  }
8365
8376
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTemplateBoxWidgetEditComponent, decorators: [{
8366
8377
  type: Component,
@@ -8701,7 +8712,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
8701
8712
  }
8702
8713
  </ax-text-box>
8703
8714
  </div>
8704
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8715
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8705
8716
  }
8706
8717
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTextBoxWidgetEditComponent, decorators: [{
8707
8718
  type: Component,
@@ -11646,6 +11657,802 @@ const AXPImageMarkerWidget = {
11646
11657
  },
11647
11658
  };
11648
11659
 
11660
+ //#region ---- Imports ----
11661
+ //#endregion
11662
+ //#region ---- Widget Config ----
11663
+ const AXPIntegrationConnectionsPanelWidget = {
11664
+ name: 'integration-connections-panel',
11665
+ title: '@platform-layout-widgets:widgets.integration-connections-panel.title',
11666
+ description: '@platform-layout-widgets:widgets.integration-connections-panel.description',
11667
+ icon: 'fa-light fa-plug',
11668
+ categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
11669
+ subCategory: AXP_WIDGETS_ADVANCE_SUB_TOOLS,
11670
+ groups: [AXPWidgetGroupEnum.UtilityWidget],
11671
+ type: 'editor',
11672
+ properties: [AXP_NAME_PROPERTY],
11673
+ components: {
11674
+ edit: {
11675
+ component: () => Promise.resolve().then(function () { return integrationConnectionsPanelWidgetEdit_component; }).then((c) => c.AXPIntegrationConnectionsPanelWidgetEditComponent),
11676
+ },
11677
+ view: {
11678
+ component: () => Promise.resolve().then(function () { return integrationConnectionsPanelWidgetEdit_component; }).then((c) => c.AXPIntegrationConnectionsPanelWidgetEditComponent),
11679
+ },
11680
+ },
11681
+ };
11682
+
11683
+ //#region ---- Imports ----
11684
+ //#endregion
11685
+ //#region ---- Component ----
11686
+ class AXPIntegrationConnectionAuthMethodPopupComponent extends AXBasePageComponent {
11687
+ constructor() {
11688
+ super(...arguments);
11689
+ this.methods = [];
11690
+ }
11691
+ selectMethod(authMethodType) {
11692
+ this.close({ authMethodType });
11693
+ }
11694
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIntegrationConnectionAuthMethodPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11695
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIntegrationConnectionAuthMethodPopupComponent, isStandalone: true, selector: "axp-integration-connection-auth-method-popup", usesInheritance: true, ngImport: i0, template: `
11696
+ <div class="ax-flex ax-flex-col ax-gap-2 ax-p-4">
11697
+ @for (method of methods; track method.type) {
11698
+ <ax-button
11699
+ look="outline"
11700
+ color="default"
11701
+ class="ax-w-full"
11702
+ [text]="method.label"
11703
+ (onClick)="selectMethod(method.type)"
11704
+ ></ax-button>
11705
+ }
11706
+ </div>
11707
+ <ax-footer>
11708
+ <ax-suffix>
11709
+ <ax-button
11710
+ look="outline"
11711
+ [text]="'@general:actions.cancel.title' | translate | async"
11712
+ (onClick)="close()"
11713
+ ></ax-button>
11714
+ </ax-suffix>
11715
+ </ax-footer>
11716
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11717
+ }
11718
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIntegrationConnectionAuthMethodPopupComponent, decorators: [{
11719
+ type: Component,
11720
+ args: [{
11721
+ selector: 'axp-integration-connection-auth-method-popup',
11722
+ changeDetection: ChangeDetectionStrategy.OnPush,
11723
+ imports: [AsyncPipe, AXButtonModule, AXDecoratorModule, AXTranslationModule],
11724
+ template: `
11725
+ <div class="ax-flex ax-flex-col ax-gap-2 ax-p-4">
11726
+ @for (method of methods; track method.type) {
11727
+ <ax-button
11728
+ look="outline"
11729
+ color="default"
11730
+ class="ax-w-full"
11731
+ [text]="method.label"
11732
+ (onClick)="selectMethod(method.type)"
11733
+ ></ax-button>
11734
+ }
11735
+ </div>
11736
+ <ax-footer>
11737
+ <ax-suffix>
11738
+ <ax-button
11739
+ look="outline"
11740
+ [text]="'@general:actions.cancel.title' | translate | async"
11741
+ (onClick)="close()"
11742
+ ></ax-button>
11743
+ </ax-suffix>
11744
+ </ax-footer>
11745
+ `,
11746
+ }]
11747
+ }] });
11748
+
11749
+ //#endregion
11750
+ //#region ---- Component ----
11751
+ class AXPIntegrationConnectionConnectPopupComponent extends AXBasePageComponent {
11752
+ constructor() {
11753
+ super(...arguments);
11754
+ this.displayName = signal('', ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
11755
+ this.instanceUrl = signal('', ...(ngDevMode ? [{ debugName: "instanceUrl" }] : /* istanbul ignore next */ []));
11756
+ this.credentialPrimary = signal('', ...(ngDevMode ? [{ debugName: "credentialPrimary" }] : /* istanbul ignore next */ []));
11757
+ this.credentialSecondary = signal('', ...(ngDevMode ? [{ debugName: "credentialSecondary" }] : /* istanbul ignore next */ []));
11758
+ }
11759
+ isOAuth() {
11760
+ return this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.OAuth2;
11761
+ }
11762
+ showSecondaryCredential() {
11763
+ return (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.Basic ||
11764
+ this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken);
11765
+ }
11766
+ primaryCredentialLabelKey() {
11767
+ if (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.Basic) {
11768
+ return `${this.i18nPrefix}.fields.username`;
11769
+ }
11770
+ if (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken) {
11771
+ return `${this.i18nPrefix}.fields.email`;
11772
+ }
11773
+ return `${this.i18nPrefix}.fields.token`;
11774
+ }
11775
+ primaryCredentialPlaceholderKey() {
11776
+ if (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.Basic) {
11777
+ return `${this.i18nPrefix}.placeholders.username`;
11778
+ }
11779
+ if (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken) {
11780
+ return `${this.i18nPrefix}.placeholders.email`;
11781
+ }
11782
+ return `${this.i18nPrefix}.placeholders.token`;
11783
+ }
11784
+ secondaryCredentialLabelKey() {
11785
+ if (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken) {
11786
+ return `${this.i18nPrefix}.fields.api-token`;
11787
+ }
11788
+ return `${this.i18nPrefix}.fields.password`;
11789
+ }
11790
+ secondaryCredentialPlaceholderKey() {
11791
+ if (this.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken) {
11792
+ return `${this.i18nPrefix}.placeholders.api-token`;
11793
+ }
11794
+ return `${this.i18nPrefix}.placeholders.password`;
11795
+ }
11796
+ handleDisplayNameChange(event) {
11797
+ if (!event.isUserInteraction) {
11798
+ return;
11799
+ }
11800
+ this.displayName.set(event.value ?? '');
11801
+ }
11802
+ handleInstanceUrlChange(event) {
11803
+ if (!event.isUserInteraction) {
11804
+ return;
11805
+ }
11806
+ this.instanceUrl.set(event.value ?? '');
11807
+ }
11808
+ handleCredentialPrimaryChange(event) {
11809
+ if (!event.isUserInteraction) {
11810
+ return;
11811
+ }
11812
+ this.credentialPrimary.set(event.value ?? '');
11813
+ }
11814
+ handleCredentialSecondaryChange(event) {
11815
+ if (!event.isUserInteraction) {
11816
+ return;
11817
+ }
11818
+ this.credentialSecondary.set(event.value ?? '');
11819
+ }
11820
+ confirmOAuth() {
11821
+ this.close({ confirmed: true });
11822
+ }
11823
+ saveCredentials() {
11824
+ this.close({
11825
+ displayName: this.displayName(),
11826
+ instanceUrl: this.instanceUrl(),
11827
+ credentialPrimary: this.credentialPrimary(),
11828
+ credentialSecondary: this.credentialSecondary(),
11829
+ });
11830
+ }
11831
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIntegrationConnectionConnectPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11832
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIntegrationConnectionConnectPopupComponent, isStandalone: true, selector: "axp-integration-connection-connect-popup", usesInheritance: true, ngImport: i0, template: `
11833
+ @if (isOAuth()) {
11834
+ <div class="ax-p-4 ax-text-sm ax-opacity-80">
11835
+ {{ i18nPrefix + '.dialogs.oauth.description' | translate | async }}
11836
+ </div>
11837
+ <ax-footer>
11838
+ <ax-suffix>
11839
+ <ax-button
11840
+ look="outline"
11841
+ [text]="'@general:actions.cancel.title' | translate | async"
11842
+ (onClick)="close()"
11843
+ ></ax-button>
11844
+ <ax-button
11845
+ color="primary"
11846
+ [text]="i18nPrefix + '.actions.connect' | translate | async"
11847
+ (onClick)="confirmOAuth()"
11848
+ >
11849
+ <ax-suffix>
11850
+ <ax-icon>
11851
+ <i class="fa-light fa-arrow-up-right-from-square"></i>
11852
+ </ax-icon>
11853
+ </ax-suffix>
11854
+ </ax-button>
11855
+ </ax-suffix>
11856
+ </ax-footer>
11857
+ } @else {
11858
+ <div class="ax-flex ax-flex-col ax-gap-3 ax-p-4">
11859
+ <ax-form-field>
11860
+ <ax-label>{{ i18nPrefix + '.fields.display-name' | translate | async }}</ax-label>
11861
+ <ax-text-box
11862
+ [ngModel]="displayName()"
11863
+ [placeholder]="(i18nPrefix + '.placeholders.display-name' | translate | async) ?? ''"
11864
+ (onValueChanged)="handleDisplayNameChange($event)"
11865
+ ></ax-text-box>
11866
+ </ax-form-field>
11867
+
11868
+ <ax-form-field>
11869
+ <ax-label>{{ i18nPrefix + '.fields.instance-url' | translate | async }}</ax-label>
11870
+ <ax-text-box
11871
+ [ngModel]="instanceUrl()"
11872
+ [placeholder]="(i18nPrefix + '.placeholders.instance-url' | translate | async) ?? ''"
11873
+ (onValueChanged)="handleInstanceUrlChange($event)"
11874
+ ></ax-text-box>
11875
+ </ax-form-field>
11876
+
11877
+ <ax-form-field>
11878
+ <ax-label>{{ primaryCredentialLabelKey() | translate | async }}</ax-label>
11879
+ <ax-text-box
11880
+ [ngModel]="credentialPrimary()"
11881
+ [placeholder]="primaryCredentialPlaceholderKey() | translate | async"
11882
+ (onValueChanged)="handleCredentialPrimaryChange($event)"
11883
+ ></ax-text-box>
11884
+ </ax-form-field>
11885
+
11886
+ @if (showSecondaryCredential()) {
11887
+ <ax-form-field>
11888
+ <ax-label>{{ secondaryCredentialLabelKey() | translate | async }}</ax-label>
11889
+ <ax-password-box
11890
+ [ngModel]="credentialSecondary()"
11891
+ [placeholder]="secondaryCredentialPlaceholderKey() | translate | async"
11892
+ (onValueChanged)="handleCredentialSecondaryChange($event)"
11893
+ ></ax-password-box>
11894
+ </ax-form-field>
11895
+ }
11896
+ </div>
11897
+ <ax-footer>
11898
+ <ax-suffix>
11899
+ <ax-button
11900
+ look="outline"
11901
+ [text]="'@general:actions.cancel.title' | translate | async"
11902
+ (onClick)="close()"
11903
+ ></ax-button>
11904
+ <ax-button
11905
+ color="primary"
11906
+ [text]="i18nPrefix + '.actions.save-connection' | translate | async"
11907
+ (onClick)="saveCredentials()"
11908
+ ></ax-button>
11909
+ </ax-suffix>
11910
+ </ax-footer>
11911
+ }
11912
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$3.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11913
+ }
11914
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIntegrationConnectionConnectPopupComponent, decorators: [{
11915
+ type: Component,
11916
+ args: [{
11917
+ selector: 'axp-integration-connection-connect-popup',
11918
+ changeDetection: ChangeDetectionStrategy.OnPush,
11919
+ imports: [
11920
+ AsyncPipe,
11921
+ FormsModule,
11922
+ AXButtonModule,
11923
+ AXDecoratorModule,
11924
+ AXFormModule,
11925
+ AXLabelModule,
11926
+ AXPasswordBoxModule,
11927
+ AXTextBoxModule,
11928
+ AXTranslationModule,
11929
+ ],
11930
+ template: `
11931
+ @if (isOAuth()) {
11932
+ <div class="ax-p-4 ax-text-sm ax-opacity-80">
11933
+ {{ i18nPrefix + '.dialogs.oauth.description' | translate | async }}
11934
+ </div>
11935
+ <ax-footer>
11936
+ <ax-suffix>
11937
+ <ax-button
11938
+ look="outline"
11939
+ [text]="'@general:actions.cancel.title' | translate | async"
11940
+ (onClick)="close()"
11941
+ ></ax-button>
11942
+ <ax-button
11943
+ color="primary"
11944
+ [text]="i18nPrefix + '.actions.connect' | translate | async"
11945
+ (onClick)="confirmOAuth()"
11946
+ >
11947
+ <ax-suffix>
11948
+ <ax-icon>
11949
+ <i class="fa-light fa-arrow-up-right-from-square"></i>
11950
+ </ax-icon>
11951
+ </ax-suffix>
11952
+ </ax-button>
11953
+ </ax-suffix>
11954
+ </ax-footer>
11955
+ } @else {
11956
+ <div class="ax-flex ax-flex-col ax-gap-3 ax-p-4">
11957
+ <ax-form-field>
11958
+ <ax-label>{{ i18nPrefix + '.fields.display-name' | translate | async }}</ax-label>
11959
+ <ax-text-box
11960
+ [ngModel]="displayName()"
11961
+ [placeholder]="(i18nPrefix + '.placeholders.display-name' | translate | async) ?? ''"
11962
+ (onValueChanged)="handleDisplayNameChange($event)"
11963
+ ></ax-text-box>
11964
+ </ax-form-field>
11965
+
11966
+ <ax-form-field>
11967
+ <ax-label>{{ i18nPrefix + '.fields.instance-url' | translate | async }}</ax-label>
11968
+ <ax-text-box
11969
+ [ngModel]="instanceUrl()"
11970
+ [placeholder]="(i18nPrefix + '.placeholders.instance-url' | translate | async) ?? ''"
11971
+ (onValueChanged)="handleInstanceUrlChange($event)"
11972
+ ></ax-text-box>
11973
+ </ax-form-field>
11974
+
11975
+ <ax-form-field>
11976
+ <ax-label>{{ primaryCredentialLabelKey() | translate | async }}</ax-label>
11977
+ <ax-text-box
11978
+ [ngModel]="credentialPrimary()"
11979
+ [placeholder]="primaryCredentialPlaceholderKey() | translate | async"
11980
+ (onValueChanged)="handleCredentialPrimaryChange($event)"
11981
+ ></ax-text-box>
11982
+ </ax-form-field>
11983
+
11984
+ @if (showSecondaryCredential()) {
11985
+ <ax-form-field>
11986
+ <ax-label>{{ secondaryCredentialLabelKey() | translate | async }}</ax-label>
11987
+ <ax-password-box
11988
+ [ngModel]="credentialSecondary()"
11989
+ [placeholder]="secondaryCredentialPlaceholderKey() | translate | async"
11990
+ (onValueChanged)="handleCredentialSecondaryChange($event)"
11991
+ ></ax-password-box>
11992
+ </ax-form-field>
11993
+ }
11994
+ </div>
11995
+ <ax-footer>
11996
+ <ax-suffix>
11997
+ <ax-button
11998
+ look="outline"
11999
+ [text]="'@general:actions.cancel.title' | translate | async"
12000
+ (onClick)="close()"
12001
+ ></ax-button>
12002
+ <ax-button
12003
+ color="primary"
12004
+ [text]="i18nPrefix + '.actions.save-connection' | translate | async"
12005
+ (onClick)="saveCredentials()"
12006
+ ></ax-button>
12007
+ </ax-suffix>
12008
+ </ax-footer>
12009
+ }
12010
+ `,
12011
+ }]
12012
+ }] });
12013
+
12014
+ //#region ---- Imports ----
12015
+ //#endregion
12016
+ //#region ---- Component ----
12017
+ class AXPIntegrationConnectionsPanelWidgetEditComponent extends AXPValueWidgetComponent {
12018
+ //#endregion
12019
+ //#region ---- Lifecycle ----
12020
+ constructor() {
12021
+ super();
12022
+ //#region ---- Constants ----
12023
+ this.I18N = '@platform-layout-widgets:widgets.integration-connections-panel';
12024
+ //#endregion
12025
+ //#region ---- Services & Dependencies ----
12026
+ this.queryService = inject(AXPQueryService);
12027
+ this.commandService = inject(AXPCommandService);
12028
+ this.sessionService = inject(AXPSessionService);
12029
+ this.providerRegistry = inject(AXPIntegrationProviderRegistryService);
12030
+ this.translationService = inject(AXTranslationService);
12031
+ this.popupService = inject(AXPopupService);
12032
+ //#endregion
12033
+ //#region ---- Computed ----
12034
+ this.providerIdFilter = computed(() => this.options()['providerId'], ...(ngDevMode ? [{ debugName: "providerIdFilter" }] : /* istanbul ignore next */ []));
12035
+ this.visibleProviders = computed(() => {
12036
+ const filter = this.providerIdFilter();
12037
+ const list = this.providers();
12038
+ if (!filter) {
12039
+ return list;
12040
+ }
12041
+ return list.filter((provider) => provider.id === filter);
12042
+ }, ...(ngDevMode ? [{ debugName: "visibleProviders" }] : /* istanbul ignore next */ []));
12043
+ //#endregion
12044
+ //#region ---- State ----
12045
+ this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
12046
+ this.providers = signal([], ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
12047
+ this.connections = signal([], ...(ngDevMode ? [{ debugName: "connections" }] : /* istanbul ignore next */ []));
12048
+ this.authMethodOptions = signal({}, ...(ngDevMode ? [{ debugName: "authMethodOptions" }] : /* istanbul ignore next */ []));
12049
+ this.selectedAuthMethod = signal({}, ...(ngDevMode ? [{ debugName: "selectedAuthMethod" }] : /* istanbul ignore next */ []));
12050
+ this.formDisplayName = signal({}, ...(ngDevMode ? [{ debugName: "formDisplayName" }] : /* istanbul ignore next */ []));
12051
+ this.formInstanceUrl = signal({}, ...(ngDevMode ? [{ debugName: "formInstanceUrl" }] : /* istanbul ignore next */ []));
12052
+ this.formCredentialPrimary = signal({}, ...(ngDevMode ? [{ debugName: "formCredentialPrimary" }] : /* istanbul ignore next */ []));
12053
+ this.translationService.langChanges$.subscribe(() => {
12054
+ void this.refreshAuthMethodOptions(this.providers());
12055
+ });
12056
+ void this.load();
12057
+ }
12058
+ //#endregion
12059
+ //#region ---- Connection Helpers ----
12060
+ getConnection(providerId) {
12061
+ return this.connections().find((item) => item.providerId === providerId);
12062
+ }
12063
+ isConnectedOAuth(providerId) {
12064
+ const connection = this.getConnection(providerId);
12065
+ return connection?.authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.OAuth2;
12066
+ }
12067
+ connectedPrimaryValue(providerId) {
12068
+ const connection = this.getConnection(providerId);
12069
+ return defaultTo(this.formCredentialPrimary()[providerId], defaultTo(connection?.externalAccountName, ''));
12070
+ }
12071
+ connectedSecretPreview(providerId) {
12072
+ return defaultTo(this.getConnection(providerId)?.secretPreview, '');
12073
+ }
12074
+ //#endregion
12075
+ //#region ---- Auth Method Helpers ----
12076
+ hasMultipleAuthMethods(provider) {
12077
+ return provider.authMethodTypes.length > 1;
12078
+ }
12079
+ isOAuth(providerId) {
12080
+ return this.selectedAuthMethod()[providerId] === AXP_INTEGRATION_AUTH_METHOD_TYPE.OAuth2;
12081
+ }
12082
+ isBasic(providerId) {
12083
+ return this.selectedAuthMethod()[providerId] === AXP_INTEGRATION_AUTH_METHOD_TYPE.Basic;
12084
+ }
12085
+ isApiToken(providerId) {
12086
+ return this.selectedAuthMethod()[providerId] === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken;
12087
+ }
12088
+ showSecondaryCredential(providerId) {
12089
+ return this.isBasic(providerId) || this.isApiToken(providerId);
12090
+ }
12091
+ primaryCredentialLabelKey(providerId) {
12092
+ if (this.isBasic(providerId)) {
12093
+ return `${this.I18N}.fields.username`;
12094
+ }
12095
+ if (this.isApiToken(providerId)) {
12096
+ return `${this.I18N}.fields.email`;
12097
+ }
12098
+ return `${this.I18N}.fields.token`;
12099
+ }
12100
+ secondaryCredentialLabelKey(providerId) {
12101
+ if (this.isApiToken(providerId)) {
12102
+ return `${this.I18N}.fields.api-token`;
12103
+ }
12104
+ return `${this.I18N}.fields.password`;
12105
+ }
12106
+ //#endregion
12107
+ //#region ---- Connect Flow ----
12108
+ async handleConnect(provider) {
12109
+ let authMethodType = provider.authMethodTypes[0];
12110
+ if (this.hasMultipleAuthMethods(provider)) {
12111
+ const selected = await this.openAuthMethodPicker(provider);
12112
+ if (!selected) {
12113
+ return;
12114
+ }
12115
+ authMethodType = selected;
12116
+ }
12117
+ this.setAuthMethod(provider.id, authMethodType);
12118
+ await this.openConnectPopup(provider, authMethodType);
12119
+ }
12120
+ async openAuthMethodPicker(provider) {
12121
+ const title = await this.translationService.translateAsync(`${this.I18N}.dialogs.select-auth-method.title`);
12122
+ const result = await this.popupService.open(AXPIntegrationConnectionAuthMethodPopupComponent, {
12123
+ title,
12124
+ size: 'sm',
12125
+ data: {
12126
+ methods: this.authMethodOptions()[provider.id] ?? [],
12127
+ },
12128
+ });
12129
+ return result?.data?.authMethodType ?? null;
12130
+ }
12131
+ async openConnectPopup(provider, authMethodType) {
12132
+ const isOAuth = authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.OAuth2;
12133
+ const titleKey = isOAuth
12134
+ ? `${this.I18N}.dialogs.oauth.title`
12135
+ : `${this.I18N}.dialogs.credentials.title`;
12136
+ const title = await this.translationService.translateAsync(titleKey);
12137
+ const result = await this.popupService.open(AXPIntegrationConnectionConnectPopupComponent, {
12138
+ title,
12139
+ size: isOAuth ? 'sm' : 'md',
12140
+ data: {
12141
+ authMethodType,
12142
+ i18nPrefix: this.I18N,
12143
+ providerDisplayName: provider.displayName,
12144
+ },
12145
+ });
12146
+ if (!result?.data) {
12147
+ return;
12148
+ }
12149
+ if (isOAuth) {
12150
+ if (get(result.data, 'confirmed')) {
12151
+ await this.startOAuth(provider);
12152
+ }
12153
+ return;
12154
+ }
12155
+ await this.connectWithCredentials(provider, authMethodType, result.data);
12156
+ }
12157
+ //#endregion
12158
+ //#region ---- Connection Actions ----
12159
+ async connectWithCredentials(provider, authMethodType, form) {
12160
+ const credentials = authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.Basic
12161
+ ? { username: form.credentialPrimary, password: form.credentialSecondary }
12162
+ : authMethodType === AXP_INTEGRATION_AUTH_METHOD_TYPE.ApiToken
12163
+ ? { email: form.credentialPrimary, apiToken: form.credentialSecondary }
12164
+ : { token: form.credentialPrimary };
12165
+ await this.commandService.execute('IntegrationManagement.Connection:ConnectWithCredentials', {
12166
+ providerId: provider.id,
12167
+ authMethodType,
12168
+ connectionScope: 'user',
12169
+ displayName: defaultTo(form.displayName, provider.id),
12170
+ instanceUrl: form.instanceUrl,
12171
+ credentials,
12172
+ });
12173
+ await this.load();
12174
+ }
12175
+ async startOAuth(provider) {
12176
+ const appName = this.sessionService.application?.name ?? 'demo';
12177
+ const redirectUri = `${window.location.origin}/${appName}/integrations/oauth/callback/${provider.id}`;
12178
+ const result = await this.commandService.execute('IntegrationManagement.Connection:StartOAuthAuthorization', {
12179
+ providerId: provider.id,
12180
+ connectionScope: 'user',
12181
+ displayName: provider.id,
12182
+ redirectUri,
12183
+ });
12184
+ const redirectUrl = get(result, 'data.redirectUrl');
12185
+ if (redirectUrl) {
12186
+ window.location.assign(redirectUrl);
12187
+ }
12188
+ }
12189
+ async disconnect(providerId) {
12190
+ const connection = this.getConnection(providerId);
12191
+ if (!connection) {
12192
+ return;
12193
+ }
12194
+ await this.commandService.execute('IntegrationManagement.Connection:Disconnect', {
12195
+ connectionId: connection.id,
12196
+ });
12197
+ await this.load();
12198
+ }
12199
+ //#endregion
12200
+ //#region ---- Form State ----
12201
+ setAuthMethod(providerId, method) {
12202
+ this.selectedAuthMethod.update((state) => ({ ...state, [providerId]: method }));
12203
+ }
12204
+ populateConnectionFormState(providers, connections) {
12205
+ const authDefaults = {};
12206
+ const displayNames = {};
12207
+ const instanceUrls = {};
12208
+ const credentialPrimary = {};
12209
+ for (const provider of providers) {
12210
+ authDefaults[provider.id] = provider.authMethodTypes[0];
12211
+ }
12212
+ for (const connection of connections) {
12213
+ authDefaults[connection.providerId] = connection.authMethodType;
12214
+ displayNames[connection.providerId] = connection.displayName;
12215
+ instanceUrls[connection.providerId] = defaultTo(connection.instanceUrl, '');
12216
+ if (connection.externalAccountName) {
12217
+ credentialPrimary[connection.providerId] = connection.externalAccountName;
12218
+ }
12219
+ }
12220
+ this.selectedAuthMethod.set(authDefaults);
12221
+ this.formDisplayName.set(displayNames);
12222
+ this.formInstanceUrl.set(instanceUrls);
12223
+ this.formCredentialPrimary.set(credentialPrimary);
12224
+ }
12225
+ //#endregion
12226
+ //#region ---- Data Loading ----
12227
+ async load() {
12228
+ this.loading.set(true);
12229
+ try {
12230
+ const providersResult = await this.queryService.fetch('IntegrationManagement.Provider:List', { includeConnectionStatus: true });
12231
+ const connectionsResult = await this.queryService.fetch('IntegrationManagement.Connection:ListMine', {});
12232
+ const providers = providersResult ?? [];
12233
+ const connections = connectionsResult ?? [];
12234
+ this.providers.set(providers);
12235
+ this.connections.set(connections);
12236
+ this.populateConnectionFormState(providers, connections);
12237
+ await this.refreshAuthMethodOptions(providers);
12238
+ }
12239
+ finally {
12240
+ this.loading.set(false);
12241
+ }
12242
+ }
12243
+ async refreshAuthMethodOptions(providers) {
12244
+ const options = {};
12245
+ for (const provider of providers) {
12246
+ const definition = await this.providerRegistry.get(provider.id);
12247
+ const methods = definition?.authMethods ?? [];
12248
+ options[provider.id] = await Promise.all(methods.map(async (method) => ({
12249
+ type: method.type,
12250
+ label: await this.translationService.translateAsync(method.label),
12251
+ })));
12252
+ }
12253
+ this.authMethodOptions.set(options);
12254
+ }
12255
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12256
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIntegrationConnectionsPanelWidgetEditComponent, isStandalone: true, selector: "axp-integration-connections-panel-widget-edit", usesInheritance: true, ngImport: i0, template: `
12257
+ <div class="ax-flex ax-w-full ax-flex-col ax-gap-4">
12258
+ @if (loading()) {
12259
+ <ax-loading></ax-loading>
12260
+ } @else {
12261
+ @for (provider of visibleProviders(); track provider.id) {
12262
+ <section
12263
+ class="ax-flex ax-flex-col ax-gap-4 ax-rounded-lg ax-border ax-border-surface ax-bg-lighter-surface ax-p-4"
12264
+ >
12265
+ <div class="ax-flex ax-items-start ax-justify-between ax-gap-3">
12266
+ <div class="ax-flex ax-min-w-0 ax-items-center ax-gap-3">
12267
+ @if (provider.icon) {
12268
+ <ax-icon class="ax-text-lg">
12269
+ <i [class]="provider.icon"></i>
12270
+ </ax-icon>
12271
+ }
12272
+ <div class="ax-min-w-0">
12273
+ <div class="ax-font-medium">{{ provider.displayName | translate | async }}</div>
12274
+ @if (provider.description) {
12275
+ <div class="ax-text-sm ax-opacity-70">{{ provider.description | translate | async }}</div>
12276
+ }
12277
+ </div>
12278
+ </div>
12279
+
12280
+ @if (provider.isConnected) {
12281
+ <ax-button
12282
+ size="sm"
12283
+ look="outline"
12284
+ color="danger"
12285
+ [text]="I18N + '.actions.disconnect' | translate | async"
12286
+ (onClick)="disconnect(provider.id)"
12287
+ ></ax-button>
12288
+ } @else {
12289
+ <ax-button
12290
+ size="sm"
12291
+ look="outline"
12292
+ color="primary"
12293
+ [text]="I18N + '.actions.connect' | translate | async"
12294
+ (onClick)="handleConnect(provider)"
12295
+ ></ax-button>
12296
+ }
12297
+ </div>
12298
+
12299
+ @if (provider.isConnected && !isConnectedOAuth(provider.id)) {
12300
+ <div class="ax-flex ax-flex-col ax-gap-3">
12301
+ <ax-form-field>
12302
+ <ax-label>{{ I18N + '.fields.display-name' | translate | async }}</ax-label>
12303
+ <ax-text-box
12304
+ [readonly]="true"
12305
+ [ngModel]="formDisplayName()[provider.id]"
12306
+ ></ax-text-box>
12307
+ </ax-form-field>
12308
+
12309
+ <ax-form-field>
12310
+ <ax-label>{{ I18N + '.fields.instance-url' | translate | async }}</ax-label>
12311
+ <ax-text-box
12312
+ [readonly]="true"
12313
+ [ngModel]="formInstanceUrl()[provider.id]"
12314
+ ></ax-text-box>
12315
+ </ax-form-field>
12316
+
12317
+ <ax-form-field>
12318
+ <ax-label>{{ primaryCredentialLabelKey(provider.id) | translate | async }}</ax-label>
12319
+ <ax-text-box
12320
+ [readonly]="true"
12321
+ [ngModel]="connectedPrimaryValue(provider.id)"
12322
+ [placeholder]="connectedSecretPreview(provider.id)"
12323
+ ></ax-text-box>
12324
+ </ax-form-field>
12325
+
12326
+ @if (showSecondaryCredential(provider.id)) {
12327
+ <ax-form-field>
12328
+ <ax-label>{{ secondaryCredentialLabelKey(provider.id) | translate | async }}</ax-label>
12329
+ <ax-password-box
12330
+ [readonly]="true"
12331
+ [ngModel]="''"
12332
+ [placeholder]="connectedSecretPreview(provider.id)"
12333
+ ></ax-password-box>
12334
+ </ax-form-field>
12335
+ }
12336
+ </div>
12337
+ }
12338
+ </section>
12339
+ }
12340
+ }
12341
+ </div>
12342
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$3.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12343
+ }
12344
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, decorators: [{
12345
+ type: Component,
12346
+ args: [{
12347
+ selector: 'axp-integration-connections-panel-widget-edit',
12348
+ template: `
12349
+ <div class="ax-flex ax-w-full ax-flex-col ax-gap-4">
12350
+ @if (loading()) {
12351
+ <ax-loading></ax-loading>
12352
+ } @else {
12353
+ @for (provider of visibleProviders(); track provider.id) {
12354
+ <section
12355
+ class="ax-flex ax-flex-col ax-gap-4 ax-rounded-lg ax-border ax-border-surface ax-bg-lighter-surface ax-p-4"
12356
+ >
12357
+ <div class="ax-flex ax-items-start ax-justify-between ax-gap-3">
12358
+ <div class="ax-flex ax-min-w-0 ax-items-center ax-gap-3">
12359
+ @if (provider.icon) {
12360
+ <ax-icon class="ax-text-lg">
12361
+ <i [class]="provider.icon"></i>
12362
+ </ax-icon>
12363
+ }
12364
+ <div class="ax-min-w-0">
12365
+ <div class="ax-font-medium">{{ provider.displayName | translate | async }}</div>
12366
+ @if (provider.description) {
12367
+ <div class="ax-text-sm ax-opacity-70">{{ provider.description | translate | async }}</div>
12368
+ }
12369
+ </div>
12370
+ </div>
12371
+
12372
+ @if (provider.isConnected) {
12373
+ <ax-button
12374
+ size="sm"
12375
+ look="outline"
12376
+ color="danger"
12377
+ [text]="I18N + '.actions.disconnect' | translate | async"
12378
+ (onClick)="disconnect(provider.id)"
12379
+ ></ax-button>
12380
+ } @else {
12381
+ <ax-button
12382
+ size="sm"
12383
+ look="outline"
12384
+ color="primary"
12385
+ [text]="I18N + '.actions.connect' | translate | async"
12386
+ (onClick)="handleConnect(provider)"
12387
+ ></ax-button>
12388
+ }
12389
+ </div>
12390
+
12391
+ @if (provider.isConnected && !isConnectedOAuth(provider.id)) {
12392
+ <div class="ax-flex ax-flex-col ax-gap-3">
12393
+ <ax-form-field>
12394
+ <ax-label>{{ I18N + '.fields.display-name' | translate | async }}</ax-label>
12395
+ <ax-text-box
12396
+ [readonly]="true"
12397
+ [ngModel]="formDisplayName()[provider.id]"
12398
+ ></ax-text-box>
12399
+ </ax-form-field>
12400
+
12401
+ <ax-form-field>
12402
+ <ax-label>{{ I18N + '.fields.instance-url' | translate | async }}</ax-label>
12403
+ <ax-text-box
12404
+ [readonly]="true"
12405
+ [ngModel]="formInstanceUrl()[provider.id]"
12406
+ ></ax-text-box>
12407
+ </ax-form-field>
12408
+
12409
+ <ax-form-field>
12410
+ <ax-label>{{ primaryCredentialLabelKey(provider.id) | translate | async }}</ax-label>
12411
+ <ax-text-box
12412
+ [readonly]="true"
12413
+ [ngModel]="connectedPrimaryValue(provider.id)"
12414
+ [placeholder]="connectedSecretPreview(provider.id)"
12415
+ ></ax-text-box>
12416
+ </ax-form-field>
12417
+
12418
+ @if (showSecondaryCredential(provider.id)) {
12419
+ <ax-form-field>
12420
+ <ax-label>{{ secondaryCredentialLabelKey(provider.id) | translate | async }}</ax-label>
12421
+ <ax-password-box
12422
+ [readonly]="true"
12423
+ [ngModel]="''"
12424
+ [placeholder]="connectedSecretPreview(provider.id)"
12425
+ ></ax-password-box>
12426
+ </ax-form-field>
12427
+ }
12428
+ </div>
12429
+ }
12430
+ </section>
12431
+ }
12432
+ }
12433
+ </div>
12434
+ `,
12435
+ changeDetection: ChangeDetectionStrategy.OnPush,
12436
+ imports: [
12437
+ AsyncPipe,
12438
+ FormsModule,
12439
+ AXButtonModule,
12440
+ AXDecoratorModule,
12441
+ AXFormModule,
12442
+ AXLabelModule,
12443
+ AXLoadingModule,
12444
+ AXPasswordBoxModule,
12445
+ AXTextBoxModule,
12446
+ AXTranslationModule,
12447
+ ],
12448
+ }]
12449
+ }], ctorParameters: () => [] });
12450
+
12451
+ var integrationConnectionsPanelWidgetEdit_component = /*#__PURE__*/Object.freeze({
12452
+ __proto__: null,
12453
+ AXPIntegrationConnectionsPanelWidgetEditComponent: AXPIntegrationConnectionsPanelWidgetEditComponent
12454
+ });
12455
+
11649
12456
  //#region ---- Imports ----
11650
12457
  //#endregion
11651
12458
  //#region ---- Component ----
@@ -12321,7 +13128,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
12321
13128
  }
12322
13129
  }
12323
13130
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
12324
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n <div class=\"ax-flex ax-justify-center\">\n <!-- QR Code Container -->\n <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n <!-- QR Code Display or Empty Placeholder -->\n @if (value()) {\n <!-- Display QR Code when value exists -->\n <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n </ax-qrcode>\n } @else {\n <!-- Empty State: Show placeholder when value is null or empty -->\n <div\n class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n >\n <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n <div class=\"ax-text-sm ax-text-gray-500\">\n {{ '@general:state-message.empty.title' | translate | async }}\n </div>\n </div>\n }\n\n <!-- Action Buttons Section -->\n @if (!readonly()) {\n <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n <!-- Edit Button: Opens popover to edit QR code content -->\n <ax-button\n #editBtn\n look=\"twotone\"\n [title]=\"('@general:actions.edit.title' | translate | async)!\"\n (onClick)=\"beginEdit()\"\n >\n <!-- Edit Popover: Text input for editing QR code content -->\n <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n <div\n class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\"\n >\n <!-- Text Input for QR Code Content -->\n <ax-text-box\n [value]=\"draft()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"placeholder() | translate | async\"\n (onValueChanged)=\"onDraftChange($event)\"\n >\n @if (hasClearButton()) {\n <ax-clear-button></ax-clear-button>\n }\n </ax-text-box>\n <!-- Popover Action Buttons -->\n <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n <ax-button\n look=\"outline\"\n class=\"ax-sm\"\n [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n (onClick)=\"cancelEdit(); po.close()\"\n ></ax-button>\n <ax-button\n look=\"solid\"\n class=\"ax-sm\"\n color=\"primary\"\n [text]=\"('@general:actions.submit.title' | translate | async)!\"\n (onClick)=\"applyDraft(); po.close()\"\n ></ax-button>\n </div>\n </div>\n </ax-popover>\n <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n </ax-button>\n\n <!-- Upload Button: Upload text file to set QR code content -->\n <!-- <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.upload.title' | translate | async)!\"\n (onClick)=\"fileInput.click()\"\n >\n <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n </ax-button> -->\n\n <!-- Export Button: Download QR code as image (only shown when value exists) -->\n @if (value()) {\n <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.preview.title' | translate | async)!\"\n (onClick)=\"openPreview()\"\n >\n <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n </ax-button>\n\n <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.export.title' | translate | async)!\"\n (onClick)=\"downloadQr(qr)\"\n >\n <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n </ax-button>\n }\n\n <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n @if (!readonly() && value()) {\n <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.delete.title' | translate | async)!\"\n (onClick)=\"clearValue()\"\n >\n <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13131
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n <div class=\"ax-flex ax-justify-center\">\n <!-- QR Code Container -->\n <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-3\" #qr>\n <!-- QR Code Display or Empty Placeholder -->\n @if (value()) {\n <!-- Display QR Code when value exists -->\n <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n </ax-qrcode>\n } @else {\n <!-- Empty State: Show placeholder when value is null or empty -->\n <div\n class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n >\n <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n <div class=\"ax-text-sm ax-text-gray-500\">\n {{ '@general:state-message.empty.title' | translate | async }}\n </div>\n </div>\n }\n\n <!-- Action Buttons Section -->\n @if (!readonly()) {\n <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-pt-4\">\n <!-- Edit Button: Opens popover to edit QR code content -->\n <ax-button\n #editBtn\n look=\"twotone\"\n [title]=\"('@general:actions.edit.title' | translate | async)!\"\n (onClick)=\"beginEdit()\"\n >\n <!-- Edit Popover: Text input for editing QR code content -->\n <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n <div\n class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-w-96\"\n >\n <!-- Text Input for QR Code Content -->\n <ax-text-box\n [value]=\"draft()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"placeholder() | translate | async\"\n (onValueChanged)=\"onDraftChange($event)\"\n >\n @if (hasClearButton()) {\n <ax-clear-button></ax-clear-button>\n }\n </ax-text-box>\n <!-- Popover Action Buttons -->\n <div class=\"ax-flex ax-justify-end ax-gap-2 ax-mt-3\">\n <ax-button\n look=\"outline\"\n class=\"ax-sm\"\n [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n (onClick)=\"cancelEdit(); po.close()\"\n ></ax-button>\n <ax-button\n look=\"solid\"\n class=\"ax-sm\"\n color=\"primary\"\n [text]=\"('@general:actions.submit.title' | translate | async)!\"\n (onClick)=\"applyDraft(); po.close()\"\n ></ax-button>\n </div>\n </div>\n </ax-popover>\n <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n </ax-button>\n\n <!-- Upload Button: Upload text file to set QR code content -->\n <!-- <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.upload.title' | translate | async)!\"\n (onClick)=\"fileInput.click()\"\n >\n <input #fileInput type=\"file\" accept=\"text/plain\" class=\"ax-hidden\" (change)=\"onFileSelected($event)\" />\n <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n </ax-button> -->\n\n <!-- Export Button: Download QR code as image (only shown when value exists) -->\n @if (value()) {\n <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.preview.title' | translate | async)!\"\n (onClick)=\"openPreview()\"\n >\n <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n </ax-button>\n\n <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.export.title' | translate | async)!\"\n (onClick)=\"downloadQr(qr)\"\n >\n <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n </ax-button>\n }\n\n <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n @if (!readonly() && value()) {\n <ax-button\n look=\"twotone\"\n [title]=\"('@general:actions.delete.title' | translate | async)!\"\n (onClick)=\"clearValue()\"\n >\n <ax-icon icon=\"ax-text-danger fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12325
13132
  }
12326
13133
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
12327
13134
  type: Component,
@@ -13357,7 +14164,7 @@ class AXPStatusChipComponent {
13357
14164
  </div>
13358
14165
  </ax-popover>
13359
14166
  }
13360
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
14167
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13361
14168
  }
13362
14169
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStatusChipComponent, decorators: [{
13363
14170
  type: Component,
@@ -16499,6 +17306,9 @@ const AXPPageWidget = {
16499
17306
  },
16500
17307
  };
16501
17308
 
17309
+ const AXP_REPEATER_ENTITY_BY_KEY_LOOKUP = new InjectionToken('AXP_REPEATER_ENTITY_BY_KEY_LOOKUP');
17310
+ //#endregion
17311
+
16502
17312
  class AXPRepeaterWidgetDesignerComponent extends AXPValueWidgetComponent {
16503
17313
  constructor() {
16504
17314
  super(...arguments);
@@ -16819,7 +17629,7 @@ const AXPRepeaterWidget = {
16819
17629
  component: () => Promise.resolve().then(function () { return repeaterWidgetDesigner_component; }).then((c) => c.AXPRepeaterWidgetDesignerComponent),
16820
17630
  },
16821
17631
  column: {
16822
- component: () => import('./acorex-platform-layout-widgets-repeater-widget-column.component-J0zcGKBX.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
17632
+ component: () => import('./acorex-platform-layout-widgets-repeater-widget-column.component-CFyfix31.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
16823
17633
  },
16824
17634
  },
16825
17635
  };
@@ -18902,7 +19712,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPValueWidgetComponent {
18902
19712
  }
18903
19713
  }
18904
19714
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
18905
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-pb-4\">\n <ax-selection-list\n [direction]=\"'horizontal'\"\n [items]=\"selectionItems\"\n [look]=\"'card'\"\n [customTemplate]=\"customTemplate\"\n [showControl]=\"false\"\n [ngModel]=\"currentBreakpoint()\"\n (onValueChanged)=\"changeBreakPoint($event)\"\n ></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n @let data = item.data;\n <div [class]=\"isBreakpointConfigured()[data.id] ? 'ax-text-primary-300' : ''\">\n {{ data.text }}\n </div>\n</ng-template>\n<ax-button\n color=\"primary\"\n text=\"Reset\"\n [disabled]=\"currentBreakpoint() === 'default'\"\n (click)=\"resetBreakpoint()\"\n></ax-button>\n\n<div class=\"axp-grid-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n <span> Direction </span>\n <div>\n <ax-button-group [selection]=\"'single'\">\n <ax-button-group-item (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n ><ax-prefix\n ><svg\n data-wf-icon=\"FlexFlowWrapIcon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n fill=\"currentColor\"\n ></path>\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n ><ax-prefix\n ><svg\n data-wf-icon=\"FlexFlowColumnWrapIcon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n fill=\"currentColor\"\n ></path>\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n </ax-button-group>\n </div>\n <span>Grid</span>\n <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-1\">\n <span class=\"ax-text-xs\">Row</span>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"12\"\n [value]=\"rows()\"\n (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n [changeOnScroll]=\"true\"\n [showSpinButtons]=\"false\"\n class=\"ax-sm ax-max-w-12\"\n ></ax-number-box>\n <span class=\"ax-text-xs\">Column</span>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"12\"\n [value]=\"columns()\"\n (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n [changeOnScroll]=\"true\"\n [showSpinButtons]=\"false\"\n class=\"ax-sm ax-max-w-12\"\n ></ax-number-box>\n <!-- <button>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </button> -->\n </div>\n\n <span>Align</span>\n <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n <div\n class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n >\n <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n @for (side of gridSides; track side.value) {\n <div\n [attr.aria-label]=\"side.label\"\n [attr.aria-value]=\"side.value\"\n class=\"ax-grid ax-place-content-center\"\n (mouseenter)=\"onHover(side)\"\n (mouseleave)=\"onHoverLeave()\"\n (click)=\"onClick(side)\"\n >\n @if (true) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n </svg>\n }\n </div>\n }\n </div>\n @if (hoveredJustify() && hoveredAlign()) {\n <div\n class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"hoveredJustify()\"\n [style.align-items]=\"hoveredAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n } @else if (clickedJustify() === 'stretch') {\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'stretch') {\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else {\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n class=\"hover:fill-opacity-20\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n }\n\n <div\n class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"clickedJustify()\"\n [style.align-items]=\"clickedAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n <svg\n width=\"60\"\n height=\"60\"\n viewBox=\"0 0 60 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n <path\n d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n <path\n d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n </svg>\n } @else if (clickedJustify() === 'stretch') {\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'stretch') {\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else {\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill: #cebcbc; fill-opacity: 0.16\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n <span>X:</span>\n <div class=\"ax-w-24\">\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"justifyDataSource\"\n [value]=\"selectedJustify()\"\n (onValueChanged)=\"onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n <span>Y:</span>\n <div class=\"ax-w-24\">\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"alignDataSource\"\n [value]=\"selectedAlign()\"\n (onValueChanged)=\"onAlignChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n </div>\n </div>\n\n <span>Gap</span>\n <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n @if (gapMode() === 'single') {\n <ax-range-slider\n class=\"ax-w-32\"\n [values]=\"gap().x\"\n (valuesChange)=\"setGap($event ?? 0, 'both')\"\n ></ax-range-slider>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().x\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n [changeOnScroll]=\"true\"\n class=\"ax-sm ax-min-w-6\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n } @else {\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n <span class=\"ax-text-xs\"\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg ></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().x\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n [changeOnScroll]=\"true\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n <span class=\"ax-text-xs\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().y\"\n [changeOnScroll]=\"true\"\n (valueChange)=\"setGap($event ?? 0, 'y')\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n </div>\n }\n <button (click)=\"toggleGapMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (gapMode() === 'single') {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n fill=\"currentColor\"\n ></path>\n } @else {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n fill=\"currentColor\"\n ></path>\n }\n </svg>\n </button>\n </div>\n</div>\n", styles: ["axp-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{flex-wrap:nowrap;overflow:auto;padding-bottom:.5rem;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$5.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
19715
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-pb-4\">\n <ax-selection-list\n [direction]=\"'horizontal'\"\n [items]=\"selectionItems\"\n [look]=\"'card'\"\n [customTemplate]=\"customTemplate\"\n [showControl]=\"false\"\n [ngModel]=\"currentBreakpoint()\"\n (onValueChanged)=\"changeBreakPoint($event)\"\n ></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n @let data = item.data;\n <div [class]=\"isBreakpointConfigured()[data.id] ? 'ax-text-primary-300' : ''\">\n {{ data.text }}\n </div>\n</ng-template>\n<ax-button\n color=\"primary\"\n text=\"Reset\"\n [disabled]=\"currentBreakpoint() === 'default'\"\n (click)=\"resetBreakpoint()\"\n></ax-button>\n\n<div class=\"axp-grid-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n <span> Direction </span>\n <div>\n <ax-button-group [selection]=\"'single'\">\n <ax-button-group-item (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n ><ax-prefix\n ><svg\n data-wf-icon=\"FlexFlowWrapIcon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n fill=\"currentColor\"\n ></path>\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n ><ax-prefix\n ><svg\n data-wf-icon=\"FlexFlowColumnWrapIcon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n fill=\"currentColor\"\n ></path>\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n </ax-button-group>\n </div>\n <span>Grid</span>\n <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-1\">\n <span class=\"ax-text-xs\">Row</span>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"12\"\n [value]=\"rows()\"\n (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n [changeOnScroll]=\"true\"\n [showSpinButtons]=\"false\"\n class=\"ax-sm ax-max-w-12\"\n ></ax-number-box>\n <span class=\"ax-text-xs\">Column</span>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"12\"\n [value]=\"columns()\"\n (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n [changeOnScroll]=\"true\"\n [showSpinButtons]=\"false\"\n class=\"ax-sm ax-max-w-12\"\n ></ax-number-box>\n <!-- <button>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </button> -->\n </div>\n\n <span>Align</span>\n <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n <div\n class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n >\n <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n @for (side of gridSides; track side.value) {\n <div\n [attr.aria-label]=\"side.label\"\n [attr.aria-value]=\"side.value\"\n class=\"ax-grid ax-place-content-center\"\n (mouseenter)=\"onHover(side)\"\n (mouseleave)=\"onHoverLeave()\"\n (click)=\"onClick(side)\"\n >\n @if (true) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n </svg>\n }\n </div>\n }\n </div>\n @if (hoveredJustify() && hoveredAlign()) {\n <div\n class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"hoveredJustify()\"\n [style.align-items]=\"hoveredAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n } @else if (clickedJustify() === 'stretch') {\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'stretch') {\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else {\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n class=\"hover:fill-opacity-20\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n }\n\n <div\n class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"clickedJustify()\"\n [style.align-items]=\"clickedAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n <svg\n width=\"60\"\n height=\"60\"\n viewBox=\"0 0 60 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n <path\n d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n <path\n d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n </svg>\n } @else if (clickedJustify() === 'stretch') {\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'stretch') {\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else {\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill: #cebcbc; fill-opacity: 0.16\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n <span>X:</span>\n <div class=\"ax-w-24\">\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"justifyDataSource\"\n [value]=\"selectedJustify()\"\n (onValueChanged)=\"onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n <span>Y:</span>\n <div class=\"ax-w-24\">\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"alignDataSource\"\n [value]=\"selectedAlign()\"\n (onValueChanged)=\"onAlignChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n </div>\n </div>\n\n <span>Gap</span>\n <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n @if (gapMode() === 'single') {\n <ax-range-slider\n class=\"ax-w-32\"\n [values]=\"gap().x\"\n (valuesChange)=\"setGap($event ?? 0, 'both')\"\n ></ax-range-slider>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().x\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n [changeOnScroll]=\"true\"\n class=\"ax-sm ax-min-w-6\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n } @else {\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n <span class=\"ax-text-xs\"\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg ></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().x\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n [changeOnScroll]=\"true\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n <span class=\"ax-text-xs\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().y\"\n [changeOnScroll]=\"true\"\n (valueChange)=\"setGap($event ?? 0, 'y')\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n </div>\n }\n <button (click)=\"toggleGapMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (gapMode() === 'single') {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n fill=\"currentColor\"\n ></path>\n } @else {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n fill=\"currentColor\"\n ></path>\n }\n </svg>\n </button>\n </div>\n</div>\n", styles: ["axp-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{flex-wrap:nowrap;overflow:auto;padding-bottom:.5rem;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
18906
19716
  }
18907
19717
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
18908
19718
  type: Component,
@@ -19072,7 +19882,7 @@ class AXPAdvancedGridOptionsWidgetEditComponent extends AXPValueWidgetComponent
19072
19882
  this.selectedAlign.set({ value: align, label: this.findAlignNameById(align) });
19073
19883
  }
19074
19884
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
19075
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid ax-w-11/12\">\n <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-x-3 ax-items-center ax-pb-2\">\n <span>Columns</span>\n <span>Items</span>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"12\"\n [value]=\"columns()\"\n (onValueChanged)=\"changeValue($event, 'columns')\"\n ></ax-number-box>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"99\"\n [value]=\"items()\"\n (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n ></ax-number-box>\n </div>\n <span>Align</span>\n <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n <div\n class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n >\n <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n @for(side of gridSides; track side.value){\n <div\n [attr.aria-label]=\"side.label\"\n [attr.aria-value]=\"side.value\"\n class=\"ax-grid ax-place-content-center\"\n (mouseenter)=\"onHover(side)\"\n (mouseleave)=\"onHoverLeave()\"\n (click)=\"onClick(side)\"\n >\n @if (true) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n </svg>\n }\n </div>\n }\n </div>\n @if(hoveredJustify() && hoveredAlign()){\n <div\n class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"hoveredJustify()\"\n [style.align-items]=\"hoveredAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else if(clickedAlign()==='stretch'){\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else{\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n class=\"hover:fill-opacity-20\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n }\n\n <div\n class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"clickedJustify()\"\n [style.align-items]=\"clickedAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n <svg\n width=\"60\"\n height=\"60\"\n viewBox=\"0 0 60 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n <path\n d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n <path\n d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n </svg>\n } @else if(clickedJustify()==='stretch'){\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else if(clickedAlign()==='stretch'){\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else{\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill: #cebcbc; fill-opacity: 0.16\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n <span>X:</span>\n <div class=\"ax-w-36\">\n <ax-select-box\n [dataSource]=\"justifyDataSource\"\n [value]=\"selectedJustify()\"\n (onValueChanged)=\"onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n <span>Y:</span>\n <div class=\"ax-w-36\">\n <ax-select-box\n [dataSource]=\"alignDataSource\"\n [value]=\"selectedAlign()\"\n (onValueChanged)=\"onAlignChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19885
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid ax-w-11/12\">\n <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-x-3 ax-items-center ax-pb-2\">\n <span>Columns</span>\n <span>Items</span>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"12\"\n [value]=\"columns()\"\n (onValueChanged)=\"changeValue($event, 'columns')\"\n ></ax-number-box>\n <ax-number-box\n [minValue]=\"1\"\n [maxValue]=\"99\"\n [value]=\"items()\"\n (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n ></ax-number-box>\n </div>\n <span>Align</span>\n <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n <div\n class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n >\n <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n @for(side of gridSides; track side.value){\n <div\n [attr.aria-label]=\"side.label\"\n [attr.aria-value]=\"side.value\"\n class=\"ax-grid ax-place-content-center\"\n (mouseenter)=\"onHover(side)\"\n (mouseleave)=\"onHoverLeave()\"\n (click)=\"onClick(side)\"\n >\n @if (true) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n </svg>\n }\n </div>\n }\n </div>\n @if(hoveredJustify() && hoveredAlign()){\n <div\n class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"hoveredJustify()\"\n [style.align-items]=\"hoveredAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else if(clickedAlign()==='stretch'){\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n ></path>\n </svg>\n } @else{\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n class=\"hover:fill-opacity-20\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n }\n\n <div\n class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n [style.justify-items]=\"clickedJustify()\"\n [style.align-items]=\"clickedAlign()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n <svg\n width=\"60\"\n height=\"60\"\n viewBox=\"0 0 60 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n <path\n d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n <path\n d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n fill=\"currentColor\"\n style=\"fill-opacity: 0.25\"\n ></path>\n </svg>\n } @else if(clickedJustify()==='stretch'){\n <svg\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else if(clickedAlign()==='stretch'){\n <svg\n width=\"20\"\n height=\"60\"\n viewBox=\"0 0 20 60\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: white\"\n >\n <path\n d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill-opacity: 0.16; stroke: white\"\n ></path>\n </svg>\n } @else{\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"color: #efeaea\"\n >\n <path\n d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n style=\"fill: #cebcbc; fill-opacity: 0.16\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n <span>X:</span>\n <div class=\"ax-w-36\">\n <ax-select-box\n [dataSource]=\"justifyDataSource\"\n [value]=\"selectedJustify()\"\n (onValueChanged)=\"onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n <span>Y:</span>\n <div class=\"ax-w-36\">\n <ax-select-box\n [dataSource]=\"alignDataSource\"\n [value]=\"selectedAlign()\"\n (onValueChanged)=\"onAlignChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19076
19886
  }
19077
19887
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, decorators: [{
19078
19888
  type: Component,
@@ -19502,7 +20312,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
19502
20312
  };
19503
20313
  }
19504
20314
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
19505
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n <span class=\"ax-text-sm ax-font-light\">Radius</span>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <button\n #allRadiusEl\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"all\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </button>\n\n <button\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"sides\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </button>\n\n @if (currentActiveRadiusSide() === 'all') {\n <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n <ax-range-slider\n [values]=\"allRadius()\"\n [min]=\"0\"\n [max]=\"100\"\n (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"ax-min-w-24\"\n ></ax-range-slider>\n </div>\n <div class=\"ax-flex ax-justify-start ax-items-center\">\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"100\"\n [value]=\"allRadius()\"\n [changeOnScroll]=\"true\"\n (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"ax-min-w-[4.5rem] ax-sm\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('all')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('all') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'all')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n } @else {\n <div class=\"ax-w-48\"></div>\n }\n </div>\n </div>\n\n <div\n class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-auto'\"\n style=\"interpolate-size: allow-keywords\"\n >\n <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n </g>\n <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['top-left']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-left')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('top-left') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'top-left')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n <path\n d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n </g>\n <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['top-right']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-right')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('top-right') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'top-right')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n <path\n d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n fill=\"currentColor\"\n ></path>\n </g>\n <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['bottom-left']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-left')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('bottom-left') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'bottom-left')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n <path\n d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n </g>\n <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['bottom-right']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-right')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('bottom-right') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'bottom-right')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n <span class=\"ax-text-sm ax-font-light\">Borders</span>\n </div>\n\n <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n <!-- Top Border -->\n <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"top\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- Right Border -->\n <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"right\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- Bottom Border -->\n <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"bottom\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- Left Border -->\n <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"left\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- All -->\n <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n <button\n #allBorderEl\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"all\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </button>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-center ax-gap-x-2 ax-gap-y-2\">\n <div class=\"ax-text-sm ax-font-light\">Style</div>\n <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n <ax-button-group-item\n (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'none'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'solid'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'dashed'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'dotted'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n </ax-button-group>\n <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n <div class=\"ax-text-sm ax-font-light\">Width</div>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n <ax-number-box\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [value]=\"shownWidth()\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'width', currentActiveSide())\"\n class=\"ax-sm ax-exclude\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getWidthUnitLabel(currentActiveSide())\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of widthUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getWidthUnit(currentActiveSide()) === u\"\n (onClick)=\"onWidthUnitChange(u, currentActiveSide())\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n\n <div class=\"ax-text-sm ax-font-light\">Color</div>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n <ax-color-box\n class=\"ax-sm\"\n [value]=\"shownColor()\"\n (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\n ></ax-color-box>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$5.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
20315
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n <span class=\"ax-text-sm ax-font-light\">Radius</span>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <button\n #allRadiusEl\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"all\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </button>\n\n <button\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"sides\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n fill=\"currentColor\"\n ></path>\n <path\n d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </button>\n\n @if (currentActiveRadiusSide() === 'all') {\n <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n <ax-range-slider\n [values]=\"allRadius()\"\n [min]=\"0\"\n [max]=\"100\"\n (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"ax-min-w-24\"\n ></ax-range-slider>\n </div>\n <div class=\"ax-flex ax-justify-start ax-items-center\">\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"100\"\n [value]=\"allRadius()\"\n [changeOnScroll]=\"true\"\n (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"ax-min-w-[4.5rem] ax-sm\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('all')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('all') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'all')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n } @else {\n <div class=\"ax-w-48\"></div>\n }\n </div>\n </div>\n\n <div\n class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-auto'\"\n style=\"interpolate-size: allow-keywords\"\n >\n <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n </g>\n <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['top-left']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-left')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('top-left') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'top-left')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n <path\n d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n </g>\n <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['top-right']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-right')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('top-right') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'top-right')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n <path\n d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n fill=\"currentColor\"\n ></path>\n </g>\n <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['bottom-left']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-left')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('bottom-left') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'bottom-left')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n <div class=\"ax-flex ax-gap-1 ax-items-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.4\">\n <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n <path\n d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n </g>\n <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n </svg>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-24\">\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"calculatedValues().radius['bottom-right']\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-right')\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of radiusUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getRadiusUnit('bottom-right') === u\"\n (onClick)=\"onRadiusUnitChange(u, 'bottom-right')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n <span class=\"ax-text-sm ax-font-light\">Borders</span>\n </div>\n\n <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n <!-- Top Border -->\n <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"top\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- Right Border -->\n <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"right\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- Bottom Border -->\n <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"bottom\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- Left Border -->\n <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"left\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n fill=\"currentColor\"\n ></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n </svg>\n </button>\n </div>\n\n <!-- All -->\n <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n <button\n #allBorderEl\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"all\"\n class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </button>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-center ax-gap-x-2 ax-gap-y-2\">\n <div class=\"ax-text-sm ax-font-light\">Style</div>\n <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n <ax-button-group-item\n (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'none'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'solid'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'dashed'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n [selected]=\"shownStyle() === 'dotted'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n </ax-button-group>\n <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n <div class=\"ax-text-sm ax-font-light\">Width</div>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n <ax-number-box\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [value]=\"shownWidth()\"\n (onValueChanged)=\"setBorder($event.value ?? 0, 'width', currentActiveSide())\"\n class=\"ax-sm ax-exclude\"\n [showSpinButtons]=\"false\"\n ><ax-suffix>\n <ax-dropdown-button [text]=\"getWidthUnitLabel(currentActiveSide())\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of widthUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getWidthUnit(currentActiveSide()) === u\"\n (onClick)=\"onWidthUnitChange(u, currentActiveSide())\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button> </ax-suffix\n ></ax-number-box>\n </div>\n\n <div class=\"ax-text-sm ax-font-light\">Color</div>\n <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n <ax-color-box\n class=\"ax-sm\"\n [value]=\"shownColor()\"\n (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\n ></ax-color-box>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19506
20316
  }
19507
20317
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
19508
20318
  type: Component,
@@ -19946,7 +20756,7 @@ class AXPDataSourceOptionsWidgetEditComponent extends AXPValueWidgetComponent {
19946
20756
  //#region ---- Lifecycle ----
19947
20757
  #init;
19948
20758
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
19949
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options ax-flex ax-flex-col ax-gap-3 ax-py-2\">\n <!-- 1. Mode: exists or list -->\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.source | translate | async }}</span>\n <ax-selection-list [items]=\"modeItems()\" [ngModel]=\"dataSourceMode()\"\n (onValueChanged)=\"setDataSourceMode($event.value)\" direction=\"horizontal\" [multiple]=\"false\" [showControl]=\"true\"\n valueField=\"value\" textField=\"text\" />\n </div>\n\n <!-- 2. Select existing data source (only when mode is exists) -->\n @if (dataSourceMode() === 'exists') {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.dataSource | translate | async }}</span>\n <ax-select-box [dataSource]=\"definitionsDataSource\" [ngModel]=\"getValue()['dataSource']\"\n (onValueChanged)=\"onDefinitionChange($event)\" valueField=\"name\" textField=\"title\"\n [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n <ax-search-box></ax-search-box>\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n <!-- 3. Simple list (text rows) -->\n @if (dataSourceMode() === 'list') {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.listItems | translate | async }}</span>\n <axp-repeater-rows-layout\n [count]=\"listEntries().length\"\n [rowTemplate]=\"listRowTpl\"\n [hasControls]=\"true\"\n [allowReorder]=\"true\"\n [addItemLabelKey]=\"I18N.addListItem\"\n (addClick)=\"addListEntry()\"\n (removeClick)=\"removeListEntry($event)\"\n (drop)=\"onListDrop($event)\"\n ></axp-repeater-rows-layout>\n <ng-template #listRowTpl let-index=\"index\">\n <ax-text-box\n class=\"ax-w-full\"\n [ngModel]=\"listEntries()[index]\"\n (onValueChanged)=\"onListEntryChange(index, $event)\"\n />\n </ng-template>\n </div>\n }\n\n <!-- 4. valueField / textField (exists only) -->\n @if (fieldSelectsKey() && dataSourceMode() === 'exists') {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.valueField | translate | async }}</span>\n <ax-select-box [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n [disabled]=\"valueTextFieldDisabled()\"\n [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n\n <!-- textField select -->\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.textField | translate | async }}</span>\n <ax-select-box [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n [disabled]=\"valueTextFieldDisabled()\"\n [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n <!-- 5. Filter editor (registered data source with filters) -->\n @if (dataSourceMode() === 'exists' && (selectedDefinition()?.filters?.length ?? 0) > 0) {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.filters | translate | async }}</span>\n @if (filterCount() === 0) {\n <ax-button look=\"twotone\" color=\"default\" size=\"sm\" [text]=\"(I18N.filtersButtonEmpty | translate | async) ?? ''\"\n (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n </ax-prefix>\n </ax-button>\n } @else {\n <ax-button look=\"twotone\" color=\"default\" size=\"sm\"\n [text]=\"((I18N.filtersButtonWithCount | translate: { params: { count: filterCount() } }) | async) ?? ''\"\n (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n </div>\n }\n</div>\n", styles: [".axp-data-source-options{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXPRepeaterRowsLayoutComponent, selector: "axp-repeater-rows-layout", inputs: ["count", "disabled", "hasControls", "allowReorder", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
20759
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options ax-flex ax-flex-col ax-gap-3 ax-py-2\">\n <!-- 1. Mode: exists or list -->\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.source | translate | async }}</span>\n <ax-selection-list [items]=\"modeItems()\" [ngModel]=\"dataSourceMode()\"\n (onValueChanged)=\"setDataSourceMode($event.value)\" direction=\"horizontal\" [multiple]=\"false\" [showControl]=\"true\"\n valueField=\"value\" textField=\"text\" />\n </div>\n\n <!-- 2. Select existing data source (only when mode is exists) -->\n @if (dataSourceMode() === 'exists') {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.dataSource | translate | async }}</span>\n <ax-select-box [dataSource]=\"definitionsDataSource\" [ngModel]=\"getValue()['dataSource']\"\n (onValueChanged)=\"onDefinitionChange($event)\" valueField=\"name\" textField=\"title\"\n [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n <ax-search-box></ax-search-box>\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n <!-- 3. Simple list (text rows) -->\n @if (dataSourceMode() === 'list') {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.listItems | translate | async }}</span>\n <axp-repeater-rows-layout\n [count]=\"listEntries().length\"\n [rowTemplate]=\"listRowTpl\"\n [hasControls]=\"true\"\n [allowReorder]=\"true\"\n [addItemLabelKey]=\"I18N.addListItem\"\n (addClick)=\"addListEntry()\"\n (removeClick)=\"removeListEntry($event)\"\n (drop)=\"onListDrop($event)\"\n ></axp-repeater-rows-layout>\n <ng-template #listRowTpl let-index=\"index\">\n <ax-text-box\n class=\"ax-w-full\"\n [ngModel]=\"listEntries()[index]\"\n (onValueChanged)=\"onListEntryChange(index, $event)\"\n />\n </ng-template>\n </div>\n }\n\n <!-- 4. valueField / textField (exists only) -->\n @if (fieldSelectsKey() && dataSourceMode() === 'exists') {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.valueField | translate | async }}</span>\n <ax-select-box [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n [disabled]=\"valueTextFieldDisabled()\"\n [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n\n <!-- textField select -->\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.textField | translate | async }}</span>\n <ax-select-box [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n [disabled]=\"valueTextFieldDisabled()\"\n [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n <!-- 5. Filter editor (registered data source with filters) -->\n @if (dataSourceMode() === 'exists' && (selectedDefinition()?.filters?.length ?? 0) > 0) {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-medium ax-text-sm\">{{ I18N.filters | translate | async }}</span>\n @if (filterCount() === 0) {\n <ax-button look=\"twotone\" color=\"default\" size=\"sm\" [text]=\"(I18N.filtersButtonEmpty | translate | async) ?? ''\"\n (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n </ax-prefix>\n </ax-button>\n } @else {\n <ax-button look=\"twotone\" color=\"default\" size=\"sm\"\n [text]=\"((I18N.filtersButtonWithCount | translate: { params: { count: filterCount() } }) | async) ?? ''\"\n (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n </div>\n }\n</div>\n", styles: [".axp-data-source-options{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXPRepeaterRowsLayoutComponent, selector: "axp-repeater-rows-layout", inputs: ["count", "disabled", "hasControls", "allowReorder", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19950
20760
  }
19951
20761
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, decorators: [{
19952
20762
  type: Component,
@@ -20449,7 +21259,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPValueWidgetComponent {
20449
21259
  }
20450
21260
  #af;
20451
21261
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
20452
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n <span>Direction</span>\n <div>\n <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n ><ax-prefix\n ><svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"transform: rotate(180deg)\"\n >\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setFlexDirection('column-reverse')\"\n [selected]=\"flexDirection() === 'column-reverse'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n </ax-button-group>\n </div>\n <span> Wrap </span>\n <div>\n <ax-selection-list\n [items]=\"['wrap', 'nowrap']\"\n [value]=\"flexWrap()\"\n (onValueChanged)=\"setWrapMode($event.value)\"\n direction=\"horizontal\"\n [multiple]=\"false\"\n [showControl]=\"true\"\n look=\"card\"\n valueField=\"id\"\n textField=\"text\"\n >\n <ng-template #itemTemplate let-item>\n <div class=\"ax-flex ax-items-center\">\n <ax-icon [icon]=\"item.icon\"></ax-icon>\n <span class=\"ax-ml-2\">{{ item.text }}</span>\n </div>\n </ng-template>\n </ax-selection-list>\n </div>\n <span>Align</span>\n <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n <div\n class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n >\n <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n @for (side of flexSides; track side.value) {\n <div\n [attr.aria-label]=\"side.label\"\n [attr.aria-value]=\"side.value\"\n class=\"ax-grid ax-place-content-center\"\n (mouseenter)=\"onHover(side)\"\n (mouseleave)=\"onHoverLeave()\"\n (click)=\"onClick(side)\"\n >\n @if (true) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n </svg>\n }\n </div>\n }\n </div>\n <div\n class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n [style.justify-content]=\"hoveredJustify()\"\n [style.align-items]=\"hoveredAlign()\"\n [style.flex-direction]=\"flexDirection()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div\n class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n >\n @if (hoveredJustify() === 'space-between') {\n @if (clickedAlign() === 'stretch') {\n } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n }\n } @else if (hoveredJustify() === 'space-around') {\n @if (clickedAlign() === 'stretch') {\n } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n }\n } @else if (hoveredAlign() === 'flex-start') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'center') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'flex-end') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'stretch') {\n <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'baseline') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n <div\n class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n [style.justify-content]=\"clickedJustify()\"\n [style.align-items]=\"clickedAlign()\"\n [style.flex-direction]=\"flexDirection()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div\n class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n >\n @if (clickedJustify() === 'space-between') {\n @if (clickedAlign() === 'stretch') {\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'baseline') {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n fill=\"currentColor\"\n ></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n </svg>\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n }\n } @else if (clickedJustify() === 'space-around') {\n @if (clickedAlign() === 'stretch') {\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n </svg>\n } @else if (clickedAlign() === 'baseline') {\n <svg\n data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n fill=\"currentColor\"\n ></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n </svg>\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n }\n } @else if (clickedAlign() === 'flex-start') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'center') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'flex-end') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'stretch') {\n <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'baseline') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n <span class=\"ax-order-1\">X:</span>\n <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n <!-- <ax-select-box\n [dataSource]=\"flexDirectionIsColumn()? alignDataSource : justifyDataSource\"\n [ngModel]=\"flexDirectionIsColumn()? selectedAlign : selectedJustify\"\n (ngModelChange)=\"flexDirectionIsColumn()? selectedAlign = $event : selectedJustify = $event\"\n (onValueChanged)=\"flexDirectionIsColumn()? onAlignChange($event) :onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box> -->\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"justifyDataSource\"\n [(ngModel)]=\"selectedJustify\"\n (onValueChanged)=\"onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n <span class=\"ax-order-3\">Y:</span>\n <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"alignDataSource\"\n [(ngModel)]=\"selectedAlign\"\n (onValueChanged)=\"onAlignChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n </div>\n </div>\n <span>Gap</span>\n <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n @if (gapMode() === 'both') {\n <ax-range-slider\n class=\"ax-w-32\"\n [ngModel]=\"gap().both\"\n (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n ></ax-range-slider>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().both\"\n [changeOnScroll]=\"true\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n class=\"ax-sm ax-max-w-[5.5rem]\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n } @else {\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n <span class=\"ax-text-xs\"\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg ></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().x\"\n [changeOnScroll]=\"true\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n <span class=\"ax-text-xs\"\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().y\"\n [changeOnScroll]=\"true\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n </div>\n }\n <button (click)=\"setGapMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (gapMode() === 'both') {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n fill=\"currentColor\"\n ></path>\n } @else {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n fill=\"currentColor\"\n ></path>\n }\n </svg>\n </button>\n </div>\n <!-- <span>Items</span>\n <div>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"12\"\n [ngModel]=\"itemsCount()\"\n (ngModelChange)=\"setItemsCount($event ?? 0)\"\n class=\"ax-w-32\"\n ></ax-number-box>\n </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$5.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
21262
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n <span>Direction</span>\n <div>\n <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n ><ax-prefix\n ><svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"transform: rotate(180deg)\"\n >\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n <ax-button-group-item\n (onClick)=\"setFlexDirection('column-reverse')\"\n [selected]=\"flexDirection() === 'column-reverse'\"\n ><ax-prefix\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n fill=\"currentColor\"\n ></path></svg></ax-prefix\n ></ax-button-group-item>\n </ax-button-group>\n </div>\n <span> Wrap </span>\n <div>\n <ax-selection-list\n [items]=\"['wrap', 'nowrap']\"\n [value]=\"flexWrap()\"\n (onValueChanged)=\"setWrapMode($event.value)\"\n direction=\"horizontal\"\n [multiple]=\"false\"\n [showControl]=\"true\"\n look=\"card\"\n valueField=\"id\"\n textField=\"text\"\n >\n <ng-template #itemTemplate let-item>\n <div class=\"ax-flex ax-items-center\">\n <ax-icon [icon]=\"item.icon\"></ax-icon>\n <span class=\"ax-ml-2\">{{ item.text }}</span>\n </div>\n </ng-template>\n </ax-selection-list>\n </div>\n <span>Align</span>\n <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n <div\n class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n >\n <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n @for (side of flexSides; track side.value) {\n <div\n [attr.aria-label]=\"side.label\"\n [attr.aria-value]=\"side.value\"\n class=\"ax-grid ax-place-content-center\"\n (mouseenter)=\"onHover(side)\"\n (mouseleave)=\"onHoverLeave()\"\n (click)=\"onClick(side)\"\n >\n @if (true) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n </svg>\n }\n </div>\n }\n </div>\n <div\n class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n [style.justify-content]=\"hoveredJustify()\"\n [style.align-items]=\"hoveredAlign()\"\n [style.flex-direction]=\"flexDirection()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div\n class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n >\n @if (hoveredJustify() === 'space-between') {\n @if (clickedAlign() === 'stretch') {\n } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n }\n } @else if (hoveredJustify() === 'space-around') {\n @if (clickedAlign() === 'stretch') {\n } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n }\n } @else if (hoveredAlign() === 'flex-start') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'center') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'flex-end') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'stretch') {\n <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n } @else if (hoveredAlign() === 'baseline') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n fill=\"currentColor\"\n fill-opacity=\"0.3\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n <div\n class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n [style.justify-content]=\"clickedJustify()\"\n [style.align-items]=\"clickedAlign()\"\n [style.flex-direction]=\"flexDirection()\"\n >\n <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n <div\n class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n >\n @if (clickedJustify() === 'space-between') {\n @if (clickedAlign() === 'stretch') {\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'baseline') {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n fill=\"currentColor\"\n ></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n </svg>\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n }\n } @else if (clickedJustify() === 'space-around') {\n @if (clickedAlign() === 'stretch') {\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n </svg>\n } @else if (clickedAlign() === 'baseline') {\n <svg\n data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n width=\"60\"\n height=\"20\"\n viewBox=\"0 0 60 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n fill=\"currentColor\"\n ></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n </svg>\n } @else {\n <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n }\n } @else if (clickedAlign() === 'flex-start') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'center') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'flex-end') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'stretch') {\n <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n } @else if (clickedAlign() === 'baseline') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n fill=\"currentColor\"\n ></path>\n <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n <span class=\"ax-order-1\">X:</span>\n <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n <!-- <ax-select-box\n [dataSource]=\"flexDirectionIsColumn()? alignDataSource : justifyDataSource\"\n [ngModel]=\"flexDirectionIsColumn()? selectedAlign : selectedJustify\"\n (ngModelChange)=\"flexDirectionIsColumn()? selectedAlign = $event : selectedJustify = $event\"\n (onValueChanged)=\"flexDirectionIsColumn()? onAlignChange($event) :onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box> -->\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"justifyDataSource\"\n [(ngModel)]=\"selectedJustify\"\n (onValueChanged)=\"onJustifyChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n <span class=\"ax-order-3\">Y:</span>\n <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n <ax-select-box\n class=\"ax-sm\"\n [dataSource]=\"alignDataSource\"\n [(ngModel)]=\"selectedAlign\"\n (onValueChanged)=\"onAlignChange($event)\"\n textField=\"label\"\n valueField=\"value\"\n placeholder=\"Choose...\"\n >\n </ax-select-box>\n </div>\n </div>\n </div>\n <span>Gap</span>\n <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n @if (gapMode() === 'both') {\n <ax-range-slider\n class=\"ax-w-32\"\n [ngModel]=\"gap().both\"\n (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n ></ax-range-slider>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().both\"\n [changeOnScroll]=\"true\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n class=\"ax-sm ax-max-w-[5.5rem]\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n } @else {\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n <span class=\"ax-text-xs\"\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n fill=\"currentColor\"\n ></path></svg ></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().x\"\n [changeOnScroll]=\"true\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n <span class=\"ax-text-xs\"\n ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n fill=\"currentColor\"\n ></path></svg></span>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"999\"\n [value]=\"gap().y\"\n [changeOnScroll]=\"true\"\n (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n class=\"ax-sm ax-min-w-5\"\n [showSpinButtons]=\"false\"\n ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n >\n </div>\n }\n <button (click)=\"setGapMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (gapMode() === 'both') {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n fill=\"currentColor\"\n ></path>\n } @else {\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n fill=\"currentColor\"\n ></path>\n }\n </svg>\n </button>\n </div>\n <!-- <span>Items</span>\n <div>\n <ax-number-box\n [minValue]=\"0\"\n [maxValue]=\"12\"\n [ngModel]=\"itemsCount()\"\n (ngModelChange)=\"setItemsCount($event ?? 0)\"\n class=\"ax-w-32\"\n ></ax-number-box>\n </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
20453
21263
  }
20454
21264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
20455
21265
  type: Component,
@@ -20892,7 +21702,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
20892
21702
  return { clientX: touch.clientX, clientY: touch.clientY };
20893
21703
  }
20894
21704
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
20895
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n <div class=\"axp-spacing-inner-box\">\n <div class=\"axp-spacing-margin-box\">\n <!--MARGIN SVG DEFINE-->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n </mask>\n <defs>\n <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"white\"></stop>\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n </linearGradient>\n </defs>\n\n <!--MARGIN TOP SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'top')\"\n (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n h224\n l-36,24\n h-152\n l-36,-24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n h224\n l-36,24\n h-152\n l-36,-24z\n \"\n fill-opacity=\"0.12\"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"url(#FuseLinearGradient)\"\n d=\"\n m0,0\n h224\n l-36,24\n h-152\n l-36,-24z\n \"\n fill-opacity=\"0.02\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n <!--MARGIN RIGHT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'right')\"\n (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m224,0\n v112\n l-36,-24\n v-64\n l36,-24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m224,0\n v112\n l-36,-24\n v-64\n l36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n <!--MARGIN BOTTOM SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'bottom')\"\n (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,112\n h224\n l-36,-24\n h-152\n l-36,24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,112\n h224\n l-36,-24\n h-152\n l-36,24z\n \"\n fill-opacity=\"0.064\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n <!--MARGIN LEFT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'left')\"\n (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n v112\n l36,-24\n v-64\n l-36,-24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n v112\n l36,-24\n v-64\n l-36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n </svg>\n\n <!--MARGIN TOP VALUE-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n </div>\n </div>\n\n <!--MARGIN RIGHT VALUE-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n </div>\n </div>\n\n <!--MARGIN BOTTOM VALUE-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n </div>\n </div>\n\n <!--MARGIN LEFT VALUE-->\n <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"axp-spacing-padding-box\">\n <!--SVG DEFINE-->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n </mask>\n\n <!--PADDING TOP SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'top')\"\n (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n h150\n l-36,24\n h-78\n l-36,-24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n h150\n l-36,24\n h-78\n l-36,-24z\n \"\n fill-opacity=\"0.064\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n\n <!--PADDING RIGHT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'right')\"\n (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m150,0\n v60\n l-36,-24\n v-12\n l36,-24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m150,0\n v60\n l-36,-24\n v-12\n l36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n\n <!--PADDING BOTTOM SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'bottom')\"\n (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,60\n h150\n l-36,-24\n h-78\n l-36,24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,60\n h150\n l-36,-24\n h-78\n l-36,24z\n \"\n fill-opacity=\"0.12\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n\n <!--PADDING LEFT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'left')\"\n (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n v60\n l36,-24\n v-12\n l-36,-24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n v60\n l36,-24\n v-12\n l-36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n </svg>\n\n <!--PADDING TOP SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n </div>\n </div>\n\n <!--PADDING RIGHT SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n </div>\n </div>\n\n <!--PADDING BOTTOM SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n </div>\n </div>\n\n <!--PADDING LEFT SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n </div>\n </div>\n </div>\n\n <!--PADDING TEXT-->\n <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n </svg>\n\n <!--MARGIN TEXT-->\n <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n </svg>\n\n <!-- Ctrl hint -->\n <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n Hold Ctrl while dragging to adjust all sides\n </div> -->\n </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n <div\n class=\"axp-spacing-popup-container\"\n (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n >\n <div class=\"axp-spacing-popover\">\n <!--SET EMPTY-->\n <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </div>\n\n <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n <input\n type=\"range\"\n name=\"range\"\n [min]=\"0\"\n [max]=\"200\"\n [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n (input)=\"setSpacing($event, type, side)\"\n />\n </div>\n <div>\n <!--INPUT NUMBER-->\n <div style=\"--local-gap: 8px\">\n <div\n style=\"\n gap: 8px;\n height: auto;\n display: flex;\n flex-flow: column;\n -webkit-box-align: stretch;\n align-items: stretch;\n -webkit-box-pack: start;\n position: relative;\n justify-content: stretch;\n width: 100%;\n -webkit-box-flex: 1;\n flex-grow: 1;\n \"\n >\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"value\"\n (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n [showSpinButtons]=\"false\"\n >\n <ax-suffix>\n <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of spacingUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getSpacingUnit(type, side) === u\"\n (onClick)=\"onSpacingUnitChange(u, type, side)\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n </ax-suffix>\n </ax-number-box>\n </div>\n </div>\n </div>\n <div class=\"axp-spacing-template-values\">\n @for (i of FixedValues; track $index) {\n <div\n (click)=\"setSpacing(i.value, type, side)\"\n class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n tabindex=\"0\"\n style=\"\n border-bottom-color: var(--color-border-1);\n border-left-color: var(--color-border-1);\n border-right-color: var(--color-border-1);\n border-top-color: var(--color-border-1);\n outline: 0px;\n cursor: default;\n user-select: none;\n padding: 0px;\n box-sizing: border-box;\n font-family: inherit;\n font-size: inherit;\n --component-icon-color: var(--color-text-secondary);\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border-radius: 4px;\n color: var(--color-action-secondary-text);\n background: var(--color-action-secondary-background);\n border-width: 0px;\n border-style: solid;\n box-shadow: var(--box-shadows-action-secondary);\n align-self: center;\n \"\n >\n <div class=\"ax-truncate\">\n {{ i.label }}\n <span class=\"ax-text-xs ax-text-neutral-400\">\n {{ units()[this.current().type][this.current().side] }}</span\n >\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n <div\n [class.ax-opacity-50]=\"\n originalValues()[this.current().type][this.current().side] ===\n calculatedValues()[this.current().type][this.current().side]\n \"\n (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n tabindex=\"0\"\n class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n >\n <div class=\"ax-flex ax-flex-row ax-items-center\">\n <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n <div class=\"ax-size-4\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </div>\n <div>Reset</div>\n </div>\n </div>\n <div class=\"ax-self-center\">\n <div\n class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n >\n <ax-kbd class=\"look-text\">\n <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n type: this.current().type,\n side: this.current().side,\n value: this.calculatedValues()[this.current().type][this.current().side],\n }\"\n ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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 }); }
21705
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n <div class=\"axp-spacing-inner-box\">\n <div class=\"axp-spacing-margin-box\">\n <!--MARGIN SVG DEFINE-->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n </mask>\n <defs>\n <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"white\"></stop>\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n </linearGradient>\n </defs>\n\n <!--MARGIN TOP SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'top')\"\n (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n h224\n l-36,24\n h-152\n l-36,-24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n h224\n l-36,24\n h-152\n l-36,-24z\n \"\n fill-opacity=\"0.12\"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"url(#FuseLinearGradient)\"\n d=\"\n m0,0\n h224\n l-36,24\n h-152\n l-36,-24z\n \"\n fill-opacity=\"0.02\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n <!--MARGIN RIGHT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'right')\"\n (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m224,0\n v112\n l-36,-24\n v-64\n l36,-24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m224,0\n v112\n l-36,-24\n v-64\n l36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n <!--MARGIN BOTTOM SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'bottom')\"\n (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,112\n h224\n l-36,-24\n h-152\n l-36,24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,112\n h224\n l-36,-24\n h-152\n l-36,24z\n \"\n fill-opacity=\"0.064\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n <!--MARGIN LEFT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'margin', 'left')\"\n (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n v112\n l36,-24\n v-64\n l-36,-24z\n \"\n mask=\"url(#margin-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n v112\n l36,-24\n v-64\n l-36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#margin-mask)\"\n ></path>\n </g>\n </g>\n </svg>\n\n <!--MARGIN TOP VALUE-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n </div>\n </div>\n\n <!--MARGIN RIGHT VALUE-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n </div>\n </div>\n\n <!--MARGIN BOTTOM VALUE-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n </div>\n </div>\n\n <!--MARGIN LEFT VALUE-->\n <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"axp-spacing-padding-box\">\n <!--SVG DEFINE-->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n </mask>\n\n <!--PADDING TOP SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'top')\"\n (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n h150\n l-36,24\n h-78\n l-36,-24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n h150\n l-36,24\n h-78\n l-36,-24z\n \"\n fill-opacity=\"0.064\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n\n <!--PADDING RIGHT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'right')\"\n (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m150,0\n v60\n l-36,-24\n v-12\n l36,-24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m150,0\n v60\n l-36,-24\n v-12\n l36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n\n <!--PADDING BOTTOM SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'bottom')\"\n (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,60\n h150\n l-36,-24\n h-78\n l-36,24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,60\n h150\n l-36,-24\n h-78\n l-36,24z\n \"\n fill-opacity=\"0.12\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n\n <!--PADDING LEFT SVG-->\n <g\n class=\"hover:ax-brightness-75\"\n style=\"cursor: s-resize\"\n (click)=\"openPopUp($event, 'padding', 'left')\"\n (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n >\n <g>\n <path\n mode=\"delta\"\n fill=\"var(--color-background-1)\"\n d=\"\n m0,0\n v60\n l36,-24\n v-12\n l-36,-24z\n \"\n mask=\"url(#padding-mask)\"\n ></path>\n <path\n mode=\"delta\"\n fill=\"white\"\n d=\"\n m0,0\n v60\n l36,-24\n v-12\n l-36,-24z\n \"\n fill-opacity=\"0.094\"\n mask=\"url(#padding-mask)\"\n ></path>\n </g>\n </g>\n </svg>\n\n <!--PADDING TOP SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n </div>\n </div>\n\n <!--PADDING RIGHT SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n </div>\n </div>\n\n <!--PADDING BOTTOM SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n </div>\n </div>\n\n <!--PADDING LEFT SVG-->\n <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n </div>\n </div>\n </div>\n\n <!--PADDING TEXT-->\n <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n </svg>\n\n <!--MARGIN TEXT-->\n <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n </svg>\n\n <!-- Ctrl hint -->\n <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n Hold Ctrl while dragging to adjust all sides\n </div> -->\n </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n <div\n class=\"axp-spacing-popup-container\"\n (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n >\n <div class=\"axp-spacing-popover\">\n <!--SET EMPTY-->\n <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </div>\n\n <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n <input\n type=\"range\"\n name=\"range\"\n [min]=\"0\"\n [max]=\"200\"\n [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n (input)=\"setSpacing($event, type, side)\"\n />\n </div>\n <div>\n <!--INPUT NUMBER-->\n <div style=\"--local-gap: 8px\">\n <div\n style=\"\n gap: 8px;\n height: auto;\n display: flex;\n flex-flow: column;\n -webkit-box-align: stretch;\n align-items: stretch;\n -webkit-box-pack: start;\n position: relative;\n justify-content: stretch;\n width: 100%;\n -webkit-box-flex: 1;\n flex-grow: 1;\n \"\n >\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [changeOnScroll]=\"true\"\n [ngModel]=\"value\"\n (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n [showSpinButtons]=\"false\"\n >\n <ax-suffix>\n <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n <ax-button-item-list>\n @for (u of spacingUnits; track $index) {\n <ax-button-item\n [text]=\"u.toUpperCase()\"\n [selected]=\"getSpacingUnit(type, side) === u\"\n (onClick)=\"onSpacingUnitChange(u, type, side)\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n </ax-suffix>\n </ax-number-box>\n </div>\n </div>\n </div>\n <div class=\"axp-spacing-template-values\">\n @for (i of FixedValues; track $index) {\n <div\n (click)=\"setSpacing(i.value, type, side)\"\n class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n tabindex=\"0\"\n style=\"\n border-bottom-color: var(--color-border-1);\n border-left-color: var(--color-border-1);\n border-right-color: var(--color-border-1);\n border-top-color: var(--color-border-1);\n outline: 0px;\n cursor: default;\n user-select: none;\n padding: 0px;\n box-sizing: border-box;\n font-family: inherit;\n font-size: inherit;\n --component-icon-color: var(--color-text-secondary);\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border-radius: 4px;\n color: var(--color-action-secondary-text);\n background: var(--color-action-secondary-background);\n border-width: 0px;\n border-style: solid;\n box-shadow: var(--box-shadows-action-secondary);\n align-self: center;\n \"\n >\n <div class=\"ax-truncate\">\n {{ i.label }}\n <span class=\"ax-text-xs ax-text-neutral-400\">\n {{ units()[this.current().type][this.current().side] }}</span\n >\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n <div\n [class.ax-opacity-50]=\"\n originalValues()[this.current().type][this.current().side] ===\n calculatedValues()[this.current().type][this.current().side]\n \"\n (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n tabindex=\"0\"\n class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n >\n <div class=\"ax-flex ax-flex-row ax-items-center\">\n <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n <div class=\"ax-size-4\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n </div>\n <div>Reset</div>\n </div>\n </div>\n <div class=\"ax-self-center\">\n <div\n class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n >\n <ax-kbd class=\"look-text\">\n <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n type: this.current().type,\n side: this.current().side,\n value: this.calculatedValues()[this.current().type][this.current().side],\n }\"\n ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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 }); }
20896
21706
  }
20897
21707
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
20898
21708
  type: Component,
@@ -21257,7 +22067,7 @@ class AXPCallbackValidationWidgetEditComponent extends AXPValueWidgetComponent {
21257
22067
  ax
21258
22068
  </div>
21259
22069
  </div>
21260
- </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
22070
+ </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
21261
22071
  }
21262
22072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCallbackValidationWidgetEditComponent, decorators: [{
21263
22073
  type: Component,
@@ -23056,7 +23866,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
23056
23866
  }
23057
23867
  }
23058
23868
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
23059
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n @if (canFilter()) {\n <axp-query-filters\n [filtersDefinitions]=\"filterDefinitions()\"\n [initialFilters]=\"initialFilters()\"\n (onFiltersChanged)=\"onFiltersChanged($event)\"\n ></axp-query-filters>\n }\n <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n <ax-button\n [title]=\"'@general:actions.apply.title'\"\n [iconOnly]=\"true\"\n #filterButton\n [color]=\"'primary'\"\n (onClick)=\"applyFilters()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-search\"></i>\n </ax-prefix>\n </ax-button>\n }\n @if (canColumns()) {\n <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n <i class=\"fa-light fa-table-columns\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"30\"\n [target]=\"columnButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ '@general:terms.common.columns' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-query-columns\n [columns]=\"columnDefinitions()\"\n (columnsChange)=\"onColumnsChanged($event)\"\n ></axp-query-columns>\n </div>\n </div>\n </ax-popover>\n }\n @if (canSort()) {\n <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n <i class=\"fa-light fa-sort-amount-up\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"10\"\n [target]=\"sortButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ '@general:terms.common.sorts' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-query-sorts\n [sortDefinitions]=\"sortDefinitions()\"\n (sortQueriesChange)=\"onSortsChanged($event)\"\n [initialSortQueries]=\"initialSorts()\"\n ></axp-query-sorts>\n </div>\n </div>\n </ax-popover>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
23869
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n @if (canFilter()) {\n <axp-query-filters\n [filtersDefinitions]=\"filterDefinitions()\"\n [initialFilters]=\"initialFilters()\"\n (onFiltersChanged)=\"onFiltersChanged($event)\"\n ></axp-query-filters>\n }\n <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n <ax-button\n [title]=\"'@general:actions.apply.title'\"\n [iconOnly]=\"true\"\n #filterButton\n [color]=\"'primary'\"\n (onClick)=\"applyFilters()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-search\"></i>\n </ax-prefix>\n </ax-button>\n }\n @if (canColumns()) {\n <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n <i class=\"fa-light fa-table-columns\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"30\"\n [target]=\"columnButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ '@general:terms.common.columns' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-query-columns\n [columns]=\"columnDefinitions()\"\n (columnsChange)=\"onColumnsChanged($event)\"\n ></axp-query-columns>\n </div>\n </div>\n </ax-popover>\n }\n @if (canSort()) {\n <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n <i class=\"fa-light fa-sort-amount-up\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"10\"\n [target]=\"sortButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ '@general:terms.common.sorts' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-query-sorts\n [sortDefinitions]=\"sortDefinitions()\"\n (sortQueriesChange)=\"onSortsChanged($event)\"\n [initialSortQueries]=\"initialSorts()\"\n ></axp-query-sorts>\n </div>\n </div>\n </ax-popover>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
23060
23870
  }
23061
23871
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
23062
23872
  type: Component,
@@ -23266,7 +24076,7 @@ class AXPMetaDataWidgetEditComponent extends AXPValueWidgetComponent {
23266
24076
  }
23267
24077
  </div>
23268
24078
  </axp-widgets-container>
23269
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24079
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
23270
24080
  }
23271
24081
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMetaDataWidgetEditComponent, decorators: [{
23272
24082
  type: Component,
@@ -23527,7 +24337,7 @@ class AXPNumberUnitBoxWidgetEditComponent extends AXPValueWidgetComponent {
23527
24337
  </ax-number-box>
23528
24338
  </div>
23529
24339
  </div>
23530
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24340
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.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" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
23531
24341
  }
23532
24342
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPNumberUnitBoxWidgetEditComponent, decorators: [{
23533
24343
  type: Component,
@@ -23777,7 +24587,7 @@ class AXPTabularDataWidgetEditComponent extends AXPValueWidgetComponent {
23777
24587
  this.platform = inject(AXPlatform);
23778
24588
  }
23779
24589
  async openPopup() {
23780
- const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-edit-popup.component-DjpZU6gz.mjs');
24590
+ const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-edit-popup.component-D4MOHEpI.mjs');
23781
24591
  const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
23782
24592
  size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : this.columns().length > 3 ? 'lg' : 'md',
23783
24593
  header: true,
@@ -23930,7 +24740,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
23930
24740
  [options]="validation.options"
23931
24741
  ></ax-validation-rule>
23932
24742
  }
23933
- </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24743
+ </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$5.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
23934
24744
  }
23935
24745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
23936
24746
  type: Component,
@@ -24144,7 +24954,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
24144
24954
  >
24145
24955
  </ax-select-box>
24146
24956
  </div>
24147
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24957
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24148
24958
  }
24149
24959
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
24150
24960
  type: Component,
@@ -24320,7 +25130,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
24320
25130
  (selectedOperationChange)="handleOperationChange($event)"
24321
25131
  ></axp-filter-operations>
24322
25132
  </div>
24323
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
25133
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24324
25134
  }
24325
25135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPNumberFilterWidgetEditComponent, decorators: [{
24326
25136
  type: Component,
@@ -24502,7 +25312,7 @@ class AXPStatusFilterWidgetEditComponent extends AXPDataListWidgetComponent {
24502
25312
  <ax-clear-button></ax-clear-button>
24503
25313
  </ax-select-box>
24504
25314
  </div>
24505
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
25315
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24506
25316
  }
24507
25317
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStatusFilterWidgetEditComponent, decorators: [{
24508
25318
  type: Component,
@@ -24623,7 +25433,7 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
24623
25433
  (selectedOperationChange)="handleOperationChanged($event)"
24624
25434
  ></axp-filter-operations>
24625
25435
  </div>
24626
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
25436
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$6.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
24627
25437
  }
24628
25438
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStringWidgetFilterComponent, decorators: [{
24629
25439
  type: Component,
@@ -25339,7 +26149,7 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
25339
26149
  </p>
25340
26150
  }
25341
26151
  </ax-form-field>
25342
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i4$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
26152
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i4$2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
25343
26153
  }
25344
26154
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
25345
26155
  type: Component,
@@ -25464,7 +26274,7 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
25464
26274
  </p>
25465
26275
  }
25466
26276
  </ax-form-field>
25467
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
26277
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
25468
26278
  }
25469
26279
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, decorators: [{
25470
26280
  type: Component,
@@ -26374,7 +27184,7 @@ class AXPIconWidgetViewComponent extends AXPColumnWidgetComponent {
26374
27184
  } @else {
26375
27185
  <ax-icon [icon]="getIcon()"></ax-icon>
26376
27186
  }
26377
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i4$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
27187
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i4$2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
26378
27188
  }
26379
27189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconWidgetViewComponent, decorators: [{
26380
27190
  type: Component,
@@ -27542,6 +28352,7 @@ const REGISTERED_WIDGETS = [
27542
28352
  AXPJsonViewerWidget,
27543
28353
  AXPOutcomeResultsViewerWidget,
27544
28354
  AXPStopwatchWidget,
28355
+ AXPIntegrationConnectionsPanelWidget,
27545
28356
  AXPToggleWidget,
27546
28357
  AXPRatePickerWidget,
27547
28358
  AXPColorBoxWidget,
@@ -28134,5 +28945,5 @@ var getWidgetsForAi_query = /*#__PURE__*/Object.freeze({
28134
28945
  * Generated bundle index. Do not edit.
28135
28946
  */
28136
28947
 
28137
- export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeViewerService, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_QRCODE_SIZE, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, matchesWidgetAiAgent };
28948
+ export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPIntegrationConnectionsPanelWidget, AXPIntegrationConnectionsPanelWidgetEditComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeViewerService, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_QRCODE_SIZE, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, matchesWidgetAiAgent };
28138
28949
  //# sourceMappingURL=acorex-platform-layout-widgets.mjs.map