@stemy/ngx-utils 19.9.9 → 19.9.11
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/fesm2022/stemy-ngx-utils.mjs +197 -152
- package/fesm2022/stemy-ngx-utils.mjs.map +1 -1
- package/ngx-utils/common-types.d.ts +18 -14
- package/ngx-utils/components/interactive-canvas/interactive-canvas.component.d.ts +3 -3
- package/ngx-utils/components/interactive-canvas/interactive-item.component.d.ts +7 -4
- package/ngx-utils/ngx-utils.imports.d.ts +3 -3
- package/ngx-utils/services/base-http.service.d.ts +3 -4
- package/ngx-utils/tokens.d.ts +2 -3
- package/ngx-utils/utils/canvas-renderers/hit-zone.renderer.d.ts +9 -0
- package/ngx-utils/utils/canvas.d.ts +2 -0
- package/ngx-utils/utils/geometry/functions.d.ts +2 -0
- package/ngx-utils/utils/geometry/gjk.d.ts +2 -3
- package/ngx-utils/utils/geometry/index.d.ts +2 -2
- package/ngx-utils/utils/geometry/shapes.d.ts +14 -8
- package/package.json +1 -2
- package/public_api.d.ts +4 -3
- /package/ngx-utils/utils/canvas-renderers/{exclusions-renderer.d.ts → exclusions.renderer.d.ts} +0 -0
|
@@ -1441,6 +1441,37 @@ class CanvasUtils {
|
|
|
1441
1441
|
return fontSize;
|
|
1442
1442
|
}
|
|
1443
1443
|
}
|
|
1444
|
+
let osCanvas = null;
|
|
1445
|
+
function getOffScreenCanvas() {
|
|
1446
|
+
osCanvas = osCanvas || document.createElement("canvas");
|
|
1447
|
+
return osCanvas;
|
|
1448
|
+
}
|
|
1449
|
+
function createStripePattern(size, color1, color2) {
|
|
1450
|
+
const patternCanvas = getOffScreenCanvas();
|
|
1451
|
+
const ctx = patternCanvas.getContext("2d");
|
|
1452
|
+
// The size of the tile determines the thickness of the stripes
|
|
1453
|
+
patternCanvas.width = size;
|
|
1454
|
+
patternCanvas.height = size;
|
|
1455
|
+
// 1. Fill background
|
|
1456
|
+
ctx.fillStyle = color1;
|
|
1457
|
+
ctx.fillRect(0, 0, size, size);
|
|
1458
|
+
// 2. Draw the diagonal stripes
|
|
1459
|
+
ctx.fillStyle = color2;
|
|
1460
|
+
ctx.beginPath();
|
|
1461
|
+
// Bottom-left triangle
|
|
1462
|
+
ctx.moveTo(0, size);
|
|
1463
|
+
ctx.lineTo(size, 0);
|
|
1464
|
+
ctx.lineTo(size / 2, 0);
|
|
1465
|
+
ctx.lineTo(0, size / 2);
|
|
1466
|
+
ctx.closePath();
|
|
1467
|
+
// Top-right triangle
|
|
1468
|
+
ctx.moveTo(size, size);
|
|
1469
|
+
ctx.lineTo(size, size / 2);
|
|
1470
|
+
ctx.lineTo(size / 2, size);
|
|
1471
|
+
ctx.closePath();
|
|
1472
|
+
ctx.fill();
|
|
1473
|
+
return ctx.createPattern(patternCanvas, "repeat");
|
|
1474
|
+
}
|
|
1444
1475
|
|
|
1445
1476
|
const iso8061 = /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(?:.\d+)?(?:Z|[+-]\d\d:\d\d)$/;
|
|
1446
1477
|
function serializer(replacer, cycleReplacer) {
|
|
@@ -1822,16 +1853,49 @@ class FileSystemEntry {
|
|
|
1822
1853
|
}
|
|
1823
1854
|
}
|
|
1824
1855
|
|
|
1856
|
+
class HitZoneRenderer {
|
|
1857
|
+
constructor() {
|
|
1858
|
+
return Invokable.create(this);
|
|
1859
|
+
}
|
|
1860
|
+
async [Invokable.call](renderCanvas) {
|
|
1861
|
+
const ctx = renderCanvas.ctx;
|
|
1862
|
+
const hitShapes = renderCanvas.selectedItem?.hitShapes;
|
|
1863
|
+
this.pattern = this.pattern || createStripePattern(20, "#efefef", "#6c6c6c");
|
|
1864
|
+
if (!hitShapes)
|
|
1865
|
+
return;
|
|
1866
|
+
ctx.globalAlpha = 0.5;
|
|
1867
|
+
await renderCanvas.tempPaint(temp => {
|
|
1868
|
+
temp.lineWidth = 1;
|
|
1869
|
+
temp.fillStyle = this.pattern;
|
|
1870
|
+
hitShapes.forEach(shape => {
|
|
1871
|
+
const path = shape.getPath(shape.x, shape.y, 1);
|
|
1872
|
+
temp.fill(path);
|
|
1873
|
+
});
|
|
1874
|
+
temp.fillStyle = "#404040";
|
|
1875
|
+
temp.strokeStyle = "#090909";
|
|
1876
|
+
renderCanvas.selectedItem.shapes.forEach(shape => {
|
|
1877
|
+
const path = shape.getPath(shape.x, shape.y, 1);
|
|
1878
|
+
temp.fill(path);
|
|
1879
|
+
temp.stroke(path);
|
|
1880
|
+
});
|
|
1881
|
+
return null;
|
|
1882
|
+
});
|
|
1883
|
+
ctx.globalAlpha = 1;
|
|
1884
|
+
}
|
|
1885
|
+
}
|
|
1886
|
+
|
|
1825
1887
|
class ExclusionsRenderer {
|
|
1826
1888
|
constructor() {
|
|
1827
1889
|
return Invokable.create(this);
|
|
1828
1890
|
}
|
|
1829
1891
|
async [Invokable.call](renderCanvas) {
|
|
1830
1892
|
const ctx = renderCanvas.ctx;
|
|
1831
|
-
renderCanvas.excludedAreas?.forEach(
|
|
1832
|
-
ctx.fillStyle = "
|
|
1833
|
-
|
|
1834
|
-
|
|
1893
|
+
renderCanvas.excludedAreas?.forEach(area => {
|
|
1894
|
+
ctx.fillStyle = "#00000030";
|
|
1895
|
+
area.shapes.forEach(shape => {
|
|
1896
|
+
const path = shape.getPath(shape.x, shape.y, 1);
|
|
1897
|
+
ctx.fill(path);
|
|
1898
|
+
});
|
|
1835
1899
|
});
|
|
1836
1900
|
}
|
|
1837
1901
|
}
|
|
@@ -1989,10 +2053,16 @@ function distanceSq(a, b) {
|
|
|
1989
2053
|
function distance(a, b) {
|
|
1990
2054
|
return Math.sqrt(distanceSq(a, b));
|
|
1991
2055
|
}
|
|
2056
|
+
function scalePt(p, s) {
|
|
2057
|
+
return { x: p.x * s, y: p.y * s };
|
|
2058
|
+
}
|
|
1992
2059
|
function lerpPts(a, b, t) {
|
|
1993
2060
|
const diff = subPts(b, a);
|
|
1994
2061
|
return addPts(a, multiplyPts(diff, t));
|
|
1995
2062
|
}
|
|
2063
|
+
function lengthSq$1(p) {
|
|
2064
|
+
return p.x * p.x + p.y * p.y;
|
|
2065
|
+
}
|
|
1996
2066
|
function lengthOfPt(p) {
|
|
1997
2067
|
return Math.hypot(p.x, p.y);
|
|
1998
2068
|
}
|
|
@@ -2024,89 +2094,14 @@ function toRadians(deg) {
|
|
|
2024
2094
|
return deg * Math.PI / 180;
|
|
2025
2095
|
}
|
|
2026
2096
|
|
|
2027
|
-
const MAX_ITERS = 40;
|
|
2028
|
-
// =========================
|
|
2029
|
-
// GJK distance (robust)
|
|
2030
|
-
// =========================
|
|
2031
|
-
function gjkDistance(A, B) {
|
|
2032
|
-
// 1) Quick overlap
|
|
2033
|
-
const inter = gjkIntersection(A, B);
|
|
2034
|
-
if (inter.hit) {
|
|
2035
|
-
// Pass through pa/pb
|
|
2036
|
-
return { distance: 0, pa: inter.pa ?? null, pb: inter.pb ?? null };
|
|
2037
|
-
}
|
|
2038
|
-
const ca = A.center;
|
|
2039
|
-
const cb = B.center;
|
|
2040
|
-
// 2) Bisection along the center-line to find the first hit pose
|
|
2041
|
-
let s = 0;
|
|
2042
|
-
let e = 1;
|
|
2043
|
-
let iters = 0;
|
|
2044
|
-
// Keep the best "hit" snapshot and its center so we can map witnesses back
|
|
2045
|
-
let hitSnap = null;
|
|
2046
|
-
let hitCenter = ca;
|
|
2047
|
-
while ((e - s) > EPSILON && iters < MAX_ITERS) {
|
|
2048
|
-
iters++;
|
|
2049
|
-
const t = (e + s) * 0.5;
|
|
2050
|
-
// Assumes A.move(newCenter) returns a NEW shape whose center is exactly this point
|
|
2051
|
-
const aMoved = A.move(lerpPts(ca, cb, t));
|
|
2052
|
-
const test = gjkIntersection(aMoved, B);
|
|
2053
|
-
if (test.hit) {
|
|
2054
|
-
hitSnap = test;
|
|
2055
|
-
hitCenter = aMoved.center;
|
|
2056
|
-
e = t; // shrink toward contact
|
|
2057
|
-
}
|
|
2058
|
-
else {
|
|
2059
|
-
s = t; // still separated
|
|
2060
|
-
}
|
|
2061
|
-
}
|
|
2062
|
-
// 3) Make sure we end with a hit snapshot (in case we stopped on iteration cap)
|
|
2063
|
-
if (!hitSnap) {
|
|
2064
|
-
const aMoved = A.move(lerpPts(ca, cb, e));
|
|
2065
|
-
const test = gjkIntersection(aMoved, B);
|
|
2066
|
-
if (test.hit) {
|
|
2067
|
-
hitSnap = test;
|
|
2068
|
-
hitCenter = aMoved.center;
|
|
2069
|
-
}
|
|
2070
|
-
else {
|
|
2071
|
-
// Extremely degenerate: no hit even at e ~ 1 (shouldn't happen for non-degenerate shapes).
|
|
2072
|
-
// Fall back to center-line direction as a last resort.
|
|
2073
|
-
const dir = normalizePt(subPts(cb, ca));
|
|
2074
|
-
const pa0 = A.support(dir);
|
|
2075
|
-
const pb0 = B.support(negatePt(dir));
|
|
2076
|
-
return { distance: distance(pa0, pb0), pa: pa0, pb: pb0 };
|
|
2077
|
-
}
|
|
2078
|
-
}
|
|
2079
|
-
// 4) Map witnesses back to the original A pose
|
|
2080
|
-
// (We moved A by (hitCenter - ca); to undo, offset A's witness by (ca - hitCenter))
|
|
2081
|
-
const offset = subPts(ca, hitCenter);
|
|
2082
|
-
const pa0 = addPts(hitSnap.pa, offset);
|
|
2083
|
-
const pb0 = hitSnap.pb;
|
|
2084
|
-
// 5) True geometric separation is the distance between these boundary points
|
|
2085
|
-
const d = distance(pa0, pb0);
|
|
2086
|
-
return {
|
|
2087
|
-
distance: d,
|
|
2088
|
-
pa: d > 0 ? pa0 : null,
|
|
2089
|
-
pb: d > 0 ? pb0 : null
|
|
2090
|
-
};
|
|
2091
|
-
}
|
|
2092
2097
|
// =========================
|
|
2093
2098
|
// Boolean GJK (robust)
|
|
2094
2099
|
// =========================
|
|
2095
|
-
function gjkIntersection(A, B) {
|
|
2096
|
-
for (const AA of getShapes(A)) {
|
|
2097
|
-
for (const BB of getShapes(B)) {
|
|
2098
|
-
const int = gjkIntersectionSingle(AA, BB);
|
|
2099
|
-
if (int.hit)
|
|
2100
|
-
return int;
|
|
2101
|
-
}
|
|
2102
|
-
}
|
|
2103
|
-
return { hit: false };
|
|
2104
|
-
}
|
|
2105
|
-
function gjkIntersectionSingle(A, B) {
|
|
2100
|
+
function gjkIntersection(A, B, logs) {
|
|
2106
2101
|
const MAX = 64, EPS = 1e-12;
|
|
2107
2102
|
const sup = (dir) => {
|
|
2108
|
-
const a = ensurePoint(A.support(dir), A.center);
|
|
2109
|
-
const b = ensurePoint(B.support(negatePt(dir)), B.center);
|
|
2103
|
+
const a = ensurePoint(A.support(dir, logs), A.center);
|
|
2104
|
+
const b = ensurePoint(B.support(negatePt(dir), logs), B.center);
|
|
2110
2105
|
return { p: subPts(a, b), a, b };
|
|
2111
2106
|
};
|
|
2112
2107
|
// initial direction: center-to-center; fall back to x-axis
|
|
@@ -2146,22 +2141,6 @@ function gjkIntersectionSingle(A, B) {
|
|
|
2146
2141
|
// Max iterations without resolution → disjoint
|
|
2147
2142
|
return { hit: false };
|
|
2148
2143
|
}
|
|
2149
|
-
function* getShapes(shape, worldX = 0, worldY = 0) {
|
|
2150
|
-
if (!shape)
|
|
2151
|
-
return;
|
|
2152
|
-
// Calculate this specific shape's actual world position
|
|
2153
|
-
const currentWorldX = worldX + shape.x;
|
|
2154
|
-
const currentWorldY = worldY + shape.y;
|
|
2155
|
-
if (!shape.subShapes || shape.subShapes.length === 0) {
|
|
2156
|
-
// Yield a temporary 'leaf' shape moved to the correct world coordinate
|
|
2157
|
-
yield shape.move({ x: currentWorldX, y: currentWorldY });
|
|
2158
|
-
return;
|
|
2159
|
-
}
|
|
2160
|
-
// Recurse into children, passing down the current world position
|
|
2161
|
-
for (const sub of shape.subShapes) {
|
|
2162
|
-
yield* getShapes(sub, currentWorldX, currentWorldY);
|
|
2163
|
-
}
|
|
2164
|
-
}
|
|
2165
2144
|
function doSimplexBoolean(simplex, d) {
|
|
2166
2145
|
const last = simplex[simplex.length - 1];
|
|
2167
2146
|
const AO = { x: -last.p.x, y: -last.p.y };
|
|
@@ -2257,17 +2236,14 @@ class Shape {
|
|
|
2257
2236
|
constructor(x, y) {
|
|
2258
2237
|
this.pt = { x, y };
|
|
2259
2238
|
}
|
|
2260
|
-
intersection(shape) {
|
|
2261
|
-
return gjkIntersection(this, shape);
|
|
2262
|
-
}
|
|
2263
|
-
intersects(shape) {
|
|
2264
|
-
return this.intersection(shape).hit;
|
|
2239
|
+
intersection(shape, logs) {
|
|
2240
|
+
return gjkIntersection(this, shape, logs);
|
|
2265
2241
|
}
|
|
2266
|
-
|
|
2267
|
-
return
|
|
2242
|
+
intersects(shape, logs) {
|
|
2243
|
+
return this.intersection(shape, logs).hit;
|
|
2268
2244
|
}
|
|
2269
2245
|
distance(shape) {
|
|
2270
|
-
return this.
|
|
2246
|
+
return distance(this.center, shape.center);
|
|
2271
2247
|
}
|
|
2272
2248
|
}
|
|
2273
2249
|
class Point extends Shape {
|
|
@@ -2291,6 +2267,9 @@ class Point extends Shape {
|
|
|
2291
2267
|
support() {
|
|
2292
2268
|
return this.center;
|
|
2293
2269
|
}
|
|
2270
|
+
expand() {
|
|
2271
|
+
return this;
|
|
2272
|
+
}
|
|
2294
2273
|
move(pos) {
|
|
2295
2274
|
return new Point(pos);
|
|
2296
2275
|
}
|
|
@@ -2354,19 +2333,21 @@ class Point extends Shape {
|
|
|
2354
2333
|
}
|
|
2355
2334
|
}
|
|
2356
2335
|
class Rect extends Shape {
|
|
2357
|
-
constructor(x, y, width, height, rotation = 0) {
|
|
2336
|
+
constructor(x, y, width, height, rotation = 0, radius = 0) {
|
|
2358
2337
|
super(x, y);
|
|
2359
2338
|
this.width = width;
|
|
2360
2339
|
this.height = height;
|
|
2361
2340
|
this.rotation = rotation;
|
|
2341
|
+
this.radius = radius;
|
|
2362
2342
|
}
|
|
2363
2343
|
getPath(x, y, ratio) {
|
|
2364
2344
|
ratio = ratio ?? 1;
|
|
2365
2345
|
const w = this.width * ratio;
|
|
2366
2346
|
const h = this.height * ratio;
|
|
2347
|
+
const r = this.radius * ratio;
|
|
2367
2348
|
// 1. Create the local path for the rectangle (centered at 0,0)
|
|
2368
2349
|
const rectPath = new Path2D();
|
|
2369
|
-
rectPath.
|
|
2350
|
+
rectPath.roundRect(-w / 2, -h / 2, w, h, r);
|
|
2370
2351
|
// 2. Create a DOMMatrix to handle the rotation
|
|
2371
2352
|
const matrix = new DOMMatrix()
|
|
2372
2353
|
.translate(x, y) // Move to position
|
|
@@ -2376,18 +2357,36 @@ class Rect extends Shape {
|
|
|
2376
2357
|
finalPath.addPath(rectPath, matrix);
|
|
2377
2358
|
return finalPath;
|
|
2378
2359
|
}
|
|
2379
|
-
support(dir) {
|
|
2360
|
+
support(dir, logs) {
|
|
2380
2361
|
const ang = this.rotation ?? 0;
|
|
2362
|
+
// 1. Move search direction into local space
|
|
2381
2363
|
const dLocal = rotateDeg(ensurePoint(dir, { x: 1, y: 0 }), -ang);
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2364
|
+
// 2. Use the SHARP dimensions for the base calculation
|
|
2365
|
+
// We subtract the radius here because the 'roundRect' expansion
|
|
2366
|
+
// happens outward from the inner core.
|
|
2367
|
+
const hw = Math.max(0, this.width / 2 - this.radius);
|
|
2368
|
+
const hh = Math.max(0, this.height / 2 - this.radius);
|
|
2369
|
+
// 3. Find the local corner of that inner core
|
|
2385
2370
|
const lx = dLocal.x >= 0 ? hw : -hw;
|
|
2386
2371
|
const ly = dLocal.y >= 0 ? hh : -hh;
|
|
2387
|
-
|
|
2372
|
+
// 4. Rotate that core corner back to world space
|
|
2373
|
+
const corePoint = addPts(rotateDeg({ x: lx, y: ly }, ang), this.pt);
|
|
2374
|
+
// 5. Add the "Radial Expansion"
|
|
2375
|
+
// This turns the sharp corner into a circular arc for GJK
|
|
2376
|
+
const mag = Math.hypot(dir.x, dir.y);
|
|
2377
|
+
if (mag < 1e-9 || this.radius <= 0)
|
|
2378
|
+
return corePoint;
|
|
2379
|
+
return {
|
|
2380
|
+
x: corePoint.x + (dir.x / mag) * this.radius,
|
|
2381
|
+
y: corePoint.y + (dir.y / mag) * this.radius
|
|
2382
|
+
};
|
|
2383
|
+
}
|
|
2384
|
+
expand(value) {
|
|
2385
|
+
value = Math.abs(value ?? 0);
|
|
2386
|
+
return new Rect(this.x, this.y, this.width + value * 2, this.height + value * 2, this.rotation, this.radius + value);
|
|
2388
2387
|
}
|
|
2389
2388
|
move(pos) {
|
|
2390
|
-
return new Rect(pos.x, pos.y, this.width, this.height, this.rotation);
|
|
2389
|
+
return new Rect(pos.x, pos.y, this.width, this.height, this.rotation, this.radius);
|
|
2391
2390
|
}
|
|
2392
2391
|
}
|
|
2393
2392
|
class Oval extends Shape {
|
|
@@ -2418,13 +2417,21 @@ class Oval extends Shape {
|
|
|
2418
2417
|
}
|
|
2419
2418
|
support(dir) {
|
|
2420
2419
|
const ang = this.rotation ?? 0;
|
|
2421
|
-
|
|
2422
|
-
const
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2420
|
+
// 1. Move search direction into local, non-rotated space
|
|
2421
|
+
const dLocal = rotateDeg(ensurePoint(dir, { x: 1, y: 0 }), -ang);
|
|
2422
|
+
const hw = this.width / 2;
|
|
2423
|
+
const hh = this.height / 2;
|
|
2424
|
+
// 2. High-precision ellipse support formula
|
|
2425
|
+
// This finds the EXACT point on the curved boundary
|
|
2426
|
+
const q = Math.hypot(hw * dLocal.x, hh * dLocal.y) || 1;
|
|
2427
|
+
const lx = (hw * hw * dLocal.x) / q;
|
|
2428
|
+
const ly = (hh * hh * dLocal.y) / q;
|
|
2429
|
+
// 3. Rotate back and add this shape's position
|
|
2430
|
+
return addPts(rotateDeg({ x: lx, y: ly }, ang), this.pt);
|
|
2431
|
+
}
|
|
2432
|
+
expand(value) {
|
|
2433
|
+
value = Math.abs(value ?? 0);
|
|
2434
|
+
return new Oval(this.x, this.y, this.width + value * 2, this.height + value * 2, this.rotation);
|
|
2428
2435
|
}
|
|
2429
2436
|
move(pos) {
|
|
2430
2437
|
return new Oval(pos.x, pos.y, this.width, this.height, this.rotation);
|
|
@@ -2435,6 +2442,10 @@ class Circle extends Oval {
|
|
|
2435
2442
|
super(x, y, radius * 2, radius * 2, rotation);
|
|
2436
2443
|
this.radius = radius;
|
|
2437
2444
|
}
|
|
2445
|
+
expand(value) {
|
|
2446
|
+
value = Math.abs(value ?? 0);
|
|
2447
|
+
return new Circle(this.x, this.y, this.radius + value, this.rotation);
|
|
2448
|
+
}
|
|
2438
2449
|
move(pos) {
|
|
2439
2450
|
return new Circle(pos.x, pos.y, this.radius, this.rotation);
|
|
2440
2451
|
}
|
|
@@ -2454,8 +2465,26 @@ class ShapeGroup extends Shape {
|
|
|
2454
2465
|
}
|
|
2455
2466
|
return groupPath;
|
|
2456
2467
|
}
|
|
2457
|
-
support() {
|
|
2458
|
-
|
|
2468
|
+
support(dir) {
|
|
2469
|
+
let bestPoint = null;
|
|
2470
|
+
let maxDot = -Infinity;
|
|
2471
|
+
for (const shape of this.subShapes) {
|
|
2472
|
+
// 1. Get child's support (Relative to this Group's origin)
|
|
2473
|
+
const p = shape.support(dir);
|
|
2474
|
+
// 2. Move that point into the space ABOVE this group
|
|
2475
|
+
const worldPoint = addPts(p, this.pt);
|
|
2476
|
+
// 3. We must compare dot products in a consistent space
|
|
2477
|
+
const d = worldPoint.x * dir.x + worldPoint.y * dir.y;
|
|
2478
|
+
if (d > maxDot) {
|
|
2479
|
+
maxDot = d;
|
|
2480
|
+
bestPoint = worldPoint;
|
|
2481
|
+
}
|
|
2482
|
+
}
|
|
2483
|
+
return bestPoint ?? this.pt;
|
|
2484
|
+
}
|
|
2485
|
+
expand(value) {
|
|
2486
|
+
value = Math.abs(value ?? 0);
|
|
2487
|
+
return new ShapeGroup(this.x, this.y, this.subShapes.map(s => s.expand(value)));
|
|
2459
2488
|
}
|
|
2460
2489
|
move(pos) {
|
|
2461
2490
|
return new ShapeGroup(pos.x, pos.y, this.subShapes);
|
|
@@ -7875,11 +7904,11 @@ class DynamicTableCellComponent {
|
|
|
7875
7904
|
});
|
|
7876
7905
|
}
|
|
7877
7906
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableCellComponent, isStandalone: false, selector: "dynamic-table-cell", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null }, fallbackTemplate: { classPropertyName: "fallbackTemplate", publicName: "fallbackTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #fallback let-value=\"value\">\r\n {{ value ?? '-' }}\r\n</ng-template>\r\n<ng-template #defaultTemplate let-context let-column=\"column\" let-id=\"id\" let-value=\"value\">\r\n @switch (column.filterType) {\r\n @case ('checkbox') {\r\n <icon [name]=\"value ? 'check' : 'xmark'\"></icon>\r\n }\r\n @case ('enum') {\r\n @let optionPrefix = column.enumPrefix || id;\r\n <div [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${value}`\">\r\n <span>{{ `${optionPrefix}.${value}` | translate }}</span>\r\n </div>\r\n }\r\n @default {\r\n <ng-container [ngxTemplateOutlet]=\"fallbackTemplate() || fallback\"\r\n [context]=\"context\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n<ng-container [ngxTemplateOutlet]=\"template() || defaultTemplate\"\r\n [context]=\"context()\"\r\n [additionalContext]=\"{defaultTemplate}\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableCellComponent, isStandalone: false, selector: "dynamic-table-cell", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null }, fallbackTemplate: { classPropertyName: "fallbackTemplate", publicName: "fallbackTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #fallback let-value=\"value\">\r\n {{ value ?? '-' }}\r\n</ng-template>\r\n<ng-template #defaultTemplate let-context let-column=\"column\" let-id=\"id\" let-value=\"value\">\r\n @switch (column.filterType) {\r\n @case ('checkbox') {\r\n <div class=\"table-checkbox\">\r\n <icon [name]=\"value ? 'check' : 'xmark'\"></icon>\r\n </div>\r\n }\r\n @case ('enum') {\r\n @let optionPrefix = column.enumPrefix || id;\r\n <div [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${value}`\">\r\n <span>{{ `${optionPrefix}.${value}` | translate }}</span>\r\n </div>\r\n }\r\n @default {\r\n <ng-container [ngxTemplateOutlet]=\"fallbackTemplate() || fallback\"\r\n [context]=\"context\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n<ng-container [ngxTemplateOutlet]=\"template() || defaultTemplate\"\r\n [context]=\"context()\"\r\n [additionalContext]=\"{defaultTemplate}\"></ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7879
7908
|
}
|
|
7880
7909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableCellComponent, decorators: [{
|
|
7881
7910
|
type: Component,
|
|
7882
|
-
args: [{ standalone: false, selector: "dynamic-table-cell", encapsulation: ViewEncapsulation.None, template: "<ng-template #fallback let-value=\"value\">\r\n {{ value ?? '-' }}\r\n</ng-template>\r\n<ng-template #defaultTemplate let-context let-column=\"column\" let-id=\"id\" let-value=\"value\">\r\n @switch (column.filterType) {\r\n @case ('checkbox') {\r\n <icon [name]=\"value ? 'check' : 'xmark'\"></icon>\r\n }\r\n @case ('enum') {\r\n @let optionPrefix = column.enumPrefix || id;\r\n <div [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${value}`\">\r\n <span>{{ `${optionPrefix}.${value}` | translate }}</span>\r\n </div>\r\n }\r\n @default {\r\n <ng-container [ngxTemplateOutlet]=\"fallbackTemplate() || fallback\"\r\n [context]=\"context\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n<ng-container [ngxTemplateOutlet]=\"template() || defaultTemplate\"\r\n [context]=\"context()\"\r\n [additionalContext]=\"{defaultTemplate}\"></ng-container>\r\n" }]
|
|
7911
|
+
args: [{ standalone: false, selector: "dynamic-table-cell", encapsulation: ViewEncapsulation.None, template: "<ng-template #fallback let-value=\"value\">\r\n {{ value ?? '-' }}\r\n</ng-template>\r\n<ng-template #defaultTemplate let-context let-column=\"column\" let-id=\"id\" let-value=\"value\">\r\n @switch (column.filterType) {\r\n @case ('checkbox') {\r\n <div class=\"table-checkbox\">\r\n <icon [name]=\"value ? 'check' : 'xmark'\"></icon>\r\n </div>\r\n }\r\n @case ('enum') {\r\n @let optionPrefix = column.enumPrefix || id;\r\n <div [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${value}`\">\r\n <span>{{ `${optionPrefix}.${value}` | translate }}</span>\r\n </div>\r\n }\r\n @default {\r\n <ng-container [ngxTemplateOutlet]=\"fallbackTemplate() || fallback\"\r\n [context]=\"context\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n<ng-container [ngxTemplateOutlet]=\"template() || defaultTemplate\"\r\n [context]=\"context()\"\r\n [additionalContext]=\"{defaultTemplate}\"></ng-container>\r\n" }]
|
|
7883
7912
|
}] });
|
|
7884
7913
|
|
|
7885
7914
|
class PaginationMenuComponent {
|
|
@@ -8222,11 +8251,11 @@ class DynamicTableComponent {
|
|
|
8222
8251
|
};
|
|
8223
8252
|
}
|
|
8224
8253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: { classPropertyName: "dataLoader", publicName: "dataLoader", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: false, isRequired: false, transformFunction: null }, parallelData: { classPropertyName: "parallelData", publicName: "parallelData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showItems: { classPropertyName: "showItems", publicName: "showItems", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: null }, updateTime: { classPropertyName: "updateTime", publicName: "updateTime", isSignal: false, isRequired: false, transformFunction: null }, filterTime: { classPropertyName: "filterTime", publicName: "filterTime", isSignal: false, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: false, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: false, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: false, isRequired: false, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: false, isRequired: false, transformFunction: null }, orderDescending: { classPropertyName: "orderDescending", publicName: "orderDescending", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: false, isRequired: false, transformFunction: null }, dragStartFn: { classPropertyName: "dragStartFn", publicName: "dragStartFn", isSignal: false, isRequired: false, transformFunction: null }, dragEnterFn: { classPropertyName: "dragEnterFn", publicName: "dragEnterFn", isSignal: false, isRequired: false, transformFunction: null }, dropFn: { classPropertyName: "dropFn", publicName: "dropFn", isSignal: false, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "fallbackTemplate", first: true, predicate: ["fallbackTemplate"], descendants: true, isSignal: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"columnDefs[column].filter\" [ngSwitch]=\"columnDefs[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table div.table-enum{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: DynamicTableCellComponent, selector: "dynamic-table-cell", inputs: ["item", "column", "id", "globalTemplatePrefix", "fallbackTemplate"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicTableComponent, isStandalone: false, selector: "dynamic-table", inputs: { dataLoader: { classPropertyName: "dataLoader", publicName: "dataLoader", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: false, isRequired: false, transformFunction: null }, parallelData: { classPropertyName: "parallelData", publicName: "parallelData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showItems: { classPropertyName: "showItems", publicName: "showItems", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: null }, updateTime: { classPropertyName: "updateTime", publicName: "updateTime", isSignal: false, isRequired: false, transformFunction: null }, filterTime: { classPropertyName: "filterTime", publicName: "filterTime", isSignal: false, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: false, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: false, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: false, isRequired: false, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: false, isRequired: false, transformFunction: null }, orderDescending: { classPropertyName: "orderDescending", publicName: "orderDescending", isSignal: false, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: false, isRequired: false, transformFunction: null }, titlePrefix: { classPropertyName: "titlePrefix", publicName: "titlePrefix", isSignal: false, isRequired: false, transformFunction: null }, dragStartFn: { classPropertyName: "dragStartFn", publicName: "dragStartFn", isSignal: false, isRequired: false, transformFunction: null }, dragEnterFn: { classPropertyName: "dragEnterFn", publicName: "dragEnterFn", isSignal: false, isRequired: false, transformFunction: null }, dropFn: { classPropertyName: "dropFn", publicName: "dropFn", isSignal: false, isRequired: false, transformFunction: null }, globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "fallbackTemplate", first: true, predicate: ["fallbackTemplate"], descendants: true, isSignal: true }, { propertyName: "templateDirectives", predicate: DynamicTableTemplateDirective, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, static: true }, { propertyName: "wrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }, { propertyName: "defaultRowTemplate", first: true, predicate: ["defaultRowTemplate"], descendants: true, static: true }, { propertyName: "defaultWrapperTemplate", first: true, predicate: ["defaultWrapperTemplate"], descendants: true, static: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"columnDefs[column].filter\" [ngSwitch]=\"columnDefs[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: PaginationDirective, selector: "[pagination]", inputs: ["pagination", "page", "itemsPerPage", "updateTime", "waitFor"], outputs: ["pageChange", "onRefresh"], exportAs: ["pagination"] }, { kind: "directive", type: PaginationItemDirective, selector: "[paginationItem]" }, { kind: "component", type: DropdownBoxComponent, selector: "dropdown-box", inputs: ["closeInside", "attachTo", "placement", "crossAxis", "alignment", "autoAlignment", "allowedPlacements", "componentClass"] }, { kind: "component", type: DynamicTableCellComponent, selector: "dynamic-table-cell", inputs: ["item", "column", "id", "globalTemplatePrefix", "fallbackTemplate"] }, { kind: "component", type: PaginationMenuComponent, selector: "pagination-menu", inputs: ["maxSize", "urlParam", "directionLinks", "boundaryLinks"] }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ValuesPipe, name: "values" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8226
8255
|
}
|
|
8227
8256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
8228
8257
|
type: Component,
|
|
8229
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"columnDefs[column].filter\" [ngSwitch]=\"columnDefs[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table div.table-enum{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
|
|
8258
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dynamic-table", template: "@let columnTemplates = templates();\r\n@let prefix = globalTemplatePrefix();\r\n@let fallback = fallbackTemplate();\r\n\r\n<ng-template #defaultTemplate let-item=\"item\" let-column=\"column\" let-columnDef=\"columnDef\">\r\n <dynamic-table-cell [item]=\"item\"\r\n [column]=\"columnDef\"\r\n [id]=\"column\"\r\n [globalTemplatePrefix]=\"prefix\"\r\n [fallbackTemplate]=\"fallback\"></dynamic-table-cell>\r\n</ng-template>\r\n\r\n<ng-template #columnTemplate let-context let-column=\"column\" let-template=\"template\">\r\n @if (!template?.pure) {\r\n <td [ngClass]=\"'column-' + column\"\r\n [attr.data-testid]=\"testId + '-' + column + '-' + context.rowIndex\">\r\n <ng-container [ngxTemplateOutlet]=\"!template ? defaultTemplate : template.ref\"\r\n [context]=\"context\"></ng-container>\r\n </td>\r\n } @else {\r\n <ng-container [ngxTemplateOutlet]=\"template.ref\" [context]=\"context\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #columnsTemplate let-context>\r\n <ng-container *ngFor=\"let column of cols\"\r\n [ngxTemplateOutlet]=\"columnTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"{\r\n template: columnTemplates[column],\r\n column: column,\r\n columnDef: columnDefs[column]\r\n }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultRowTemplate let-context>\r\n <tr #elem\r\n [draggable]=\"!!dragStartFn\"\r\n [ngClass]=\"{active: selected === context.item}\"\r\n (dragstart)=\"onDragStart($event, elem, context.item)\"\r\n (dragenter)=\"onDragEnter($event, elem, context.item)\"\r\n (dragleave)=\"onDragLeave($event, elem)\"\r\n (drop)=\"onDrop($event, elem, context.item)\"\r\n (click)=\"onClick.emit(context.item)\">\r\n <ng-container [ngxTemplateOutlet]=\"columnsTemplate\"\r\n [context]=\"context\"></ng-container>\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate let-column=\"column\" let-toggle=\"toggle\">\r\n <ng-template #defaultCol>\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </ng-template>\r\n <ng-template #emptyCol>\r\n <span>-</span>\r\n </ng-template>\r\n <ng-container *ngIf=\"columnDefs[column]; else emptyCol\">\r\n <a *ngIf=\"columnDefs[column].sort; else defaultCol\"\r\n [ngClass]=\"['sort', orderBy !== column ? '' : (orderDescending ? 'sort-desc' : 'sort-asc')]\"\r\n (click)=\"setSorting(column, toggle)\">\r\n <span>{{ columnDefs[column].title | translate }}</span>\r\n </a>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<div class=\"dynamic-table\">\r\n <div class=\"table-features-row\">\r\n <ng-content select=\"[table-features-before]\"></ng-content>\r\n @if (showFilter) {\r\n <div class=\"table-input-wrap table-search-filter\">\r\n <label *ngIf=\"filterLabel\" [attr.for]=\"tableId\">\r\n {{ filterLabel | translate }}\r\n </label>\r\n <input type=\"text\"\r\n class=\"search-input\"\r\n [attr.id]=\"tableId\"\r\n [attr.data-testid]=\"testId + '-filter-input'\"\r\n [placeholder]=\"placeholder | translate\"\r\n [ngModel]=\"filter\"\r\n (ngModelChange)=\"setFilter($event)\"/>\r\n </div>\r\n }\r\n @if (sortable) {\r\n <dropdown-box componentClass=\"sort-dropdown\" #sortDd>\r\n <ng-container toggle-content\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: orderBy, toggle: sortDd}\"></ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let column of cols\">\r\n <li [ngClass]=\"'sort-column sort-' + column\" *ngIf=\"columnDefs[column].sort\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n }\r\n @if (showItems) {\r\n <div class=\"table-input-wrap table-items-count\">\r\n <label>\r\n {{ 'label.items.before' | translate }}\r\n </label>\r\n <dropdown-box>\r\n <ng-container toggle-content>\r\n {{ itemsPerPage }}\r\n </ng-container>\r\n <ul>\r\n <ng-container *ngFor=\"let count of showItems\">\r\n <li [ngClass]=\"'item-count count-' + count\" (click)=\"setItemsPerPage(count)\">\r\n {{ count }}\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </dropdown-box>\r\n <label>\r\n {{ 'label.items.after' | translate }}\r\n </label>\r\n </div>\r\n }\r\n <ng-content select=\"[table-features-after]\"></ng-content>\r\n </div>\r\n <div class=\"table-content-row\"\r\n #pagination=\"pagination\"\r\n [pagination]=\"loadData\"\r\n [page]=\"page\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [updateTime]=\"updateTime\">\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n <div class=\"table-responsive\">\r\n <ng-template #defaultWrapperTemplate>\r\n <table class=\"table table-striped\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"'header-column column-' + column\">\r\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{column: column}\"></ng-container>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"hasQuery\">\r\n <th *ngFor=\"let column of cols\" [ngClass]=\"['column-' + column, 'filter-column']\">\r\n <ng-container *ngIf=\"columnDefs[column].filter\" [ngSwitch]=\"columnDefs[column].filterType\">\r\n <ng-container *ngSwitchCase=\"'enum'\">\r\n @let optionPrefix = columnDefs[column].enumPrefix || column;\r\n <ng-template #optionItem let-option=\"option\">\r\n <span [ngClass]=\"`table-enum enum-${optionPrefix} enum-value-${option}`\">\r\n <span>{{ `${optionPrefix}.${option}` | translate }}</span>\r\n </span>\r\n </ng-template>\r\n <dropdown-box componentClass=\"filter-box\"\r\n [ngClass]=\"'filter-box-' + column\" [closeInside]=\"false\">\r\n <ng-container toggle-content>\r\n <span class=\"toggle-placeholder\" *ngIf=\"!query[column]\">\r\n {{ columnDefs[column].title | translate }}\r\n </span>\r\n <span [ngClass]=\"['option-' + option, column + '-option-' + option, option]\"\r\n *ngFor=\"let option of query[column] | values; let ix = index\">\r\n <ng-container *ngIf=\"ix > 0\"> | </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <ul>\r\n @for (option of columnDefs[column].enum; track option) {\r\n <li (click)=\"setQueryValue(column, option)\">\r\n <a class=\"toggle-link\" [ngClass]=\"'toggle-link-' + column\">\r\n <input type=\"checkbox\" [checked]=\"query[column] | includes: option\">\r\n <ng-container [ngTemplateOutlet]=\"optionItem\"\r\n [ngTemplateOutletContext]=\"{option: option}\"></ng-container>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n </dropdown-box>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"search-input\"\r\n type=\"text\"\r\n [attr.data-testid]=\"testId + '-filter-' + column\"\r\n [placeholder]=\"columnDefs[column].title | translate\"\r\n [ngModel]=\"query[column]\"\r\n (ngModelChange)=\"setQueryValue(column, $event)\"/>\r\n </ng-container>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *paginationItem=\"let context\"\r\n [ngxTemplateOutlet]=\"rowTemplate\"\r\n [context]=\"context\"\r\n [additionalContext]=\"this\"></ng-container>\r\n </tbody>\r\n </table>\r\n </ng-template>\r\n\r\n <div class=\"table-wrapper\">\r\n <ng-content select=\"[table-top]\"></ng-content>\r\n <ng-container [ngxTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [context]=\"this\"></ng-container>\r\n <ng-content select=\"[table-bottom]\"></ng-content>\r\n </div>\r\n </div>\r\n <pagination-menu [urlParam]=\"urlParam\" [maxSize]=\"maxPages\" [directionLinks]=\"directionLinks\"\r\n [boundaryLinks]=\"boundaryLinks\"></pagination-menu>\r\n </div>\r\n</div>\r\n", styles: [".dynamic-table{--table-bg: transparent;--table-stripe-bg: rgba(210, 210, 210, .35);--border-size: 1px;--border-color: #ced4da;--bg-color: #ffffff;--text-color: #151515;--highlight-color: var(--primary-color, #888888);--highlight-text-color: #ffffff;--display-toggle: none;--arrow-size: 6px;--arrow-rotation: 90;--arrow-space: calc(var(--arrow-size) * .5 + 1px);--arrow-color: #c6c6c6}.dynamic-table *{box-sizing:border-box}.dynamic-table div.table-enum,.dynamic-table div.table-checkbox{text-align:center}.dynamic-table .search-input{background:var(--bg-color);color:var(--text-color);border:var(--border-size) solid var(--border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dynamic-table .search-input .toggle-placeholder,.dynamic-table .search-input ::placeholder{color:#495057}.dynamic-table .table-responsive{border:1px solid var(--border-color);overflow:hidden;overflow-x:auto;margin-bottom:1rem}.dynamic-table .table-features-row:not(:empty){display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.dynamic-table .table-content-row{position:relative}.dynamic-table .sort-dropdown{display:none}.dynamic-table .table-input-wrap{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dynamic-table .table-input-wrap>label{margin:0;font-weight:700}.dynamic-table .table-input-wrap>input{max-width:400px}.dynamic-table .table-items-count{flex:1}.dynamic-table .table-wrapper{position:relative}.dynamic-table table.table{border-collapse:collapse;margin:0;width:100%;font-family:inherit;font-size:inherit}.dynamic-table table.table th{text-align:left}.dynamic-table table.table th,.dynamic-table table.table td{text-align:left;padding:6px 12px;border:1px solid var(--border-color);vertical-align:middle;white-space:nowrap;width:var(--cell-width, 25%);min-width:fit-content}.dynamic-table table.table-sm th,.dynamic-table table.table-sm td{font-size:var(--font-size-sm);padding:4px 6px}.dynamic-table table.table thead th{font-weight:500}.dynamic-table table.table thead th .dropdown-box{display:block;width:100%;text-align:left}.dynamic-table table.table thead th .search-input{width:100%}.dynamic-table table.table thead th span{display:inline-block;vertical-align:top}.dynamic-table table.table thead th a{cursor:pointer;text-align:left}.dynamic-table table.table thead th.filter-column{text-align:center}.dynamic-table table.table thead tr:first-child th{border-top-width:0}.dynamic-table table.table tbody tr:last-child td{border-bottom-width:0}.dynamic-table table.table thead tr th,.dynamic-table table.table tbody tr td{background-color:var(--table-bg)}.dynamic-table table.table thead tr th:first-child,.dynamic-table table.table tbody tr td:first-child{border-left-width:0}.dynamic-table table.table thead tr th:last-child,.dynamic-table table.table tbody tr td:last-child{border-right-width:0}.dynamic-table table.table tbody tr.active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd) td{background-color:var(--table-stripe-bg)}.dynamic-table .table-striped>tbody>tr:nth-of-type(odd).active td{background-color:var(--highlight-color);color:var(--highlight-text-color)}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:0;padding-right:0}.sort-dropdown .dropdown-box-toggle a.dropdown-box-toggle-link:after{display:none}.sort-dropdown-content-wrapper a.sort,.dynamic-table a.sort{position:relative;display:block;margin-right:calc(var(--arrow-size) * 2);-webkit-user-select:none;user-select:none;padding-right:5px}.sort-dropdown-content-wrapper a.sort:before,.sort-dropdown-content-wrapper a.sort:after,.dynamic-table a.sort:before,.dynamic-table a.sort:after{content:\"\";position:absolute;transition:.2s ease;left:calc(100% + var(--arrow-size));top:calc(50% - var(--arrow-size));border-top:var(--arrow-size) solid transparent;border-bottom:var(--arrow-size) solid transparent;border-left:var(--arrow-size) solid var(--arrow-color);transform:rotate(calc(var(--arrow-rotation) * 1deg)) translate(var(--arrow-space))}.sort-dropdown-content-wrapper a.sort:before,.dynamic-table a.sort:before{--arrow-rotation: -90}.sort-dropdown-content-wrapper a.sort.sort-desc:before,.dynamic-table a.sort.sort-desc:before{--arrow-color: black}.sort-dropdown-content-wrapper a.sort.sort-asc:after,.dynamic-table a.sort.sort-asc:after{--arrow-color: black}.table-enum{--enum-color: #c6c6c6;--enum-radius: 5px}.table-enum span{display:inline-block;padding:2px 5px;background:color-mix(in srgb,var(--enum-color),rgba(255,255,255,.4588235294));border:1px solid var(--enum-color);border-radius:var(--enum-radius);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
|
|
8230
8259
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataLoader: [{
|
|
8231
8260
|
type: Input
|
|
8232
8261
|
}], data: [{
|
|
@@ -8324,6 +8353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
8324
8353
|
}] } });
|
|
8325
8354
|
|
|
8326
8355
|
class InteractiveItemComponent {
|
|
8356
|
+
get id() {
|
|
8357
|
+
return null;
|
|
8358
|
+
}
|
|
8327
8359
|
get frame() {
|
|
8328
8360
|
return this.mFrame;
|
|
8329
8361
|
}
|
|
@@ -8412,12 +8444,15 @@ class InteractiveItemComponent {
|
|
|
8412
8444
|
this.direction = "none";
|
|
8413
8445
|
this.mFrame = new Rect(0, 0, 3, 3);
|
|
8414
8446
|
this.mShapes = [];
|
|
8415
|
-
this.mDistances = new Map();
|
|
8416
8447
|
}
|
|
8417
8448
|
draw(ctx, shape) {
|
|
8418
8449
|
const path = shape.getPath(0, 0, 1);
|
|
8419
8450
|
ctx.fill(path);
|
|
8420
8451
|
ctx.stroke(path);
|
|
8452
|
+
if (!this.isValid) {
|
|
8453
|
+
ctx.fillStyle = `rgba(232, 28, 28, 0.55)`;
|
|
8454
|
+
ctx.fill(path);
|
|
8455
|
+
}
|
|
8421
8456
|
}
|
|
8422
8457
|
ngOnChanges() {
|
|
8423
8458
|
if (!this.canvas)
|
|
@@ -8452,11 +8487,12 @@ class InteractiveItemComponent {
|
|
|
8452
8487
|
return;
|
|
8453
8488
|
const target = this.restrictPosition(this.direction === "vertical" ? this.pos.x : x, this.direction === "horizontal" ? this.pos.y : y);
|
|
8454
8489
|
this.pos = new Point(target);
|
|
8490
|
+
this.makeHitShapes();
|
|
8455
8491
|
this.calcShapes();
|
|
8456
8492
|
this.validPos = this.checkIsValid() ? this.pos : this.validPos;
|
|
8457
8493
|
}
|
|
8458
8494
|
moveEnd() {
|
|
8459
|
-
this.
|
|
8495
|
+
this.clearHitShapes();
|
|
8460
8496
|
if (this.isValid)
|
|
8461
8497
|
return;
|
|
8462
8498
|
this.pos = this.validPos;
|
|
@@ -8464,16 +8500,32 @@ class InteractiveItemComponent {
|
|
|
8464
8500
|
}
|
|
8465
8501
|
rotateTo(value) {
|
|
8466
8502
|
this.rot = isNaN(value) ? this.rot : value;
|
|
8503
|
+
this.makeHitShapes();
|
|
8467
8504
|
this.calcShapes();
|
|
8468
8505
|
this.validRot = this.checkIsValid() ? this.rot : this.validRot;
|
|
8469
8506
|
}
|
|
8470
8507
|
rotateEnd() {
|
|
8471
|
-
this.
|
|
8508
|
+
this.clearHitShapes();
|
|
8472
8509
|
if (this.isValid)
|
|
8473
8510
|
return;
|
|
8474
8511
|
this.rot = this.validRot;
|
|
8475
8512
|
this.calcShapes();
|
|
8476
8513
|
}
|
|
8514
|
+
makeHitShapes() {
|
|
8515
|
+
if (!this.canvas || this.hitShapes)
|
|
8516
|
+
return;
|
|
8517
|
+
this.canvas.selectedItem = this;
|
|
8518
|
+
this.hitShapes = [
|
|
8519
|
+
...(this.canvas.excludedAreas || []),
|
|
8520
|
+
...(this.canvas.items || []).filter(item => item !== this),
|
|
8521
|
+
].flatMap(area => {
|
|
8522
|
+
const distance = this.distToPixels(this.getMinDistance(area));
|
|
8523
|
+
return area.shapes.map(shape => shape.expand(distance));
|
|
8524
|
+
});
|
|
8525
|
+
}
|
|
8526
|
+
clearHitShapes() {
|
|
8527
|
+
this.hitShapes = null;
|
|
8528
|
+
}
|
|
8477
8529
|
restrictPosition(x, y) {
|
|
8478
8530
|
return {
|
|
8479
8531
|
x: clamp(x, this.canvas.xRange),
|
|
@@ -8484,31 +8536,21 @@ class InteractiveItemComponent {
|
|
|
8484
8536
|
}
|
|
8485
8537
|
checkIsValid() {
|
|
8486
8538
|
return this.isValidByParams() &&
|
|
8487
|
-
this.
|
|
8539
|
+
this.hitShapes.every(other => this.isValidByDistance(other));
|
|
8488
8540
|
}
|
|
8489
8541
|
isValidByParams() {
|
|
8490
|
-
return
|
|
8491
|
-
return this.canvas.excludedAreas.some(ex => {
|
|
8492
|
-
return shape.intersects(ex);
|
|
8493
|
-
});
|
|
8494
|
-
});
|
|
8542
|
+
return true;
|
|
8495
8543
|
}
|
|
8496
8544
|
isValidByDistance(other) {
|
|
8497
|
-
if (!this.mDistances.has(other)) {
|
|
8498
|
-
this.mDistances.set(other, this.distToPixels(this.getMinDistance(other)));
|
|
8499
|
-
}
|
|
8500
|
-
const minPixels = this.mDistances.get(other);
|
|
8501
8545
|
return !this.shapes.some(shape => {
|
|
8502
|
-
return other.
|
|
8503
|
-
return shape.distance(os) <= minPixels;
|
|
8504
|
-
});
|
|
8546
|
+
return other.intersects(shape, true);
|
|
8505
8547
|
});
|
|
8506
8548
|
}
|
|
8507
8549
|
distToPixels(value) {
|
|
8508
|
-
return !this.canvas ? 1 :
|
|
8550
|
+
return !this.canvas ? 1 : (isNaN(value) || value < 0 ? 0 : value) * (this.canvas.ratio ?? 1);
|
|
8509
8551
|
}
|
|
8510
8552
|
getMinDistance(other) {
|
|
8511
|
-
return !other ? 0 :
|
|
8553
|
+
return !other ? 0 : 10;
|
|
8512
8554
|
}
|
|
8513
8555
|
calcShape(x, y) {
|
|
8514
8556
|
return new Point(x, y);
|
|
@@ -8801,14 +8843,17 @@ class InteractiveCanvasComponent {
|
|
|
8801
8843
|
+ this.canvasHeight * untracked(() => this.panOffset());
|
|
8802
8844
|
this.cycles = this.infinite
|
|
8803
8845
|
? [this.basePan - this.fullHeight, this.basePan, this.basePan + this.fullHeight] : [0];
|
|
8804
|
-
this.excludedAreas = (params.excludedAreas || []).
|
|
8846
|
+
this.excludedAreas = (params.excludedAreas || []).map(coords => {
|
|
8805
8847
|
const x = coords.x * this.ratio;
|
|
8806
8848
|
const y = coords.y * this.ratio;
|
|
8807
8849
|
const width = coords.width * this.ratio;
|
|
8808
8850
|
const height = coords.height * this.ratio;
|
|
8809
|
-
return
|
|
8810
|
-
|
|
8811
|
-
|
|
8851
|
+
return {
|
|
8852
|
+
id: coords.id || "",
|
|
8853
|
+
shapes: this.cycles.map(cycle => {
|
|
8854
|
+
return new Rect(x, y + cycle, width, height);
|
|
8855
|
+
})
|
|
8856
|
+
};
|
|
8812
8857
|
});
|
|
8813
8858
|
this.items.forEach(item => {
|
|
8814
8859
|
item.canvasParams = params;
|
|
@@ -8930,11 +8975,11 @@ class InteractiveCanvasComponent {
|
|
|
8930
8975
|
ctx.restore();
|
|
8931
8976
|
}
|
|
8932
8977
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: InteractiveCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\r\n [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n (resize)=\"resize()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (panend)=\"onPanEnd()\"\r\n (panmove)=\"onPanMove($event)\"\r\n (panstart)=\"onPanStart()\">\r\n <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
8978
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\r\n [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n (resize)=\"resize()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (panend)=\"onPanEnd()\"\r\n (panmove)=\"onPanMove($event)\"\r\n (panstart)=\"onPanStart()\">\r\n <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8934
8979
|
}
|
|
8935
8980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
|
|
8936
8981
|
type: Component,
|
|
8937
|
-
args: [{ standalone: false, selector: "interactive-canvas", template: "<div #containerElem\r\n [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n (resize)=\"resize()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (panend)=\"onPanEnd()\"\r\n (panmove)=\"onPanMove($event)\"\r\n (panstart)=\"onPanStart()\">\r\n <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
|
|
8982
|
+
args: [{ standalone: false, selector: "interactive-canvas", encapsulation: ViewEncapsulation.None, template: "<div #containerElem\r\n [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n (resize)=\"resize()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (panend)=\"onPanEnd()\"\r\n (panmove)=\"onPanMove($event)\"\r\n (panstart)=\"onPanStart()\">\r\n <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
|
|
8938
8983
|
}], ctorParameters: () => [], propDecorators: { containerElem: [{
|
|
8939
8984
|
type: ViewChild,
|
|
8940
8985
|
args: ["containerElem", { static: true }]
|
|
@@ -9807,5 +9852,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
9807
9852
|
* Generated bundle index. Do not edit.
|
|
9808
9853
|
*/
|
|
9809
9854
|
|
|
9810
|
-
export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableCellComponent, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, Enum, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, RequestBag, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, RulerCanvasRenderer, SCHEMA_SELECTOR, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShapeGroup, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, SyncAsyncPipe, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, WysiwygComponent, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, diffEntities, distance, distanceSq, dividePts, dotProduct, ensurePoint, eqPts, getComponentDef, getCssVariables, getRoot,
|
|
9855
|
+
export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableCellComponent, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, Enum, ErrorHandlerService, EventsService, ExclusionsRenderer, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, HitZoneRenderer, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, RequestBag, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, RulerCanvasRenderer, SCHEMA_SELECTOR, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShapeGroup, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, SyncAsyncPipe, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, WysiwygComponent, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, diffEntities, distance, distanceSq, dividePts, dotProduct, ensurePoint, eqPts, getComponentDef, getCssVariables, getRoot, impatientPromise, injectOptions, isBrowser, isEqual, isPoint, isZero, lengthOfPt, lengthSq$1 as lengthSq, lerpPts, md5, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, scalePt, selectorMatchesList, stringify, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
|
|
9811
9856
|
//# sourceMappingURL=stemy-ngx-utils.mjs.map
|