@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-date-picker.mjs

@@ -0,0 +1,312 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, model, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { buttonVariants } from "@loomui-ng/ui/button";
+import { UiCalendar } from "@loomui-ng/ui/calendar";
+import * as i1 from "@loomui-ng/ui/popover";
+import { UI_POPOVER, UiPopover } from "@loomui-ng/ui/popover";
+import { cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+var UiDatePicker = class UiDatePicker {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	placeholder = input("Pick a date", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	popover = viewChild(UiPopover, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	label = computed(() => {
+		const v = this.value();
+		return v ? new Intl.DateTimeFormat(this.locale(), { dateStyle: "long" }).format(v) : this.placeholder();
+	}, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	triggerClasses = computed(() => cn(buttonVariants({ variant: "outline" }), "w-[240px] justify-start text-start font-normal data-[empty]:text-muted-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	pick(sel) {
+		const d = sel instanceof Date ? sel : null;
+		this.value.set(d);
+		this.onChange(d);
+		this.onTouched();
+		this.popover()?.close();
+	}
+	writeValue(v) {
+		this.value.set(v ?? null);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.cvaDisabled.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDatePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiDatePicker,
+		isStandalone: true,
+		selector: "ui-date-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			attributes: { "data-slot": "date-picker" },
+			classAttribute: "contents"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiDatePicker),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "popover",
+			first: true,
+			predicate: UiPopover,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div uiPopover class="contents">
+      <button
+        uiPopoverTrigger
+        type="button"
+        data-slot="date-picker-trigger"
+        [attr.data-empty]="value() ? null : ''"
+        [disabled]="isDisabled()"
+        [class]="triggerClasses()"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+      >
+        <svg uiIcon="calendar" class="size-4"></svg>
+        {{ label() }}
+      </button>
+      <div uiPopoverContent class="w-auto p-0" align="start">
+        <div uiCalendar mode="single" [selected]="value() ?? undefined" (selectedChange)="pick($event)"></div>
+      </div>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: UiIconSvg,
+				selector: "svg[uiIcon]",
+				inputs: [
+					"uiIcon",
+					"icon",
+					"size",
+					"strokeWidth",
+					"absoluteStrokeWidth",
+					"color",
+					"label",
+					"class"
+				]
+			},
+			{
+				kind: "directive",
+				type: i1.UiPopover,
+				selector: "[uiPopover], ui-popover",
+				exportAs: ["uiPopover"]
+			},
+			{
+				kind: "directive",
+				type: i1.UiPopoverTrigger,
+				selector: "[uiPopoverTrigger], ui-popover-trigger"
+			},
+			{
+				kind: "directive",
+				type: i1.UiPopoverContent,
+				selector: "[uiPopoverContent], ui-popover-content"
+			},
+			{
+				kind: "component",
+				type: UiCalendar,
+				selector: "div[uiCalendar], ui-calendar",
+				inputs: [
+					"mode",
+					"selected",
+					"month",
+					"numberOfMonths",
+					"showOutsideDays",
+					"weekStartsOn",
+					"locale",
+					"minDate",
+					"maxDate",
+					"disabled",
+					"required",
+					"class"
+				],
+				outputs: ["selectedChange", "monthChange"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-date-picker",
+			imports: [
+				UiIconSvg,
+				UI_POPOVER,
+				UiCalendar
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiDatePicker),
+				multi: true
+			}],
+			host: {
+				"data-slot": "date-picker",
+				class: "contents"
+			},
+			template: `
+    <div uiPopover class="contents">
+      <button
+        uiPopoverTrigger
+        type="button"
+        data-slot="date-picker-trigger"
+        [attr.data-empty]="value() ? null : ''"
+        [disabled]="isDisabled()"
+        [class]="triggerClasses()"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+      >
+        <svg uiIcon="calendar" class="size-4"></svg>
+        {{ label() }}
+      </button>
+      <div uiPopoverContent class="w-auto p-0" align="start">
+        <div uiCalendar mode="single" [selected]="value() ?? undefined" (selectedChange)="pick($event)"></div>
+      </div>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		popover: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => UiPopover), { isSignal: true }]
+		}]
+	}
+});
+export { UiDatePicker };
+
+//# sourceMappingURL=loomui-ng-ui-date-picker.mjs.map

package/fesm2022/loomui-ng-ui-date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-date-picker.mjs","names":[],"sources":["../../../libs/ui/date-picker/date-picker.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { buttonVariants } from '@loomui-ng/ui/button';\nimport { UiCalendar } from '@loomui-ng/ui/calendar';\nimport { UI_POPOVER, UiPopover } from '@loomui-ng/ui/popover';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiIconSvg } from '@loomui-ng/ui/icon';\n\n/**\n * shadcn's \"Date Picker\" is a recipe: Popover + Calendar + outline Button (`data-empty` while no date, muted text).\n * <ui-date-picker [(value)]=\"date\" placeholder=\"Pick a date\" />\n * Works with ngModel / reactive forms (ControlValueAccessor) and as a signal-forms value control (`value` model).\n * Selecting a date closes the popover and returns focus to the trigger (Radix Popover behavior).\n */\n@Component({\n  selector: 'ui-date-picker',\n  imports: [UiIconSvg, UI_POPOVER, UiCalendar],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiDatePicker), multi: true }],\n  host: { 'data-slot': 'date-picker', class: 'contents' },\n  template: `\n    <div uiPopover class=\"contents\">\n      <button\n        uiPopoverTrigger\n        type=\"button\"\n        data-slot=\"date-picker-trigger\"\n        [attr.data-empty]=\"value() ? null : ''\"\n        [disabled]=\"isDisabled()\"\n        [class]=\"triggerClasses()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      >\n        <svg uiIcon=\"calendar\" class=\"size-4\"></svg>\n        {{ label() }}\n      </button>\n      <div uiPopoverContent class=\"w-auto p-0\" align=\"start\">\n        <div uiCalendar mode=\"single\" [selected]=\"value() ?? undefined\" (selectedChange)=\"pick($event)\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class UiDatePicker implements ControlValueAccessor {\n  readonly value = model<Date | null>(null);\n  readonly placeholder = input('Pick a date');\n  readonly locale = input<string | undefined>(undefined);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  private readonly popover = viewChild(UiPopover);\n  private readonly cvaDisabled = signal(false);\n  protected readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n  protected readonly label = computed(() => {\n    const v = this.value();\n    return v ? new Intl.DateTimeFormat(this.locale(), { dateStyle: 'long' }).format(v) : this.placeholder();\n  });\n  protected readonly triggerClasses = computed(() =>\n    cn(\n      buttonVariants({ variant: 'outline' }),\n      'w-[240px] justify-start text-start font-normal data-[empty]:text-muted-foreground',\n      this.userClass(),\n    ),\n  );\n\n  private onChange: (v: Date | null) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  protected pick(sel: unknown): void {\n    const d = sel instanceof Date ? sel : null;\n    this.value.set(d);\n    this.onChange(d);\n    this.onTouched();\n    this.popover()?.close();\n  }\n\n  writeValue(v: Date | null): void {\n    this.value.set(v ?? null);\n  }\n  registerOnChange(fn: (v: Date | null) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.cvaDisabled.set(d);\n  }\n}\n"],"mappings":"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"}