@geosdi/ngx-ui 1.0.0 → 1.1.0

package/README.md

@@ -691,9 +691,12 @@ Selector: `ml-column-filter`. [Source](src/lib/table/table.component.ts).
 
 Selector: `ml-tabs`. [Source](src/lib/tabs/tabs.component.ts).
 
-| Binding | Kind  | Type               | Declaration / default |
-| ------- | ----- | ------------------ | --------------------- |
-| `value` | model | `ModelSignal<any>` | `model<any>()`        |
+| Binding               | Kind  | Type               | Declaration / default |
+| --------------------- | ----- | ------------------ | --------------------- |
+| `value`               | model | `ModelSignal<any>` | `model<any>()`        |
+| `scrollable`          | input | boolean (coerced)  | `false`               |
+| `previousButtonLabel` | input | string             | `Previous tabs`       |
+| `nextButtonLabel`     | input | string             | `Next tabs`           |
 
 ### TabComponent
 
@@ -780,3 +783,34 @@ manual release workflow after committing the versioned source.
 - Independent CSS theme, local SVG icons and public Sass entry points.
 - `ml-*` component selectors, `ml*` directives and `--ml-*` theme tokens.
 - Application header offsets and map-specific stacking rules excluded from the package.
+
+### Scrollable tabs (1.1.0)
+
+```html
+<ml-tabs
+  [(value)]="selectedTab"
+  [scrollable]="true"
+  previousButtonLabel="Previous regions"
+  nextButtonLabel="Next regions"
+>
+  <ml-tablist>
+    @for (region of regions; track region.id) {
+    <ml-tab [value]="region.id">{{ region.name }}</ml-tab>
+    }
+  </ml-tablist>
+  <ml-tabpanels><!-- Matching ml-tabpanel elements --></ml-tabpanels>
+</ml-tabs>
+```
+
+`scrollable` defaults to `false`. When enabled, tabs stay on one line, native
+scrollbars are hidden, and previous/next buttons appear only on overflow. Buttons
+are disabled at the corresponding end. Touch and trackpad scrolling remain
+available. The active tab is revealed after selection, including keyboard and
+programmatic changes. Resizing and dynamic labels recalculate overflow. Scrolling
+respects reduced motion and right-to-left layout.
+
+`previousButtonLabel` and `nextButtonLabel` customize the accessible button labels
+(defaults: `Previous tabs` and `Next tabs`). Existing theme tokens style the buttons;
+no icon package or application CSS is required. The tablist now contains an internal
+`.ml-tablist__viewport`; custom CSS targeting direct children of `ml-tablist` should
+instead target `.ml-tablist__viewport > ml-tab`.

package/fesm2022/geosdi-ngx-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, ViewContainerRef, afterNextRender, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, ViewContainerRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import * as i1 from "@angular/forms";
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
@@ -4695,6 +4695,12 @@ let nextId$4 = 0;
 var TabsComponent = class TabsComponent {
 	constructor() {
 		this.value = model(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+		this.scrollable = input(false, {
+			...ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.previousButtonLabel = input("Previous tabs", ...ngDevMode ? [{ debugName: "previousButtonLabel" }] : /* istanbul ignore next */ []);
+		this.nextButtonLabel = input("Next tabs", ...ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []);
 		this.uid = `ml-tabs-${nextId$4++}`;
 	}
 	isActive(value) {
@@ -4720,13 +4726,36 @@ var TabsComponent = class TabsComponent {
 			type: TabsComponent,
 			isStandalone: true,
 			selector: "ml-tabs",
-			inputs: { value: {
-				classPropertyName: "value",
-				publicName: "value",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			} },
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				scrollable: {
+					classPropertyName: "scrollable",
+					publicName: "scrollable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				previousButtonLabel: {
+					classPropertyName: "previousButtonLabel",
+					publicName: "previousButtonLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				nextButtonLabel: {
+					classPropertyName: "nextButtonLabel",
+					publicName: "nextButtonLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
 			outputs: { value: "valueChange" },
 			host: { classAttribute: "ml-tabs" },
 			ngImport: i0,
@@ -4750,24 +4779,100 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `<ng-content />`
 		}]
 	}],
-	propDecorators: { value: [{
-		type: i0.Input,
-		args: [{
-			isSignal: true,
-			alias: "value",
-			required: false
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		scrollable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollable",
+				required: false
+			}]
+		}],
+		previousButtonLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousButtonLabel",
+				required: false
+			}]
+		}],
+		nextButtonLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextButtonLabel",
+				required: false
+			}]
 		}]
-	}, {
-		type: i0.Output,
-		args: ["valueChange"]
-	}] }
+	}
 });
 var TabListComponent = class TabListComponent {
 	constructor() {
 		this.host = inject(ElementRef);
+		this.tabs = inject(TabsComponent);
+		this.overflowing = signal(false, ...ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []);
+		this.atStart = signal(true, ...ngDevMode ? [{ debugName: "atStart" }] : /* istanbul ignore next */ []);
+		this.atEnd = signal(false, ...ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []);
+		this.viewport = viewChild.required("viewport", ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => this.measure());
+			resize?.observe(this.viewport().nativeElement);
+			const changes = new MutationObserver(() => this.measure());
+			changes.observe(this.viewport().nativeElement, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
+			destroyRef.onDestroy(() => {
+				resize?.disconnect();
+				changes.disconnect();
+			});
+			this.measure();
+		});
+		afterRenderEffect(() => {
+			this.tabs.value();
+			if (this.tabs.scrollable()) this.revealActive();
+			this.measure();
+		});
+	}
+	measure() {
+		const el = this.viewport().nativeElement;
+		this.overflowing.set(el.scrollWidth > el.clientWidth + 1);
+		const offset = Math.abs(el.scrollLeft);
+		this.atStart.set(offset <= 1);
+		this.atEnd.set(offset + el.clientWidth >= el.scrollWidth - 1);
+	}
+	scroll(direction) {
+		const el = this.viewport().nativeElement;
+		const rtl = getComputedStyle(el).direction === "rtl";
+		el.scrollBy({
+			left: direction * (rtl ? -1 : 1) * el.clientWidth * .75,
+			behavior: typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+		});
+	}
+	revealActive() {
+		const el = this.viewport().nativeElement;
+		const active = el.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+		if (!active) return;
+		const bounds = el.getBoundingClientRect();
+		const tab = active.getBoundingClientRect();
+		if (tab.left < bounds.left) el.scrollLeft += tab.left - bounds.left;
+		else if (tab.right > bounds.right) el.scrollLeft += tab.right - bounds.right;
 	}
 	keydown(event) {
-		const tabs = Array.from(this.host.nativeElement.querySelectorAll(":scope > ml-tab, :scope > * > ml-tab"));
+		const tabs = Array.from(this.host.nativeElement.querySelectorAll("[role=\"tab\"]"));
 		const at = tabs.indexOf(document.activeElement);
 		if (at < 0) return;
 		const to = {
@@ -4794,18 +4899,60 @@ var TabListComponent = class TabListComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "14.0.0",
+			minVersion: "17.0.0",
 			version: "22.2.4",
 			type: TabListComponent,
 			isStandalone: true,
 			selector: "ml-tablist",
 			host: {
-				attributes: { "role": "tablist" },
 				listeners: { "keydown": "keydown($event)" },
+				properties: { "class.ml-tablist--scrollable": "tabs.scrollable()" },
 				classAttribute: "ml-tablist"
 			},
+			viewQueries: [{
+				propertyName: "viewport",
+				first: true,
+				predicate: ["viewport"],
+				descendants: true,
+				isSignal: true
+			}],
 			ngImport: i0,
-			template: `<ng-content />`,
+			template: `
+        @if (tabs.scrollable() && overflowing()) {
+            <button
+                type="button"
+                class="ml-tablist__scroll-button"
+                [attr.aria-label]="tabs.previousButtonLabel()"
+                [disabled]="atStart()"
+                (click)="scroll(-1)"
+            >
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path d="m14 6-6 6 6 6" />
+                </svg>
+            </button>
+        }
+        <div
+            #viewport
+            class="ml-tablist__viewport"
+            role="tablist"
+            (scroll)="measure()"
+        >
+            <ng-content />
+        </div>
+        @if (tabs.scrollable() && overflowing()) {
+            <button
+                type="button"
+                class="ml-tablist__scroll-button"
+                [attr.aria-label]="tabs.nextButtonLabel()"
+                [disabled]="atEnd()"
+                (click)="scroll(1)"
+            >
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path d="m10 6 6 6-6 6" />
+                </svg>
+            </button>
+        }
+    `,
 			isInline: true,
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -4823,12 +4970,52 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				class: "ml-tablist",
-				role: "tablist",
+				"[class.ml-tablist--scrollable]": "tabs.scrollable()",
 				"(keydown)": "keydown($event)"
 			},
-			template: `<ng-content />`
+			template: `
+        @if (tabs.scrollable() && overflowing()) {
+            <button
+                type="button"
+                class="ml-tablist__scroll-button"
+                [attr.aria-label]="tabs.previousButtonLabel()"
+                [disabled]="atStart()"
+                (click)="scroll(-1)"
+            >
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path d="m14 6-6 6 6 6" />
+                </svg>
+            </button>
+        }
+        <div
+            #viewport
+            class="ml-tablist__viewport"
+            role="tablist"
+            (scroll)="measure()"
+        >
+            <ng-content />
+        </div>
+        @if (tabs.scrollable() && overflowing()) {
+            <button
+                type="button"
+                class="ml-tablist__scroll-button"
+                [attr.aria-label]="tabs.nextButtonLabel()"
+                [disabled]="atEnd()"
+                (click)="scroll(1)"
+            >
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path d="m10 6 6 6-6 6" />
+                </svg>
+            </button>
+        }
+    `
 		}]
-	}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { viewport: [{
+		type: i0.ViewChild,
+		args: ["viewport", { isSignal: true }]
+	}] }
 });
 var TabComponent = class TabComponent {
 	constructor() {