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

package/fesm2022/area8975-ui-overlay.mjs

@@ -0,0 +1,317 @@
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Injectable, effect, inject, input } from "@angular/core";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+var UiOverlayPositioner = class UiOverlayPositioner {
+	position = (reference, overlay, options) => computePosition(reference, overlay, {
+		placement: options.placement,
+		strategy: "fixed",
+		middleware: [
+			offset(options.offset),
+			flip({ padding: options.viewportPadding }),
+			shift({ padding: options.viewportPadding })
+		]
+	});
+	watch = (reference, overlay, update) => autoUpdate(reference, overlay, update);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayPositioner,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayPositioner,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiOverlayPositioner,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var UiOverlayStack = class UiOverlayStack {
+	entries = [];
+	constructor() {
+		document.addEventListener("click", this.onDocumentClick);
+		document.addEventListener("keydown", this.onKeyDown);
+		inject(DestroyRef).onDestroy(() => {
+			document.removeEventListener("click", this.onDocumentClick);
+			document.removeEventListener("keydown", this.onKeyDown);
+		});
+	}
+	push = (entry) => {
+		this.remove(entry);
+		this.entries.push(entry);
+	};
+	remove = (entry) => {
+		const index = this.entries.indexOf(entry);
+		if (index !== -1) this.entries.splice(index, 1);
+	};
+	top = () => this.entries.at(-1);
+	onDocumentClick = (event) => this.top()?.onDocumentClick(event);
+	onKeyDown = (event) => this.top()?.onKeyDown(event);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayStack,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayStack,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiOverlayStack,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var UiOverlayComponent = class UiOverlayComponent {
+	positioner = inject(UiOverlayPositioner);
+	stack = inject(UiOverlayStack);
+	content = input(...ngDevMode ? [void 0, { debugName: "content" }] : /* istanbul ignore next */ []);
+	anchor = input(...ngDevMode ? [void 0, { debugName: "anchor" }] : /* istanbul ignore next */ []);
+	closeBehaviour = input("whenClickAnywhere", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	isOpen = input.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	offset = input(0, ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
+	viewportPadding = input(0, ...ngDevMode ? [{ debugName: "viewportPadding" }] : /* istanbul ignore next */ []);
+	matchWidth = input(null, ...ngDevMode ? [{ debugName: "matchWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			if (!this.isOpen()()) return;
+			this.stack.push(this);
+			onCleanup(() => this.stack.remove(this));
+		});
+		effect((onCleanup) => {
+			const anchor = this.anchor();
+			const content = this.content();
+			if (!this.isOpen()() || !anchor || !content) return;
+			const referenceElement = anchor.nativeElement;
+			const floatingElement = content.nativeElement;
+			const update = () => {
+				const matchWidth = this.matchWidth();
+				if (matchWidth) {
+					const width = `${referenceElement.offsetWidth}px`;
+					if (matchWidth === "both") {
+						floatingElement.style.maxWidth = width;
+						floatingElement.style.minWidth = width;
+					} else floatingElement.style[matchWidth] = width;
+				}
+				return this.positioner.position(referenceElement, floatingElement, {
+					placement: this.placement(),
+					offset: this.offset(),
+					viewportPadding: this.viewportPadding()
+				}).then(({ x, y }) => Object.assign(floatingElement.style, {
+					left: `${x}px`,
+					top: `${y}px`
+				}));
+			};
+			update();
+			onCleanup(this.positioner.watch(referenceElement, floatingElement, update));
+		});
+	}
+	close = () => this.isOpen().set(false);
+	onDocumentClick = (event) => {
+		const behaviour = this.closeBehaviour();
+		if (behaviour === "none") return;
+		const target = event.target;
+		if (!(target instanceof Node)) return;
+		const anchorElement = this.anchor()?.nativeElement;
+		const contentElement = this.content()?.nativeElement;
+		const isInsideAnchor = anchorElement?.contains(target) ?? false;
+		const isInsideContent = contentElement?.contains(target) ?? false;
+		if (isInsideAnchor && !isInsideContent) return;
+		if (behaviour === "whenClickAnywhere") {
+			this.close();
+			return;
+		}
+		if (!isInsideContent) this.close();
+	};
+	onKeyDown = (event) => {
+		if (event.key === "Escape") this.close();
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiOverlayComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiOverlayComponent,
+		isStandalone: true,
+		selector: "ui-overlay",
+		inputs: {
+			content: {
+				classPropertyName: "content",
+				publicName: "content",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			anchor: {
+				classPropertyName: "anchor",
+				publicName: "anchor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeBehaviour: {
+				classPropertyName: "closeBehaviour",
+				publicName: "closeBehaviour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			offset: {
+				classPropertyName: "offset",
+				publicName: "offset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			viewportPadding: {
+				classPropertyName: "viewportPadding",
+				publicName: "viewportPadding",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			matchWidth: {
+				classPropertyName: "matchWidth",
+				publicName: "matchWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { styleAttribute: "display: contents;" },
+		exportAs: ["uiOverlay"],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiOverlayComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-overlay",
+			exportAs: "uiOverlay",
+			template: "<ng-content />",
+			host: { style: "display: contents;" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		content: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "content",
+				required: false
+			}]
+		}],
+		anchor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "anchor",
+				required: false
+			}]
+		}],
+		closeBehaviour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeBehaviour",
+				required: false
+			}]
+		}],
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: true
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		offset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offset",
+				required: false
+			}]
+		}],
+		viewportPadding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "viewportPadding",
+				required: false
+			}]
+		}],
+		matchWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "matchWidth",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiOverlayComponent };
+
+//# sourceMappingURL=area8975-ui-overlay.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-overlay.mjs","names":[],"sources":["../../../projects/ui/overlay/overlay.positioner.ts","../../../projects/ui/overlay/overlay.stack.ts","../../../projects/ui/overlay/overlay.component.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\n\nimport { autoUpdate, computePosition, flip, offset, shift } from \"@floating-ui/dom\";\n\nimport { UiOverlayOptions } from \"./overlay.types\";\n\n\n@Injectable({ providedIn: \"root\" })\nexport class UiOverlayPositioner {\n    readonly position = (\n        reference: HTMLElement,\n        overlay: HTMLElement,\n        options: UiOverlayOptions\n    ) => computePosition(reference, overlay, {\n        placement: options.placement,\n        strategy: \"fixed\",\n        middleware: [\n            offset(options.offset),\n            flip({  padding: options.viewportPadding }),\n            shift({ padding: options.viewportPadding })\n        ]\n    });\n\n    readonly watch = (\n        reference: HTMLElement,\n        overlay: HTMLElement,\n        update: () => void\n    ) => autoUpdate(reference, overlay, update);\n}\n","import { DestroyRef, inject, Injectable } from '@angular/core';\n\nimport { UiOverlayStackEntry } from './overlay.types';\n\n\n/** Tracks open overlays so only the top one reacts to outside clicks and Escape. */\n@Injectable({ providedIn: 'root' })\nexport class UiOverlayStack {\n    private readonly entries: UiOverlayStackEntry[] = [];\n\n    constructor() {\n        document.addEventListener('click', this.onDocumentClick);\n        document.addEventListener('keydown', this.onKeyDown);\n\n        inject(DestroyRef).onDestroy(() => {\n            document.removeEventListener('click', this.onDocumentClick);\n            document.removeEventListener('keydown', this.onKeyDown);\n        });\n    }\n\n    readonly push = (entry: UiOverlayStackEntry) => {\n        this.remove(entry);\n        this.entries.push(entry);\n    };\n\n    readonly remove = (entry: UiOverlayStackEntry) => {\n        const index = this.entries.indexOf(entry);\n        if (index !== -1) { this.entries.splice(index, 1); }\n    };\n\n    private readonly top = () => this.entries.at(-1);\n\n    private readonly onDocumentClick = (event: MouseEvent) =>\n        this.top()?.onDocumentClick(event);\n\n    private readonly onKeyDown = (event: KeyboardEvent) =>\n        this.top()?.onKeyDown(event);\n}\n","import {\n    Component,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    WritableSignal\n} from '@angular/core';\n\nimport { Placement } from '@floating-ui/dom';\n\nimport { UiOverlayPositioner } from './overlay.positioner';\nimport { UiOverlayStack } from './overlay.stack';\nimport {\n    UiOverlayCloseBehaviour,\n    UiOverlayMatchWidth,\n    UiOverlayStackEntry\n} from './overlay.types';\n\n\n@Component({\n    selector: 'ui-overlay',\n    exportAs: 'uiOverlay',\n    template: '<ng-content />',\n    host: { style: 'display: contents;' }\n})\nexport class UiOverlayComponent implements UiOverlayStackEntry {\n    private readonly positioner = inject(UiOverlayPositioner);\n    private readonly stack = inject(UiOverlayStack);\n\n    readonly content = input<ElementRef<HTMLInputElement>>();\n    readonly anchor = input<ElementRef<HTMLElement>>();\n    readonly closeBehaviour = input<UiOverlayCloseBehaviour>(\n        'whenClickAnywhere'\n    );\n\n    readonly isOpen = input.required<WritableSignal<boolean>>();\n\n    readonly placement = input<Placement>('bottom-start');\n    readonly offset = input<number>(0);\n    readonly viewportPadding = input<number>(0);\n\n    /** Forces this element to match the width of its anchor element. */\n    readonly matchWidth = input<UiOverlayMatchWidth | null>(null);\n\n    constructor() {\n        effect(onCleanup => {\n            if (!this.isOpen()()) { return; }\n\n            this.stack.push(this);\n            onCleanup(() => this.stack.remove(this));\n        });\n\n        effect(onCleanup => {\n            const anchor = this.anchor();\n            const content = this.content();\n\n            if (!this.isOpen()() || !anchor || !content) { return; }\n\n            const referenceElement = anchor.nativeElement;\n            const floatingElement = content.nativeElement;\n\n            const update = () => {\n                const matchWidth = this.matchWidth();\n\n                if (matchWidth) {\n                    const width = `${referenceElement.offsetWidth}px`;\n\n                    if (matchWidth === 'both') {\n                        floatingElement.style.maxWidth = width;\n                        floatingElement.style.minWidth = width;\n                    } else {\n                        floatingElement.style[matchWidth] = width;\n                    }\n                }\n\n                return this.positioner.position(\n                    referenceElement,\n                    floatingElement,\n                    {\n                        placement: this.placement(),\n                        offset: this.offset(),\n                        viewportPadding: this.viewportPadding()\n                    }\n                ).then(({ x, y }) =>\n                    Object.assign(floatingElement.style, {\n                        left: `${x}px`,\n                        top: `${y}px`\n                    })\n                );\n            };\n\n            update();\n\n            onCleanup(\n                this.positioner.watch(referenceElement, floatingElement, update)\n            );\n        });\n    }\n\n    private readonly close = () => this.isOpen().set(false);\n\n    readonly onDocumentClick = (event: MouseEvent) => {\n        const behaviour = this.closeBehaviour();\n        if (behaviour === 'none') { return; }\n\n        const target = event.target;\n        if (!(target instanceof Node)) { return; }\n\n        const anchorElement = this.anchor()?.nativeElement;\n        const contentElement = this.content()?.nativeElement;\n        const isInsideAnchor = anchorElement?.contains(target) ?? false;\n        const isInsideContent = contentElement?.contains(target) ?? false;\n\n        // Anchor can wrap the content too, so only treat a click as \"on the\n        // anchor\" (e.g. the trigger button) when it's not inside the content.\n        if (isInsideAnchor && !isInsideContent) { return; }\n\n        if (behaviour === 'whenClickAnywhere') {\n            this.close();\n            return;\n        }\n\n        if (!isInsideContent) {\n            this.close();\n        }\n    };\n\n    readonly onKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') { this.close(); }\n    };\n}\n"],"mappings":";;;AAQA,IAAa,sBAAb,MAAa,oBAAmB;CACnB,YACL,WACA,SACA,YACC,gBAAgB,WAAW,SAAS;EACrC,WAAW,QAAQ;EACnB,UAAU;EACV,YAAY;GACR,OAAO,QAAQ,MAAM;GACrB,KAAK,EAAG,SAAS,QAAQ,gBAAe,CAAE;GAC1C,MAAM,EAAE,SAAS,QAAQ,gBAAe,CAAE;EAC7C;CACJ,CAAA;CAEQ,SACL,WACA,SACA,WACC,WAAW,WAAW,SAAS,MAAM;CAnBjC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,QAAA,GAAA,sBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,YADN;CAAM,CAAA;;AACnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAD/B,MAAA;EAAW,MAAA,CAAA,EAAE,YAAY,OAAM,CAAE;;;ACAlC,IAAa,iBAAb,MAAa,eAAc;CACN,UAAiC,CAAA;CAElD,cAAA;EACI,SAAS,iBAAiB,SAAS,KAAK,eAAe;EACvD,SAAS,iBAAiB,WAAW,KAAK,SAAS;EAEnD,OAAO,UAAU,CAAC,CAAC,gBAAe;GAC9B,SAAS,oBAAoB,SAAS,KAAK,eAAe;GAC1D,SAAS,oBAAoB,WAAW,KAAK,SAAS;EAC1D,CAAC;CACL;CAES,QAAQ,UAA8B;EAC3C,KAAK,OAAO,KAAK;EACjB,KAAK,QAAQ,KAAK,KAAK;CAC3B;CAES,UAAU,UAA8B;EAC7C,MAAM,QAAQ,KAAK,QAAQ,QAAQ,KAAK;EACxC,IAAI,UAAU,IAAM,KAAK,QAAQ,OAAO,OAAO,CAAC;CACpD;CAEiB,YAAY,KAAK,QAAQ,GAAG,EAAE;CAE9B,mBAAmB,UAChC,KAAK,IAAG,CAAE,EAAE,gBAAgB,KAAK;CAEpB,aAAa,UAC1B,KAAK,IAAG,CAAE,EAAE,UAAU,KAAK;CA7BtB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,QAAA,GAAA,sBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,YADD;CAAM,CAAA;;AACnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAD1B,MAAA;EAAW,MAAA,CAAA,EAAE,YAAY,OAAM,CAAE;;;;ACoBlC,IAAa,qBAAb,MAAa,mBAAkB;CACV,aAAa,OAAO,mBAAmB;CACvC,QAAQ,OAAO,cAAc;CAErC,UAAU,MAAqC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC/C,SAAS,MAAgC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,iBAAiB,MACtB,qBACH,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,SAAS,MAAM,SAAmC,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAElD,YAAY,MAAiB,gBAAe,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,SAAS,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,kBAAkB,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAGlC,aAAa,MAAkC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE7D,cAAA;EACI,QAAO,cAAY;GACf,IAAI,CAAC,KAAK,OAAM,CAAE,CAAA,GAAM;GAExB,KAAK,MAAM,KAAK,IAAI;GACpB,gBAAgB,KAAK,MAAM,OAAO,IAAI,CAAC;EAC3C,CAAC;EAED,QAAO,cAAY;GACf,MAAM,SAAS,KAAK,OAAM;GAC1B,MAAM,UAAU,KAAK,QAAO;GAE5B,IAAI,CAAC,KAAK,OAAM,CAAE,CAAA,KAAM,CAAC,UAAU,CAAC,SAAW;GAE/C,MAAM,mBAAmB,OAAO;GAChC,MAAM,kBAAkB,QAAQ;GAEhC,MAAM,eAAc;IAChB,MAAM,aAAa,KAAK,WAAU;IAElC,IAAI,YAAY;KACZ,MAAM,QAAQ,GAAG,iBAAiB,YAAW;KAE7C,IAAI,eAAe,QAAQ;MACvB,gBAAgB,MAAM,WAAW;MACjC,gBAAgB,MAAM,WAAW;KACrC,OACI,gBAAgB,MAAM,cAAc;IAE5C;IAEA,OAAO,KAAK,WAAW,SACnB,kBACA,iBACA;KACI,WAAW,KAAK,UAAS;KACzB,QAAQ,KAAK,OAAM;KACnB,iBAAiB,KAAK,gBAAe;IACxC,CAAA,CACJ,CAAC,MAAM,EAAE,GAAG,QACT,OAAO,OAAO,gBAAgB,OAAO;KACjC,MAAM,GAAG,EAAC;KACV,KAAK,GAAG,EAAC;IACZ,CAAA,CAAC;GAEV;GAEA,OAAM;GAEN,UACI,KAAK,WAAW,MAAM,kBAAkB,iBAAiB,MAAM,CAAC;EAExE,CAAC;CACL;CAEiB,cAAc,KAAK,OAAM,CAAE,CAAC,IAAI,KAAK;CAE7C,mBAAmB,UAAqB;EAC7C,MAAM,YAAY,KAAK,eAAc;EACrC,IAAI,cAAc,QAAU;EAE5B,MAAM,SAAS,MAAM;EACrB,IAAI,EAAE,kBAAkB,OAAS;EAEjC,MAAM,gBAAgB,KAAK,OAAM,CAAE,EAAE;EACrC,MAAM,iBAAiB,KAAK,QAAO,CAAE,EAAE;EACvC,MAAM,iBAAiB,eAAe,SAAS,MAAM,KAAK;EAC1D,MAAM,kBAAkB,gBAAgB,SAAS,MAAM,KAAK;EAI5D,IAAI,kBAAkB,CAAC,iBAAmB;EAE1C,IAAI,cAAc,qBAAqB;GACnC,KAAK,MAAK;GACV;EACJ;EAEA,IAAI,CAAC,iBACD,KAAK,MAAK;CAElB;CAES,aAAa,UAAwB;EAC1C,IAAI,MAAM,QAAQ,UAAY,KAAK,MAAK;CAC5C;CAxGS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,gBAAA;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,WAAA;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,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,qBAAA;EAAA,UAAA,CAAA,WAAA;EAAA,UAAA;EAAA,UAHjB;EAAgB,UAAA;CAAA,CAAA;;AAGjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAN9B,MAAA;EAAU,MAAA,CAAA;GACP,UAAU;GACV,UAAU;GACV,UAAU;GACV,MAAM,EAAE,OAAO,qBAAoB;EACtC,CAAA"}

package/fesm2022/area8975-ui-pagination.mjs

@@ -0,0 +1,152 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input, model } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroChevronLeft, heroChevronRight } from "@ng-icons/heroicons/outline";
+var UiPaginationComponent = class UiPaginationComponent {
+	page = model(0, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
+	totalPages = input.required(...ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []);
+	isFirstPage = computed(() => this.page() <= 0, ...ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []);
+	isLastPage = computed(() => this.page() >= this.totalPages() - 1, ...ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []);
+	items = computed(() => {
+		const total = this.totalPages();
+		const current = this.page();
+		const items = [];
+		for (let i = 0; i < total; i++) {
+			const isEdge = i === 0 || i === total - 1;
+			const isNearCurrent = Math.abs(i - current) <= 1;
+			const hidesOnePage = i === 1 && current === 3 || i === total - 2 && current === total - 4;
+			if (isEdge || isNearCurrent || hidesOnePage) items.push(i);
+			else if (items.at(-1) !== "ellipsis") items.push("ellipsis");
+		}
+		return items;
+	}, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	pageLabel(page) {
+		const label = `Page ${page + 1}`;
+		return page === this.page() ? `${label}, current page` : label;
+	}
+	goToPage(page) {
+		if (page < 0 || page >= this.totalPages()) return;
+		this.page.set(page);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiPaginationComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiPaginationComponent,
+		isStandalone: true,
+		selector: "ui-pagination",
+		inputs: {
+			page: {
+				classPropertyName: "page",
+				publicName: "page",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalPages: {
+				classPropertyName: "totalPages",
+				publicName: "totalPages",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: { page: "pageChange" },
+		host: {
+			attributes: {
+				"role": "navigation",
+				"aria-label": "Pagination"
+			},
+			classAttribute: "ui-pagination"
+		},
+		providers: [provideIcons({
+			heroChevronLeft,
+			heroChevronRight
+		})],
+		ngImport: i0,
+		template: "<ui-button\n    appearance=\"none\"\n    classes=\"ui-pagination--goto-btn ui-text-body\"\n    [disabled]=\"isFirstPage()\"\n    (click)=\"goToPage(page() - 1)\"\n>\n    <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n    @if (item === 'ellipsis') {\n        <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n    } @else {\n        <ui-button\n            appearance=\"none\"\n            classes=\"ui-pagination--goto-btn ui-text-body\"\n            [class.active]=\"item === page()\"\n            (click)=\"goToPage(item)\"\n        >\n            {{ item + 1 }}\n        </ui-button>\n    }\n}\n\n<ui-button\n    appearance=\"none\"\n    classes=\"ui-pagination--goto-btn ui-text-body\"\n    [disabled]=\"isLastPage()\"\n    (click)=\"goToPage(page() + 1)\"\n>\n    <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
+		styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@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-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiButtonComponent,
+			selector: "ui-button",
+			inputs: [
+				"appearance",
+				"intent",
+				"size",
+				"classes",
+				"type",
+				"ariaLabel",
+				"disabled",
+				"loading"
+			]
+		}, {
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiPaginationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-pagination",
+			imports: [UiButtonComponent, NgIcon],
+			host: {
+				role: "navigation",
+				"aria-label": "Pagination",
+				class: "ui-pagination"
+			},
+			providers: [provideIcons({
+				heroChevronLeft,
+				heroChevronRight
+			})],
+			template: "<ui-button\n    appearance=\"none\"\n    classes=\"ui-pagination--goto-btn ui-text-body\"\n    [disabled]=\"isFirstPage()\"\n    (click)=\"goToPage(page() - 1)\"\n>\n    <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n    @if (item === 'ellipsis') {\n        <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n    } @else {\n        <ui-button\n            appearance=\"none\"\n            classes=\"ui-pagination--goto-btn ui-text-body\"\n            [class.active]=\"item === page()\"\n            (click)=\"goToPage(item)\"\n        >\n            {{ item + 1 }}\n        </ui-button>\n    }\n}\n\n<ui-button\n    appearance=\"none\"\n    classes=\"ui-pagination--goto-btn ui-text-body\"\n    [disabled]=\"isLastPage()\"\n    (click)=\"goToPage(page() + 1)\"\n>\n    <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
+			styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@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-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		page: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "page",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["pageChange"]
+		}],
+		totalPages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalPages",
+				required: true
+			}]
+		}]
+	}
+});
+export { UiPaginationComponent };
+
+//# sourceMappingURL=area8975-ui-pagination.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-pagination.mjs","names":[],"sources":["../../../projects/ui/pagination/pagination.component.ts","../../../projects/ui/pagination/pagination.component.html"],"sourcesContent":["import { Component, computed, input, model } from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeft, heroChevronRight } from '@ng-icons/heroicons/outline';\n\nimport type { PaginationItem } from './pagination.types';\n\n\n@Component({\n    selector: 'ui-pagination',\n    templateUrl: './pagination.component.html',\n    styleUrl: './pagination.component.css',\n    imports: [UiButtonComponent, NgIcon],\n    host: {\n        role: 'navigation',\n        'aria-label': 'Pagination',\n        class: 'ui-pagination'\n    },\n    providers: [provideIcons({ heroChevronLeft, heroChevronRight })]\n})\nexport class UiPaginationComponent {\n    // zero-based, same as the table\n    readonly page = model<number>(0);\n    readonly totalPages = input.required<number>();\n\n    readonly isFirstPage = computed(() => this.page() <= 0);\n    readonly isLastPage = computed(() => this.page() >= this.totalPages() - 1);\n\n    // first, last and the pages either side of the current one, with gaps collapsed\n    readonly items = computed(() => {\n        const total = this.totalPages();\n        const current = this.page();\n        const items: PaginationItem[] = [];\n\n        for (let i = 0; i < total; i++) {\n            const isEdge = i === 0 || i === total - 1;\n            const isNearCurrent = Math.abs(i - current) <= 1;\n\n            // no point hiding a single page behind an ellipsis\n            const hidesOnePage = (i === 1 && current === 3) ||\n                (i === total - 2 && current === total - 4);\n\n            if (isEdge || isNearCurrent || hidesOnePage) {\n                items.push(i);\n            } else if (items.at(-1) !== 'ellipsis') {\n                items.push('ellipsis');\n            }\n        }\n\n        return items;\n    });\n\n    pageLabel(page: number): string {\n        const label = `Page ${page + 1}`;\n\n        return page === this.page() ? `${label}, current page` : label;\n    }\n\n    goToPage(page: number): void {\n        if (page < 0 || page >= this.totalPages()) {\n            return;\n        }\n\n        this.page.set(page);\n    }\n}\n","<ui-button\n    appearance=\"none\"\n    classes=\"ui-pagination--goto-btn ui-text-body\"\n    [disabled]=\"isFirstPage()\"\n    (click)=\"goToPage(page() - 1)\"\n>\n    <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n    @if (item === 'ellipsis') {\n        <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n    } @else {\n        <ui-button\n            appearance=\"none\"\n            classes=\"ui-pagination--goto-btn ui-text-body\"\n            [class.active]=\"item === page()\"\n            (click)=\"goToPage(item)\"\n        >\n            {{ item + 1 }}\n        </ui-button>\n    }\n}\n\n<ui-button\n    appearance=\"none\"\n    classes=\"ui-pagination--goto-btn ui-text-body\"\n    [disabled]=\"isLastPage()\"\n    (click)=\"goToPage(page() + 1)\"\n>\n    <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n"],"mappings":";;;;;AAqBA,IAAa,wBAAb,MAAa,sBAAqB;CAErB,OAAO,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,aAAa,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAErC,cAAc,eAAe,KAAK,KAAI,KAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,aAAa,eAAe,KAAK,KAAI,KAAM,KAAK,WAAU,IAAK,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGjE,QAAQ,eAAc;EAC3B,MAAM,QAAQ,KAAK,WAAU;EAC7B,MAAM,UAAU,KAAK,KAAI;EACzB,MAAM,QAA0B,CAAA;EAEhC,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;GAC5B,MAAM,SAAS,MAAM,KAAK,MAAM,QAAQ;GACxC,MAAM,gBAAgB,KAAK,IAAI,IAAI,OAAO,KAAK;GAG/C,MAAM,eAAgB,MAAM,KAAK,YAAY,KACxC,MAAM,QAAQ,KAAK,YAAY,QAAQ;GAE5C,IAAI,UAAU,iBAAiB,cAC3B,MAAM,KAAK,CAAC;QACT,IAAI,MAAM,GAAG,EAAE,MAAM,YACxB,MAAM,KAAK,UAAU;EAE7B;EAEA,OAAO;CACX,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,UAAU,MAAY;EAClB,MAAM,QAAQ,QAAQ,OAAO;EAE7B,OAAO,SAAS,KAAK,KAAI,IAAK,GAAG,MAAK,kBAAmB;CAC7D;CAEA,SAAS,MAAY;EACjB,IAAI,OAAO,KAAK,QAAQ,KAAK,WAAU,GACnC;EAGJ,KAAK,KAAK,IAAI,IAAI;CACtB;CA5CS,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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,MAAA,aAAA;EAAA,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,cAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,WAFnB,CAAC,aAAa;GAAE;GAAiB;EAAgB,CAAE,CAAC;EAAC,UAAA;EAAA,UCnBpE;EAgCA,QAAA,CAAA,gsCAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDnBc;GAAiB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAM,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;CAAA,CAAA;;AAQ1B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAZjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAe,SAGhB,CAAC,mBAAmB,MAAM;GAAC,MAC9B;IACF,MAAM;IACN,cAAc;IACd,OAAO;GACV;GAAA,WACU,CAAC,aAAa;IAAE;IAAiB;GAAgB,CAAE,CAAC;GAAC,UAAA;GAAA,QAAA,CAAA,gsCAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-private.mjs

@@ -0,0 +1,63 @@
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input } from "@angular/core";
+import { PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, UI_PRIVACY } from "@area8975/ui/format";
+var UiPrivateComponent = class UiPrivateComponent {
+	privacy = inject(UI_PRIVACY);
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	mask = PRIVATE_TEXT_MASK;
+	label = PRIVATE_TEXT_LABEL;
+	masked = computed(() => this.privacy() !== "visible" && !!this.text(), ...ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => ["ui-private", this.masked() && "ui-private--masked"].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiPrivateComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiPrivateComponent,
+		isStandalone: true,
+		selector: "ui-private",
+		inputs: { text: {
+			classPropertyName: "text",
+			publicName: "text",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "generatedClasses()" } },
+		ngImport: i0,
+		template: "@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask }}</span>\n    <span class=\"sr-only\">{{ label }}</span>\n} @else {{{ text() }}}\n",
+		styles: [":host{position:relative}:host(.ui-private--masked){white-space:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiPrivateComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-private",
+			host: { "[class]": "generatedClasses()" },
+			template: "@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask }}</span>\n    <span class=\"sr-only\">{{ label }}</span>\n} @else {{{ text() }}}\n",
+			styles: [":host{position:relative}:host(.ui-private--masked){white-space:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: { text: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "text",
+			required: true
+		}]
+	}] }
+});
+export { UiPrivateComponent };
+
+//# sourceMappingURL=area8975-ui-private.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-private.mjs","names":[],"sources":["../../../projects/ui/private/private.component.ts","../../../projects/ui/private/private.component.html"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\n\nimport { PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, UI_PRIVACY } from '@area8975/ui/format';\n\n\n/**\n * Text that privacy mode masks, e.g. a transaction's description.\n */\n@Component({\n    selector: 'ui-private',\n    templateUrl: './private.component.html',\n    styleUrl: './private.component.css',\n    host: {\n        '[class]': 'generatedClasses()'\n    }\n})\nexport class UiPrivateComponent {\n    private readonly privacy = inject(UI_PRIVACY);\n\n    readonly text = input.required<string | null | undefined>();\n\n    protected readonly mask = PRIVATE_TEXT_MASK;\n    protected readonly label = PRIVATE_TEXT_LABEL;\n\n    protected readonly masked = computed(() => this.privacy() !== 'visible' && !!this.text());\n\n    readonly generatedClasses = computed(() =>\n        [\n            'ui-private',\n            this.masked() && 'ui-private--masked'\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n}\n","@if (masked()) {\n    <span aria-hidden=\"true\">{{ mask }}</span>\n    <span class=\"sr-only\">{{ label }}</span>\n} @else {{{ text() }}}\n"],"mappings":";;;AAgBA,IAAa,qBAAb,MAAa,mBAAkB;CACV,UAAU,OAAO,UAAU;CAEnC,OAAO,MAAM,SAAqC,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAExC,OAAO;CACP,QAAQ;CAER,SAAS,eAAe,KAAK,QAAO,MAAO,aAAa,CAAC,CAAC,KAAK,KAAI,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEhF,mBAAmB,eACxB,CACI,cACA,KAAK,OAAM,KAAM,oBACpB,CAAA,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAChB,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAjBQ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,qBAAA,EAAA;EAAA,UAAA;EAAA,UChB/B;EAIA,QAAA,CAAA,6IAAA;CAAA,CAAA;;ADYa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAR9B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAY,MAGhB,EACF,WAAW,qBACd;GAAA,UAAA;GAAA,QAAA,CAAA,6IAAA;EAAA,CAAA"}