@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/fesm2022/area8975-ui-card-header.mjs

@@ -0,0 +1,96 @@
+import * as i0 from "@angular/core";
+import { Component, input } from "@angular/core";
+var UiCardHeaderComponent = class UiCardHeaderComponent {
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	subtitle = input("", ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	headingLevel = input(2, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiCardHeaderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiCardHeaderComponent,
+		isStandalone: true,
+		selector: "ui-card-header",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block" },
+		ngImport: i0,
+		template: "<header class=\"flex flex-wrap justify-between items-start gap-x-4 gap-y-3 mb-4\">\n    <div class=\"min-w-0\">\n        @switch (headingLevel()) {\n            @case (3) {\n                <h3 class=\"text-foreground ui-text-h4\">{{ heading() }}</h3>\n            }\n            @case (4) {\n                <h4 class=\"text-foreground ui-text-h4\">{{ heading() }}</h4>\n            }\n            @default {\n                <h2 class=\"text-foreground ui-text-h4\">{{ heading() }}</h2>\n            }\n        }\n\n        @if (subtitle()) {\n            <p class=\"mt-1 text-muted-foreground-1 ui-text-body-alt\">{{ subtitle() }}</p>\n        }\n    </div>\n\n    <div class=\"flex flex-wrap empty:hidden items-center gap-2\"><ng-content /></div>\n</header>\n"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiCardHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-card-header",
+			host: { class: "block" },
+			template: "<header class=\"flex flex-wrap justify-between items-start gap-x-4 gap-y-3 mb-4\">\n    <div class=\"min-w-0\">\n        @switch (headingLevel()) {\n            @case (3) {\n                <h3 class=\"text-foreground ui-text-h4\">{{ heading() }}</h3>\n            }\n            @case (4) {\n                <h4 class=\"text-foreground ui-text-h4\">{{ heading() }}</h4>\n            }\n            @default {\n                <h2 class=\"text-foreground ui-text-h4\">{{ heading() }}</h2>\n            }\n        }\n\n        @if (subtitle()) {\n            <p class=\"mt-1 text-muted-foreground-1 ui-text-body-alt\">{{ subtitle() }}</p>\n        }\n    </div>\n\n    <div class=\"flex flex-wrap empty:hidden items-center gap-2\"><ng-content /></div>\n</header>\n"
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}]
+	}
+});
+const CardHeadingLevels = [
+	2,
+	3,
+	4
+];
+export { CardHeadingLevels, UiCardHeaderComponent };
+
+//# sourceMappingURL=area8975-ui-card-header.mjs.map

package/fesm2022/area8975-ui-card-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-card-header.mjs","names":[],"sources":["../../../projects/ui/card-header/card-header.component.ts","../../../projects/ui/card-header/card-header.component.html","../../../projects/ui/card-header/card-header.types.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\nimport type { CardHeadingLevel } from './card-header.types';\n\n\n@Component({\n    selector: 'ui-card-header',\n    templateUrl: './card-header.component.html',\n    host: { class: 'block' }\n})\nexport class UiCardHeaderComponent {\n    // not `title`, that would also show the native tooltip\n    readonly heading = input.required<string>();\n    readonly subtitle = input<string>('');\n\n    /** Pick the level that fits the page's outline, it doesn't change the look. */\n    readonly headingLevel = input<CardHeadingLevel>(2);\n}\n","<header class=\"flex flex-wrap justify-between items-start gap-x-4 gap-y-3 mb-4\">\n    <div class=\"min-w-0\">\n        @switch (headingLevel()) {\n            @case (3) {\n                <h3 class=\"text-foreground ui-text-h4\">{{ heading() }}</h3>\n            }\n            @case (4) {\n                <h4 class=\"text-foreground ui-text-h4\">{{ heading() }}</h4>\n            }\n            @default {\n                <h2 class=\"text-foreground ui-text-h4\">{{ heading() }}</h2>\n            }\n        }\n\n        @if (subtitle()) {\n            <p class=\"mt-1 text-muted-foreground-1 ui-text-body-alt\">{{ subtitle() }}</p>\n        }\n    </div>\n\n    <div class=\"flex flex-wrap empty:hidden items-center gap-2\"><ng-content /></div>\n</header>\n","export const CardHeadingLevels = [2, 3, 4] as const;\n\n/** @see {@link CardHeadingLevels} */\nexport type CardHeadingLevel = typeof CardHeadingLevels[number];\n"],"mappings":";;AAUA,IAAa,wBAAb,MAAa,sBAAqB;CAErB,UAAU,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,WAAW,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG5B,eAAe,MAAwB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CANzC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,QAAA;EAAA,UAAA;EAAA,UCVlC;CAqBA,CAAA;;ADXa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EALjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,MAEpB,EAAE,OAAO,QAAO;GAAE,UAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AER5B,MAAa,oBAAoB;CAAC;CAAG;CAAG;AAAC"}

package/fesm2022/area8975-ui-card.mjs

@@ -0,0 +1,73 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const CardRadii = [
+	"none",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const radiusClasses = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl"
+};
+var UiCardComponent = class UiCardComponent {
+	radius = input("md", ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => radiusClasses[this.radius()], ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiCardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiCardComponent,
+		isStandalone: true,
+		selector: "ui-card",
+		inputs: { radius: {
+			classPropertyName: "radius",
+			publicName: "radius",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "generatedClasses()" } },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: ["@layer properties;:host{display:block;border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-card",
+			template: "<ng-content />",
+			host: { "[class]": "generatedClasses()" },
+			styles: ["@layer properties;:host{display:block;border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: { radius: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "radius",
+			required: false
+		}]
+	}] }
+});
+export { CardRadii, UiCardComponent, radiusClasses };
+
+//# sourceMappingURL=area8975-ui-card.mjs.map

package/fesm2022/area8975-ui-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-card.mjs","names":[],"sources":["../../../projects/ui/card/card.types.ts","../../../projects/ui/card/card.component.ts"],"sourcesContent":["/** The radius that a card can hold. Maps directly to tailwindcss' rounded classes. */\nexport const CardRadii = ['none', 'sm', 'md', 'lg', 'xl'] as const;\n\n/** @see {@link CardRadii} */\nexport type CardRadius = typeof CardRadii[number];\n\n// Written out in full so tailwind picks them up\nexport const radiusClasses: Record<CardRadius, string> = {\n    none: 'rounded-none',\n    sm: 'rounded-sm',\n    md: 'rounded-md',\n    lg: 'rounded-lg',\n    xl: 'rounded-xl'\n};\n","import { Component, computed, input } from '@angular/core';\n\nimport { CardRadius, radiusClasses } from './card.types';\n\n\n@Component({\n    selector: 'ui-card',\n    template: '<ng-content />',\n    styleUrl: './card.component.css',\n    host: { '[class]': 'generatedClasses()' }\n})\nexport class UiCardComponent {\n    readonly radius = input<CardRadius>('md');\n\n    readonly generatedClasses = computed<string>(() =>\n        radiusClasses[this.radius()]\n    );\n}\n"],"mappings":";;AACA,MAAa,YAAY;CAAC;CAAQ;CAAM;CAAM;CAAM;AAAI;AAMxD,MAAa,gBAA4C;CACrD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACP;ACFD,IAAa,kBAAb,MAAa,gBAAe;CACf,SAAS,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,mBAAmB,eACxB,cAAc,KAAK,OAAM,IAC5B,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CALQ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,QAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,qBAAA,EAAA;EAAA,UAAA;EAAA,UAJd;EAAgB,UAAA;EAAA,QAAA,CAAA,gqEAAA;CAAA,CAAA;;AAIjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAN3B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAS,UACT;GAAgB,MAEpB,EAAE,WAAW,qBAAoB;GAAE,QAAA,CAAA,gqEAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-chart-palette.mjs

@@ -0,0 +1,225 @@
+const CHART_PALETTE = [
+	"#2a78d6",
+	"#eb6834",
+	"#1baf7a",
+	"#eda100",
+	"#e87ba4",
+	"#008300",
+	"#4a3aa7",
+	"#e34948"
+];
+const CHART_PALETTE_DARK = [
+	"#2a78d6",
+	"#eb6834",
+	"#1baf7a",
+	"#eda100",
+	"#e87ba4",
+	"#2e9e2e",
+	"#8a7cf0",
+	"#e34948"
+];
+const CHART_COLOURS = [
+	{
+		key: "blue",
+		label: "Blue",
+		light: "#2a78d6",
+		dark: "#2a78d6"
+	},
+	{
+		key: "orange",
+		label: "Orange",
+		light: "#eb6834",
+		dark: "#eb6834"
+	},
+	{
+		key: "teal",
+		label: "Teal",
+		light: "#1baf7a",
+		dark: "#1baf7a"
+	},
+	{
+		key: "amber",
+		label: "Amber",
+		light: "#eda100",
+		dark: "#eda100"
+	},
+	{
+		key: "pink",
+		label: "Pink",
+		light: "#e87ba4",
+		dark: "#e87ba4"
+	},
+	{
+		key: "green",
+		label: "Green",
+		light: "#008300",
+		dark: "#2e9e2e"
+	},
+	{
+		key: "violet",
+		label: "Violet",
+		light: "#4a3aa7",
+		dark: "#8a7cf0"
+	},
+	{
+		key: "red",
+		label: "Red",
+		light: "#e34948",
+		dark: "#e34948"
+	},
+	{
+		key: "magenta",
+		label: "Magenta",
+		light: "#7e147e",
+		dark: "#ab46aa"
+	},
+	{
+		key: "dark-yellow",
+		label: "Dark yellow",
+		light: "#a16d03",
+		dark: "#a16d03"
+	},
+	{
+		key: "dark-cyan",
+		label: "Dark cyan",
+		light: "#046971",
+		dark: "#247b83"
+	},
+	{
+		key: "mauve",
+		label: "Mauve",
+		light: "#693c5f",
+		dark: "#916185"
+	},
+	{
+		key: "cyan",
+		label: "Cyan",
+		light: "#309fb3",
+		dark: "#309fb3"
+	},
+	{
+		key: "light-purple",
+		label: "Light purple",
+		light: "#cb65e1",
+		dark: "#cb65e1"
+	},
+	{
+		key: "lilac",
+		label: "Lilac",
+		light: "#ad87b6",
+		dark: "#ad87b6"
+	},
+	{
+		key: "olive",
+		label: "Olive",
+		light: "#989401",
+		dark: "#989401"
+	},
+	{
+		key: "dark-red",
+		label: "Dark red",
+		light: "#842e26",
+		dark: "#ae544a"
+	},
+	{
+		key: "dark-green",
+		label: "Dark green",
+		light: "#406020",
+		dark: "#597b3a"
+	},
+	{
+		key: "tan",
+		label: "Tan",
+		light: "#bd8a66",
+		dark: "#bd8a66"
+	},
+	{
+		key: "purple",
+		label: "Purple",
+		light: "#7845ce",
+		dark: "#8452db"
+	},
+	{
+		key: "deep-pink",
+		label: "Deep pink",
+		light: "#db4594",
+		dark: "#db4594"
+	},
+	{
+		key: "grey-blue",
+		label: "Grey blue",
+		light: "#6f7db0",
+		dark: "#6f7db0"
+	}
+];
+function pickedChartColour(key, dark = false) {
+	const colour = CHART_COLOURS.find((each) => each.key === key);
+	return dark ? colour.dark : colour.light;
+}
+const CHART_MAX_SERIES = CHART_PALETTE.length;
+const CHART_MAX_LINE_SERIES = CHART_PALETTE.length * 2;
+const CHART_INK = {
+	text: "#1e2939",
+	muted: "#6a7282",
+	grid: "#e5e7eb",
+	surface: "#ffffff",
+	context: "#d1d5dc"
+};
+const CHART_INK_DARK = {
+	text: "#e5e5e5",
+	muted: "#a1a1a1",
+	grid: "#404040",
+	surface: "#262626",
+	context: "#525252"
+};
+function chartInk(dark) {
+	return dark ? CHART_INK_DARK : CHART_INK;
+}
+function chartColour(index, dark = false) {
+	return (dark ? CHART_PALETTE_DARK : CHART_PALETTE)[index] ?? chartInk(dark).context;
+}
+function chartSeriesStyle(index, dashes, dark = false) {
+	if (dashes && index >= CHART_PALETTE.length && index < CHART_MAX_LINE_SERIES) return {
+		colour: chartColour(index - CHART_PALETTE.length, dark),
+		dashed: true
+	};
+	return {
+		colour: chartColour(index, dark),
+		dashed: false
+	};
+}
+const HEX_COLOUR = /^#([0-9a-f]{6})$/i;
+function hexChannels(colour) {
+	const digits = HEX_COLOUR.exec(colour)?.[1];
+	return digits ? [
+		0,
+		2,
+		4
+	].map((at) => parseInt(digits.slice(at, at + 2), 16)) : null;
+}
+function mixChartColours(colour, towards, strength) {
+	const from = hexChannels(colour);
+	const to = hexChannels(towards);
+	if (!from || !to) return null;
+	return `#${from.map((channel, index) => Math.round(channel * strength + to[index] * (1 - strength))).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+const DARK_LABEL = CHART_INK.text;
+const LIGHT_LABEL = "#ffffff";
+function chartLabelInk(background) {
+	const channels = hexChannels(background);
+	if (!channels) return DARK_LABEL;
+	const backgroundLuminance = screenLuminance(channels);
+	return lightnessContrast(screenLuminance(hexChannels(LIGHT_LABEL)), backgroundLuminance) > lightnessContrast(screenLuminance(hexChannels(DARK_LABEL)), backgroundLuminance) ? LIGHT_LABEL : DARK_LABEL;
+}
+function screenLuminance(channels) {
+	const [red, green, blue] = channels.map((channel) => (channel / 255) ** 2.4);
+	const luminance = .2126729 * red + .7151522 * green + .072175 * blue;
+	return luminance < .022 ? luminance + (.022 - luminance) ** 1.414 : luminance;
+}
+function lightnessContrast(textLuminance, backgroundLuminance) {
+	const contrast = backgroundLuminance > textLuminance ? (backgroundLuminance ** .56 - textLuminance ** .57) * 1.14 : (backgroundLuminance ** .65 - textLuminance ** .62) * 1.14;
+	return Math.max(Math.abs(contrast) - .027, 0) * 100;
+}
+export { CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, chartColour, chartInk, chartLabelInk, chartSeriesStyle, mixChartColours, pickedChartColour };
+
+//# sourceMappingURL=area8975-ui-chart-palette.mjs.map

package/fesm2022/area8975-ui-chart-palette.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-chart-palette.mjs","names":[],"sources":["../../../projects/ui/chart-palette/chart.palette.ts"],"sourcesContent":["/**\n * Categorical colours for chart series, in a fixed order that was checked for\n * colour blindness (adjacent pairs stay apart for protan, deutan and tritan).\n * Keep the order, a series takes the next slot, never a generated colour.\n */\nexport const CHART_PALETTE = [\n    '#2a78d6', // blue\n    '#eb6834', // orange\n    '#1baf7a', // aqua\n    '#eda100', // yellow\n    '#e87ba4', // magenta\n    '#008300', // green\n    '#4a3aa7', // violet\n    '#e34948' // red\n] as const;\n\n/** Violet and green are lightened to keep 3:1 contrast on a dark card. */\nexport const CHART_PALETTE_DARK = [\n    '#2a78d6', // blue\n    '#eb6834', // orange\n    '#1baf7a', // aqua\n    '#eda100', // yellow\n    '#e87ba4', // magenta\n    '#2e9e2e', // green\n    '#8a7cf0', // violet\n    '#e34948' // red\n] as const;\n\n/** A colour someone picks for a thing, e.g. a category, that every chart then draws it in. */\nexport interface ChartColour {\n    /** Stable, safe to store. Never rename or reuse one. */\n    readonly key: string;\n    /** What to call it in a picker, and for screen readers. */\n    readonly label: string;\n    /** On a light card (`CHART_INK.surface`), at least 3:1. */\n    readonly light: string;\n    /** On a dark card (`CHART_INK_DARK.surface`), at least 3:1. */\n    readonly dark: string;\n}\n\n/**\n * Every colour that can be picked, the automatic palette first. Too many to tell\n * apart by colour alone for everyone, so always show a label alongside.\n */\nexport const CHART_COLOURS = [\n    { key: 'blue', label: 'Blue', light: '#2a78d6', dark: '#2a78d6' },\n    { key: 'orange', label: 'Orange', light: '#eb6834', dark: '#eb6834' },\n    { key: 'teal', label: 'Teal', light: '#1baf7a', dark: '#1baf7a' },\n    { key: 'amber', label: 'Amber', light: '#eda100', dark: '#eda100' },\n    { key: 'pink', label: 'Pink', light: '#e87ba4', dark: '#e87ba4' },\n    { key: 'green', label: 'Green', light: '#008300', dark: '#2e9e2e' },\n    { key: 'violet', label: 'Violet', light: '#4a3aa7', dark: '#8a7cf0' },\n    { key: 'red', label: 'Red', light: '#e34948', dark: '#e34948' },\n    { key: 'magenta', label: 'Magenta', light: '#7e147e', dark: '#ab46aa' },\n    { key: 'dark-yellow', label: 'Dark yellow', light: '#a16d03', dark: '#a16d03' },\n    { key: 'dark-cyan', label: 'Dark cyan', light: '#046971', dark: '#247b83' },\n    { key: 'mauve', label: 'Mauve', light: '#693c5f', dark: '#916185' },\n    { key: 'cyan', label: 'Cyan', light: '#309fb3', dark: '#309fb3' },\n    { key: 'light-purple', label: 'Light purple', light: '#cb65e1', dark: '#cb65e1' },\n    { key: 'lilac', label: 'Lilac', light: '#ad87b6', dark: '#ad87b6' },\n    { key: 'olive', label: 'Olive', light: '#989401', dark: '#989401' },\n    { key: 'dark-red', label: 'Dark red', light: '#842e26', dark: '#ae544a' },\n    { key: 'dark-green', label: 'Dark green', light: '#406020', dark: '#597b3a' },\n    { key: 'tan', label: 'Tan', light: '#bd8a66', dark: '#bd8a66' },\n    { key: 'purple', label: 'Purple', light: '#7845ce', dark: '#8452db' },\n    { key: 'deep-pink', label: 'Deep pink', light: '#db4594', dark: '#db4594' },\n    { key: 'grey-blue', label: 'Grey blue', light: '#6f7db0', dark: '#6f7db0' }\n] as const satisfies readonly ChartColour[];\n\nexport type ChartColourKey = typeof CHART_COLOURS[number]['key'];\n\n/** The shade of a picked colour for the current theme. */\nexport function pickedChartColour(key: ChartColourKey, dark = false): string {\n    const colour = CHART_COLOURS.find(each => each.key === key)!;\n    return dark ? colour.dark : colour.light;\n}\n\n/** Past eight series, fold the rest into \"Other\" instead of reusing a colour. */\nexport const CHART_MAX_SERIES = CHART_PALETTE.length;\n\n/** Lines can go to sixteen, the second eight reuse the colours dashed. */\nexport const CHART_MAX_LINE_SERIES = CHART_PALETTE.length * 2;\n\n/** Chart chrome, apex needs real colours so these can't be CSS variables. */\nexport interface ChartInk {\n    text: string;\n    muted: string;\n    grid: string;\n    surface: string;\n\n    context: string;\n}\n\nexport const CHART_INK: ChartInk = {\n    text: '#1e2939', // gray-800\n    muted: '#6a7282', // gray-500\n    grid: '#e5e7eb', // gray-200\n    surface: '#ffffff',\n    context: '#d1d5dc' // gray-300\n};\n\nexport const CHART_INK_DARK: ChartInk = {\n    text: '#e5e5e5', // neutral-200\n    muted: '#a1a1a1', // neutral-400\n    grid: '#404040', // neutral-700\n    surface: '#262626', // neutral-800\n    context: '#525252' // neutral-600\n};\n\nexport function chartInk(dark: boolean): ChartInk {\n    return dark ? CHART_INK_DARK : CHART_INK;\n}\n\nexport interface ChartSeriesStyle {\n    colour: string;\n    dashed: boolean;\n}\n\n/** Past the eighth slot a series goes grey, reusing a colour would make two series look the same. */\nexport function chartColour(index: number, dark = false): string {\n    return (dark ? CHART_PALETTE_DARK : CHART_PALETTE)[index] ?? chartInk(dark).context;\n}\n\n/**\n * Colour plus line style for a slot. With `dashes` the ninth to sixteenth\n * slots reuse the colours as dashed lines, colour and dash together keep\n * them apart. Anything past that is grey.\n */\nexport function chartSeriesStyle(index: number, dashes: boolean, dark = false): ChartSeriesStyle {\n    if (dashes && index >= CHART_PALETTE.length && index < CHART_MAX_LINE_SERIES) {\n        return { colour: chartColour(index - CHART_PALETTE.length, dark), dashed: true };\n    }\n\n    return { colour: chartColour(index, dark), dashed: false };\n}\n\nconst HEX_COLOUR = /^#([0-9a-f]{6})$/i;\n\nfunction hexChannels(colour: string): number[] | null {\n    const digits = HEX_COLOUR.exec(colour)?.[1];\n\n    return digits\n        ? [0, 2, 4].map(at => parseInt(digits.slice(at, at + 2), 16))\n        : null;\n}\n\n/**\n * Blends `colour` towards `towards`, keeping `strength` of the original: 1 leaves\n * it as it is, 0 gives `towards`. Apex can't parse color-mix(), so it's done\n * here. Both must be six digit hex, anything else gives null.\n */\nexport function mixChartColours(colour: string, towards: string, strength: number): string | null {\n    const from = hexChannels(colour);\n    const to = hexChannels(towards);\n\n    if (!from || !to) {\n        return null;\n    }\n\n    const mixed = from.map((channel, index) =>\n        Math.round(channel * strength + to[index] * (1 - strength))\n    );\n\n    return `#${mixed.map(channel => channel.toString(16).padStart(2, '0')).join('')}`;\n}\n\nconst DARK_LABEL = CHART_INK.text;\nconst LIGHT_LABEL = '#ffffff';\n\n/**\n * Dark or light text, whichever reads better on a mark filled with `background`.\n * Judged by APCA, the contrast model drafted for WCAG 3: the WCAG 2 ratio\n * puts black text on saturated orange and red, where white reads far better.\n */\nexport function chartLabelInk(background: string): string {\n    const channels = hexChannels(background);\n\n    if (!channels) {\n        return DARK_LABEL;\n    }\n\n    const backgroundLuminance = screenLuminance(channels);\n    const lightContrast = lightnessContrast(screenLuminance(hexChannels(LIGHT_LABEL)!), backgroundLuminance);\n    const darkContrast = lightnessContrast(screenLuminance(hexChannels(DARK_LABEL)!), backgroundLuminance);\n\n    return lightContrast > darkContrast ? LIGHT_LABEL : DARK_LABEL;\n}\n\n// APCA's luminance, with its soft clamp that lifts near-black colours\nfunction screenLuminance(channels: number[]): number {\n    const [red, green, blue] = channels.map(channel => (channel / 255) ** 2.4);\n    const luminance = 0.2126729 * red + 0.7151522 * green + 0.072175 * blue;\n\n    return luminance < 0.022 ? luminance + (0.022 - luminance) ** 1.414 : luminance;\n}\n\n// APCA's lightness contrast (Lc) between text and its background, as a size whichever way round\nfunction lightnessContrast(textLuminance: number, backgroundLuminance: number): number {\n    const darkOnLight = backgroundLuminance > textLuminance;\n    const contrast = darkOnLight\n        ? (backgroundLuminance ** 0.56 - textLuminance ** 0.57) * 1.14\n        : (backgroundLuminance ** 0.65 - textLuminance ** 0.62) * 1.14;\n\n    return Math.max(Math.abs(contrast) - 0.027, 0) * 100;\n}\n"],"mappings":"AAKA,MAAa,gBAAgB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACM;AAGV,MAAa,qBAAqB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACM;AAkBV,MAAa,gBAAgB;CACzB;EAAE,KAAK;EAAQ,OAAO;EAAQ,OAAO;EAAW,MAAM;CAAS;CAC/D;EAAE,KAAK;EAAU,OAAO;EAAU,OAAO;EAAW,MAAM;CAAS;CACnE;EAAE,KAAK;EAAQ,OAAO;EAAQ,OAAO;EAAW,MAAM;CAAS;CAC/D;EAAE,KAAK;EAAS,OAAO;EAAS,OAAO;EAAW,MAAM;CAAS;CACjE;EAAE,KAAK;EAAQ,OAAO;EAAQ,OAAO;EAAW,MAAM;CAAS;CAC/D;EAAE,KAAK;EAAS,OAAO;EAAS,OAAO;EAAW,MAAM;CAAS;CACjE;EAAE,KAAK;EAAU,OAAO;EAAU,OAAO;EAAW,MAAM;CAAS;CACnE;EAAE,KAAK;EAAO,OAAO;EAAO,OAAO;EAAW,MAAM;CAAS;CAC7D;EAAE,KAAK;EAAW,OAAO;EAAW,OAAO;EAAW,MAAM;CAAS;CACrE;EAAE,KAAK;EAAe,OAAO;EAAe,OAAO;EAAW,MAAM;CAAS;CAC7E;EAAE,KAAK;EAAa,OAAO;EAAa,OAAO;EAAW,MAAM;CAAS;CACzE;EAAE,KAAK;EAAS,OAAO;EAAS,OAAO;EAAW,MAAM;CAAS;CACjE;EAAE,KAAK;EAAQ,OAAO;EAAQ,OAAO;EAAW,MAAM;CAAS;CAC/D;EAAE,KAAK;EAAgB,OAAO;EAAgB,OAAO;EAAW,MAAM;CAAS;CAC/E;EAAE,KAAK;EAAS,OAAO;EAAS,OAAO;EAAW,MAAM;CAAS;CACjE;EAAE,KAAK;EAAS,OAAO;EAAS,OAAO;EAAW,MAAM;CAAS;CACjE;EAAE,KAAK;EAAY,OAAO;EAAY,OAAO;EAAW,MAAM;CAAS;CACvE;EAAE,KAAK;EAAc,OAAO;EAAc,OAAO;EAAW,MAAM;CAAS;CAC3E;EAAE,KAAK;EAAO,OAAO;EAAO,OAAO;EAAW,MAAM;CAAS;CAC7D;EAAE,KAAK;EAAU,OAAO;EAAU,OAAO;EAAW,MAAM;CAAS;CACnE;EAAE,KAAK;EAAa,OAAO;EAAa,OAAO;EAAW,MAAM;CAAS;CACzE;EAAE,KAAK;EAAa,OAAO;EAAa,OAAO;EAAW,MAAM;CAAS;AAClC;AAK3C,SAAgB,kBAAkB,KAAqB,OAAO,OAAK;CAC/D,MAAM,SAAS,cAAc,MAAK,SAAQ,KAAK,QAAQ,GAAG;CAC1D,OAAO,OAAO,OAAO,OAAO,OAAO;AACvC;AAGA,MAAa,mBAAmB,cAAc;AAG9C,MAAa,wBAAwB,cAAc,SAAS;AAY5D,MAAa,YAAsB;CAC/B,MAAM;CACN,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;AACZ;AAED,MAAa,iBAA2B;CACpC,MAAM;CACN,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;AACZ;AAED,SAAgB,SAAS,MAAa;CAClC,OAAO,OAAO,iBAAiB;AACnC;AAQA,SAAgB,YAAY,OAAe,OAAO,OAAK;CACnD,QAAQ,OAAO,qBAAqB,cAAA,CAAe,UAAU,SAAS,IAAI,CAAC,CAAC;AAChF;AAOA,SAAgB,iBAAiB,OAAe,QAAiB,OAAO,OAAK;CACzE,IAAI,UAAU,SAAS,cAAc,UAAU,QAAQ,uBACnD,OAAO;EAAE,QAAQ,YAAY,QAAQ,cAAc,QAAQ,IAAI;EAAG,QAAQ;CAAI;CAGlF,OAAO;EAAE,QAAQ,YAAY,OAAO,IAAI;EAAG,QAAQ;CAAK;AAC5D;AAEA,MAAM,aAAa;AAEnB,SAAS,YAAY,QAAc;CAC/B,MAAM,SAAS,WAAW,KAAK,MAAM,CAAC,GAAG;CAEzC,OAAO,SACD;EAAC;EAAG;EAAG;CAAC,CAAC,CAAC,KAAI,OAAM,SAAS,OAAO,MAAM,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC,IAC1D;AACV;AAOA,SAAgB,gBAAgB,QAAgB,SAAiB,UAAgB;CAC7E,MAAM,OAAO,YAAY,MAAM;CAC/B,MAAM,KAAK,YAAY,OAAO;CAE9B,IAAI,CAAC,QAAQ,CAAC,IACV,OAAO;CAOX,OAAO,IAJO,KAAK,KAAK,SAAS,UAC7B,KAAK,MAAM,UAAU,WAAW,GAAG,UAAU,IAAI,SAAS,CAGnD,CAAA,CAAM,KAAI,YAAW,QAAQ,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;AAClF;AAEA,MAAM,aAAa,UAAU;AAC7B,MAAM,cAAc;AAOpB,SAAgB,cAAc,YAAkB;CAC5C,MAAM,WAAW,YAAY,UAAU;CAEvC,IAAI,CAAC,UACD,OAAO;CAGX,MAAM,sBAAsB,gBAAgB,QAAQ;CAIpD,OAHsB,kBAAkB,gBAAgB,YAAY,WAAW,CAAE,GAAG,mBAG7E,IAFc,kBAAkB,gBAAgB,YAAY,UAAU,CAAE,GAAG,mBAE3D,IAAe,cAAc;AACxD;AAGA,SAAS,gBAAgB,UAAkB;CACvC,MAAM,CAAC,KAAK,OAAO,QAAQ,SAAS,KAAI,aAAY,UAAU,QAAQ,GAAG;CACzE,MAAM,YAAY,WAAY,MAAM,WAAY,QAAQ,UAAW;CAEnE,OAAO,YAAY,OAAQ,aAAa,OAAQ,cAAc,QAAQ;AAC1E;AAGA,SAAS,kBAAkB,eAAuB,qBAA2B;CAEzE,MAAM,WADc,sBAAsB,iBAEnC,uBAAuB,MAAO,iBAAiB,OAAQ,QACvD,uBAAuB,MAAO,iBAAiB,OAAQ;CAE9D,OAAO,KAAK,IAAI,KAAK,IAAI,QAAQ,IAAI,MAAO,CAAC,IAAI;AACrD"}