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

package/fesm2022/area8975-ui-progress.mjs

@@ -0,0 +1,307 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+var UiProgressComponent = class UiProgressComponent {
+	value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	intent = input("primary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	shape = input("rounded", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	labelPosition = input("none", ...ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []);
+	labelWith = input((value, max) => `${Math.round(value / max * 100)}%`, ...ngDevMode ? [{ debugName: "labelWith" }] : /* istanbul ignore next */ []);
+	steps = input(null, ...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	segments = input(null, ...ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	isIndeterminate = computed(() => this.value() === null && !this.segments(), ...ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []);
+	total = computed(() => {
+		const segments = this.segments();
+		return segments ? segments.reduce((sum, segment) => sum + segment.value, 0) : this.value() ?? 0;
+	}, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	fillPercent = computed(() => this.clampPercent(this.total() / this.max() * 100), ...ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []);
+	label = computed(() => this.isIndeterminate() ? "" : this.labelWith()(this.total(), this.max()), ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	segmentViews = computed(() => {
+		const segments = this.segments() ?? [];
+		let used = 0;
+		return segments.map((segment) => {
+			const percent = Math.min(this.clampPercent(segment.value / this.max() * 100), 100 - used);
+			used += percent;
+			return {
+				percent,
+				intent: segment.intent ?? this.intent(),
+				label: segment.label ?? this.labelWith()(segment.value, this.max())
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "segmentViews" }] : /* istanbul ignore next */ []);
+	stepStates = computed(() => {
+		const steps = Math.max(1, Math.floor(this.steps() ?? 1));
+		const filled = Math.round(this.fillPercent() / 100 * steps);
+		return Array.from({ length: steps }, (_, index) => index < filled);
+	}, ...ngDevMode ? [{ debugName: "stepStates" }] : /* istanbul ignore next */ []);
+	floatingOffset = computed(() => `clamp(0px, calc(${this.fillPercent()}% - 1.25rem), calc(100% - 2.5rem))`, ...ngDevMode ? [{ debugName: "floatingOffset" }] : /* istanbul ignore next */ []);
+	isVertical = computed(() => this.orientation() === "vertical", ...ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []);
+	rootClasses = computed(() => [
+		"ui-progress",
+		`ui-progress--${this.orientation()}`,
+		`ui-progress--${this.size()}`,
+		`ui-progress--${this.shape()}`,
+		this.labelPosition() === "inside" ? "ui-progress--label-inside" : ""
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []);
+	fillClasses(intent) {
+		return [
+			"ui-progress-fill",
+			`ui-progress-fill--${intent}`,
+			this.isIndeterminate() ? "ui-progress-fill--indeterminate" : ""
+		].filter(Boolean).join(" ");
+	}
+	clampPercent(percent) {
+		return Number.isFinite(percent) ? Math.min(100, Math.max(0, percent)) : 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiProgressComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiProgressComponent,
+		isStandalone: true,
+		selector: "ui-progress",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			intent: {
+				classPropertyName: "intent",
+				publicName: "intent",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shape: {
+				classPropertyName: "shape",
+				publicName: "shape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelPosition: {
+				classPropertyName: "labelPosition",
+				publicName: "labelPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelWith: {
+				classPropertyName: "labelWith",
+				publicName: "labelWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			segments: {
+				classPropertyName: "segments",
+				publicName: "segments",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class.ui-progress-host--vertical": "orientation() === \"vertical\"" } },
+		ngImport: i0,
+		template: "<div [class]=\"rootClasses()\">\n    @if (title() || labelPosition() === 'top') {\n        <div class=\"ui-progress-header\">\n            <span class=\"text-foreground ui-text-body-alt\">{{ title() }}</span>\n\n            @if (labelPosition() === 'top') {\n                <span class=\"text-foreground ui-text-body-alt\">{{ label() }}</span>\n            }\n        </div>\n    }\n\n    @if (labelPosition() === 'floating' && !isIndeterminate() && !isVertical()) {\n        <div class=\"ui-progress-floating-row\" aria-hidden=\"true\">\n            <span\n                class=\"ui-progress-floating ui-text-caption\"\n                [class]=\"'ui-progress-floating--' + intent()\"\n                [style.margin-inline-start]=\"floatingOffset()\"\n            >\n                {{ label() }}\n            </span>\n        </div>\n    }\n\n    <div class=\"ui-progress-row\">\n        <div\n            class=\"ui-progress-track\"\n            [class.ui-progress-track--steps]=\"steps()\"\n            role=\"progressbar\"\n            aria-valuemin=\"0\"\n            [attr.aria-valuemax]=\"max()\"\n            [attr.aria-valuenow]=\"isIndeterminate() ? null : total()\"\n            [attr.aria-valuetext]=\"label() || null\"\n            [attr.aria-label]=\"ariaLabel() || title() || null\"\n        >\n            @if (steps()) {\n                @for (filled of stepStates(); track $index) {\n                    <span\n                        class=\"ui-progress-step\"\n                        [class]=\"filled ? 'ui-progress-fill--' + intent() : ''\"\n                    ></span>\n                }\n            } @else if (segments()) {\n                @for (segment of segmentViews(); track $index) {\n                    <span\n                        [class]=\"fillClasses(segment.intent)\"\n                        [style.width.%]=\"isVertical() ? null : segment.percent\"\n                        [style.height.%]=\"isVertical() ? segment.percent : null\"\n                        [attr.title]=\"segment.label\"\n                    >\n                        @if (labelPosition() === 'inside') {\n                            <span class=\"ui-progress-inside-label ui-text-caption\">{{ segment.label }}</span>\n                        }\n                    </span>\n                }\n            } @else {\n                <span\n                    [class]=\"fillClasses(intent())\"\n                    [style.width.%]=\"isVertical() || isIndeterminate() ? null : fillPercent()\"\n                    [style.height.%]=\"isVertical() && !isIndeterminate() ? fillPercent() : null\"\n                >\n                    @if (labelPosition() === 'inside' && !isIndeterminate()) {\n                        <span class=\"ui-progress-inside-label ui-text-caption\">{{ label() }}</span>\n                    }\n                </span>\n            }\n        </div>\n\n        @if (labelPosition() === 'end' && !isIndeterminate()) {\n            <span class=\"ui-progress-end text-foreground ui-text-body-alt\">{{ label() }}</span>\n        }\n    </div>\n</div>\n",
+		styles: ["@layer properties;:host{display:block}:host(.ui-progress-host--vertical){display:inline-flex;min-height:calc(var(--spacing, .25rem) * 32);flex-direction:column}.ui-progress{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress--vertical{flex:1;align-items:center}.ui-progress-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress--vertical .ui-progress-row{flex:1;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress-end{min-width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;text-align:end;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-progress-track{position:relative;display:flex;width:100%;overflow:hidden;background-color:var(--surface-1)}.ui-progress--vertical .ui-progress-track{width:auto;flex:1;flex-direction:column;justify-content:flex-end}.ui-progress--sm .ui-progress-track{height:var(--spacing, .25rem)}.ui-progress--md .ui-progress-track{height:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--lg .ui-progress-track{height:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--xl .ui-progress-track{height:calc(var(--spacing, .25rem) * 4)}.ui-progress--vertical.ui-progress--sm .ui-progress-track{height:auto;width:var(--spacing, .25rem)}.ui-progress--vertical.ui-progress--md .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--vertical.ui-progress--lg .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--vertical.ui-progress--xl .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 4)}.ui-progress--label-inside .ui-progress-track{min-height:calc(var(--spacing, .25rem) * 4)}.ui-progress-fill{display:flex;flex-direction:column;justify-content:center;overflow:hidden;white-space:nowrap;transition-property:width,height;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-inside-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 1.5);text-align:center;color:var(--color-white, #fff)}.ui-progress--rounded .ui-progress-track,.ui-progress--rounded .ui-progress-fill:only-child,.ui-progress--rounded .ui-progress-step,.ui-progress--straight .ui-progress-fill,.ui-progress--straight .ui-progress-step{border-radius:var(--radius-full, calc(infinity * 1px))}.ui-progress--straight .ui-progress-fill:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-progress--straight .ui-progress-fill:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-progress-track--steps{column-gap:var(--spacing, .25rem);background-color:transparent}.ui-progress--vertical .ui-progress-track--steps{flex-direction:column-reverse;row-gap:var(--spacing, .25rem)}.ui-progress-step{flex:1;background-color:var(--surface-1)}.ui-progress-fill--primary{background-color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-fill--secondary{background-color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-fill--success{background-color:var(--color-success-600, var(--color-teal-600))}.ui-progress-fill--warning{background-color:var(--color-warning-500, var(--color-yellow-500))}.ui-progress-fill--danger{background-color:var(--color-danger-600, var(--color-red-600))}.ui-progress-floating-row{display:flex}.ui-progress-floating{display:inline-block;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);transition-property:margin;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-floating--primary{border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-floating--secondary{border-color:var(--color-secondary-200, var(--color-gray-200));background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-floating--success{border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-600, var(--color-teal-600))}.ui-progress-floating--warning{border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-600, var(--color-yellow-600))}.ui-progress-floating--danger{border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-600, var(--color-red-600))}.ui-progress-fill--indeterminate{width:40%}.ui-progress--vertical .ui-progress-fill--indeterminate{height:40%;width:auto}@media(prefers-reduced-motion:no-preference){.ui-progress-fill--indeterminate{animation:ui-progress-slide 1.4s ease-in-out infinite}.ui-progress--vertical .ui-progress-fill--indeterminate{animation-name:ui-progress-slide-up}}@keyframes ui-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes ui-progress-slide-up{0%{transform:translateY(100%)}to{transform:translateY(-250%)}}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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;--tw-duration: initial;--tw-border-style: solid;--tw-font-weight: 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: UiProgressComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-progress",
+			host: { "[class.ui-progress-host--vertical]": "orientation() === \"vertical\"" },
+			template: "<div [class]=\"rootClasses()\">\n    @if (title() || labelPosition() === 'top') {\n        <div class=\"ui-progress-header\">\n            <span class=\"text-foreground ui-text-body-alt\">{{ title() }}</span>\n\n            @if (labelPosition() === 'top') {\n                <span class=\"text-foreground ui-text-body-alt\">{{ label() }}</span>\n            }\n        </div>\n    }\n\n    @if (labelPosition() === 'floating' && !isIndeterminate() && !isVertical()) {\n        <div class=\"ui-progress-floating-row\" aria-hidden=\"true\">\n            <span\n                class=\"ui-progress-floating ui-text-caption\"\n                [class]=\"'ui-progress-floating--' + intent()\"\n                [style.margin-inline-start]=\"floatingOffset()\"\n            >\n                {{ label() }}\n            </span>\n        </div>\n    }\n\n    <div class=\"ui-progress-row\">\n        <div\n            class=\"ui-progress-track\"\n            [class.ui-progress-track--steps]=\"steps()\"\n            role=\"progressbar\"\n            aria-valuemin=\"0\"\n            [attr.aria-valuemax]=\"max()\"\n            [attr.aria-valuenow]=\"isIndeterminate() ? null : total()\"\n            [attr.aria-valuetext]=\"label() || null\"\n            [attr.aria-label]=\"ariaLabel() || title() || null\"\n        >\n            @if (steps()) {\n                @for (filled of stepStates(); track $index) {\n                    <span\n                        class=\"ui-progress-step\"\n                        [class]=\"filled ? 'ui-progress-fill--' + intent() : ''\"\n                    ></span>\n                }\n            } @else if (segments()) {\n                @for (segment of segmentViews(); track $index) {\n                    <span\n                        [class]=\"fillClasses(segment.intent)\"\n                        [style.width.%]=\"isVertical() ? null : segment.percent\"\n                        [style.height.%]=\"isVertical() ? segment.percent : null\"\n                        [attr.title]=\"segment.label\"\n                    >\n                        @if (labelPosition() === 'inside') {\n                            <span class=\"ui-progress-inside-label ui-text-caption\">{{ segment.label }}</span>\n                        }\n                    </span>\n                }\n            } @else {\n                <span\n                    [class]=\"fillClasses(intent())\"\n                    [style.width.%]=\"isVertical() || isIndeterminate() ? null : fillPercent()\"\n                    [style.height.%]=\"isVertical() && !isIndeterminate() ? fillPercent() : null\"\n                >\n                    @if (labelPosition() === 'inside' && !isIndeterminate()) {\n                        <span class=\"ui-progress-inside-label ui-text-caption\">{{ label() }}</span>\n                    }\n                </span>\n            }\n        </div>\n\n        @if (labelPosition() === 'end' && !isIndeterminate()) {\n            <span class=\"ui-progress-end text-foreground ui-text-body-alt\">{{ label() }}</span>\n        }\n    </div>\n</div>\n",
+			styles: ["@layer properties;:host{display:block}:host(.ui-progress-host--vertical){display:inline-flex;min-height:calc(var(--spacing, .25rem) * 32);flex-direction:column}.ui-progress{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress--vertical{flex:1;align-items:center}.ui-progress-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress--vertical .ui-progress-row{flex:1;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress-end{min-width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;text-align:end;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-progress-track{position:relative;display:flex;width:100%;overflow:hidden;background-color:var(--surface-1)}.ui-progress--vertical .ui-progress-track{width:auto;flex:1;flex-direction:column;justify-content:flex-end}.ui-progress--sm .ui-progress-track{height:var(--spacing, .25rem)}.ui-progress--md .ui-progress-track{height:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--lg .ui-progress-track{height:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--xl .ui-progress-track{height:calc(var(--spacing, .25rem) * 4)}.ui-progress--vertical.ui-progress--sm .ui-progress-track{height:auto;width:var(--spacing, .25rem)}.ui-progress--vertical.ui-progress--md .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--vertical.ui-progress--lg .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--vertical.ui-progress--xl .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 4)}.ui-progress--label-inside .ui-progress-track{min-height:calc(var(--spacing, .25rem) * 4)}.ui-progress-fill{display:flex;flex-direction:column;justify-content:center;overflow:hidden;white-space:nowrap;transition-property:width,height;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-inside-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 1.5);text-align:center;color:var(--color-white, #fff)}.ui-progress--rounded .ui-progress-track,.ui-progress--rounded .ui-progress-fill:only-child,.ui-progress--rounded .ui-progress-step,.ui-progress--straight .ui-progress-fill,.ui-progress--straight .ui-progress-step{border-radius:var(--radius-full, calc(infinity * 1px))}.ui-progress--straight .ui-progress-fill:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-progress--straight .ui-progress-fill:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-progress-track--steps{column-gap:var(--spacing, .25rem);background-color:transparent}.ui-progress--vertical .ui-progress-track--steps{flex-direction:column-reverse;row-gap:var(--spacing, .25rem)}.ui-progress-step{flex:1;background-color:var(--surface-1)}.ui-progress-fill--primary{background-color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-fill--secondary{background-color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-fill--success{background-color:var(--color-success-600, var(--color-teal-600))}.ui-progress-fill--warning{background-color:var(--color-warning-500, var(--color-yellow-500))}.ui-progress-fill--danger{background-color:var(--color-danger-600, var(--color-red-600))}.ui-progress-floating-row{display:flex}.ui-progress-floating{display:inline-block;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);transition-property:margin;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-floating--primary{border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-floating--secondary{border-color:var(--color-secondary-200, var(--color-gray-200));background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-floating--success{border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-600, var(--color-teal-600))}.ui-progress-floating--warning{border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-600, var(--color-yellow-600))}.ui-progress-floating--danger{border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-600, var(--color-red-600))}.ui-progress-fill--indeterminate{width:40%}.ui-progress--vertical .ui-progress-fill--indeterminate{height:40%;width:auto}@media(prefers-reduced-motion:no-preference){.ui-progress-fill--indeterminate{animation:ui-progress-slide 1.4s ease-in-out infinite}.ui-progress--vertical .ui-progress-fill--indeterminate{animation-name:ui-progress-slide-up}}@keyframes ui-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes ui-progress-slide-up{0%{transform:translateY(100%)}to{transform:translateY(-250%)}}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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;--tw-duration: initial;--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		intent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "intent",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		shape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shape",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		labelPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelPosition",
+				required: false
+			}]
+		}],
+		labelWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelWith",
+				required: false
+			}]
+		}],
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: false
+			}]
+		}],
+		segments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "segments",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+const ProgressIntents = [
+	"primary",
+	"secondary",
+	"success",
+	"warning",
+	"danger"
+];
+const ProgressSizes = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const ProgressLabelPositions = [
+	"none",
+	"inside",
+	"end",
+	"top",
+	"floating"
+];
+const ProgressShapes = [
+	"rounded",
+	"square",
+	"straight"
+];
+const ProgressOrientations = ["horizontal", "vertical"];
+export { ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, UiProgressComponent };
+
+//# sourceMappingURL=area8975-ui-progress.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-progress.mjs","names":[],"sources":["../../../projects/ui/progress/progress.component.ts","../../../projects/ui/progress/progress.component.html","../../../projects/ui/progress/progress.types.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport type {\n    ProgressIntent,\n    ProgressLabelPosition,\n    ProgressOrientation,\n    ProgressSegment,\n    ProgressShape,\n    ProgressSize\n} from './progress.types';\n\n\ninterface SegmentView {\n    percent: number;\n    intent: ProgressIntent;\n    label: string;\n}\n\n/**\n * A progress bar. Leave `value` null for work of unknown length, a value over\n * `max` fills the bar but the label still shows the real amount.\n */\n@Component({\n    selector: 'ui-progress',\n    templateUrl: './progress.component.html',\n    styleUrl: './progress.component.css',\n    host: {\n        '[class.ui-progress-host--vertical]': 'orientation() === \"vertical\"'\n    }\n})\nexport class UiProgressComponent {\n    readonly value = input<number | null>(0);\n    readonly max = input<number>(100);\n\n    readonly intent = input<ProgressIntent>('primary');\n    readonly size = input<ProgressSize>('md');\n    readonly shape = input<ProgressShape>('rounded');\n    readonly orientation = input<ProgressOrientation>('horizontal');\n\n    readonly title = input<string>('');\n    readonly labelPosition = input<ProgressLabelPosition>('none');\n    readonly labelWith = input<(value: number, max: number) => string>(\n        (value, max) => `${Math.round(value / max * 100)}%`\n    );\n\n    /** Splits the bar into this many blocks. */\n    readonly steps = input<number | null>(null);\n\n    /** Several fills stacked in one track, each with its own colour. */\n    readonly segments = input<ProgressSegment[] | null>(null);\n\n    /** Needed when there's no visible title. */\n    readonly ariaLabel = input<string>('');\n\n    protected readonly isIndeterminate = computed(() => this.value() === null && !this.segments());\n\n    protected readonly total = computed(() => {\n        const segments = this.segments();\n\n        return segments\n            ? segments.reduce((sum, segment) => sum + segment.value, 0)\n            : this.value() ?? 0;\n    });\n\n    /** 0 to 100, what the bar actually draws. */\n    protected readonly fillPercent = computed(() =>\n        this.clampPercent(this.total() / this.max() * 100)\n    );\n\n    protected readonly label = computed(() =>\n        this.isIndeterminate() ? '' : this.labelWith()(this.total(), this.max())\n    );\n\n    protected readonly segmentViews = computed<SegmentView[]>(() => {\n        const segments = this.segments() ?? [];\n        let used = 0;\n\n        // later segments get squeezed once the track is full\n        return segments.map(segment => {\n            const percent = Math.min(this.clampPercent(segment.value / this.max() * 100), 100 - used);\n\n            used += percent;\n\n            return {\n                percent,\n                intent: segment.intent ?? this.intent(),\n                label: segment.label ?? this.labelWith()(segment.value, this.max())\n            };\n        });\n    });\n\n    protected readonly stepStates = computed(() => {\n        const steps = Math.max(1, Math.floor(this.steps() ?? 1));\n        const filled = Math.round(this.fillPercent() / 100 * steps);\n\n        return Array.from({ length: steps }, (_, index) => index < filled);\n    });\n\n    // keeps the floating label over the end of the fill without spilling off either side\n    protected readonly floatingOffset = computed(() =>\n        `clamp(0px, calc(${this.fillPercent()}% - 1.25rem), calc(100% - 2.5rem))`\n    );\n\n    protected readonly isVertical = computed(() => this.orientation() === 'vertical');\n\n    protected readonly rootClasses = computed(() =>\n        [\n            'ui-progress',\n            `ui-progress--${this.orientation()}`,\n            `ui-progress--${this.size()}`,\n            `ui-progress--${this.shape()}`,\n            this.labelPosition() === 'inside' ? 'ui-progress--label-inside' : ''\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n\n    protected fillClasses(intent: ProgressIntent): string {\n        return [\n            'ui-progress-fill',\n            `ui-progress-fill--${intent}`,\n            this.isIndeterminate() ? 'ui-progress-fill--indeterminate' : ''\n        ]\n            .filter(Boolean)\n            .join(' ');\n    }\n\n    private clampPercent(percent: number): number {\n        return Number.isFinite(percent) ? Math.min(100, Math.max(0, percent)) : 0;\n    }\n}\n","<div [class]=\"rootClasses()\">\n    @if (title() || labelPosition() === 'top') {\n        <div class=\"ui-progress-header\">\n            <span class=\"text-foreground ui-text-body-alt\">{{ title() }}</span>\n\n            @if (labelPosition() === 'top') {\n                <span class=\"text-foreground ui-text-body-alt\">{{ label() }}</span>\n            }\n        </div>\n    }\n\n    @if (labelPosition() === 'floating' && !isIndeterminate() && !isVertical()) {\n        <div class=\"ui-progress-floating-row\" aria-hidden=\"true\">\n            <span\n                class=\"ui-progress-floating ui-text-caption\"\n                [class]=\"'ui-progress-floating--' + intent()\"\n                [style.margin-inline-start]=\"floatingOffset()\"\n            >\n                {{ label() }}\n            </span>\n        </div>\n    }\n\n    <div class=\"ui-progress-row\">\n        <div\n            class=\"ui-progress-track\"\n            [class.ui-progress-track--steps]=\"steps()\"\n            role=\"progressbar\"\n            aria-valuemin=\"0\"\n            [attr.aria-valuemax]=\"max()\"\n            [attr.aria-valuenow]=\"isIndeterminate() ? null : total()\"\n            [attr.aria-valuetext]=\"label() || null\"\n            [attr.aria-label]=\"ariaLabel() || title() || null\"\n        >\n            @if (steps()) {\n                @for (filled of stepStates(); track $index) {\n                    <span\n                        class=\"ui-progress-step\"\n                        [class]=\"filled ? 'ui-progress-fill--' + intent() : ''\"\n                    ></span>\n                }\n            } @else if (segments()) {\n                @for (segment of segmentViews(); track $index) {\n                    <span\n                        [class]=\"fillClasses(segment.intent)\"\n                        [style.width.%]=\"isVertical() ? null : segment.percent\"\n                        [style.height.%]=\"isVertical() ? segment.percent : null\"\n                        [attr.title]=\"segment.label\"\n                    >\n                        @if (labelPosition() === 'inside') {\n                            <span class=\"ui-progress-inside-label ui-text-caption\">{{ segment.label }}</span>\n                        }\n                    </span>\n                }\n            } @else {\n                <span\n                    [class]=\"fillClasses(intent())\"\n                    [style.width.%]=\"isVertical() || isIndeterminate() ? null : fillPercent()\"\n                    [style.height.%]=\"isVertical() && !isIndeterminate() ? fillPercent() : null\"\n                >\n                    @if (labelPosition() === 'inside' && !isIndeterminate()) {\n                        <span class=\"ui-progress-inside-label ui-text-caption\">{{ label() }}</span>\n                    }\n                </span>\n            }\n        </div>\n\n        @if (labelPosition() === 'end' && !isIndeterminate()) {\n            <span class=\"ui-progress-end text-foreground ui-text-body-alt\">{{ label() }}</span>\n        }\n    </div>\n</div>\n","/** Same names as badges, so a status reads the same wherever it shows. */\nexport const ProgressIntents = [\n    'primary',\n    'secondary',\n    'success',\n    'warning',\n    'danger'\n] as const;\n\n/** @see {@link ProgressIntents} */\nexport type ProgressIntent = typeof ProgressIntents[number];\n\n/** Track thickness, md matches Preline's default and xl fits a label inside. */\nexport const ProgressSizes = ['sm', 'md', 'lg', 'xl'] as const;\n\n/** @see {@link ProgressSizes} */\nexport type ProgressSize = typeof ProgressSizes[number];\n\n/** Where the value label goes, if anywhere. */\nexport const ProgressLabelPositions = ['none', 'inside', 'end', 'top', 'floating'] as const;\n\n/** @see {@link ProgressLabelPositions} */\nexport type ProgressLabelPosition = typeof ProgressLabelPositions[number];\n\n/** rounded: both ends round, square: no rounding, straight: square track with a round fill. */\nexport const ProgressShapes = ['rounded', 'square', 'straight'] as const;\n\n/** @see {@link ProgressShapes} */\nexport type ProgressShape = typeof ProgressShapes[number];\n\nexport const ProgressOrientations = ['horizontal', 'vertical'] as const;\n\n/** @see {@link ProgressOrientations} */\nexport type ProgressOrientation = typeof ProgressOrientations[number];\n\n/** One part of a stacked bar, e.g. spending in one category. */\nexport interface ProgressSegment {\n    value: number;\n    intent?: ProgressIntent;\n    label?: string;\n}\n"],"mappings":";;AA8BA,IAAa,sBAAb,MAAa,oBAAmB;CACnB,QAAQ,MAAqB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,MAAM,MAAc,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAExB,SAAS,MAAsB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,OAAO,MAAoB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,QAAQ,MAAqB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,cAAc,MAA2B,cAAa,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEtD,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,gBAAgB,MAA6B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CACpD,YAAY,OAChB,OAAO,QAAQ,GAAG,KAAK,MAAM,QAAQ,MAAM,GAAG,EAAC,IACnD,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGQ,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGlC,WAAW,MAAgC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhD,YAAY,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEnB,kBAAkB,eAAe,KAAK,MAAK,MAAO,QAAQ,CAAC,KAAK,SAAQ,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAE3E,QAAQ,eAAc;EACrC,MAAM,WAAW,KAAK,SAAQ;EAE9B,OAAO,WACD,SAAS,QAAQ,KAAK,YAAY,MAAM,QAAQ,OAAO,CAAC,IACxD,KAAK,MAAK,KAAM;CAC1B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,cAAc,eAC7B,KAAK,aAAa,KAAK,MAAK,IAAK,KAAK,IAAG,IAAK,GAAG,GACpD,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,QAAQ,eACvB,KAAK,gBAAe,IAAK,KAAK,KAAK,UAAS,CAAE,CAAC,KAAK,MAAK,GAAI,KAAK,IAAG,CAAE,GAC1E,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,eAAe,eAA6B;EAC3D,MAAM,WAAW,KAAK,SAAQ,KAAM,CAAA;EACpC,IAAI,OAAO;EAGX,OAAO,SAAS,KAAI,YAAU;GAC1B,MAAM,UAAU,KAAK,IAAI,KAAK,aAAa,QAAQ,QAAQ,KAAK,IAAG,IAAK,GAAG,GAAG,MAAM,IAAI;GAExF,QAAQ;GAER,OAAO;IACH;IACA,QAAQ,QAAQ,UAAU,KAAK,OAAM;IACrC,OAAO,QAAQ,SAAS,KAAK,UAAS,CAAE,CAAC,QAAQ,OAAO,KAAK,IAAG,CAAE;GACrE;EACL,CAAC;CACL,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,aAAa,eAAc;EAC1C,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,MAAK,KAAM,CAAC,CAAC;EACvD,MAAM,SAAS,KAAK,MAAM,KAAK,YAAW,IAAK,MAAM,KAAK;EAE1D,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAK,IAAK,GAAG,UAAU,QAAQ,MAAM;CACrE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,iBAAiB,eAChC,mBAAmB,KAAK,YAAW,EAAE,qCACxC,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,aAAa,eAAe,KAAK,YAAW,MAAO,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE9D,cAAc,eAC7B;EACI;EACA,gBAAgB,KAAK,YAAW;EAChC,gBAAgB,KAAK,KAAI;EACzB,gBAAgB,KAAK,MAAK;EAC1B,KAAK,cAAa,MAAO,WAAW,8BAA8B;CACrE,CAAA,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAChB,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAES,YAAY,QAAsB;EACxC,OAAO;GACH;GACA,qBAAqB;GACrB,KAAK,gBAAe,IAAK,oCAAoC;EAChE,CAAA,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACjB;CAEQ,aAAa,SAAe;EAChC,OAAO,OAAO,SAAS,OAAO,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI;CAC5E;CAnGS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;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,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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,oCAAA,iCAAA,EAAA;EAAA,UAAA;EAAA,UC9BhC;EAwEA,QAAA,CAAA,s5NAAA;CAAA,CAAA;;AD1Ca,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAR/B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAa,MAGjB,EACF,sCAAsC,iCACzC;GAAA,UAAA;GAAA,QAAA,CAAA,s5NAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AE3BL,MAAa,kBAAkB;CAC3B;CACA;CACA;CACA;CACA;AACM;AAMV,MAAa,gBAAgB;CAAC;CAAM;CAAM;CAAM;AAAI;AAMpD,MAAa,yBAAyB;CAAC;CAAQ;CAAU;CAAO;CAAO;AAAU;AAMjF,MAAa,iBAAiB;CAAC;CAAW;CAAU;AAAU;AAK9D,MAAa,uBAAuB,CAAC,cAAc,UAAU"}

package/fesm2022/area8975-ui-radio.mjs

@@ -0,0 +1,199 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, model } from "@angular/core";
+var UiRadioComponent = class UiRadioComponent {
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	option = input.required(...ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	validationState = model(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
+	compareWith = input((a, b) => a === b, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+	checked = computed(() => this.compareWith()(this.value(), this.option()), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	select() {
+		this.value.set(this.option());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiRadioComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiRadioComponent,
+		isStandalone: true,
+		selector: "ui-radio",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			option: {
+				classPropertyName: "option",
+				publicName: "option",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			validationState: {
+				classPropertyName: "validationState",
+				publicName: "validationState",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compareWith: {
+				classPropertyName: "compareWith",
+				publicName: "compareWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			validationState: "validationStateChange"
+		},
+		host: { properties: {
+			"attr.id": "null",
+			"attr.name": "null"
+		} },
+		ngImport: i0,
+		template: "<input\n    type=\"radio\"\n    class=\"not-checked:bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"select()\"\n/>\n",
+		styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiRadioComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-radio",
+			host: {
+				"[attr.id]": "null",
+				"[attr.name]": "null"
+			},
+			template: "<input\n    type=\"radio\"\n    class=\"not-checked:bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"select()\"\n/>\n",
+			styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		option: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "option",
+				required: true
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		validationState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationState",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["validationStateChange"]
+		}],
+		compareWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compareWith",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiRadioComponent };
+
+//# sourceMappingURL=area8975-ui-radio.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-radio.mjs","names":[],"sources":["../../../projects/ui/radio/radio.component.ts","../../../projects/ui/radio/radio.component.html"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    input,\n    model\n} from '@angular/core';\n\nimport { InputValidation } from '@area8975/ui/input';\n\n\n@Component({\n    selector: 'ui-radio',\n    templateUrl: './radio.component.html',\n    styleUrl: './radio.component.css',\n    // unbind id and name attrs to not cause conflict with the native input\n    host: { '[attr.id]': 'null', '[attr.name]': 'null' }\n})\nexport class UiRadioComponent<ValueType = unknown> {\n    readonly value = model.required<ValueType>();\n    readonly option = input.required<ValueType>();\n\n    readonly id = input<string>('');\n    readonly name = input<string>('');\n\n    readonly required = input(false, { transform: booleanAttribute });\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /** true/false shows valid/invalid styling. null means not validated yet. */\n    readonly validationState = model<InputValidation>(null);\n\n    readonly compareWith = input<(a: ValueType, b: ValueType) => boolean>(\n        (a, b) => a === b\n    );\n\n    readonly checked = computed(() =>\n        this.compareWith()(this.value(), this.option())\n    );\n\n    select(): void {\n        this.value.set(this.option());\n    }\n}\n","<input\n    type=\"radio\"\n    class=\"not-checked:bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"select()\"\n/>\n"],"mappings":";;AAkBA,IAAa,mBAAb,MAAa,iBAAgB;CAChB,QAAQ,MAAM,SAAqB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,SAAS,MAAM,SAAqB,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEpC,KAAK,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,KAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,OAAO,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAExB,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGrD,kBAAkB,MAAuB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAE9C,cAAc,OAClB,GAAG,MAAM,MAAM,GACnB,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,UAAU,eACf,KAAK,YAAW,CAAE,CAAC,KAAK,MAAK,GAAI,KAAK,OAAM,CAAE,GACjD,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAED,SAAM;EACF,KAAK,MAAM,IAAI,KAAK,OAAM,CAAE;CAChC;CAvBS,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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,IAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;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,UAAA;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,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,OAAA;GAAA,iBAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,WAAA;GAAA,aAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UClB7B;EASA,QAAA,CAAA,iGAAA;CAAA,CAAA;;ADSa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAP5B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAU,MAId;IAAE,aAAa;IAAQ,eAAe;GAAM;GAAE,UAAA;GAAA,QAAA,CAAA,iGAAA;EAAA,CAAA"}