@acorex/platform 20.6.0-next.6 → 20.6.0-next.8

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 (28) hide show
  1. package/fesm2022/acorex-platform-layout-components.mjs +1 -1
  2. package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
  3. package/fesm2022/acorex-platform-layout-designer.mjs +2 -2
  4. package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
  5. package/fesm2022/acorex-platform-layout-entity.mjs +1 -1
  6. package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
  7. package/fesm2022/acorex-platform-layout-views.mjs +2 -2
  8. package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
  9. package/fesm2022/acorex-platform-layout-widget-core.mjs +1 -1
  10. package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
  11. package/fesm2022/acorex-platform-layout-widgets.mjs +6 -6
  12. package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
  13. package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-g-EOvXP_.mjs → acorex-platform-themes-default-entity-master-create-view.component-WbPPqDON.mjs} +2 -2
  14. package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-WbPPqDON.mjs.map +1 -0
  15. package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-CD3dS3z9.mjs → acorex-platform-themes-default-entity-master-list-view.component-CD7rJIMh.mjs} +3 -3
  16. package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-CD7rJIMh.mjs.map +1 -0
  17. package/fesm2022/{acorex-platform-themes-default-entity-master-modify-view.component-Cwntcjyy.mjs → acorex-platform-themes-default-entity-master-modify-view.component-BTA6h7Xd.mjs} +2 -2
  18. package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-BTA6h7Xd.mjs.map +1 -0
  19. package/fesm2022/acorex-platform-themes-default.mjs +7 -7
  20. package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
  21. package/fesm2022/acorex-platform-themes-shared.mjs +1 -1
  22. package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
  23. package/layout/widgets/index.d.ts +1 -2
  24. package/package.json +1 -1
  25. package/themes/default/index.d.ts +3 -4
  26. package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-g-EOvXP_.mjs.map +0 -1
  27. package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-CD3dS3z9.mjs.map +0 -1
  28. package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-Cwntcjyy.mjs.map +0 -1
package/fesm2022/acorex-platform-layout-widgets.mjs CHANGED
@@ -6363,7 +6363,7 @@ class AXPTemplateBoxWidgetEditComponent extends AXPValueWidgetComponent {
6363
6363
  </div>
6364
6364
  </div>
6365
6365
  </div>
6366
- `, 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6366
+ `, 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6367
6367
  }
6368
6368
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateBoxWidgetEditComponent, decorators: [{
6369
6369
  type: Component,
@@ -7957,7 +7957,7 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
7957
7957
  ></ax-dropdown-command-column>
7958
7958
  }
7959
7959
  </ax-data-table>
7960
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$9.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$9.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$9.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$9.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$9.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7960
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$9.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$9.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$9.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$9.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$9.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7961
7961
  }
7962
7962
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataListWidgetViewComponent, decorators: [{
7963
7963
  type: Component,
@@ -9375,7 +9375,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
9375
9375
  [readonly]="readonly()"
9376
9376
  ></axp-file-list>
9377
9377
  </div>
9378
- `, isInline: true, styles: [".__drag-over{background-color:rgba(var(--ax-sys-color-primary-50),.1);border:2px dashed rgb(var(--ax-sys-color-primary-500));border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { 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: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "files", "plugins", "excludePlugins", "host"], outputs: ["onRemove", "onRevert", "onRename"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9378
+ `, isInline: true, styles: [".__drag-over{background-color:rgba(var(--ax-sys-color-primary-50),.1);border:2px dashed rgb(var(--ax-sys-color-primary-500));border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { 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: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "files", "plugins", "excludePlugins", "host"], outputs: ["onRemove", "onRevert", "onRename"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9379
9379
  }
9380
9380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, decorators: [{
9381
9381
  type: Component,
@@ -16268,7 +16268,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
16268
16268
  };
16269
16269
  }
16270
16270
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
16271
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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: i7.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$g.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$g.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 }); }
16271
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.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: i7.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$g.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$g.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 }); }
16272
16272
  }
16273
16273
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
16274
16274
  type: Component,
@@ -17212,7 +17212,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
17212
17212
  return { clientX: touch.clientX, clientY: touch.clientY };
17213
17213
  }
17214
17214
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
17215
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-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;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.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 rgba(41,41,41,.44)}.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$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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: 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 }); }
17215
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-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;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.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 rgba(41,41,41,.44)}.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$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.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: 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 }); }
17216
17216
  }
17217
17217
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
17218
17218
  type: Component,
@@ -18893,7 +18893,7 @@ class AXPNumberUnitBoxWidgetEditComponent extends AXPValueWidgetComponent {
18893
18893
  </ax-number-box>
18894
18894
  </div>
18895
18895
  </div>
18896
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
18896
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
18897
18897
  }
18898
18898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPNumberUnitBoxWidgetEditComponent, decorators: [{
18899
18899
  type: Component,