@area8975/ui 0.2.2-dev.40 → 0.2.2-dev.41
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/CHANGELOG.md +3 -0
- package/fesm2022/area8975-ui.mjs +663 -131
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/area8975-ui.d.ts +284 -100
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -304,13 +304,43 @@ function chartSeriesStyle(index, dashes, dark = false) {
|
|
|
304
304
|
dashed: false
|
|
305
305
|
};
|
|
306
306
|
}
|
|
307
|
-
|
|
307
|
+
const HEX_COLOUR = /^#([0-9a-f]{6})$/i;
|
|
308
|
+
function hexChannels(colour) {
|
|
309
|
+
const digits = HEX_COLOUR.exec(colour)?.[1];
|
|
310
|
+
return digits ? [
|
|
311
|
+
0,
|
|
312
|
+
2,
|
|
313
|
+
4
|
|
314
|
+
].map((at) => parseInt(digits.slice(at, at + 2), 16)) : null;
|
|
315
|
+
}
|
|
316
|
+
function mixChartColours(colour, towards, strength) {
|
|
317
|
+
const from = hexChannels(colour);
|
|
318
|
+
const to = hexChannels(towards);
|
|
319
|
+
if (!from || !to) return null;
|
|
320
|
+
return `#${from.map((channel, index) => Math.round(channel * strength + to[index] * (1 - strength))).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
|
|
321
|
+
}
|
|
322
|
+
const DARK_LABEL = CHART_INK.text;
|
|
323
|
+
const LIGHT_LABEL = "#ffffff";
|
|
324
|
+
function chartLabelInk(background) {
|
|
325
|
+
const channels = hexChannels(background);
|
|
326
|
+
if (!channels) return DARK_LABEL;
|
|
327
|
+
const backgroundLuminance = screenLuminance(channels);
|
|
328
|
+
return lightnessContrast(screenLuminance(hexChannels(LIGHT_LABEL)), backgroundLuminance) > lightnessContrast(screenLuminance(hexChannels(DARK_LABEL)), backgroundLuminance) ? LIGHT_LABEL : DARK_LABEL;
|
|
329
|
+
}
|
|
330
|
+
function screenLuminance(channels) {
|
|
331
|
+
const [red, green, blue] = channels.map((channel) => (channel / 255) ** 2.4);
|
|
332
|
+
const luminance = .2126729 * red + .7151522 * green + .072175 * blue;
|
|
333
|
+
return luminance < .022 ? luminance + (.022 - luminance) ** 1.414 : luminance;
|
|
334
|
+
}
|
|
335
|
+
function lightnessContrast(textLuminance, backgroundLuminance) {
|
|
336
|
+
const contrast = backgroundLuminance > textLuminance ? (backgroundLuminance ** .56 - textLuminance ** .57) * 1.14 : (backgroundLuminance ** .65 - textLuminance ** .62) * 1.14;
|
|
337
|
+
return Math.max(Math.abs(contrast) - .027, 0) * 100;
|
|
338
|
+
}
|
|
339
|
+
var UiChartBase = class UiChartBase {
|
|
308
340
|
uiFormat = inject(UI_FORMAT);
|
|
309
341
|
privacy = inject(UI_PRIVACY);
|
|
310
342
|
dark = inject(UiDarkClass).isDark;
|
|
311
343
|
ink = computed(() => chartInk(this.dark()), ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
|
|
312
|
-
series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
313
|
-
categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
|
|
314
344
|
ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
315
345
|
height = input(300, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
316
346
|
valueFormatter = input(numberFormatter(this.uiFormat.locale), ...ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []);
|
|
@@ -329,15 +359,9 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
329
359
|
transform: booleanAttribute
|
|
330
360
|
});
|
|
331
361
|
options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
332
|
-
highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
|
|
333
|
-
highlightKeepsColours = input(false, {
|
|
334
|
-
...ngDevMode ? { debugName: "highlightKeepsColours" } : /* istanbul ignore next */ {},
|
|
335
|
-
transform: booleanAttribute
|
|
336
|
-
});
|
|
337
362
|
legend = input("auto", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
|
|
338
363
|
hiddenSeries = signal([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
|
|
339
364
|
emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
|
|
340
|
-
supportsDashes = false;
|
|
341
365
|
money = computed(() => moneyFormatterParts(this.valueFormatter()), ...ngDevMode ? [{ debugName: "money" }] : /* istanbul ignore next */ []);
|
|
342
366
|
privacyMode = computed(() => this.sensitive() ?? !!this.money() ? this.privacy() : "visible", ...ngDevMode ? [{ debugName: "privacyMode" }] : /* istanbul ignore next */ []);
|
|
343
367
|
masked = computed(() => this.privacyMode() !== "visible", ...ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []);
|
|
@@ -352,42 +376,6 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
352
376
|
const height = this.height();
|
|
353
377
|
return height === "fill" ? "100%" : height;
|
|
354
378
|
}, ...ngDevMode ? [{ debugName: "apexHeight" }] : /* istanbul ignore next */ []);
|
|
355
|
-
isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
356
|
-
isMuted = computed(() => {
|
|
357
|
-
const highlight = this.highlight();
|
|
358
|
-
return this.series().map((item) => !!highlight && !highlight.includes(item.name));
|
|
359
|
-
}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
|
|
360
|
-
colourOrder = computed(() => this.highlightKeepsColours() ? null : this.highlight(), ...ngDevMode ? [{ debugName: "colourOrder" }] : /* istanbul ignore next */ []);
|
|
361
|
-
styles = computed(() => {
|
|
362
|
-
const order = this.colourOrder();
|
|
363
|
-
const muted = this.isMuted();
|
|
364
|
-
return this.series().map((item, index) => {
|
|
365
|
-
const dashed = this.supportsDashes && !!item.dashed;
|
|
366
|
-
if (muted[index]) return {
|
|
367
|
-
colour: this.ink().context,
|
|
368
|
-
dashed
|
|
369
|
-
};
|
|
370
|
-
const style = chartSeriesStyle(order ? order.indexOf(item.name) : index, this.supportsDashes, this.dark());
|
|
371
|
-
return {
|
|
372
|
-
colour: item.colour ?? style.colour,
|
|
373
|
-
dashed: style.dashed || dashed
|
|
374
|
-
};
|
|
375
|
-
});
|
|
376
|
-
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
377
|
-
colours = computed(() => this.styles().map((style) => style.colour), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
|
|
378
|
-
dashed = computed(() => this.styles().map((style) => style.dashed), ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
|
|
379
|
-
legendItems = computed(() => {
|
|
380
|
-
const order = this.colourOrder();
|
|
381
|
-
const items = this.series().map((item, index) => ({
|
|
382
|
-
name: item.name,
|
|
383
|
-
...this.styles()[index]
|
|
384
|
-
})).filter((_, index) => !this.isMuted()[index]);
|
|
385
|
-
return order ? items.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) : items;
|
|
386
|
-
}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
|
|
387
|
-
legendNote = computed(() => {
|
|
388
|
-
const count = this.isMuted().filter(Boolean).length;
|
|
389
|
-
return count ? `${count} more in grey` : "";
|
|
390
|
-
}, ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
|
|
391
379
|
formatValue(value) {
|
|
392
380
|
return value === null || value === void 0 ? "-" : this.displayFormatter()(value);
|
|
393
381
|
}
|
|
@@ -395,30 +383,16 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
395
383
|
minVersion: "12.0.0",
|
|
396
384
|
version: "22.2.1",
|
|
397
385
|
ngImport: i0,
|
|
398
|
-
type:
|
|
386
|
+
type: UiChartBase,
|
|
399
387
|
deps: [],
|
|
400
388
|
target: i0.ɵɵFactoryTarget.Directive
|
|
401
389
|
});
|
|
402
390
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
403
391
|
minVersion: "17.1.0",
|
|
404
392
|
version: "22.2.1",
|
|
405
|
-
type:
|
|
393
|
+
type: UiChartBase,
|
|
406
394
|
isStandalone: true,
|
|
407
395
|
inputs: {
|
|
408
|
-
series: {
|
|
409
|
-
classPropertyName: "series",
|
|
410
|
-
publicName: "series",
|
|
411
|
-
isSignal: true,
|
|
412
|
-
isRequired: true,
|
|
413
|
-
transformFunction: null
|
|
414
|
-
},
|
|
415
|
-
categories: {
|
|
416
|
-
classPropertyName: "categories",
|
|
417
|
-
publicName: "categories",
|
|
418
|
-
isSignal: true,
|
|
419
|
-
isRequired: true,
|
|
420
|
-
transformFunction: null
|
|
421
|
-
},
|
|
422
396
|
ariaLabel: {
|
|
423
397
|
classPropertyName: "ariaLabel",
|
|
424
398
|
publicName: "ariaLabel",
|
|
@@ -482,20 +456,6 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
482
456
|
isRequired: false,
|
|
483
457
|
transformFunction: null
|
|
484
458
|
},
|
|
485
|
-
highlight: {
|
|
486
|
-
classPropertyName: "highlight",
|
|
487
|
-
publicName: "highlight",
|
|
488
|
-
isSignal: true,
|
|
489
|
-
isRequired: false,
|
|
490
|
-
transformFunction: null
|
|
491
|
-
},
|
|
492
|
-
highlightKeepsColours: {
|
|
493
|
-
classPropertyName: "highlightKeepsColours",
|
|
494
|
-
publicName: "highlightKeepsColours",
|
|
495
|
-
isSignal: true,
|
|
496
|
-
isRequired: false,
|
|
497
|
-
transformFunction: null
|
|
498
|
-
},
|
|
499
459
|
legend: {
|
|
500
460
|
classPropertyName: "legend",
|
|
501
461
|
publicName: "legend",
|
|
@@ -511,25 +471,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
511
471
|
minVersion: "12.0.0",
|
|
512
472
|
version: "22.2.1",
|
|
513
473
|
ngImport: i0,
|
|
514
|
-
type:
|
|
474
|
+
type: UiChartBase,
|
|
515
475
|
decorators: [{ type: Directive }],
|
|
516
476
|
propDecorators: {
|
|
517
|
-
series: [{
|
|
518
|
-
type: i0.Input,
|
|
519
|
-
args: [{
|
|
520
|
-
isSignal: true,
|
|
521
|
-
alias: "series",
|
|
522
|
-
required: true
|
|
523
|
-
}]
|
|
524
|
-
}],
|
|
525
|
-
categories: [{
|
|
526
|
-
type: i0.Input,
|
|
527
|
-
args: [{
|
|
528
|
-
isSignal: true,
|
|
529
|
-
alias: "categories",
|
|
530
|
-
required: true
|
|
531
|
-
}]
|
|
532
|
-
}],
|
|
533
477
|
ariaLabel: [{
|
|
534
478
|
type: i0.Input,
|
|
535
479
|
args: [{
|
|
@@ -602,36 +546,153 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
602
546
|
required: false
|
|
603
547
|
}]
|
|
604
548
|
}],
|
|
605
|
-
|
|
549
|
+
legend: [{
|
|
606
550
|
type: i0.Input,
|
|
607
551
|
args: [{
|
|
608
552
|
isSignal: true,
|
|
609
|
-
alias: "
|
|
553
|
+
alias: "legend",
|
|
610
554
|
required: false
|
|
611
555
|
}]
|
|
556
|
+
}]
|
|
557
|
+
}
|
|
558
|
+
});
|
|
559
|
+
function numberFormatter(locale) {
|
|
560
|
+
const formatter = new Intl.NumberFormat(locale);
|
|
561
|
+
return (value) => formatter.format(value);
|
|
562
|
+
}
|
|
563
|
+
var UiAxisChartBase = class UiAxisChartBase extends UiChartBase {
|
|
564
|
+
series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
565
|
+
categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
|
|
566
|
+
highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
|
|
567
|
+
highlightKeepsColours = input(false, {
|
|
568
|
+
...ngDevMode ? { debugName: "highlightKeepsColours" } : /* istanbul ignore next */ {},
|
|
569
|
+
transform: booleanAttribute
|
|
570
|
+
});
|
|
571
|
+
supportsDashes = false;
|
|
572
|
+
isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
573
|
+
isMuted = computed(() => {
|
|
574
|
+
const highlight = this.highlight();
|
|
575
|
+
return this.series().map((item) => !!highlight && !highlight.includes(item.name));
|
|
576
|
+
}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
|
|
577
|
+
colourOrder = computed(() => this.highlightKeepsColours() ? null : this.highlight(), ...ngDevMode ? [{ debugName: "colourOrder" }] : /* istanbul ignore next */ []);
|
|
578
|
+
styles = computed(() => {
|
|
579
|
+
const order = this.colourOrder();
|
|
580
|
+
const muted = this.isMuted();
|
|
581
|
+
return this.series().map((item, index) => {
|
|
582
|
+
const dashed = this.supportsDashes && !!item.dashed;
|
|
583
|
+
if (muted[index]) return {
|
|
584
|
+
colour: this.ink().context,
|
|
585
|
+
dashed
|
|
586
|
+
};
|
|
587
|
+
const style = chartSeriesStyle(order ? order.indexOf(item.name) : index, this.supportsDashes, this.dark());
|
|
588
|
+
return {
|
|
589
|
+
colour: item.colour ?? style.colour,
|
|
590
|
+
dashed: style.dashed || dashed
|
|
591
|
+
};
|
|
592
|
+
});
|
|
593
|
+
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
594
|
+
colours = computed(() => this.styles().map((style) => style.colour), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
|
|
595
|
+
dashed = computed(() => this.styles().map((style) => style.dashed), ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
|
|
596
|
+
legendItems = computed(() => {
|
|
597
|
+
const order = this.colourOrder();
|
|
598
|
+
const items = this.series().map((item, index) => ({
|
|
599
|
+
name: item.name,
|
|
600
|
+
...this.styles()[index]
|
|
601
|
+
})).filter((_, index) => !this.isMuted()[index]);
|
|
602
|
+
return order ? items.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) : items;
|
|
603
|
+
}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
|
|
604
|
+
legendNote = computed(() => {
|
|
605
|
+
const count = this.isMuted().filter(Boolean).length;
|
|
606
|
+
return count ? `${count} more in grey` : "";
|
|
607
|
+
}, ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
|
|
608
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
609
|
+
minVersion: "12.0.0",
|
|
610
|
+
version: "22.2.1",
|
|
611
|
+
ngImport: i0,
|
|
612
|
+
type: UiAxisChartBase,
|
|
613
|
+
deps: null,
|
|
614
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
615
|
+
});
|
|
616
|
+
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
617
|
+
minVersion: "17.1.0",
|
|
618
|
+
version: "22.2.1",
|
|
619
|
+
type: UiAxisChartBase,
|
|
620
|
+
isStandalone: true,
|
|
621
|
+
inputs: {
|
|
622
|
+
series: {
|
|
623
|
+
classPropertyName: "series",
|
|
624
|
+
publicName: "series",
|
|
625
|
+
isSignal: true,
|
|
626
|
+
isRequired: true,
|
|
627
|
+
transformFunction: null
|
|
628
|
+
},
|
|
629
|
+
categories: {
|
|
630
|
+
classPropertyName: "categories",
|
|
631
|
+
publicName: "categories",
|
|
632
|
+
isSignal: true,
|
|
633
|
+
isRequired: true,
|
|
634
|
+
transformFunction: null
|
|
635
|
+
},
|
|
636
|
+
highlight: {
|
|
637
|
+
classPropertyName: "highlight",
|
|
638
|
+
publicName: "highlight",
|
|
639
|
+
isSignal: true,
|
|
640
|
+
isRequired: false,
|
|
641
|
+
transformFunction: null
|
|
642
|
+
},
|
|
643
|
+
highlightKeepsColours: {
|
|
644
|
+
classPropertyName: "highlightKeepsColours",
|
|
645
|
+
publicName: "highlightKeepsColours",
|
|
646
|
+
isSignal: true,
|
|
647
|
+
isRequired: false,
|
|
648
|
+
transformFunction: null
|
|
649
|
+
}
|
|
650
|
+
},
|
|
651
|
+
usesInheritance: true,
|
|
652
|
+
ngImport: i0
|
|
653
|
+
});
|
|
654
|
+
};
|
|
655
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
656
|
+
minVersion: "12.0.0",
|
|
657
|
+
version: "22.2.1",
|
|
658
|
+
ngImport: i0,
|
|
659
|
+
type: UiAxisChartBase,
|
|
660
|
+
decorators: [{ type: Directive }],
|
|
661
|
+
propDecorators: {
|
|
662
|
+
series: [{
|
|
663
|
+
type: i0.Input,
|
|
664
|
+
args: [{
|
|
665
|
+
isSignal: true,
|
|
666
|
+
alias: "series",
|
|
667
|
+
required: true
|
|
668
|
+
}]
|
|
612
669
|
}],
|
|
613
|
-
|
|
670
|
+
categories: [{
|
|
614
671
|
type: i0.Input,
|
|
615
672
|
args: [{
|
|
616
673
|
isSignal: true,
|
|
617
|
-
alias: "
|
|
674
|
+
alias: "categories",
|
|
675
|
+
required: true
|
|
676
|
+
}]
|
|
677
|
+
}],
|
|
678
|
+
highlight: [{
|
|
679
|
+
type: i0.Input,
|
|
680
|
+
args: [{
|
|
681
|
+
isSignal: true,
|
|
682
|
+
alias: "highlight",
|
|
618
683
|
required: false
|
|
619
684
|
}]
|
|
620
685
|
}],
|
|
621
|
-
|
|
686
|
+
highlightKeepsColours: [{
|
|
622
687
|
type: i0.Input,
|
|
623
688
|
args: [{
|
|
624
689
|
isSignal: true,
|
|
625
|
-
alias: "
|
|
690
|
+
alias: "highlightKeepsColours",
|
|
626
691
|
required: false
|
|
627
692
|
}]
|
|
628
693
|
}]
|
|
629
694
|
}
|
|
630
695
|
});
|
|
631
|
-
function numberFormatter(locale) {
|
|
632
|
-
const formatter = new Intl.NumberFormat(locale);
|
|
633
|
-
return (value) => formatter.format(value);
|
|
634
|
-
}
|
|
635
696
|
function chartAxisLabels(ink) {
|
|
636
697
|
return { style: {
|
|
637
698
|
colors: ink.muted,
|
|
@@ -1208,7 +1269,7 @@ var UiChartComponent = class UiChartComponent {
|
|
|
1208
1269
|
></div>
|
|
1209
1270
|
`,
|
|
1210
1271
|
isInline: true,
|
|
1211
|
-
styles: ["
|
|
1272
|
+
styles: [".ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
1212
1273
|
encapsulation: i0.ViewEncapsulation.None
|
|
1213
1274
|
});
|
|
1214
1275
|
};
|
|
@@ -1231,7 +1292,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1231
1292
|
`,
|
|
1232
1293
|
encapsulation: ViewEncapsulation.None,
|
|
1233
1294
|
host: { class: "ui-chart" },
|
|
1234
|
-
styles: ["
|
|
1295
|
+
styles: [".ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
1235
1296
|
}]
|
|
1236
1297
|
}],
|
|
1237
1298
|
ctorParameters: () => [],
|
|
@@ -1711,14 +1772,18 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1711
1772
|
/>
|
|
1712
1773
|
}
|
|
1713
1774
|
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1775
|
+
@if (options(); as options) {
|
|
1776
|
+
<ui-chart
|
|
1777
|
+
[class.grow]="fill()"
|
|
1778
|
+
[class.min-h-0]="fill()"
|
|
1779
|
+
[options]="options"
|
|
1780
|
+
[ariaLabel]="ariaLabel()"
|
|
1781
|
+
[hiddenSeries]="hiddenSeries()"
|
|
1782
|
+
[emphasis]="emphasis()"
|
|
1783
|
+
/>
|
|
1784
|
+
} @else {
|
|
1785
|
+
<ng-content />
|
|
1786
|
+
}
|
|
1722
1787
|
|
|
1723
1788
|
<ui-chart-table
|
|
1724
1789
|
[caption]="ariaLabel()"
|
|
@@ -1821,14 +1886,18 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1821
1886
|
/>
|
|
1822
1887
|
}
|
|
1823
1888
|
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1889
|
+
@if (options(); as options) {
|
|
1890
|
+
<ui-chart
|
|
1891
|
+
[class.grow]="fill()"
|
|
1892
|
+
[class.min-h-0]="fill()"
|
|
1893
|
+
[options]="options"
|
|
1894
|
+
[ariaLabel]="ariaLabel()"
|
|
1895
|
+
[hiddenSeries]="hiddenSeries()"
|
|
1896
|
+
[emphasis]="emphasis()"
|
|
1897
|
+
/>
|
|
1898
|
+
} @else {
|
|
1899
|
+
<ng-content />
|
|
1900
|
+
}
|
|
1832
1901
|
|
|
1833
1902
|
<ui-chart-table
|
|
1834
1903
|
[caption]="ariaLabel()"
|
|
@@ -2004,16 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2004
2073
|
const MAX_BAR_THICKNESS = 24;
|
|
2005
2074
|
const FADED_STRENGTH = .3;
|
|
2006
2075
|
function fade(colour, ink) {
|
|
2007
|
-
|
|
2008
|
-
const from = hex.exec(colour)?.[1];
|
|
2009
|
-
const to = hex.exec(ink.surface)?.[1];
|
|
2010
|
-
if (!from || !to) return ink.context;
|
|
2011
|
-
const channel = (value, at) => parseInt(value.slice(at, at + 2), 16);
|
|
2012
|
-
return `rgb(${[
|
|
2013
|
-
0,
|
|
2014
|
-
2,
|
|
2015
|
-
4
|
|
2016
|
-
].map((at) => Math.round(channel(from, at) * FADED_STRENGTH + channel(to, at) * .7)).join(", ")})`;
|
|
2076
|
+
return mixChartColours(colour, ink.surface, FADED_STRENGTH) ?? ink.context;
|
|
2017
2077
|
}
|
|
2018
2078
|
var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
2019
2079
|
orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
|
|
@@ -2689,6 +2749,478 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2689
2749
|
}
|
|
2690
2750
|
});
|
|
2691
2751
|
const PieChartVariants = ["pie", "donut"];
|
|
2752
|
+
const SHADE_STEP = .16;
|
|
2753
|
+
const PALEST_SHADE = .4;
|
|
2754
|
+
const HEADER_MIN_WIDTH = 56;
|
|
2755
|
+
const HEADER_MIN_HEIGHT = 56;
|
|
2756
|
+
const NAME_MIN_WIDTH = 48;
|
|
2757
|
+
const NAME_MIN_HEIGHT = 24;
|
|
2758
|
+
const VALUE_MIN_HEIGHT = 42;
|
|
2759
|
+
function treemapGroupColours(groups, dark) {
|
|
2760
|
+
return groups.map((group, index) => group.colour ?? chartColour(index, dark));
|
|
2761
|
+
}
|
|
2762
|
+
function drawnTreemapGroups(groups, colours, hidden, shades, ink) {
|
|
2763
|
+
return groups.map((group, index) => drawnGroup(group, colours[index], shades, ink)).filter((group) => group.blocks.length > 0 && !hidden.includes(group.name));
|
|
2764
|
+
}
|
|
2765
|
+
function drawnGroup(group, colour, shades, ink) {
|
|
2766
|
+
const items = group.items.filter((item) => item.value > 0);
|
|
2767
|
+
const ranks = rankByValue(items.map((item) => item.value));
|
|
2768
|
+
const blocks = items.map((item, index) => {
|
|
2769
|
+
const fill = shades ? shadeOf(colour, ranks[index], ink) : colour;
|
|
2770
|
+
return {
|
|
2771
|
+
group: group.name,
|
|
2772
|
+
item: item.name,
|
|
2773
|
+
value: item.value,
|
|
2774
|
+
fill,
|
|
2775
|
+
labelInk: chartLabelInk(fill)
|
|
2776
|
+
};
|
|
2777
|
+
});
|
|
2778
|
+
return {
|
|
2779
|
+
name: group.name,
|
|
2780
|
+
colour,
|
|
2781
|
+
total: blocks.reduce((sum, block) => sum + block.value, 0),
|
|
2782
|
+
blocks
|
|
2783
|
+
};
|
|
2784
|
+
}
|
|
2785
|
+
function rankByValue(values) {
|
|
2786
|
+
const biggestFirst = values.map((value, index) => ({
|
|
2787
|
+
value,
|
|
2788
|
+
index
|
|
2789
|
+
})).sort((a, b) => b.value - a.value);
|
|
2790
|
+
const ranks = [];
|
|
2791
|
+
biggestFirst.forEach((entry, rank) => {
|
|
2792
|
+
ranks[entry.index] = rank;
|
|
2793
|
+
});
|
|
2794
|
+
return ranks;
|
|
2795
|
+
}
|
|
2796
|
+
function shadeOf(colour, rank, ink) {
|
|
2797
|
+
const strength = Math.max(1 - rank * SHADE_STEP, PALEST_SHADE);
|
|
2798
|
+
return mixChartColours(colour, ink.surface, strength) ?? colour;
|
|
2799
|
+
}
|
|
2800
|
+
function treemapTableRows(groups) {
|
|
2801
|
+
const items = groups.flatMap((group) => group.items.filter((item) => item.value > 0).map((item) => ({
|
|
2802
|
+
name: `${group.name} – ${item.name}`,
|
|
2803
|
+
value: item.value
|
|
2804
|
+
})));
|
|
2805
|
+
return {
|
|
2806
|
+
categories: items.map((item) => item.name),
|
|
2807
|
+
values: items.map((item) => item.value)
|
|
2808
|
+
};
|
|
2809
|
+
}
|
|
2810
|
+
function placeTreemapGroups(groups, bounds) {
|
|
2811
|
+
const groupRects = squarify(groups.map((group) => group.total), bounds, 8);
|
|
2812
|
+
return groups.map((group, index) => placeGroup(group, groupRects[index]));
|
|
2813
|
+
}
|
|
2814
|
+
function placeGroup(group, rect) {
|
|
2815
|
+
const hasHeader = rect.width >= HEADER_MIN_WIDTH && rect.height >= HEADER_MIN_HEIGHT;
|
|
2816
|
+
const headerHeight = hasHeader ? 24 : 0;
|
|
2817
|
+
const blockArea = {
|
|
2818
|
+
x: 0,
|
|
2819
|
+
y: headerHeight,
|
|
2820
|
+
width: rect.width,
|
|
2821
|
+
height: rect.height - headerHeight
|
|
2822
|
+
};
|
|
2823
|
+
const blockRects = squarify(group.blocks.map((block) => block.value), blockArea, 3);
|
|
2824
|
+
return {
|
|
2825
|
+
...group,
|
|
2826
|
+
rect,
|
|
2827
|
+
hasHeader,
|
|
2828
|
+
placedBlocks: group.blocks.map((block, index) => ({
|
|
2829
|
+
...block,
|
|
2830
|
+
rect: blockRects[index],
|
|
2831
|
+
label: labelFor(blockRects[index])
|
|
2832
|
+
}))
|
|
2833
|
+
};
|
|
2834
|
+
}
|
|
2835
|
+
function labelFor(rect) {
|
|
2836
|
+
if (rect.width < NAME_MIN_WIDTH || rect.height < NAME_MIN_HEIGHT) return "none";
|
|
2837
|
+
return rect.height < VALUE_MIN_HEIGHT ? "name" : "full";
|
|
2838
|
+
}
|
|
2839
|
+
function squarify(values, bounds, gap = 0) {
|
|
2840
|
+
const total = values.reduce((sum, value) => sum + value, 0);
|
|
2841
|
+
const rects = values.map(() => ({
|
|
2842
|
+
x: bounds.x,
|
|
2843
|
+
y: bounds.y,
|
|
2844
|
+
width: 0,
|
|
2845
|
+
height: 0
|
|
2846
|
+
}));
|
|
2847
|
+
if (total <= 0 || bounds.width <= 0 || bounds.height <= 0) return rects;
|
|
2848
|
+
const outer = grow(bounds, gap / 2);
|
|
2849
|
+
const scale = outer.width * outer.height / total;
|
|
2850
|
+
const biggestFirst = values.map((value, index) => ({
|
|
2851
|
+
index,
|
|
2852
|
+
area: value * scale
|
|
2853
|
+
})).sort((a, b) => b.area - a.area);
|
|
2854
|
+
let remaining = outer;
|
|
2855
|
+
let row = [];
|
|
2856
|
+
for (const entry of biggestFirst) {
|
|
2857
|
+
const side = Math.min(remaining.width, remaining.height);
|
|
2858
|
+
const longer = [...row, entry];
|
|
2859
|
+
if (row.length === 0 || worstAspect(longer, side) <= worstAspect(row, side)) row = longer;
|
|
2860
|
+
else {
|
|
2861
|
+
remaining = placeRow(row, remaining, rects);
|
|
2862
|
+
row = [entry];
|
|
2863
|
+
}
|
|
2864
|
+
}
|
|
2865
|
+
placeRow(row, remaining, rects);
|
|
2866
|
+
return rects.map((rect) => rect.width > 0 ? grow(rect, -gap / 2) : rect);
|
|
2867
|
+
}
|
|
2868
|
+
function worstAspect(row, side) {
|
|
2869
|
+
const sum = row.reduce((total, entry) => total + entry.area, 0);
|
|
2870
|
+
const largest = Math.max(...row.map((entry) => entry.area));
|
|
2871
|
+
const smallest = Math.min(...row.map((entry) => entry.area));
|
|
2872
|
+
return Math.max(side * side * largest / (sum * sum), sum * sum / (side * side * smallest));
|
|
2873
|
+
}
|
|
2874
|
+
function placeRow(row, area, rects) {
|
|
2875
|
+
const sum = row.reduce((total, entry) => total + entry.area, 0);
|
|
2876
|
+
if (area.width >= area.height) {
|
|
2877
|
+
const width = sum / area.height;
|
|
2878
|
+
let y = area.y;
|
|
2879
|
+
for (const entry of row) {
|
|
2880
|
+
const height = entry.area / width;
|
|
2881
|
+
rects[entry.index] = {
|
|
2882
|
+
x: area.x,
|
|
2883
|
+
y,
|
|
2884
|
+
width,
|
|
2885
|
+
height
|
|
2886
|
+
};
|
|
2887
|
+
y += height;
|
|
2888
|
+
}
|
|
2889
|
+
return {
|
|
2890
|
+
x: area.x + width,
|
|
2891
|
+
y: area.y,
|
|
2892
|
+
width: area.width - width,
|
|
2893
|
+
height: area.height
|
|
2894
|
+
};
|
|
2895
|
+
}
|
|
2896
|
+
const height = sum / area.width;
|
|
2897
|
+
let x = area.x;
|
|
2898
|
+
for (const entry of row) {
|
|
2899
|
+
const width = entry.area / height;
|
|
2900
|
+
rects[entry.index] = {
|
|
2901
|
+
x,
|
|
2902
|
+
y: area.y,
|
|
2903
|
+
width,
|
|
2904
|
+
height
|
|
2905
|
+
};
|
|
2906
|
+
x += width;
|
|
2907
|
+
}
|
|
2908
|
+
return {
|
|
2909
|
+
x: area.x,
|
|
2910
|
+
y: area.y + height,
|
|
2911
|
+
width: area.width,
|
|
2912
|
+
height: area.height - height
|
|
2913
|
+
};
|
|
2914
|
+
}
|
|
2915
|
+
function grow(rect, by) {
|
|
2916
|
+
return {
|
|
2917
|
+
x: rect.x - by,
|
|
2918
|
+
y: rect.y - by,
|
|
2919
|
+
width: Math.max(rect.width + by * 2, 0),
|
|
2920
|
+
height: Math.max(rect.height + by * 2, 0)
|
|
2921
|
+
};
|
|
2922
|
+
}
|
|
2923
|
+
const TOOLTIP_OFFSET = 12;
|
|
2924
|
+
var UiTreemapChartComponent = class UiTreemapChartComponent extends UiChartBase {
|
|
2925
|
+
groups = input.required(...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
|
|
2926
|
+
height = input(360, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
2927
|
+
shades = input(true, {
|
|
2928
|
+
...ngDevMode ? { debugName: "shades" } : /* istanbul ignore next */ {},
|
|
2929
|
+
transform: booleanAttribute
|
|
2930
|
+
});
|
|
2931
|
+
selectable = input(false, {
|
|
2932
|
+
...ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {},
|
|
2933
|
+
transform: booleanAttribute
|
|
2934
|
+
});
|
|
2935
|
+
valueLabel = input("Value", ...ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []);
|
|
2936
|
+
itemSelect = output();
|
|
2937
|
+
canvas = viewChild("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
|
|
2938
|
+
size = signal({
|
|
2939
|
+
width: 0,
|
|
2940
|
+
height: 0
|
|
2941
|
+
}, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
2942
|
+
pointed = signal(null, ...ngDevMode ? [{ debugName: "pointed" }] : /* istanbul ignore next */ []);
|
|
2943
|
+
settled = signal(false, ...ngDevMode ? [{ debugName: "settled" }] : /* istanbul ignore next */ []);
|
|
2944
|
+
percentFormatter = new Intl.NumberFormat(this.uiFormat.locale, {
|
|
2945
|
+
style: "percent",
|
|
2946
|
+
maximumFractionDigits: 1
|
|
2947
|
+
});
|
|
2948
|
+
fill = computed(() => this.height() === "fill", ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
|
|
2949
|
+
fixedHeight = computed(() => {
|
|
2950
|
+
const height = this.height();
|
|
2951
|
+
return height === "fill" ? null : height;
|
|
2952
|
+
}, ...ngDevMode ? [{ debugName: "fixedHeight" }] : /* istanbul ignore next */ []);
|
|
2953
|
+
colours = computed(() => treemapGroupColours(this.groups(), this.dark()), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
|
|
2954
|
+
drawnGroups = computed(() => drawnTreemapGroups(this.groups(), this.colours(), this.hiddenSeries(), this.shades(), this.ink()), ...ngDevMode ? [{ debugName: "drawnGroups" }] : /* istanbul ignore next */ []);
|
|
2955
|
+
placedGroups = computed(() => {
|
|
2956
|
+
const { width, height } = this.size();
|
|
2957
|
+
return placeTreemapGroups(this.drawnGroups(), {
|
|
2958
|
+
x: 0,
|
|
2959
|
+
y: 0,
|
|
2960
|
+
width,
|
|
2961
|
+
height
|
|
2962
|
+
});
|
|
2963
|
+
}, ...ngDevMode ? [{ debugName: "placedGroups" }] : /* istanbul ignore next */ []);
|
|
2964
|
+
total = computed(() => this.drawnGroups().reduce((sum, group) => sum + group.total, 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
|
|
2965
|
+
tableRows = computed(() => treemapTableRows(this.groups()), ...ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []);
|
|
2966
|
+
categories = computed(() => this.tableRows().categories, ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
|
|
2967
|
+
series = computed(() => [{
|
|
2968
|
+
name: this.valueLabel(),
|
|
2969
|
+
data: this.tableRows().values
|
|
2970
|
+
}], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
2971
|
+
isEmpty = computed(() => this.categories().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
2972
|
+
legendItems = computed(() => this.groups().map((group, index) => ({
|
|
2973
|
+
group,
|
|
2974
|
+
colour: this.colours()[index]
|
|
2975
|
+
})).filter(({ group }) => group.items.some((item) => item.value > 0)).map(({ group, colour }) => ({
|
|
2976
|
+
name: group.name,
|
|
2977
|
+
colour
|
|
2978
|
+
})), ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
|
|
2979
|
+
legendNote = computed(() => "", ...ngDevMode ? [{ debugName: "legendNote" }] : /* istanbul ignore next */ []);
|
|
2980
|
+
emphasised = computed(() => {
|
|
2981
|
+
const emphasis = this.emphasis();
|
|
2982
|
+
return this.drawnGroups().some((group) => group.name === emphasis) ? emphasis : null;
|
|
2983
|
+
}, ...ngDevMode ? [{ debugName: "emphasised" }] : /* istanbul ignore next */ []);
|
|
2984
|
+
tooltipFooter = computed(() => {
|
|
2985
|
+
const pointed = this.pointed();
|
|
2986
|
+
if (!pointed) return "";
|
|
2987
|
+
const { group, block } = pointed;
|
|
2988
|
+
const shareOfTotal = `${this.percent(block.value / this.total())} of total`;
|
|
2989
|
+
return group.blocks.length > 1 ? `${this.percent(block.value / group.total)} of ${group.name} · ${shareOfTotal}` : shareOfTotal;
|
|
2990
|
+
}, ...ngDevMode ? [{ debugName: "tooltipFooter" }] : /* istanbul ignore next */ []);
|
|
2991
|
+
tooltipPosition = computed(() => {
|
|
2992
|
+
const pointed = this.pointed();
|
|
2993
|
+
const { width } = this.size();
|
|
2994
|
+
if (!pointed) return null;
|
|
2995
|
+
const flipped = pointed.x > width / 2;
|
|
2996
|
+
return {
|
|
2997
|
+
left: flipped ? null : pointed.x + TOOLTIP_OFFSET,
|
|
2998
|
+
right: flipped ? width - pointed.x + TOOLTIP_OFFSET : null,
|
|
2999
|
+
top: pointed.y + TOOLTIP_OFFSET
|
|
3000
|
+
};
|
|
3001
|
+
}, ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
|
|
3002
|
+
constructor() {
|
|
3003
|
+
super();
|
|
3004
|
+
effect((onCleanup) => {
|
|
3005
|
+
const canvas = this.canvas()?.nativeElement;
|
|
3006
|
+
if (!canvas) return;
|
|
3007
|
+
const observer = new ResizeObserver(([entry]) => {
|
|
3008
|
+
const { width, height } = entry.contentRect;
|
|
3009
|
+
this.size.set({
|
|
3010
|
+
width,
|
|
3011
|
+
height
|
|
3012
|
+
});
|
|
3013
|
+
if (!this.settled()) requestAnimationFrame(() => this.settled.set(true));
|
|
3014
|
+
});
|
|
3015
|
+
observer.observe(canvas);
|
|
3016
|
+
onCleanup(() => observer.disconnect());
|
|
3017
|
+
});
|
|
3018
|
+
}
|
|
3019
|
+
isFaded(group) {
|
|
3020
|
+
const emphasised = this.emphasised();
|
|
3021
|
+
return !!emphasised && group.name !== emphasised;
|
|
3022
|
+
}
|
|
3023
|
+
point(event, group, block) {
|
|
3024
|
+
const canvas = this.canvas()?.nativeElement;
|
|
3025
|
+
if (!canvas || event.pointerType === "touch") return;
|
|
3026
|
+
const bounds = canvas.getBoundingClientRect();
|
|
3027
|
+
this.pointed.set({
|
|
3028
|
+
group,
|
|
3029
|
+
block,
|
|
3030
|
+
x: event.clientX - bounds.left,
|
|
3031
|
+
y: event.clientY - bounds.top
|
|
3032
|
+
});
|
|
3033
|
+
}
|
|
3034
|
+
focus(group, block) {
|
|
3035
|
+
this.pointed.set({
|
|
3036
|
+
group,
|
|
3037
|
+
block,
|
|
3038
|
+
x: group.rect.x + block.rect.x + block.rect.width / 2,
|
|
3039
|
+
y: group.rect.y + block.rect.y + block.rect.height / 2
|
|
3040
|
+
});
|
|
3041
|
+
}
|
|
3042
|
+
select(block) {
|
|
3043
|
+
this.itemSelect.emit({
|
|
3044
|
+
group: block.group,
|
|
3045
|
+
item: block.item
|
|
3046
|
+
});
|
|
3047
|
+
}
|
|
3048
|
+
accessibleName(block) {
|
|
3049
|
+
const name = `${block.item}, ${block.group}`;
|
|
3050
|
+
return this.masked() ? name : `${name}, ${this.formatValue(block.value)}`;
|
|
3051
|
+
}
|
|
3052
|
+
percent(share) {
|
|
3053
|
+
return this.percentFormatter.format(share);
|
|
3054
|
+
}
|
|
3055
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
3056
|
+
minVersion: "12.0.0",
|
|
3057
|
+
version: "22.2.1",
|
|
3058
|
+
ngImport: i0,
|
|
3059
|
+
type: UiTreemapChartComponent,
|
|
3060
|
+
deps: [],
|
|
3061
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
3062
|
+
});
|
|
3063
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
3064
|
+
minVersion: "17.0.0",
|
|
3065
|
+
version: "22.2.1",
|
|
3066
|
+
type: UiTreemapChartComponent,
|
|
3067
|
+
isStandalone: true,
|
|
3068
|
+
selector: "ui-treemap-chart",
|
|
3069
|
+
inputs: {
|
|
3070
|
+
groups: {
|
|
3071
|
+
classPropertyName: "groups",
|
|
3072
|
+
publicName: "groups",
|
|
3073
|
+
isSignal: true,
|
|
3074
|
+
isRequired: true,
|
|
3075
|
+
transformFunction: null
|
|
3076
|
+
},
|
|
3077
|
+
height: {
|
|
3078
|
+
classPropertyName: "height",
|
|
3079
|
+
publicName: "height",
|
|
3080
|
+
isSignal: true,
|
|
3081
|
+
isRequired: false,
|
|
3082
|
+
transformFunction: null
|
|
3083
|
+
},
|
|
3084
|
+
shades: {
|
|
3085
|
+
classPropertyName: "shades",
|
|
3086
|
+
publicName: "shades",
|
|
3087
|
+
isSignal: true,
|
|
3088
|
+
isRequired: false,
|
|
3089
|
+
transformFunction: null
|
|
3090
|
+
},
|
|
3091
|
+
selectable: {
|
|
3092
|
+
classPropertyName: "selectable",
|
|
3093
|
+
publicName: "selectable",
|
|
3094
|
+
isSignal: true,
|
|
3095
|
+
isRequired: false,
|
|
3096
|
+
transformFunction: null
|
|
3097
|
+
},
|
|
3098
|
+
valueLabel: {
|
|
3099
|
+
classPropertyName: "valueLabel",
|
|
3100
|
+
publicName: "valueLabel",
|
|
3101
|
+
isSignal: true,
|
|
3102
|
+
isRequired: false,
|
|
3103
|
+
transformFunction: null
|
|
3104
|
+
}
|
|
3105
|
+
},
|
|
3106
|
+
outputs: { itemSelect: "itemSelect" },
|
|
3107
|
+
host: { classAttribute: "block w-full min-w-0" },
|
|
3108
|
+
viewQueries: [{
|
|
3109
|
+
propertyName: "canvas",
|
|
3110
|
+
first: true,
|
|
3111
|
+
predicate: ["canvas"],
|
|
3112
|
+
descendants: true,
|
|
3113
|
+
isSignal: true
|
|
3114
|
+
}],
|
|
3115
|
+
usesInheritance: true,
|
|
3116
|
+
ngImport: i0,
|
|
3117
|
+
template: "<ui-chart-frame\n [options]=\"null\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [(emphasis)]=\"emphasis\"\n [showLegend]=\"legend() === 'auto'\"\n [valueFormatter]=\"displayFormatter()\"\n [masked]=\"masked()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n>\n <div\n #canvas\n class=\"ui-treemap\"\n [class.ui-treemap--settled]=\"settled()\"\n [class.grow]=\"fill()\"\n [class.min-h-0]=\"fill()\"\n [style.height.px]=\"fixedHeight()\"\n [attr.role]=\"selectable() ? 'group' : 'img'\"\n [attr.aria-label]=\"ariaLabel()\"\n (pointerleave)=\"pointed.set(null)\"\n >\n @if (concealed()) {\n <!-- the proportions alone would give the amounts away, so one grey block stands in for them all -->\n <div class=\"ui-treemap-concealed\" [style.background-color]=\"ink().grid\"></div>\n } @else {\n @for (group of placedGroups(); track group.name) {\n <div\n class=\"ui-treemap-group\"\n [class.ui-treemap-group--faded]=\"isFaded(group)\"\n [style.left.px]=\"group.rect.x\"\n [style.top.px]=\"group.rect.y\"\n [style.width.px]=\"group.rect.width\"\n [style.height.px]=\"group.rect.height\"\n >\n @if (group.hasHeader) {\n <div class=\"ui-treemap-header ui-text-caption\" aria-hidden=\"true\">\n <span class=\"ui-treemap-header-name\">{{ group.name }}</span>\n <span class=\"ui-treemap-header-total\">{{ formatValue(group.total) }}</span>\n </div>\n }\n\n @for (block of group.placedBlocks; track block.item) {\n @if (selectable()) {\n <button\n type=\"button\"\n class=\"ui-treemap-block ui-treemap-block--selectable ui-text-caption\"\n [style.left.px]=\"block.rect.x\"\n [style.top.px]=\"block.rect.y\"\n [style.width.px]=\"block.rect.width\"\n [style.height.px]=\"block.rect.height\"\n [style.background-color]=\"block.fill\"\n [style.color]=\"block.labelInk\"\n [attr.aria-label]=\"accessibleName(block)\"\n (pointermove)=\"point($event, group, block)\"\n (focus)=\"focus(group, block)\"\n (blur)=\"pointed.set(null)\"\n (click)=\"select(block)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"label\"\n [ngTemplateOutletContext]=\"{ $implicit: block }\"\n />\n </button>\n } @else {\n <div\n class=\"ui-treemap-block ui-text-caption\"\n aria-hidden=\"true\"\n [style.left.px]=\"block.rect.x\"\n [style.top.px]=\"block.rect.y\"\n [style.width.px]=\"block.rect.width\"\n [style.height.px]=\"block.rect.height\"\n [style.background-color]=\"block.fill\"\n [style.color]=\"block.labelInk\"\n (pointermove)=\"point($event, group, block)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"label\"\n [ngTemplateOutletContext]=\"{ $implicit: block }\"\n />\n </div>\n }\n }\n </div>\n }\n\n @if (pointed(); as pointed) {\n <div\n class=\"ui-chart-tooltip-panel ui-treemap-tooltip\"\n aria-hidden=\"true\"\n [style.left.px]=\"tooltipPosition()?.left\"\n [style.right.px]=\"tooltipPosition()?.right\"\n [style.top.px]=\"tooltipPosition()?.top\"\n >\n <div class=\"ui-chart-tooltip\">\n <div class=\"ui-chart-tooltip-title ui-text-caption\">{{ pointed.group.name }}</div>\n <div class=\"ui-chart-tooltip-row ui-text-body-alt\">\n <span\n class=\"ui-chart-tooltip-dot\"\n [style.--ui-chart-tooltip-colour]=\"pointed.block.fill\"\n ></span>\n <span class=\"ui-chart-tooltip-name\">{{ pointed.block.item }}</span>\n @if (!masked()) {\n <span class=\"ui-chart-tooltip-value\">{{ formatValue(pointed.block.value) }}</span>\n }\n </div>\n <div class=\"ui-chart-tooltip-footer ui-text-caption\">{{ tooltipFooter() }}</div>\n </div>\n </div>\n }\n }\n </div>\n</ui-chart-frame>\n\n<ng-template #label let-block>\n @if (block.label !== 'none') {\n <span class=\"ui-treemap-block-name\">{{ block.item }}</span>\n }\n @if (block.label === 'full') {\n <span class=\"ui-treemap-block-value\">{{ formatValue(block.value) }}</span>\n }\n</ng-template>\n",
|
|
3118
|
+
styles: ["@layer properties;.ui-treemap{position:relative;display:block;width:100%}.ui-treemap-concealed{position:absolute;inset:0;border-radius:var(--radius-md, .375rem)}.ui-treemap-group,.ui-treemap-block{position:absolute}@media(prefers-reduced-motion:no-preference){.ui-treemap--settled .ui-treemap-group,.ui-treemap--settled .ui-treemap-block{transition-property:left,top,width,height,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1))}}.ui-treemap-group--faded{opacity:.15}.ui-treemap-header{display:flex;height:calc(var(--spacing, .25rem) * 6);align-items:baseline;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * .5)}.ui-treemap-header-name{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-treemap-header-total{margin-inline-start:auto;flex-shrink:0;color:var(--muted-foreground-1);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-treemap-header-name,.ui-treemap-header-total{--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.ui-treemap-block{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:start}.ui-treemap-block--selectable{cursor:pointer}.ui-treemap-block--selectable:focus{--tw-outline-style: none;outline-style:none}.ui-treemap-block--selectable:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-treemap-block--selectable:focus-visible{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui-treemap-block:hover{filter:brightness(1.06)}.ui-treemap-block-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ui-treemap-block-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:85%}.ui-treemap-tooltip{pointer-events:none;position:absolute;z-index:10}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-ease: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-leading: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
3119
|
+
dependencies: [{
|
|
3120
|
+
kind: "directive",
|
|
3121
|
+
type: NgTemplateOutlet,
|
|
3122
|
+
selector: "[ngTemplateOutlet]",
|
|
3123
|
+
inputs: [
|
|
3124
|
+
"ngTemplateOutletContext",
|
|
3125
|
+
"ngTemplateOutlet",
|
|
3126
|
+
"ngTemplateOutletInjector"
|
|
3127
|
+
]
|
|
3128
|
+
}, {
|
|
3129
|
+
kind: "component",
|
|
3130
|
+
type: UiChartFrameComponent,
|
|
3131
|
+
selector: "ui-chart-frame",
|
|
3132
|
+
inputs: [
|
|
3133
|
+
"options",
|
|
3134
|
+
"ariaLabel",
|
|
3135
|
+
"categories",
|
|
3136
|
+
"series",
|
|
3137
|
+
"legendItems",
|
|
3138
|
+
"legendNote",
|
|
3139
|
+
"hiddenSeries",
|
|
3140
|
+
"valueFormatter",
|
|
3141
|
+
"categoryLabel",
|
|
3142
|
+
"height",
|
|
3143
|
+
"emptyText",
|
|
3144
|
+
"loading",
|
|
3145
|
+
"empty",
|
|
3146
|
+
"showTable",
|
|
3147
|
+
"masked",
|
|
3148
|
+
"showLegend",
|
|
3149
|
+
"emphasis"
|
|
3150
|
+
],
|
|
3151
|
+
outputs: ["hiddenSeriesChange", "emphasisChange"]
|
|
3152
|
+
}],
|
|
3153
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
3154
|
+
});
|
|
3155
|
+
};
|
|
3156
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
3157
|
+
minVersion: "12.0.0",
|
|
3158
|
+
version: "22.2.1",
|
|
3159
|
+
ngImport: i0,
|
|
3160
|
+
type: UiTreemapChartComponent,
|
|
3161
|
+
decorators: [{
|
|
3162
|
+
type: Component,
|
|
3163
|
+
args: [{
|
|
3164
|
+
selector: "ui-treemap-chart",
|
|
3165
|
+
encapsulation: ViewEncapsulation.None,
|
|
3166
|
+
imports: [NgTemplateOutlet, UiChartFrameComponent],
|
|
3167
|
+
host: { class: "block w-full min-w-0" },
|
|
3168
|
+
template: "<ui-chart-frame\n [options]=\"null\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [(emphasis)]=\"emphasis\"\n [showLegend]=\"legend() === 'auto'\"\n [valueFormatter]=\"displayFormatter()\"\n [masked]=\"masked()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n>\n <div\n #canvas\n class=\"ui-treemap\"\n [class.ui-treemap--settled]=\"settled()\"\n [class.grow]=\"fill()\"\n [class.min-h-0]=\"fill()\"\n [style.height.px]=\"fixedHeight()\"\n [attr.role]=\"selectable() ? 'group' : 'img'\"\n [attr.aria-label]=\"ariaLabel()\"\n (pointerleave)=\"pointed.set(null)\"\n >\n @if (concealed()) {\n <!-- the proportions alone would give the amounts away, so one grey block stands in for them all -->\n <div class=\"ui-treemap-concealed\" [style.background-color]=\"ink().grid\"></div>\n } @else {\n @for (group of placedGroups(); track group.name) {\n <div\n class=\"ui-treemap-group\"\n [class.ui-treemap-group--faded]=\"isFaded(group)\"\n [style.left.px]=\"group.rect.x\"\n [style.top.px]=\"group.rect.y\"\n [style.width.px]=\"group.rect.width\"\n [style.height.px]=\"group.rect.height\"\n >\n @if (group.hasHeader) {\n <div class=\"ui-treemap-header ui-text-caption\" aria-hidden=\"true\">\n <span class=\"ui-treemap-header-name\">{{ group.name }}</span>\n <span class=\"ui-treemap-header-total\">{{ formatValue(group.total) }}</span>\n </div>\n }\n\n @for (block of group.placedBlocks; track block.item) {\n @if (selectable()) {\n <button\n type=\"button\"\n class=\"ui-treemap-block ui-treemap-block--selectable ui-text-caption\"\n [style.left.px]=\"block.rect.x\"\n [style.top.px]=\"block.rect.y\"\n [style.width.px]=\"block.rect.width\"\n [style.height.px]=\"block.rect.height\"\n [style.background-color]=\"block.fill\"\n [style.color]=\"block.labelInk\"\n [attr.aria-label]=\"accessibleName(block)\"\n (pointermove)=\"point($event, group, block)\"\n (focus)=\"focus(group, block)\"\n (blur)=\"pointed.set(null)\"\n (click)=\"select(block)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"label\"\n [ngTemplateOutletContext]=\"{ $implicit: block }\"\n />\n </button>\n } @else {\n <div\n class=\"ui-treemap-block ui-text-caption\"\n aria-hidden=\"true\"\n [style.left.px]=\"block.rect.x\"\n [style.top.px]=\"block.rect.y\"\n [style.width.px]=\"block.rect.width\"\n [style.height.px]=\"block.rect.height\"\n [style.background-color]=\"block.fill\"\n [style.color]=\"block.labelInk\"\n (pointermove)=\"point($event, group, block)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"label\"\n [ngTemplateOutletContext]=\"{ $implicit: block }\"\n />\n </div>\n }\n }\n </div>\n }\n\n @if (pointed(); as pointed) {\n <div\n class=\"ui-chart-tooltip-panel ui-treemap-tooltip\"\n aria-hidden=\"true\"\n [style.left.px]=\"tooltipPosition()?.left\"\n [style.right.px]=\"tooltipPosition()?.right\"\n [style.top.px]=\"tooltipPosition()?.top\"\n >\n <div class=\"ui-chart-tooltip\">\n <div class=\"ui-chart-tooltip-title ui-text-caption\">{{ pointed.group.name }}</div>\n <div class=\"ui-chart-tooltip-row ui-text-body-alt\">\n <span\n class=\"ui-chart-tooltip-dot\"\n [style.--ui-chart-tooltip-colour]=\"pointed.block.fill\"\n ></span>\n <span class=\"ui-chart-tooltip-name\">{{ pointed.block.item }}</span>\n @if (!masked()) {\n <span class=\"ui-chart-tooltip-value\">{{ formatValue(pointed.block.value) }}</span>\n }\n </div>\n <div class=\"ui-chart-tooltip-footer ui-text-caption\">{{ tooltipFooter() }}</div>\n </div>\n </div>\n }\n }\n </div>\n</ui-chart-frame>\n\n<ng-template #label let-block>\n @if (block.label !== 'none') {\n <span class=\"ui-treemap-block-name\">{{ block.item }}</span>\n }\n @if (block.label === 'full') {\n <span class=\"ui-treemap-block-value\">{{ formatValue(block.value) }}</span>\n }\n</ng-template>\n",
|
|
3169
|
+
styles: ["@layer properties;.ui-treemap{position:relative;display:block;width:100%}.ui-treemap-concealed{position:absolute;inset:0;border-radius:var(--radius-md, .375rem)}.ui-treemap-group,.ui-treemap-block{position:absolute}@media(prefers-reduced-motion:no-preference){.ui-treemap--settled .ui-treemap-group,.ui-treemap--settled .ui-treemap-block{transition-property:left,top,width,height,opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1))}}.ui-treemap-group--faded{opacity:.15}.ui-treemap-header{display:flex;height:calc(var(--spacing, .25rem) * 6);align-items:baseline;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * .5)}.ui-treemap-header-name{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-treemap-header-total{margin-inline-start:auto;flex-shrink:0;color:var(--muted-foreground-1);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-treemap-header-name,.ui-treemap-header-total{--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.ui-treemap-block{display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:start}.ui-treemap-block--selectable{cursor:pointer}.ui-treemap-block--selectable:focus{--tw-outline-style: none;outline-style:none}.ui-treemap-block--selectable:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-treemap-block--selectable:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-treemap-block--selectable:focus-visible{--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ui-treemap-block:hover{filter:brightness(1.06)}.ui-treemap-block-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ui-treemap-block-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:85%}.ui-treemap-tooltip{pointer-events:none;position:absolute;z-index:10}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-ease: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-leading: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n", "@layer properties;.ui-chart .apexcharts-tooltip.apexcharts-theme-light,.ui-chart-tooltip-panel{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3170
|
+
}]
|
|
3171
|
+
}],
|
|
3172
|
+
ctorParameters: () => [],
|
|
3173
|
+
propDecorators: {
|
|
3174
|
+
groups: [{
|
|
3175
|
+
type: i0.Input,
|
|
3176
|
+
args: [{
|
|
3177
|
+
isSignal: true,
|
|
3178
|
+
alias: "groups",
|
|
3179
|
+
required: true
|
|
3180
|
+
}]
|
|
3181
|
+
}],
|
|
3182
|
+
height: [{
|
|
3183
|
+
type: i0.Input,
|
|
3184
|
+
args: [{
|
|
3185
|
+
isSignal: true,
|
|
3186
|
+
alias: "height",
|
|
3187
|
+
required: false
|
|
3188
|
+
}]
|
|
3189
|
+
}],
|
|
3190
|
+
shades: [{
|
|
3191
|
+
type: i0.Input,
|
|
3192
|
+
args: [{
|
|
3193
|
+
isSignal: true,
|
|
3194
|
+
alias: "shades",
|
|
3195
|
+
required: false
|
|
3196
|
+
}]
|
|
3197
|
+
}],
|
|
3198
|
+
selectable: [{
|
|
3199
|
+
type: i0.Input,
|
|
3200
|
+
args: [{
|
|
3201
|
+
isSignal: true,
|
|
3202
|
+
alias: "selectable",
|
|
3203
|
+
required: false
|
|
3204
|
+
}]
|
|
3205
|
+
}],
|
|
3206
|
+
valueLabel: [{
|
|
3207
|
+
type: i0.Input,
|
|
3208
|
+
args: [{
|
|
3209
|
+
isSignal: true,
|
|
3210
|
+
alias: "valueLabel",
|
|
3211
|
+
required: false
|
|
3212
|
+
}]
|
|
3213
|
+
}],
|
|
3214
|
+
itemSelect: [{
|
|
3215
|
+
type: i0.Output,
|
|
3216
|
+
args: ["itemSelect"]
|
|
3217
|
+
}],
|
|
3218
|
+
canvas: [{
|
|
3219
|
+
type: i0.ViewChild,
|
|
3220
|
+
args: ["canvas", { isSignal: true }]
|
|
3221
|
+
}]
|
|
3222
|
+
}
|
|
3223
|
+
});
|
|
2692
3224
|
var UiCheckboxComponent = class UiCheckboxComponent {
|
|
2693
3225
|
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
2694
3226
|
id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
@@ -14796,6 +15328,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
14796
15328
|
}]
|
|
14797
15329
|
}
|
|
14798
15330
|
});
|
|
14799
|
-
export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
|
|
15331
|
+
export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiTreemapChartComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartLabelInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, mixChartColours, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
|
|
14800
15332
|
|
|
14801
15333
|
//# sourceMappingURL=area8975-ui.mjs.map
|