@orangelogic/design-system 3.6.0 → 3.7.0
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.
- package/library/chunks/{asset-link-format.Bj6HJXSZ.js → asset-link-format.a59f8lRl.js} +854 -850
- package/library/chunks/{color-swatch-group.Bz2acokX.js → color-swatch-group.DJqdDogB.js} +1 -1
- package/library/chunks/{document-viewer.BZw451dy.js → document-viewer.CXynVA4R.js} +1 -1
- package/library/chunks/{index.Bf5ia_yC.js → index.Cszcira8.js} +3 -3
- package/library/chunks/{transformation.CkwgrwKQ.js → transformation.JkkMVin_.js} +130 -108
- package/library/chunks/{types.BjHMUzQj.js → types.D9i8EgKJ.js} +11250 -11232
- package/library/components/asset-link-format.js +2 -2
- package/library/components/atoms.js +1 -1
- package/library/components/color-swatch-group.js +1 -1
- package/library/components/document-viewer.js +1 -1
- package/library/components/masonry.js +97 -91
- package/library/components/organisms.js +2 -2
- package/library/components/types.js +95 -93
- package/library/package.json +1 -1
- package/library/packages/molecules/src/icon-picker/icon-picker.d.ts +2 -0
- package/library/packages/molecules/src/masonry/masonry.d.ts +1 -1
- package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts +6 -0
- package/library/packages/organisms/src/content-builder-viewer/content-builder-viewer.d.ts +5 -5
- package/library/packages/services/src/api/asset/asset.d.ts +1 -2
- package/library/packages/types/src/masonry.d.ts +1 -0
- package/library/packages/utils/src/transformation/transformation.d.ts +42 -7
- package/library/react-web-component.d.ts +2 -2
- package/library/utils.js +83 -81
- package/package.json +1 -1
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
import "../components/cropper.js";
|
|
2
|
-
import { C as
|
|
3
|
-
import
|
|
4
|
-
import { C as
|
|
5
|
-
import { n as h, C as
|
|
6
|
-
import { h as
|
|
2
|
+
import { C as J } from "./button.w0zH5Ivx.js";
|
|
3
|
+
import B from "../components/space.js";
|
|
4
|
+
import { C as q } from "./typography.IqHbnd3C.js";
|
|
5
|
+
import { n as h, C as j } from "./lib-cortex-element.CVMmyPMC.js";
|
|
6
|
+
import { h as T, a as Ot, C as Lt, S as Yt, b as Jt, c as te, d as ee } from "./endpoints.mJ5S-tIs.js";
|
|
7
7
|
import "./browser.BHOCIF_A.js";
|
|
8
|
-
import { i as
|
|
8
|
+
import { i as V, x as C, E as Ut } from "./lit-element.jLBm65_O.js";
|
|
9
9
|
import "./form.C8LMdQB4.js";
|
|
10
|
-
import { L as
|
|
10
|
+
import { L as G } from "./i18n.BA19xtyU.js";
|
|
11
11
|
import { a as ie } from "./string.Demn8Xmk.js";
|
|
12
12
|
import "./date-picker.BGHn6qg8.js";
|
|
13
13
|
import "./content-builder.BX4pHujE.js";
|
|
14
14
|
import "./unsafe-html.Dff7-rCx.js";
|
|
15
|
-
import {
|
|
15
|
+
import { d as It, r as Bt, e as lt } from "./transformation.JkkMVin_.js";
|
|
16
16
|
import { b as se } from "./_baseUniq.lwMgmtt2.js";
|
|
17
|
-
import { c as
|
|
17
|
+
import { c as Q } from "./component.styles.CRO4Odto.js";
|
|
18
|
+
import { M as zt, U as o, T as m } from "./asset-link-format.ClaYu_v8.js";
|
|
18
19
|
import { v as ae } from "./v4.CKZ6klMF.js";
|
|
19
|
-
import { U as r, T as f } from "./asset-link-format.ClaYu_v8.js";
|
|
20
20
|
import { P as N } from "./position-picker.DjnhxIKF.js";
|
|
21
|
-
import { c as
|
|
21
|
+
import { c as X } from "./custom-element.L4WJXn1j.js";
|
|
22
22
|
import { w as P } from "./watch.DJF5K-8U.js";
|
|
23
|
-
import { s as
|
|
24
|
-
import { r as
|
|
25
|
-
import { n as
|
|
23
|
+
import { s as Et, a as ct } from "./number.Cx2ncfJJ.js";
|
|
24
|
+
import { r as k } from "./state.CSDxrqLd.js";
|
|
25
|
+
import { n as I } from "./when.Dr1es41R.js";
|
|
26
26
|
import it from "../components/details.js";
|
|
27
27
|
import qt from "../components/divider.js";
|
|
28
28
|
import { C as st } from "./icon.CpHbi8tH.js";
|
|
29
|
-
import { C as
|
|
30
|
-
import { C as
|
|
31
|
-
import { C as
|
|
32
|
-
import
|
|
29
|
+
import { C as Pt } from "./icon-button.BWJ1Vqn5.js";
|
|
30
|
+
import { C as Ft } from "./input.D1TGTsxj.js";
|
|
31
|
+
import { C as St } from "./option.jeaj7_Lr.js";
|
|
32
|
+
import At from "../components/select.js";
|
|
33
33
|
import oe from "../components/position-picker.js";
|
|
34
34
|
import { c as re } from "./image.Y5c_hFx8.js";
|
|
35
|
-
import { e as
|
|
36
|
-
import { c as
|
|
35
|
+
import { e as tt } from "./query.BBf1UFkC.js";
|
|
36
|
+
import { c as rt } from "./repeat.CFjcER6_.js";
|
|
37
37
|
import { o as O } from "./style-map.llVFPd__.js";
|
|
38
38
|
import jt from "../components/tooltip.js";
|
|
39
39
|
import ne from "../components/button-group.js";
|
|
@@ -67,11 +67,11 @@ const ce = {
|
|
|
67
67
|
text: "Text",
|
|
68
68
|
title: "Title"
|
|
69
69
|
}, pe = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
|
|
70
|
-
function
|
|
70
|
+
function kt(t) {
|
|
71
71
|
return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(t) && !/^(?:OR|AND|NOT)$/.test(t) ? t : `"${t.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
|
|
72
72
|
}
|
|
73
|
-
function
|
|
74
|
-
const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${
|
|
73
|
+
function Tt(t, e) {
|
|
74
|
+
const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${kt(a)}`);
|
|
75
75
|
return s.length > 1 ? `(${s.join(" OR ")})` : s[0] ?? "";
|
|
76
76
|
}
|
|
77
77
|
function de(t, e) {
|
|
@@ -87,19 +87,19 @@ function ue(t) {
|
|
|
87
87
|
for (const [n, l] of Object.entries(
|
|
88
88
|
a
|
|
89
89
|
))
|
|
90
|
-
e.push(
|
|
90
|
+
e.push(Tt(n, l));
|
|
91
91
|
continue;
|
|
92
92
|
}
|
|
93
|
-
const
|
|
94
|
-
if (
|
|
93
|
+
const r = ce[s];
|
|
94
|
+
if (r) {
|
|
95
95
|
if (pe.has(s)) {
|
|
96
96
|
e.push(
|
|
97
|
-
de(
|
|
97
|
+
de(r, a)
|
|
98
98
|
);
|
|
99
99
|
continue;
|
|
100
100
|
}
|
|
101
101
|
if (s === "color") {
|
|
102
|
-
e.push(`${
|
|
102
|
+
e.push(`${r}:${a}`);
|
|
103
103
|
continue;
|
|
104
104
|
}
|
|
105
105
|
if (s === "parentFolderIdentifier") {
|
|
@@ -107,38 +107,38 @@ function ue(t) {
|
|
|
107
107
|
if (n.length === 0)
|
|
108
108
|
continue;
|
|
109
109
|
const l = [
|
|
110
|
-
...n.map((p) => `ParentFolderIdentifier:${
|
|
111
|
-
...n.map((p) => `ParentAlbumIdentifier:${
|
|
110
|
+
...n.map((p) => `ParentFolderIdentifier:${kt(String(p))}`),
|
|
111
|
+
...n.map((p) => `ParentAlbumIdentifier:${kt(String(p))}`)
|
|
112
112
|
];
|
|
113
113
|
e.push(`(${l.join(" OR ")})`);
|
|
114
114
|
continue;
|
|
115
115
|
}
|
|
116
|
-
e.push(
|
|
116
|
+
e.push(Tt(r, a));
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
return e.join(" AND ");
|
|
120
120
|
}
|
|
121
|
-
function
|
|
121
|
+
function pt(t) {
|
|
122
122
|
if ("and" in t)
|
|
123
|
-
return t.and.map(
|
|
123
|
+
return t.and.map(pt).filter(Boolean).join(" AND ");
|
|
124
124
|
if ("or" in t) {
|
|
125
|
-
const e = t.or.map(
|
|
125
|
+
const e = t.or.map(pt).filter(Boolean);
|
|
126
126
|
return e.length > 1 ? `(${e.join(" OR ")})` : e[0] ?? "";
|
|
127
127
|
}
|
|
128
128
|
if ("not" in t) {
|
|
129
|
-
const e =
|
|
129
|
+
const e = pt(t.not);
|
|
130
130
|
return e ? `NOT (${e})` : "";
|
|
131
131
|
}
|
|
132
132
|
return ue(t);
|
|
133
133
|
}
|
|
134
|
-
const me = "CoreField.LargeSizePreview",
|
|
134
|
+
const me = "CoreField.LargeSizePreview", dt = "CoreField.DocType", fe = "Document.Title", ge = "Document.CaptionLong", nt = "Document.FileExtension", ut = "CoreField.FileSize", Ht = "CoreField.Identifier", mt = "CoreField.MaxHeight", ft = "CoreField.MaxWidth", gt = "Document.RecordID", Wt = "CoreField.DocSubType", Gt = "CoreField.TitleWithFallback", xt = "CoreField.OriginalFileName", yt = "CoreField.UpdatedFileName", _t = "__width", xe = "CoreField.OriginalPreview", Oi = "Document.DocSubType", Li = "Document.InPoint", Ui = "Document.OutPoint", Ct = {
|
|
135
135
|
DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
|
|
136
136
|
FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
|
|
137
137
|
ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
|
|
138
138
|
}, Qt = {
|
|
139
|
-
[me]:
|
|
140
|
-
[Gt]:
|
|
141
|
-
[xe]:
|
|
139
|
+
[me]: Ct.DEFAULT_VIEW_SIZE,
|
|
140
|
+
[Gt]: Ct.FIELD_TITLE_WITH_FALLBACK,
|
|
141
|
+
[xe]: Ct.ORIGINAL_VIEW_SIZE
|
|
142
142
|
}, ye = Object.fromEntries(
|
|
143
143
|
Object.entries(Qt).map(([t, e]) => [
|
|
144
144
|
e,
|
|
@@ -168,44 +168,44 @@ async function Xt({
|
|
|
168
168
|
getPermanentAssetsPaths: i,
|
|
169
169
|
httpMethod: s = "GET",
|
|
170
170
|
isSiteBuilder: a,
|
|
171
|
-
pageNumber:
|
|
171
|
+
pageNumber: r,
|
|
172
172
|
query: n,
|
|
173
173
|
securityByPassToken: l,
|
|
174
174
|
siteUrl: p,
|
|
175
|
-
sort:
|
|
175
|
+
sort: x,
|
|
176
176
|
token: c,
|
|
177
|
-
useSession:
|
|
177
|
+
useSession: f
|
|
178
178
|
}) {
|
|
179
|
-
const
|
|
179
|
+
const y = e?.map(Se), d = {
|
|
180
180
|
CountPerPage: t,
|
|
181
|
-
Fields: le(
|
|
181
|
+
Fields: le(y),
|
|
182
182
|
Format: "json",
|
|
183
183
|
GetPermanentAssetsPaths: i || void 0,
|
|
184
|
-
PageNumber:
|
|
185
|
-
Query:
|
|
184
|
+
PageNumber: r,
|
|
185
|
+
Query: pt(n),
|
|
186
186
|
SecurityByPassToken: l || void 0,
|
|
187
|
-
Sort:
|
|
188
|
-
UseSession:
|
|
189
|
-
},
|
|
187
|
+
Sort: x || void 0,
|
|
188
|
+
UseSession: f || void 0
|
|
189
|
+
}, S = s === "POST";
|
|
190
190
|
try {
|
|
191
|
-
return (await
|
|
191
|
+
return (await T.request({
|
|
192
192
|
baseURL: p,
|
|
193
193
|
headers: c ? { Authorization: `Bearer ${c}` } : void 0,
|
|
194
194
|
method: s,
|
|
195
195
|
// POST large RecordID queries as a urlencoded body to dodge the ~2KB URL cap;
|
|
196
196
|
// GET keeps the same fields on the query string.
|
|
197
|
-
...
|
|
197
|
+
...S ? { data: Ae(d) } : { params: d, paramsSerializer: { indexes: null } },
|
|
198
198
|
responseType: "json",
|
|
199
199
|
transformResponse: [
|
|
200
|
-
...Array.isArray(
|
|
201
|
-
a ? (
|
|
202
|
-
items: (
|
|
203
|
-
sort:
|
|
204
|
-
totalCount:
|
|
205
|
-
}) : (
|
|
206
|
-
items: (
|
|
207
|
-
sort:
|
|
208
|
-
totalCount:
|
|
200
|
+
...Array.isArray(T.defaults.transformResponse) ? T.defaults.transformResponse : [],
|
|
201
|
+
a ? (A) => ({
|
|
202
|
+
items: (A.results?.Items ?? []).map(Dt),
|
|
203
|
+
sort: A.results?.GlobalInfo?.Sort ?? "",
|
|
204
|
+
totalCount: A.results?.GlobalInfo?.TotalCount ?? 0
|
|
205
|
+
}) : (A) => ({
|
|
206
|
+
items: (A.APIResponse?.Items ?? []).map(Dt),
|
|
207
|
+
sort: A.APIResponse?.GlobalInfo?.Sort ?? "",
|
|
208
|
+
totalCount: A.APIResponse?.GlobalInfo?.TotalCount ?? 0
|
|
209
209
|
})
|
|
210
210
|
],
|
|
211
211
|
url: a ? Lt.SEARCH_ASSETS : Yt["4.0"]
|
|
@@ -220,11 +220,11 @@ async function ve({
|
|
|
220
220
|
format: i,
|
|
221
221
|
siteUrl: s,
|
|
222
222
|
token: a,
|
|
223
|
-
transformations:
|
|
223
|
+
transformations: r,
|
|
224
224
|
useSession: n
|
|
225
225
|
}) {
|
|
226
226
|
try {
|
|
227
|
-
return (await
|
|
227
|
+
return (await T.request({
|
|
228
228
|
baseURL: s,
|
|
229
229
|
method: "GET",
|
|
230
230
|
params: {
|
|
@@ -232,7 +232,7 @@ async function ve({
|
|
|
232
232
|
SourceAssetRecordID: t,
|
|
233
233
|
TargetExtension: ie(e),
|
|
234
234
|
Token: a || void 0,
|
|
235
|
-
Transformations:
|
|
235
|
+
Transformations: r,
|
|
236
236
|
UseSession: n || void 0
|
|
237
237
|
},
|
|
238
238
|
/**
|
|
@@ -259,18 +259,18 @@ async function we({
|
|
|
259
259
|
isSiteBuilder: i,
|
|
260
260
|
recordIds: s,
|
|
261
261
|
securityByPassToken: a,
|
|
262
|
-
token:
|
|
262
|
+
token: r
|
|
263
263
|
}) {
|
|
264
264
|
if (!Array.isArray(s) || s.length === 0)
|
|
265
265
|
return { facets: [], items: [], totalCount: 0 };
|
|
266
266
|
const n = t?.filter((d) => d && typeof d == "string") ?? [], l = [
|
|
267
267
|
...n,
|
|
268
|
-
|
|
269
|
-
|
|
268
|
+
yt,
|
|
269
|
+
xt,
|
|
270
270
|
fe,
|
|
271
271
|
ge,
|
|
272
|
-
|
|
273
|
-
], p = Ce(s, ze),
|
|
272
|
+
gt
|
|
273
|
+
], p = Ce(s, ze), x = await Promise.all(
|
|
274
274
|
p.map(
|
|
275
275
|
(d) => Xt({
|
|
276
276
|
countPerPage: d.length,
|
|
@@ -281,32 +281,32 @@ async function we({
|
|
|
281
281
|
pageNumber: 1,
|
|
282
282
|
query: { recordId: d },
|
|
283
283
|
securityByPassToken: a,
|
|
284
|
-
token:
|
|
284
|
+
token: r
|
|
285
285
|
})
|
|
286
286
|
)
|
|
287
|
-
), c = new Map(s.map((d,
|
|
288
|
-
let
|
|
289
|
-
return
|
|
290
|
-
name:
|
|
291
|
-
recordId:
|
|
287
|
+
), c = new Map(s.map((d, S) => [d, S])), f = x.flatMap((d) => d.items).map((d) => {
|
|
288
|
+
let S = M(d, yt);
|
|
289
|
+
return S === "" && (S = M(d, xt)), {
|
|
290
|
+
name: S,
|
|
291
|
+
recordId: M(d, gt),
|
|
292
292
|
...n.reduce(
|
|
293
|
-
(
|
|
294
|
-
|
|
295
|
-
const
|
|
296
|
-
return
|
|
293
|
+
(R, A) => {
|
|
294
|
+
R[A] = M(d, A);
|
|
295
|
+
const F = Kt(d, A);
|
|
296
|
+
return F !== void 0 && (R[`${A}${_t}`] = String(F)), R;
|
|
297
297
|
},
|
|
298
298
|
{}
|
|
299
299
|
)
|
|
300
300
|
};
|
|
301
301
|
}).sort(
|
|
302
|
-
(d,
|
|
303
|
-
),
|
|
304
|
-
(d,
|
|
302
|
+
(d, S) => (c.get(d.recordId) ?? 1 / 0) - (c.get(S.recordId) ?? 1 / 0)
|
|
303
|
+
), y = x.reduce(
|
|
304
|
+
(d, S) => d + S.totalCount,
|
|
305
305
|
0
|
|
306
306
|
);
|
|
307
|
-
return { facets: [], items:
|
|
307
|
+
return { facets: [], items: f, totalCount: y };
|
|
308
308
|
}
|
|
309
|
-
function
|
|
309
|
+
function M(t, e) {
|
|
310
310
|
const i = t[e];
|
|
311
311
|
return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : Vt(i) ? i.URI : "";
|
|
312
312
|
}
|
|
@@ -318,68 +318,67 @@ function Kt(t, e) {
|
|
|
318
318
|
async function be({
|
|
319
319
|
countPerPage: t,
|
|
320
320
|
directParentFolderIdentifier: e,
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
321
|
+
excludedDocTypes: i,
|
|
322
|
+
extraFields: s,
|
|
323
|
+
getPermanentAssetsPaths: a,
|
|
324
|
+
isSiteBuilder: r,
|
|
325
|
+
limitedDocTypes: n,
|
|
326
|
+
pageNumber: l,
|
|
327
|
+
parentFolderIdentifier: p,
|
|
328
|
+
searchTerm: x,
|
|
329
|
+
securityByPassToken: c,
|
|
330
|
+
sortOrder: f,
|
|
331
|
+
token: y
|
|
331
332
|
}) {
|
|
332
|
-
if (!e && !
|
|
333
|
+
if (!e && !p)
|
|
333
334
|
return { facets: [], items: [], totalCount: 0 };
|
|
334
|
-
const
|
|
335
|
+
const d = (s?.filter((w) => w && typeof w == "string") ?? []).map((w) => w.replace("%20", " ")), S = {
|
|
335
336
|
directParentFolderIdentifier: e,
|
|
336
|
-
parentFolderIdentifier:
|
|
337
|
-
...
|
|
338
|
-
}, A = await Xt({
|
|
337
|
+
parentFolderIdentifier: p,
|
|
338
|
+
...n && n.length > 0 ? { docType: n } : {}
|
|
339
|
+
}, R = i && i.length > 0 ? { and: [S, { not: { docType: i } }] } : S, A = await Xt({
|
|
339
340
|
countPerPage: t,
|
|
340
341
|
fields: [
|
|
341
|
-
...
|
|
342
|
+
...d,
|
|
342
343
|
Gt,
|
|
343
|
-
|
|
344
|
+
ft,
|
|
345
|
+
mt,
|
|
344
346
|
ut,
|
|
345
347
|
dt,
|
|
346
|
-
pt,
|
|
347
|
-
ct,
|
|
348
348
|
Wt,
|
|
349
349
|
Ht,
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
350
|
+
nt,
|
|
351
|
+
gt,
|
|
352
|
+
xt,
|
|
353
|
+
yt
|
|
354
354
|
],
|
|
355
|
-
getPermanentAssetsPaths:
|
|
356
|
-
isSiteBuilder:
|
|
357
|
-
pageNumber:
|
|
358
|
-
query:
|
|
359
|
-
securityByPassToken:
|
|
355
|
+
getPermanentAssetsPaths: a,
|
|
356
|
+
isSiteBuilder: r,
|
|
357
|
+
pageNumber: l,
|
|
358
|
+
query: R,
|
|
359
|
+
securityByPassToken: c,
|
|
360
360
|
sort: void 0,
|
|
361
|
-
token:
|
|
362
|
-
}),
|
|
363
|
-
let
|
|
364
|
-
|
|
365
|
-
const
|
|
361
|
+
token: y
|
|
362
|
+
}), F = A.items.map((w) => {
|
|
363
|
+
let _ = M(w, nt), at = M(w, yt);
|
|
364
|
+
_ && !_.startsWith(".") && (_ = "." + _), at === "" && (at = M(w, xt));
|
|
365
|
+
const ht = M(w, gt);
|
|
366
366
|
return {
|
|
367
|
-
docSubType:
|
|
368
|
-
docType:
|
|
369
|
-
extension:
|
|
370
|
-
height:
|
|
371
|
-
id:
|
|
372
|
-
identifier:
|
|
373
|
-
name:
|
|
374
|
-
recordId:
|
|
375
|
-
size:
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
return K !== void 0 && (at[`${et}${$t}`] = String(K)), at;
|
|
367
|
+
docSubType: M(w, Wt),
|
|
368
|
+
docType: M(w, dt) || "",
|
|
369
|
+
extension: _,
|
|
370
|
+
height: M(w, mt) || "0",
|
|
371
|
+
id: ht,
|
|
372
|
+
identifier: M(w, Ht),
|
|
373
|
+
name: at,
|
|
374
|
+
recordId: ht,
|
|
375
|
+
size: M(w, ut) || "0 MB",
|
|
376
|
+
width: M(w, ft) || "0",
|
|
377
|
+
...d.reduce(
|
|
378
|
+
(L, Z) => {
|
|
379
|
+
L[Z] = M(w, Z);
|
|
380
|
+
const ot = Kt(w, Z);
|
|
381
|
+
return ot !== void 0 && (L[`${Z}${_t}`] = String(ot)), L;
|
|
383
382
|
},
|
|
384
383
|
{}
|
|
385
384
|
)
|
|
@@ -387,7 +386,7 @@ async function be({
|
|
|
387
386
|
});
|
|
388
387
|
return {
|
|
389
388
|
facets: [],
|
|
390
|
-
items:
|
|
389
|
+
items: F,
|
|
391
390
|
totalCount: A.totalCount
|
|
392
391
|
};
|
|
393
392
|
}
|
|
@@ -399,7 +398,7 @@ async function ke({
|
|
|
399
398
|
useSession: a
|
|
400
399
|
}) {
|
|
401
400
|
try {
|
|
402
|
-
return (await
|
|
401
|
+
return (await T.request({
|
|
403
402
|
method: "GET",
|
|
404
403
|
params: {
|
|
405
404
|
AutoCropMode: t,
|
|
@@ -412,7 +411,7 @@ async function ke({
|
|
|
412
411
|
timeout: 3e5,
|
|
413
412
|
// 5 minutes
|
|
414
413
|
transformResponse: [
|
|
415
|
-
...Array.isArray(
|
|
414
|
+
...Array.isArray(T.defaults.transformResponse) ? T.defaults.transformResponse : [],
|
|
416
415
|
(n) => ({
|
|
417
416
|
height: n.cropHeight,
|
|
418
417
|
width: n.cropWidth,
|
|
@@ -426,7 +425,7 @@ async function ke({
|
|
|
426
425
|
return null;
|
|
427
426
|
}
|
|
428
427
|
}
|
|
429
|
-
async function
|
|
428
|
+
async function Bi({
|
|
430
429
|
assetRecordId: t,
|
|
431
430
|
isSiteBuilder: e,
|
|
432
431
|
siteUrl: i,
|
|
@@ -434,7 +433,7 @@ async function Ui({
|
|
|
434
433
|
useSession: a
|
|
435
434
|
}) {
|
|
436
435
|
try {
|
|
437
|
-
return (await
|
|
436
|
+
return (await T.request({
|
|
438
437
|
baseURL: i,
|
|
439
438
|
method: "GET",
|
|
440
439
|
params: {
|
|
@@ -444,7 +443,7 @@ async function Ui({
|
|
|
444
443
|
},
|
|
445
444
|
responseType: "json",
|
|
446
445
|
transformResponse: [
|
|
447
|
-
...Array.isArray(
|
|
446
|
+
...Array.isArray(T.defaults.transformResponse) ? T.defaults.transformResponse : [],
|
|
448
447
|
(n) => !n || typeof n != "object" ? [] : n.proxies?.map((l) => ({
|
|
449
448
|
cdnName: l.cdnName,
|
|
450
449
|
extension: l.extension,
|
|
@@ -463,16 +462,16 @@ async function Ui({
|
|
|
463
462
|
return [];
|
|
464
463
|
}
|
|
465
464
|
}
|
|
466
|
-
async function
|
|
465
|
+
async function qi({
|
|
467
466
|
siteUrl: t
|
|
468
467
|
} = {}) {
|
|
469
468
|
try {
|
|
470
|
-
return (await
|
|
469
|
+
return (await T.request({
|
|
471
470
|
baseURL: t,
|
|
472
471
|
method: "GET",
|
|
473
472
|
responseType: "json",
|
|
474
473
|
transformResponse: [
|
|
475
|
-
...Array.isArray(
|
|
474
|
+
...Array.isArray(T.defaults.transformResponse) ? T.defaults.transformResponse : [],
|
|
476
475
|
(i) => !i || typeof i != "object" ? {
|
|
477
476
|
formatsByDocType: {
|
|
478
477
|
Audio: {},
|
|
@@ -490,7 +489,7 @@ async function Bi({
|
|
|
490
489
|
return { formatsByDocType: {} };
|
|
491
490
|
}
|
|
492
491
|
}
|
|
493
|
-
async function
|
|
492
|
+
async function ji({
|
|
494
493
|
recordIds: t,
|
|
495
494
|
rightsToCheck: e
|
|
496
495
|
}) {
|
|
@@ -501,7 +500,7 @@ async function qi({
|
|
|
501
500
|
invalidObjects: []
|
|
502
501
|
};
|
|
503
502
|
try {
|
|
504
|
-
const { data: s } = await
|
|
503
|
+
const { data: s } = await T.request({
|
|
505
504
|
method: "GET",
|
|
506
505
|
params: { RecordIDs: t, RightsToCheck: e },
|
|
507
506
|
paramsSerializer: { indexes: null },
|
|
@@ -513,7 +512,11 @@ async function qi({
|
|
|
513
512
|
return i;
|
|
514
513
|
}
|
|
515
514
|
}
|
|
516
|
-
const
|
|
515
|
+
const wt = 20, Re = [
|
|
516
|
+
zt.Album,
|
|
517
|
+
zt.ProjectDocument,
|
|
518
|
+
zt.Story
|
|
519
|
+
], Rt = "TR1", $t = "TRX", $e = /* @__PURE__ */ new Set([".gif"]), Pe = /* @__PURE__ */ new Set([
|
|
517
520
|
".avif",
|
|
518
521
|
".bmp",
|
|
519
522
|
".gif",
|
|
@@ -526,7 +529,7 @@ const vt = 20, wt = "TR1", bt = "TRX", Re = /* @__PURE__ */ new Set([".gif"]), $
|
|
|
526
529
|
]);
|
|
527
530
|
function Zt(t) {
|
|
528
531
|
const e = t.toLowerCase(), i = e.startsWith(".") ? e : `.${e}`;
|
|
529
|
-
return
|
|
532
|
+
return Pe.has(i);
|
|
530
533
|
}
|
|
531
534
|
function Nt({
|
|
532
535
|
extension: t,
|
|
@@ -535,21 +538,21 @@ function Nt({
|
|
|
535
538
|
manualFormat: s,
|
|
536
539
|
size: a
|
|
537
540
|
}) {
|
|
538
|
-
const
|
|
541
|
+
const r = t?.toLowerCase() ?? "", n = r.startsWith(".") ? r : `.${r}`, l = `path_${Rt}`, p = (y) => i[y] ? { maxWidth: i[`${y}${_t}`], src: i[y] } : void 0;
|
|
539
542
|
if (!s)
|
|
540
|
-
return p(`path_${Bt(
|
|
541
|
-
if (!!
|
|
542
|
-
return p(`path_${
|
|
543
|
-
const c = !
|
|
544
|
-
return
|
|
543
|
+
return p(`path_${Bt(r, a)}`) ?? p(l) ?? {};
|
|
544
|
+
if (!!r && $e.has(n))
|
|
545
|
+
return p(`path_${$t}`) ?? p(l) ?? {};
|
|
546
|
+
const c = !r || Zt(r), f = e ? `path_${e}` : void 0;
|
|
547
|
+
return f && c && i[f] ? p(f) ?? {} : p(l) ?? {};
|
|
545
548
|
}
|
|
546
|
-
class
|
|
549
|
+
class Vi {
|
|
547
550
|
constructor(e, i) {
|
|
548
|
-
this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = 1 / 0, this.pageSize =
|
|
551
|
+
this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = 1 / 0, this.pageSize = wt, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
|
|
549
552
|
const s = i?.maxEnd;
|
|
550
553
|
this.maxEnd = typeof s == "number" && Number.isFinite(s) && s >= 0 ? Math.floor(s) : 1 / 0;
|
|
551
554
|
const a = i?.pageSize;
|
|
552
|
-
this.pageSize = typeof a == "number" && Number.isFinite(a) && a >= 1 ? Math.floor(a) :
|
|
555
|
+
this.pageSize = typeof a == "number" && Number.isFinite(a) && a >= 1 ? Math.floor(a) : wt, this.authToken = i?.token, this.securityByPassToken = i?.securityByPassToken, this.isSiteBuilder = i?.isSiteBuilder ?? !1;
|
|
553
556
|
}
|
|
554
557
|
get totalDataCount() {
|
|
555
558
|
return this.totalCount;
|
|
@@ -567,7 +570,7 @@ class ji {
|
|
|
567
570
|
* Shrinking is ignored once pages are cached: collapsing already has what it needs.
|
|
568
571
|
*/
|
|
569
572
|
setPageSize(e) {
|
|
570
|
-
const i = Number.isFinite(e) && e >= 1 ? Math.floor(e) :
|
|
573
|
+
const i = Number.isFinite(e) && e >= 1 ? Math.floor(e) : wt;
|
|
571
574
|
if (this.pageSize === i)
|
|
572
575
|
return;
|
|
573
576
|
const s = this.fetchedPages.size > 0;
|
|
@@ -578,33 +581,34 @@ class ji {
|
|
|
578
581
|
extraFields: i = [],
|
|
579
582
|
format: s,
|
|
580
583
|
manualFormat: a = !0,
|
|
581
|
-
start:
|
|
584
|
+
start: r,
|
|
582
585
|
transformations: n
|
|
583
586
|
}) {
|
|
584
|
-
if (e <
|
|
587
|
+
if (e < r)
|
|
585
588
|
return this.data;
|
|
586
|
-
if (this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e <
|
|
589
|
+
if (this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < r))
|
|
587
590
|
return this.data;
|
|
588
591
|
const l = this.requestEpoch;
|
|
589
592
|
if (!this.folderId || l !== this.requestEpoch)
|
|
590
593
|
return this.data;
|
|
591
|
-
const p = s ? `path_${s}` : void 0,
|
|
594
|
+
const p = s ? `path_${s}` : void 0, x = `path_${Rt}`, c = `path_${$t}`, f = [
|
|
592
595
|
...new Set(
|
|
593
|
-
[p,
|
|
594
|
-
(
|
|
596
|
+
[p, x, c].filter(
|
|
597
|
+
(S) => !!S
|
|
595
598
|
)
|
|
596
599
|
)
|
|
597
|
-
],
|
|
598
|
-
for (let
|
|
599
|
-
if (this.fetchedPages.has(
|
|
600
|
+
], y = Math.floor(r / this.pageSize) + 1, d = Math.floor(e / this.pageSize) + 1;
|
|
601
|
+
for (let S = y; S <= d; S++) {
|
|
602
|
+
if (this.fetchedPages.has(S))
|
|
600
603
|
continue;
|
|
601
|
-
const
|
|
604
|
+
const R = await be({
|
|
602
605
|
countPerPage: this.pageSize,
|
|
603
606
|
directParentFolderIdentifier: this.folderId,
|
|
604
|
-
|
|
607
|
+
excludedDocTypes: Re,
|
|
608
|
+
extraFields: [...i, ...f],
|
|
605
609
|
getPermanentAssetsPaths: !0,
|
|
606
610
|
isSiteBuilder: this.isSiteBuilder,
|
|
607
|
-
pageNumber:
|
|
611
|
+
pageNumber: S,
|
|
608
612
|
searchTerm: "",
|
|
609
613
|
securityByPassToken: this.securityByPassToken,
|
|
610
614
|
sortOrder: "",
|
|
@@ -612,37 +616,37 @@ class ji {
|
|
|
612
616
|
});
|
|
613
617
|
if (l !== this.requestEpoch)
|
|
614
618
|
return this.data;
|
|
615
|
-
if (this.fetchedPages.add(
|
|
616
|
-
const
|
|
617
|
-
this.totalCount =
|
|
619
|
+
if (this.fetchedPages.add(S), !this.totalCount && R.totalCount) {
|
|
620
|
+
const F = Math.min(this.maxEnd, R.totalCount);
|
|
621
|
+
this.totalCount = F, this.data = Array.from({ length: F }, () => ({
|
|
618
622
|
alt: "",
|
|
619
623
|
id: `temp-${ae()}`,
|
|
620
624
|
name: "",
|
|
621
625
|
src: ""
|
|
622
626
|
}));
|
|
623
627
|
}
|
|
624
|
-
const
|
|
625
|
-
for (let
|
|
626
|
-
const
|
|
627
|
-
if (
|
|
628
|
-
const
|
|
629
|
-
extension:
|
|
628
|
+
const A = (S - 1) * this.pageSize;
|
|
629
|
+
for (let F = 0; F < R.items.length; F++) {
|
|
630
|
+
const w = A + F;
|
|
631
|
+
if (w < this.data.length) {
|
|
632
|
+
const _ = R.items[F], { maxWidth: at, src: ht } = Nt({
|
|
633
|
+
extension: _.extension,
|
|
630
634
|
format: s,
|
|
631
|
-
item:
|
|
635
|
+
item: _,
|
|
632
636
|
manualFormat: a,
|
|
633
|
-
size:
|
|
637
|
+
size: _.size
|
|
634
638
|
});
|
|
635
|
-
let
|
|
636
|
-
|
|
637
|
-
alt:
|
|
638
|
-
docType:
|
|
639
|
-
extension:
|
|
640
|
-
id:
|
|
639
|
+
let L = ht;
|
|
640
|
+
L && n && n.length > 0 && (L = It(L, n)), this.data[w] = {
|
|
641
|
+
alt: _.name,
|
|
642
|
+
docType: _.docType,
|
|
643
|
+
extension: _.extension,
|
|
644
|
+
id: _.id,
|
|
641
645
|
maxWidth: at,
|
|
642
|
-
name:
|
|
643
|
-
src:
|
|
646
|
+
name: _.name,
|
|
647
|
+
src: L,
|
|
644
648
|
...i.reduce(
|
|
645
|
-
(
|
|
649
|
+
(Z, ot) => (Z[ot] = _[ot] ?? "", Z),
|
|
646
650
|
{}
|
|
647
651
|
)
|
|
648
652
|
};
|
|
@@ -655,85 +659,85 @@ class ji {
|
|
|
655
659
|
extraFields: i = [],
|
|
656
660
|
folderId: s,
|
|
657
661
|
forceRefetch: a = !1,
|
|
658
|
-
format:
|
|
662
|
+
format: r,
|
|
659
663
|
manualFormat: n = !0,
|
|
660
664
|
minLimit: l = 5,
|
|
661
665
|
noPlaceholders: p = !1,
|
|
662
|
-
transformations:
|
|
666
|
+
transformations: x
|
|
663
667
|
}) {
|
|
664
668
|
(!this.folderId || this.folderId !== s) && (this.folderId = s, this.resetFolderState()), a && this.resetPageCache();
|
|
665
|
-
const c = Math.max(5, l),
|
|
669
|
+
const c = Math.max(5, l), f = e, y = e + c, d = [
|
|
666
670
|
...i,
|
|
667
|
-
|
|
668
|
-
|
|
671
|
+
mt,
|
|
672
|
+
ft
|
|
669
673
|
];
|
|
670
674
|
await this.fetchImages({
|
|
671
|
-
end:
|
|
672
|
-
extraFields: d.filter((
|
|
673
|
-
format:
|
|
675
|
+
end: y,
|
|
676
|
+
extraFields: d.filter((A) => A !== ""),
|
|
677
|
+
format: r,
|
|
674
678
|
manualFormat: n,
|
|
675
|
-
start:
|
|
676
|
-
transformations:
|
|
679
|
+
start: f,
|
|
680
|
+
transformations: x
|
|
677
681
|
});
|
|
678
|
-
let
|
|
679
|
-
|
|
680
|
-
const
|
|
682
|
+
let S = e - c;
|
|
683
|
+
S < 0 && (this.totalCount === 0 ? S = 0 : S = Math.max(0, this.totalCount + S));
|
|
684
|
+
const R = S + c;
|
|
681
685
|
return await this.fetchImages({
|
|
682
|
-
end:
|
|
683
|
-
extraFields: d.filter((
|
|
684
|
-
format:
|
|
686
|
+
end: R,
|
|
687
|
+
extraFields: d.filter((A) => A !== ""),
|
|
688
|
+
format: r,
|
|
685
689
|
manualFormat: n,
|
|
686
|
-
start:
|
|
687
|
-
transformations:
|
|
688
|
-
}), p ? this.data.filter((
|
|
690
|
+
start: S,
|
|
691
|
+
transformations: x
|
|
692
|
+
}), p ? this.data.filter((A) => A.id && !A.id.startsWith("temp-")) : this.data;
|
|
689
693
|
}
|
|
690
694
|
async fetchImagesByIDs({
|
|
691
695
|
extraFields: e = [],
|
|
692
696
|
format: i,
|
|
693
697
|
manualFormat: s = !0,
|
|
694
698
|
recordIds: a,
|
|
695
|
-
transformations:
|
|
699
|
+
transformations: r
|
|
696
700
|
}) {
|
|
697
701
|
if (a.length === 0)
|
|
698
702
|
return [];
|
|
699
|
-
const n = i ? `path_${i}` : void 0, l = `path_${
|
|
703
|
+
const n = i ? `path_${i}` : void 0, l = `path_${Rt}`, p = `path_${$t}`, x = [
|
|
700
704
|
...new Set(
|
|
701
705
|
[n, l, p].filter(
|
|
702
706
|
(d) => !!d
|
|
703
707
|
)
|
|
704
708
|
)
|
|
705
|
-
], c = [
|
|
709
|
+
], c = [nt, ut], f = [
|
|
706
710
|
...e,
|
|
707
|
-
ct,
|
|
708
711
|
dt,
|
|
709
|
-
|
|
712
|
+
mt,
|
|
713
|
+
ft
|
|
710
714
|
];
|
|
711
715
|
return (await we({
|
|
712
|
-
extraFields: [...
|
|
716
|
+
extraFields: [...f, ...x, ...c].filter((d) => d !== ""),
|
|
713
717
|
getPermanentAssetsPaths: !0,
|
|
714
718
|
isSiteBuilder: this.isSiteBuilder,
|
|
715
719
|
recordIds: a,
|
|
716
720
|
securityByPassToken: this.securityByPassToken,
|
|
717
721
|
token: this.authToken
|
|
718
722
|
})).items.map((d) => {
|
|
719
|
-
const { maxWidth:
|
|
720
|
-
extension: d[
|
|
723
|
+
const { maxWidth: S, src: R } = Nt({
|
|
724
|
+
extension: d[nt],
|
|
721
725
|
format: i,
|
|
722
726
|
item: d,
|
|
723
727
|
manualFormat: s,
|
|
724
|
-
size: d[
|
|
728
|
+
size: d[ut]
|
|
725
729
|
});
|
|
726
|
-
let
|
|
727
|
-
return
|
|
730
|
+
let A = R;
|
|
731
|
+
return A && r && r.length > 0 && (A = It(A, r)), {
|
|
728
732
|
alt: d.name,
|
|
729
|
-
docType: d[
|
|
730
|
-
extension: d[
|
|
733
|
+
docType: d[dt],
|
|
734
|
+
extension: d[nt] || "",
|
|
731
735
|
id: d.recordId,
|
|
732
|
-
maxWidth:
|
|
736
|
+
maxWidth: S,
|
|
733
737
|
name: d.name,
|
|
734
|
-
src:
|
|
735
|
-
...
|
|
736
|
-
(
|
|
738
|
+
src: A,
|
|
739
|
+
...f.reduce(
|
|
740
|
+
(F, w) => (F[w] = d[w] ?? "", F),
|
|
737
741
|
{}
|
|
738
742
|
)
|
|
739
743
|
};
|
|
@@ -744,63 +748,63 @@ class ji {
|
|
|
744
748
|
folderId: i,
|
|
745
749
|
forceRefetch: s = !1,
|
|
746
750
|
format: a,
|
|
747
|
-
manualFormat:
|
|
751
|
+
manualFormat: r = !0,
|
|
748
752
|
noPlaceholders: n = !1,
|
|
749
753
|
page: l,
|
|
750
754
|
pageSize: p = 10,
|
|
751
|
-
transformations:
|
|
755
|
+
transformations: x
|
|
752
756
|
}) {
|
|
753
757
|
(!this.folderId || this.folderId !== i) && (this.folderId = i, this.resetFolderState()), s && this.resetPageCache();
|
|
754
|
-
const c = l * p,
|
|
758
|
+
const c = l * p, f = c + p - 1;
|
|
755
759
|
return await this.fetchImages({
|
|
756
|
-
end:
|
|
760
|
+
end: f,
|
|
757
761
|
extraFields: e,
|
|
758
762
|
format: a,
|
|
759
|
-
manualFormat:
|
|
763
|
+
manualFormat: r,
|
|
760
764
|
start: c,
|
|
761
|
-
transformations:
|
|
762
|
-
}), n ? this.data.filter((
|
|
765
|
+
transformations: x
|
|
766
|
+
}), n ? this.data.filter((y) => y.id && !y.id.startsWith("temp-")) : this.data;
|
|
763
767
|
}
|
|
764
768
|
async *fetchImagesInFolderByChunk({
|
|
765
769
|
chunkSize: e = 10,
|
|
766
770
|
end: i = 0,
|
|
767
771
|
extraFields: s = [],
|
|
768
772
|
folderId: a,
|
|
769
|
-
forceRefetch:
|
|
773
|
+
forceRefetch: r = !1,
|
|
770
774
|
format: n,
|
|
771
775
|
manualFormat: l = !0,
|
|
772
776
|
start: p = 0,
|
|
773
|
-
transformations:
|
|
777
|
+
transformations: x
|
|
774
778
|
}) {
|
|
775
779
|
const c = Math.max(1, e);
|
|
776
|
-
if ((!this.folderId || this.folderId !== a) && (this.folderId = a, this.resetFolderState()),
|
|
780
|
+
if ((!this.folderId || this.folderId !== a) && (this.folderId = a, this.resetFolderState()), r && this.resetPageCache(), i !== -1) {
|
|
777
781
|
await this.fetchImages({
|
|
778
782
|
end: i,
|
|
779
783
|
extraFields: s,
|
|
780
784
|
format: n,
|
|
781
785
|
manualFormat: l,
|
|
782
786
|
start: p,
|
|
783
|
-
transformations:
|
|
787
|
+
transformations: x
|
|
784
788
|
}), yield this.data;
|
|
785
789
|
return;
|
|
786
790
|
}
|
|
787
|
-
let
|
|
791
|
+
let f = p, y = p + c;
|
|
788
792
|
if (await this.fetchImages({
|
|
789
|
-
end:
|
|
793
|
+
end: y,
|
|
790
794
|
extraFields: s,
|
|
791
795
|
format: n,
|
|
792
796
|
manualFormat: l,
|
|
793
|
-
start:
|
|
794
|
-
transformations:
|
|
795
|
-
}), yield this.data, !(!this.totalCount || this.totalCount <=
|
|
796
|
-
for (;
|
|
797
|
-
|
|
798
|
-
end:
|
|
797
|
+
start: f,
|
|
798
|
+
transformations: x
|
|
799
|
+
}), yield this.data, !(!this.totalCount || this.totalCount <= y))
|
|
800
|
+
for (; y < this.totalCount; )
|
|
801
|
+
f = y, y = Math.min(y + c, this.totalCount), await this.fetchImages({
|
|
802
|
+
end: y,
|
|
799
803
|
extraFields: s,
|
|
800
804
|
format: n,
|
|
801
805
|
manualFormat: l,
|
|
802
|
-
start:
|
|
803
|
-
transformations:
|
|
806
|
+
start: f,
|
|
807
|
+
transformations: x
|
|
804
808
|
}), yield this.data;
|
|
805
809
|
}
|
|
806
810
|
hostConnected() {
|
|
@@ -815,29 +819,29 @@ class ji {
|
|
|
815
819
|
this.resetPageCache();
|
|
816
820
|
}
|
|
817
821
|
}
|
|
818
|
-
const
|
|
819
|
-
var
|
|
820
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
821
|
-
(n = t[
|
|
822
|
-
return s && a &&
|
|
822
|
+
const Fe = V`.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}`, _e = V`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`;
|
|
823
|
+
var Me = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, z = (t, e, i, s) => {
|
|
824
|
+
for (var a = s > 1 ? void 0 : s ? Ie(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
825
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
826
|
+
return s && a && Me(e, i, a), a;
|
|
823
827
|
};
|
|
824
|
-
let v = class extends
|
|
828
|
+
let v = class extends j {
|
|
825
829
|
constructor() {
|
|
826
|
-
super(...arguments), this.localize = new
|
|
827
|
-
[
|
|
830
|
+
super(...arguments), this.localize = new G(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.showPositionPicker = !1, this.lastAppliedSetting = {
|
|
831
|
+
[o.Pixel]: {
|
|
828
832
|
height: 0,
|
|
829
833
|
percentageHeight: 100,
|
|
830
834
|
percentageWidth: 100,
|
|
831
|
-
unit:
|
|
835
|
+
unit: o.Pixel,
|
|
832
836
|
width: 0,
|
|
833
837
|
x: 0,
|
|
834
838
|
y: 0
|
|
835
839
|
},
|
|
836
|
-
[
|
|
840
|
+
[o.AspectRatio]: {
|
|
837
841
|
height: 1,
|
|
838
842
|
percentageHeight: 100,
|
|
839
843
|
percentageWidth: 100,
|
|
840
|
-
unit:
|
|
844
|
+
unit: o.AspectRatio,
|
|
841
845
|
width: 1,
|
|
842
846
|
x: 0,
|
|
843
847
|
y: 0
|
|
@@ -854,10 +858,10 @@ let v = class extends q {
|
|
|
854
858
|
return;
|
|
855
859
|
}
|
|
856
860
|
if (this.keepAspectRatio) {
|
|
857
|
-
if (this.unit ===
|
|
861
|
+
if (this.unit === o.Pixel && this.width && this.height) {
|
|
858
862
|
this.aspectRatio = this.width / this.height;
|
|
859
863
|
return;
|
|
860
|
-
} else if (this.unit ===
|
|
864
|
+
} else if (this.unit === o.AspectRatio && this.ratioWidth && this.ratioHeight) {
|
|
861
865
|
this.aspectRatio = this.ratioWidth / this.ratioHeight;
|
|
862
866
|
return;
|
|
863
867
|
}
|
|
@@ -888,9 +892,9 @@ let v = class extends q {
|
|
|
888
892
|
}
|
|
889
893
|
this.invalidWidth = !1;
|
|
890
894
|
let e = Number(t.target.value);
|
|
891
|
-
this.unit ===
|
|
892
|
-
let i = this.unit ===
|
|
893
|
-
this.keepAspectRatio && (i = Math.round(e / this.aspectRatio), this.unit ===
|
|
895
|
+
this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
|
|
896
|
+
let i = this.unit === o.Pixel ? this.height : this.ratioHeight, s = !1;
|
|
897
|
+
this.keepAspectRatio && (i = Math.round(e / this.aspectRatio), this.unit === o.Pixel && i > this.maxHeight && (i = this.maxHeight, s = !0)), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", {
|
|
894
898
|
detail: {
|
|
895
899
|
breakAspectRatio: s,
|
|
896
900
|
height: i,
|
|
@@ -907,9 +911,9 @@ let v = class extends q {
|
|
|
907
911
|
}
|
|
908
912
|
this.invalidHeight = !1;
|
|
909
913
|
let e = Number(t.target.value);
|
|
910
|
-
this.unit ===
|
|
911
|
-
let i = this.unit ===
|
|
912
|
-
this.keepAspectRatio && (i = Math.round(e * this.aspectRatio), this.unit ===
|
|
914
|
+
this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
|
|
915
|
+
let i = this.unit === o.Pixel ? this.width : this.ratioWidth, s = !1;
|
|
916
|
+
this.keepAspectRatio && (i = Math.round(e * this.aspectRatio), this.unit === o.Pixel && i > this.maxWidth && (i = this.maxWidth, s = !0)), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", {
|
|
913
917
|
detail: {
|
|
914
918
|
breakAspectRatio: s,
|
|
915
919
|
height: e,
|
|
@@ -924,18 +928,18 @@ let v = class extends q {
|
|
|
924
928
|
if (e === "free")
|
|
925
929
|
this.selectedMode?.auto && this.emit("cx-asset-link-format-crop-change", {
|
|
926
930
|
detail: {
|
|
927
|
-
height: this.lastAppliedSetting[
|
|
931
|
+
height: this.lastAppliedSetting[o.Pixel].height,
|
|
928
932
|
keepAspectRatio: !1,
|
|
929
933
|
silent: !0,
|
|
930
|
-
unit:
|
|
931
|
-
width: this.lastAppliedSetting[
|
|
934
|
+
unit: o.Pixel,
|
|
935
|
+
width: this.lastAppliedSetting[o.Pixel].width
|
|
932
936
|
}
|
|
933
937
|
});
|
|
934
938
|
else if (!i) {
|
|
935
939
|
const [s, a] = e.split(":").map(Number);
|
|
936
|
-
if (this.unit ===
|
|
937
|
-
let
|
|
938
|
-
Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width:
|
|
940
|
+
if (this.unit === o.Pixel) {
|
|
941
|
+
let r = s, n = a;
|
|
942
|
+
Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = re(
|
|
939
943
|
this.maxWidth,
|
|
940
944
|
this.maxHeight,
|
|
941
945
|
s,
|
|
@@ -945,8 +949,8 @@ let v = class extends q {
|
|
|
945
949
|
height: n,
|
|
946
950
|
keepAspectRatio: !0,
|
|
947
951
|
silent: !0,
|
|
948
|
-
unit:
|
|
949
|
-
width:
|
|
952
|
+
unit: o.Pixel,
|
|
953
|
+
width: r
|
|
950
954
|
}
|
|
951
955
|
});
|
|
952
956
|
} else
|
|
@@ -955,7 +959,7 @@ let v = class extends q {
|
|
|
955
959
|
height: a,
|
|
956
960
|
keepAspectRatio: !0,
|
|
957
961
|
silent: !0,
|
|
958
|
-
unit:
|
|
962
|
+
unit: o.AspectRatio,
|
|
959
963
|
width: s
|
|
960
964
|
}
|
|
961
965
|
});
|
|
@@ -988,19 +992,19 @@ let v = class extends q {
|
|
|
988
992
|
* This allows the parent component to update the crop settings accordingly.
|
|
989
993
|
*/
|
|
990
994
|
onUnitChange(t) {
|
|
991
|
-
t.target.value ===
|
|
995
|
+
t.target.value === o.AspectRatio ? this.emit("cx-asset-link-format-crop-change", {
|
|
992
996
|
detail: {
|
|
993
|
-
height: this.lastAppliedSetting[
|
|
997
|
+
height: this.lastAppliedSetting[o.AspectRatio].height,
|
|
994
998
|
keepAspectRatio: this.keepAspectRatio,
|
|
995
|
-
unit:
|
|
996
|
-
width: this.lastAppliedSetting[
|
|
999
|
+
unit: o.AspectRatio,
|
|
1000
|
+
width: this.lastAppliedSetting[o.AspectRatio].width
|
|
997
1001
|
}
|
|
998
1002
|
}) : this.emit("cx-asset-link-format-crop-change", {
|
|
999
1003
|
detail: {
|
|
1000
|
-
height: this.lastAppliedSetting[
|
|
1004
|
+
height: this.lastAppliedSetting[o.Pixel].height,
|
|
1001
1005
|
keepAspectRatio: this.keepAspectRatio,
|
|
1002
|
-
unit:
|
|
1003
|
-
width: this.lastAppliedSetting[
|
|
1006
|
+
unit: o.Pixel,
|
|
1007
|
+
width: this.lastAppliedSetting[o.Pixel].width
|
|
1004
1008
|
}
|
|
1005
1009
|
}), this.emit("cx-asset-link-format-crop-mode-change", {
|
|
1006
1010
|
detail: {
|
|
@@ -1044,53 +1048,53 @@ let v = class extends q {
|
|
|
1044
1048
|
}
|
|
1045
1049
|
}), this.emit("cx-asset-link-format-crop-change", {
|
|
1046
1050
|
detail: {
|
|
1047
|
-
height: this.unit ===
|
|
1051
|
+
height: this.unit === o.Pixel ? this.height : this.ratioHeight,
|
|
1048
1052
|
keepAspectRatio: !this.keepAspectRatio,
|
|
1049
1053
|
unit: this.unit,
|
|
1050
|
-
width: this.unit ===
|
|
1054
|
+
width: this.unit === o.Pixel ? this.width : this.ratioWidth
|
|
1051
1055
|
}
|
|
1052
1056
|
});
|
|
1053
1057
|
}
|
|
1054
1058
|
render() {
|
|
1055
1059
|
const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
|
|
1056
|
-
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${
|
|
1060
|
+
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${I(
|
|
1057
1061
|
!this.noRatioModes,
|
|
1058
1062
|
() => C`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${O({
|
|
1059
1063
|
width: "100%"
|
|
1060
|
-
})} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${
|
|
1064
|
+
})} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${rt(
|
|
1061
1065
|
t,
|
|
1062
1066
|
(i) => i.value,
|
|
1063
1067
|
({ label: i, value: s }) => C`<cx-option value=${s}>${i}</cx-option>`
|
|
1064
1068
|
)}
|
|
1065
|
-
${
|
|
1069
|
+
${I(
|
|
1066
1070
|
e.length > 0,
|
|
1067
1071
|
() => C`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
|
|
1068
1072
|
)}
|
|
1069
|
-
${
|
|
1073
|
+
${rt(
|
|
1070
1074
|
e,
|
|
1071
1075
|
(i) => i.value,
|
|
1072
1076
|
({ label: i, value: s }) => C`<cx-option value=${s}>${i}</cx-option>`
|
|
1073
1077
|
)}</cx-select>`
|
|
1074
|
-
)}<cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit ===
|
|
1078
|
+
)}<cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
|
|
1075
1079
|
W
|
|
1076
1080
|
</cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-crop-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${O({
|
|
1077
1081
|
color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
|
|
1078
|
-
})} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit ===
|
|
1082
|
+
})} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
|
|
1079
1083
|
H
|
|
1080
|
-
</cx-typography></cx-input></div>${
|
|
1084
|
+
</cx-typography></cx-input></div>${I(
|
|
1081
1085
|
!this.noRatioModes,
|
|
1082
|
-
() => C`<cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${
|
|
1083
|
-
)}</cx-space>${
|
|
1086
|
+
() => C`<cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
|
|
1087
|
+
)}</cx-space>${I(
|
|
1084
1088
|
this.focusModes.length > 0,
|
|
1085
1089
|
() => C`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${O({
|
|
1086
1090
|
width: "100%"
|
|
1087
|
-
})} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${
|
|
1091
|
+
})} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${rt(
|
|
1088
1092
|
this.focusModes,
|
|
1089
1093
|
(i) => i.value,
|
|
1090
1094
|
({ label: i, value: s }) => C`<cx-option value=${s}>${i}</cx-option>`
|
|
1091
1095
|
)}</cx-select>`
|
|
1092
1096
|
)}
|
|
1093
|
-
${
|
|
1097
|
+
${I(
|
|
1094
1098
|
this.showPositionPicker && this.focusMode === "manual",
|
|
1095
1099
|
() => C`<cx-position-picker data-testid="cx-asset-link-format-crop-position" value=${this.position} @cx-change=${this.onPositionChange}></cx-position-picker>`
|
|
1096
1100
|
)}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${O({
|
|
@@ -1098,25 +1102,25 @@ let v = class extends q {
|
|
|
1098
1102
|
})} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1099
1103
|
}
|
|
1100
1104
|
};
|
|
1101
|
-
v.styles = [
|
|
1105
|
+
v.styles = [Q, _e];
|
|
1102
1106
|
v.dependencies = {
|
|
1103
|
-
"cx-button":
|
|
1107
|
+
"cx-button": J,
|
|
1104
1108
|
"cx-details": it,
|
|
1105
1109
|
"cx-divider": qt,
|
|
1106
1110
|
"cx-icon": st,
|
|
1107
|
-
"cx-icon-button":
|
|
1108
|
-
"cx-input":
|
|
1109
|
-
"cx-option":
|
|
1111
|
+
"cx-icon-button": Pt,
|
|
1112
|
+
"cx-input": Ft,
|
|
1113
|
+
"cx-option": St,
|
|
1110
1114
|
"cx-position-picker": oe,
|
|
1111
|
-
"cx-select":
|
|
1112
|
-
"cx-space":
|
|
1113
|
-
"cx-typography":
|
|
1115
|
+
"cx-select": At,
|
|
1116
|
+
"cx-space": B,
|
|
1117
|
+
"cx-typography": q
|
|
1114
1118
|
};
|
|
1115
1119
|
z([
|
|
1116
|
-
|
|
1120
|
+
tt(".details")
|
|
1117
1121
|
], v.prototype, "base", 2);
|
|
1118
1122
|
z([
|
|
1119
|
-
|
|
1123
|
+
tt("cx-position-picker")
|
|
1120
1124
|
], v.prototype, "positionPicker", 2);
|
|
1121
1125
|
z([
|
|
1122
1126
|
h({ reflect: !0, type: Boolean })
|
|
@@ -1182,13 +1186,13 @@ z([
|
|
|
1182
1186
|
h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
|
|
1183
1187
|
], v.prototype, "keepAspectRatio", 2);
|
|
1184
1188
|
z([
|
|
1185
|
-
|
|
1189
|
+
k()
|
|
1186
1190
|
], v.prototype, "invalidWidth", 2);
|
|
1187
1191
|
z([
|
|
1188
|
-
|
|
1192
|
+
k()
|
|
1189
1193
|
], v.prototype, "invalidHeight", 2);
|
|
1190
1194
|
z([
|
|
1191
|
-
|
|
1195
|
+
k()
|
|
1192
1196
|
], v.prototype, "aspectRatio", 2);
|
|
1193
1197
|
z([
|
|
1194
1198
|
P("cropMode", { waitUntilFirstUpdate: !0 }),
|
|
@@ -1200,17 +1204,17 @@ z([
|
|
|
1200
1204
|
P("open", { waitUntilFirstUpdate: !0 })
|
|
1201
1205
|
], v.prototype, "handleOpenChange", 1);
|
|
1202
1206
|
v = z([
|
|
1203
|
-
|
|
1207
|
+
X("cx-asset-link-format-crop")
|
|
1204
1208
|
], v);
|
|
1205
|
-
const
|
|
1206
|
-
var
|
|
1207
|
-
for (var a = s > 1 ? void 0 : s ? He(e, i) : e,
|
|
1208
|
-
(n = t[
|
|
1209
|
-
return s && a &&
|
|
1209
|
+
const Ee = V`.extension{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border:solid 1px var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-0);& cx-select{flex:1;width:100%}}`;
|
|
1210
|
+
var Te = Object.defineProperty, He = Object.getOwnPropertyDescriptor, Mt = (t, e, i, s) => {
|
|
1211
|
+
for (var a = s > 1 ? void 0 : s ? He(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1212
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1213
|
+
return s && a && Te(e, i, a), a;
|
|
1210
1214
|
};
|
|
1211
|
-
let
|
|
1215
|
+
let Y = class extends j {
|
|
1212
1216
|
constructor() {
|
|
1213
|
-
super(...arguments), this.localize = new
|
|
1217
|
+
super(...arguments), this.localize = new G(this), this.value = "", this.items = [];
|
|
1214
1218
|
}
|
|
1215
1219
|
handleExtensionChange(t) {
|
|
1216
1220
|
const e = t.target.value;
|
|
@@ -1219,46 +1223,46 @@ let Z = class extends q {
|
|
|
1219
1223
|
});
|
|
1220
1224
|
}
|
|
1221
1225
|
render() {
|
|
1222
|
-
return C`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${
|
|
1226
|
+
return C`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${rt(
|
|
1223
1227
|
this.items,
|
|
1224
1228
|
(t) => t.value,
|
|
1225
1229
|
(t) => C`<cx-option value=${t.value}>${t.displayName}</cx-option>`
|
|
1226
1230
|
)}</cx-select></cx-space>`;
|
|
1227
1231
|
}
|
|
1228
1232
|
};
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
"cx-option":
|
|
1232
|
-
"cx-select":
|
|
1233
|
-
"cx-space":
|
|
1234
|
-
"cx-typography":
|
|
1233
|
+
Y.styles = [Q, Ee];
|
|
1234
|
+
Y.dependencies = {
|
|
1235
|
+
"cx-option": St,
|
|
1236
|
+
"cx-select": At,
|
|
1237
|
+
"cx-space": B,
|
|
1238
|
+
"cx-typography": q
|
|
1235
1239
|
};
|
|
1236
|
-
|
|
1240
|
+
Mt([
|
|
1237
1241
|
h({ reflect: !0, type: String })
|
|
1238
|
-
],
|
|
1239
|
-
|
|
1242
|
+
], Y.prototype, "value", 2);
|
|
1243
|
+
Mt([
|
|
1240
1244
|
h({ reflect: !1, type: Array })
|
|
1241
|
-
],
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
],
|
|
1245
|
-
const
|
|
1246
|
-
var
|
|
1247
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
1248
|
-
(n = t[
|
|
1249
|
-
return s && a &&
|
|
1245
|
+
], Y.prototype, "items", 2);
|
|
1246
|
+
Y = Mt([
|
|
1247
|
+
X("cx-asset-link-format-extension")
|
|
1248
|
+
], Y);
|
|
1249
|
+
const We = V`cx-details::part(base){border-bottom-width:0}`;
|
|
1250
|
+
var De = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, D = (t, e, i, s) => {
|
|
1251
|
+
for (var a = s > 1 ? void 0 : s ? Ne(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1252
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1253
|
+
return s && a && De(e, i, a), a;
|
|
1250
1254
|
};
|
|
1251
|
-
const
|
|
1252
|
-
let
|
|
1255
|
+
const bt = "auto";
|
|
1256
|
+
let E = class extends j {
|
|
1253
1257
|
constructor() {
|
|
1254
|
-
super(...arguments), this.localize = new
|
|
1258
|
+
super(...arguments), this.localize = new G(this), this.open = !1, this.value = "", this.items = [], this.canAutoFormat = !1, this.autoFormat = !1, this.loading = !1, this.scopedValue = "";
|
|
1255
1259
|
}
|
|
1256
1260
|
/**
|
|
1257
1261
|
* The listbox value that represents the committed choice: the `Auto` entry when that is
|
|
1258
1262
|
* active, otherwise the resolved proxy id.
|
|
1259
1263
|
*/
|
|
1260
1264
|
get committedValue() {
|
|
1261
|
-
return this.autoFormat ?
|
|
1265
|
+
return this.autoFormat ? bt : this.value;
|
|
1262
1266
|
}
|
|
1263
1267
|
handleValueChange() {
|
|
1264
1268
|
this.scopedValue = this.committedValue;
|
|
@@ -1278,7 +1282,7 @@ let M = class extends q {
|
|
|
1278
1282
|
handleApply() {
|
|
1279
1283
|
if (this.loading)
|
|
1280
1284
|
return;
|
|
1281
|
-
if (this.scopedValue ===
|
|
1285
|
+
if (this.scopedValue === bt) {
|
|
1282
1286
|
this.emit("cx-asset-link-format-proxy-change", {
|
|
1283
1287
|
detail: { autoFormat: !0 }
|
|
1284
1288
|
});
|
|
@@ -1308,74 +1312,74 @@ let M = class extends q {
|
|
|
1308
1312
|
t.target !== this.base && t.stopPropagation();
|
|
1309
1313
|
}
|
|
1310
1314
|
render() {
|
|
1311
|
-
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${
|
|
1315
|
+
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${rt(
|
|
1312
1316
|
this.items,
|
|
1313
1317
|
(t) => t.id,
|
|
1314
1318
|
(t) => C`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
|
|
1315
1319
|
)}
|
|
1316
|
-
${
|
|
1320
|
+
${I(
|
|
1317
1321
|
this.canAutoFormat,
|
|
1318
|
-
() => C`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${
|
|
1322
|
+
() => C`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${bt}>${this.localize.term("auto")}</cx-option>`,
|
|
1319
1323
|
() => Ut
|
|
1320
1324
|
)}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${O({
|
|
1321
1325
|
"margin-left": "auto"
|
|
1322
1326
|
})} ?disabled=${this.scopedValue === this.committedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1323
1327
|
}
|
|
1324
1328
|
};
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
"cx-button":
|
|
1329
|
+
E.styles = [Q, We];
|
|
1330
|
+
E.dependencies = {
|
|
1331
|
+
"cx-button": J,
|
|
1328
1332
|
"cx-details": it,
|
|
1329
1333
|
"cx-divider": qt,
|
|
1330
1334
|
"cx-icon": st,
|
|
1331
|
-
"cx-option":
|
|
1332
|
-
"cx-select":
|
|
1333
|
-
"cx-space":
|
|
1334
|
-
"cx-typography":
|
|
1335
|
+
"cx-option": St,
|
|
1336
|
+
"cx-select": At,
|
|
1337
|
+
"cx-space": B,
|
|
1338
|
+
"cx-typography": q
|
|
1335
1339
|
};
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
],
|
|
1339
|
-
|
|
1340
|
+
D([
|
|
1341
|
+
tt(".details")
|
|
1342
|
+
], E.prototype, "base", 2);
|
|
1343
|
+
D([
|
|
1340
1344
|
h({ reflect: !0, type: Boolean })
|
|
1341
|
-
],
|
|
1342
|
-
|
|
1345
|
+
], E.prototype, "open", 2);
|
|
1346
|
+
D([
|
|
1343
1347
|
h({ reflect: !0, type: String })
|
|
1344
|
-
],
|
|
1345
|
-
|
|
1348
|
+
], E.prototype, "value", 2);
|
|
1349
|
+
D([
|
|
1346
1350
|
h({ reflect: !1, type: Array })
|
|
1347
|
-
],
|
|
1348
|
-
|
|
1351
|
+
], E.prototype, "items", 2);
|
|
1352
|
+
D([
|
|
1349
1353
|
h({ attribute: "can-auto-format", reflect: !0, type: Boolean })
|
|
1350
|
-
],
|
|
1351
|
-
|
|
1354
|
+
], E.prototype, "canAutoFormat", 2);
|
|
1355
|
+
D([
|
|
1352
1356
|
h({ attribute: "auto-format", reflect: !0, type: Boolean })
|
|
1353
|
-
],
|
|
1354
|
-
|
|
1357
|
+
], E.prototype, "autoFormat", 2);
|
|
1358
|
+
D([
|
|
1355
1359
|
h({ reflect: !0, type: Boolean })
|
|
1356
|
-
],
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
],
|
|
1360
|
-
|
|
1360
|
+
], E.prototype, "loading", 2);
|
|
1361
|
+
D([
|
|
1362
|
+
k()
|
|
1363
|
+
], E.prototype, "scopedValue", 2);
|
|
1364
|
+
D([
|
|
1361
1365
|
P("autoFormat"),
|
|
1362
1366
|
P("value")
|
|
1363
|
-
],
|
|
1364
|
-
|
|
1367
|
+
], E.prototype, "handleValueChange", 1);
|
|
1368
|
+
D([
|
|
1365
1369
|
P("open", { waitUntilFirstUpdate: !0 })
|
|
1366
|
-
],
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
],
|
|
1370
|
-
const
|
|
1371
|
-
var
|
|
1372
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
1373
|
-
(n = t[
|
|
1374
|
-
return s && a &&
|
|
1370
|
+
], E.prototype, "handleOpenChange", 1);
|
|
1371
|
+
E = D([
|
|
1372
|
+
X("cx-asset-link-format-proxy")
|
|
1373
|
+
], E);
|
|
1374
|
+
const Oe = V`cx-details::part(base){border-bottom-width:0}`;
|
|
1375
|
+
var Le = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, et = (t, e, i, s) => {
|
|
1376
|
+
for (var a = s > 1 ? void 0 : s ? Ue(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1377
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1378
|
+
return s && a && Le(e, i, a), a;
|
|
1375
1379
|
};
|
|
1376
|
-
let
|
|
1380
|
+
let W = class extends j {
|
|
1377
1381
|
constructor() {
|
|
1378
|
-
super(...arguments), this.localize = new
|
|
1382
|
+
super(...arguments), this.localize = new G(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
|
|
1379
1383
|
}
|
|
1380
1384
|
/**
|
|
1381
1385
|
* A computed property that checks if the current quality value is invalid.
|
|
@@ -1424,48 +1428,48 @@ let T = class extends q {
|
|
|
1424
1428
|
})} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1425
1429
|
}
|
|
1426
1430
|
};
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
"cx-button":
|
|
1431
|
+
W.styles = [Q, Oe];
|
|
1432
|
+
W.dependencies = {
|
|
1433
|
+
"cx-button": J,
|
|
1430
1434
|
"cx-details": it,
|
|
1431
1435
|
"cx-icon": st,
|
|
1432
|
-
"cx-input":
|
|
1433
|
-
"cx-space":
|
|
1436
|
+
"cx-input": Ft,
|
|
1437
|
+
"cx-space": B,
|
|
1434
1438
|
"cx-tooltip": jt,
|
|
1435
|
-
"cx-typography":
|
|
1439
|
+
"cx-typography": q
|
|
1436
1440
|
};
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
],
|
|
1440
|
-
|
|
1441
|
+
et([
|
|
1442
|
+
tt(".details")
|
|
1443
|
+
], W.prototype, "base", 2);
|
|
1444
|
+
et([
|
|
1441
1445
|
h({ reflect: !0, type: Boolean })
|
|
1442
|
-
],
|
|
1443
|
-
|
|
1446
|
+
], W.prototype, "open", 2);
|
|
1447
|
+
et([
|
|
1444
1448
|
h({ reflect: !0, type: Number })
|
|
1445
|
-
],
|
|
1446
|
-
|
|
1449
|
+
], W.prototype, "value", 2);
|
|
1450
|
+
et([
|
|
1447
1451
|
h({ reflect: !0, type: Boolean })
|
|
1448
|
-
],
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
],
|
|
1452
|
-
|
|
1452
|
+
], W.prototype, "loading", 2);
|
|
1453
|
+
et([
|
|
1454
|
+
k()
|
|
1455
|
+
], W.prototype, "scopedValue", 2);
|
|
1456
|
+
et([
|
|
1453
1457
|
P("value")
|
|
1454
|
-
],
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
],
|
|
1458
|
-
const
|
|
1459
|
-
var
|
|
1460
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
1461
|
-
(n = t[
|
|
1462
|
-
return s && a &&
|
|
1458
|
+
], W.prototype, "handleValueChange", 1);
|
|
1459
|
+
W = et([
|
|
1460
|
+
X("cx-asset-link-format-quality")
|
|
1461
|
+
], W);
|
|
1462
|
+
const Be = V`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.resize__unit-select{width:120px}.resize__input-group{flex:1;display:flex}`;
|
|
1463
|
+
var qe = Object.defineProperty, je = Object.getOwnPropertyDescriptor, $ = (t, e, i, s) => {
|
|
1464
|
+
for (var a = s > 1 ? void 0 : s ? je(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1465
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1466
|
+
return s && a && qe(e, i, a), a;
|
|
1463
1467
|
};
|
|
1464
|
-
let
|
|
1468
|
+
let b = class extends j {
|
|
1465
1469
|
constructor() {
|
|
1466
|
-
super(...arguments), this.localize = new
|
|
1467
|
-
[
|
|
1468
|
-
[
|
|
1470
|
+
super(...arguments), this.localize = new G(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
|
|
1471
|
+
[o.Pixel]: { height: 0, width: 0 },
|
|
1472
|
+
[o.AspectRatio]: { height: 1, width: 1 }
|
|
1469
1473
|
}, this.loading = !1, this.noRatioModes = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
|
|
1470
1474
|
}
|
|
1471
1475
|
/**
|
|
@@ -1479,11 +1483,11 @@ let w = class extends q {
|
|
|
1479
1483
|
async handleCropModeChange() {
|
|
1480
1484
|
const t = Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && this.maxWidth > 0 && this.maxHeight > 0;
|
|
1481
1485
|
if (this.keepAspectRatio) {
|
|
1482
|
-
if (this.unit ===
|
|
1486
|
+
if (this.unit === o.AspectRatio && this.ratioWidth && this.ratioHeight) {
|
|
1483
1487
|
this.aspectRatio = this.ratioWidth / this.ratioHeight;
|
|
1484
1488
|
return;
|
|
1485
1489
|
}
|
|
1486
|
-
if (this.unit ===
|
|
1490
|
+
if (this.unit === o.Pixel && !t && this.width && this.height) {
|
|
1487
1491
|
this.aspectRatio = this.width / this.height;
|
|
1488
1492
|
return;
|
|
1489
1493
|
}
|
|
@@ -1514,8 +1518,8 @@ let w = class extends q {
|
|
|
1514
1518
|
}
|
|
1515
1519
|
this.invalidWidth = !1;
|
|
1516
1520
|
let e = Number(t.target.value);
|
|
1517
|
-
this.unit ===
|
|
1518
|
-
let i = this.unit ===
|
|
1521
|
+
this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxWidth), 1)), t.target.value = e.toString();
|
|
1522
|
+
let i = this.unit === o.Pixel ? this.height : this.ratioHeight;
|
|
1519
1523
|
this.keepAspectRatio && (i = Math.min(
|
|
1520
1524
|
Math.round(e / this.aspectRatio),
|
|
1521
1525
|
this.maxHeight
|
|
@@ -1535,8 +1539,8 @@ let w = class extends q {
|
|
|
1535
1539
|
}
|
|
1536
1540
|
this.invalidHeight = !1;
|
|
1537
1541
|
let e = Number(t.target.value);
|
|
1538
|
-
this.unit ===
|
|
1539
|
-
let i = this.unit ===
|
|
1542
|
+
this.unit === o.Pixel && (e = Math.max(Math.min(e, this.maxHeight), 1)), t.target.value = e.toString();
|
|
1543
|
+
let i = this.unit === o.Pixel ? this.width : this.ratioWidth;
|
|
1540
1544
|
this.keepAspectRatio && (i = Math.min(
|
|
1541
1545
|
Math.round(e * this.aspectRatio),
|
|
1542
1546
|
this.maxWidth
|
|
@@ -1550,19 +1554,19 @@ let w = class extends q {
|
|
|
1550
1554
|
});
|
|
1551
1555
|
}
|
|
1552
1556
|
onUnitChange(t) {
|
|
1553
|
-
t.target.value ===
|
|
1557
|
+
t.target.value === o.AspectRatio ? this.emit("cx-asset-link-format-resize-change", {
|
|
1554
1558
|
detail: {
|
|
1555
|
-
height: this.lastAppliedSetting[
|
|
1559
|
+
height: this.lastAppliedSetting[o.AspectRatio].height,
|
|
1556
1560
|
keepAspectRatio: this.keepAspectRatio,
|
|
1557
|
-
unit:
|
|
1558
|
-
width: this.lastAppliedSetting[
|
|
1561
|
+
unit: o.AspectRatio,
|
|
1562
|
+
width: this.lastAppliedSetting[o.AspectRatio].width
|
|
1559
1563
|
}
|
|
1560
1564
|
}) : this.emit("cx-asset-link-format-resize-change", {
|
|
1561
1565
|
detail: {
|
|
1562
|
-
height: this.lastAppliedSetting[
|
|
1566
|
+
height: this.lastAppliedSetting[o.Pixel].height,
|
|
1563
1567
|
keepAspectRatio: this.keepAspectRatio,
|
|
1564
|
-
unit:
|
|
1565
|
-
width: this.lastAppliedSetting[
|
|
1568
|
+
unit: o.Pixel,
|
|
1569
|
+
width: this.lastAppliedSetting[o.Pixel].width
|
|
1566
1570
|
}
|
|
1567
1571
|
});
|
|
1568
1572
|
}
|
|
@@ -1594,109 +1598,109 @@ let w = class extends q {
|
|
|
1594
1598
|
handleAspectRatioClick() {
|
|
1595
1599
|
this.emit("cx-asset-link-format-resize-change", {
|
|
1596
1600
|
detail: {
|
|
1597
|
-
height: this.unit ===
|
|
1601
|
+
height: this.unit === o.Pixel ? this.height : this.ratioHeight,
|
|
1598
1602
|
keepAspectRatio: !this.keepAspectRatio,
|
|
1599
1603
|
unit: this.unit,
|
|
1600
|
-
width: this.unit ===
|
|
1604
|
+
width: this.unit === o.Pixel ? this.width : this.ratioWidth
|
|
1601
1605
|
}
|
|
1602
1606
|
});
|
|
1603
1607
|
}
|
|
1604
1608
|
render() {
|
|
1605
|
-
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit ===
|
|
1609
|
+
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
|
|
1606
1610
|
W
|
|
1607
1611
|
</cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-resize-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${O({
|
|
1608
1612
|
color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
|
|
1609
|
-
})} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit ===
|
|
1613
|
+
})} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === o.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
|
|
1610
1614
|
H
|
|
1611
|
-
</cx-typography></cx-input></div>${
|
|
1615
|
+
</cx-typography></cx-input></div>${I(
|
|
1612
1616
|
!this.noRatioModes,
|
|
1613
|
-
() => C`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${
|
|
1617
|
+
() => C`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${o.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${o.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`
|
|
1614
1618
|
)}</cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${O({
|
|
1615
1619
|
marginLeft: "auto"
|
|
1616
1620
|
})} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1617
1621
|
}
|
|
1618
1622
|
};
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
"cx-button":
|
|
1623
|
+
b.styles = [Q, Be];
|
|
1624
|
+
b.dependencies = {
|
|
1625
|
+
"cx-button": J,
|
|
1622
1626
|
"cx-details": it,
|
|
1623
1627
|
"cx-icon": st,
|
|
1624
|
-
"cx-icon-button":
|
|
1625
|
-
"cx-input":
|
|
1626
|
-
"cx-option":
|
|
1627
|
-
"cx-select":
|
|
1628
|
-
"cx-space":
|
|
1629
|
-
"cx-typography":
|
|
1628
|
+
"cx-icon-button": Pt,
|
|
1629
|
+
"cx-input": Ft,
|
|
1630
|
+
"cx-option": St,
|
|
1631
|
+
"cx-select": At,
|
|
1632
|
+
"cx-space": B,
|
|
1633
|
+
"cx-typography": q
|
|
1630
1634
|
};
|
|
1631
1635
|
$([
|
|
1632
|
-
|
|
1633
|
-
],
|
|
1636
|
+
tt(".details")
|
|
1637
|
+
], b.prototype, "base", 2);
|
|
1634
1638
|
$([
|
|
1635
1639
|
h({ reflect: !0, type: Boolean })
|
|
1636
|
-
],
|
|
1640
|
+
], b.prototype, "open", 2);
|
|
1637
1641
|
$([
|
|
1638
1642
|
h({ reflect: !0, type: Number })
|
|
1639
|
-
],
|
|
1643
|
+
], b.prototype, "width", 2);
|
|
1640
1644
|
$([
|
|
1641
1645
|
h({ reflect: !0, type: Number })
|
|
1642
|
-
],
|
|
1646
|
+
], b.prototype, "height", 2);
|
|
1643
1647
|
$([
|
|
1644
1648
|
h({ attribute: "max-width", reflect: !0, type: Number })
|
|
1645
|
-
],
|
|
1649
|
+
], b.prototype, "maxWidth", 2);
|
|
1646
1650
|
$([
|
|
1647
1651
|
h({ attribute: "max-height", reflect: !0, type: Number })
|
|
1648
|
-
],
|
|
1652
|
+
], b.prototype, "maxHeight", 2);
|
|
1649
1653
|
$([
|
|
1650
1654
|
h({ attribute: "ratio-width", reflect: !0, type: Number })
|
|
1651
|
-
],
|
|
1655
|
+
], b.prototype, "ratioWidth", 2);
|
|
1652
1656
|
$([
|
|
1653
1657
|
h({ attribute: "ratio-height", reflect: !0, type: Number })
|
|
1654
|
-
],
|
|
1658
|
+
], b.prototype, "ratioHeight", 2);
|
|
1655
1659
|
$([
|
|
1656
1660
|
h({ reflect: !0, type: String })
|
|
1657
|
-
],
|
|
1661
|
+
], b.prototype, "unit", 2);
|
|
1658
1662
|
$([
|
|
1659
1663
|
h({ attribute: "last-applied-setting", reflect: !1, type: Object })
|
|
1660
|
-
],
|
|
1664
|
+
], b.prototype, "lastAppliedSetting", 2);
|
|
1661
1665
|
$([
|
|
1662
1666
|
h({ reflect: !0, type: Boolean })
|
|
1663
|
-
],
|
|
1667
|
+
], b.prototype, "loading", 2);
|
|
1664
1668
|
$([
|
|
1665
1669
|
h({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
|
|
1666
|
-
],
|
|
1670
|
+
], b.prototype, "noRatioModes", 2);
|
|
1667
1671
|
$([
|
|
1668
1672
|
h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
|
|
1669
|
-
],
|
|
1673
|
+
], b.prototype, "keepAspectRatio", 2);
|
|
1670
1674
|
$([
|
|
1671
|
-
|
|
1672
|
-
],
|
|
1675
|
+
k()
|
|
1676
|
+
], b.prototype, "invalidWidth", 2);
|
|
1673
1677
|
$([
|
|
1674
|
-
|
|
1675
|
-
],
|
|
1678
|
+
k()
|
|
1679
|
+
], b.prototype, "invalidHeight", 2);
|
|
1676
1680
|
$([
|
|
1677
|
-
|
|
1678
|
-
],
|
|
1681
|
+
k()
|
|
1682
|
+
], b.prototype, "aspectRatio", 2);
|
|
1679
1683
|
$([
|
|
1680
1684
|
P("cropMode", { waitUntilFirstUpdate: !0 }),
|
|
1681
1685
|
P("maxWidth", { waitUntilFirstUpdate: !0 }),
|
|
1682
1686
|
P("maxHeight", { waitUntilFirstUpdate: !0 }),
|
|
1683
1687
|
P("keepAspectRatio")
|
|
1684
|
-
],
|
|
1688
|
+
], b.prototype, "handleCropModeChange", 1);
|
|
1685
1689
|
$([
|
|
1686
1690
|
P("open", { waitUntilFirstUpdate: !0 })
|
|
1687
|
-
],
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
],
|
|
1691
|
-
const
|
|
1692
|
-
var
|
|
1693
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
1694
|
-
(n = t[
|
|
1695
|
-
return s && a &&
|
|
1691
|
+
], b.prototype, "handleOpenChange", 1);
|
|
1692
|
+
b = $([
|
|
1693
|
+
X("cx-asset-link-format-resize")
|
|
1694
|
+
], b);
|
|
1695
|
+
const Ve = V`cx-details::part(base){border-bottom-width:0}`;
|
|
1696
|
+
var Ge = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, K = (t, e, i, s) => {
|
|
1697
|
+
for (var a = s > 1 ? void 0 : s ? Qe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1698
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1699
|
+
return s && a && Ge(e, i, a), a;
|
|
1696
1700
|
};
|
|
1697
|
-
let H = class extends
|
|
1701
|
+
let H = class extends j {
|
|
1698
1702
|
constructor() {
|
|
1699
|
-
super(...arguments), this.localize = new
|
|
1703
|
+
super(...arguments), this.localize = new G(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
|
|
1700
1704
|
}
|
|
1701
1705
|
handleOpenChange() {
|
|
1702
1706
|
this.open || this.emit("cx-asset-link-format-rotation-change", {
|
|
@@ -1707,14 +1711,14 @@ let H = class extends q {
|
|
|
1707
1711
|
const e = t.target.value, i = Number(e);
|
|
1708
1712
|
if (Number.isNaN(i))
|
|
1709
1713
|
return;
|
|
1710
|
-
const s =
|
|
1714
|
+
const s = Et(i);
|
|
1711
1715
|
(i > 360 || i < -360) && (t.target.value = s.toString()), this.emit("cx-asset-link-format-rotation-change", {
|
|
1712
1716
|
detail: s
|
|
1713
1717
|
});
|
|
1714
1718
|
}
|
|
1715
1719
|
handleButtonClick(t) {
|
|
1716
1720
|
this.emit("cx-asset-link-format-rotation-change", {
|
|
1717
|
-
detail:
|
|
1721
|
+
detail: Et(t)
|
|
1718
1722
|
});
|
|
1719
1723
|
}
|
|
1720
1724
|
handleClockwiseClick() {
|
|
@@ -1740,49 +1744,49 @@ let H = class extends q {
|
|
|
1740
1744
|
})} @cx-input=${this.handleRotationChange}></cx-input><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === this.lastAppliedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1741
1745
|
}
|
|
1742
1746
|
};
|
|
1743
|
-
H.styles = [
|
|
1747
|
+
H.styles = [Q, Ve];
|
|
1744
1748
|
H.dependencies = {
|
|
1745
|
-
"cx-button":
|
|
1749
|
+
"cx-button": J,
|
|
1746
1750
|
"cx-button-group": ne,
|
|
1747
1751
|
"cx-details": it,
|
|
1748
1752
|
"cx-icon": st,
|
|
1749
|
-
"cx-icon-button":
|
|
1750
|
-
"cx-space":
|
|
1751
|
-
"cx-typography":
|
|
1753
|
+
"cx-icon-button": Pt,
|
|
1754
|
+
"cx-space": B,
|
|
1755
|
+
"cx-typography": q
|
|
1752
1756
|
};
|
|
1753
|
-
|
|
1754
|
-
|
|
1757
|
+
K([
|
|
1758
|
+
tt(".details")
|
|
1755
1759
|
], H.prototype, "base", 2);
|
|
1756
|
-
|
|
1760
|
+
K([
|
|
1757
1761
|
h({ reflect: !0, type: Boolean })
|
|
1758
1762
|
], H.prototype, "open", 2);
|
|
1759
|
-
|
|
1763
|
+
K([
|
|
1760
1764
|
h({ reflect: !0, type: Number })
|
|
1761
1765
|
], H.prototype, "value", 2);
|
|
1762
|
-
|
|
1766
|
+
K([
|
|
1763
1767
|
h({ attribute: "default-value", reflect: !0, type: Number })
|
|
1764
1768
|
], H.prototype, "defaultValue", 2);
|
|
1765
|
-
|
|
1769
|
+
K([
|
|
1766
1770
|
h({ reflect: !0, type: Boolean })
|
|
1767
1771
|
], H.prototype, "loading", 2);
|
|
1768
|
-
|
|
1772
|
+
K([
|
|
1769
1773
|
h({ attribute: "last-applied-value", reflect: !0, type: Number })
|
|
1770
1774
|
], H.prototype, "lastAppliedValue", 2);
|
|
1771
|
-
|
|
1775
|
+
K([
|
|
1772
1776
|
P("open", { waitUntilFirstUpdate: !0 })
|
|
1773
1777
|
], H.prototype, "handleOpenChange", 1);
|
|
1774
|
-
H =
|
|
1775
|
-
|
|
1778
|
+
H = K([
|
|
1779
|
+
X("cx-asset-link-format-rotation")
|
|
1776
1780
|
], H);
|
|
1777
|
-
const
|
|
1778
|
-
var
|
|
1779
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
1780
|
-
(n = t[
|
|
1781
|
-
return s && a &&
|
|
1781
|
+
const Xe = V`cx-details::part(base){border-bottom-width:0}`;
|
|
1782
|
+
var Ke = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, vt = (t, e, i, s) => {
|
|
1783
|
+
for (var a = s > 1 ? void 0 : s ? Ze(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1784
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1785
|
+
return s && a && Ke(e, i, a), a;
|
|
1782
1786
|
};
|
|
1783
|
-
let
|
|
1787
|
+
let U = class extends j {
|
|
1784
1788
|
constructor() {
|
|
1785
|
-
super(...arguments), this.localize = new
|
|
1789
|
+
super(...arguments), this.localize = new G(this), this.open = !1, this.value = !1;
|
|
1786
1790
|
}
|
|
1787
1791
|
handleApply(t) {
|
|
1788
1792
|
this.emit("cx-asset-link-format-metadata-change", {
|
|
@@ -1809,36 +1813,36 @@ let L = class extends q {
|
|
|
1809
1813
|
return C`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
|
|
1810
1814
|
}
|
|
1811
1815
|
};
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
"cx-button":
|
|
1816
|
+
U.styles = [Q, Xe];
|
|
1817
|
+
U.dependencies = {
|
|
1818
|
+
"cx-button": J,
|
|
1815
1819
|
"cx-checkbox": he,
|
|
1816
1820
|
"cx-details": it,
|
|
1817
1821
|
"cx-icon": st,
|
|
1818
|
-
"cx-space":
|
|
1822
|
+
"cx-space": B,
|
|
1819
1823
|
"cx-tooltip": jt,
|
|
1820
|
-
"cx-typography":
|
|
1824
|
+
"cx-typography": q
|
|
1821
1825
|
};
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
],
|
|
1825
|
-
|
|
1826
|
+
vt([
|
|
1827
|
+
tt(".details")
|
|
1828
|
+
], U.prototype, "base", 2);
|
|
1829
|
+
vt([
|
|
1826
1830
|
h({ reflect: !0, type: Boolean })
|
|
1827
|
-
],
|
|
1828
|
-
|
|
1831
|
+
], U.prototype, "open", 2);
|
|
1832
|
+
vt([
|
|
1829
1833
|
h({ reflect: !0, type: Boolean })
|
|
1830
|
-
],
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
],
|
|
1834
|
-
var
|
|
1835
|
-
for (var a = s > 1 ? void 0 : s ?
|
|
1836
|
-
(n = t[
|
|
1837
|
-
return s && a &&
|
|
1834
|
+
], U.prototype, "value", 2);
|
|
1835
|
+
U = vt([
|
|
1836
|
+
X("cx-asset-link-format-metadata")
|
|
1837
|
+
], U);
|
|
1838
|
+
var Ye = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, g = (t, e, i, s) => {
|
|
1839
|
+
for (var a = s > 1 ? void 0 : s ? Je(e, i) : e, r = t.length - 1, n; r >= 0; r--)
|
|
1840
|
+
(n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
|
|
1841
|
+
return s && a && Ye(e, i, a), a;
|
|
1838
1842
|
};
|
|
1839
|
-
let
|
|
1843
|
+
let u = class extends j {
|
|
1840
1844
|
constructor() {
|
|
1841
|
-
super(), this.localize = new
|
|
1845
|
+
super(), this.localize = new G(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
|
|
1842
1846
|
{
|
|
1843
1847
|
label: "Free",
|
|
1844
1848
|
value: "free"
|
|
@@ -1910,7 +1914,7 @@ let m = class extends q {
|
|
|
1910
1914
|
keepAspectRatio: !0,
|
|
1911
1915
|
ratioHeight: 1,
|
|
1912
1916
|
ratioWidth: 1,
|
|
1913
|
-
unit:
|
|
1917
|
+
unit: o.Pixel,
|
|
1914
1918
|
width: 1
|
|
1915
1919
|
}, this.cropSize = {
|
|
1916
1920
|
cropMode: "free",
|
|
@@ -1927,7 +1931,7 @@ let m = class extends q {
|
|
|
1927
1931
|
position: N.CenterCenter,
|
|
1928
1932
|
ratioHeight: 1,
|
|
1929
1933
|
ratioWidth: 1,
|
|
1930
|
-
unit:
|
|
1934
|
+
unit: o.Pixel,
|
|
1931
1935
|
width: 1,
|
|
1932
1936
|
x: 0,
|
|
1933
1937
|
y: 0
|
|
@@ -1956,8 +1960,8 @@ let m = class extends q {
|
|
|
1956
1960
|
*/
|
|
1957
1961
|
get lastAppliedCropUnit() {
|
|
1958
1962
|
return this.transformations.findLast(
|
|
1959
|
-
(e) => e.key ===
|
|
1960
|
-
)?.value.unit ??
|
|
1963
|
+
(e) => e.key === m.Crop
|
|
1964
|
+
)?.value.unit ?? o.Pixel;
|
|
1961
1965
|
}
|
|
1962
1966
|
/**
|
|
1963
1967
|
* The focus mode of the last applied crop transformation, for the no-asset case only.
|
|
@@ -1966,7 +1970,7 @@ let m = class extends q {
|
|
|
1966
1970
|
*/
|
|
1967
1971
|
get lastAppliedCropFocusMode() {
|
|
1968
1972
|
return this.transformations.findLast(
|
|
1969
|
-
(e) => e.key ===
|
|
1973
|
+
(e) => e.key === m.Crop
|
|
1970
1974
|
)?.value.focusMode ?? "manual";
|
|
1971
1975
|
}
|
|
1972
1976
|
/**
|
|
@@ -1976,7 +1980,7 @@ let m = class extends q {
|
|
|
1976
1980
|
*/
|
|
1977
1981
|
get lastAppliedCropPosition() {
|
|
1978
1982
|
return this.transformations.findLast(
|
|
1979
|
-
(e) => e.key ===
|
|
1983
|
+
(e) => e.key === m.Crop
|
|
1980
1984
|
)?.value.position ?? N.CenterCenter;
|
|
1981
1985
|
}
|
|
1982
1986
|
/**
|
|
@@ -1988,8 +1992,8 @@ let m = class extends q {
|
|
|
1988
1992
|
get disabledCropApply() {
|
|
1989
1993
|
if (!this.asset && this.cropSize.unit !== this.lastAppliedCropUnit)
|
|
1990
1994
|
return !1;
|
|
1991
|
-
if (this.cropSize.unit ===
|
|
1992
|
-
const e = this.lastCropSize[
|
|
1995
|
+
if (this.cropSize.unit === o.AspectRatio && !this.asset) {
|
|
1996
|
+
const e = this.lastCropSize[o.AspectRatio];
|
|
1993
1997
|
return this.cropSize.ratioWidth === e.width && this.cropSize.ratioHeight === e.height && this.cropSize.focusMode === this.lastAppliedCropFocusMode && this.cropSize.position === this.lastAppliedCropPosition;
|
|
1994
1998
|
}
|
|
1995
1999
|
if (!this.asset && this.cropSize.focusMode !== this.lastAppliedCropFocusMode || !this.asset && this.cropSize.position !== this.lastAppliedCropPosition)
|
|
@@ -2003,7 +2007,7 @@ let m = class extends q {
|
|
|
2003
2007
|
"y"
|
|
2004
2008
|
];
|
|
2005
2009
|
for (const e of t)
|
|
2006
|
-
if (this.cropSize[e] !== this.lastCropSize[
|
|
2010
|
+
if (this.cropSize[e] !== this.lastCropSize[o.Pixel][e])
|
|
2007
2011
|
return !1;
|
|
2008
2012
|
return !0;
|
|
2009
2013
|
}
|
|
@@ -2028,15 +2032,15 @@ let m = class extends q {
|
|
|
2028
2032
|
get lastCropSize() {
|
|
2029
2033
|
if (!this.asset) {
|
|
2030
2034
|
const e = this.transformations.findLast(
|
|
2031
|
-
(i) => i.key ===
|
|
2035
|
+
(i) => i.key === m.Crop
|
|
2032
2036
|
);
|
|
2033
|
-
if (e?.value.unit ===
|
|
2037
|
+
if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
|
|
2034
2038
|
return {
|
|
2035
|
-
[
|
|
2039
|
+
[o.AspectRatio]: {
|
|
2036
2040
|
height: e.value.ratioHeight,
|
|
2037
2041
|
percentageHeight: 100,
|
|
2038
2042
|
percentageWidth: 100,
|
|
2039
|
-
unit:
|
|
2043
|
+
unit: o.AspectRatio,
|
|
2040
2044
|
width: e.value.ratioWidth,
|
|
2041
2045
|
x: 0,
|
|
2042
2046
|
y: 0
|
|
@@ -2047,56 +2051,56 @@ let m = class extends q {
|
|
|
2047
2051
|
* `min: 1`) instead of 0x0, so switching the unit selector back to Pixel and
|
|
2048
2052
|
* clicking Apply immediately still commits a meaningful crop instead of a no-op.
|
|
2049
2053
|
*/
|
|
2050
|
-
[
|
|
2054
|
+
[o.Pixel]: {
|
|
2051
2055
|
height: 1,
|
|
2052
2056
|
percentageHeight: 100,
|
|
2053
2057
|
percentageWidth: 100,
|
|
2054
|
-
unit:
|
|
2058
|
+
unit: o.Pixel,
|
|
2055
2059
|
width: 1,
|
|
2056
2060
|
x: 0,
|
|
2057
2061
|
y: 0
|
|
2058
2062
|
}
|
|
2059
2063
|
};
|
|
2060
2064
|
if (e?.value.width && e?.value.height) {
|
|
2061
|
-
const { height: i, width: s, x: a = 0, y:
|
|
2065
|
+
const { height: i, width: s, x: a = 0, y: r = 0 } = e.value, n = ct(s, i);
|
|
2062
2066
|
return {
|
|
2063
|
-
[
|
|
2067
|
+
[o.AspectRatio]: {
|
|
2064
2068
|
height: n.height,
|
|
2065
2069
|
percentageHeight: 100,
|
|
2066
2070
|
percentageWidth: 100,
|
|
2067
|
-
unit:
|
|
2071
|
+
unit: o.AspectRatio,
|
|
2068
2072
|
width: n.width,
|
|
2069
2073
|
x: 0,
|
|
2070
2074
|
y: 0
|
|
2071
2075
|
},
|
|
2072
|
-
[
|
|
2076
|
+
[o.Pixel]: {
|
|
2073
2077
|
height: i,
|
|
2074
2078
|
percentageHeight: 100,
|
|
2075
2079
|
percentageWidth: 100,
|
|
2076
|
-
unit:
|
|
2080
|
+
unit: o.Pixel,
|
|
2077
2081
|
width: s,
|
|
2078
2082
|
x: a,
|
|
2079
|
-
y:
|
|
2083
|
+
y: r
|
|
2080
2084
|
}
|
|
2081
2085
|
};
|
|
2082
2086
|
}
|
|
2083
2087
|
}
|
|
2084
|
-
const t = this.lastImageSize.width && this.lastImageSize.height ?
|
|
2088
|
+
const t = this.lastImageSize.width && this.lastImageSize.height ? ct(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
|
|
2085
2089
|
return {
|
|
2086
|
-
[
|
|
2090
|
+
[o.AspectRatio]: {
|
|
2087
2091
|
height: t.height,
|
|
2088
2092
|
percentageHeight: 100,
|
|
2089
2093
|
percentageWidth: 100,
|
|
2090
|
-
unit:
|
|
2094
|
+
unit: o.AspectRatio,
|
|
2091
2095
|
width: t.width,
|
|
2092
2096
|
x: 0,
|
|
2093
2097
|
y: 0
|
|
2094
2098
|
},
|
|
2095
|
-
[
|
|
2099
|
+
[o.Pixel]: {
|
|
2096
2100
|
height: this.lastImageSize.height,
|
|
2097
2101
|
percentageHeight: 100,
|
|
2098
2102
|
percentageWidth: 100,
|
|
2099
|
-
unit:
|
|
2103
|
+
unit: o.Pixel,
|
|
2100
2104
|
width: this.lastImageSize.width,
|
|
2101
2105
|
x: 0,
|
|
2102
2106
|
y: 0
|
|
@@ -2111,48 +2115,48 @@ let m = class extends q {
|
|
|
2111
2115
|
get lastResizeSize() {
|
|
2112
2116
|
if (!this.asset) {
|
|
2113
2117
|
const e = this.transformations.findLast(
|
|
2114
|
-
(i) => i.key ===
|
|
2118
|
+
(i) => i.key === m.Resize
|
|
2115
2119
|
);
|
|
2116
|
-
if (e?.value.unit ===
|
|
2120
|
+
if (e?.value.unit === o.AspectRatio && e.value.ratioWidth && e.value.ratioHeight)
|
|
2117
2121
|
return {
|
|
2118
|
-
[
|
|
2122
|
+
[o.AspectRatio]: {
|
|
2119
2123
|
height: e.value.ratioHeight,
|
|
2120
|
-
unit:
|
|
2124
|
+
unit: o.AspectRatio,
|
|
2121
2125
|
width: e.value.ratioWidth
|
|
2122
2126
|
},
|
|
2123
2127
|
// See lastCropSize's equivalent branch for why this falls back to 1x1, not 0x0.
|
|
2124
|
-
[
|
|
2128
|
+
[o.Pixel]: {
|
|
2125
2129
|
height: 1,
|
|
2126
|
-
unit:
|
|
2130
|
+
unit: o.Pixel,
|
|
2127
2131
|
width: 1
|
|
2128
2132
|
}
|
|
2129
2133
|
};
|
|
2130
2134
|
if (e?.value.width && e?.value.height) {
|
|
2131
|
-
const { height: i, width: s } = e.value, a =
|
|
2135
|
+
const { height: i, width: s } = e.value, a = ct(s, i);
|
|
2132
2136
|
return {
|
|
2133
|
-
[
|
|
2137
|
+
[o.AspectRatio]: {
|
|
2134
2138
|
height: a.height,
|
|
2135
|
-
unit:
|
|
2139
|
+
unit: o.AspectRatio,
|
|
2136
2140
|
width: a.width
|
|
2137
2141
|
},
|
|
2138
|
-
[
|
|
2142
|
+
[o.Pixel]: {
|
|
2139
2143
|
height: i,
|
|
2140
|
-
unit:
|
|
2144
|
+
unit: o.Pixel,
|
|
2141
2145
|
width: s
|
|
2142
2146
|
}
|
|
2143
2147
|
};
|
|
2144
2148
|
}
|
|
2145
2149
|
}
|
|
2146
|
-
const t = this.lastImageSize.width && this.lastImageSize.height ?
|
|
2150
|
+
const t = this.lastImageSize.width && this.lastImageSize.height ? ct(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
|
|
2147
2151
|
return {
|
|
2148
|
-
[
|
|
2152
|
+
[o.AspectRatio]: {
|
|
2149
2153
|
height: t.height,
|
|
2150
|
-
unit:
|
|
2154
|
+
unit: o.AspectRatio,
|
|
2151
2155
|
width: t.width
|
|
2152
2156
|
},
|
|
2153
|
-
[
|
|
2157
|
+
[o.Pixel]: {
|
|
2154
2158
|
height: this.lastImageSize.height,
|
|
2155
|
-
unit:
|
|
2159
|
+
unit: o.Pixel,
|
|
2156
2160
|
width: this.lastImageSize.width
|
|
2157
2161
|
}
|
|
2158
2162
|
};
|
|
@@ -2167,14 +2171,14 @@ let m = class extends q {
|
|
|
2167
2171
|
*/
|
|
2168
2172
|
get lastRotation() {
|
|
2169
2173
|
return this.asset ? 0 : this.transformations.findLast(
|
|
2170
|
-
(e) => e.key ===
|
|
2174
|
+
(e) => e.key === m.Rotate
|
|
2171
2175
|
)?.value.rotation ?? 0;
|
|
2172
2176
|
}
|
|
2173
2177
|
/**
|
|
2174
2178
|
* Returns the transformation string for the asset link.
|
|
2175
2179
|
*/
|
|
2176
2180
|
get transformationString() {
|
|
2177
|
-
return
|
|
2181
|
+
return lt({
|
|
2178
2182
|
asset: this.asset,
|
|
2179
2183
|
baseUrl: "",
|
|
2180
2184
|
parameters: this.parameters,
|
|
@@ -2213,13 +2217,13 @@ let m = class extends q {
|
|
|
2213
2217
|
);
|
|
2214
2218
|
this.loading = !0, this.apiGetTransformAssetLink({
|
|
2215
2219
|
assetId: this.asset.id,
|
|
2216
|
-
extension:
|
|
2220
|
+
extension: u.getTransformExtension(this.asset.extension),
|
|
2217
2221
|
format: e?.proxyName ?? "",
|
|
2218
2222
|
siteUrl: this.baseUrl,
|
|
2219
2223
|
token: this.token,
|
|
2220
2224
|
transformations: this.transformationString
|
|
2221
2225
|
}).then((s) => {
|
|
2222
|
-
this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction ===
|
|
2226
|
+
this.loading = !1, !(!s?.relativePath || !this.selectedFormat) && (this.lastAction === m.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
|
|
2223
2227
|
height: s.height,
|
|
2224
2228
|
width: s.width
|
|
2225
2229
|
}, this.selectedFormat = {
|
|
@@ -2233,7 +2237,7 @@ let m = class extends q {
|
|
|
2233
2237
|
*/
|
|
2234
2238
|
});
|
|
2235
2239
|
});
|
|
2236
|
-
const i =
|
|
2240
|
+
const i = lt({
|
|
2237
2241
|
asset: this.asset,
|
|
2238
2242
|
baseUrl: "",
|
|
2239
2243
|
extension: this.selectedFormat.extension,
|
|
@@ -2266,7 +2270,7 @@ let m = class extends q {
|
|
|
2266
2270
|
async handleTransformationsChange() {
|
|
2267
2271
|
if (await this.updateComplete, !this.asset) {
|
|
2268
2272
|
this.emit("cx-asset-link-format-change", {
|
|
2269
|
-
detail:
|
|
2273
|
+
detail: lt({
|
|
2270
2274
|
asset: this.asset,
|
|
2271
2275
|
baseUrl: "",
|
|
2272
2276
|
options: {
|
|
@@ -2277,36 +2281,36 @@ let m = class extends q {
|
|
|
2277
2281
|
useSession: this.useSession
|
|
2278
2282
|
}).replace(/\/t\//g, "")
|
|
2279
2283
|
});
|
|
2280
|
-
const
|
|
2281
|
-
(c) => c.key ===
|
|
2284
|
+
const r = this.transformations.findLast(
|
|
2285
|
+
(c) => c.key === m.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
|
|
2282
2286
|
);
|
|
2283
|
-
if (
|
|
2284
|
-
const { focusMode: c, position:
|
|
2287
|
+
if (r?.value.unit === o.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
|
|
2288
|
+
const { focusMode: c, position: f, ratioHeight: y, ratioWidth: d } = r.value;
|
|
2285
2289
|
this.cropSize = {
|
|
2286
2290
|
...this.cropSize,
|
|
2287
2291
|
cropMode: "free",
|
|
2288
2292
|
focusMode: c ?? "manual",
|
|
2289
2293
|
percentageHeight: 100,
|
|
2290
2294
|
percentageWidth: 100,
|
|
2291
|
-
position:
|
|
2292
|
-
ratioHeight:
|
|
2295
|
+
position: f ?? N.CenterCenter,
|
|
2296
|
+
ratioHeight: y,
|
|
2293
2297
|
ratioWidth: d,
|
|
2294
|
-
unit:
|
|
2298
|
+
unit: o.AspectRatio
|
|
2295
2299
|
};
|
|
2296
|
-
} else if (
|
|
2297
|
-
const { focusMode: c, height:
|
|
2300
|
+
} else if (r) {
|
|
2301
|
+
const { focusMode: c, height: f, position: y, unit: d, width: S, x: R = 0, y: A = 0 } = r.value;
|
|
2298
2302
|
this.cropSize = {
|
|
2299
2303
|
...this.cropSize,
|
|
2300
2304
|
cropMode: "free",
|
|
2301
2305
|
focusMode: c ?? "manual",
|
|
2302
|
-
height:
|
|
2306
|
+
height: f,
|
|
2303
2307
|
percentageHeight: 100,
|
|
2304
2308
|
percentageWidth: 100,
|
|
2305
|
-
position:
|
|
2306
|
-
unit: d ??
|
|
2307
|
-
width:
|
|
2308
|
-
x:
|
|
2309
|
-
y:
|
|
2309
|
+
position: y ?? N.CenterCenter,
|
|
2310
|
+
unit: d ?? o.Pixel,
|
|
2311
|
+
width: S,
|
|
2312
|
+
x: R,
|
|
2313
|
+
y: A
|
|
2310
2314
|
};
|
|
2311
2315
|
} else
|
|
2312
2316
|
this.cropSize = {
|
|
@@ -2323,29 +2327,29 @@ let m = class extends q {
|
|
|
2323
2327
|
percentageHeight: 0,
|
|
2324
2328
|
percentageWidth: 0,
|
|
2325
2329
|
position: N.CenterCenter,
|
|
2326
|
-
unit:
|
|
2330
|
+
unit: o.Pixel,
|
|
2327
2331
|
width: 1,
|
|
2328
2332
|
x: 0,
|
|
2329
2333
|
y: 0
|
|
2330
2334
|
};
|
|
2331
2335
|
const n = this.transformations.findLast(
|
|
2332
|
-
(c) => c.key ===
|
|
2336
|
+
(c) => c.key === m.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
|
|
2333
2337
|
);
|
|
2334
|
-
if (n?.value.unit ===
|
|
2335
|
-
const { ratioHeight: c, ratioWidth:
|
|
2338
|
+
if (n?.value.unit === o.AspectRatio && n.value.ratioWidth && n.value.ratioHeight) {
|
|
2339
|
+
const { ratioHeight: c, ratioWidth: f } = n.value;
|
|
2336
2340
|
this.resizeSize = {
|
|
2337
2341
|
...this.resizeSize,
|
|
2338
2342
|
ratioHeight: c,
|
|
2339
|
-
ratioWidth:
|
|
2340
|
-
unit:
|
|
2343
|
+
ratioWidth: f,
|
|
2344
|
+
unit: o.AspectRatio
|
|
2341
2345
|
};
|
|
2342
2346
|
} else if (n) {
|
|
2343
|
-
const { height: c = 0, unit:
|
|
2347
|
+
const { height: c = 0, unit: f, width: y = 0 } = n.value;
|
|
2344
2348
|
this.resizeSize = {
|
|
2345
2349
|
...this.resizeSize,
|
|
2346
2350
|
height: c,
|
|
2347
|
-
unit:
|
|
2348
|
-
width:
|
|
2351
|
+
unit: f ?? o.Pixel,
|
|
2352
|
+
width: y
|
|
2349
2353
|
};
|
|
2350
2354
|
} else
|
|
2351
2355
|
this.resizeSize = {
|
|
@@ -2356,20 +2360,20 @@ let m = class extends q {
|
|
|
2356
2360
|
* Apply silently no-op.
|
|
2357
2361
|
*/
|
|
2358
2362
|
height: 1,
|
|
2359
|
-
unit:
|
|
2363
|
+
unit: o.Pixel,
|
|
2360
2364
|
width: 1
|
|
2361
2365
|
};
|
|
2362
2366
|
const l = this.transformations.findLast(
|
|
2363
|
-
(c) => c.key ===
|
|
2367
|
+
(c) => c.key === m.Rotate
|
|
2364
2368
|
);
|
|
2365
2369
|
this.rotation = l?.value.rotation ?? 0;
|
|
2366
|
-
const p = this.transformations.findLast((c) => c.key ===
|
|
2367
|
-
(c) => c.key ===
|
|
2370
|
+
const p = this.transformations.findLast((c) => c.key === m.Quality)?.value.quality ?? 100, x = this.transformations.some(
|
|
2371
|
+
(c) => c.key === m.Metadata
|
|
2368
2372
|
);
|
|
2369
|
-
this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata:
|
|
2373
|
+
this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: x, quality: p } : this.selectedFormat = {
|
|
2370
2374
|
extension: "",
|
|
2371
2375
|
height: 0,
|
|
2372
|
-
keepMetadata:
|
|
2376
|
+
keepMetadata: x,
|
|
2373
2377
|
quality: p,
|
|
2374
2378
|
rotation: 0,
|
|
2375
2379
|
url: "",
|
|
@@ -2382,12 +2386,12 @@ let m = class extends q {
|
|
|
2382
2386
|
if (!this.selectedFormat)
|
|
2383
2387
|
return;
|
|
2384
2388
|
const t = this.proxies?.find(
|
|
2385
|
-
(
|
|
2389
|
+
(r) => r.id === this.selectedProxy
|
|
2386
2390
|
);
|
|
2387
2391
|
this.loading = !0;
|
|
2388
2392
|
const e = await this.apiGetTransformAssetLink({
|
|
2389
2393
|
assetId: this.asset.id,
|
|
2390
|
-
extension:
|
|
2394
|
+
extension: u.getTransformExtension(this.selectedFormat.extension),
|
|
2391
2395
|
format: t?.proxyName ?? "",
|
|
2392
2396
|
siteUrl: this.baseUrl,
|
|
2393
2397
|
token: this.token,
|
|
@@ -2403,7 +2407,7 @@ let m = class extends q {
|
|
|
2403
2407
|
keepAspectRatio: !0,
|
|
2404
2408
|
ratioHeight: 1,
|
|
2405
2409
|
ratioWidth: 1,
|
|
2406
|
-
unit:
|
|
2410
|
+
unit: o.Pixel,
|
|
2407
2411
|
width: e.width
|
|
2408
2412
|
}, this.cropSize = {
|
|
2409
2413
|
cropMode: "free",
|
|
@@ -2415,15 +2419,15 @@ let m = class extends q {
|
|
|
2415
2419
|
position: N.CenterCenter,
|
|
2416
2420
|
ratioHeight: 1,
|
|
2417
2421
|
ratioWidth: 1,
|
|
2418
|
-
unit:
|
|
2422
|
+
unit: o.Pixel,
|
|
2419
2423
|
width: e.width,
|
|
2420
2424
|
x: 0,
|
|
2421
2425
|
y: 0
|
|
2422
|
-
}, this.lastAction ===
|
|
2426
|
+
}, this.lastAction === m.Rotate && (this.rotation = 0), this.lastAction = void 0;
|
|
2423
2427
|
const i = this.transformations.some(
|
|
2424
|
-
(
|
|
2428
|
+
(r) => r.key === m.Metadata
|
|
2425
2429
|
), s = this.transformations.findLast(
|
|
2426
|
-
(
|
|
2430
|
+
(r) => r.key === m.Quality
|
|
2427
2431
|
);
|
|
2428
2432
|
this.selectedFormat = {
|
|
2429
2433
|
...this.selectedFormat,
|
|
@@ -2437,7 +2441,7 @@ let m = class extends q {
|
|
|
2437
2441
|
* url: `${this.baseUrl}/${response.relativePath}`,
|
|
2438
2442
|
*/
|
|
2439
2443
|
};
|
|
2440
|
-
const a =
|
|
2444
|
+
const a = lt({
|
|
2441
2445
|
asset: this.asset,
|
|
2442
2446
|
baseUrl: "",
|
|
2443
2447
|
extension: this.selectedFormat.extension,
|
|
@@ -2469,7 +2473,7 @@ let m = class extends q {
|
|
|
2469
2473
|
width: Number.parseInt(this.asset.width, 10)
|
|
2470
2474
|
});
|
|
2471
2475
|
const t = this.transformations.findLast(
|
|
2472
|
-
(e) => e.key ===
|
|
2476
|
+
(e) => e.key === m.Quality
|
|
2473
2477
|
);
|
|
2474
2478
|
this.selectedFormat = {
|
|
2475
2479
|
extension: this.asset.extension,
|
|
@@ -2495,7 +2499,7 @@ let m = class extends q {
|
|
|
2495
2499
|
position: N.CenterCenter,
|
|
2496
2500
|
ratioHeight: 1,
|
|
2497
2501
|
ratioWidth: 1,
|
|
2498
|
-
unit:
|
|
2502
|
+
unit: o.Pixel,
|
|
2499
2503
|
width: this.defaultSize.width,
|
|
2500
2504
|
x: 0,
|
|
2501
2505
|
y: 0
|
|
@@ -2524,26 +2528,26 @@ let m = class extends q {
|
|
|
2524
2528
|
e.proxyName === "TRX" && (e.formatHeight = Number(this.asset.height), e.formatWidth = Number(this.asset.width));
|
|
2525
2529
|
const i = this.proxies?.find((s) => s.id === t);
|
|
2526
2530
|
i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
|
|
2527
|
-
if (s.key ===
|
|
2528
|
-
const a = s.value,
|
|
2531
|
+
if (s.key === m.Crop) {
|
|
2532
|
+
const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, p = a.y / i.formatHeight * e.formatHeight;
|
|
2529
2533
|
return {
|
|
2530
2534
|
...s,
|
|
2531
2535
|
value: {
|
|
2532
2536
|
...s.value,
|
|
2533
2537
|
height: n,
|
|
2534
|
-
width:
|
|
2538
|
+
width: r,
|
|
2535
2539
|
x: l,
|
|
2536
2540
|
y: p
|
|
2537
2541
|
}
|
|
2538
2542
|
};
|
|
2539
2543
|
}
|
|
2540
|
-
if (s.key ===
|
|
2541
|
-
const a = s.value,
|
|
2544
|
+
if (s.key === m.Resize) {
|
|
2545
|
+
const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight;
|
|
2542
2546
|
return {
|
|
2543
2547
|
...s,
|
|
2544
2548
|
value: {
|
|
2545
2549
|
height: n,
|
|
2546
|
-
width:
|
|
2550
|
+
width: r
|
|
2547
2551
|
}
|
|
2548
2552
|
};
|
|
2549
2553
|
}
|
|
@@ -2558,24 +2562,24 @@ let m = class extends q {
|
|
|
2558
2562
|
}, await this.updateComplete, this.cropSize = {
|
|
2559
2563
|
cropMode: "free",
|
|
2560
2564
|
focusMode: "manual",
|
|
2561
|
-
height: this.lastCropSize[
|
|
2565
|
+
height: this.lastCropSize[o.Pixel].height,
|
|
2562
2566
|
keepAspectRatio: !0,
|
|
2563
2567
|
percentageHeight: 100,
|
|
2564
2568
|
percentageWidth: 100,
|
|
2565
2569
|
position: N.CenterCenter,
|
|
2566
2570
|
ratioHeight: 1,
|
|
2567
2571
|
ratioWidth: 1,
|
|
2568
|
-
unit:
|
|
2569
|
-
width: this.lastCropSize[
|
|
2572
|
+
unit: o.Pixel,
|
|
2573
|
+
width: this.lastCropSize[o.Pixel].width,
|
|
2570
2574
|
x: 0,
|
|
2571
2575
|
y: 0
|
|
2572
2576
|
}, this.resizeSize = {
|
|
2573
|
-
height: this.lastResizeSize[
|
|
2577
|
+
height: this.lastResizeSize[o.Pixel].height,
|
|
2574
2578
|
keepAspectRatio: !0,
|
|
2575
2579
|
ratioHeight: 1,
|
|
2576
2580
|
ratioWidth: 1,
|
|
2577
|
-
unit:
|
|
2578
|
-
width: this.lastResizeSize[
|
|
2581
|
+
unit: o.Pixel,
|
|
2582
|
+
width: this.lastResizeSize[o.Pixel].width
|
|
2579
2583
|
};
|
|
2580
2584
|
}
|
|
2581
2585
|
handleLoadingChange() {
|
|
@@ -2595,12 +2599,12 @@ let m = class extends q {
|
|
|
2595
2599
|
}
|
|
2596
2600
|
handleActiveSettingChange() {
|
|
2597
2601
|
this.cropperElement && (this.resizeSize = {
|
|
2598
|
-
height: this.lastResizeSize[
|
|
2602
|
+
height: this.lastResizeSize[o.Pixel].height,
|
|
2599
2603
|
keepAspectRatio: !0,
|
|
2600
2604
|
ratioHeight: 1,
|
|
2601
2605
|
ratioWidth: 1,
|
|
2602
|
-
unit:
|
|
2603
|
-
width: this.lastResizeSize[
|
|
2606
|
+
unit: o.Pixel,
|
|
2607
|
+
width: this.lastResizeSize[o.Pixel].width
|
|
2604
2608
|
}, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop");
|
|
2605
2609
|
}
|
|
2606
2610
|
async handleRequestAutoCropSuggestion({
|
|
@@ -2609,33 +2613,33 @@ let m = class extends q {
|
|
|
2609
2613
|
height: i,
|
|
2610
2614
|
keepAspectRatio: s,
|
|
2611
2615
|
percentageHeight: a,
|
|
2612
|
-
percentageWidth:
|
|
2616
|
+
percentageWidth: r,
|
|
2613
2617
|
ratioHeight: n,
|
|
2614
2618
|
ratioWidth: l,
|
|
2615
2619
|
unit: p,
|
|
2616
|
-
useCropMode:
|
|
2620
|
+
useCropMode: x,
|
|
2617
2621
|
width: c
|
|
2618
2622
|
}) {
|
|
2619
2623
|
if (!this.selectedFormat?.url || e === "manual")
|
|
2620
2624
|
return;
|
|
2621
|
-
this.loading = !0, this.lastAction =
|
|
2622
|
-
const
|
|
2625
|
+
this.loading = !0, this.lastAction = m.Crop;
|
|
2626
|
+
const f = await this.apiGetCropFocusMode({
|
|
2623
2627
|
autoCropMode: e,
|
|
2624
2628
|
cropHeight: i,
|
|
2625
2629
|
cropWidth: c,
|
|
2626
2630
|
imageUrl: this.selectedFormat.url
|
|
2627
2631
|
});
|
|
2628
|
-
if (
|
|
2629
|
-
let
|
|
2630
|
-
i || (
|
|
2632
|
+
if (f) {
|
|
2633
|
+
let y = a, d = r;
|
|
2634
|
+
i || (y = f.height * 100 / this.selectedFormat.height), c || (d = f.width * 100 / this.selectedFormat.width), this.cropSize = {
|
|
2631
2635
|
...this.cropSize,
|
|
2632
|
-
height:
|
|
2633
|
-
percentageHeight:
|
|
2636
|
+
height: f.height,
|
|
2637
|
+
percentageHeight: y ?? this.cropSize.percentageHeight,
|
|
2634
2638
|
percentageWidth: d ?? this.cropSize.percentageWidth,
|
|
2635
|
-
width:
|
|
2636
|
-
x:
|
|
2637
|
-
y:
|
|
2638
|
-
...
|
|
2639
|
+
width: f.width,
|
|
2640
|
+
x: f.x * 100 / this.selectedFormat.width,
|
|
2641
|
+
y: f.y * 100 / this.selectedFormat.height,
|
|
2642
|
+
...x ? {
|
|
2639
2643
|
cropMode: e,
|
|
2640
2644
|
focusMode: "manual",
|
|
2641
2645
|
keepAspectRatio: !1
|
|
@@ -2656,32 +2660,32 @@ let m = class extends q {
|
|
|
2656
2660
|
height: i,
|
|
2657
2661
|
width: s,
|
|
2658
2662
|
x: a,
|
|
2659
|
-
y:
|
|
2663
|
+
y: r
|
|
2660
2664
|
} = e;
|
|
2661
2665
|
if (s === 0 || i === 0)
|
|
2662
2666
|
return;
|
|
2663
2667
|
const n = this.cropSize.percentageWidth !== s, l = this.cropSize.percentageHeight !== i;
|
|
2664
|
-
let p = this.cropSize.height,
|
|
2665
|
-
n && (
|
|
2668
|
+
let p = this.cropSize.height, x = this.cropSize.width;
|
|
2669
|
+
n && (x = Math.round(s * this.selectedFormat.width / 100)), l && (p = Math.round(
|
|
2666
2670
|
i * this.selectedFormat.height / 100
|
|
2667
2671
|
));
|
|
2668
2672
|
const c = this.cropSize.focusMode;
|
|
2669
2673
|
this.focusModes.find(
|
|
2670
|
-
(
|
|
2674
|
+
(y) => y.value === c
|
|
2671
2675
|
)?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
|
|
2672
2676
|
focusMode: c,
|
|
2673
2677
|
height: p,
|
|
2674
2678
|
percentageHeight: i,
|
|
2675
2679
|
percentageWidth: s,
|
|
2676
|
-
width:
|
|
2680
|
+
width: x
|
|
2677
2681
|
}) : this.cropSize = {
|
|
2678
2682
|
...this.cropSize,
|
|
2679
2683
|
height: p,
|
|
2680
2684
|
percentageHeight: i,
|
|
2681
2685
|
percentageWidth: s,
|
|
2682
|
-
width:
|
|
2686
|
+
width: x,
|
|
2683
2687
|
x: a,
|
|
2684
|
-
y:
|
|
2688
|
+
y: r
|
|
2685
2689
|
};
|
|
2686
2690
|
}
|
|
2687
2691
|
onCropDragStart() {
|
|
@@ -2710,12 +2714,12 @@ let m = class extends q {
|
|
|
2710
2714
|
* a proxy *id*, so the name has to be looked up in `proxies` rather than used directly.
|
|
2711
2715
|
*/
|
|
2712
2716
|
get autoResolvedProxyId() {
|
|
2713
|
-
const t = Bt(this.asset?.extension);
|
|
2717
|
+
const t = Bt(this.asset?.extension, this.asset?.size);
|
|
2714
2718
|
return this.proxies?.find((e) => e.proxyName === t)?.id ?? "";
|
|
2715
2719
|
}
|
|
2716
2720
|
onProxyChange(t) {
|
|
2717
2721
|
const e = t.detail;
|
|
2718
|
-
if (this.lastAction =
|
|
2722
|
+
if (this.lastAction = m.Proxy, e.autoFormat) {
|
|
2719
2723
|
this.autoFormat = !0;
|
|
2720
2724
|
const i = this.autoResolvedProxyId;
|
|
2721
2725
|
i && (this.selectedProxy = i);
|
|
@@ -2734,17 +2738,17 @@ let m = class extends q {
|
|
|
2734
2738
|
const s = this.focusModes.find(
|
|
2735
2739
|
(p) => p.value === this.cropSize.focusMode
|
|
2736
2740
|
)?.auto;
|
|
2737
|
-
let a = this.cropSize.keepAspectRatio,
|
|
2738
|
-
e === "free" ? (a = !1,
|
|
2741
|
+
let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, l = this.cropSize.y;
|
|
2742
|
+
e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (n = 0, l = 0), s ? await this.handleRequestAutoCropSuggestion({
|
|
2739
2743
|
cropMode: e,
|
|
2740
|
-
focusMode:
|
|
2744
|
+
focusMode: r,
|
|
2741
2745
|
height: this.cropSize.height,
|
|
2742
2746
|
keepAspectRatio: a,
|
|
2743
2747
|
width: this.cropSize.width
|
|
2744
2748
|
}) : this.cropSize = {
|
|
2745
2749
|
...this.cropSize,
|
|
2746
2750
|
cropMode: e,
|
|
2747
|
-
focusMode:
|
|
2751
|
+
focusMode: r,
|
|
2748
2752
|
keepAspectRatio: a,
|
|
2749
2753
|
x: n,
|
|
2750
2754
|
y: l
|
|
@@ -2770,52 +2774,52 @@ let m = class extends q {
|
|
|
2770
2774
|
}
|
|
2771
2775
|
async onCropChange(t) {
|
|
2772
2776
|
const e = this.cropSize.unit;
|
|
2773
|
-
if (t.detail.unit ===
|
|
2777
|
+
if (t.detail.unit === o.AspectRatio) {
|
|
2774
2778
|
const i = t.detail.width / t.detail.height, s = this.asset ? Math.min(
|
|
2775
2779
|
Math.max(Math.round(this.cropSize.height * i), 0),
|
|
2776
2780
|
this.resizeSize.width
|
|
2777
2781
|
) : 0, a = this.asset ? Math.min(
|
|
2778
2782
|
Math.max(Math.round(s / i), 0),
|
|
2779
2783
|
this.resizeSize.height
|
|
2780
|
-
) : 0,
|
|
2784
|
+
) : 0, r = this.asset ? a * 100 / this.selectedFormat.height : 100, n = this.asset ? s * 100 / this.selectedFormat.width : 100;
|
|
2781
2785
|
let l = this.cropSize.x, p = this.cropSize.y;
|
|
2782
|
-
l + n > 100 && (l = 100 - n), p +
|
|
2783
|
-
let
|
|
2786
|
+
l + n > 100 && (l = 100 - n), p + r > 100 && (p = 100 - r);
|
|
2787
|
+
let x = this.cropSize.cropMode;
|
|
2784
2788
|
this.cropModes.find(
|
|
2785
|
-
(
|
|
2786
|
-
)?.auto && (
|
|
2789
|
+
(f) => f.value === x
|
|
2790
|
+
)?.auto && (x = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
|
|
2787
2791
|
...this.cropSize,
|
|
2788
|
-
cropMode:
|
|
2792
|
+
cropMode: x,
|
|
2789
2793
|
height: a,
|
|
2790
2794
|
keepAspectRatio: t.detail.keepAspectRatio,
|
|
2791
|
-
percentageHeight:
|
|
2795
|
+
percentageHeight: r,
|
|
2792
2796
|
percentageWidth: n,
|
|
2793
2797
|
ratioHeight: t.detail.height,
|
|
2794
2798
|
ratioWidth: t.detail.width,
|
|
2795
|
-
unit:
|
|
2799
|
+
unit: o.AspectRatio,
|
|
2796
2800
|
width: s,
|
|
2797
2801
|
x: l,
|
|
2798
2802
|
y: p
|
|
2799
2803
|
};
|
|
2800
2804
|
} else {
|
|
2801
2805
|
const i = this.asset ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.asset ? t.detail.width * 100 / this.selectedFormat.width : 100;
|
|
2802
|
-
let a = this.cropSize.x,
|
|
2803
|
-
a + s > 100 && (a = 100 - s),
|
|
2806
|
+
let a = this.cropSize.x, r = this.cropSize.y;
|
|
2807
|
+
a + s > 100 && (a = 100 - s), r + i > 100 && (r = 100 - i);
|
|
2804
2808
|
let n = this.cropSize.cropMode;
|
|
2805
2809
|
const l = this.cropModes.find(
|
|
2806
2810
|
(p) => p.value === n
|
|
2807
2811
|
)?.auto;
|
|
2808
|
-
(t.detail.breakAspectRatio || l) && (n = "free"), t.detail.silent ? (this.cropSize.cropMode = n, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit =
|
|
2812
|
+
(t.detail.breakAspectRatio || l) && (n = "free"), t.detail.silent ? (this.cropSize.cropMode = n, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = r) : this.cropSize = {
|
|
2809
2813
|
...this.cropSize,
|
|
2810
2814
|
cropMode: n,
|
|
2811
2815
|
height: t.detail.height,
|
|
2812
2816
|
keepAspectRatio: t.detail.keepAspectRatio,
|
|
2813
2817
|
percentageHeight: i,
|
|
2814
2818
|
percentageWidth: s,
|
|
2815
|
-
unit:
|
|
2819
|
+
unit: o.Pixel,
|
|
2816
2820
|
width: t.detail.width,
|
|
2817
2821
|
x: a,
|
|
2818
|
-
y:
|
|
2822
|
+
y: r
|
|
2819
2823
|
};
|
|
2820
2824
|
}
|
|
2821
2825
|
e !== this.cropSize.unit && (this.cropSize = {
|
|
@@ -2833,42 +2837,42 @@ let m = class extends q {
|
|
|
2833
2837
|
});
|
|
2834
2838
|
}
|
|
2835
2839
|
onCropApply(t) {
|
|
2836
|
-
if (this.clearResetSnapshot(), this.lastAction =
|
|
2840
|
+
if (this.clearResetSnapshot(), this.lastAction = m.Crop, !this.asset) {
|
|
2837
2841
|
const {
|
|
2838
2842
|
focusMode: l,
|
|
2839
2843
|
height: p,
|
|
2840
|
-
position:
|
|
2844
|
+
position: x,
|
|
2841
2845
|
ratioHeight: c,
|
|
2842
|
-
ratioWidth:
|
|
2843
|
-
unit:
|
|
2846
|
+
ratioWidth: f,
|
|
2847
|
+
unit: y,
|
|
2844
2848
|
width: d,
|
|
2845
|
-
x:
|
|
2846
|
-
y:
|
|
2847
|
-
} = this.cropSize,
|
|
2848
|
-
(
|
|
2849
|
+
x: S,
|
|
2850
|
+
y: R
|
|
2851
|
+
} = this.cropSize, A = this.focusModes.find(
|
|
2852
|
+
(F) => F.value === l
|
|
2849
2853
|
)?.auto ?? !1;
|
|
2850
|
-
if (
|
|
2851
|
-
|
|
2852
|
-
key:
|
|
2854
|
+
if (y === o.AspectRatio) {
|
|
2855
|
+
f && c && this.upsertTransformation({
|
|
2856
|
+
key: m.Crop,
|
|
2853
2857
|
value: {
|
|
2854
2858
|
focusMode: l,
|
|
2855
|
-
isFocusModeAuto:
|
|
2856
|
-
position:
|
|
2859
|
+
isFocusModeAuto: A,
|
|
2860
|
+
position: x,
|
|
2857
2861
|
ratioHeight: c,
|
|
2858
|
-
ratioWidth:
|
|
2859
|
-
unit:
|
|
2862
|
+
ratioWidth: f,
|
|
2863
|
+
unit: y
|
|
2860
2864
|
}
|
|
2861
2865
|
});
|
|
2862
2866
|
return;
|
|
2863
2867
|
}
|
|
2864
2868
|
(p || d) && this.upsertTransformation({
|
|
2865
|
-
key:
|
|
2869
|
+
key: m.Crop,
|
|
2866
2870
|
value: {
|
|
2867
2871
|
focusMode: l,
|
|
2868
2872
|
height: p,
|
|
2869
|
-
isFocusModeAuto:
|
|
2870
|
-
position:
|
|
2871
|
-
unit:
|
|
2873
|
+
isFocusModeAuto: A,
|
|
2874
|
+
position: x,
|
|
2875
|
+
unit: y,
|
|
2872
2876
|
width: d,
|
|
2873
2877
|
/**
|
|
2874
2878
|
* Without an asset there is no cropper to drag, so x/y are always the 0
|
|
@@ -2877,8 +2881,8 @@ let m = class extends q {
|
|
|
2877
2881
|
* string) so `hasManualXY` in buildTransformationString doesn't spuriously
|
|
2878
2882
|
* suppress the focus mode / position `c_g_` gravity value.
|
|
2879
2883
|
*/
|
|
2880
|
-
x: Number.isFinite(
|
|
2881
|
-
y: Number.isFinite(
|
|
2884
|
+
x: Number.isFinite(S) && S !== 0 ? S : void 0,
|
|
2885
|
+
y: Number.isFinite(R) && R !== 0 ? R : void 0
|
|
2882
2886
|
}
|
|
2883
2887
|
});
|
|
2884
2888
|
return;
|
|
@@ -2886,18 +2890,18 @@ let m = class extends q {
|
|
|
2886
2890
|
const { height: e, mode: i, unit: s, width: a } = t.detail;
|
|
2887
2891
|
if (!this.cropperElement || !this.selectedFormat)
|
|
2888
2892
|
return;
|
|
2889
|
-
const
|
|
2890
|
-
(l) => l.value ===
|
|
2893
|
+
const r = this.cropSize.focusMode, n = this.focusModes.find(
|
|
2894
|
+
(l) => l.value === r
|
|
2891
2895
|
)?.auto ?? !1;
|
|
2892
2896
|
if (e && a && s) {
|
|
2893
2897
|
let l = a, p = e;
|
|
2894
|
-
if (s ===
|
|
2898
|
+
if (s === o.AspectRatio && (l = this.cropSize.percentageWidth * this.selectedFormat.width / 100, p = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
|
|
2895
2899
|
this.transformations = [
|
|
2896
2900
|
...this.transformations,
|
|
2897
2901
|
{
|
|
2898
|
-
key:
|
|
2902
|
+
key: m.Crop,
|
|
2899
2903
|
value: {
|
|
2900
|
-
focusMode:
|
|
2904
|
+
focusMode: r,
|
|
2901
2905
|
height: p,
|
|
2902
2906
|
isFocusModeAuto: n,
|
|
2903
2907
|
mode: i,
|
|
@@ -2906,18 +2910,18 @@ let m = class extends q {
|
|
|
2906
2910
|
}
|
|
2907
2911
|
];
|
|
2908
2912
|
else {
|
|
2909
|
-
const
|
|
2913
|
+
const x = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
|
|
2910
2914
|
this.transformations = [
|
|
2911
2915
|
...this.transformations,
|
|
2912
2916
|
{
|
|
2913
|
-
key:
|
|
2917
|
+
key: m.Crop,
|
|
2914
2918
|
value: {
|
|
2915
|
-
focusMode:
|
|
2919
|
+
focusMode: r,
|
|
2916
2920
|
height: p,
|
|
2917
2921
|
isFocusModeAuto: n,
|
|
2918
2922
|
unit: s,
|
|
2919
2923
|
width: l,
|
|
2920
|
-
x
|
|
2924
|
+
x,
|
|
2921
2925
|
y: c
|
|
2922
2926
|
}
|
|
2923
2927
|
}
|
|
@@ -2926,9 +2930,9 @@ let m = class extends q {
|
|
|
2926
2930
|
} else i && (this.transformations = [
|
|
2927
2931
|
...this.transformations,
|
|
2928
2932
|
{
|
|
2929
|
-
key:
|
|
2933
|
+
key: m.Crop,
|
|
2930
2934
|
value: {
|
|
2931
|
-
focusMode:
|
|
2935
|
+
focusMode: r,
|
|
2932
2936
|
isFocusModeAuto: n,
|
|
2933
2937
|
mode: i
|
|
2934
2938
|
}
|
|
@@ -2936,9 +2940,9 @@ let m = class extends q {
|
|
|
2936
2940
|
]);
|
|
2937
2941
|
}
|
|
2938
2942
|
onResizeChange(t) {
|
|
2939
|
-
if (t.detail.unit ===
|
|
2943
|
+
if (t.detail.unit === o.AspectRatio) {
|
|
2940
2944
|
const e = t.detail.width / t.detail.height, i = Math.max(
|
|
2941
|
-
Math.round(this.lastResizeSize[
|
|
2945
|
+
Math.round(this.lastResizeSize[o.Pixel].height * e),
|
|
2942
2946
|
0
|
|
2943
2947
|
), s = Math.max(Math.round(i / e), 0);
|
|
2944
2948
|
this.resizeSize = {
|
|
@@ -2961,21 +2965,21 @@ let m = class extends q {
|
|
|
2961
2965
|
}
|
|
2962
2966
|
onResizeApply(t) {
|
|
2963
2967
|
const { height: e, unit: i, width: s } = t.detail;
|
|
2964
|
-
if (this.clearResetSnapshot(), this.lastAction =
|
|
2965
|
-
if (i ===
|
|
2966
|
-
const { ratioHeight: p, ratioWidth:
|
|
2967
|
-
|
|
2968
|
-
key:
|
|
2968
|
+
if (this.clearResetSnapshot(), this.lastAction = m.Resize, !this.asset) {
|
|
2969
|
+
if (i === o.AspectRatio) {
|
|
2970
|
+
const { ratioHeight: p, ratioWidth: x } = this.resizeSize;
|
|
2971
|
+
x && p && this.upsertTransformation({
|
|
2972
|
+
key: m.Resize,
|
|
2969
2973
|
value: {
|
|
2970
2974
|
ratioHeight: p,
|
|
2971
|
-
ratioWidth:
|
|
2975
|
+
ratioWidth: x,
|
|
2972
2976
|
unit: i
|
|
2973
2977
|
}
|
|
2974
2978
|
});
|
|
2975
2979
|
return;
|
|
2976
2980
|
}
|
|
2977
2981
|
(e || s) && this.upsertTransformation({
|
|
2978
|
-
key:
|
|
2982
|
+
key: m.Resize,
|
|
2979
2983
|
value: {
|
|
2980
2984
|
height: e,
|
|
2981
2985
|
unit: i,
|
|
@@ -2986,12 +2990,12 @@ let m = class extends q {
|
|
|
2986
2990
|
}
|
|
2987
2991
|
if (!this.selectedFormat)
|
|
2988
2992
|
return;
|
|
2989
|
-
const a = this.selectedFormat.width || this.defaultSize.width,
|
|
2993
|
+
const a = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
|
|
2990
2994
|
let n = s, l = e;
|
|
2991
|
-
this.resizeSize.unit !== i ? (n = a, l =
|
|
2995
|
+
this.resizeSize.unit !== i ? (n = a, l = r) : i === o.AspectRatio && (n = Math.round(s / e * r), l = r), this.transformations = [
|
|
2992
2996
|
...this.transformations,
|
|
2993
2997
|
{
|
|
2994
|
-
key:
|
|
2998
|
+
key: m.Resize,
|
|
2995
2999
|
value: {
|
|
2996
3000
|
height: l,
|
|
2997
3001
|
unit: i,
|
|
@@ -3005,21 +3009,21 @@ let m = class extends q {
|
|
|
3005
3009
|
}
|
|
3006
3010
|
onRotationApply(t) {
|
|
3007
3011
|
const e = t.detail;
|
|
3008
|
-
if (this.clearResetSnapshot(), this.lastAction =
|
|
3012
|
+
if (this.clearResetSnapshot(), this.lastAction = m.Rotate, !this.asset) {
|
|
3009
3013
|
e ? this.upsertTransformation({
|
|
3010
|
-
key:
|
|
3014
|
+
key: m.Rotate,
|
|
3011
3015
|
value: {
|
|
3012
3016
|
rotation: e
|
|
3013
3017
|
}
|
|
3014
3018
|
}) : this.transformations = this.transformations.filter(
|
|
3015
|
-
(i) => i.key !==
|
|
3019
|
+
(i) => i.key !== m.Rotate
|
|
3016
3020
|
);
|
|
3017
3021
|
return;
|
|
3018
3022
|
}
|
|
3019
3023
|
this.selectedFormat && (this.transformations = [
|
|
3020
3024
|
...this.transformations,
|
|
3021
3025
|
{
|
|
3022
|
-
key:
|
|
3026
|
+
key: m.Rotate,
|
|
3023
3027
|
value: {
|
|
3024
3028
|
rotation: e
|
|
3025
3029
|
}
|
|
@@ -3028,9 +3032,9 @@ let m = class extends q {
|
|
|
3028
3032
|
}
|
|
3029
3033
|
onQualityChange(t) {
|
|
3030
3034
|
const e = t.detail;
|
|
3031
|
-
this.selectedFormat && (this.selectedFormat.quality = e), this.clearResetSnapshot(), this.lastAction =
|
|
3035
|
+
this.selectedFormat && (this.selectedFormat.quality = e), this.clearResetSnapshot(), this.lastAction = m.Quality;
|
|
3032
3036
|
const i = {
|
|
3033
|
-
key:
|
|
3037
|
+
key: m.Quality,
|
|
3034
3038
|
value: {
|
|
3035
3039
|
quality: e
|
|
3036
3040
|
}
|
|
@@ -3044,22 +3048,22 @@ let m = class extends q {
|
|
|
3044
3048
|
keepMetadata: e
|
|
3045
3049
|
}), !this.asset) {
|
|
3046
3050
|
e ? this.upsertTransformation({
|
|
3047
|
-
key:
|
|
3051
|
+
key: m.Metadata,
|
|
3048
3052
|
value: {
|
|
3049
3053
|
keepMetadata: e
|
|
3050
3054
|
}
|
|
3051
3055
|
}) : this.transformations = this.transformations.filter(
|
|
3052
|
-
(i) => i.key !==
|
|
3056
|
+
(i) => i.key !== m.Metadata
|
|
3053
3057
|
);
|
|
3054
3058
|
return;
|
|
3055
3059
|
}
|
|
3056
3060
|
e ? this.upsertTransformation({
|
|
3057
|
-
key:
|
|
3061
|
+
key: m.Metadata,
|
|
3058
3062
|
value: {
|
|
3059
3063
|
keepMetadata: e
|
|
3060
3064
|
}
|
|
3061
3065
|
}) : this.transformations = this.transformations.filter(
|
|
3062
|
-
(i) => i.key !==
|
|
3066
|
+
(i) => i.key !== m.Metadata
|
|
3063
3067
|
);
|
|
3064
3068
|
}
|
|
3065
3069
|
onExtensionChange(t) {
|
|
@@ -3071,7 +3075,7 @@ let m = class extends q {
|
|
|
3071
3075
|
}
|
|
3072
3076
|
syncQuality() {
|
|
3073
3077
|
const t = this.transformations.findLast(
|
|
3074
|
-
(e) => e.key ===
|
|
3078
|
+
(e) => e.key === m.Quality
|
|
3075
3079
|
)?.value?.quality;
|
|
3076
3080
|
this.selectedFormat && (this.selectedFormat = {
|
|
3077
3081
|
...this.selectedFormat,
|
|
@@ -3109,198 +3113,198 @@ let m = class extends q {
|
|
|
3109
3113
|
this.transformations = [], this.frozenIndex = -1, this.syncQuality();
|
|
3110
3114
|
}
|
|
3111
3115
|
render() {
|
|
3112
|
-
return C`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${
|
|
3116
|
+
return C`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${I(
|
|
3113
3117
|
!this.hideHeader,
|
|
3114
|
-
() => C`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${
|
|
3118
|
+
() => C`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${I(this.canReset, () => C`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${!this.hasResettableState} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
|
|
3115
3119
|
() => Ut
|
|
3116
3120
|
)}
|
|
3117
|
-
${
|
|
3121
|
+
${I(
|
|
3118
3122
|
!this.noFormat,
|
|
3119
|
-
() => C`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} ?auto-format=${this.autoFormat} ?can-auto-format=${this.canAutoFormat} .items=${this.formats} ?loading=${this.loading && this.lastAction ===
|
|
3123
|
+
() => C`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} ?auto-format=${this.autoFormat} ?can-auto-format=${this.canAutoFormat} .items=${this.formats} ?loading=${this.loading && this.lastAction === m.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
|
|
3120
3124
|
)}
|
|
3121
|
-
${
|
|
3125
|
+
${I(
|
|
3122
3126
|
!this.noCrop,
|
|
3123
|
-
() => C`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction ===
|
|
3127
|
+
() => C`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === m.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} ?show-position-picker=${!this.asset} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} position=${this.cropSize.position} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-position-change=${this.onCropPositionChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
|
|
3124
3128
|
)}
|
|
3125
|
-
${
|
|
3129
|
+
${I(
|
|
3126
3130
|
!this.noResize,
|
|
3127
|
-
() => C`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction ===
|
|
3131
|
+
() => C`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === m.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
|
|
3128
3132
|
)}
|
|
3129
|
-
${
|
|
3133
|
+
${I(
|
|
3130
3134
|
!this.noRotate,
|
|
3131
|
-
() => C`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction ===
|
|
3132
|
-
)}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction ===
|
|
3135
|
+
() => C`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
|
|
3136
|
+
)}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${I(
|
|
3133
3137
|
!this.noMetadata,
|
|
3134
3138
|
() => C`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
|
|
3135
3139
|
)}
|
|
3136
|
-
${
|
|
3140
|
+
${I(
|
|
3137
3141
|
this.useCustomExtension,
|
|
3138
3142
|
() => C`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`
|
|
3139
3143
|
)}</div>`;
|
|
3140
3144
|
}
|
|
3141
3145
|
};
|
|
3142
|
-
|
|
3143
|
-
|
|
3146
|
+
u.styles = [Q, Fe];
|
|
3147
|
+
u.dependencies = {
|
|
3144
3148
|
"cx-asset-link-format-crop": v,
|
|
3145
|
-
"cx-asset-link-format-extension":
|
|
3146
|
-
"cx-asset-link-format-metadata":
|
|
3147
|
-
"cx-asset-link-format-proxy":
|
|
3148
|
-
"cx-asset-link-format-quality":
|
|
3149
|
-
"cx-asset-link-format-resize":
|
|
3149
|
+
"cx-asset-link-format-extension": Y,
|
|
3150
|
+
"cx-asset-link-format-metadata": U,
|
|
3151
|
+
"cx-asset-link-format-proxy": E,
|
|
3152
|
+
"cx-asset-link-format-quality": W,
|
|
3153
|
+
"cx-asset-link-format-resize": b,
|
|
3150
3154
|
"cx-asset-link-format-rotation": H,
|
|
3151
|
-
"cx-button":
|
|
3152
|
-
"cx-space":
|
|
3153
|
-
"cx-typography":
|
|
3155
|
+
"cx-button": J,
|
|
3156
|
+
"cx-space": B,
|
|
3157
|
+
"cx-typography": q
|
|
3154
3158
|
};
|
|
3155
|
-
|
|
3159
|
+
g([
|
|
3156
3160
|
h({ attribute: "base-url", type: String })
|
|
3157
|
-
],
|
|
3158
|
-
|
|
3161
|
+
], u.prototype, "baseUrl", 2);
|
|
3162
|
+
g([
|
|
3159
3163
|
h({ attribute: "token", type: String })
|
|
3160
|
-
],
|
|
3161
|
-
|
|
3164
|
+
], u.prototype, "token", 2);
|
|
3165
|
+
g([
|
|
3162
3166
|
h({ reflect: !1, type: Object })
|
|
3163
|
-
],
|
|
3164
|
-
|
|
3167
|
+
], u.prototype, "asset", 2);
|
|
3168
|
+
g([
|
|
3165
3169
|
h({ attribute: "crop-modes", reflect: !1, type: Array })
|
|
3166
|
-
],
|
|
3167
|
-
|
|
3170
|
+
], u.prototype, "cropModes", 2);
|
|
3171
|
+
g([
|
|
3168
3172
|
h({ attribute: "focus-modes", reflect: !1, type: Object })
|
|
3169
|
-
],
|
|
3170
|
-
|
|
3173
|
+
], u.prototype, "focusModes", 2);
|
|
3174
|
+
g([
|
|
3171
3175
|
h({ reflect: !1, type: Array })
|
|
3172
|
-
],
|
|
3173
|
-
|
|
3176
|
+
], u.prototype, "extensions", 2);
|
|
3177
|
+
g([
|
|
3174
3178
|
h({ reflect: !1, type: Array })
|
|
3175
|
-
],
|
|
3176
|
-
|
|
3179
|
+
], u.prototype, "proxies", 2);
|
|
3180
|
+
g([
|
|
3177
3181
|
h({ attribute: "for-cropper", reflect: !0, type: String })
|
|
3178
|
-
],
|
|
3179
|
-
|
|
3182
|
+
], u.prototype, "forCropper", 2);
|
|
3183
|
+
g([
|
|
3180
3184
|
h({ attribute: "use-session", reflect: !0, type: String })
|
|
3181
|
-
],
|
|
3182
|
-
|
|
3185
|
+
], u.prototype, "useSession", 2);
|
|
3186
|
+
g([
|
|
3183
3187
|
h({ reflect: !1, type: Array })
|
|
3184
|
-
],
|
|
3185
|
-
|
|
3188
|
+
], u.prototype, "transformations", 2);
|
|
3189
|
+
g([
|
|
3186
3190
|
h({ attribute: "selected-proxy", reflect: !0, type: String })
|
|
3187
|
-
],
|
|
3188
|
-
|
|
3191
|
+
], u.prototype, "selectedProxy", 2);
|
|
3192
|
+
g([
|
|
3189
3193
|
h({ attribute: "default-proxy", reflect: !0, type: String })
|
|
3190
|
-
],
|
|
3191
|
-
|
|
3194
|
+
], u.prototype, "defaultProxy", 2);
|
|
3195
|
+
g([
|
|
3192
3196
|
h({ attribute: "can-auto-format", reflect: !0, type: Boolean })
|
|
3193
|
-
],
|
|
3194
|
-
|
|
3197
|
+
], u.prototype, "canAutoFormat", 2);
|
|
3198
|
+
g([
|
|
3195
3199
|
h({ attribute: "auto-format", reflect: !0, type: Boolean })
|
|
3196
|
-
],
|
|
3197
|
-
|
|
3200
|
+
], u.prototype, "autoFormat", 2);
|
|
3201
|
+
g([
|
|
3198
3202
|
h({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
|
|
3199
|
-
],
|
|
3200
|
-
|
|
3203
|
+
], u.prototype, "useCustomExtension", 2);
|
|
3204
|
+
g([
|
|
3201
3205
|
h({ attribute: "no-metadata", reflect: !0, type: Boolean })
|
|
3202
|
-
],
|
|
3203
|
-
|
|
3206
|
+
], u.prototype, "noMetadata", 2);
|
|
3207
|
+
g([
|
|
3204
3208
|
h({ attribute: "no-format", reflect: !0, type: Boolean })
|
|
3205
|
-
],
|
|
3206
|
-
|
|
3209
|
+
], u.prototype, "noFormat", 2);
|
|
3210
|
+
g([
|
|
3207
3211
|
h({ attribute: "no-crop", reflect: !0, type: Boolean })
|
|
3208
|
-
],
|
|
3209
|
-
|
|
3212
|
+
], u.prototype, "noCrop", 2);
|
|
3213
|
+
g([
|
|
3210
3214
|
h({ attribute: "no-resize", reflect: !0, type: Boolean })
|
|
3211
|
-
],
|
|
3212
|
-
|
|
3215
|
+
], u.prototype, "noResize", 2);
|
|
3216
|
+
g([
|
|
3213
3217
|
h({ attribute: "no-rotate", reflect: !0, type: Boolean })
|
|
3214
|
-
],
|
|
3215
|
-
|
|
3218
|
+
], u.prototype, "noRotate", 2);
|
|
3219
|
+
g([
|
|
3216
3220
|
h({ attribute: "last-image-size", reflect: !1, type: Object })
|
|
3217
|
-
],
|
|
3218
|
-
|
|
3221
|
+
], u.prototype, "lastImageSize", 2);
|
|
3222
|
+
g([
|
|
3219
3223
|
h({ attribute: "hide-header", reflect: !1, type: Boolean })
|
|
3220
|
-
],
|
|
3221
|
-
|
|
3224
|
+
], u.prototype, "hideHeader", 2);
|
|
3225
|
+
g([
|
|
3222
3226
|
h({ attribute: "can-reset", type: Boolean })
|
|
3223
|
-
],
|
|
3224
|
-
|
|
3227
|
+
], u.prototype, "canReset", 2);
|
|
3228
|
+
g([
|
|
3225
3229
|
h({ attribute: !1, reflect: !1, type: Object })
|
|
3226
|
-
],
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
],
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
],
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
],
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
],
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
],
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
],
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
],
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
],
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
],
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
],
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
],
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
],
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
],
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
],
|
|
3269
|
-
|
|
3230
|
+
], u.prototype, "queryElement", 2);
|
|
3231
|
+
g([
|
|
3232
|
+
k()
|
|
3233
|
+
], u.prototype, "activeSetting", 2);
|
|
3234
|
+
g([
|
|
3235
|
+
k()
|
|
3236
|
+
], u.prototype, "selectedFormat", 2);
|
|
3237
|
+
g([
|
|
3238
|
+
k()
|
|
3239
|
+
], u.prototype, "resizeSize", 2);
|
|
3240
|
+
g([
|
|
3241
|
+
k()
|
|
3242
|
+
], u.prototype, "cropSize", 2);
|
|
3243
|
+
g([
|
|
3244
|
+
k()
|
|
3245
|
+
], u.prototype, "rotation", 2);
|
|
3246
|
+
g([
|
|
3247
|
+
k()
|
|
3248
|
+
], u.prototype, "defaultSize", 2);
|
|
3249
|
+
g([
|
|
3250
|
+
k()
|
|
3251
|
+
], u.prototype, "cropperElement", 2);
|
|
3252
|
+
g([
|
|
3253
|
+
k()
|
|
3254
|
+
], u.prototype, "parameters", 2);
|
|
3255
|
+
g([
|
|
3256
|
+
k()
|
|
3257
|
+
], u.prototype, "loading", 2);
|
|
3258
|
+
g([
|
|
3259
|
+
k()
|
|
3260
|
+
], u.prototype, "lastAction", 2);
|
|
3261
|
+
g([
|
|
3262
|
+
k()
|
|
3263
|
+
], u.prototype, "frozenIndex", 2);
|
|
3264
|
+
g([
|
|
3265
|
+
k()
|
|
3266
|
+
], u.prototype, "preResetTransformations", 2);
|
|
3267
|
+
g([
|
|
3268
|
+
k()
|
|
3269
|
+
], u.prototype, "preResetAutoFormat", 2);
|
|
3270
|
+
g([
|
|
3271
|
+
k()
|
|
3272
|
+
], u.prototype, "preResetSelectedProxy", 2);
|
|
3273
|
+
g([
|
|
3270
3274
|
P("transformations")
|
|
3271
|
-
],
|
|
3272
|
-
|
|
3275
|
+
], u.prototype, "handleTransformationsChange", 1);
|
|
3276
|
+
g([
|
|
3273
3277
|
P("selectedProxy")
|
|
3274
|
-
],
|
|
3275
|
-
|
|
3278
|
+
], u.prototype, "handleSelectedProxyChange", 1);
|
|
3279
|
+
g([
|
|
3276
3280
|
P("loading")
|
|
3277
|
-
],
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
],
|
|
3281
|
+
], u.prototype, "handleLoadingChange", 1);
|
|
3282
|
+
u = g([
|
|
3283
|
+
X("cx-asset-link-format")
|
|
3284
|
+
], u);
|
|
3281
3285
|
export {
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3286
|
+
u as C,
|
|
3287
|
+
Vi as F,
|
|
3288
|
+
_t as M,
|
|
3285
3289
|
we as a,
|
|
3286
3290
|
Xt as b,
|
|
3287
|
-
|
|
3288
|
-
|
|
3291
|
+
nt as c,
|
|
3292
|
+
gt as d,
|
|
3289
3293
|
Vt as e,
|
|
3290
3294
|
fe as f,
|
|
3291
3295
|
Gt as g,
|
|
3292
|
-
|
|
3296
|
+
qi as h,
|
|
3293
3297
|
Zt as i,
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
+
ji as j,
|
|
3299
|
+
Bi as k,
|
|
3300
|
+
dt as l,
|
|
3301
|
+
ut as m,
|
|
3298
3302
|
Ht as n,
|
|
3299
|
-
|
|
3300
|
-
|
|
3303
|
+
mt as o,
|
|
3304
|
+
ft as p,
|
|
3301
3305
|
Wt as q,
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3306
|
+
Oi as r,
|
|
3307
|
+
Li as s,
|
|
3308
|
+
Ui as t,
|
|
3305
3309
|
le as u
|
|
3306
3310
|
};
|