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

package/fesm2022/area8975-ui-modal.mjs

@@ -0,0 +1,235 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, computed, contentChild, input, model, viewChild } from "@angular/core";
+import { UiCardComponent } from "@area8975/ui/card";
+import { UiModalCloseButtonComponent } from "@area8975/ui/modal-close-btn";
+import { UiOverlayComponent } from "@area8975/ui/overlay";
+var UiModalComponent = class UiModalComponent {
+	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	headerElement = contentChild("header", {
+		...ngDevMode ? { debugName: "headerElement" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	footerElement = contentChild("footer", {
+		...ngDevMode ? { debugName: "footerElement" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	panelElement = viewChild("panel", {
+		...ngDevMode ? { debugName: "panelElement" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	generatedClasses = computed(() => [
+		"ui-modal",
+		`ui-modal--${this.size()}`,
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiModalComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiModalComponent,
+		isStandalone: true,
+		selector: "ui-modal",
+		inputs: {
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			closeBehaviour: {
+				classPropertyName: "closeBehaviour",
+				publicName: "closeBehaviour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { isOpen: "isOpenChange" },
+		queries: [{
+			propertyName: "headerElement",
+			first: true,
+			predicate: ["header"],
+			isSignal: true
+		}, {
+			propertyName: "footerElement",
+			first: true,
+			predicate: ["footer"],
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "panelElement",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <ui-card #panel radius=\"xl\" [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </ui-card>\n        </ui-overlay>\n    </div>\n}\n",
+		styles: [".ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;max-height:100vh;overflow:hidden}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: UiOverlayComponent,
+				selector: "ui-overlay",
+				inputs: [
+					"content",
+					"anchor",
+					"closeBehaviour",
+					"isOpen",
+					"placement",
+					"offset",
+					"viewportPadding",
+					"matchWidth"
+				],
+				exportAs: ["uiOverlay"]
+			},
+			{
+				kind: "component",
+				type: UiModalCloseButtonComponent,
+				selector: "ui-modal-close-btn",
+				inputs: ["isOpen"],
+				outputs: ["isOpenChange"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiModalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-modal",
+			imports: [
+				UiOverlayComponent,
+				UiModalCloseButtonComponent,
+				NgTemplateOutlet,
+				UiCardComponent
+			],
+			template: "@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <ui-card #panel radius=\"xl\" [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </ui-card>\n        </ui-overlay>\n    </div>\n}\n",
+			styles: [".ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;max-height:100vh;overflow:hidden}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["isOpenChange"]
+		}],
+		closeBehaviour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeBehaviour",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		headerElement: [{
+			type: i0.ContentChild,
+			args: ["header", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		footerElement: [{
+			type: i0.ContentChild,
+			args: ["footer", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		panelElement: [{
+			type: i0.ViewChild,
+			args: ["panel", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}]
+	}
+});
+export { UiModalComponent };
+
+//# sourceMappingURL=area8975-ui-modal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-modal.mjs","names":[],"sources":["../../../projects/ui/modal/modal.component.ts","../../../projects/ui/modal/modal.component.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    Component,\n    computed,\n    contentChild,\n    ElementRef,\n    input,\n    model,\n    TemplateRef,\n    viewChild\n} from '@angular/core';\n\nimport { UiCardComponent } from '@area8975/ui/card';\nimport { UiModalCloseButtonComponent } from '@area8975/ui/modal-close-btn';\nimport { UiOverlayComponent } from '@area8975/ui/overlay';\nimport { UiOverlayCloseBehaviour } from '@area8975/ui/overlay';\n\nimport { ModalSize } from './modal.types';\n\n\n@Component({\n    selector: 'ui-modal',\n    templateUrl: './modal.component.html',\n    styleUrl: './modal.component.css',\n    imports: [\n        UiOverlayComponent,\n        UiModalCloseButtonComponent,\n        NgTemplateOutlet,\n        UiCardComponent\n    ]\n})\nexport class UiModalComponent {\n    readonly isOpen = model.required<boolean>();\n    readonly closeBehaviour = input<UiOverlayCloseBehaviour>(\n        'whenClickOutside'\n    );\n    readonly title = input<string>('');\n    readonly size = input<ModalSize>('md');\n    readonly classes = input<string>('');\n\n    readonly headerElement = contentChild<TemplateRef<unknown>>(\n        'header',\n        { descendants: false }\n    );\n    readonly footerElement = contentChild<TemplateRef<unknown>>(\n        'footer',\n        { descendants: false }\n    );\n    readonly panelElement = viewChild(\n        'panel',\n        { read: ElementRef<HTMLElement> }\n    );\n\n    readonly generatedClasses = computed<string>(() =>\n        [\n            'ui-modal',\n            `ui-modal--${this.size()}`,\n            this.classes()\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n}\n","@if (isOpen()) {\n    <div\n        class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n        animate.leave=\"fs-modal--leaving opacity-0\"\n    >\n        <ui-overlay\n            [isOpen]=\"isOpen\"\n            [closeBehaviour]=\"closeBehaviour()\"\n            [content]=\"panelElement()\"\n            tabIndex=\"-1\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n        >\n            <ui-card #panel radius=\"xl\" [class]=\"generatedClasses()\">\n                <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n                    <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n                        @if (headerElement()) {\n                            <ng-container *ngTemplateOutlet=\"headerElement()\" />\n                        } @else {\n                            <span class=\"ui-text-h3\">{{ title() }}</span>\n                            <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n                        }\n                    </header>\n                    <div class=\"flex-1 min-h-0 overflow-auto\">\n                        <ng-content />\n                    </div>\n\n                    @if (footerElement()) {\n                        <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n                            <ng-container *ngTemplateOutlet=\"footerElement()\" />\n                        </footer>\n                    }\n                </div>\n            </ui-card>\n        </ui-overlay>\n    </div>\n}\n"],"mappings":"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"}

package/fesm2022/area8975-ui-money.mjs

@@ -0,0 +1,230 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, inject, input } from "@angular/core";
+import { UI_FORMAT, UI_PRIVACY, maskMoney } from "@area8975/ui/format";
+var UiMoneyComponent = class UiMoneyComponent {
+	defaults = inject(UI_FORMAT);
+	privacy = inject(UI_PRIVACY);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	currency = input(this.defaults.currency, ...ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []);
+	locale = input(this.defaults.locale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	signDisplay = input("auto", ...ngDevMode ? [{ debugName: "signDisplay" }] : /* istanbul ignore next */ []);
+	colourBySign = input(false, {
+		...ngDevMode ? { debugName: "colourBySign" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	wholeUnits = input(false, {
+		...ngDevMode ? { debugName: "wholeUnits" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	compact = input(false, {
+		...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input("-", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	amount = computed(() => {
+		const value = this.value();
+		return value === null || Number.isNaN(value) ? null : value || 0;
+	}, ...ngDevMode ? [{ debugName: "amount" }] : /* istanbul ignore next */ []);
+	masked = computed(() => this.privacy() !== "visible" && this.amount() !== null, ...ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []);
+	mask = computed(() => maskMoney(this.currency(), this.locale()), ...ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []);
+	formatted = computed(() => {
+		const amount = this.amount();
+		return amount === null ? this.placeholder() : this.format(amount, this.compact());
+	}, ...ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []);
+	title = computed(() => {
+		const amount = this.amount();
+		return this.compact() && amount !== null && !this.masked() ? this.format(amount, false) : null;
+	}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => ["ui-money", this.signClass()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	signClass = computed(() => {
+		const amount = this.amount();
+		if (!this.colourBySign() || amount === null || this.privacy() === "hidden") return "";
+		if (amount > 0) return "ui-money--positive";
+		return amount < 0 ? "ui-money--negative" : "";
+	}, ...ngDevMode ? [{ debugName: "signClass" }] : /* istanbul ignore next */ []);
+	format(amount, compact) {
+		return new Intl.NumberFormat(this.locale(), {
+			style: "currency",
+			currency: this.currency(),
+			signDisplay: this.signDisplay(),
+			notation: compact ? "compact" : "standard",
+			...this.wholeUnits() && {
+				minimumFractionDigits: 0,
+				maximumFractionDigits: 0
+			}
+		}).format(amount);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiMoneyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiMoneyComponent,
+		isStandalone: true,
+		selector: "ui-money",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			currency: {
+				classPropertyName: "currency",
+				publicName: "currency",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			signDisplay: {
+				classPropertyName: "signDisplay",
+				publicName: "signDisplay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colourBySign: {
+				classPropertyName: "colourBySign",
+				publicName: "colourBySign",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			wholeUnits: {
+				classPropertyName: "wholeUnits",
+				publicName: "wholeUnits",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "generatedClasses()",
+			"attr.title": "title()"
+		} },
+		ngImport: i0,
+		template: "@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask() }}</span>\n    <span class=\"sr-only\">amount hidden</span>\n} @else {{{ formatted() }}}\n",
+		styles: ["@layer properties;:host{position:relative}:host(.ui-money){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,)}:host(.ui-money--positive){color:var(--color-success-600, var(--color-teal-600))}:host(.ui-money--negative){color:var(--color-danger-600, var(--color-red-600))}@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-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"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiMoneyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-money",
+			host: {
+				"[class]": "generatedClasses()",
+				"[attr.title]": "title()"
+			},
+			template: "@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask() }}</span>\n    <span class=\"sr-only\">amount hidden</span>\n} @else {{{ formatted() }}}\n",
+			styles: ["@layer properties;:host{position:relative}:host(.ui-money){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,)}:host(.ui-money--positive){color:var(--color-success-600, var(--color-teal-600))}:host(.ui-money--negative){color:var(--color-danger-600, var(--color-red-600))}@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-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"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		currency: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "currency",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		signDisplay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "signDisplay",
+				required: false
+			}]
+		}],
+		colourBySign: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colourBySign",
+				required: false
+			}]
+		}],
+		wholeUnits: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "wholeUnits",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}]
+	}
+});
+const MoneySignDisplays = [
+	"auto",
+	"always",
+	"exceptZero",
+	"never"
+];
+export { MoneySignDisplays, UiMoneyComponent };
+
+//# sourceMappingURL=area8975-ui-money.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-money.mjs","names":[],"sources":["../../../projects/ui/money/money.component.ts","../../../projects/ui/money/money.component.html","../../../projects/ui/money/money.types.ts"],"sourcesContent":["import { booleanAttribute, Component, computed, inject, input } from '@angular/core';\n\nimport { UI_FORMAT } from '@area8975/ui/format';\nimport { maskMoney, UI_PRIVACY } from '@area8975/ui/format';\n\nimport type { MoneySignDisplay } from './money.types';\n\n\n/**\n * Formats a money value, e.g. -42.1 as \"-£42.10\".\n */\n@Component({\n    selector: 'ui-money',\n    templateUrl: './money.component.html',\n    styleUrl: './money.component.css',\n    host: {\n        '[class]': 'generatedClasses()',\n        '[attr.title]': 'title()'\n    }\n})\nexport class UiMoneyComponent {\n    private readonly defaults = inject(UI_FORMAT);\n    private readonly privacy = inject(UI_PRIVACY);\n\n    readonly value = input.required<number | null>();\n\n    /** Defaults to the currency from `provideUiFormat`. */\n    readonly currency = input<string>(this.defaults.currency);\n\n    /** Defaults to the locale from `provideUiFormat`. */\n    readonly locale = input<string>(this.defaults.locale);\n    readonly signDisplay = input<MoneySignDisplay>('auto');\n\n    /** Green for money in, red for money out. */\n    readonly colourBySign = input(false, { transform: booleanAttribute });\n\n    /** Rounds to whole units, e.g. \"£2,235\" for headline figures where pence are noise. */\n    readonly wholeUnits = input(false, { transform: booleanAttribute });\n\n    /** Short form like \"£12K\", the full amount goes in the title. */\n    readonly compact = input(false, { transform: booleanAttribute });\n\n    /** Shown when there's no value. */\n    readonly placeholder = input<string>('-');\n\n    // -0 would otherwise format as \"-£0.00\"\n    private readonly amount = computed(() => {\n        const value = this.value();\n\n        return value === null || Number.isNaN(value) ? null : value || 0;\n    });\n\n    protected readonly masked = computed(() => this.privacy() !== 'visible' && this.amount() !== null);\n\n    protected readonly mask = computed(() => maskMoney(this.currency(), this.locale()));\n\n    protected readonly formatted = computed(() => {\n        const amount = this.amount();\n\n        return amount === null ? this.placeholder() : this.format(amount, this.compact());\n    });\n\n    protected readonly title = computed(() => {\n        const amount = this.amount();\n\n        return this.compact() && amount !== null && !this.masked() ? this.format(amount, false) : null;\n    });\n\n    readonly generatedClasses = computed(() =>\n        [\n            'ui-money',\n            this.signClass()\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n\n    private readonly signClass = computed(() => {\n        const amount = this.amount();\n\n        if (!this.colourBySign() || amount === null || this.privacy() === 'hidden') {\n            return '';\n        }\n\n        if (amount > 0) {\n            return 'ui-money--positive';\n        }\n\n        return amount < 0 ? 'ui-money--negative' : '';\n    });\n\n    private format(amount: number, compact: boolean): string {\n        return new Intl.NumberFormat(this.locale(), {\n            style: 'currency',\n            currency: this.currency(),\n            signDisplay: this.signDisplay(),\n            notation: compact ? 'compact' : 'standard',\n            ...(this.wholeUnits() && { minimumFractionDigits: 0, maximumFractionDigits: 0 })\n        }).format(amount);\n    }\n}\n","@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask() }}</span>\n    <span class=\"sr-only\">amount hidden</span>\n} @else {{{ formatted() }}}\n","/** Intl signDisplay values, controls when a + or - is shown. */\nexport const MoneySignDisplays = [\n    'auto',\n    'always',\n    'exceptZero',\n    'never'\n] as const;\n\n/** @see {@link MoneySignDisplays} */\nexport type MoneySignDisplay = typeof MoneySignDisplays[number];\n"],"mappings":";;;AAoBA,IAAa,mBAAb,MAAa,iBAAgB;CACR,WAAW,OAAO,SAAS;CAC3B,UAAU,OAAO,UAAU;CAEnC,QAAQ,MAAM,SAAyB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,WAAW,MAAc,KAAK,SAAS,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhD,SAAS,MAAc,KAAK,SAAS,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,cAAc,MAAwB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAG7C,eAAe,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,eAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGzD,aAAa,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGvD,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGpD,cAAc,MAAc,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,SAAS,eAAc;EACpC,MAAM,QAAQ,KAAK,MAAK;EAExB,OAAO,UAAU,QAAQ,OAAO,MAAM,KAAK,IAAI,OAAO,SAAS;CACnE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,SAAS,eAAe,KAAK,QAAO,MAAO,aAAa,KAAK,OAAM,MAAO,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAE/E,OAAO,eAAe,UAAU,KAAK,SAAQ,GAAI,KAAK,OAAM,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEhE,YAAY,eAAc;EACzC,MAAM,SAAS,KAAK,OAAM;EAE1B,OAAO,WAAW,OAAO,KAAK,YAAW,IAAK,KAAK,OAAO,QAAQ,KAAK,QAAO,CAAE;CACpF,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,QAAQ,eAAc;EACrC,MAAM,SAAS,KAAK,OAAM;EAE1B,OAAO,KAAK,QAAO,KAAM,WAAW,QAAQ,CAAC,KAAK,OAAM,IAAK,KAAK,OAAO,QAAQ,KAAK,IAAI;CAC9F,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEO,mBAAmB,eACxB,CACI,YACA,KAAK,UAAS,CACjB,CAAA,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAChB,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAEgB,YAAY,eAAc;EACvC,MAAM,SAAS,KAAK,OAAM;EAE1B,IAAI,CAAC,KAAK,aAAY,KAAM,WAAW,QAAQ,KAAK,QAAO,MAAO,UAC9D,OAAO;EAGX,IAAI,SAAS,GACT,OAAO;EAGX,OAAO,SAAS,IAAI,uBAAuB;CAC/C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEM,OAAO,QAAgB,SAAgB;EAC3C,OAAO,IAAI,KAAK,aAAa,KAAK,OAAM,GAAI;GACxC,OAAO;GACP,UAAU,KAAK,SAAQ;GACvB,aAAa,KAAK,YAAW;GAC7B,UAAU,UAAU,YAAY;GAChC,GAAI,KAAK,WAAU,KAAM;IAAE,uBAAuB;IAAG,uBAAuB;GAAC;EAChF,CAAA,CAAC,CAAC,OAAO,MAAM;CACpB;CA/ES,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,cAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCpB7B;EAIA,QAAA,CAAA,ylCAAA;CAAA,CAAA;;ADgBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAT5B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAU,MAGd;IACF,WAAW;IACX,gBAAgB;GACnB;GAAA,UAAA;GAAA,QAAA,CAAA,ylCAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEjBL,MAAa,oBAAoB;CAC7B;CACA;CACA;CACA;AACM"}