Files
klz-cables.com/.pnpm-store/v10/files/8d/b30a6cc5601993a1087f28f48e451fd4db7f051619c84202bfcd3e040ef2b5bccd47e06b82a5afb9d4c5af68e5345ba03e53e8b96c886d7f2dbcc2c6839f34
Marc Mintel 5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
fix(products): fix breadcrumbs and product filtering (backport from main)
2026-02-24 16:04:21 +01:00

426 lines
19 KiB
Plaintext

import g, { PureComponent as E, createRef as _ } from "react";
const M = {
x: 0,
y: 0,
width: 0,
height: 0,
unit: "px"
}, f = (s, t, e) => Math.min(Math.max(s, t), e), S = (...s) => s.filter((t) => t && typeof t == "string").join(" "), P = (s, t) => s === t || s.width === t.width && s.height === t.height && s.x === t.x && s.y === t.y && s.unit === t.unit;
function H(s, t, e, o) {
const i = y(s, e, o);
return s.width && (i.height = i.width / t), s.height && (i.width = i.height * t), i.y + i.height > o && (i.height = o - i.y, i.width = i.height * t), i.x + i.width > e && (i.width = e - i.x, i.height = i.width / t), s.unit === "%" ? D(i, e, o) : i;
}
function N(s, t, e) {
const o = y(s, t, e);
return o.x = (t - o.width) / 2, o.y = (e - o.height) / 2, s.unit === "%" ? D(o, t, e) : o;
}
function D(s, t, e) {
return s.unit === "%" ? { ...M, ...s, unit: "%" } : {
unit: "%",
x: s.x ? s.x / t * 100 : 0,
y: s.y ? s.y / e * 100 : 0,
width: s.width ? s.width / t * 100 : 0,
height: s.height ? s.height / e * 100 : 0
};
}
function y(s, t, e) {
return s.unit ? s.unit === "px" ? { ...M, ...s, unit: "px" } : {
unit: "px",
x: s.x ? s.x * t / 100 : 0,
y: s.y ? s.y * e / 100 : 0,
width: s.width ? s.width * t / 100 : 0,
height: s.height ? s.height * e / 100 : 0
} : { ...M, ...s, unit: "px" };
}
function X(s, t, e, o, i, n = 0, a = 0, w = o, h = i) {
const r = { ...s };
let c = Math.min(n, o), d = Math.min(a, i), p = Math.min(w, o), l = Math.min(h, i);
t && (t > 1 ? (c = a ? a * t : c, d = c / t, p = w * t) : (d = n ? n / t : d, c = d * t, l = h / t)), r.y < 0 && (r.height = Math.max(r.height + r.y, d), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, c), r.x = 0);
const u = o - (r.x + r.width);
u < 0 && (r.x = Math.min(r.x, o - c), r.width += u);
const C = i - (r.y + r.height);
if (C < 0 && (r.y = Math.min(r.y, i - d), r.height += C), r.width < c && ((e === "sw" || e == "nw") && (r.x -= c - r.width), r.width = c), r.height < d && ((e === "nw" || e == "ne") && (r.y -= d - r.height), r.height = d), r.width > p && ((e === "sw" || e == "nw") && (r.x -= p - r.width), r.width = p), r.height > l && ((e === "nw" || e == "ne") && (r.y -= l - r.height), r.height = l), t) {
const R = r.width / r.height;
if (R < t) {
const x = Math.max(r.width / t, d);
(e === "nw" || e == "ne") && (r.y -= x - r.height), r.height = x;
} else if (R > t) {
const x = Math.max(r.height * t, c);
(e === "sw" || e == "nw") && (r.x -= x - r.width), r.width = x;
}
}
return r;
}
function K(s, t, e, o) {
const i = { ...s };
return t === "ArrowLeft" ? o === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : o === "w" ? (i.x -= e, i.width += e) : o === "sw" ? (i.x -= e, i.width += e, i.height += e) : o === "ne" ? (i.y += e, i.width -= e, i.height -= e) : o === "e" ? i.width -= e : o === "se" && (i.width -= e, i.height -= e) : t === "ArrowRight" && (o === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : o === "w" ? (i.x += e, i.width -= e) : o === "sw" ? (i.x += e, i.width -= e, i.height -= e) : o === "ne" ? (i.y -= e, i.width += e, i.height += e) : o === "e" ? i.width += e : o === "se" && (i.width += e, i.height += e)), t === "ArrowUp" ? o === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : o === "n" ? (i.y -= e, i.height += e) : o === "ne" ? (i.y -= e, i.width += e, i.height += e) : o === "sw" ? (i.x += e, i.width -= e, i.height -= e) : o === "s" ? i.height -= e : o === "se" && (i.width -= e, i.height -= e) : t === "ArrowDown" && (o === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : o === "n" ? (i.y += e, i.height -= e) : o === "ne" ? (i.y += e, i.width -= e, i.height -= e) : o === "sw" ? (i.x -= e, i.width += e, i.height += e) : o === "s" ? i.height += e : o === "se" && (i.width += e, i.height += e)), i;
}
const b = { capture: !0, passive: !1 }, v = class m extends E {
constructor() {
super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
startClientX: 0,
startClientY: 0,
startCropX: 0,
startCropY: 0,
clientX: 0,
clientY: 0,
isResize: !0
}, this.componentRef = _(), this.mediaRef = _(), this.initChangeCalled = !1, this.state = {
cropIsActive: !1,
newCropIsBeingDrawn: !1
}, this.onCropPointerDown = (t) => {
const { crop: e, disabled: o } = this.props, i = this.getBox();
if (!e)
return;
const n = y(e, i.width, i.height);
if (o)
return;
t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
const a = t.target.dataset.ord, w = !!a;
let h = t.clientX, r = t.clientY, c = n.x, d = n.y;
if (a) {
const p = t.clientX - i.x, l = t.clientY - i.y;
let u = 0, C = 0;
a === "ne" || a == "e" ? (u = p - (n.x + n.width), C = l - n.y, c = n.x, d = n.y + n.height) : a === "se" || a === "s" ? (u = p - (n.x + n.width), C = l - (n.y + n.height), c = n.x, d = n.y) : a === "sw" || a == "w" ? (u = p - n.x, C = l - (n.y + n.height), c = n.x + n.width, d = n.y) : (a === "nw" || a == "n") && (u = p - n.x, C = l - n.y, c = n.x + n.width, d = n.y + n.height), h = c + i.x + u, r = d + i.y + C;
}
this.evData = {
startClientX: h,
startClientY: r,
startCropX: c,
startCropY: d,
clientX: t.clientX,
clientY: t.clientY,
isResize: w,
ord: a
}, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
}, this.onComponentPointerDown = (t) => {
const { crop: e, disabled: o, locked: i, keepSelection: n, onChange: a } = this.props, w = this.getBox();
if (o || i || n && e)
return;
t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
const h = t.clientX - w.x, r = t.clientY - w.y, c = {
unit: "px",
x: h,
y: r,
width: 0,
height: 0
};
this.evData = {
startClientX: t.clientX,
startClientY: t.clientY,
startCropX: h,
startCropY: r,
clientX: t.clientX,
clientY: t.clientY,
isResize: !0
}, this.mouseDownOnCrop = !0, a(y(c, w.width, w.height), D(c, w.width, w.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
}, this.onDocPointerMove = (t) => {
const { crop: e, disabled: o, onChange: i, onDragStart: n } = this.props, a = this.getBox();
if (o || !e || !this.mouseDownOnCrop)
return;
t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, n && n(t));
const { evData: w } = this;
w.clientX = t.clientX, w.clientY = t.clientY;
let h;
w.isResize ? h = this.resizeCrop() : h = this.dragCrop(), P(e, h) || i(
y(h, a.width, a.height),
D(h, a.width, a.height)
);
}, this.onComponentKeyDown = (t) => {
const { crop: e, disabled: o, onChange: i, onComplete: n } = this.props;
if (o)
return;
const a = t.key;
let w = !1;
if (!e)
return;
const h = this.getBox(), r = this.makePixelCrop(h), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? m.nudgeStepLarge : t.shiftKey ? m.nudgeStepMedium : m.nudgeStep;
if (a === "ArrowLeft" ? (r.x -= d, w = !0) : a === "ArrowRight" ? (r.x += d, w = !0) : a === "ArrowUp" ? (r.y -= d, w = !0) : a === "ArrowDown" && (r.y += d, w = !0), w) {
t.cancelable && t.preventDefault(), r.x = f(r.x, 0, h.width - r.width), r.y = f(r.y, 0, h.height - r.height);
const p = y(r, h.width, h.height), l = D(r, h.width, h.height);
i(p, l), n && n(p, l);
}
}, this.onHandlerKeyDown = (t, e) => {
const {
aspect: o = 0,
crop: i,
disabled: n,
minWidth: a = 0,
minHeight: w = 0,
maxWidth: h,
maxHeight: r,
onChange: c,
onComplete: d
} = this.props, p = this.getBox();
if (n || !i)
return;
if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
t.stopPropagation(), t.preventDefault();
else
return;
const u = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? m.nudgeStepLarge : t.shiftKey ? m.nudgeStepMedium : m.nudgeStep, C = y(i, p.width, p.height), R = K(C, t.key, u, e), x = X(
R,
o,
e,
p.width,
p.height,
a,
w,
h,
r
);
if (!P(i, x)) {
const Y = D(x, p.width, p.height);
c(x, Y), d && d(x, Y);
}
}, this.onDocPointerDone = (t) => {
const { crop: e, disabled: o, onComplete: i, onDragEnd: n } = this.props, a = this.getBox();
this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, n && n(t), i && i(y(e, a.width, a.height), D(e, a.width, a.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
}, this.onDragFocus = (t) => {
var e;
(e = this.componentRef.current) == null || e.scrollTo(0, 0);
};
}
get document() {
return document;
}
// We unfortunately get the bounding box every time as x+y changes
// due to scrolling.
getBox() {
const t = this.mediaRef.current;
if (!t)
return { x: 0, y: 0, width: 0, height: 0 };
const { x: e, y: o, width: i, height: n } = t.getBoundingClientRect();
return { x: e, y: o, width: i, height: n };
}
componentDidUpdate(t) {
const { crop: e, onComplete: o } = this.props;
if (o && !t.crop && e) {
const { width: i, height: n } = this.getBox();
i && n && o(y(e, i, n), D(e, i, n));
}
}
componentWillUnmount() {
this.resizeObserver && this.resizeObserver.disconnect();
}
bindDocMove() {
this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, b), this.document.addEventListener("pointerup", this.onDocPointerDone, b), this.document.addEventListener("pointercancel", this.onDocPointerDone, b), this.docMoveBound = !0);
}
unbindDocMove() {
this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, b), this.document.removeEventListener("pointerup", this.onDocPointerDone, b), this.document.removeEventListener("pointercancel", this.onDocPointerDone, b), this.docMoveBound = !1);
}
getCropStyle() {
const { crop: t } = this.props;
if (t)
return {
top: `${t.y}${t.unit}`,
left: `${t.x}${t.unit}`,
width: `${t.width}${t.unit}`,
height: `${t.height}${t.unit}`
};
}
dragCrop() {
const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), i = t.clientX - t.startClientX, n = t.clientY - t.startClientY;
return o.x = f(t.startCropX + i, 0, e.width - o.width), o.y = f(t.startCropY + n, 0, e.height - o.height), o;
}
getPointRegion(t, e, o, i) {
const { evData: n } = this, a = n.clientX - t.x, w = n.clientY - t.y;
let h;
i && e ? h = e === "nw" || e === "n" || e === "ne" : h = w < n.startCropY;
let r;
return o && e ? r = e === "nw" || e === "w" || e === "sw" : r = a < n.startCropX, r ? h ? "nw" : "sw" : h ? "ne" : "se";
}
resolveMinDimensions(t, e, o = 0, i = 0) {
let n = Math.min(o, t.width), a = Math.min(i, t.height);
return !e || !n && !a ? [n, a] : e > 1 ? n ? [n, n / e] : [a * e, a] : a ? [a * e, a] : [n, n / e];
}
resizeCrop() {
const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: i } = this.props, n = this.getBox(), [a, w] = this.resolveMinDimensions(n, e, this.props.minWidth, this.props.minHeight);
let h = this.makePixelCrop(n), r = this.getPointRegion(n, t.ord, a, w);
const c = t.ord || r;
let d = t.clientX - t.startClientX, p = t.clientY - t.startClientY;
(a && c === "nw" || c === "w" || c === "sw") && (d = Math.min(d, -a)), (w && c === "nw" || c === "n" || c === "ne") && (p = Math.min(p, -w));
const l = {
unit: "px",
x: 0,
y: 0,
width: 0,
height: 0
};
r === "ne" ? (l.x = t.startCropX, l.width = d, e ? (l.height = l.width / e, l.y = t.startCropY - l.height) : (l.height = Math.abs(p), l.y = t.startCropY - l.height)) : r === "se" ? (l.x = t.startCropX, l.y = t.startCropY, l.width = d, e ? l.height = l.width / e : l.height = p) : r === "sw" ? (l.x = t.startCropX + d, l.y = t.startCropY, l.width = Math.abs(d), e ? l.height = l.width / e : l.height = p) : r === "nw" && (l.x = t.startCropX + d, l.width = Math.abs(d), e ? (l.height = l.width / e, l.y = t.startCropY - l.height) : (l.height = Math.abs(p), l.y = t.startCropY + p));
const u = X(
l,
e,
r,
n.width,
n.height,
a,
w,
o,
i
);
return e || m.xyOrds.indexOf(c) > -1 ? h = u : m.xOrds.indexOf(c) > -1 ? (h.x = u.x, h.width = u.width) : m.yOrds.indexOf(c) > -1 && (h.y = u.y, h.height = u.height), h.x = f(h.x, 0, n.width - h.width), h.y = f(h.y, 0, n.height - h.height), h;
}
createCropSelection() {
const {
ariaLabels: t = m.defaultProps.ariaLabels,
disabled: e,
locked: o,
renderSelectionAddon: i,
ruleOfThirds: n,
crop: a
} = this.props, w = this.getCropStyle();
if (a)
return /* @__PURE__ */ g.createElement(
"div",
{
style: w,
className: "ReactCrop__crop-selection",
onPointerDown: this.onCropPointerDown,
"aria-label": t.cropArea,
tabIndex: 0,
onKeyDown: this.onComponentKeyDown,
role: "group"
},
!e && !o && /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-nw",
"data-ord": "nw",
tabIndex: 0,
"aria-label": t.nwDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "nw"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-n",
"data-ord": "n",
tabIndex: 0,
"aria-label": t.nDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "n"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-ne",
"data-ord": "ne",
tabIndex: 0,
"aria-label": t.neDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "ne"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-e",
"data-ord": "e",
tabIndex: 0,
"aria-label": t.eDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "e"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-se",
"data-ord": "se",
tabIndex: 0,
"aria-label": t.seDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "se"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-s",
"data-ord": "s",
tabIndex: 0,
"aria-label": t.sDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "s"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-sw",
"data-ord": "sw",
tabIndex: 0,
"aria-label": t.swDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "sw"),
role: "button"
}
), /* @__PURE__ */ g.createElement(
"div",
{
className: "ReactCrop__drag-handle ord-w",
"data-ord": "w",
tabIndex: 0,
"aria-label": t.wDragHandle,
onKeyDown: (h) => this.onHandlerKeyDown(h, "w"),
role: "button"
}
)),
i && /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__selection-addon", onMouseDown: (h) => h.stopPropagation() }, i(this.state)),
n && /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
);
}
makePixelCrop(t) {
const e = { ...M, ...this.props.crop || {} };
return y(e, t.width, t.height);
}
render() {
const { aspect: t, children: e, circularCrop: o, className: i, crop: n, disabled: a, locked: w, style: h, ruleOfThirds: r } = this.props, { cropIsActive: c, newCropIsBeingDrawn: d } = this.state, p = n ? this.createCropSelection() : null, l = S(
"ReactCrop",
i,
c && "ReactCrop--active",
a && "ReactCrop--disabled",
w && "ReactCrop--locked",
d && "ReactCrop--new-crop",
n && t && "ReactCrop--fixed-aspect",
n && o && "ReactCrop--circular-crop",
n && r && "ReactCrop--rule-of-thirds",
!this.dragStarted && n && !n.width && !n.height && "ReactCrop--invisible-crop",
o && "ReactCrop--no-animate"
);
return /* @__PURE__ */ g.createElement("div", { ref: this.componentRef, className: l, style: h }, /* @__PURE__ */ g.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), p);
}
};
v.xOrds = ["e", "w"];
v.yOrds = ["n", "s"];
v.xyOrds = ["nw", "ne", "se", "sw"];
v.nudgeStep = 1;
v.nudgeStepMedium = 10;
v.nudgeStepLarge = 100;
v.defaultProps = {
ariaLabels: {
cropArea: "Use the arrow keys to move the crop selection area",
nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
}
};
let I = v;
export {
I as Component,
I as ReactCrop,
P as areCropsEqual,
N as centerCrop,
f as clamp,
S as cls,
X as containCrop,
D as convertToPercentCrop,
y as convertToPixelCrop,
I as default,
M as defaultCrop,
H as makeAspectCrop,
K as nudgeCrop
};