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

package/fesm2022/area8975-ui-stat.mjs

@@ -0,0 +1,55 @@
+import * as i0 from "@angular/core";
+import { Component, input } from "@angular/core";
+var UiStatComponent = class UiStatComponent {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiStatComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiStatComponent,
+		isStandalone: true,
+		selector: "ui-stat",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: { classAttribute: "block min-w-0" },
+		ngImport: i0,
+		template: "<dl>\n    <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n    <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n        <span class=\"font-semibold text-foreground ui-text-h3\">\n            <ng-content />\n        </span>\n        <ng-content select=\"[stat-change]\" />\n    </dd>\n    <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiStatComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-stat",
+			host: { class: "block min-w-0" },
+			template: "<dl>\n    <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n    <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n        <span class=\"font-semibold text-foreground ui-text-h3\">\n            <ng-content />\n        </span>\n        <ng-content select=\"[stat-change]\" />\n    </dd>\n    <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: true
+		}]
+	}] }
+});
+export { UiStatComponent };
+
+//# sourceMappingURL=area8975-ui-stat.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-stat.mjs","names":[],"sources":["../../../projects/ui/stat/stat.component.ts","../../../projects/ui/stat/stat.component.html"],"sourcesContent":["import { Component, input } from '@angular/core';\n\n\n/** Each stat is its own `dl`, so wrap a row of them in a plain div. */\n@Component({\n    selector: 'ui-stat',\n    templateUrl: './stat.component.html',\n    host: { class: 'block min-w-0' }\n})\nexport class UiStatComponent {\n    readonly label = input.required<string>();\n}\n","<dl>\n    <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n    <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n        <span class=\"font-semibold text-foreground ui-text-h3\">\n            <ng-content />\n        </span>\n        <ng-content select=\"[stat-change]\" />\n    </dd>\n    <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"],"mappings":";;AASA,IAAa,kBAAb,MAAa,gBAAe;CACf,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CADhC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,OAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,gBAAA,gBAAA;EAAA,UAAA;EAAA,UCT5B;CAUA,CAAA;;ADDa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAL3B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAS,MAEb,EAAE,OAAO,gBAAe;GAAE,UAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-switch.mjs

@@ -0,0 +1,132 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, input, model } from "@angular/core";
+import { UiCheckboxComponent } from "@area8975/ui/checkbox";
+var UiSwitchComponent = class UiSwitchComponent {
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiSwitchComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiSwitchComponent,
+		isStandalone: true,
+		selector: "ui-switch",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				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
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: { "attr.id": "null" } },
+		ngImport: i0,
+		template: "<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n    <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n        <!--\n            reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n            react to value() directly instead of peer-checked, since peer-* relies on the\n            input and the styled element being real DOM siblings, which breaks once the\n            input is nested inside ui-checkbox's own host element\n        -->\n        <ui-checkbox\n            [(value)]=\"value\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [name]=\"name()\"\n            classes=\"sr-only\"\n        />\n\n        <span\n            class=\"w-9 h-5 rounded-full transition-colors\"\n            [class.bg-primary-600]=\"value()\"\n            [class.bg-surface-1]=\"!value()\"\n        ></span>\n\n        <span\n            class=\"absolute left-0.5 size-4 rounded-full bg-white shadow transition-transform\"\n            [class.translate-x-4]=\"value()\"\n        ></span>\n    </span>\n\n    <ng-content />\n</label>\n",
+		dependencies: [{
+			kind: "component",
+			type: UiCheckboxComponent,
+			selector: "ui-checkbox",
+			inputs: [
+				"value",
+				"id",
+				"name",
+				"required",
+				"disabled",
+				"indeterminate",
+				"validationState",
+				"classes"
+			],
+			outputs: ["valueChange", "validationStateChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiSwitchComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-switch",
+			imports: [UiCheckboxComponent],
+			host: { "[attr.id]": "null" },
+			template: "<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n    <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n        <!--\n            reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n            react to value() directly instead of peer-checked, since peer-* relies on the\n            input and the styled element being real DOM siblings, which breaks once the\n            input is nested inside ui-checkbox's own host element\n        -->\n        <ui-checkbox\n            [(value)]=\"value\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [name]=\"name()\"\n            classes=\"sr-only\"\n        />\n\n        <span\n            class=\"w-9 h-5 rounded-full transition-colors\"\n            [class.bg-primary-600]=\"value()\"\n            [class.bg-surface-1]=\"!value()\"\n        ></span>\n\n        <span\n            class=\"absolute left-0.5 size-4 rounded-full bg-white shadow transition-transform\"\n            [class.translate-x-4]=\"value()\"\n        ></span>\n    </span>\n\n    <ng-content />\n</label>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiSwitchComponent };
+
+//# sourceMappingURL=area8975-ui-switch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-switch.mjs","names":[],"sources":["../../../projects/ui/switch/switch.component.ts","../../../projects/ui/switch/switch.component.html"],"sourcesContent":["import { booleanAttribute, Component, input, model } from '@angular/core';\n\nimport { UiCheckboxComponent } from '@area8975/ui/checkbox';\n\n\n// restyles ui-checkbox into a track-and-thumb switch, same behaviour underneath\n@Component({\n    selector: 'ui-switch',\n    templateUrl: './switch.component.html',\n    imports: [UiCheckboxComponent],\n    host: { '[attr.id]': 'null' }\n})\nexport class UiSwitchComponent {\n    readonly value = model.required<boolean>();\n\n    readonly id = input<string>('');\n    readonly name = input<string>('');\n    readonly disabled = input(false, { transform: booleanAttribute });\n}\n","<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n    <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n        <!--\n            reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n            react to value() directly instead of peer-checked, since peer-* relies on the\n            input and the styled element being real DOM siblings, which breaks once the\n            input is nested inside ui-checkbox's own host element\n        -->\n        <ui-checkbox\n            [(value)]=\"value\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [name]=\"name()\"\n            classes=\"sr-only\"\n        />\n\n        <span\n            class=\"w-9 h-5 rounded-full transition-colors\"\n            [class.bg-primary-600]=\"value()\"\n            [class.bg-surface-1]=\"!value()\"\n        ></span>\n\n        <span\n            class=\"absolute left-0.5 size-4 rounded-full bg-white shadow transition-transform\"\n            [class.translate-x-4]=\"value()\"\n        ></span>\n    </span>\n\n    <ng-content />\n</label>\n"],"mappings":";;;AAYA,IAAa,oBAAb,MAAa,kBAAiB;CACjB,QAAQ,MAAM,SAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjC,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;CACxB,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CALrD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;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;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,MAAA,EAAA,YAAA,EAAA,WAAA,OAAA,EAAA;EAAA,UAAA;EAAA,UCZ9B;EA8BA,cAAA,CAAA;GAAA,MAAA;GAAA,MDrBc;GAAmB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA,CAAA,eAAA,uBAAA;EAAA,CAAA;CAAA,CAAA;;AAGpB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAN7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAW,SAEZ,CAAC,mBAAmB;GAAC,MACxB,EAAE,aAAa,OAAM;GAAE,UAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-tab.mjs

@@ -0,0 +1,217 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, Directive, booleanAttribute, computed, contentChild, contentChildren, effect, input, model, signal } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+var UiTabDirective = class UiTabDirective {
+	label = input.required({
+		...ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {},
+		alias: "uiTab"
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	active = model(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTabDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiTabDirective,
+		isStandalone: true,
+		selector: "[uiTab]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "uiTab",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { active: "activeChange" },
+		host: { properties: { "hidden": "!active()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTabDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTab]",
+			host: { "[hidden]": "!active()" }
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiTab",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeChange"]
+		}]
+	}
+});
+var UiTabComponent = class UiTabComponent {
+	tabs = contentChildren(UiTabDirective, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	selectedIndex = signal(0, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
+	actions = contentChild("actions", ...ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []);
+	appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	generatedButtonClasses = computed(() => [`ui-tab-button--${this.appearance()}`, "font-medium"].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedButtonClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const tabs = this.tabs();
+			if (!tabs.length || tabs.some((tab) => tab.active())) return;
+			tabs[0].active.set(true);
+		});
+	}
+	select(index) {
+		const tabs = this.tabs();
+		const target = tabs[index];
+		if (!target || target.disabled()) return;
+		tabs.forEach((tab, i) => tab.active.set(i === index));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTabComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiTabComponent,
+		isStandalone: true,
+		selector: "ui-tab",
+		inputs: { appearance: {
+			classPropertyName: "appearance",
+			publicName: "appearance",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "block" },
+		queries: [{
+			propertyName: "tabs",
+			predicate: UiTabDirective,
+			isSignal: true
+		}, {
+			propertyName: "actions",
+			first: true,
+			predicate: ["actions"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"flex\" role=\"tablist\">\n    <div class=\"flex justify-between w-full\">\n        <nav class=\"flex gap-x-2.5\" role=\"tablist\">\n            @for (tab of tabs(); track tab; let i = $index) {\n                <ui-button\n                    role=\"tab\"\n                    appearance=\"none\"\n                    [classes]=\"generatedButtonClasses()\"\n                    [disabled]=\"tab.disabled()\"\n                    [class.active]=\"tab.active()\"\n                    (click)=\"select(i)\"\n                >\n                    {{ tab.label() }}\n                </ui-button>\n            }\n        </nav>\n        <div class=\"flex gap-x-2.5\">\n            <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-content></ng-content>\n",
+		styles: ["@layer properties;::ng-deep .ui-tab-button--solid{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500));--tw-ring-color: var(--color-primary-600, var(--color-blue-600));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to!important;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)))!important;transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))!important}::ng-deep .active>.ui-tab-button--solid{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}::ng-deep .ui-tab-button--underline{border-radius:0!important;border-bottom-style:var(--tw-border-style)!important;border-bottom-width:2px!important;border-color:transparent;background-color:transparent;color:var(--foreground)}::ng-deep .active>.ui-tab-button--underline{border-bottom-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-primary-600, var(--color-blue-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiButtonComponent,
+			selector: "ui-button",
+			inputs: [
+				"appearance",
+				"intent",
+				"size",
+				"classes",
+				"type",
+				"ariaLabel",
+				"disabled",
+				"loading"
+			]
+		}, {
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTabComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-tab",
+			imports: [UiButtonComponent, NgTemplateOutlet],
+			host: { class: "block" },
+			template: "<div class=\"flex\" role=\"tablist\">\n    <div class=\"flex justify-between w-full\">\n        <nav class=\"flex gap-x-2.5\" role=\"tablist\">\n            @for (tab of tabs(); track tab; let i = $index) {\n                <ui-button\n                    role=\"tab\"\n                    appearance=\"none\"\n                    [classes]=\"generatedButtonClasses()\"\n                    [disabled]=\"tab.disabled()\"\n                    [class.active]=\"tab.active()\"\n                    (click)=\"select(i)\"\n                >\n                    {{ tab.label() }}\n                </ui-button>\n            }\n        </nav>\n        <div class=\"flex gap-x-2.5\">\n            <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-content></ng-content>\n",
+			styles: ["@layer properties;::ng-deep .ui-tab-button--solid{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500));--tw-ring-color: var(--color-primary-600, var(--color-blue-600));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to!important;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)))!important;transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))!important}::ng-deep .active>.ui-tab-button--solid{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}::ng-deep .ui-tab-button--underline{border-radius:0!important;border-bottom-style:var(--tw-border-style)!important;border-bottom-width:2px!important;border-color:transparent;background-color:transparent;color:var(--foreground)}::ng-deep .active>.ui-tab-button--underline{border-bottom-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-primary-600, var(--color-blue-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UiTabDirective), { isSignal: true }]
+		}],
+		actions: [{
+			type: i0.ContentChild,
+			args: ["actions", { isSignal: true }]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiTabComponent, UiTabDirective };
+
+//# sourceMappingURL=area8975-ui-tab.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-tab.mjs","names":[],"sources":["../../../projects/ui/tab/tab.directive.ts","../../../projects/ui/tab/tab.component.ts","../../../projects/ui/tab/tab.component.html"],"sourcesContent":["import { booleanAttribute, Directive, input, model } from '@angular/core';\n\n\n@Directive({\n    selector: '[uiTab]',\n    host: { '[hidden]': '!active()' }\n})\nexport class UiTabDirective {\n    label = input.required<string>({ alias: 'uiTab' });\n    disabled = input(false, { transform: booleanAttribute });\n    active = model<boolean>(false);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    Component,\n    computed,\n    contentChild,\n    contentChildren,\n    effect,\n    input,\n    signal,\n    TemplateRef\n} from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\n\nimport { UiTabDirective } from './tab.directive';\n\n\nexport type TabButtonAppearance =\n    | 'solid'\n    | 'underline';\n\n@Component({\n    selector: 'ui-tab',\n    templateUrl: './tab.component.html',\n    styleUrl: './tab.component.css',\n    imports: [UiButtonComponent, NgTemplateOutlet],\n    host: { class: 'block' }\n})\nexport class UiTabComponent {\n    readonly tabs = contentChildren(UiTabDirective);\n    readonly selectedIndex = signal<number>(0);\n    readonly actions = contentChild<TemplateRef<unknown>>('actions');\n\n    readonly appearance = input<TabButtonAppearance>('solid');\n\n    readonly generatedButtonClasses = computed(() =>\n        [\n            `ui-tab-button--${this.appearance()}`,\n            'font-medium'\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n\n    constructor() {\n        effect(() => {\n            const tabs = this.tabs();\n            if (!tabs.length || tabs.some(tab => tab.active())) { return; }\n\n            tabs[0].active.set(true);\n        });\n    }\n\n    select(index: number) {\n        const tabs = this.tabs();\n\n        const target = tabs[index];\n        if (!target || target.disabled()) { return; }\n\n        tabs.forEach((tab, i) => tab.active.set(i === index));\n    }\n}\n","<div class=\"flex\" role=\"tablist\">\n    <div class=\"flex justify-between w-full\">\n        <nav class=\"flex gap-x-2.5\" role=\"tablist\">\n            @for (tab of tabs(); track tab; let i = $index) {\n                <ui-button\n                    role=\"tab\"\n                    appearance=\"none\"\n                    [classes]=\"generatedButtonClasses()\"\n                    [disabled]=\"tab.disabled()\"\n                    [class.active]=\"tab.active()\"\n                    (click)=\"select(i)\"\n                >\n                    {{ tab.label() }}\n                </ui-button>\n            }\n        </nav>\n        <div class=\"flex gap-x-2.5\">\n            <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-content></ng-content>\n"],"mappings":"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"}