@orangelogic/design-system 4.28.0 → 4.29.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.BEJh0Fqs.js → asset-link-format.DLmg4fTR.js} +387 -381
- package/library/chunks/{audio.BZJvTs_4.js → audio.BVQX3_8E.js} +6 -3
- package/library/chunks/{bicolor-picker.C0PxxFzf.js → bicolor-picker.C9XSuhnX.js} +1 -1
- package/library/chunks/{block-width.CU2PEBrV.js → block-width.rWsXJkoW.js} +553 -529
- package/library/chunks/{border-input-group.w-T10AEY.js → border-input-group.DESRXoh1.js} +1 -1
- package/library/chunks/{color-picker.CDUhOLEs.js → color-picker.DUEghDon.js} +2 -2
- package/library/chunks/{color-swatch-group.DUskDB_p.js → color-swatch-group.Cf9NcMte.js} +45 -45
- package/library/chunks/{config-manager.C9OGzzbe.js → config-manager.FRWbPVTc.js} +17 -17
- package/library/chunks/{configs-controller.D3dYYbfz.js → configs-controller.R67BMWep.js} +26 -26
- package/library/chunks/{document-viewer.C7WOv7ns.js → document-viewer.DZp_IRF7.js} +16 -7
- package/library/chunks/{file-on-demand.DUWFRJnE.js → file-on-demand.C_2vBGS3.js} +3 -3
- package/library/chunks/{header.qIpzHeNc.js → header.BaWpIXRz.js} +5 -5
- package/library/chunks/{image.DzFSYcXq.js → image.BD0t8XU4.js} +1 -1
- package/library/chunks/{masonry.D7YK0FcU.js → masonry.B3G5f-eL.js} +1 -1
- package/library/chunks/{shadow-input-group.C9DU0Ehy.js → shadow-input-group.CFb61kzG.js} +1 -1
- package/library/chunks/src.DKYroWZc.js +720 -0
- package/library/chunks/{src.QS2741a8.js → src.fDrPRx_j.js} +8 -8
- package/library/chunks/{tab-group.DP9EvXFy.js → tab-group.oiueox5q.js} +627 -627
- package/library/chunks/{tab.C2OFvGGj.js → tab.Dd0cNxxc.js} +12 -8
- package/library/chunks/{url.CZO_DV8Y.js → url.BCc06dE7.js} +15 -6
- package/library/chunks/{video.BHfy8igQ.js → video.Ba5xl_3K.js} +1 -1
- package/library/components/asset-link-format.js +1 -1
- package/library/components/atoms.js +9 -9
- package/library/components/audio.js +1 -1
- package/library/components/bicolor-picker.js +1 -1
- package/library/components/border-input-group.js +1 -1
- package/library/components/color-picker.js +1 -1
- package/library/components/color-swatch-group.js +1 -1
- package/library/components/document-viewer.js +1 -1
- package/library/components/file-on-demand.js +1 -1
- package/library/components/header.js +1 -1
- package/library/components/image.js +1 -1
- package/library/components/masonry.js +1 -1
- package/library/components/molecules.js +4 -4
- package/library/components/organisms.js +3 -3
- package/library/components/shadow-input-group.js +1 -1
- package/library/components/tab-group.js +1 -1
- package/library/components/tab.js +1 -1
- package/library/components/types.js +12189 -12008
- package/library/components/video.js +1 -1
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/audio/audio.d.ts +2 -0
- package/library/packages/atoms/src/components/document-viewer/document-viewer.d.ts +6 -0
- package/library/packages/atoms/src/components/tab-group/tab-group.d.ts +65 -7
- package/library/packages/events/src/events.d.ts +0 -4
- package/library/packages/hybrid/rich-text/src/rich-text.d.ts +9 -0
- package/library/packages/organisms/src/content-builder/blocks/audio/audio.d.ts +13 -0
- package/library/packages/organisms/src/content-builder/blocks/button/button.d.ts +8 -0
- package/library/packages/organisms/src/content-builder/blocks/column/column.d.ts +5 -0
- package/library/packages/organisms/src/content-builder/blocks/column-group/column-group.d.ts +5 -0
- package/library/packages/organisms/src/content-builder/blocks/document-viewer/document-viewer.d.ts +8 -0
- package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts +16 -13
- package/library/packages/organisms/src/content-builder/blocks/timeline/timeline.d.ts +0 -2
- package/library/packages/organisms/src/content-builder/blocks/video/video.d.ts +9 -0
- package/library/packages/organisms/src/content-builder/components/template-manager/template-manager.d.ts +11 -0
- package/library/packages/organisms/src/content-builder/content-builder.d.ts +17 -1
- package/library/packages/organisms/src/content-builder-viewer/content-builder-viewer.d.ts +15 -6
- package/library/packages/organisms/src/form/control-renderer/control-renderer.d.ts +1 -1
- package/library/packages/tools/src/fetch-asset/fetch-asset.d.ts +2 -1
- package/library/packages/tools/src/fetch-image/fetch-image.d.ts +28 -0
- package/library/packages/utils/src/asset-url-mode/asset-url-mode.d.ts +22 -0
- package/library/packages/utils/src/asset-url-mode/index.d.ts +1 -0
- package/library/packages/utils/src/url/url.d.ts +7 -0
- package/library/react-web-component.d.ts +25 -1
- package/library/utils.js +28 -706
- package/package.json +1 -1
- package/library/packages/events/src/cx-image-src-resolved.d.ts +0 -9
- package/library/packages/events/src/cx-timeline-data-resolved.d.ts +0 -9
- package/library/packages/events/src/cx-video-src-resolved.d.ts +0 -8
- package/library/packages/events/src/cx-video-thumbnail-resolved.d.ts +0 -8
|
@@ -23,25 +23,25 @@ import { t as oe } from "./input.B3HfssSr.js";
|
|
|
23
23
|
import { t as S } from "./option.wsYX6Pp-.js";
|
|
24
24
|
import { t as C } from "./space.Dd8jezXK.js";
|
|
25
25
|
import { t as w } from "./select.v6t2pNH4.js";
|
|
26
|
-
import {
|
|
27
|
-
import { t as
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import { t as
|
|
26
|
+
import { E as se, T as ce, b as le, d as ue, h as T, p as de, w as fe, y as pe } from "./src.DKYroWZc.js";
|
|
27
|
+
import { t as E } from "./details.DLqFxjTf.js";
|
|
28
|
+
import { t as me } from "./divider.CqSNZCU8.js";
|
|
29
|
+
import { i as D, n as O, r as k } from "./asset-link-format.DhdgEsA0.js";
|
|
30
|
+
import { t as he } from "./v4.JyXW8GUB.js";
|
|
31
31
|
import "./cropper.D4ymxgab.js";
|
|
32
|
-
import { t as
|
|
33
|
-
import { a as
|
|
34
|
-
import { t as
|
|
32
|
+
import { t as ge } from "./_baseUniq.h_pGICPH.js";
|
|
33
|
+
import { a as _e, f as A, n as ve, o as ye, r as be, t as xe, u as Se } from "./endpoints.jOHOmF_t.js";
|
|
34
|
+
import { t as j } from "./position-picker.CyXlSYCi.js";
|
|
35
35
|
//#region ../../node_modules/lodash-es/uniq.js
|
|
36
|
-
function
|
|
37
|
-
return e && e.length ?
|
|
36
|
+
function Ce(e) {
|
|
37
|
+
return e && e.length ? ge(e) : [];
|
|
38
38
|
}
|
|
39
39
|
//#endregion
|
|
40
40
|
//#region ../../packages/services/src/api/asset/asset.utils.ts
|
|
41
|
-
function
|
|
41
|
+
function M(e) {
|
|
42
42
|
return typeof e == "object" && !!e && "URI" in e;
|
|
43
43
|
}
|
|
44
|
-
var
|
|
44
|
+
var we = {
|
|
45
45
|
artist: "Artist",
|
|
46
46
|
color: "Color",
|
|
47
47
|
createDate: "CreateDate",
|
|
@@ -63,34 +63,34 @@ var be = {
|
|
|
63
63
|
systemIdentifier: "SystemIdentifier",
|
|
64
64
|
text: "Text",
|
|
65
65
|
title: "Title"
|
|
66
|
-
},
|
|
66
|
+
}, Te = /* @__PURE__ */ new Set([
|
|
67
67
|
"mediaDate",
|
|
68
68
|
"createDate",
|
|
69
69
|
"editDate"
|
|
70
70
|
]);
|
|
71
|
-
function
|
|
71
|
+
function N(e) {
|
|
72
72
|
return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(e) && !/^(?:OR|AND|NOT)$/.test(e) ? e : `"${e.replace(/\\/g, "\\\\").replace(/"/g, "\\\"")}"`;
|
|
73
73
|
}
|
|
74
|
-
function
|
|
75
|
-
let n = (Array.isArray(t) ? t : [t]).map((t) => `${e}:${
|
|
74
|
+
function Ee(e, t) {
|
|
75
|
+
let n = (Array.isArray(t) ? t : [t]).map((t) => `${e}:${N(t)}`);
|
|
76
76
|
return n.length > 1 ? `(${n.join(" OR ")})` : n[0] ?? "";
|
|
77
77
|
}
|
|
78
|
-
function
|
|
78
|
+
function De(e, t) {
|
|
79
79
|
return (Array.isArray(t) ? t : [t]).map((t) => `${e}${t.operator}${t.value}`).join(" AND ");
|
|
80
80
|
}
|
|
81
|
-
function
|
|
81
|
+
function Oe(e) {
|
|
82
82
|
let t = [];
|
|
83
83
|
for (let n of Object.keys(e)) {
|
|
84
84
|
let r = n, i = e[r];
|
|
85
85
|
if (i == null) continue;
|
|
86
86
|
if (r === "custom") {
|
|
87
|
-
for (let [e, n] of Object.entries(i)) t.push(
|
|
87
|
+
for (let [e, n] of Object.entries(i)) t.push(Ee(e, n));
|
|
88
88
|
continue;
|
|
89
89
|
}
|
|
90
|
-
let a =
|
|
90
|
+
let a = we[r];
|
|
91
91
|
if (a) {
|
|
92
|
-
if (
|
|
93
|
-
t.push(
|
|
92
|
+
if (Te.has(r)) {
|
|
93
|
+
t.push(De(a, i));
|
|
94
94
|
continue;
|
|
95
95
|
}
|
|
96
96
|
if (r === "color") {
|
|
@@ -100,87 +100,87 @@ function we(e) {
|
|
|
100
100
|
if (r === "parentFolderIdentifier") {
|
|
101
101
|
let e = Array.isArray(i) ? i : [i];
|
|
102
102
|
if (e.length === 0) continue;
|
|
103
|
-
let n = [...e.map((e) => `ParentFolderIdentifier:${
|
|
103
|
+
let n = [...e.map((e) => `ParentFolderIdentifier:${N(String(e))}`), ...e.map((e) => `ParentAlbumIdentifier:${N(String(e))}`)];
|
|
104
104
|
t.push(`(${n.join(" OR ")})`);
|
|
105
105
|
continue;
|
|
106
106
|
}
|
|
107
|
-
t.push(
|
|
107
|
+
t.push(Ee(a, i));
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
return t.join(" AND ");
|
|
111
111
|
}
|
|
112
|
-
function
|
|
113
|
-
if ("and" in e) return e.and.map(
|
|
112
|
+
function P(e) {
|
|
113
|
+
if ("and" in e) return e.and.map(P).filter(Boolean).join(" AND ");
|
|
114
114
|
if ("or" in e) {
|
|
115
|
-
let t = e.or.map(
|
|
115
|
+
let t = e.or.map(P).filter(Boolean);
|
|
116
116
|
return t.length > 1 ? `(${t.join(" OR ")})` : t[0] ?? "";
|
|
117
117
|
}
|
|
118
118
|
if ("not" in e) {
|
|
119
|
-
let t =
|
|
119
|
+
let t = P(e.not);
|
|
120
120
|
return t ? `NOT (${t})` : "";
|
|
121
121
|
}
|
|
122
|
-
return
|
|
122
|
+
return Oe(e);
|
|
123
123
|
}
|
|
124
124
|
//#endregion
|
|
125
125
|
//#region ../../packages/services/src/api/asset/asset.ts
|
|
126
|
-
var
|
|
126
|
+
var ke = "CoreField.LargeSizePreview", F = "CoreField.DocType", I = "Document.Title", Ae = "Document.CaptionLong", L = "Document.FileExtension", R = "CoreField.FileSize", z = "CoreField.Identifier", je = "CoreField.MaxHeight", Me = "CoreField.MaxWidth", B = "Document.RecordID", V = "CoreField.DocSubType", Ne = "CoreField.TitleWithFallback", H = "CoreField.OriginalFileName", Pe = "__width", Fe = "__height", Ie = "CoreField.OriginalPreview", Le = "Document.DocSubType", Re = "Document.InPoint", ze = "Document.OutPoint", Be = {
|
|
127
127
|
DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
|
|
128
128
|
ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
|
|
129
|
-
},
|
|
130
|
-
[
|
|
131
|
-
[
|
|
132
|
-
},
|
|
133
|
-
function
|
|
134
|
-
return
|
|
129
|
+
}, Ve = {
|
|
130
|
+
[ke]: Be.DEFAULT_VIEW_SIZE,
|
|
131
|
+
[Ie]: Be.ORIGINAL_VIEW_SIZE
|
|
132
|
+
}, He = Object.fromEntries(Object.entries(Ve).map(([e, t]) => [t, e]));
|
|
133
|
+
function Ue(e) {
|
|
134
|
+
return Ve[e] ?? e;
|
|
135
135
|
}
|
|
136
|
-
function
|
|
137
|
-
return e === "CoreField.TitleWithFallback" ? [
|
|
136
|
+
function We(e) {
|
|
137
|
+
return e === "CoreField.TitleWithFallback" ? [I, H] : [Ue(e)];
|
|
138
138
|
}
|
|
139
|
-
function
|
|
139
|
+
function Ge(e) {
|
|
140
140
|
let t = {};
|
|
141
141
|
for (let [n, r] of Object.entries(e)) {
|
|
142
|
-
let e =
|
|
142
|
+
let e = He[n] ?? n;
|
|
143
143
|
t[e] = r;
|
|
144
144
|
}
|
|
145
145
|
return t;
|
|
146
146
|
}
|
|
147
|
-
function
|
|
147
|
+
function Ke(e, t, n) {
|
|
148
148
|
e[n] = U(t, n);
|
|
149
149
|
let r = t[n];
|
|
150
|
-
return r != null &&
|
|
150
|
+
return r != null && M(r) && (typeof r.Width == "number" && r.Width > 0 && (e[`${n}${Pe}`] = String(r.Width)), typeof r.Height == "number" && r.Height > 0 && (e[`${n}${Fe}`] = String(r.Height))), e;
|
|
151
151
|
}
|
|
152
|
-
function
|
|
152
|
+
function qe(e) {
|
|
153
153
|
let t = new URLSearchParams();
|
|
154
154
|
for (let [n, r] of Object.entries(e)) r != null && (Array.isArray(r) ? r.forEach((e) => t.append(n, String(e))) : t.append(n, String(r)));
|
|
155
155
|
return t;
|
|
156
156
|
}
|
|
157
|
-
async function
|
|
158
|
-
let p = n?.flatMap(
|
|
159
|
-
let t =
|
|
160
|
-
return m && (t[
|
|
157
|
+
async function Je({ consistency: e, countPerPage: t, fields: n, getPermanentAssetsPaths: r, httpMethod: i = "GET", isSiteBuilder: a, pageNumber: o, query: s, securityByPassToken: c, siteUrl: l, sort: u, token: d, useSession: f }) {
|
|
158
|
+
let p = n?.flatMap(We), m = n?.includes("CoreField.TitleWithFallback") ?? !1, h = (e) => {
|
|
159
|
+
let t = Ge(e);
|
|
160
|
+
return m && (t[Ne] = U(t, "Document.Title") || U(t, "CoreField.OriginalFileName")), t;
|
|
161
161
|
}, g = {
|
|
162
162
|
Consistency: e || void 0,
|
|
163
163
|
CountPerPage: t,
|
|
164
|
-
Fields:
|
|
164
|
+
Fields: Ce(p),
|
|
165
165
|
Format: "json",
|
|
166
|
-
GetPermanentAssetsPaths: r
|
|
166
|
+
GetPermanentAssetsPaths: r ?? void 0,
|
|
167
167
|
PageNumber: o,
|
|
168
|
-
Query:
|
|
168
|
+
Query: P(s),
|
|
169
169
|
SecurityByPassToken: c || void 0,
|
|
170
170
|
Sort: u || void 0,
|
|
171
171
|
UseSession: f || void 0
|
|
172
172
|
}, _ = i === "POST";
|
|
173
173
|
try {
|
|
174
|
-
return (await
|
|
174
|
+
return (await A.request({
|
|
175
175
|
baseURL: l,
|
|
176
176
|
headers: d ? { Authorization: `Bearer ${d}` } : void 0,
|
|
177
177
|
method: i,
|
|
178
|
-
..._ ? { data:
|
|
178
|
+
..._ ? { data: qe(g) } : {
|
|
179
179
|
params: g,
|
|
180
180
|
paramsSerializer: { indexes: null }
|
|
181
181
|
},
|
|
182
182
|
responseType: "json",
|
|
183
|
-
transformResponse: [...Array.isArray(
|
|
183
|
+
transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], a ? (e) => ({
|
|
184
184
|
items: (e.results?.Items ?? []).map(h),
|
|
185
185
|
sort: e.results?.GlobalInfo?.Sort ?? "",
|
|
186
186
|
totalCount: e.results?.GlobalInfo?.TotalCount ?? 0
|
|
@@ -189,7 +189,7 @@ async function Ge({ consistency: e, countPerPage: t, fields: n, getPermanentAsse
|
|
|
189
189
|
sort: e.APIResponse?.GlobalInfo?.Sort ?? "",
|
|
190
190
|
totalCount: e.APIResponse?.GlobalInfo?.TotalCount ?? 0
|
|
191
191
|
})],
|
|
192
|
-
url: a ?
|
|
192
|
+
url: a ? ye.SEARCH_ASSETS : Se["4.0"]
|
|
193
193
|
})).data;
|
|
194
194
|
} catch {
|
|
195
195
|
return {
|
|
@@ -199,9 +199,9 @@ async function Ge({ consistency: e, countPerPage: t, fields: n, getPermanentAsse
|
|
|
199
199
|
};
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
|
-
async function
|
|
202
|
+
async function Ye({ assetId: e, extension: t, format: n, siteUrl: r, token: i, transformations: a, useSession: o }) {
|
|
203
203
|
try {
|
|
204
|
-
return (await
|
|
204
|
+
return (await A.request({
|
|
205
205
|
baseURL: r,
|
|
206
206
|
method: "GET",
|
|
207
207
|
params: {
|
|
@@ -213,19 +213,19 @@ async function Ke({ assetId: e, extension: t, format: n, siteUrl: r, token: i, t
|
|
|
213
213
|
UseSession: o || void 0
|
|
214
214
|
},
|
|
215
215
|
timeout: 3e5,
|
|
216
|
-
url:
|
|
216
|
+
url: ve.GET_TRANSFORM_ASSET_LINK
|
|
217
217
|
})).data;
|
|
218
218
|
} catch {
|
|
219
219
|
return null;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
-
var
|
|
223
|
-
function
|
|
222
|
+
var Xe = 50;
|
|
223
|
+
function Ze(e, t) {
|
|
224
224
|
let n = [];
|
|
225
225
|
for (let r = 0; r < e.length; r += t) n.push(e.slice(r, r + t));
|
|
226
226
|
return n;
|
|
227
227
|
}
|
|
228
|
-
async function
|
|
228
|
+
async function Qe({ consistency: e, extraFields: t, getPermanentAssetsPaths: n, isSiteBuilder: r, recordIds: i, securityByPassToken: a, token: o }) {
|
|
229
229
|
if (!Array.isArray(i) || i.length === 0) return {
|
|
230
230
|
facets: [],
|
|
231
231
|
items: [],
|
|
@@ -234,10 +234,10 @@ async function Ye({ consistency: e, extraFields: t, getPermanentAssetsPaths: n,
|
|
|
234
234
|
let s = t?.filter((e) => e && typeof e == "string") ?? [], c = [
|
|
235
235
|
...s,
|
|
236
236
|
H,
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
], l =
|
|
237
|
+
I,
|
|
238
|
+
Ae,
|
|
239
|
+
B
|
|
240
|
+
], l = Ze(i, Xe), u = await Promise.all(l.map((t) => Je({
|
|
241
241
|
consistency: e,
|
|
242
242
|
countPerPage: t.length,
|
|
243
243
|
fields: c,
|
|
@@ -253,17 +253,17 @@ async function Ye({ consistency: e, extraFields: t, getPermanentAssetsPaths: n,
|
|
|
253
253
|
facets: [],
|
|
254
254
|
items: u.flatMap((e) => e.items).map((e) => ({
|
|
255
255
|
name: U(e, H),
|
|
256
|
-
recordId: U(e,
|
|
257
|
-
...s.reduce((t, n) =>
|
|
256
|
+
recordId: U(e, B),
|
|
257
|
+
...s.reduce((t, n) => Ke(t, e, n), {})
|
|
258
258
|
})).sort((e, t) => (d.get(e.recordId) ?? Infinity) - (d.get(t.recordId) ?? Infinity)),
|
|
259
259
|
totalCount: u.reduce((e, t) => e + t.totalCount, 0)
|
|
260
260
|
};
|
|
261
261
|
}
|
|
262
262
|
function U(e, t) {
|
|
263
263
|
let n = e[t];
|
|
264
|
-
return n == null ? "" : typeof n == "string" ? n : typeof n == "number" || typeof n == "boolean" ? String(n) :
|
|
264
|
+
return n == null ? "" : typeof n == "string" ? n : typeof n == "number" || typeof n == "boolean" ? String(n) : M(n) ? n.URI : "";
|
|
265
265
|
}
|
|
266
|
-
async function
|
|
266
|
+
async function $e({ consistency: e, countPerPage: t, directParentFolderIdentifier: n, extraFields: r, getPermanentAssetsPaths: i, isSiteBuilder: a, limitedDocTypes: o, pageNumber: s, parentFolderIdentifier: c, searchTerm: l, securityByPassToken: u, sortOrder: d, token: f }) {
|
|
267
267
|
if (!n && !c) return {
|
|
268
268
|
facets: [],
|
|
269
269
|
items: [],
|
|
@@ -274,18 +274,18 @@ async function Xe({ consistency: e, countPerPage: t, directParentFolderIdentifie
|
|
|
274
274
|
parentFolderIdentifier: c,
|
|
275
275
|
...l ? { text: l } : {},
|
|
276
276
|
...o && o.length > 0 ? { docType: o } : {}
|
|
277
|
-
}, h = await
|
|
277
|
+
}, h = await Je({
|
|
278
278
|
consistency: e,
|
|
279
279
|
countPerPage: t,
|
|
280
280
|
fields: [
|
|
281
281
|
...p,
|
|
282
|
-
|
|
283
|
-
z,
|
|
284
|
-
I,
|
|
285
|
-
ke,
|
|
286
|
-
B,
|
|
282
|
+
Ne,
|
|
287
283
|
R,
|
|
284
|
+
F,
|
|
288
285
|
V,
|
|
286
|
+
z,
|
|
287
|
+
L,
|
|
288
|
+
B,
|
|
289
289
|
H
|
|
290
290
|
],
|
|
291
291
|
getPermanentAssetsPaths: i,
|
|
@@ -299,27 +299,27 @@ async function Xe({ consistency: e, countPerPage: t, directParentFolderIdentifie
|
|
|
299
299
|
return {
|
|
300
300
|
facets: [],
|
|
301
301
|
items: h.items.map((e) => {
|
|
302
|
-
let t = U(e,
|
|
302
|
+
let t = U(e, L);
|
|
303
303
|
t && !t.startsWith(".") && (t = "." + t);
|
|
304
|
-
let n = U(e,
|
|
304
|
+
let n = U(e, B);
|
|
305
305
|
return {
|
|
306
|
-
docSubType: U(e,
|
|
306
|
+
docSubType: U(e, V),
|
|
307
307
|
docType: U(e, "CoreField.DocType") || "",
|
|
308
308
|
extension: t,
|
|
309
309
|
id: n,
|
|
310
|
-
identifier: U(e,
|
|
310
|
+
identifier: U(e, z),
|
|
311
311
|
name: U(e, H),
|
|
312
312
|
recordId: n,
|
|
313
313
|
size: U(e, "CoreField.FileSize") || "0 MB",
|
|
314
|
-
...p.reduce((t, n) =>
|
|
314
|
+
...p.reduce((t, n) => Ke(t, e, n), {})
|
|
315
315
|
};
|
|
316
316
|
}),
|
|
317
317
|
totalCount: h.totalCount
|
|
318
318
|
};
|
|
319
319
|
}
|
|
320
|
-
async function
|
|
320
|
+
async function et({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, useSession: i }) {
|
|
321
321
|
try {
|
|
322
|
-
return (await
|
|
322
|
+
return (await A.request({
|
|
323
323
|
method: "GET",
|
|
324
324
|
params: {
|
|
325
325
|
AutoCropMode: e,
|
|
@@ -330,21 +330,21 @@ async function Ze({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, u
|
|
|
330
330
|
},
|
|
331
331
|
responseType: "json",
|
|
332
332
|
timeout: 3e5,
|
|
333
|
-
transformResponse: [...Array.isArray(
|
|
333
|
+
transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], (e) => ({
|
|
334
334
|
height: e.cropHeight,
|
|
335
335
|
width: e.cropWidth,
|
|
336
336
|
x: e.cropX,
|
|
337
337
|
y: e.cropY
|
|
338
338
|
})],
|
|
339
|
-
url:
|
|
339
|
+
url: ve.GET_CROP_ZONE_SUGGESTION
|
|
340
340
|
})).data;
|
|
341
341
|
} catch {
|
|
342
342
|
return null;
|
|
343
343
|
}
|
|
344
344
|
}
|
|
345
|
-
async function
|
|
345
|
+
async function tt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, useSession: i }) {
|
|
346
346
|
try {
|
|
347
|
-
return (await
|
|
347
|
+
return (await A.request({
|
|
348
348
|
baseURL: n,
|
|
349
349
|
method: "GET",
|
|
350
350
|
params: {
|
|
@@ -353,7 +353,7 @@ async function Qe({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, us
|
|
|
353
353
|
UseSession: i || void 0
|
|
354
354
|
},
|
|
355
355
|
responseType: "json",
|
|
356
|
-
transformResponse: [...Array.isArray(
|
|
356
|
+
transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? [] : e.proxies?.map((e) => ({
|
|
357
357
|
cdnName: e.cdnName,
|
|
358
358
|
extension: e.extension,
|
|
359
359
|
formatHeight: e.formatHeight,
|
|
@@ -364,31 +364,31 @@ async function Qe({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, us
|
|
|
364
364
|
proxyName: e.proxyName,
|
|
365
365
|
width: e.width
|
|
366
366
|
})) ?? []],
|
|
367
|
-
url: t ?
|
|
367
|
+
url: t ? ye.GET_AVAILABLE_PROXIES : _e
|
|
368
368
|
})).data;
|
|
369
369
|
} catch {
|
|
370
370
|
return [];
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
|
-
async function
|
|
373
|
+
async function nt({ siteUrl: e } = {}) {
|
|
374
374
|
try {
|
|
375
|
-
return (await
|
|
375
|
+
return (await A.request({
|
|
376
376
|
baseURL: e,
|
|
377
377
|
method: "GET",
|
|
378
378
|
responseType: "json",
|
|
379
|
-
transformResponse: [...Array.isArray(
|
|
379
|
+
transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? { formatsByDocType: {
|
|
380
380
|
Audio: {},
|
|
381
381
|
Image: {},
|
|
382
382
|
Multimedia: {},
|
|
383
383
|
Video: {}
|
|
384
384
|
} } : { formatsByDocType: e.formatsByDocType ?? {} }],
|
|
385
|
-
url:
|
|
385
|
+
url: xe
|
|
386
386
|
})).data;
|
|
387
387
|
} catch {
|
|
388
388
|
return { formatsByDocType: {} };
|
|
389
389
|
}
|
|
390
390
|
}
|
|
391
|
-
async function
|
|
391
|
+
async function rt({ recordIds: e, rightsToCheck: t }) {
|
|
392
392
|
let n = {
|
|
393
393
|
authorizedObjects: [],
|
|
394
394
|
forbiddenObjectsOfReadPermission: [],
|
|
@@ -396,7 +396,7 @@ async function et({ recordIds: e, rightsToCheck: t }) {
|
|
|
396
396
|
invalidObjects: []
|
|
397
397
|
};
|
|
398
398
|
try {
|
|
399
|
-
let { data: n } = await
|
|
399
|
+
let { data: n } = await A.request({
|
|
400
400
|
method: "GET",
|
|
401
401
|
params: {
|
|
402
402
|
RecordIDs: e,
|
|
@@ -404,7 +404,7 @@ async function et({ recordIds: e, rightsToCheck: t }) {
|
|
|
404
404
|
},
|
|
405
405
|
paramsSerializer: { indexes: null },
|
|
406
406
|
responseType: "json",
|
|
407
|
-
url:
|
|
407
|
+
url: be.GET_AUTHORIZED_OBJECTS
|
|
408
408
|
});
|
|
409
409
|
return n;
|
|
410
410
|
} catch {
|
|
@@ -413,7 +413,7 @@ async function et({ recordIds: e, rightsToCheck: t }) {
|
|
|
413
413
|
}
|
|
414
414
|
//#endregion
|
|
415
415
|
//#region ../../packages/tools/src/fetch-image/fetch-image.ts
|
|
416
|
-
var
|
|
416
|
+
var it = 20, W = "TR1", G = "TRX", at = /* @__PURE__ */ new Set([".gif"]), ot = /* @__PURE__ */ new Set([
|
|
417
417
|
".avif",
|
|
418
418
|
".bmp",
|
|
419
419
|
".gif",
|
|
@@ -424,47 +424,51 @@ var tt = 20, W = "TR1", G = "TRX", nt = /* @__PURE__ */ new Set([".gif"]), rt =
|
|
|
424
424
|
".svg",
|
|
425
425
|
".webp"
|
|
426
426
|
]);
|
|
427
|
-
function
|
|
427
|
+
function st(e) {
|
|
428
428
|
let t = e.toLowerCase(), n = t.startsWith(".") ? t : `.${t}`;
|
|
429
|
-
return
|
|
429
|
+
return ot.has(n);
|
|
430
430
|
}
|
|
431
|
-
function
|
|
432
|
-
return e !== void 0 && e !== "" && e !==
|
|
431
|
+
function ct(e, t) {
|
|
432
|
+
return e !== void 0 && e !== "" && e !== O.Image ? !1 : !t || st(t);
|
|
433
433
|
}
|
|
434
|
-
function
|
|
435
|
-
let
|
|
434
|
+
function lt({ autoFormat: e, buildSrcset: t, docType: n, extension: r, format: i, item: a, manualFormat: o, size: s, useExpiringAssetUrls: c }) {
|
|
435
|
+
let l = r?.toLowerCase() ?? "", u = l.startsWith(".") ? l : `.${l}`, d = `path_${W}`, f = (n, r) => {
|
|
436
436
|
let i = a[n];
|
|
437
437
|
if (!i) return;
|
|
438
|
-
let s = a[`${n}${
|
|
438
|
+
let s = a[`${n}${Pe}`], u = a[`${n}${Fe}`], d = e && !c ? ue(i, [], {
|
|
439
439
|
autoFormat: !o,
|
|
440
|
-
extension:
|
|
440
|
+
extension: l,
|
|
441
441
|
format: r
|
|
442
442
|
}) : i;
|
|
443
443
|
return {
|
|
444
|
-
maxHeight:
|
|
444
|
+
maxHeight: u,
|
|
445
445
|
maxWidth: s,
|
|
446
|
-
src:
|
|
447
|
-
srcset: t ?
|
|
448
|
-
extension:
|
|
446
|
+
src: d,
|
|
447
|
+
srcset: t && !c ? de(d, {
|
|
448
|
+
extension: l,
|
|
449
449
|
format: r,
|
|
450
|
-
maxWidth:
|
|
450
|
+
maxWidth: le(o, s)
|
|
451
451
|
}) : ""
|
|
452
452
|
};
|
|
453
453
|
};
|
|
454
|
+
if (c) {
|
|
455
|
+
let e = ce(a, ct(n, l), l);
|
|
456
|
+
return e ? f(e) ?? {} : {};
|
|
457
|
+
}
|
|
454
458
|
if (!o) {
|
|
455
|
-
let e =
|
|
456
|
-
return
|
|
459
|
+
let e = pe(l, s);
|
|
460
|
+
return f(`path_${e}`, e) ?? f(d, W) ?? {};
|
|
457
461
|
}
|
|
458
|
-
let
|
|
459
|
-
return
|
|
462
|
+
let p = i ? `path_${i}` : void 0;
|
|
463
|
+
return p && a[p] ? i !== G || ct(n, l) ? f(p, i) ?? {} : f(d, W) ?? {} : l && at.has(u) ? f(`path_${G}`, G) ?? f(d, W) ?? {} : f(d, W) ?? {};
|
|
460
464
|
}
|
|
461
|
-
var
|
|
465
|
+
var ut = class {
|
|
462
466
|
constructor(e, t) {
|
|
463
|
-
this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = Infinity, this.pageSize =
|
|
467
|
+
this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = Infinity, this.pageSize = it, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
|
|
464
468
|
let n = t?.maxEnd;
|
|
465
469
|
this.maxEnd = typeof n == "number" && Number.isFinite(n) && n >= 0 ? Math.floor(n) : Infinity;
|
|
466
470
|
let r = t?.pageSize;
|
|
467
|
-
this.pageSize = typeof r == "number" && Number.isFinite(r) && r >= 1 ? Math.floor(r) :
|
|
471
|
+
this.pageSize = typeof r == "number" && Number.isFinite(r) && r >= 1 ? Math.floor(r) : it, this.authToken = t?.token, this.securityByPassToken = t?.securityByPassToken, this.isSiteBuilder = t?.isSiteBuilder ?? !1, this.autoFormat = t?.autoFormat ?? !1, this.buildSrcset = t?.buildSrcset ?? !1, this.consistency = t?.consistency;
|
|
468
472
|
}
|
|
469
473
|
get totalDataCount() {
|
|
470
474
|
return this.totalCount;
|
|
@@ -473,34 +477,34 @@ var st = class {
|
|
|
473
477
|
this.securityByPassToken !== e && (this.securityByPassToken = e, this.resetPageCache());
|
|
474
478
|
}
|
|
475
479
|
setPageSize(e) {
|
|
476
|
-
let t = Number.isFinite(e) && e >= 1 ? Math.floor(e) :
|
|
480
|
+
let t = Number.isFinite(e) && e >= 1 ? Math.floor(e) : it;
|
|
477
481
|
if (this.pageSize === t) return;
|
|
478
482
|
let n = this.fetchedPages.size > 0;
|
|
479
483
|
n && t < this.pageSize || (this.pageSize = t, n && (this.requestEpoch += 1, this.fetchedPages.clear()));
|
|
480
484
|
}
|
|
481
485
|
async fetchImages({ end: e, extraFields: t = [], format: n, manualFormat: r = !0, start: i, transformations: a }) {
|
|
482
486
|
if (e < i || this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < i)) return this.data;
|
|
483
|
-
let o = this.requestEpoch;
|
|
487
|
+
let o = this.requestEpoch, s = fe(this.host.ownerDocument.defaultView);
|
|
484
488
|
if (!this.folderId || o !== this.requestEpoch) return this.data;
|
|
485
|
-
let
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
].filter((e) => !!e))],
|
|
490
|
-
for (let e =
|
|
489
|
+
let c = n ? `path_${n}` : void 0, l = `path_${W}`, u = `path_${G}`, d = s ? [l, u] : [...new Set([
|
|
490
|
+
c,
|
|
491
|
+
l,
|
|
492
|
+
u
|
|
493
|
+
].filter((e) => !!e))], f = Math.floor(i / this.pageSize) + 1, p = Math.floor(e / this.pageSize) + 1;
|
|
494
|
+
for (let e = f; e <= p; e++) {
|
|
491
495
|
if (this.fetchedPages.has(e)) continue;
|
|
492
|
-
let i = await
|
|
496
|
+
let i = await $e({
|
|
493
497
|
consistency: this.consistency,
|
|
494
498
|
countPerPage: this.pageSize,
|
|
495
499
|
directParentFolderIdentifier: this.folderId,
|
|
496
|
-
extraFields: [...t, ...
|
|
497
|
-
getPermanentAssetsPaths:
|
|
500
|
+
extraFields: [...t, ...d],
|
|
501
|
+
getPermanentAssetsPaths: se(this.host.ownerDocument.defaultView),
|
|
498
502
|
isSiteBuilder: this.isSiteBuilder,
|
|
499
503
|
limitedDocTypes: [
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
+
O.Image,
|
|
505
|
+
O.Audio,
|
|
506
|
+
O.Video,
|
|
507
|
+
O.Multimedia
|
|
504
508
|
],
|
|
505
509
|
pageNumber: e,
|
|
506
510
|
searchTerm: "",
|
|
@@ -513,36 +517,37 @@ var st = class {
|
|
|
513
517
|
let e = Math.min(this.maxEnd, i.totalCount);
|
|
514
518
|
this.totalCount = e, this.data = Array.from({ length: e }, () => ({
|
|
515
519
|
alt: "",
|
|
516
|
-
id: `temp-${
|
|
520
|
+
id: `temp-${he()}`,
|
|
517
521
|
name: "",
|
|
518
522
|
src: ""
|
|
519
523
|
}));
|
|
520
524
|
}
|
|
521
|
-
let
|
|
525
|
+
let c = (e - 1) * this.pageSize;
|
|
522
526
|
for (let e = 0; e < i.items.length; e++) {
|
|
523
|
-
let o =
|
|
527
|
+
let o = c + e;
|
|
524
528
|
if (o < this.data.length) {
|
|
525
|
-
let
|
|
529
|
+
let c = i.items[e], { maxHeight: l, maxWidth: u, src: d, srcset: f } = lt({
|
|
526
530
|
autoFormat: this.autoFormat,
|
|
527
531
|
buildSrcset: this.buildSrcset,
|
|
528
|
-
docType:
|
|
529
|
-
extension:
|
|
532
|
+
docType: c.docType,
|
|
533
|
+
extension: c.extension,
|
|
530
534
|
format: n,
|
|
531
|
-
item:
|
|
535
|
+
item: c,
|
|
532
536
|
manualFormat: r,
|
|
533
|
-
size:
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
537
|
+
size: c.size,
|
|
538
|
+
useExpiringAssetUrls: s
|
|
539
|
+
}), p = d, m = f;
|
|
540
|
+
!s && p && a && a.length > 0 && (p = ue(p, a), m = ""), this.data[o] = {
|
|
541
|
+
alt: c.name,
|
|
542
|
+
docType: c.docType,
|
|
543
|
+
extension: c.extension,
|
|
544
|
+
id: c.id,
|
|
545
|
+
maxHeight: l,
|
|
546
|
+
maxWidth: u,
|
|
547
|
+
name: c.name,
|
|
548
|
+
src: p,
|
|
549
|
+
srcset: m,
|
|
550
|
+
...t.reduce((e, t) => (e[t] = c[t] ?? "", e), {})
|
|
546
551
|
};
|
|
547
552
|
}
|
|
548
553
|
}
|
|
@@ -573,45 +578,46 @@ var st = class {
|
|
|
573
578
|
}
|
|
574
579
|
async fetchImagesByIDs({ extraFields: e = [], format: t, manualFormat: n = !0, recordIds: r, transformations: i }) {
|
|
575
580
|
if (r.length === 0) return [];
|
|
576
|
-
let a = t ? `path_${t}` : void 0,
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
].filter((e) => !!e))],
|
|
581
|
-
return (await
|
|
581
|
+
let a = fe(this.host.ownerDocument.defaultView), o = t ? `path_${t}` : void 0, s = `path_${W}`, c = `path_${G}`, l = a ? [s, c] : [...new Set([
|
|
582
|
+
o,
|
|
583
|
+
s,
|
|
584
|
+
c
|
|
585
|
+
].filter((e) => !!e))], u = [L, ...a ? [] : [R]], d = [...e, F];
|
|
586
|
+
return (await Qe({
|
|
582
587
|
consistency: this.consistency,
|
|
583
588
|
extraFields: [
|
|
584
|
-
...
|
|
585
|
-
...
|
|
586
|
-
...
|
|
589
|
+
...d,
|
|
590
|
+
...l,
|
|
591
|
+
...u
|
|
587
592
|
].filter((e) => e !== ""),
|
|
588
|
-
getPermanentAssetsPaths:
|
|
593
|
+
getPermanentAssetsPaths: se(this.host.ownerDocument.defaultView),
|
|
589
594
|
isSiteBuilder: this.isSiteBuilder,
|
|
590
595
|
recordIds: r,
|
|
591
596
|
securityByPassToken: this.securityByPassToken,
|
|
592
597
|
token: this.authToken
|
|
593
598
|
})).items.map((e) => {
|
|
594
|
-
let { maxHeight: r, maxWidth:
|
|
599
|
+
let { maxHeight: r, maxWidth: o, src: s, srcset: c } = lt({
|
|
595
600
|
autoFormat: this.autoFormat,
|
|
596
601
|
buildSrcset: this.buildSrcset,
|
|
597
|
-
docType: e[
|
|
598
|
-
extension: e[
|
|
602
|
+
docType: e[F],
|
|
603
|
+
extension: e[L],
|
|
599
604
|
format: t,
|
|
600
605
|
item: e,
|
|
601
606
|
manualFormat: n,
|
|
602
|
-
size: e[
|
|
603
|
-
|
|
604
|
-
|
|
607
|
+
size: e[R],
|
|
608
|
+
useExpiringAssetUrls: a
|
|
609
|
+
}), l = s, u = c;
|
|
610
|
+
return !a && l && i && i.length > 0 && (l = ue(l, i), u = ""), {
|
|
605
611
|
alt: e.name,
|
|
606
|
-
docType: e[
|
|
612
|
+
docType: e[F],
|
|
607
613
|
extension: e["Document.FileExtension"] || "",
|
|
608
614
|
id: e.recordId,
|
|
609
615
|
maxHeight: r,
|
|
610
|
-
maxWidth:
|
|
616
|
+
maxWidth: o,
|
|
611
617
|
name: e.name,
|
|
612
618
|
src: l,
|
|
613
619
|
srcset: u,
|
|
614
|
-
...
|
|
620
|
+
...d.reduce((t, n) => (t[n] = e[n] ?? "", t), {})
|
|
615
621
|
};
|
|
616
622
|
});
|
|
617
623
|
}
|
|
@@ -667,39 +673,39 @@ var st = class {
|
|
|
667
673
|
resetFolderState() {
|
|
668
674
|
this.resetPageCache();
|
|
669
675
|
}
|
|
670
|
-
},
|
|
676
|
+
}, dt = t`.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}.asset-link-format__footer,.asset-link-format__footer>slot{display:block}`, ft = t`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}`, K = class extends s {
|
|
671
677
|
constructor(...e) {
|
|
672
|
-
super(...e), this.localize = new d(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 =
|
|
673
|
-
[
|
|
678
|
+
super(...e), this.localize = new d(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 = D.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.showPositionPicker = !1, this.lastAppliedSetting = {
|
|
679
|
+
[D.Pixel]: {
|
|
674
680
|
height: 0,
|
|
675
681
|
percentageHeight: 100,
|
|
676
682
|
percentageWidth: 100,
|
|
677
|
-
unit:
|
|
683
|
+
unit: D.Pixel,
|
|
678
684
|
width: 0,
|
|
679
685
|
x: 0,
|
|
680
686
|
y: 0
|
|
681
687
|
},
|
|
682
|
-
[
|
|
688
|
+
[D.AspectRatio]: {
|
|
683
689
|
height: 1,
|
|
684
690
|
percentageHeight: 100,
|
|
685
691
|
percentageWidth: 100,
|
|
686
|
-
unit:
|
|
692
|
+
unit: D.AspectRatio,
|
|
687
693
|
width: 1,
|
|
688
694
|
x: 0,
|
|
689
695
|
y: 0
|
|
690
696
|
}
|
|
691
697
|
}, this.loading = !1, this.cropModes = [], this.focusModes = [], this.focusMode = "manual", this.cropMode = "free", this.position = v.CenterCenter, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
|
|
692
698
|
}
|
|
693
|
-
static #e = this.styles = [l,
|
|
699
|
+
static #e = this.styles = [l, ft];
|
|
694
700
|
static #t = this.dependencies = {
|
|
695
701
|
"cx-button": _,
|
|
696
|
-
"cx-details":
|
|
697
|
-
"cx-divider":
|
|
702
|
+
"cx-details": E,
|
|
703
|
+
"cx-divider": me,
|
|
698
704
|
"cx-icon": h,
|
|
699
705
|
"cx-icon-button": p,
|
|
700
706
|
"cx-input": oe,
|
|
701
707
|
"cx-option": S,
|
|
702
|
-
"cx-position-picker":
|
|
708
|
+
"cx-position-picker": j,
|
|
703
709
|
"cx-select": w,
|
|
704
710
|
"cx-space": C,
|
|
705
711
|
"cx-typography": b
|
|
@@ -714,11 +720,11 @@ var st = class {
|
|
|
714
720
|
return;
|
|
715
721
|
}
|
|
716
722
|
if (this.keepAspectRatio) {
|
|
717
|
-
if (this.unit ===
|
|
723
|
+
if (this.unit === D.Pixel && this.width && this.height) {
|
|
718
724
|
this.aspectRatio = this.width / this.height;
|
|
719
725
|
return;
|
|
720
726
|
}
|
|
721
|
-
if (this.unit ===
|
|
727
|
+
if (this.unit === D.AspectRatio && this.ratioWidth && this.ratioHeight) {
|
|
722
728
|
this.aspectRatio = this.ratioWidth / this.ratioHeight;
|
|
723
729
|
return;
|
|
724
730
|
}
|
|
@@ -747,9 +753,9 @@ var st = class {
|
|
|
747
753
|
}
|
|
748
754
|
this.invalidWidth = !1;
|
|
749
755
|
let t = Number(e.target.value);
|
|
750
|
-
this.unit ===
|
|
751
|
-
let n = this.unit ===
|
|
752
|
-
this.keepAspectRatio && (n = Math.round(t / this.aspectRatio), this.unit ===
|
|
756
|
+
this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1)), e.target.value = t.toString();
|
|
757
|
+
let n = this.unit === D.Pixel ? this.height : this.ratioHeight, r = !1;
|
|
758
|
+
this.keepAspectRatio && (n = Math.round(t / this.aspectRatio), this.unit === D.Pixel && n > this.maxHeight && (n = this.maxHeight, r = !0)), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
753
759
|
breakAspectRatio: r,
|
|
754
760
|
height: n,
|
|
755
761
|
keepAspectRatio: this.keepAspectRatio,
|
|
@@ -764,9 +770,9 @@ var st = class {
|
|
|
764
770
|
}
|
|
765
771
|
this.invalidHeight = !1;
|
|
766
772
|
let t = Number(e.target.value);
|
|
767
|
-
this.unit ===
|
|
768
|
-
let n = this.unit ===
|
|
769
|
-
this.keepAspectRatio && (n = Math.round(t * this.aspectRatio), this.unit ===
|
|
773
|
+
this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1)), e.target.value = t.toString();
|
|
774
|
+
let n = this.unit === D.Pixel ? this.width : this.ratioWidth, r = !1;
|
|
775
|
+
this.keepAspectRatio && (n = Math.round(t * this.aspectRatio), this.unit === D.Pixel && n > this.maxWidth && (n = this.maxWidth, r = !0)), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
770
776
|
breakAspectRatio: r,
|
|
771
777
|
height: t,
|
|
772
778
|
keepAspectRatio: this.keepAspectRatio,
|
|
@@ -777,28 +783,28 @@ var st = class {
|
|
|
777
783
|
onCropModeChange(e) {
|
|
778
784
|
let t = e.target.value, n = this.cropModes.find((e) => e.value === t)?.auto;
|
|
779
785
|
if (t === "free") this.selectedMode?.auto && this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
780
|
-
height: this.lastAppliedSetting[
|
|
786
|
+
height: this.lastAppliedSetting[D.Pixel].height,
|
|
781
787
|
keepAspectRatio: !1,
|
|
782
788
|
silent: !0,
|
|
783
|
-
unit:
|
|
784
|
-
width: this.lastAppliedSetting[
|
|
789
|
+
unit: D.Pixel,
|
|
790
|
+
width: this.lastAppliedSetting[D.Pixel].width
|
|
785
791
|
} });
|
|
786
792
|
else if (!n) {
|
|
787
793
|
let [e, n] = t.split(":").map(Number);
|
|
788
|
-
if (this.unit ===
|
|
794
|
+
if (this.unit === D.Pixel) {
|
|
789
795
|
let t = e, r = n;
|
|
790
796
|
Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({height: r, width: t} = re(this.maxWidth, this.maxHeight, e, n)), this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
791
797
|
height: r,
|
|
792
798
|
keepAspectRatio: !0,
|
|
793
799
|
silent: !0,
|
|
794
|
-
unit:
|
|
800
|
+
unit: D.Pixel,
|
|
795
801
|
width: t
|
|
796
802
|
} });
|
|
797
803
|
} else this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
798
804
|
height: n,
|
|
799
805
|
keepAspectRatio: !0,
|
|
800
806
|
silent: !0,
|
|
801
|
-
unit:
|
|
807
|
+
unit: D.AspectRatio,
|
|
802
808
|
width: e
|
|
803
809
|
} });
|
|
804
810
|
}
|
|
@@ -812,16 +818,16 @@ var st = class {
|
|
|
812
818
|
this.emit("cx-asset-link-format-crop-position-change", { detail: { position: this.positionPicker.value } });
|
|
813
819
|
}
|
|
814
820
|
onUnitChange(e) {
|
|
815
|
-
e.target.value ===
|
|
816
|
-
height: this.lastAppliedSetting[
|
|
821
|
+
e.target.value === D.AspectRatio ? this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
822
|
+
height: this.lastAppliedSetting[D.AspectRatio].height,
|
|
817
823
|
keepAspectRatio: this.keepAspectRatio,
|
|
818
|
-
unit:
|
|
819
|
-
width: this.lastAppliedSetting[
|
|
824
|
+
unit: D.AspectRatio,
|
|
825
|
+
width: this.lastAppliedSetting[D.AspectRatio].width
|
|
820
826
|
} }) : this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
821
|
-
height: this.lastAppliedSetting[
|
|
827
|
+
height: this.lastAppliedSetting[D.Pixel].height,
|
|
822
828
|
keepAspectRatio: this.keepAspectRatio,
|
|
823
|
-
unit:
|
|
824
|
-
width: this.lastAppliedSetting[
|
|
829
|
+
unit: D.Pixel,
|
|
830
|
+
width: this.lastAppliedSetting[D.Pixel].width
|
|
825
831
|
} }), this.emit("cx-asset-link-format-crop-mode-change", { detail: { mode: "free" } });
|
|
826
832
|
}
|
|
827
833
|
handleInputChange(e) {
|
|
@@ -843,10 +849,10 @@ var st = class {
|
|
|
843
849
|
}
|
|
844
850
|
handleAspectRatioClick() {
|
|
845
851
|
this.keepAspectRatio && this.cropMode !== "free" && this.emit("cx-asset-link-format-crop-mode-change", { detail: { mode: "free" } }), this.emit("cx-asset-link-format-crop-change", { detail: {
|
|
846
|
-
height: this.unit ===
|
|
852
|
+
height: this.unit === D.Pixel ? this.height : this.ratioHeight,
|
|
847
853
|
keepAspectRatio: !this.keepAspectRatio,
|
|
848
854
|
unit: this.unit,
|
|
849
|
-
width: this.unit ===
|
|
855
|
+
width: this.unit === D.Pixel ? this.width : this.ratioWidth
|
|
850
856
|
} });
|
|
851
857
|
}
|
|
852
858
|
render() {
|
|
@@ -856,18 +862,18 @@ var st = class {
|
|
|
856
862
|
${x(n, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}</cx-select>`)}<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: {
|
|
857
863
|
mask: Number,
|
|
858
864
|
min: 1
|
|
859
|
-
} }} value=${this.unit ===
|
|
865
|
+
} }} value=${this.unit === D.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">
|
|
860
866
|
W
|
|
861
867
|
</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=${g({ color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0 })} ?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: {
|
|
862
868
|
mask: Number,
|
|
863
869
|
min: 1
|
|
864
|
-
} }} value=${this.unit ===
|
|
870
|
+
} }} value=${this.unit === D.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">
|
|
865
871
|
H
|
|
866
|
-
</cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<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=${
|
|
872
|
+
</cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<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=${D.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${D.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`)}</cx-space>${m(this.focusModes.length > 0, () => e`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${g({ width: "100%" })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${x(this.focusModes, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}</cx-select>`)}
|
|
867
873
|
${m(this.showPositionPicker && this.focusMode === "manual", () => e`<cx-position-picker data-testid="cx-asset-link-format-crop-position" value=${this.position} @cx-change=${this.onPositionChange}></cx-position-picker>`)}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${g({ marginLeft: "auto" })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
868
874
|
}
|
|
869
875
|
};
|
|
870
|
-
a([c(".details"), o("design:type",
|
|
876
|
+
a([c(".details"), o("design:type", E === void 0 ? Object : E)], K.prototype, "base", void 0), a([c("cx-position-picker"), o("design:type", j === void 0 ? Object : j)], K.prototype, "positionPicker", void 0), a([r({
|
|
871
877
|
reflect: !0,
|
|
872
878
|
type: Boolean
|
|
873
879
|
}), o("design:type", Boolean)], K.prototype, "open", void 0), a([r({
|
|
@@ -903,7 +909,7 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], K.prototype, "ba
|
|
|
903
909
|
}), o("design:type", Number)], K.prototype, "percentageHeight", void 0), a([r({
|
|
904
910
|
reflect: !0,
|
|
905
911
|
type: String
|
|
906
|
-
}), o("design:type",
|
|
912
|
+
}), o("design:type", D === void 0 ? Object : D)], K.prototype, "unit", void 0), a([r({
|
|
907
913
|
attribute: "disabled-apply",
|
|
908
914
|
reflect: !0,
|
|
909
915
|
type: Boolean
|
|
@@ -959,11 +965,11 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], K.prototype, "ba
|
|
|
959
965
|
o("design:paramtypes", []),
|
|
960
966
|
o("design:returntype", Promise)
|
|
961
967
|
], K.prototype, "handleOpenChange", null), K = a([u("cx-asset-link-format-crop")], K);
|
|
962
|
-
var
|
|
968
|
+
var pt = K, mt = t`.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%}}`, q = class extends s {
|
|
963
969
|
constructor(...e) {
|
|
964
970
|
super(...e), this.localize = new d(this), this.value = "", this.items = [];
|
|
965
971
|
}
|
|
966
|
-
static #e = this.styles = [l,
|
|
972
|
+
static #e = this.styles = [l, mt];
|
|
967
973
|
static #t = this.dependencies = {
|
|
968
974
|
"cx-option": S,
|
|
969
975
|
"cx-select": w,
|
|
@@ -985,15 +991,15 @@ a([r({
|
|
|
985
991
|
reflect: !1,
|
|
986
992
|
type: Array
|
|
987
993
|
}), o("design:type", typeof Array > "u" ? Object : Array)], q.prototype, "items", void 0), q = a([u("cx-asset-link-format-extension")], q);
|
|
988
|
-
var
|
|
994
|
+
var ht = q, gt = t`cx-details::part(base){border-bottom-width:0}`, _t = "auto", J = class extends s {
|
|
989
995
|
constructor(...e) {
|
|
990
996
|
super(...e), this.localize = new d(this), this.open = !1, this.value = "", this.items = [], this.canAutoFormat = !1, this.autoFormat = !1, this.loading = !1, this.scopedValue = "";
|
|
991
997
|
}
|
|
992
|
-
static #e = this.styles = [l,
|
|
998
|
+
static #e = this.styles = [l, gt];
|
|
993
999
|
static #t = this.dependencies = {
|
|
994
1000
|
"cx-button": _,
|
|
995
|
-
"cx-details":
|
|
996
|
-
"cx-divider":
|
|
1001
|
+
"cx-details": E,
|
|
1002
|
+
"cx-divider": me,
|
|
997
1003
|
"cx-icon": h,
|
|
998
1004
|
"cx-option": S,
|
|
999
1005
|
"cx-select": w,
|
|
@@ -1001,7 +1007,7 @@ var ft = q, pt = t`cx-details::part(base){border-bottom-width:0}`, mt = "auto",
|
|
|
1001
1007
|
"cx-typography": b
|
|
1002
1008
|
};
|
|
1003
1009
|
get committedValue() {
|
|
1004
|
-
return this.autoFormat ?
|
|
1010
|
+
return this.autoFormat ? _t : this.value;
|
|
1005
1011
|
}
|
|
1006
1012
|
handleValueChange() {
|
|
1007
1013
|
this.scopedValue = this.committedValue;
|
|
@@ -1033,10 +1039,10 @@ var ft = q, pt = t`cx-details::part(base){border-bottom-width:0}`, mt = "auto",
|
|
|
1033
1039
|
}
|
|
1034
1040
|
render() {
|
|
1035
1041
|
return e`<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}>${x(this.items, (e) => e.id, (t) => e`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`)}
|
|
1036
|
-
${m(this.canAutoFormat, () => e`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${
|
|
1042
|
+
${m(this.canAutoFormat, () => e`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${_t}>${this.localize.term("auto")}</cx-option>`, () => n)}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${g({ "margin-left": "auto" })} ?disabled=${this.scopedValue === this.committedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1037
1043
|
}
|
|
1038
1044
|
};
|
|
1039
|
-
a([c(".details"), o("design:type",
|
|
1045
|
+
a([c(".details"), o("design:type", E === void 0 ? Object : E)], J.prototype, "base", void 0), a([r({
|
|
1040
1046
|
reflect: !0,
|
|
1041
1047
|
type: Boolean
|
|
1042
1048
|
}), o("design:type", Object)], J.prototype, "open", void 0), a([r({
|
|
@@ -1068,14 +1074,14 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], J.prototype, "ba
|
|
|
1068
1074
|
o("design:paramtypes", []),
|
|
1069
1075
|
o("design:returntype", void 0)
|
|
1070
1076
|
], J.prototype, "handleOpenChange", null), J = a([u("cx-asset-link-format-proxy")], J);
|
|
1071
|
-
var
|
|
1077
|
+
var vt = J, yt = t`cx-details::part(base){border-bottom-width:0}`, Y = class extends s {
|
|
1072
1078
|
constructor(...e) {
|
|
1073
1079
|
super(...e), this.localize = new d(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
|
|
1074
1080
|
}
|
|
1075
|
-
static #e = this.styles = [l,
|
|
1081
|
+
static #e = this.styles = [l, yt];
|
|
1076
1082
|
static #t = this.dependencies = {
|
|
1077
1083
|
"cx-button": _,
|
|
1078
|
-
"cx-details":
|
|
1084
|
+
"cx-details": E,
|
|
1079
1085
|
"cx-icon": h,
|
|
1080
1086
|
"cx-input": oe,
|
|
1081
1087
|
"cx-space": C,
|
|
@@ -1109,7 +1115,7 @@ var ht = J, gt = t`cx-details::part(base){border-bottom-width:0}`, Y = class ext
|
|
|
1109
1115
|
} }} value=${this.scopedValue.toString()} style=${g({ flex: "1" })} @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>`;
|
|
1110
1116
|
}
|
|
1111
1117
|
};
|
|
1112
|
-
a([c(".details"), o("design:type",
|
|
1118
|
+
a([c(".details"), o("design:type", E === void 0 ? Object : E)], Y.prototype, "base", void 0), a([r({
|
|
1113
1119
|
reflect: !0,
|
|
1114
1120
|
type: Boolean
|
|
1115
1121
|
}), o("design:type", Object)], Y.prototype, "open", void 0), a([r({
|
|
@@ -1124,23 +1130,23 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], Y.prototype, "ba
|
|
|
1124
1130
|
o("design:paramtypes", []),
|
|
1125
1131
|
o("design:returntype", void 0)
|
|
1126
1132
|
], Y.prototype, "handleValueChange", null), Y = a([u("cx-asset-link-format-quality")], Y);
|
|
1127
|
-
var
|
|
1133
|
+
var bt = Y, xt = t`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}`, X = class extends s {
|
|
1128
1134
|
constructor(...e) {
|
|
1129
|
-
super(...e), this.localize = new d(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit =
|
|
1130
|
-
[
|
|
1135
|
+
super(...e), this.localize = new d(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = D.Pixel, this.lastAppliedSetting = {
|
|
1136
|
+
[D.Pixel]: {
|
|
1131
1137
|
height: 0,
|
|
1132
1138
|
width: 0
|
|
1133
1139
|
},
|
|
1134
|
-
[
|
|
1140
|
+
[D.AspectRatio]: {
|
|
1135
1141
|
height: 1,
|
|
1136
1142
|
width: 1
|
|
1137
1143
|
}
|
|
1138
1144
|
}, this.loading = !1, this.noRatioModes = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
|
|
1139
1145
|
}
|
|
1140
|
-
static #e = this.styles = [l,
|
|
1146
|
+
static #e = this.styles = [l, xt];
|
|
1141
1147
|
static #t = this.dependencies = {
|
|
1142
1148
|
"cx-button": _,
|
|
1143
|
-
"cx-details":
|
|
1149
|
+
"cx-details": E,
|
|
1144
1150
|
"cx-icon": h,
|
|
1145
1151
|
"cx-icon-button": p,
|
|
1146
1152
|
"cx-input": oe,
|
|
@@ -1155,11 +1161,11 @@ var _t = Y, vt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
|
|
|
1155
1161
|
async handleCropModeChange() {
|
|
1156
1162
|
let e = Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && this.maxWidth > 0 && this.maxHeight > 0;
|
|
1157
1163
|
if (this.keepAspectRatio) {
|
|
1158
|
-
if (this.unit ===
|
|
1164
|
+
if (this.unit === D.AspectRatio && this.ratioWidth && this.ratioHeight) {
|
|
1159
1165
|
this.aspectRatio = this.ratioWidth / this.ratioHeight;
|
|
1160
1166
|
return;
|
|
1161
1167
|
}
|
|
1162
|
-
if (this.unit ===
|
|
1168
|
+
if (this.unit === D.Pixel && !e && this.width && this.height) {
|
|
1163
1169
|
this.aspectRatio = this.width / this.height;
|
|
1164
1170
|
return;
|
|
1165
1171
|
}
|
|
@@ -1188,8 +1194,8 @@ var _t = Y, vt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
|
|
|
1188
1194
|
}
|
|
1189
1195
|
this.invalidWidth = !1;
|
|
1190
1196
|
let t = Number(e.target.value);
|
|
1191
|
-
this.unit ===
|
|
1192
|
-
let n = this.unit ===
|
|
1197
|
+
this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1)), e.target.value = t.toString();
|
|
1198
|
+
let n = this.unit === D.Pixel ? this.height : this.ratioHeight;
|
|
1193
1199
|
this.keepAspectRatio && (n = Math.min(Math.round(t / this.aspectRatio), this.maxHeight), this.invalidHeight = !1), this.emit("cx-asset-link-format-resize-change", { detail: {
|
|
1194
1200
|
height: n,
|
|
1195
1201
|
keepAspectRatio: this.keepAspectRatio,
|
|
@@ -1204,8 +1210,8 @@ var _t = Y, vt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
|
|
|
1204
1210
|
}
|
|
1205
1211
|
this.invalidHeight = !1;
|
|
1206
1212
|
let t = Number(e.target.value);
|
|
1207
|
-
this.unit ===
|
|
1208
|
-
let n = this.unit ===
|
|
1213
|
+
this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1)), e.target.value = t.toString();
|
|
1214
|
+
let n = this.unit === D.Pixel ? this.width : this.ratioWidth;
|
|
1209
1215
|
this.keepAspectRatio && (n = Math.min(Math.round(t * this.aspectRatio), this.maxWidth), this.invalidWidth = !1), this.emit("cx-asset-link-format-resize-change", { detail: {
|
|
1210
1216
|
height: t,
|
|
1211
1217
|
keepAspectRatio: this.keepAspectRatio,
|
|
@@ -1214,16 +1220,16 @@ var _t = Y, vt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
|
|
|
1214
1220
|
} });
|
|
1215
1221
|
}
|
|
1216
1222
|
onUnitChange(e) {
|
|
1217
|
-
e.target.value ===
|
|
1218
|
-
height: this.lastAppliedSetting[
|
|
1223
|
+
e.target.value === D.AspectRatio ? this.emit("cx-asset-link-format-resize-change", { detail: {
|
|
1224
|
+
height: this.lastAppliedSetting[D.AspectRatio].height,
|
|
1219
1225
|
keepAspectRatio: this.keepAspectRatio,
|
|
1220
|
-
unit:
|
|
1221
|
-
width: this.lastAppliedSetting[
|
|
1226
|
+
unit: D.AspectRatio,
|
|
1227
|
+
width: this.lastAppliedSetting[D.AspectRatio].width
|
|
1222
1228
|
} }) : this.emit("cx-asset-link-format-resize-change", { detail: {
|
|
1223
|
-
height: this.lastAppliedSetting[
|
|
1229
|
+
height: this.lastAppliedSetting[D.Pixel].height,
|
|
1224
1230
|
keepAspectRatio: this.keepAspectRatio,
|
|
1225
|
-
unit:
|
|
1226
|
-
width: this.lastAppliedSetting[
|
|
1231
|
+
unit: D.Pixel,
|
|
1232
|
+
width: this.lastAppliedSetting[D.Pixel].width
|
|
1227
1233
|
} });
|
|
1228
1234
|
}
|
|
1229
1235
|
handleApply() {
|
|
@@ -1241,27 +1247,27 @@ var _t = Y, vt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
|
|
|
1241
1247
|
}
|
|
1242
1248
|
handleAspectRatioClick() {
|
|
1243
1249
|
this.emit("cx-asset-link-format-resize-change", { detail: {
|
|
1244
|
-
height: this.unit ===
|
|
1250
|
+
height: this.unit === D.Pixel ? this.height : this.ratioHeight,
|
|
1245
1251
|
keepAspectRatio: !this.keepAspectRatio,
|
|
1246
1252
|
unit: this.unit,
|
|
1247
|
-
width: this.unit ===
|
|
1253
|
+
width: this.unit === D.Pixel ? this.width : this.ratioWidth
|
|
1248
1254
|
} });
|
|
1249
1255
|
}
|
|
1250
1256
|
render() {
|
|
1251
1257
|
return e`<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: {
|
|
1252
1258
|
mask: Number,
|
|
1253
1259
|
min: 1
|
|
1254
|
-
} }} value=${this.unit ===
|
|
1260
|
+
} }} value=${this.unit === D.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
|
|
1255
1261
|
W
|
|
1256
1262
|
</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=${g({ color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0 })} ?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: {
|
|
1257
1263
|
mask: Number,
|
|
1258
1264
|
min: 1
|
|
1259
|
-
} }} value=${this.unit ===
|
|
1265
|
+
} }} value=${this.unit === D.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
|
|
1260
1266
|
H
|
|
1261
|
-
</cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<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=${
|
|
1267
|
+
</cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<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=${D.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${D.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`)}</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=${g({ marginLeft: "auto" })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
|
|
1262
1268
|
}
|
|
1263
1269
|
};
|
|
1264
|
-
a([c(".details"), o("design:type",
|
|
1270
|
+
a([c(".details"), o("design:type", E === void 0 ? Object : E)], X.prototype, "base", void 0), a([r({
|
|
1265
1271
|
reflect: !0,
|
|
1266
1272
|
type: Boolean
|
|
1267
1273
|
}), o("design:type", Boolean)], X.prototype, "open", void 0), a([r({
|
|
@@ -1289,7 +1295,7 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], X.prototype, "ba
|
|
|
1289
1295
|
}), o("design:type", Number)], X.prototype, "ratioHeight", void 0), a([r({
|
|
1290
1296
|
reflect: !0,
|
|
1291
1297
|
type: String
|
|
1292
|
-
}), o("design:type",
|
|
1298
|
+
}), o("design:type", D === void 0 ? Object : D)], X.prototype, "unit", void 0), a([r({
|
|
1293
1299
|
attribute: "last-applied-setting",
|
|
1294
1300
|
reflect: !1,
|
|
1295
1301
|
type: Object
|
|
@@ -1318,15 +1324,15 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], X.prototype, "ba
|
|
|
1318
1324
|
o("design:paramtypes", []),
|
|
1319
1325
|
o("design:returntype", Promise)
|
|
1320
1326
|
], X.prototype, "handleOpenChange", null), X = a([u("cx-asset-link-format-resize")], X);
|
|
1321
|
-
var
|
|
1327
|
+
var St = X, Ct = t`cx-details::part(base){border-bottom-width:0}`, Z = class extends s {
|
|
1322
1328
|
constructor(...e) {
|
|
1323
1329
|
super(...e), this.localize = new d(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
|
|
1324
1330
|
}
|
|
1325
|
-
static #e = this.styles = [l,
|
|
1331
|
+
static #e = this.styles = [l, Ct];
|
|
1326
1332
|
static #t = this.dependencies = {
|
|
1327
1333
|
"cx-button": _,
|
|
1328
1334
|
"cx-button-group": ie,
|
|
1329
|
-
"cx-details":
|
|
1335
|
+
"cx-details": E,
|
|
1330
1336
|
"cx-icon": h,
|
|
1331
1337
|
"cx-icon-button": p,
|
|
1332
1338
|
"cx-space": C,
|
|
@@ -1365,7 +1371,7 @@ var yt = X, bt = t`cx-details::part(base){border-bottom-width:0}`, Z = class ext
|
|
|
1365
1371
|
})} @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>`;
|
|
1366
1372
|
}
|
|
1367
1373
|
};
|
|
1368
|
-
a([c(".details"), o("design:type",
|
|
1374
|
+
a([c(".details"), o("design:type", E === void 0 ? Object : E)], Z.prototype, "base", void 0), a([r({
|
|
1369
1375
|
reflect: !0,
|
|
1370
1376
|
type: Boolean
|
|
1371
1377
|
}), o("design:type", Object)], Z.prototype, "open", void 0), a([r({
|
|
@@ -1388,15 +1394,15 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], Z.prototype, "ba
|
|
|
1388
1394
|
o("design:paramtypes", []),
|
|
1389
1395
|
o("design:returntype", void 0)
|
|
1390
1396
|
], Z.prototype, "handleOpenChange", null), Z = a([u("cx-asset-link-format-rotation")], Z);
|
|
1391
|
-
var
|
|
1397
|
+
var wt = Z, Tt = t`cx-details::part(base){border-bottom-width:0}`, Q = class extends s {
|
|
1392
1398
|
constructor(...e) {
|
|
1393
1399
|
super(...e), this.localize = new d(this), this.open = !1, this.value = !1;
|
|
1394
1400
|
}
|
|
1395
|
-
static #e = this.styles = [l,
|
|
1401
|
+
static #e = this.styles = [l, Tt];
|
|
1396
1402
|
static #t = this.dependencies = {
|
|
1397
1403
|
"cx-button": _,
|
|
1398
1404
|
"cx-checkbox": ae,
|
|
1399
|
-
"cx-details":
|
|
1405
|
+
"cx-details": E,
|
|
1400
1406
|
"cx-icon": h,
|
|
1401
1407
|
"cx-space": C,
|
|
1402
1408
|
"cx-tooltip": te,
|
|
@@ -1415,47 +1421,47 @@ var xt = Z, St = t`cx-details::part(base){border-bottom-width:0}`, Q = class ext
|
|
|
1415
1421
|
return e`<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>`;
|
|
1416
1422
|
}
|
|
1417
1423
|
};
|
|
1418
|
-
a([c(".details"), o("design:type",
|
|
1424
|
+
a([c(".details"), o("design:type", E === void 0 ? Object : E)], Q.prototype, "base", void 0), a([r({
|
|
1419
1425
|
reflect: !0,
|
|
1420
1426
|
type: Boolean
|
|
1421
1427
|
}), o("design:type", Object)], Q.prototype, "open", void 0), a([r({
|
|
1422
1428
|
reflect: !0,
|
|
1423
1429
|
type: Boolean
|
|
1424
1430
|
}), o("design:type", Object)], Q.prototype, "value", void 0), Q = a([u("cx-asset-link-format-metadata")], Q);
|
|
1425
|
-
var
|
|
1426
|
-
static #e =
|
|
1427
|
-
static #t = this.styles = [l,
|
|
1431
|
+
var Et = Q, Dt, $ = class extends s {
|
|
1432
|
+
static #e = Dt = this;
|
|
1433
|
+
static #t = this.styles = [l, dt];
|
|
1428
1434
|
static #n = this.dependencies = {
|
|
1429
|
-
"cx-asset-link-format-crop":
|
|
1430
|
-
"cx-asset-link-format-extension":
|
|
1431
|
-
"cx-asset-link-format-metadata":
|
|
1432
|
-
"cx-asset-link-format-proxy":
|
|
1433
|
-
"cx-asset-link-format-quality":
|
|
1434
|
-
"cx-asset-link-format-resize":
|
|
1435
|
-
"cx-asset-link-format-rotation":
|
|
1435
|
+
"cx-asset-link-format-crop": pt,
|
|
1436
|
+
"cx-asset-link-format-extension": ht,
|
|
1437
|
+
"cx-asset-link-format-metadata": Et,
|
|
1438
|
+
"cx-asset-link-format-proxy": vt,
|
|
1439
|
+
"cx-asset-link-format-quality": bt,
|
|
1440
|
+
"cx-asset-link-format-resize": St,
|
|
1441
|
+
"cx-asset-link-format-rotation": wt,
|
|
1436
1442
|
"cx-button": _,
|
|
1437
1443
|
"cx-space": C,
|
|
1438
1444
|
"cx-typography": b
|
|
1439
1445
|
};
|
|
1440
1446
|
static getTransformExtension(e) {
|
|
1441
|
-
return !e ||
|
|
1447
|
+
return !e || st(e) ? e : "jpg";
|
|
1442
1448
|
}
|
|
1443
1449
|
get hasUnfrozenTransformations() {
|
|
1444
1450
|
return !(this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1);
|
|
1445
1451
|
}
|
|
1446
1452
|
get lastAppliedCropUnit() {
|
|
1447
|
-
return this.transformations.findLast((e) => e.key ===
|
|
1453
|
+
return this.transformations.findLast((e) => e.key === k.Crop)?.value.unit ?? D.Pixel;
|
|
1448
1454
|
}
|
|
1449
1455
|
get lastAppliedCropFocusMode() {
|
|
1450
|
-
return this.transformations.findLast((e) => e.key ===
|
|
1456
|
+
return this.transformations.findLast((e) => e.key === k.Crop)?.value.focusMode ?? "manual";
|
|
1451
1457
|
}
|
|
1452
1458
|
get lastAppliedCropPosition() {
|
|
1453
|
-
return this.transformations.findLast((e) => e.key ===
|
|
1459
|
+
return this.transformations.findLast((e) => e.key === k.Crop)?.value.position ?? v.CenterCenter;
|
|
1454
1460
|
}
|
|
1455
1461
|
get disabledCropApply() {
|
|
1456
1462
|
if (!this.asset && this.cropSize.unit !== this.lastAppliedCropUnit) return !1;
|
|
1457
|
-
if (this.cropSize.unit ===
|
|
1458
|
-
let e = this.lastCropSize[
|
|
1463
|
+
if (this.cropSize.unit === D.AspectRatio && !this.asset) {
|
|
1464
|
+
let e = this.lastCropSize[D.AspectRatio];
|
|
1459
1465
|
return this.cropSize.ratioWidth === e.width && this.cropSize.ratioHeight === e.height && this.cropSize.focusMode === this.lastAppliedCropFocusMode && this.cropSize.position === this.lastAppliedCropPosition;
|
|
1460
1466
|
}
|
|
1461
1467
|
if (!this.asset && this.cropSize.focusMode !== this.lastAppliedCropFocusMode || !this.asset && this.cropSize.position !== this.lastAppliedCropPosition) return !1;
|
|
@@ -1466,7 +1472,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1466
1472
|
"width",
|
|
1467
1473
|
"x",
|
|
1468
1474
|
"y"
|
|
1469
|
-
]) if (this.cropSize[e] !== this.lastCropSize[
|
|
1475
|
+
]) if (this.cropSize[e] !== this.lastCropSize[D.Pixel][e]) return !1;
|
|
1470
1476
|
return !0;
|
|
1471
1477
|
}
|
|
1472
1478
|
get formats() {
|
|
@@ -1480,22 +1486,22 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1480
1486
|
}
|
|
1481
1487
|
get lastCropSize() {
|
|
1482
1488
|
if (!this.asset) {
|
|
1483
|
-
let e = this.transformations.findLast((e) => e.key ===
|
|
1484
|
-
if (e?.value.unit ===
|
|
1485
|
-
[
|
|
1489
|
+
let e = this.transformations.findLast((e) => e.key === k.Crop);
|
|
1490
|
+
if (e?.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
|
|
1491
|
+
[D.AspectRatio]: {
|
|
1486
1492
|
height: e.value.ratioHeight,
|
|
1487
1493
|
percentageHeight: 100,
|
|
1488
1494
|
percentageWidth: 100,
|
|
1489
|
-
unit:
|
|
1495
|
+
unit: D.AspectRatio,
|
|
1490
1496
|
width: e.value.ratioWidth,
|
|
1491
1497
|
x: 0,
|
|
1492
1498
|
y: 0
|
|
1493
1499
|
},
|
|
1494
|
-
[
|
|
1500
|
+
[D.Pixel]: {
|
|
1495
1501
|
height: 1,
|
|
1496
1502
|
percentageHeight: 100,
|
|
1497
1503
|
percentageWidth: 100,
|
|
1498
|
-
unit:
|
|
1504
|
+
unit: D.Pixel,
|
|
1499
1505
|
width: 1,
|
|
1500
1506
|
x: 0,
|
|
1501
1507
|
y: 0
|
|
@@ -1504,20 +1510,20 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1504
1510
|
if (e?.value.width && e?.value.height) {
|
|
1505
1511
|
let { height: t, width: n, x: r = 0, y: i = 0 } = e.value, a = y(n, t);
|
|
1506
1512
|
return {
|
|
1507
|
-
[
|
|
1513
|
+
[D.AspectRatio]: {
|
|
1508
1514
|
height: a.height,
|
|
1509
1515
|
percentageHeight: 100,
|
|
1510
1516
|
percentageWidth: 100,
|
|
1511
|
-
unit:
|
|
1517
|
+
unit: D.AspectRatio,
|
|
1512
1518
|
width: a.width,
|
|
1513
1519
|
x: 0,
|
|
1514
1520
|
y: 0
|
|
1515
1521
|
},
|
|
1516
|
-
[
|
|
1522
|
+
[D.Pixel]: {
|
|
1517
1523
|
height: t,
|
|
1518
1524
|
percentageHeight: 100,
|
|
1519
1525
|
percentageWidth: 100,
|
|
1520
|
-
unit:
|
|
1526
|
+
unit: D.Pixel,
|
|
1521
1527
|
width: n,
|
|
1522
1528
|
x: r,
|
|
1523
1529
|
y: i
|
|
@@ -1530,20 +1536,20 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1530
1536
|
width: 1
|
|
1531
1537
|
};
|
|
1532
1538
|
return {
|
|
1533
|
-
[
|
|
1539
|
+
[D.AspectRatio]: {
|
|
1534
1540
|
height: e.height,
|
|
1535
1541
|
percentageHeight: 100,
|
|
1536
1542
|
percentageWidth: 100,
|
|
1537
|
-
unit:
|
|
1543
|
+
unit: D.AspectRatio,
|
|
1538
1544
|
width: e.width,
|
|
1539
1545
|
x: 0,
|
|
1540
1546
|
y: 0
|
|
1541
1547
|
},
|
|
1542
|
-
[
|
|
1548
|
+
[D.Pixel]: {
|
|
1543
1549
|
height: this.lastImageSize.height,
|
|
1544
1550
|
percentageHeight: 100,
|
|
1545
1551
|
percentageWidth: 100,
|
|
1546
|
-
unit:
|
|
1552
|
+
unit: D.Pixel,
|
|
1547
1553
|
width: this.lastImageSize.width,
|
|
1548
1554
|
x: 0,
|
|
1549
1555
|
y: 0
|
|
@@ -1552,30 +1558,30 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1552
1558
|
}
|
|
1553
1559
|
get lastResizeSize() {
|
|
1554
1560
|
if (!this.asset) {
|
|
1555
|
-
let e = this.transformations.findLast((e) => e.key ===
|
|
1556
|
-
if (e?.value.unit ===
|
|
1557
|
-
[
|
|
1561
|
+
let e = this.transformations.findLast((e) => e.key === k.Resize);
|
|
1562
|
+
if (e?.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
|
|
1563
|
+
[D.AspectRatio]: {
|
|
1558
1564
|
height: e.value.ratioHeight,
|
|
1559
|
-
unit:
|
|
1565
|
+
unit: D.AspectRatio,
|
|
1560
1566
|
width: e.value.ratioWidth
|
|
1561
1567
|
},
|
|
1562
|
-
[
|
|
1568
|
+
[D.Pixel]: {
|
|
1563
1569
|
height: 1,
|
|
1564
|
-
unit:
|
|
1570
|
+
unit: D.Pixel,
|
|
1565
1571
|
width: 1
|
|
1566
1572
|
}
|
|
1567
1573
|
};
|
|
1568
1574
|
if (e?.value.width && e?.value.height) {
|
|
1569
1575
|
let { height: t, width: n } = e.value, r = y(n, t);
|
|
1570
1576
|
return {
|
|
1571
|
-
[
|
|
1577
|
+
[D.AspectRatio]: {
|
|
1572
1578
|
height: r.height,
|
|
1573
|
-
unit:
|
|
1579
|
+
unit: D.AspectRatio,
|
|
1574
1580
|
width: r.width
|
|
1575
1581
|
},
|
|
1576
|
-
[
|
|
1582
|
+
[D.Pixel]: {
|
|
1577
1583
|
height: t,
|
|
1578
|
-
unit:
|
|
1584
|
+
unit: D.Pixel,
|
|
1579
1585
|
width: n
|
|
1580
1586
|
}
|
|
1581
1587
|
};
|
|
@@ -1586,23 +1592,23 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1586
1592
|
width: 1
|
|
1587
1593
|
};
|
|
1588
1594
|
return {
|
|
1589
|
-
[
|
|
1595
|
+
[D.AspectRatio]: {
|
|
1590
1596
|
height: e.height,
|
|
1591
|
-
unit:
|
|
1597
|
+
unit: D.AspectRatio,
|
|
1592
1598
|
width: e.width
|
|
1593
1599
|
},
|
|
1594
|
-
[
|
|
1600
|
+
[D.Pixel]: {
|
|
1595
1601
|
height: this.lastImageSize.height,
|
|
1596
|
-
unit:
|
|
1602
|
+
unit: D.Pixel,
|
|
1597
1603
|
width: this.lastImageSize.width
|
|
1598
1604
|
}
|
|
1599
1605
|
};
|
|
1600
1606
|
}
|
|
1601
1607
|
get lastRotation() {
|
|
1602
|
-
return this.asset ? 0 : this.transformations.findLast((e) => e.key ===
|
|
1608
|
+
return this.asset ? 0 : this.transformations.findLast((e) => e.key === k.Rotate)?.value.rotation ?? 0;
|
|
1603
1609
|
}
|
|
1604
1610
|
get transformationString() {
|
|
1605
|
-
return
|
|
1611
|
+
return T({
|
|
1606
1612
|
asset: this.asset,
|
|
1607
1613
|
baseUrl: "",
|
|
1608
1614
|
parameters: this.parameters,
|
|
@@ -1678,7 +1684,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1678
1684
|
keepAspectRatio: !0,
|
|
1679
1685
|
ratioHeight: 1,
|
|
1680
1686
|
ratioWidth: 1,
|
|
1681
|
-
unit:
|
|
1687
|
+
unit: D.Pixel,
|
|
1682
1688
|
width: 1
|
|
1683
1689
|
}, this.cropSize = {
|
|
1684
1690
|
cropMode: "free",
|
|
@@ -1690,14 +1696,14 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1690
1696
|
position: v.CenterCenter,
|
|
1691
1697
|
ratioHeight: 1,
|
|
1692
1698
|
ratioWidth: 1,
|
|
1693
|
-
unit:
|
|
1699
|
+
unit: D.Pixel,
|
|
1694
1700
|
width: 1,
|
|
1695
1701
|
x: 0,
|
|
1696
1702
|
y: 0
|
|
1697
1703
|
}, this.rotation = 0, this.defaultSize = {
|
|
1698
1704
|
height: 0,
|
|
1699
1705
|
width: 0
|
|
1700
|
-
}, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0, this.apiGetTransformAssetLink =
|
|
1706
|
+
}, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0, this.apiGetTransformAssetLink = Ye, this.apiGetCropFocusMode = et, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
|
|
1701
1707
|
}
|
|
1702
1708
|
runConnectedCallback() {
|
|
1703
1709
|
this.hasUpdated && (this.handleCropperSelectorChange(), this.cropperElement && (this.cropperElement.addEventListener("cx-cropper-crop-complete", this.onCropComplete), this.cropperElement.addEventListener("cx-cropper-crop-drag-start", this.onCropDragStart)));
|
|
@@ -1713,7 +1719,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1713
1719
|
if (e.has("activeSetting") && this.handleActiveSettingChange(), e.has("selectedFormat") && this.handleSelectedFormatChange(), e.has("resizeSize") && this.handleResizeSizeChange(), e.has("cropSize") && this.handleCropSizeChange(), e.has("rotation") && this.handleRotationChange(), e.has("cropperElement") && this.handleCropperElementChange(), e.has("selectedFormat")) {
|
|
1714
1720
|
if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === e.get("selectedFormat")?.extension) return;
|
|
1715
1721
|
this.loading = !0, this.requestTransformAsset().then((e) => {
|
|
1716
|
-
this.loading = !1, e?.relativePath && this.selectedFormat && (this.lastAction ===
|
|
1722
|
+
this.loading = !1, e?.relativePath && this.selectedFormat && (this.lastAction === k.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
|
|
1717
1723
|
height: e.height,
|
|
1718
1724
|
width: e.width
|
|
1719
1725
|
}, this.selectedFormat = {
|
|
@@ -1723,7 +1729,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1723
1729
|
width: e.width
|
|
1724
1730
|
});
|
|
1725
1731
|
});
|
|
1726
|
-
let t =
|
|
1732
|
+
let t = T({
|
|
1727
1733
|
asset: this.asset,
|
|
1728
1734
|
baseUrl: "",
|
|
1729
1735
|
extension: this.selectedFormat.extension,
|
|
@@ -1747,7 +1753,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1747
1753
|
get transformRequestOptions() {
|
|
1748
1754
|
return {
|
|
1749
1755
|
assetId: this.asset?.id ?? "",
|
|
1750
|
-
extension:
|
|
1756
|
+
extension: Dt.getTransformExtension(this.selectedFormat?.extension ?? ""),
|
|
1751
1757
|
format: this.proxies?.find((e) => e.id === this.selectedProxy)?.proxyName ?? "",
|
|
1752
1758
|
siteUrl: this.baseUrl,
|
|
1753
1759
|
token: this.token,
|
|
@@ -1785,7 +1791,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1785
1791
|
}
|
|
1786
1792
|
async handleTransformationsChange() {
|
|
1787
1793
|
if (await this.updateComplete, !this.asset) {
|
|
1788
|
-
this.emit("cx-asset-link-format-change", { detail:
|
|
1794
|
+
this.emit("cx-asset-link-format-change", { detail: T({
|
|
1789
1795
|
asset: this.asset,
|
|
1790
1796
|
baseUrl: "",
|
|
1791
1797
|
options: { omitZeroXY: !0 },
|
|
@@ -1793,8 +1799,8 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1793
1799
|
transformations: this.transformations,
|
|
1794
1800
|
useSession: this.useSession
|
|
1795
1801
|
}).replace(/\/t\//g, "") });
|
|
1796
|
-
let e = this.transformations.findLast((e) => e.key ===
|
|
1797
|
-
if (e?.value.unit ===
|
|
1802
|
+
let e = this.transformations.findLast((e) => e.key === k.Crop && (e.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width && e.value.height));
|
|
1803
|
+
if (e?.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) {
|
|
1798
1804
|
let { focusMode: t, position: n, ratioHeight: r, ratioWidth: i } = e.value;
|
|
1799
1805
|
this.cropSize = {
|
|
1800
1806
|
...this.cropSize,
|
|
@@ -1805,7 +1811,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1805
1811
|
position: n ?? v.CenterCenter,
|
|
1806
1812
|
ratioHeight: r,
|
|
1807
1813
|
ratioWidth: i,
|
|
1808
|
-
unit:
|
|
1814
|
+
unit: D.AspectRatio
|
|
1809
1815
|
};
|
|
1810
1816
|
} else if (e) {
|
|
1811
1817
|
let { focusMode: t, height: n, position: r, unit: i, width: a, x: o = 0, y: s = 0 } = e.value;
|
|
@@ -1817,7 +1823,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1817
1823
|
percentageHeight: 100,
|
|
1818
1824
|
percentageWidth: 100,
|
|
1819
1825
|
position: r ?? v.CenterCenter,
|
|
1820
|
-
unit: i ??
|
|
1826
|
+
unit: i ?? D.Pixel,
|
|
1821
1827
|
width: a,
|
|
1822
1828
|
x: o,
|
|
1823
1829
|
y: s
|
|
@@ -1830,37 +1836,37 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1830
1836
|
percentageHeight: 0,
|
|
1831
1837
|
percentageWidth: 0,
|
|
1832
1838
|
position: v.CenterCenter,
|
|
1833
|
-
unit:
|
|
1839
|
+
unit: D.Pixel,
|
|
1834
1840
|
width: 1,
|
|
1835
1841
|
x: 0,
|
|
1836
1842
|
y: 0
|
|
1837
1843
|
};
|
|
1838
|
-
let t = this.transformations.findLast((e) => e.key ===
|
|
1839
|
-
if (t?.value.unit ===
|
|
1844
|
+
let t = this.transformations.findLast((e) => e.key === k.Resize && (e.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width || e.value.height));
|
|
1845
|
+
if (t?.value.unit === D.AspectRatio && t.value.ratioWidth && t.value.ratioHeight) {
|
|
1840
1846
|
let { ratioHeight: e, ratioWidth: n } = t.value;
|
|
1841
1847
|
this.resizeSize = {
|
|
1842
1848
|
...this.resizeSize,
|
|
1843
1849
|
ratioHeight: e,
|
|
1844
1850
|
ratioWidth: n,
|
|
1845
|
-
unit:
|
|
1851
|
+
unit: D.AspectRatio
|
|
1846
1852
|
};
|
|
1847
1853
|
} else if (t) {
|
|
1848
1854
|
let { height: e = 0, unit: n, width: r = 0 } = t.value;
|
|
1849
1855
|
this.resizeSize = {
|
|
1850
1856
|
...this.resizeSize,
|
|
1851
1857
|
height: e,
|
|
1852
|
-
unit: n ??
|
|
1858
|
+
unit: n ?? D.Pixel,
|
|
1853
1859
|
width: r
|
|
1854
1860
|
};
|
|
1855
1861
|
} else this.resizeSize = {
|
|
1856
1862
|
...this.resizeSize,
|
|
1857
1863
|
height: 1,
|
|
1858
|
-
unit:
|
|
1864
|
+
unit: D.Pixel,
|
|
1859
1865
|
width: 1
|
|
1860
1866
|
};
|
|
1861
|
-
let n = this.transformations.findLast((e) => e.key ===
|
|
1867
|
+
let n = this.transformations.findLast((e) => e.key === k.Rotate);
|
|
1862
1868
|
this.rotation = n?.value.rotation ?? 0;
|
|
1863
|
-
let r = this.transformations.findLast((e) => e.key ===
|
|
1869
|
+
let r = this.transformations.findLast((e) => e.key === k.Quality)?.value.quality ?? 100, i = this.transformations.some((e) => e.key === k.Metadata);
|
|
1864
1870
|
this.selectedFormat = this.selectedFormat ? {
|
|
1865
1871
|
...this.selectedFormat,
|
|
1866
1872
|
keepMetadata: i,
|
|
@@ -1890,7 +1896,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1890
1896
|
keepAspectRatio: !0,
|
|
1891
1897
|
ratioHeight: 1,
|
|
1892
1898
|
ratioWidth: 1,
|
|
1893
|
-
unit:
|
|
1899
|
+
unit: D.Pixel,
|
|
1894
1900
|
width: e.width
|
|
1895
1901
|
}, this.cropSize = {
|
|
1896
1902
|
cropMode: "free",
|
|
@@ -1902,12 +1908,12 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1902
1908
|
position: v.CenterCenter,
|
|
1903
1909
|
ratioHeight: 1,
|
|
1904
1910
|
ratioWidth: 1,
|
|
1905
|
-
unit:
|
|
1911
|
+
unit: D.Pixel,
|
|
1906
1912
|
width: e.width,
|
|
1907
1913
|
x: 0,
|
|
1908
1914
|
y: 0
|
|
1909
|
-
}, this.lastAction ===
|
|
1910
|
-
let t = this.transformations.some((e) => e.key ===
|
|
1915
|
+
}, this.lastAction === k.Rotate && (this.rotation = 0), this.lastAction = void 0;
|
|
1916
|
+
let t = this.transformations.some((e) => e.key === k.Metadata), n = this.transformations.findLast((e) => e.key === k.Quality);
|
|
1911
1917
|
this.selectedFormat = {
|
|
1912
1918
|
...this.selectedFormat,
|
|
1913
1919
|
height: e.height,
|
|
@@ -1916,7 +1922,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1916
1922
|
url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
|
|
1917
1923
|
width: e.width
|
|
1918
1924
|
};
|
|
1919
|
-
let r =
|
|
1925
|
+
let r = T({
|
|
1920
1926
|
asset: this.asset,
|
|
1921
1927
|
baseUrl: "",
|
|
1922
1928
|
extension: this.selectedFormat.extension,
|
|
@@ -1938,7 +1944,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1938
1944
|
height: Number.parseInt(this.asset.height, 10),
|
|
1939
1945
|
width: Number.parseInt(this.asset.width, 10)
|
|
1940
1946
|
});
|
|
1941
|
-
let e = this.transformations.findLast((e) => e.key ===
|
|
1947
|
+
let e = this.transformations.findLast((e) => e.key === k.Quality);
|
|
1942
1948
|
this.selectedFormat = {
|
|
1943
1949
|
extension: this.asset.extension,
|
|
1944
1950
|
height: this.defaultSize.height,
|
|
@@ -1963,7 +1969,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1963
1969
|
position: v.CenterCenter,
|
|
1964
1970
|
ratioHeight: 1,
|
|
1965
1971
|
ratioWidth: 1,
|
|
1966
|
-
unit:
|
|
1972
|
+
unit: D.Pixel,
|
|
1967
1973
|
width: this.defaultSize.width,
|
|
1968
1974
|
x: 0,
|
|
1969
1975
|
y: 0
|
|
@@ -1982,7 +1988,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1982
1988
|
t.proxyName === "TRX" && (t.formatHeight = Number(this.asset.height), t.formatWidth = Number(this.asset.width));
|
|
1983
1989
|
let n = this.proxies?.find((t) => t.id === e);
|
|
1984
1990
|
n && (this.asset && n.proxyName === "TRX" && (n.formatHeight = Number(this.asset.height), n.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((e) => {
|
|
1985
|
-
if (e.key ===
|
|
1991
|
+
if (e.key === k.Crop) {
|
|
1986
1992
|
let r = e.value, i = r.width / n.formatWidth * t.formatWidth, a = r.height / n.formatHeight * t.formatHeight, o = r.x / n.formatWidth * t.formatWidth, s = r.y / n.formatHeight * t.formatHeight;
|
|
1987
1993
|
return {
|
|
1988
1994
|
...e,
|
|
@@ -1995,7 +2001,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
1995
2001
|
}
|
|
1996
2002
|
};
|
|
1997
2003
|
}
|
|
1998
|
-
if (e.key ===
|
|
2004
|
+
if (e.key === k.Resize) {
|
|
1999
2005
|
let r = e.value, i = r.width / n.formatWidth * t.formatWidth, a = r.height / n.formatHeight * t.formatHeight;
|
|
2000
2006
|
return {
|
|
2001
2007
|
...e,
|
|
@@ -2016,24 +2022,24 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2016
2022
|
}, await this.updateComplete, this.cropSize = {
|
|
2017
2023
|
cropMode: "free",
|
|
2018
2024
|
focusMode: "manual",
|
|
2019
|
-
height: this.lastCropSize[
|
|
2025
|
+
height: this.lastCropSize[D.Pixel].height,
|
|
2020
2026
|
keepAspectRatio: !0,
|
|
2021
2027
|
percentageHeight: 100,
|
|
2022
2028
|
percentageWidth: 100,
|
|
2023
2029
|
position: v.CenterCenter,
|
|
2024
2030
|
ratioHeight: 1,
|
|
2025
2031
|
ratioWidth: 1,
|
|
2026
|
-
unit:
|
|
2027
|
-
width: this.lastCropSize[
|
|
2032
|
+
unit: D.Pixel,
|
|
2033
|
+
width: this.lastCropSize[D.Pixel].width,
|
|
2028
2034
|
x: 0,
|
|
2029
2035
|
y: 0
|
|
2030
2036
|
}, this.resizeSize = {
|
|
2031
|
-
height: this.lastResizeSize[
|
|
2037
|
+
height: this.lastResizeSize[D.Pixel].height,
|
|
2032
2038
|
keepAspectRatio: !0,
|
|
2033
2039
|
ratioHeight: 1,
|
|
2034
2040
|
ratioWidth: 1,
|
|
2035
|
-
unit:
|
|
2036
|
-
width: this.lastResizeSize[
|
|
2041
|
+
unit: D.Pixel,
|
|
2042
|
+
width: this.lastResizeSize[D.Pixel].width
|
|
2037
2043
|
};
|
|
2038
2044
|
}
|
|
2039
2045
|
handleLoadingChange() {
|
|
@@ -2053,17 +2059,17 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2053
2059
|
}
|
|
2054
2060
|
handleActiveSettingChange() {
|
|
2055
2061
|
this.cropperElement && (this.resizeSize = {
|
|
2056
|
-
height: this.lastResizeSize[
|
|
2062
|
+
height: this.lastResizeSize[D.Pixel].height,
|
|
2057
2063
|
keepAspectRatio: !0,
|
|
2058
2064
|
ratioHeight: 1,
|
|
2059
2065
|
ratioWidth: 1,
|
|
2060
|
-
unit:
|
|
2061
|
-
width: this.lastResizeSize[
|
|
2066
|
+
unit: D.Pixel,
|
|
2067
|
+
width: this.lastResizeSize[D.Pixel].width
|
|
2062
2068
|
}, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop");
|
|
2063
2069
|
}
|
|
2064
2070
|
async handleRequestAutoCropSuggestion({ cropMode: e, focusMode: t, height: n, keepAspectRatio: r, percentageHeight: i, percentageWidth: a, ratioHeight: o, ratioWidth: s, unit: c, useCropMode: l, width: u }) {
|
|
2065
2071
|
if (!this.selectedFormat?.url || t === "manual") return;
|
|
2066
|
-
this.loading = !0, this.lastAction =
|
|
2072
|
+
this.loading = !0, this.lastAction = k.Crop;
|
|
2067
2073
|
let d = await this.apiGetCropFocusMode({
|
|
2068
2074
|
autoCropMode: t,
|
|
2069
2075
|
cropHeight: n,
|
|
@@ -2134,12 +2140,12 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2134
2140
|
this.activeSetting === e.target.localName && (this.activeSetting = "");
|
|
2135
2141
|
}
|
|
2136
2142
|
get autoResolvedProxyId() {
|
|
2137
|
-
let e =
|
|
2143
|
+
let e = pe(this.asset?.extension, this.asset?.size);
|
|
2138
2144
|
return this.proxies?.find((t) => t.proxyName === e)?.id ?? "";
|
|
2139
2145
|
}
|
|
2140
2146
|
onProxyChange(e) {
|
|
2141
2147
|
let t = e.detail;
|
|
2142
|
-
if (this.lastAction =
|
|
2148
|
+
if (this.lastAction = k.Proxy, t.autoFormat) {
|
|
2143
2149
|
this.autoFormat = !0;
|
|
2144
2150
|
let e = this.autoResolvedProxyId;
|
|
2145
2151
|
e && (this.selectedProxy = e);
|
|
@@ -2155,7 +2161,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2155
2161
|
});
|
|
2156
2162
|
else {
|
|
2157
2163
|
let e = this.focusModes.find((e) => e.value === this.cropSize.focusMode)?.auto, n = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, i = this.cropSize.x, a = this.cropSize.y;
|
|
2158
|
-
t === "free" ? (n = !1, r = "manual") : this.cropSize.unit ===
|
|
2164
|
+
t === "free" ? (n = !1, r = "manual") : this.cropSize.unit === D.Pixel && !e && (i = 0, a = 0), e ? await this.handleRequestAutoCropSuggestion({
|
|
2159
2165
|
cropMode: t,
|
|
2160
2166
|
focusMode: r,
|
|
2161
2167
|
height: this.cropSize.height,
|
|
@@ -2190,11 +2196,11 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2190
2196
|
}
|
|
2191
2197
|
async onCropChange(e) {
|
|
2192
2198
|
let t = this.cropSize.unit;
|
|
2193
|
-
if (e.detail.unit ===
|
|
2199
|
+
if (e.detail.unit === D.AspectRatio) {
|
|
2194
2200
|
let t = e.detail.width / e.detail.height, n = this.asset ? Math.min(Math.max(Math.round(this.cropSize.height * t), 0), this.resizeSize.width) : 0, r = this.asset ? Math.min(Math.max(Math.round(n / t), 0), this.resizeSize.height) : 0, i = this.asset ? r * 100 / this.selectedFormat.height : 100, a = this.asset ? n * 100 / this.selectedFormat.width : 100, o = this.cropSize.x, s = this.cropSize.y;
|
|
2195
2201
|
o + a > 100 && (o = 100 - a), s + i > 100 && (s = 100 - i);
|
|
2196
2202
|
let c = this.cropSize.cropMode;
|
|
2197
|
-
this.cropModes.find((e) => e.value === c)?.auto && (c = "free"), e.detail.silent ? (this.cropSize.height = r, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = a, this.cropSize.ratioHeight = e.detail.height, this.cropSize.ratioWidth = e.detail.width, this.cropSize.unit =
|
|
2203
|
+
this.cropModes.find((e) => e.value === c)?.auto && (c = "free"), e.detail.silent ? (this.cropSize.height = r, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = a, this.cropSize.ratioHeight = e.detail.height, this.cropSize.ratioWidth = e.detail.width, this.cropSize.unit = D.AspectRatio, this.cropSize.width = n) : this.cropSize = {
|
|
2198
2204
|
...this.cropSize,
|
|
2199
2205
|
cropMode: c,
|
|
2200
2206
|
height: r,
|
|
@@ -2203,7 +2209,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2203
2209
|
percentageWidth: a,
|
|
2204
2210
|
ratioHeight: e.detail.height,
|
|
2205
2211
|
ratioWidth: e.detail.width,
|
|
2206
|
-
unit:
|
|
2212
|
+
unit: D.AspectRatio,
|
|
2207
2213
|
width: n,
|
|
2208
2214
|
x: o,
|
|
2209
2215
|
y: s
|
|
@@ -2212,14 +2218,14 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2212
2218
|
let t = this.asset ? e.detail.height * 100 / this.selectedFormat.height : 100, n = this.asset ? e.detail.width * 100 / this.selectedFormat.width : 100, r = this.cropSize.x, i = this.cropSize.y;
|
|
2213
2219
|
r + n > 100 && (r = 100 - n), i + t > 100 && (i = 100 - t);
|
|
2214
2220
|
let a = this.cropSize.cropMode, o = this.cropModes.find((e) => e.value === a)?.auto;
|
|
2215
|
-
(e.detail.breakAspectRatio || o) && (a = "free"), e.detail.silent ? (this.cropSize.cropMode = a, this.cropSize.height = e.detail.height, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = t, this.cropSize.percentageWidth = n, this.cropSize.unit =
|
|
2221
|
+
(e.detail.breakAspectRatio || o) && (a = "free"), e.detail.silent ? (this.cropSize.cropMode = a, this.cropSize.height = e.detail.height, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = t, this.cropSize.percentageWidth = n, this.cropSize.unit = D.Pixel, this.cropSize.width = e.detail.width, this.cropSize.x = r, this.cropSize.y = i) : this.cropSize = {
|
|
2216
2222
|
...this.cropSize,
|
|
2217
2223
|
cropMode: a,
|
|
2218
2224
|
height: e.detail.height,
|
|
2219
2225
|
keepAspectRatio: e.detail.keepAspectRatio,
|
|
2220
2226
|
percentageHeight: t,
|
|
2221
2227
|
percentageWidth: n,
|
|
2222
|
-
unit:
|
|
2228
|
+
unit: D.Pixel,
|
|
2223
2229
|
width: e.detail.width,
|
|
2224
2230
|
x: r,
|
|
2225
2231
|
y: i
|
|
@@ -2238,11 +2244,11 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2238
2244
|
});
|
|
2239
2245
|
}
|
|
2240
2246
|
onCropApply(e) {
|
|
2241
|
-
if (this.clearResetSnapshot(), this.lastAction =
|
|
2247
|
+
if (this.clearResetSnapshot(), this.lastAction = k.Crop, !this.asset) {
|
|
2242
2248
|
let { focusMode: e, height: t, position: n, ratioHeight: r, ratioWidth: i, unit: a, width: o, x: s, y: c } = this.cropSize, l = this.focusModes.find((t) => t.value === e)?.auto ?? !1;
|
|
2243
|
-
if (a ===
|
|
2249
|
+
if (a === D.AspectRatio) {
|
|
2244
2250
|
i && r && this.upsertTransformation({
|
|
2245
|
-
key:
|
|
2251
|
+
key: k.Crop,
|
|
2246
2252
|
value: {
|
|
2247
2253
|
focusMode: e,
|
|
2248
2254
|
isFocusModeAuto: l,
|
|
@@ -2255,7 +2261,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2255
2261
|
return;
|
|
2256
2262
|
}
|
|
2257
2263
|
(t || o) && this.upsertTransformation({
|
|
2258
|
-
key:
|
|
2264
|
+
key: k.Crop,
|
|
2259
2265
|
value: {
|
|
2260
2266
|
focusMode: e,
|
|
2261
2267
|
height: t,
|
|
@@ -2274,8 +2280,8 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2274
2280
|
let a = this.cropSize.focusMode, o = this.focusModes.find((e) => e.value === a)?.auto ?? !1;
|
|
2275
2281
|
if (t && i && r) {
|
|
2276
2282
|
let e = i, s = t;
|
|
2277
|
-
if (r ===
|
|
2278
|
-
key:
|
|
2283
|
+
if (r === D.AspectRatio && (e = this.cropSize.percentageWidth * this.selectedFormat.width / 100, s = this.cropSize.percentageHeight * this.selectedFormat.height / 100), n) this.transformations = [...this.transformations, {
|
|
2284
|
+
key: k.Crop,
|
|
2279
2285
|
value: {
|
|
2280
2286
|
focusMode: a,
|
|
2281
2287
|
height: s,
|
|
@@ -2287,7 +2293,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2287
2293
|
else {
|
|
2288
2294
|
let t = this.cropSize.x / 100 * this.selectedFormat.width, n = this.cropSize.y / 100 * this.selectedFormat.height;
|
|
2289
2295
|
this.transformations = [...this.transformations, {
|
|
2290
|
-
key:
|
|
2296
|
+
key: k.Crop,
|
|
2291
2297
|
value: {
|
|
2292
2298
|
focusMode: a,
|
|
2293
2299
|
height: s,
|
|
@@ -2300,7 +2306,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2300
2306
|
}];
|
|
2301
2307
|
}
|
|
2302
2308
|
} else n && (this.transformations = [...this.transformations, {
|
|
2303
|
-
key:
|
|
2309
|
+
key: k.Crop,
|
|
2304
2310
|
value: {
|
|
2305
2311
|
focusMode: a,
|
|
2306
2312
|
isFocusModeAuto: o,
|
|
@@ -2309,8 +2315,8 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2309
2315
|
}]);
|
|
2310
2316
|
}
|
|
2311
2317
|
onResizeChange(e) {
|
|
2312
|
-
if (e.detail.unit ===
|
|
2313
|
-
let t = e.detail.width / e.detail.height, n = Math.max(Math.round(this.lastResizeSize[
|
|
2318
|
+
if (e.detail.unit === D.AspectRatio) {
|
|
2319
|
+
let t = e.detail.width / e.detail.height, n = Math.max(Math.round(this.lastResizeSize[D.Pixel].height * t), 0), r = Math.max(Math.round(n / t), 0);
|
|
2314
2320
|
this.resizeSize = {
|
|
2315
2321
|
...this.resizeSize,
|
|
2316
2322
|
height: r,
|
|
@@ -2330,11 +2336,11 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2330
2336
|
}
|
|
2331
2337
|
onResizeApply(e) {
|
|
2332
2338
|
let { height: t, unit: n, width: r } = e.detail;
|
|
2333
|
-
if (this.clearResetSnapshot(), this.lastAction =
|
|
2334
|
-
if (n ===
|
|
2339
|
+
if (this.clearResetSnapshot(), this.lastAction = k.Resize, !this.asset) {
|
|
2340
|
+
if (n === D.AspectRatio) {
|
|
2335
2341
|
let { ratioHeight: e, ratioWidth: t } = this.resizeSize;
|
|
2336
2342
|
t && e && this.upsertTransformation({
|
|
2337
|
-
key:
|
|
2343
|
+
key: k.Resize,
|
|
2338
2344
|
value: {
|
|
2339
2345
|
ratioHeight: e,
|
|
2340
2346
|
ratioWidth: t,
|
|
@@ -2344,7 +2350,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2344
2350
|
return;
|
|
2345
2351
|
}
|
|
2346
2352
|
(t || r) && this.upsertTransformation({
|
|
2347
|
-
key:
|
|
2353
|
+
key: k.Resize,
|
|
2348
2354
|
value: {
|
|
2349
2355
|
height: t,
|
|
2350
2356
|
unit: n,
|
|
@@ -2355,8 +2361,8 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2355
2361
|
}
|
|
2356
2362
|
if (!this.selectedFormat) return;
|
|
2357
2363
|
let i = this.selectedFormat.width || this.defaultSize.width, a = this.selectedFormat.height || this.defaultSize.height, o = r, s = t;
|
|
2358
|
-
this.resizeSize.unit === n ? n ===
|
|
2359
|
-
key:
|
|
2364
|
+
this.resizeSize.unit === n ? n === D.AspectRatio && (o = Math.round(r / t * a), s = a) : (o = i, s = a), this.transformations = [...this.transformations, {
|
|
2365
|
+
key: k.Resize,
|
|
2360
2366
|
value: {
|
|
2361
2367
|
height: s,
|
|
2362
2368
|
unit: n,
|
|
@@ -2369,23 +2375,23 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2369
2375
|
}
|
|
2370
2376
|
onRotationApply(e) {
|
|
2371
2377
|
let t = e.detail;
|
|
2372
|
-
if (this.clearResetSnapshot(), this.lastAction =
|
|
2378
|
+
if (this.clearResetSnapshot(), this.lastAction = k.Rotate, !this.asset) {
|
|
2373
2379
|
t ? this.upsertTransformation({
|
|
2374
|
-
key:
|
|
2380
|
+
key: k.Rotate,
|
|
2375
2381
|
value: { rotation: t }
|
|
2376
|
-
}) : this.transformations = this.transformations.filter((e) => e.key !==
|
|
2382
|
+
}) : this.transformations = this.transformations.filter((e) => e.key !== k.Rotate);
|
|
2377
2383
|
return;
|
|
2378
2384
|
}
|
|
2379
2385
|
this.selectedFormat && (this.transformations = [...this.transformations, {
|
|
2380
|
-
key:
|
|
2386
|
+
key: k.Rotate,
|
|
2381
2387
|
value: { rotation: t }
|
|
2382
2388
|
}]);
|
|
2383
2389
|
}
|
|
2384
2390
|
onQualityChange(e) {
|
|
2385
2391
|
let t = e.detail;
|
|
2386
|
-
this.selectedFormat && (this.selectedFormat.quality = t), this.clearResetSnapshot(), this.lastAction =
|
|
2392
|
+
this.selectedFormat && (this.selectedFormat.quality = t), this.clearResetSnapshot(), this.lastAction = k.Quality;
|
|
2387
2393
|
let n = {
|
|
2388
|
-
key:
|
|
2394
|
+
key: k.Quality,
|
|
2389
2395
|
value: { quality: t }
|
|
2390
2396
|
};
|
|
2391
2397
|
this.asset ? this.transformations = [...this.transformations, n] : this.upsertTransformation(n);
|
|
@@ -2397,15 +2403,15 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2397
2403
|
keepMetadata: t
|
|
2398
2404
|
}, !this.asset) {
|
|
2399
2405
|
t ? this.upsertTransformation({
|
|
2400
|
-
key:
|
|
2406
|
+
key: k.Metadata,
|
|
2401
2407
|
value: { keepMetadata: t }
|
|
2402
|
-
}) : this.transformations = this.transformations.filter((e) => e.key !==
|
|
2408
|
+
}) : this.transformations = this.transformations.filter((e) => e.key !== k.Metadata);
|
|
2403
2409
|
return;
|
|
2404
2410
|
}
|
|
2405
2411
|
t ? this.upsertTransformation({
|
|
2406
|
-
key:
|
|
2412
|
+
key: k.Metadata,
|
|
2407
2413
|
value: { keepMetadata: t }
|
|
2408
|
-
}) : this.transformations = this.transformations.filter((e) => e.key !==
|
|
2414
|
+
}) : this.transformations = this.transformations.filter((e) => e.key !== k.Metadata);
|
|
2409
2415
|
}
|
|
2410
2416
|
onExtensionChange(e) {
|
|
2411
2417
|
let t = e.detail;
|
|
@@ -2415,7 +2421,7 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2415
2421
|
};
|
|
2416
2422
|
}
|
|
2417
2423
|
syncQuality() {
|
|
2418
|
-
let e = this.transformations.findLast((e) => e.key ===
|
|
2424
|
+
let e = this.transformations.findLast((e) => e.key === k.Quality)?.value?.quality;
|
|
2419
2425
|
this.selectedFormat &&= {
|
|
2420
2426
|
...this.selectedFormat,
|
|
2421
2427
|
quality: e ?? 100
|
|
@@ -2440,10 +2446,10 @@ var Ct = Q, wt, $ = class extends s {
|
|
|
2440
2446
|
}
|
|
2441
2447
|
render() {
|
|
2442
2448
|
return e`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${m(!this.hideHeader, () => e`<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>${m(this.canReset, () => e`<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>`, () => n)}
|
|
2443
|
-
${m(!this.noFormat, () => e`<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 ===
|
|
2444
|
-
${m(!this.noCrop, () => e`<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 ===
|
|
2445
|
-
${m(!this.noResize, () => e`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction ===
|
|
2446
|
-
${m(!this.noRotate, () => e`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction ===
|
|
2449
|
+
${m(!this.noFormat, () => e`<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 === k.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`)}
|
|
2450
|
+
${m(!this.noCrop, () => e`<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 === k.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[D.Pixel].width : Infinity} max-height=${this.asset ? this.lastResizeSize[D.Pixel].height : Infinity} 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>`)}
|
|
2451
|
+
${m(!this.noResize, () => e`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === k.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 : Infinity} max-height=${this.asset ? this.imageSize.height : Infinity} 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>`)}
|
|
2452
|
+
${m(!this.noRotate, () => e`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === k.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>`)}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === k.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>${m(!this.noMetadata, () => e`<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>`)}
|
|
2447
2453
|
${m(this.useCustomExtension, () => e`<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>`)}<div class="asset-link-format__footer"><slot name="footer"></slot></div></div>`;
|
|
2448
2454
|
}
|
|
2449
2455
|
};
|
|
@@ -2551,7 +2557,7 @@ a([r({
|
|
|
2551
2557
|
o("design:type", Function),
|
|
2552
2558
|
o("design:paramtypes", []),
|
|
2553
2559
|
o("design:returntype", void 0)
|
|
2554
|
-
], $.prototype, "handleLoadingChange", null), $ =
|
|
2555
|
-
var
|
|
2560
|
+
], $.prototype, "handleLoadingChange", null), $ = Dt = a([u("cx-asset-link-format"), o("design:paramtypes", [])], $);
|
|
2561
|
+
var Ot = $;
|
|
2556
2562
|
//#endregion
|
|
2557
|
-
export {
|
|
2563
|
+
export { Je as C, tt as S, Ce as T, Ne as _, Le as a, Qe as b, L as c, Re as d, je as f, V as g, B as h, st as i, R as l, ze as m, ut as n, I as o, Me as p, ct as r, F as s, Ot as t, z as u, Pe as v, M as w, rt as x, nt as y };
|