@acorex/platform 21.0.0-beta.6 → 21.0.0-beta.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 (18) hide show
  1. package/fesm2022/acorex-platform-auth.mjs +4 -0
  2. package/fesm2022/acorex-platform-auth.mjs.map +1 -1
  3. package/fesm2022/acorex-platform-common.mjs.map +1 -1
  4. package/fesm2022/acorex-platform-core.mjs.map +1 -1
  5. package/fesm2022/acorex-platform-layout-components.mjs +2 -2
  6. package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
  7. package/fesm2022/acorex-platform-layout-entity.mjs +375 -2
  8. package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
  9. package/fesm2022/acorex-platform-layout-views.mjs +2 -2
  10. package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
  11. package/fesm2022/acorex-platform-layout-widgets.mjs +5 -5
  12. package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
  13. package/fesm2022/acorex-platform-themes-default.mjs +1 -1
  14. package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
  15. package/package.json +1 -1
  16. package/types/acorex-platform-common.d.ts +1 -1
  17. package/types/acorex-platform-core.d.ts +1 -1
  18. package/types/acorex-platform-layout-entity.d.ts +126 -6
package/fesm2022/acorex-platform-layout-widgets.mjs CHANGED
@@ -14273,7 +14273,7 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
14273
14273
  }
14274
14274
  get __class() {
14275
14275
  const cls = {};
14276
- cls[`ax-inline-block`] = true;
14276
+ cls[`inline-block`] = true;
14277
14277
  return cls;
14278
14278
  }
14279
14279
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -21390,7 +21390,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
21390
21390
  };
21391
21391
  }
21392
21392
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
21393
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2 axp-border-container\">\n <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n <span class=\"text-sm font-light\">Radius</span>\n <div class=\"flex gap-1 items-center\">\n <button\n #allRadiusEl\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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 (pointerdown)=\"handleActiveRadiusSide($event)\" name=\"sides\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"flex justify-center items-center flex-shrink\">\n <ax-range-slider\n [values]=\"allRadius()\"\n [min]=\"0\"\n [max]=\"100\"\n (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"min-w-24\"\n ></ax-range-slider>\n </div>\n <div class=\"flex justify-start 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=\"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=\"w-48\"></div>\n }\n </div>\n </div>\n\n <div\n class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n style=\"interpolate-size: allow-keywords\"\n >\n <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n <div class=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex justify-between items-center py-1\">\n <span class=\"text-sm font-light\">Borders</span>\n </div>\n\n <div class=\"border-box flex justify-between items-center gap-4\">\n <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n <!-- Top Border -->\n <div class=\"border-box-top col-start-2 row-start-1\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"top\"\n class=\"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=\"border-box-right col-start-3 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"right\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-bottom col-start-2 row-start-3\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"bottom\"\n class=\"p-1 hover:!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=\"border-box-left col-start-1 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"left\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-all col-start-2 row-start-2\">\n <button\n #allBorderEl\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\">\n <div class=\"text-sm 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=\"contents\" [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\">\n <div class=\"text-sm font-light\">Width</div>\n <div class=\"flex justify-start items-center 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 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=\"text-sm font-light\">Color</div>\n <div class=\"flex justify-start items-center max-w-36 overflow-hidden\">\n <ax-color-box\n class=\"ax-sm\"\n [value]=\"shownColor()\"\n (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\n ></ax-color-box>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
21393
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2 axp-border-container\">\n <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n <span class=\"text-sm font-light\">Radius</span>\n <div class=\"flex gap-1 items-center\">\n <button\n #allRadiusEl\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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 (pointerdown)=\"handleActiveRadiusSide($event)\" name=\"sides\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"flex justify-center items-center flex-shrink\">\n <ax-range-slider\n [values]=\"allRadius()\"\n [min]=\"0\"\n [max]=\"100\"\n (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"min-w-24\"\n ></ax-range-slider>\n </div>\n <div class=\"flex justify-start 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=\"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=\"w-48\"></div>\n }\n </div>\n </div>\n\n <div\n class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n style=\"interpolate-size: allow-keywords\"\n >\n <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n <div class=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex justify-between items-center py-1\">\n <span class=\"text-sm font-light\">Borders</span>\n </div>\n\n <div class=\"border-box flex justify-between items-center gap-4\">\n <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n <!-- Top Border -->\n <div class=\"border-box-top col-start-2 row-start-1\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"top\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-right col-start-3 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"right\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-bottom col-start-2 row-start-3\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"bottom\"\n class=\"p-1 hover:!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=\"border-box-left col-start-1 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"left\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-all col-start-2 row-start-2\">\n <button\n #allBorderEl\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\">\n <div class=\"text-sm 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=\"contents\" [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\">\n <div class=\"text-sm font-light\">Width</div>\n <div class=\"flex justify-start items-center 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 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=\"text-sm font-light\">Color</div>\n <div class=\"flex justify-start items-center max-w-36 overflow-hidden\">\n <ax-color-box\n class=\"ax-sm\"\n [value]=\"shownColor()\"\n (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\n ></ax-color-box>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
21394
21394
  }
21395
21395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
21396
21396
  type: Component,
@@ -21404,7 +21404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
21404
21404
  AXButtonGroupModule,
21405
21405
  AXColorBoxModule,
21406
21406
  AXDropdownButtonModule,
21407
- ], template: "<div class=\"pt-2 axp-border-container\">\n <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n <span class=\"text-sm font-light\">Radius</span>\n <div class=\"flex gap-1 items-center\">\n <button\n #allRadiusEl\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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 (pointerdown)=\"handleActiveRadiusSide($event)\" name=\"sides\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"flex justify-center items-center flex-shrink\">\n <ax-range-slider\n [values]=\"allRadius()\"\n [min]=\"0\"\n [max]=\"100\"\n (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"min-w-24\"\n ></ax-range-slider>\n </div>\n <div class=\"flex justify-start 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=\"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=\"w-48\"></div>\n }\n </div>\n </div>\n\n <div\n class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n style=\"interpolate-size: allow-keywords\"\n >\n <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n <div class=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex justify-between items-center py-1\">\n <span class=\"text-sm font-light\">Borders</span>\n </div>\n\n <div class=\"border-box flex justify-between items-center gap-4\">\n <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n <!-- Top Border -->\n <div class=\"border-box-top col-start-2 row-start-1\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"top\"\n class=\"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=\"border-box-right col-start-3 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"right\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-bottom col-start-2 row-start-3\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"bottom\"\n class=\"p-1 hover:!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=\"border-box-left col-start-1 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"left\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-all col-start-2 row-start-2\">\n <button\n #allBorderEl\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\">\n <div class=\"text-sm 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=\"contents\" [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\">\n <div class=\"text-sm font-light\">Width</div>\n <div class=\"flex justify-start items-center 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 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=\"text-sm font-light\">Color</div>\n <div class=\"flex justify-start items-center max-w-36 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"] }]
21407
+ ], template: "<div class=\"pt-2 axp-border-container\">\n <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n <span class=\"text-sm font-light\">Radius</span>\n <div class=\"flex gap-1 items-center\">\n <button\n #allRadiusEl\n (pointerdown)=\"handleActiveRadiusSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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 (pointerdown)=\"handleActiveRadiusSide($event)\" name=\"sides\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"flex justify-center items-center flex-shrink\">\n <ax-range-slider\n [values]=\"allRadius()\"\n [min]=\"0\"\n [max]=\"100\"\n (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n class=\"min-w-24\"\n ></ax-range-slider>\n </div>\n <div class=\"flex justify-start 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=\"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=\"w-48\"></div>\n }\n </div>\n </div>\n\n <div\n class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n style=\"interpolate-size: allow-keywords\"\n >\n <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n <div class=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex gap-1 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=\"flex justify-start items-center 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=\"flex justify-between items-center py-1\">\n <span class=\"text-sm font-light\">Borders</span>\n </div>\n\n <div class=\"border-box flex justify-between items-center gap-4\">\n <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n <!-- Top Border -->\n <div class=\"border-box-top col-start-2 row-start-1\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"top\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-right col-start-3 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"right\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-bottom col-start-2 row-start-3\">\n <button\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"bottom\"\n class=\"p-1 hover:!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=\"border-box-left col-start-1 row-start-2\">\n <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"left\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\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=\"border-box-all col-start-2 row-start-2\">\n <button\n #allBorderEl\n (pointerdown)=\"handleActiveBorderSide($event)\"\n name=\"all\"\n class=\"p-1 hover:!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=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\">\n <div class=\"text-sm 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=\"contents\" [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\">\n <div class=\"text-sm font-light\">Width</div>\n <div class=\"flex justify-start items-center 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 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=\"text-sm font-light\">Color</div>\n <div class=\"flex justify-start items-center max-w-36 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"] }]
21408
21408
  }], propDecorators: { allBorderEl: [{ type: i0.ViewChild, args: ['allBorderEl', { isSignal: true }] }], allRadiusEl: [{ type: i0.ViewChild, args: ['allRadiusEl', { isSignal: true }] }] } });
21409
21409
 
21410
21410
  var borderWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -22779,7 +22779,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
22779
22779
  return { clientX: touch.clientX, clientY: touch.clientY };
22780
22780
  }
22781
22781
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
22782
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 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: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: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: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: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: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: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: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: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=\"text-xs text-center text-neutral-400 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=\"size-4 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=\"flex justify-center h-6 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:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n [class]=\"i.rowspan ? '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=\"truncate\">\n {{ i.label }}\n <span class=\"text-xs text-neutral-400\"> {{ units()[this.current().type][this.current().side] }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n <div\n [class.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=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!ax-bg-[#404040]\"\n >\n <div class=\"flex flex-row items-center\">\n <div class=\"min-w-6 self-center grow basis-0\">\n <div class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\">\n <div class=\"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=\"self-center\">\n <div\n class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end 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;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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", "text", "color", "look", "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 }); }
22782
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 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: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: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: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: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: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: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: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: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=\"text-xs text-center text-neutral-400 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=\"size-4 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=\"flex justify-center h-6 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:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n [class]=\"i.rowspan ? '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=\"truncate\">\n {{ i.label }}\n <span class=\"text-xs text-neutral-400\"> {{ units()[this.current().type][this.current().side] }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n <div\n [class.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=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n >\n <div class=\"flex flex-row items-center\">\n <div class=\"min-w-6 self-center grow basis-0\">\n <div class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\">\n <div class=\"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=\"self-center\">\n <div\n class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end 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;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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", "text", "color", "look", "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 }); }
22783
22783
  }
22784
22784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
22785
22785
  type: Component,
@@ -22794,7 +22794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
22794
22794
  AXDropdownButtonModule,
22795
22795
  AXNumberBoxModule,
22796
22796
  AXDecoratorModule,
22797
- ], template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 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: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: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: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: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: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: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: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: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=\"text-xs text-center text-neutral-400 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=\"size-4 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=\"flex justify-center h-6 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:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n [class]=\"i.rowspan ? '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=\"truncate\">\n {{ i.label }}\n <span class=\"text-xs text-neutral-400\"> {{ units()[this.current().type][this.current().side] }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n <div\n [class.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=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!ax-bg-[#404040]\"\n >\n <div class=\"flex flex-row items-center\">\n <div class=\"min-w-6 self-center grow basis-0\">\n <div class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\">\n <div class=\"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=\"self-center\">\n <div\n class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end 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;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
22797
+ ], template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 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: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: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: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: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: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: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: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: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=\"text-xs text-center text-neutral-400 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=\"size-4 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=\"flex justify-center h-6 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:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n [class]=\"i.rowspan ? '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=\"truncate\">\n {{ i.label }}\n <span class=\"text-xs text-neutral-400\"> {{ units()[this.current().type][this.current().side] }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n <div\n [class.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=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n >\n <div class=\"flex flex-row items-center\">\n <div class=\"min-w-6 self-center grow basis-0\">\n <div class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\">\n <div class=\"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=\"self-center\">\n <div\n class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end 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;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
22798
22798
  }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }] } });
22799
22799
 
22800
22800
  var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({