@area8975/ui 0.2.2-dev.43 → 0.2.2-dev.47
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/area8975-ui.mjs
CHANGED
|
@@ -1036,7 +1036,7 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
1036
1036
|
},
|
|
1037
1037
|
ngImport: i0,
|
|
1038
1038
|
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of shownItems(); track item.name) {\n <li\n (mouseenter)=\"hover(item.name)\"\n (mouseleave)=\"hover(null)\"\n (focusin)=\"focus(item.name, $event)\"\n (focusout)=\"focus(null)\"\n >\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n [attr.aria-pressed]=\"!isHidden(item)\"\n [attr.aria-disabled]=\"isLocked(item) || null\"\n [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n (click)=\"toggle(item)\"\n >\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </button>\n } @else {\n <span class=\"ui-chart-legend-item ui-text-body-alt\">\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </span>\n }\n </li>\n }\n</ul>\n\n@if (shownNote()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
|
|
1039
|
-
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:
|
|
1039
|
+
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button: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-chart-legend-item--button: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-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{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;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-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-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
1040
1040
|
});
|
|
1041
1041
|
};
|
|
1042
1042
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -1049,7 +1049,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1049
1049
|
args: [{
|
|
1050
1050
|
selector: "ui-chart-legend",
|
|
1051
1051
|
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of shownItems(); track item.name) {\n <li\n (mouseenter)=\"hover(item.name)\"\n (mouseleave)=\"hover(null)\"\n (focusin)=\"focus(item.name, $event)\"\n (focusout)=\"focus(null)\"\n >\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n [attr.aria-pressed]=\"!isHidden(item)\"\n [attr.aria-disabled]=\"isLocked(item) || null\"\n [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n (click)=\"toggle(item)\"\n >\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </button>\n } @else {\n <span class=\"ui-chart-legend-item ui-text-body-alt\">\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </span>\n }\n </li>\n }\n</ul>\n\n@if (shownNote()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
|
|
1052
|
-
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:
|
|
1052
|
+
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button: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-chart-legend-item--button: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-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{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;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-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-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
1053
1053
|
}]
|
|
1054
1054
|
}],
|
|
1055
1055
|
ctorParameters: () => [],
|
|
@@ -2548,6 +2548,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
2548
2548
|
maximumFractionDigits: 1
|
|
2549
2549
|
});
|
|
2550
2550
|
totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
|
|
2551
|
+
sliceColours = input([], ...ngDevMode ? [{ debugName: "sliceColours" }] : /* istanbul ignore next */ []);
|
|
2551
2552
|
values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
|
|
2552
2553
|
isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
2553
2554
|
isMuted = computed(() => {
|
|
@@ -2557,10 +2558,18 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
2557
2558
|
styles = computed(() => {
|
|
2558
2559
|
const highlight = this.highlight();
|
|
2559
2560
|
const muted = this.isMuted();
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2561
|
+
const given = this.sliceColours();
|
|
2562
|
+
return this.categories().map((name, index) => {
|
|
2563
|
+
if (muted[index]) return {
|
|
2564
|
+
colour: this.ink().context,
|
|
2565
|
+
dashed: false
|
|
2566
|
+
};
|
|
2567
|
+
const style = chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false, this.dark());
|
|
2568
|
+
return {
|
|
2569
|
+
...style,
|
|
2570
|
+
colour: given[index] ?? style.colour
|
|
2571
|
+
};
|
|
2572
|
+
});
|
|
2564
2573
|
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
2565
2574
|
legendItems = computed(() => {
|
|
2566
2575
|
const highlight = this.highlight();
|
|
@@ -2682,6 +2691,13 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
2682
2691
|
isSignal: true,
|
|
2683
2692
|
isRequired: false,
|
|
2684
2693
|
transformFunction: null
|
|
2694
|
+
},
|
|
2695
|
+
sliceColours: {
|
|
2696
|
+
classPropertyName: "sliceColours",
|
|
2697
|
+
publicName: "sliceColours",
|
|
2698
|
+
isSignal: true,
|
|
2699
|
+
isRequired: false,
|
|
2700
|
+
transformFunction: null
|
|
2685
2701
|
}
|
|
2686
2702
|
},
|
|
2687
2703
|
host: { classAttribute: "block w-full min-w-0" },
|
|
@@ -2745,6 +2761,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2745
2761
|
alias: "totalLabel",
|
|
2746
2762
|
required: false
|
|
2747
2763
|
}]
|
|
2764
|
+
}],
|
|
2765
|
+
sliceColours: [{
|
|
2766
|
+
type: i0.Input,
|
|
2767
|
+
args: [{
|
|
2768
|
+
isSignal: true,
|
|
2769
|
+
alias: "sliceColours",
|
|
2770
|
+
required: false
|
|
2771
|
+
}]
|
|
2748
2772
|
}]
|
|
2749
2773
|
}
|
|
2750
2774
|
});
|