@vadem/ui 0.0.0-stage → 0.0.2

package/LICENSE-lucide.txt

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,94 @@
-# Temporary Holding Version
+# Vadem UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@vadem/ui)](https://www.npmjs.com/package/@vadem/ui)
+[![CI](https://github.com/Demchuk12/vadem-ui-angular/actions/workflows/ci.yml/badge.svg)](https://github.com/Demchuk12/vadem-ui-angular/actions/workflows/ci.yml)
+
+A modern Angular component library for forms, dashboards, and data-rich applications.
+Vadem combines a consistent visual language with native HTML semantics, reusable CSS
+design tokens, and components built with standalone APIs, signals, and OnPush change detection.
+
+## Features
+
+- **Components for everyday product UI:** buttons, form controls, selects, calendars,
+  dialogs, notifications, navigation, tables, charts, and file interactions.
+- **Dark and light themes:** a shared token system for colors, typography, spacing,
+  shape, and motion, customizable through CSS custom properties.
+- **Accessibility-focused interactions:** keyboard navigation, focus management,
+  ARIA semantics, and support for reduced motion and forced colors where applicable.
+- **Localization:** English and Ukrainian locale packs, with RTL-aware layouts and controls.
+- **Angular forms:** native controls and custom value accessors where appropriate,
+  with Reactive Forms and Signal Forms examples in the gallery.
+- **Plain CSS:** no Tailwind or third-party UI framework; shared styles are independent
+  of Angular view encapsulation.
+- **Bundled assets:** self-hosted Manrope and JetBrains Mono fonts, plus a vendored Lucide
+  icon subset. No runtime font or icon CDN is required.
+- **Separate entry points:** import the components you need from `@vadem/ui/button`,
+  `@vadem/ui/dialog`, and other component-specific paths.
+
+## Requirements
+
+Angular **22.2 or later within major version 22**, matching the package's peer dependencies.
+Browser targets: the last two Chrome, Edge, and Firefox versions, and Safari 26+.
+
+## Installation
+
+```sh
+npm install @vadem/ui
+```
+
+Add the shared stylesheet to your application's global CSS:
+
+```css
+@import '@vadem/ui/styles.css';
+```
+
+## Quick start
+
+```ts
+import { Component } from '@angular/core';
+import { VdButton } from '@vadem/ui/button';
+
+@Component({
+  selector: 'app-root',
+  imports: [VdButton],
+  template: `<button vdButton variant="primary">Save changes</button>`,
+})
+export class App {}
+```
+
+## Themes and customization
+
+Apply a theme to the document or a section of your application:
+
+```html
+<html data-theme="dark"></html>
+```
+
+Use `data-theme="light"` for light mode or `data-theme="auto"` to follow the system preference.
+Customize the accent through the shared token:
+
+```css
+:root {
+  --vd-hue-accent: 270;
+}
+```
+
+## Documentation and examples
+
+- [Source repository](https://github.com/Demchuk12/vadem-ui-angular)
+- [Component contracts](https://github.com/Demchuk12/vadem-ui-angular/tree/main/specs)
+- [Demo gallery source](https://github.com/Demchuk12/vadem-ui-angular/tree/main/projects/demo)
+- [Issues](https://github.com/Demchuk12/vadem-ui-angular/issues)
+
+To explore the gallery locally, clone the repository, run `npm ci`, then `npm start`.
+
+## Release status
+
+Vadem UI is in early development. APIs may change between releases before version 1.0.
+
+## Third-party assets
+
+Manrope and JetBrains Mono are distributed under SIL OFL 1.1; their notices are included
+in `fonts/`. Lucide icon geometry is distributed under ISC; see `LICENSE-lucide.txt`.
+
+Getting started and copyable application examples: [usage guide](https://github.com/Demchuk12/vadem-ui-angular/blob/main/docs/GETTING_STARTED.md).

package/fesm2022/vadem-ui-accordion.mjs

@@ -0,0 +1,139 @@
+import * as i0 from "@angular/core";
+import { Directive, booleanAttribute, computed, inject, input, linkedSignal, output } from "@angular/core";
+import { vdUniqueId } from "@vadem/ui/field";
+var VdAccordion = class VdAccordion {
+	exclusive = input(false, {
+		...ngDevMode ? { debugName: "exclusive" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	name = vdUniqueId("vd-accordion");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdAccordion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdAccordion,
+		isStandalone: true,
+		selector: "[vdAccordion]",
+		inputs: { exclusive: {
+			classPropertyName: "exclusive",
+			publicName: "exclusive",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "vd-accordion" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdAccordion,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdAccordion]",
+			host: { class: "vd-accordion" }
+		}]
+	}],
+	propDecorators: { exclusive: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "exclusive",
+			required: false
+		}]
+	}] }
+});
+var VdAccordionItem = class VdAccordionItem {
+	open = input(false, {
+		...ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	openChange = output();
+	isOpen = linkedSignal(() => this.open(), ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	group = inject(VdAccordion, { optional: true });
+	groupName = computed(() => this.group?.exclusive() ? this.group.name : null, ...ngDevMode ? [{ debugName: "groupName" }] : /* istanbul ignore next */ []);
+	onToggle(event) {
+		const open = event.target.open;
+		if (open === this.isOpen()) return;
+		this.isOpen.set(open);
+		this.openChange.emit(open);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdAccordionItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdAccordionItem,
+		isStandalone: true,
+		selector: "details[vdAccordionItem]",
+		inputs: { open: {
+			classPropertyName: "open",
+			publicName: "open",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { openChange: "openChange" },
+		host: {
+			listeners: { "toggle": "onToggle($event)" },
+			properties: {
+				"attr.name": "groupName()",
+				"open": "isOpen()"
+			},
+			classAttribute: "vd-accordion__item"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdAccordionItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "details[vdAccordionItem]",
+			host: {
+				class: "vd-accordion__item",
+				"[attr.name]": "groupName()",
+				"[open]": "isOpen()",
+				"(toggle)": "onToggle($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		openChange: [{
+			type: i0.Output,
+			args: ["openChange"]
+		}]
+	}
+});
+const VD_ACCORDION = [VdAccordion, VdAccordionItem];
+export { VD_ACCORDION, VdAccordion, VdAccordionItem };
+
+//# sourceMappingURL=vadem-ui-accordion.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-accordion.mjs","names":[],"sources":["../../../projects/ui/accordion/src/accordion.ts"],"sourcesContent":["import {\n  Directive,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  linkedSignal,\n  output,\n} from '@angular/core';\nimport { vdUniqueId } from '@vadem/ui/field';\n\n/**\n * Group of `details[vdAccordionItem]`. With `exclusive`, the items share a `name`, so the\n * browser keeps at most one open. Spec: specs/accordion.md\n */\n@Directive({\n  selector: '[vdAccordion]',\n  host: { class: 'vd-accordion' },\n})\nexport class VdAccordion {\n  /** At most one item open at a time (native `<details name>`). */\n  readonly exclusive = input(false, { transform: booleanAttribute });\n  readonly name = vdUniqueId('vd-accordion');\n}\n\n/**\n * One disclosure on a native `<details>` with a `<summary>`: keyboard, find-in-page (opens the\n * matching item) and state stay native. `open` works as a plain attribute (`<details open>`)\n * and two-way (`[(open)]`).\n */\n@Directive({\n  selector: 'details[vdAccordionItem]',\n  host: {\n    class: 'vd-accordion__item',\n    '[attr.name]': 'groupName()',\n    '[open]': 'isOpen()',\n    '(toggle)': 'onToggle($event)',\n  },\n})\nexport class VdAccordionItem {\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly openChange = output<boolean>();\n  /** Follows the input, and the browser's own toggles in between. */\n  protected readonly isOpen = linkedSignal(() => this.open());\n\n  private readonly group = inject(VdAccordion, { optional: true });\n  protected readonly groupName = computed(() => (this.group?.exclusive() ? this.group.name : null));\n\n  protected onToggle(event: Event): void {\n    // The browser toggles (summary click, find-in-page, exclusive siblings): mirror it.\n    const open = (event.target as HTMLDetailsElement).open;\n    if (open === this.isOpen()) return;\n    this.isOpen.set(open);\n    this.openChange.emit(open);\n  }\n}\n\nexport const VD_ACCORDION = [VdAccordion, VdAccordionItem] as const;\n"],"mappings":";;;AAmBA,IAAa,cAAb,MAAa,YAAW;CAEb,YAAY,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACtD,OAAO,WAAW,cAAc;CAH9B,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,gBAAA,eAAA;EAAA,UAAA;CAAA,CAAA;;AAAX,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAJvB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,OAAO,eAAc;EAC9B,CAAA;;;;;;;;;;;AAqBD,IAAa,kBAAb,MAAa,gBAAe;CACjB,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACjD,aAAa,OAAM;CAET,SAAS,mBAAmB,KAAK,KAAI,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAE1C,QAAQ,OAAO,aAAa,EAAE,UAAU,KAAI,CAAE;CAC5C,YAAY,eAAgB,KAAK,OAAO,UAAS,IAAK,KAAK,MAAM,OAAO,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEvF,SAAS,OAAY;EAE7B,MAAM,OAAQ,MAAM,OAA8B;EAClD,IAAI,SAAS,KAAK,OAAM,GAAI;EAC5B,KAAK,OAAO,IAAI,IAAI;EACpB,KAAK,WAAW,KAAK,IAAI;CAC3B;CAfW,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,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,SAAA,EAAA,YAAA,aAAA;EAAA,MAAA;GAAA,WAAA,EAAA,UAAA,mBAAA;GAAA,YAAA;IAAA,aAAA;IAAA,QAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAT3B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,OAAO;IACP,eAAe;IACf,UAAU;IACV,YAAY;GACb;EACF,CAAA;;;;;;;;;;;;;;;;;AAmBD,MAAa,eAAe,CAAC,aAAa,eAAe"}

package/fesm2022/vadem-ui-active-filters.mjs

@@ -0,0 +1,355 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, effect, inject, input, output } from "@angular/core";
+import { VdButton } from "@vadem/ui/button";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+function vdActiveFiltersValid(filters) {
+	const ids = /* @__PURE__ */ new Set();
+	for (const filter of filters) {
+		if (typeof filter.id !== "string" || !filter.id.trim() || ids.has(filter.id)) return false;
+		ids.add(filter.id);
+	}
+	return true;
+}
+var VdActiveFilters = class VdActiveFilters {
+	filters = input([], ...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	clearText = input(...ngDevMode ? [void 0, { debugName: "clearText" }] : /* istanbul ignore next */ []);
+	emptyText = input(...ngDevMode ? [void 0, { debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	invalidText = input(...ngDevMode ? [void 0, { debugName: "invalidText" }] : /* istanbul ignore next */ []);
+	removeLabel = input(...ngDevMode ? [void 0, { debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	filterRemove = output();
+	clearAll = output();
+	valid = computed(() => vdActiveFiltersValid(this.filters()), ...ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []);
+	t = vdTexts("activeFilters", {
+		label: this.label,
+		clearText: this.clearText,
+		emptyText: this.emptyText,
+		invalidText: this.invalidText,
+		removeLabel: this.removeLabel
+	});
+	host = inject(ElementRef).nativeElement;
+	focus = null;
+	constructor() {
+		effect(() => {
+			this.filters();
+			this.disabled();
+			this.valid();
+			const active = this.host.ownerDocument.activeElement;
+			const buttons = this.buttons();
+			const index = buttons.findIndex((button) => button === active);
+			this.focus = index < 0 ? null : {
+				element: buttons[index],
+				id: buttons[index].dataset["filterId"],
+				index
+			};
+		});
+		afterRenderEffect(() => {
+			this.filters();
+			this.disabled();
+			this.valid();
+			const focus = this.focus;
+			this.focus = null;
+			if (!focus) return;
+			const active = this.host.ownerDocument.activeElement;
+			if (active === focus.element && !focus.element.disabled) return;
+			if (active && active !== this.host.ownerDocument.body && active !== focus.element) return;
+			const buttons = this.buttons().filter((button) => !button.disabled);
+			const same = focus.id === void 0 ? buttons.find((button) => button.dataset["action"] === "clear") : buttons.find((button) => button.dataset["filterId"] === focus.id);
+			const removes = buttons.filter((button) => button.dataset["filterId"] !== void 0);
+			(same ?? removes[Math.min(focus.index, removes.length - 1)] ?? this.host).focus();
+		});
+	}
+	buttons() {
+		return Array.from(this.host.querySelectorAll("button"));
+	}
+	remove(id) {
+		if (!this.disabled() && this.valid() && this.filters().some((filter) => filter.id === id)) this.filterRemove.emit(id);
+	}
+	clear() {
+		if (!this.disabled() && this.valid() && this.filters().length) this.clearAll.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdActiveFilters,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdActiveFilters,
+		isStandalone: true,
+		selector: "vd-active-filters",
+		inputs: {
+			filters: {
+				classPropertyName: "filters",
+				publicName: "filters",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearText: {
+				classPropertyName: "clearText",
+				publicName: "clearText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalidText: {
+				classPropertyName: "invalidText",
+				publicName: "invalidText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			filterRemove: "filterRemove",
+			clearAll: "clearAll"
+		},
+		host: {
+			attributes: {
+				"role": "group",
+				"tabindex": "-1"
+			},
+			properties: {
+				"attr.aria-label": "t().label",
+				"attr.data-state": "!valid() ? \"invalid\" : !filters().length ? \"empty\" : disabled() ? \"disabled\" : \"active\""
+			},
+			classAttribute: "vd-active-filters"
+		},
+		ngImport: i0,
+		template: `
+    @if (!valid()) {
+      <p class="vd-active-filters__message">{{ t().invalidText }}</p>
+    } @else if (!filters().length) {
+      <p class="vd-active-filters__message">{{ t().emptyText }}</p>
+    } @else {
+      <ul class="vd-active-filters__list" role="list">
+        @for (filter of filters(); track filter.id) {
+          <li class="vd-active-filters__item">
+            <button
+              vdButton
+              variant="secondary"
+              size="sm"
+              type="button"
+              class="vd-active-filters__remove"
+              [attr.data-filter-id]="filter.id"
+              [disabled]="disabled()"
+              [attr.aria-label]="t().removeLabel(filter.label, filter.value)"
+              (click)="remove(filter.id)"
+            >
+              <span class="vd-active-filters__text"
+                ><bdi>{{ filter.label }}</bdi
+                >: <bdi>{{ filter.value }}</bdi></span
+              >
+              <vd-icon name="x" slot="end" />
+            </button>
+          </li>
+        }
+      </ul>
+      <button
+        vdButton
+        variant="ghost"
+        size="sm"
+        type="button"
+        data-action="clear"
+        [disabled]="disabled()"
+        (click)="clear()"
+      >
+        {{ t().clearText }}
+      </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: VdActiveFilters,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-active-filters",
+			imports: [VdButton, VdIcon],
+			template: `
+    @if (!valid()) {
+      <p class="vd-active-filters__message">{{ t().invalidText }}</p>
+    } @else if (!filters().length) {
+      <p class="vd-active-filters__message">{{ t().emptyText }}</p>
+    } @else {
+      <ul class="vd-active-filters__list" role="list">
+        @for (filter of filters(); track filter.id) {
+          <li class="vd-active-filters__item">
+            <button
+              vdButton
+              variant="secondary"
+              size="sm"
+              type="button"
+              class="vd-active-filters__remove"
+              [attr.data-filter-id]="filter.id"
+              [disabled]="disabled()"
+              [attr.aria-label]="t().removeLabel(filter.label, filter.value)"
+              (click)="remove(filter.id)"
+            >
+              <span class="vd-active-filters__text"
+                ><bdi>{{ filter.label }}</bdi
+                >: <bdi>{{ filter.value }}</bdi></span
+              >
+              <vd-icon name="x" slot="end" />
+            </button>
+          </li>
+        }
+      </ul>
+      <button
+        vdButton
+        variant="ghost"
+        size="sm"
+        type="button"
+        data-action="clear"
+        [disabled]="disabled()"
+        (click)="clear()"
+      >
+        {{ t().clearText }}
+      </button>
+    }
+  `,
+			host: {
+				class: "vd-active-filters",
+				role: "group",
+				tabindex: "-1",
+				"[attr.aria-label]": "t().label",
+				"[attr.data-state]": "!valid() ? \"invalid\" : !filters().length ? \"empty\" : disabled() ? \"disabled\" : \"active\""
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		filters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filters",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		clearText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearText",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		invalidText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalidText",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		filterRemove: [{
+			type: i0.Output,
+			args: ["filterRemove"]
+		}],
+		clearAll: [{
+			type: i0.Output,
+			args: ["clearAll"]
+		}]
+	}
+});
+export { VdActiveFilters };
+
+//# sourceMappingURL=vadem-ui-active-filters.mjs.map

package/fesm2022/vadem-ui-active-filters.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-active-filters.mjs","names":[],"sources":["../../../projects/ui/active-filters/src/core/active-filters.ts","../../../projects/ui/active-filters/src/active-filters.ts"],"sourcesContent":["export function vdActiveFiltersValid(filters: readonly { id: string }[]): boolean {\n  const ids = new Set<string>();\n  for (const filter of filters) {\n    if (typeof filter.id !== 'string' || !filter.id.trim() || ids.has(filter.id)) return false;\n    ids.add(filter.id);\n  }\n  return true;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { VdButton } from '@vadem/ui/button';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { vdTexts } from '@vadem/ui/locale';\nimport { vdActiveFiltersValid } from './core/active-filters';\n\nexport interface VdActiveFilter {\n  readonly id: string;\n  readonly label: string;\n  readonly value: string;\n}\ninterface Focus {\n  element: HTMLButtonElement;\n  id: string | undefined;\n  index: number;\n}\n\n@Component({\n  selector: 'vd-active-filters',\n  imports: [VdButton, VdIcon],\n  template: `\n    @if (!valid()) {\n      <p class=\"vd-active-filters__message\">{{ t().invalidText }}</p>\n    } @else if (!filters().length) {\n      <p class=\"vd-active-filters__message\">{{ t().emptyText }}</p>\n    } @else {\n      <ul class=\"vd-active-filters__list\" role=\"list\">\n        @for (filter of filters(); track filter.id) {\n          <li class=\"vd-active-filters__item\">\n            <button\n              vdButton\n              variant=\"secondary\"\n              size=\"sm\"\n              type=\"button\"\n              class=\"vd-active-filters__remove\"\n              [attr.data-filter-id]=\"filter.id\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"t().removeLabel(filter.label, filter.value)\"\n              (click)=\"remove(filter.id)\"\n            >\n              <span class=\"vd-active-filters__text\"\n                ><bdi>{{ filter.label }}</bdi\n                >: <bdi>{{ filter.value }}</bdi></span\n              >\n              <vd-icon name=\"x\" slot=\"end\" />\n            </button>\n          </li>\n        }\n      </ul>\n      <button\n        vdButton\n        variant=\"ghost\"\n        size=\"sm\"\n        type=\"button\"\n        data-action=\"clear\"\n        [disabled]=\"disabled()\"\n        (click)=\"clear()\"\n      >\n        {{ t().clearText }}\n      </button>\n    }\n  `,\n  host: {\n    class: 'vd-active-filters',\n    role: 'group',\n    tabindex: '-1',\n    '[attr.aria-label]': 't().label',\n    '[attr.data-state]':\n      '!valid() ? \"invalid\" : !filters().length ? \"empty\" : disabled() ? \"disabled\" : \"active\"',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdActiveFilters {\n  readonly filters = input<readonly VdActiveFilter[]>([]);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly label = input<string>();\n  readonly clearText = input<string>();\n  readonly emptyText = input<string>();\n  readonly invalidText = input<string>();\n  readonly removeLabel = input<(label: string, value: string) => string>();\n  readonly filterRemove = output<string>();\n  readonly clearAll = output<void>();\n  protected readonly valid = computed(() => vdActiveFiltersValid(this.filters()));\n  protected readonly t = vdTexts('activeFilters', {\n    label: this.label,\n    clearText: this.clearText,\n    emptyText: this.emptyText,\n    invalidText: this.invalidText,\n    removeLabel: this.removeLabel,\n  });\n  private readonly host: HTMLElement = inject(ElementRef).nativeElement;\n  private focus: Focus | null = null;\n  constructor() {\n    effect(() => {\n      this.filters();\n      this.disabled();\n      this.valid();\n      const active = this.host.ownerDocument.activeElement;\n      const buttons = this.buttons();\n      const index = buttons.findIndex((button) => button === active);\n      this.focus =\n        index < 0\n          ? null\n          : { element: buttons[index], id: buttons[index].dataset['filterId'], index };\n    });\n    afterRenderEffect(() => {\n      this.filters();\n      this.disabled();\n      this.valid();\n      const focus = this.focus;\n      this.focus = null;\n      if (!focus) return;\n      const active = this.host.ownerDocument.activeElement;\n      if (active === focus.element && !focus.element.disabled) return;\n      if (active && active !== this.host.ownerDocument.body && active !== focus.element) return;\n      const buttons = this.buttons().filter((button) => !button.disabled);\n      const same =\n        focus.id === undefined\n          ? buttons.find((button) => button.dataset['action'] === 'clear')\n          : buttons.find((button) => button.dataset['filterId'] === focus.id);\n      const removes = buttons.filter((button) => button.dataset['filterId'] !== undefined);\n      (same ?? removes[Math.min(focus.index, removes.length - 1)] ?? this.host).focus();\n    });\n  }\n  private buttons(): HTMLButtonElement[] {\n    return Array.from(this.host.querySelectorAll<HTMLButtonElement>('button'));\n  }\n  protected remove(id: string): void {\n    if (!this.disabled() && this.valid() && this.filters().some((filter) => filter.id === id))\n      this.filterRemove.emit(id);\n  }\n  protected clear(): void {\n    if (!this.disabled() && this.valid() && this.filters().length) this.clearAll.emit();\n  }\n}\n"],"mappings":";;;;;AAAA,SAAgB,qBAAqB,SAAkC;CACrE,MAAM,sBAAM,IAAI,IAAG;CACnB,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,OAAO,OAAO,OAAO,YAAY,CAAC,OAAO,GAAG,KAAI,KAAM,IAAI,IAAI,OAAO,EAAE,GAAG,OAAO;EACrF,IAAI,IAAI,OAAO,EAAE;CACnB;CACA,OAAO;AACT;AC8EA,IAAa,kBAAb,MAAa,gBAAe;CACjB,UAAU,MAAiC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,YAAY,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,YAAY,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,cAAc,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,cAAc,MAAiD,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC/D,eAAe,OAAM;CACrB,WAAW,OAAM;CACP,QAAQ,eAAe,qBAAqB,KAAK,QAAO,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC5D,IAAI,QAAQ,iBAAiB;EAC9C,OAAO,KAAK;EACZ,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,aAAa,KAAK;EAClB,aAAa,KAAK;CACnB,CAAA;CACgB,OAAoB,OAAO,UAAU,CAAC,CAAC;CAChD,QAAsB;CAC9B,cAAA;EACE,aAAY;GACV,KAAK,QAAO;GACZ,KAAK,SAAQ;GACb,KAAK,MAAK;GACV,MAAM,SAAS,KAAK,KAAK,cAAc;GACvC,MAAM,UAAU,KAAK,QAAO;GAC5B,MAAM,QAAQ,QAAQ,WAAW,WAAW,WAAW,MAAM;GAC7D,KAAK,QACH,QAAQ,IACJ,OACA;IAAE,SAAS,QAAQ;IAAQ,IAAI,QAAQ,MAAM,CAAC,QAAQ;IAAa;GAAK;EAChF,CAAC;EACD,wBAAuB;GACrB,KAAK,QAAO;GACZ,KAAK,SAAQ;GACb,KAAK,MAAK;GACV,MAAM,QAAQ,KAAK;GACnB,KAAK,QAAQ;GACb,IAAI,CAAC,OAAO;GACZ,MAAM,SAAS,KAAK,KAAK,cAAc;GACvC,IAAI,WAAW,MAAM,WAAW,CAAC,MAAM,QAAQ,UAAU;GACzD,IAAI,UAAU,WAAW,KAAK,KAAK,cAAc,QAAQ,WAAW,MAAM,SAAS;GACnF,MAAM,UAAU,KAAK,QAAO,CAAE,CAAC,QAAQ,WAAW,CAAC,OAAO,QAAQ;GAClE,MAAM,OACJ,MAAM,OAAO,SACT,QAAQ,MAAM,WAAW,OAAO,QAAQ,cAAc,OAAO,IAC7D,QAAQ,MAAM,WAAW,OAAO,QAAQ,gBAAgB,MAAM,EAAE;GACtE,MAAM,UAAU,QAAQ,QAAQ,WAAW,OAAO,QAAQ,gBAAgB,MAAS;GACnF,CAAC,QAAQ,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,SAAS,CAAC,MAAM,KAAK,KAAA,CAAM,MAAK;EACjF,CAAC;CACH;CACQ,UAAO;EACb,OAAO,MAAM,KAAK,KAAK,KAAK,iBAAoC,QAAQ,CAAC;CAC3E;CACU,OAAO,IAAU;EACzB,IAAI,CAAC,KAAK,SAAQ,KAAM,KAAK,MAAK,KAAM,KAAK,QAAO,CAAE,CAAC,MAAM,WAAW,OAAO,OAAO,EAAE,GACtF,KAAK,aAAa,KAAK,EAAE;CAC7B;CACU,QAAK;EACb,IAAI,CAAC,KAAK,SAAQ,KAAM,KAAK,MAAK,KAAM,KAAK,QAAO,CAAE,CAAC,QAAQ,KAAK,SAAS,KAAI;CACnF;CA7DW,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;GAAA,SAAA;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,OAAA;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,WAAA;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,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,cAAA;GAAA,UAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,YAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UArDhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MA1CS;GAAQ,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAM,UAAA;GAAA,QAAA,CAAA,QAAA,OAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAsDf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAxD3B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,SAAS,CAAC,UAAU,MAAM;GAC1B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CV,MAAM;IACJ,OAAO;IACP,MAAM;IACN,UAAU;IACV,qBAAqB;IACrB,qBACE;GACH;GACD,iBAAiB,wBAAwB;GACzC,eAAe,kBAAkB;EAClC,CAAA"}