@eightshift/ui-components 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,.components-tooltip,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}.edit-post-header__toolbar .components-button{min-height:2.25rem}.edit-post-header__toolbar .components-button{min-width:2.25rem}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;border-radius:.375rem;padding:.
|
|
1
|
+
.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,.components-tooltip,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}.edit-post-header__toolbar .components-button{min-height:2.25rem}.edit-post-header__toolbar .components-button{min-width:2.25rem}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;border-radius:.375rem;padding:.25rem .375rem}.components-tooltip:has(>:first-child){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity));background-color:#fffc}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { _ as __, s as sprintf } from "../../default-i18n-BqwLkgZv.js";
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
import { a as ButtonGroup } from "../../button-IxfzzzbP.js";
|
|
5
|
-
import { ToggleButton } from "../toggle-button/toggle-button.js";
|
|
6
|
-
import { Repeater } from "../repeater/repeater.js";
|
|
7
|
-
import { RepeaterItem } from "../repeater/repeater-item.js";
|
|
3
|
+
import { useMemo, useState } from "react";
|
|
4
|
+
import { B as Button, a as ButtonGroup } from "../../button-IxfzzzbP.js";
|
|
8
5
|
import { icons } from "../../icons/icons.js";
|
|
9
6
|
import { SolidColorPicker } from "./solid-color-picker.js";
|
|
10
7
|
import { Slider } from "../slider/slider.js";
|
|
11
8
|
import { NumberPicker } from "../number-picker/number-picker.js";
|
|
12
9
|
import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-5bZ_yIMB.js";
|
|
13
10
|
import { Menu, MenuItem } from "../menu/menu.js";
|
|
14
|
-
import { BaseControl } from "../base-control/base-control.js";
|
|
15
11
|
import { MatrixAlign } from "../matrix-align/matrix-align.js";
|
|
16
12
|
import { Spacer } from "../spacer/spacer.js";
|
|
17
13
|
import { Toggle } from "../toggle/toggle.js";
|
|
14
|
+
import { OptionSelect } from "../option-select/option-select.js";
|
|
15
|
+
import { DraggableList } from "../draggable-list/draggable-list.js";
|
|
16
|
+
import { DraggableListItem } from "../draggable-list/draggable-list-item.js";
|
|
17
|
+
import { TriggeredPopover } from "../popover/popover.js";
|
|
18
18
|
import { c as clsx } from "../../lite-DVmmD_-j.js";
|
|
19
19
|
function c(e, o = ",") {
|
|
20
20
|
let t = [], n = 0, i = 0;
|
|
@@ -213,7 +213,7 @@ const linearDirections = [
|
|
|
213
213
|
* @preserve
|
|
214
214
|
*/
|
|
215
215
|
const GradientEditor = (props) => {
|
|
216
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
|
|
216
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
217
217
|
const { value, onChange, hidden } = props;
|
|
218
218
|
const gradientData = useMemo(() => {
|
|
219
219
|
if ((value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
|
|
@@ -237,31 +237,33 @@ const GradientEditor = (props) => {
|
|
|
237
237
|
onChange(getGradientResult(data, gradientType));
|
|
238
238
|
};
|
|
239
239
|
const outputGradient = useMemo(() => getGradientResult(gradientData, gradientType), [gradientData, gradientType]);
|
|
240
|
+
const [squarePreview, setSquarePreview] = useState(false);
|
|
240
241
|
if (hidden) {
|
|
241
242
|
return null;
|
|
242
243
|
}
|
|
243
244
|
return /* @__PURE__ */ jsxs("div", { className: "es-uic-w-full es-uic-space-y-2.5", children: [
|
|
244
245
|
/* @__PURE__ */ jsx(
|
|
245
|
-
"
|
|
246
|
+
"button",
|
|
246
247
|
{
|
|
247
|
-
className:
|
|
248
|
-
|
|
248
|
+
className: clsx(
|
|
249
|
+
"es-uic-shadow-sm, es-uic-mx-auto es-uic-block es-uic-h-40 es-uic-cursor-pointer es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-transition-[width]",
|
|
250
|
+
squarePreview ? "es-uic-w-40" : "es-uic-w-full"
|
|
251
|
+
),
|
|
252
|
+
style: { backgroundImage: outputGradient },
|
|
253
|
+
onClick: () => setSquarePreview((prev) => !prev),
|
|
254
|
+
"aria-label": __("Toggle preview size", "eightshift-ui-components")
|
|
255
|
+
}
|
|
256
|
+
),
|
|
257
|
+
/* @__PURE__ */ jsx(
|
|
258
|
+
OptionSelect,
|
|
259
|
+
{
|
|
260
|
+
"aria-label": __("Gradient type", "eightshift-ui-components"),
|
|
261
|
+
value: gradientType,
|
|
262
|
+
onChange: (value2) => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
|
|
263
|
+
options: gradientTypes,
|
|
264
|
+
wrapperProps: { className: "es-uic-mx-auto es-uic-w-fit" }
|
|
249
265
|
}
|
|
250
266
|
),
|
|
251
|
-
/* @__PURE__ */ jsx(ButtonGroup, { className: "es-uic-w-full", children: gradientTypes.map(({ label, value: value2, icon }) => {
|
|
252
|
-
return /* @__PURE__ */ jsx(
|
|
253
|
-
ToggleButton,
|
|
254
|
-
{
|
|
255
|
-
selected: gradientType === value2,
|
|
256
|
-
onChange: () => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
|
|
257
|
-
icon,
|
|
258
|
-
className: "es-uic-grow",
|
|
259
|
-
children: label
|
|
260
|
-
},
|
|
261
|
-
value2
|
|
262
|
-
);
|
|
263
|
-
}) }),
|
|
264
|
-
/* @__PURE__ */ jsx(Spacer, { size: "xs" }),
|
|
265
267
|
gradientType === "linear" && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-1", children: [
|
|
266
268
|
/* @__PURE__ */ jsx(
|
|
267
269
|
NumberPicker,
|
|
@@ -317,41 +319,22 @@ const GradientEditor = (props) => {
|
|
|
317
319
|
] }),
|
|
318
320
|
gradientType === "radial" && /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2", children: [
|
|
319
321
|
/* @__PURE__ */ jsx(
|
|
320
|
-
|
|
322
|
+
OptionSelect,
|
|
321
323
|
{
|
|
322
324
|
label: __("Shape", "eightshift-ui-components"),
|
|
323
325
|
icon: icons.genericShapesAlt,
|
|
324
326
|
inline: true,
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
size: "large",
|
|
337
|
-
children: __("Circle", "eightshift-ui-components")
|
|
338
|
-
}
|
|
339
|
-
),
|
|
340
|
-
/* @__PURE__ */ jsx(
|
|
341
|
-
ToggleButton,
|
|
342
|
-
{
|
|
343
|
-
selected: gradientData.shape === "ellipse",
|
|
344
|
-
onChange: () => {
|
|
345
|
-
setGradientData({
|
|
346
|
-
...gradientData,
|
|
347
|
-
shape: "ellipse"
|
|
348
|
-
});
|
|
349
|
-
},
|
|
350
|
-
size: "large",
|
|
351
|
-
children: __("Ellipse", "eightshift-ui-components")
|
|
352
|
-
}
|
|
353
|
-
)
|
|
354
|
-
] })
|
|
327
|
+
options: [
|
|
328
|
+
{ label: __("Circle", "eightshift-ui-components"), value: "circle" },
|
|
329
|
+
{ label: __("Ellipse", "eightshift-ui-components"), value: "ellipse" }
|
|
330
|
+
],
|
|
331
|
+
value: gradientData.shape,
|
|
332
|
+
onChange: (value2) => {
|
|
333
|
+
setGradientData({
|
|
334
|
+
...gradientData,
|
|
335
|
+
shape: value2
|
|
336
|
+
});
|
|
337
|
+
}
|
|
355
338
|
}
|
|
356
339
|
),
|
|
357
340
|
/* @__PURE__ */ jsx(
|
|
@@ -390,6 +373,7 @@ const GradientEditor = (props) => {
|
|
|
390
373
|
angle: `${value2}deg`
|
|
391
374
|
});
|
|
392
375
|
},
|
|
376
|
+
size: "small",
|
|
393
377
|
suffix: "°",
|
|
394
378
|
className: "es-uic-grow"
|
|
395
379
|
}
|
|
@@ -425,7 +409,7 @@ const GradientEditor = (props) => {
|
|
|
425
409
|
),
|
|
426
410
|
/* @__PURE__ */ jsx(Spacer, { border: true }),
|
|
427
411
|
/* @__PURE__ */ jsx(
|
|
428
|
-
|
|
412
|
+
DraggableList,
|
|
429
413
|
{
|
|
430
414
|
items: gradientData == null ? void 0 : gradientData.stops,
|
|
431
415
|
onChange: (items) => {
|
|
@@ -437,23 +421,29 @@ const GradientEditor = (props) => {
|
|
|
437
421
|
}))
|
|
438
422
|
});
|
|
439
423
|
},
|
|
440
|
-
itemLabelProp: "title",
|
|
441
424
|
icon: icons.gradientStop,
|
|
442
425
|
label: __("Gradient stops", "eightshift-ui-components"),
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
426
|
+
actions: /* @__PURE__ */ jsx(
|
|
427
|
+
Button,
|
|
428
|
+
{
|
|
429
|
+
icon: icons.add,
|
|
430
|
+
size: "small",
|
|
431
|
+
onPress: () => {
|
|
432
|
+
setGradientData({
|
|
433
|
+
...gradientData,
|
|
434
|
+
stops: [...gradientData.stops, { color: "#000000FF" }]
|
|
435
|
+
});
|
|
436
|
+
},
|
|
437
|
+
"aria-label": __("Add stop", "eightshift-ui-components")
|
|
438
|
+
}
|
|
439
|
+
),
|
|
447
440
|
children: (item) => {
|
|
448
|
-
var _a2, _b2;
|
|
449
441
|
const { color, updateData, itemIndex } = item;
|
|
450
|
-
const defaultOffset = itemIndex * 100 / (gradientData.stops.length - 1);
|
|
451
|
-
const offset = `${((_b2 = (_a2 = gradientData.stops[itemIndex]) == null ? void 0 : _a2.offset) == null ? void 0 : _b2.value) ?? defaultOffset}%`;
|
|
452
442
|
return /* @__PURE__ */ jsx(
|
|
453
|
-
|
|
443
|
+
DraggableListItem,
|
|
454
444
|
{
|
|
455
445
|
label: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
|
|
456
|
-
subtitle:
|
|
446
|
+
subtitle: color,
|
|
457
447
|
icon: /* @__PURE__ */ jsx(
|
|
458
448
|
$251c695a52d94a8d$export$cae13e90592f246a,
|
|
459
449
|
{
|
|
@@ -462,21 +452,46 @@ const GradientEditor = (props) => {
|
|
|
462
452
|
}
|
|
463
453
|
),
|
|
464
454
|
textValue: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
|
|
465
|
-
children: /* @__PURE__ */
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
455
|
+
children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
|
|
456
|
+
/* @__PURE__ */ jsx(
|
|
457
|
+
TriggeredPopover,
|
|
458
|
+
{
|
|
459
|
+
triggerButtonIcon: icons.color,
|
|
460
|
+
triggerButtonProps: { size: "small" },
|
|
461
|
+
children: /* @__PURE__ */ jsx(
|
|
462
|
+
SolidColorPicker,
|
|
463
|
+
{
|
|
464
|
+
value: color,
|
|
465
|
+
onChange: (color2) => {
|
|
466
|
+
updateData({ color: color2 });
|
|
467
|
+
},
|
|
468
|
+
allowTransparency: true,
|
|
469
|
+
outputFormat: "rgba"
|
|
470
|
+
}
|
|
471
|
+
)
|
|
472
|
+
}
|
|
473
|
+
),
|
|
474
|
+
/* @__PURE__ */ jsx(
|
|
475
|
+
Button,
|
|
476
|
+
{
|
|
477
|
+
onPress: () => {
|
|
478
|
+
setGradientData({
|
|
479
|
+
...gradientData,
|
|
480
|
+
stops: gradientData.stops.filter((_, i) => i !== itemIndex)
|
|
481
|
+
});
|
|
482
|
+
},
|
|
483
|
+
icon: icons.trash,
|
|
484
|
+
size: "small",
|
|
485
|
+
"aria-label": __("Delete stop", "eightshift-ui-components"),
|
|
486
|
+
disabled: gradientData.stops.length <= 2
|
|
487
|
+
}
|
|
488
|
+
)
|
|
489
|
+
] })
|
|
476
490
|
}
|
|
477
491
|
);
|
|
478
492
|
}
|
|
479
|
-
}
|
|
493
|
+
},
|
|
494
|
+
(_m = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _m.length
|
|
480
495
|
),
|
|
481
496
|
/* @__PURE__ */ jsx(
|
|
482
497
|
Slider,
|
|
@@ -485,7 +500,7 @@ const GradientEditor = (props) => {
|
|
|
485
500
|
min: 0,
|
|
486
501
|
max: 100,
|
|
487
502
|
step: 1,
|
|
488
|
-
value: (
|
|
503
|
+
value: (_n = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _n.map(({ offset }, i) => {
|
|
489
504
|
if (!offset) {
|
|
490
505
|
return i * 100 / (gradientData.stops.length - 1);
|
|
491
506
|
}
|