@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-pagination.mjs

@@ -0,0 +1,353 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, input, model, numberAttribute } from "@angular/core";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+function vdPageRange(page, count, siblings = 1, boundaries = 1) {
+	if (count <= 0) return [];
+	const current = Math.min(Math.max(1, page), count);
+	if (count <= boundaries * 2 + siblings * 2 + 3) return range(1, count);
+	const start = Math.max(Math.min(current - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
+	const end = Math.min(Math.max(current + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
+	return [
+		...range(1, boundaries),
+		start > boundaries + 2 ? "ellipsis" : boundaries + 1,
+		...range(start, end),
+		end < count - boundaries - 1 ? "ellipsis" : count - boundaries,
+		...range(count - boundaries + 1, count)
+	];
+}
+function range(from, to) {
+	return Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+}
+var VdPagination = class VdPagination {
+	page = model(1, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
+	pageCount = input.required({
+		...ngDevMode ? { debugName: "pageCount" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	siblings = input(1, {
+		...ngDevMode ? { debugName: "siblings" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	compact = input(false, {
+		...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	previousLabel = input(...ngDevMode ? [void 0, { debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input(...ngDevMode ? [void 0, { debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	pageLabel = input(...ngDevMode ? [void 0, { debugName: "pageLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("pagination", {
+		label: this.label,
+		previousLabel: this.previousLabel,
+		nextLabel: this.nextLabel,
+		pageLabel: this.pageLabel
+	});
+	current = computed(() => Math.min(Math.max(1, this.page()), Math.max(1, this.pageCount())), ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	isFirst = computed(() => this.current() <= 1, ...ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []);
+	isLast = computed(() => this.current() >= this.pageCount(), ...ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []);
+	items = computed(() => vdPageRange(this.current(), this.pageCount(), this.siblings()), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	revealFocused(event) {
+		event.target.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}
+	go(page) {
+		if (page < 1 || page > this.pageCount() || page === this.current()) return;
+		this.page.set(page);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdPagination,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdPagination,
+		isStandalone: true,
+		selector: "vd-pagination",
+		inputs: {
+			page: {
+				classPropertyName: "page",
+				publicName: "page",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageCount: {
+				classPropertyName: "pageCount",
+				publicName: "pageCount",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			siblings: {
+				classPropertyName: "siblings",
+				publicName: "siblings",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageLabel: {
+				classPropertyName: "pageLabel",
+				publicName: "pageLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { page: "pageChange" },
+		host: {
+			attributes: { "role": "navigation" },
+			listeners: { "focusin": "revealFocused($event)" },
+			properties: {
+				"attr.aria-label": "t().label",
+				"attr.data-size": "size()"
+			},
+			classAttribute: "vd-pagination"
+		},
+		ngImport: i0,
+		template: `
+    <button
+      type="button"
+      class="vd-pagination__step"
+      [attr.aria-label]="t().previousLabel"
+      [attr.aria-disabled]="isFirst() || null"
+      (click)="go(current() - 1)"
+    >
+      <vd-icon name="chevron-left" />
+    </button>
+
+    @if (compact()) {
+      <span class="vd-pagination__status">{{ current() }} / {{ pageCount() }}</span>
+    } @else {
+      <ul class="vd-pagination__pages" role="list">
+        @for (item of items(); track item === 'ellipsis' ? 'e' + $index : item) {
+          <li>
+            @if (item === 'ellipsis') {
+              <span class="vd-pagination__ellipsis" aria-hidden="true">…</span>
+            } @else {
+              <button
+                type="button"
+                class="vd-pagination__page"
+                [attr.aria-current]="item === current() ? 'page' : null"
+                [attr.aria-label]="t().pageLabel(item)"
+                (click)="go(item)"
+              >
+                {{ item }}
+              </button>
+            }
+          </li>
+        }
+      </ul>
+    }
+
+    <button
+      type="button"
+      class="vd-pagination__step"
+      [attr.aria-label]="t().nextLabel"
+      [attr.aria-disabled]="isLast() || null"
+      (click)="go(current() + 1)"
+    >
+      <vd-icon name="chevron-right" />
+    </button>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdPagination,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-pagination",
+			imports: [VdIcon],
+			template: `
+    <button
+      type="button"
+      class="vd-pagination__step"
+      [attr.aria-label]="t().previousLabel"
+      [attr.aria-disabled]="isFirst() || null"
+      (click)="go(current() - 1)"
+    >
+      <vd-icon name="chevron-left" />
+    </button>
+
+    @if (compact()) {
+      <span class="vd-pagination__status">{{ current() }} / {{ pageCount() }}</span>
+    } @else {
+      <ul class="vd-pagination__pages" role="list">
+        @for (item of items(); track item === 'ellipsis' ? 'e' + $index : item) {
+          <li>
+            @if (item === 'ellipsis') {
+              <span class="vd-pagination__ellipsis" aria-hidden="true">…</span>
+            } @else {
+              <button
+                type="button"
+                class="vd-pagination__page"
+                [attr.aria-current]="item === current() ? 'page' : null"
+                [attr.aria-label]="t().pageLabel(item)"
+                (click)="go(item)"
+              >
+                {{ item }}
+              </button>
+            }
+          </li>
+        }
+      </ul>
+    }
+
+    <button
+      type="button"
+      class="vd-pagination__step"
+      [attr.aria-label]="t().nextLabel"
+      [attr.aria-disabled]="isLast() || null"
+      (click)="go(current() + 1)"
+    >
+      <vd-icon name="chevron-right" />
+    </button>
+  `,
+			host: {
+				class: "vd-pagination",
+				role: "navigation",
+				"[attr.aria-label]": "t().label",
+				"[attr.data-size]": "size()",
+				"(focusin)": "revealFocused($event)"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		page: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "page",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["pageChange"]
+		}],
+		pageCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageCount",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		siblings: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "siblings",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		pageLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdPagination, vdPageRange };
+
+//# sourceMappingURL=vadem-ui-pagination.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-pagination.mjs","names":[],"sources":["../../../projects/ui/pagination/src/core/range.ts","../../../projects/ui/pagination/src/pagination.ts"],"sourcesContent":["export type VdPageItem = number | 'ellipsis';\n\n/**\n * Page items to render: first/last `boundaries` pages, `siblings` around the current page,\n * and 'ellipsis' for gaps. The length stays constant while paging (no jumping layout), and an\n * ellipsis never hides a single page (that page is shown instead).\n *\n * vdPageRange(6, 12) -> [1, 'ellipsis', 5, 6, 7, 'ellipsis', 12]\n */\nexport function vdPageRange(\n  page: number,\n  count: number,\n  siblings = 1,\n  boundaries = 1,\n): VdPageItem[] {\n  if (count <= 0) return [];\n  const current = Math.min(Math.max(1, page), count);\n  // boundaries on both sides + siblings + current + 2 ellipsis slots\n  const slots = boundaries * 2 + siblings * 2 + 3;\n  if (count <= slots) return range(1, count);\n\n  const start = Math.max(\n    Math.min(current - siblings, count - boundaries - siblings * 2 - 1),\n    boundaries + 2,\n  );\n  const end = Math.min(\n    Math.max(current + siblings, boundaries + siblings * 2 + 2),\n    count - boundaries - 1,\n  );\n\n  return [\n    ...range(1, boundaries),\n    start > boundaries + 2 ? 'ellipsis' : boundaries + 1,\n    ...range(start, end),\n    end < count - boundaries - 1 ? 'ellipsis' : count - boundaries,\n    ...range(count - boundaries + 1, count),\n  ];\n}\n\nfunction range(from: number, to: number): number[] {\n  return Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  input,\n  model,\n  numberAttribute,\n} from '@angular/core';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { vdPageRange } from './core/range';\nimport { vdTexts } from '@vadem/ui/locale';\n\nexport type VdPaginationSize = 'sm' | 'md';\n\n/**\n * Page navigation for paged lists and tables. Buttons (not links): the consumer loads the page.\n * Spec: specs/pagination.md\n */\n@Component({\n  selector: 'vd-pagination',\n  imports: [VdIcon],\n  template: `\n    <button\n      type=\"button\"\n      class=\"vd-pagination__step\"\n      [attr.aria-label]=\"t().previousLabel\"\n      [attr.aria-disabled]=\"isFirst() || null\"\n      (click)=\"go(current() - 1)\"\n    >\n      <vd-icon name=\"chevron-left\" />\n    </button>\n\n    @if (compact()) {\n      <span class=\"vd-pagination__status\">{{ current() }} / {{ pageCount() }}</span>\n    } @else {\n      <ul class=\"vd-pagination__pages\" role=\"list\">\n        @for (item of items(); track item === 'ellipsis' ? 'e' + $index : item) {\n          <li>\n            @if (item === 'ellipsis') {\n              <span class=\"vd-pagination__ellipsis\" aria-hidden=\"true\">…</span>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"vd-pagination__page\"\n                [attr.aria-current]=\"item === current() ? 'page' : null\"\n                [attr.aria-label]=\"t().pageLabel(item)\"\n                (click)=\"go(item)\"\n              >\n                {{ item }}\n              </button>\n            }\n          </li>\n        }\n      </ul>\n    }\n\n    <button\n      type=\"button\"\n      class=\"vd-pagination__step\"\n      [attr.aria-label]=\"t().nextLabel\"\n      [attr.aria-disabled]=\"isLast() || null\"\n      (click)=\"go(current() + 1)\"\n    >\n      <vd-icon name=\"chevron-right\" />\n    </button>\n  `,\n  host: {\n    class: 'vd-pagination',\n    role: 'navigation',\n    '[attr.aria-label]': 't().label',\n    '[attr.data-size]': 'size()',\n    '(focusin)': 'revealFocused($event)',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdPagination {\n  /** Current page, 1-based (two-way). */\n  readonly page = model(1);\n  readonly pageCount = input.required({ transform: numberAttribute });\n  readonly size = input<VdPaginationSize>('md');\n  /** Pages shown on each side of the current one. */\n  readonly siblings = input(1, { transform: numberAttribute });\n  /** \"3 / 12\" instead of page buttons (narrow spaces). */\n  readonly compact = input(false, { transform: booleanAttribute });\n  /** Landmark name; name each pagination on a page differently. */\n  readonly label = input<string>();\n  readonly previousLabel = input<string>();\n  readonly nextLabel = input<string>();\n  readonly pageLabel = input<(page: number) => string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('pagination', {\n    label: this.label,\n    previousLabel: this.previousLabel,\n    nextLabel: this.nextLabel,\n    pageLabel: this.pageLabel,\n  });\n\n  protected readonly current = computed(() =>\n    Math.min(Math.max(1, this.page()), Math.max(1, this.pageCount())),\n  );\n  protected readonly isFirst = computed(() => this.current() <= 1);\n  protected readonly isLast = computed(() => this.current() >= this.pageCount());\n  protected readonly items = computed(() =>\n    vdPageRange(this.current(), this.pageCount(), this.siblings()),\n  );\n\n  /** Native focus scrolling can leave a partially visible button clipped. */\n  protected revealFocused(event: FocusEvent): void {\n    (event.target as HTMLElement).scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n  }\n\n  /** Disabled steps use aria-disabled (they keep focus at the edges), so guard here. */\n  protected go(page: number): void {\n    if (page < 1 || page > this.pageCount() || page === this.current()) return;\n    this.page.set(page);\n  }\n}\n"],"mappings":"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"}

package/fesm2022/vadem-ui-password-input.mjs

@@ -0,0 +1,213 @@
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, ViewEncapsulation, afterEveryRender, contentChild, inject, input, signal } from "@angular/core";
+import { VdButton } from "@vadem/ui/button";
+import { VdIcon } from "@vadem/ui/icon";
+import { VdInput } from "@vadem/ui/input";
+import { vdTexts } from "@vadem/ui/locale";
+var VdPasswordInput = class VdPasswordInput extends VdInput {
+	element = inject(ElementRef).nativeElement;
+	document = inject(DOCUMENT);
+	visible = signal(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	revealed = this.visible.asReadonly();
+	unavailable = signal(true, ...ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []);
+	locked = this.unavailable.asReadonly();
+	constructor() {
+		super();
+		afterEveryRender(() => {
+			this.unavailable.set(this.element.disabled);
+			if (this.element.disabled && this.visible()) this.setVisible(false);
+		});
+	}
+	preserveEditingFocus(event) {
+		if (event.button === 0 && this.document.activeElement === this.element) event.preventDefault();
+	}
+	toggle() {
+		if (this.element.disabled) return;
+		this.setVisible(!this.visible());
+	}
+	setVisible(visible) {
+		const { selectionStart, selectionEnd, selectionDirection, scrollLeft } = this.element;
+		this.visible.set(visible);
+		this.element.type = visible ? "text" : "password";
+		if (selectionStart !== null && selectionEnd !== null) this.element.setSelectionRange(selectionStart, selectionEnd, selectionDirection ?? "none");
+		this.element.scrollLeft = scrollLeft;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdPasswordInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdPasswordInput,
+		isStandalone: true,
+		selector: "input[vdPasswordInput]",
+		host: {
+			properties: { "type": "revealed() ? \"text\" : \"password\"" },
+			classAttribute: "vd-password-input__input"
+		},
+		exportAs: ["vdPasswordInput"],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdPasswordInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[vdPasswordInput]",
+			exportAs: "vdPasswordInput",
+			host: {
+				class: "vd-password-input__input",
+				"[type]": "revealed() ? \"text\" : \"password\""
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var VdPasswordInputGroup = class VdPasswordInputGroup {
+	revealLabel = input(...ngDevMode ? [void 0, { debugName: "revealLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("passwordInput", { revealLabel: this.revealLabel });
+	control = contentChild(VdPasswordInput, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdPasswordInputGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: VdPasswordInputGroup,
+		isStandalone: true,
+		selector: "vd-password-input",
+		inputs: { revealLabel: {
+			classPropertyName: "revealLabel",
+			publicName: "revealLabel",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.data-revealed": "control()?.revealed() ? \"\" : null" },
+			classAttribute: "vd-input-group vd-password-input"
+		},
+		queries: [{
+			propertyName: "control",
+			first: true,
+			predicate: VdPasswordInput,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <ng-content select="[slot=start]" />
+    <ng-content select="input[vdPasswordInput]" />
+    <button
+      vdButton
+      type="button"
+      variant="ghost"
+      iconOnly
+      slot="end"
+      [size]="control()?.size() ?? 'md'"
+      [disabled]="control()?.locked() ?? true"
+      [attr.aria-label]="t().revealLabel"
+      [attr.aria-pressed]="control()?.revealed() ?? false"
+      [attr.aria-controls]="control()?.id() ?? null"
+      (mousedown)="control()?.preserveEditingFocus($event)"
+      (click)="control()?.toggle()"
+    >
+      <vd-icon [name]="control()?.revealed() ? 'eye-off' : 'eye'" />
+    </button>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdButton,
+			selector: "button[vdButton], a[vdButton]",
+			inputs: [
+				"variant",
+				"size",
+				"disabled",
+				"loading",
+				"iconOnly",
+				"type"
+			]
+		}, {
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdPasswordInputGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-password-input",
+			imports: [VdButton, VdIcon],
+			template: `
+    <ng-content select="[slot=start]" />
+    <ng-content select="input[vdPasswordInput]" />
+    <button
+      vdButton
+      type="button"
+      variant="ghost"
+      iconOnly
+      slot="end"
+      [size]="control()?.size() ?? 'md'"
+      [disabled]="control()?.locked() ?? true"
+      [attr.aria-label]="t().revealLabel"
+      [attr.aria-pressed]="control()?.revealed() ?? false"
+      [attr.aria-controls]="control()?.id() ?? null"
+      (mousedown)="control()?.preserveEditingFocus($event)"
+      (click)="control()?.toggle()"
+    >
+      <vd-icon [name]="control()?.revealed() ? 'eye-off' : 'eye'" />
+    </button>
+  `,
+			host: {
+				class: "vd-input-group vd-password-input",
+				"[attr.data-revealed]": "control()?.revealed() ? \"\" : null"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		revealLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "revealLabel",
+				required: false
+			}]
+		}],
+		control: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => VdPasswordInput), { isSignal: true }]
+		}]
+	}
+});
+const VD_PASSWORD_INPUT = [VdPasswordInputGroup, VdPasswordInput];
+export { VD_PASSWORD_INPUT, VdPasswordInput, VdPasswordInputGroup };
+
+//# sourceMappingURL=vadem-ui-password-input.mjs.map

package/fesm2022/vadem-ui-password-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-password-input.mjs","names":[],"sources":["../../../projects/ui/password-input/src/password-input.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport {\n  afterEveryRender,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { VdButton } from '@vadem/ui/button';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { VdInput } from '@vadem/ui/input';\nimport { vdTexts } from '@vadem/ui/locale';\n\n/** Native password value and forms accessor remain on the input. This directive owns type. */\n@Directive({\n  selector: 'input[vdPasswordInput]',\n  exportAs: 'vdPasswordInput',\n  host: { class: 'vd-password-input__input', '[type]': 'revealed() ? \"text\" : \"password\"' },\n})\nexport class VdPasswordInput extends VdInput {\n  readonly element: HTMLInputElement = inject(ElementRef).nativeElement;\n  private readonly document = inject(DOCUMENT);\n  private readonly visible = signal(false);\n  readonly revealed = this.visible.asReadonly();\n  private readonly unavailable = signal(true);\n  readonly locked = this.unavailable.asReadonly();\n\n  constructor() {\n    super();\n    afterEveryRender(() => {\n      this.unavailable.set(this.element.disabled);\n      if (this.element.disabled && this.visible()) this.setVisible(false);\n    });\n  }\n\n  /** Pointer activation while editing preserves input focus; keyboard focus stays on the button. */\n  preserveEditingFocus(event: MouseEvent): void {\n    if (event.button === 0 && this.document.activeElement === this.element) event.preventDefault();\n  }\n\n  toggle(): void {\n    if (this.element.disabled) return;\n    this.setVisible(!this.visible());\n  }\n\n  private setVisible(visible: boolean): void {\n    const { selectionStart, selectionEnd, selectionDirection, scrollLeft } = this.element;\n    this.visible.set(visible);\n    // Update synchronously so restoring the range follows the actual native type change.\n    this.element.type = visible ? 'text' : 'password';\n    if (selectionStart !== null && selectionEnd !== null)\n      this.element.setSelectionRange(selectionStart, selectionEnd, selectionDirection ?? 'none');\n    this.element.scrollLeft = scrollLeft;\n  }\n}\n\n@Component({\n  selector: 'vd-password-input',\n  imports: [VdButton, VdIcon],\n  template: `\n    <ng-content select=\"[slot=start]\" />\n    <ng-content select=\"input[vdPasswordInput]\" />\n    <button\n      vdButton\n      type=\"button\"\n      variant=\"ghost\"\n      iconOnly\n      slot=\"end\"\n      [size]=\"control()?.size() ?? 'md'\"\n      [disabled]=\"control()?.locked() ?? true\"\n      [attr.aria-label]=\"t().revealLabel\"\n      [attr.aria-pressed]=\"control()?.revealed() ?? false\"\n      [attr.aria-controls]=\"control()?.id() ?? null\"\n      (mousedown)=\"control()?.preserveEditingFocus($event)\"\n      (click)=\"control()?.toggle()\"\n    >\n      <vd-icon [name]=\"control()?.revealed() ? 'eye-off' : 'eye'\" />\n    </button>\n  `,\n  host: {\n    class: 'vd-input-group vd-password-input',\n    '[attr.data-revealed]': 'control()?.revealed() ? \"\" : null',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdPasswordInputGroup {\n  /** Stable toggle name; aria-pressed conveys whether revealing is enabled. */\n  readonly revealLabel = input<string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('passwordInput', { revealLabel: this.revealLabel });\n  protected readonly control = contentChild(VdPasswordInput);\n}\n\nexport const VD_PASSWORD_INPUT = [VdPasswordInputGroup, VdPasswordInput] as const;\n"],"mappings":"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"}