ux4g-components-angular 1.4.0 → 1.5.0

package/dist/native/tabs/fesm2022/ux4g-components-angular-native-tabs.mjs

@@ -0,0 +1,190 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { generateTabsDOM } from 'ux4g-components-web/dom-generators';
+import { BaseNativeComponent, renderDescriptorToDOM } from '@ux4g-native-shared';
+
+/**
+ * UX4G Native Tabs — Angular Native Wrapper for the UX4G Tabs component.
+ *
+ * Generates the complete tablist DOM with proper ARIA attributes,
+ * keyboard navigation, and Runtime_JS-compatible data attributes.
+ *
+ * Usage:
+ * ```html
+ * <ux4g-native-tabs
+ *   [tabs]="tabItems"
+ *   [activeIndex]="0"
+ *   variant="underline"
+ *   size="md"
+ *   (tabChange)="onTabChange($event)">
+ * </ux4g-native-tabs>
+ * ```
+ */
+class UX4GNativeTabsComponent extends BaseNativeComponent {
+    constructor() {
+        super(...arguments);
+        this.tabs = [];
+        this.activeIndex = 0;
+        this.variant = 'underline';
+        this.size = 'md';
+        this.vertical = false;
+        this.tabChange = new EventEmitter();
+        this.clickListener = null;
+        this.keydownListener = null;
+    }
+    ngOnChanges(_changes) {
+        this.renderComponent();
+    }
+    renderComponent() {
+        super.renderComponent();
+        if (!this.tabs || this.tabs.length === 0) {
+            return;
+        }
+        const descriptor = generateTabsDOM({
+            tabs: this.tabs,
+            activeIndex: this.activeIndex,
+            variant: this.variant,
+            size: this.size,
+            vertical: this.vertical,
+        });
+        const hostEl = this.elementRef.nativeElement;
+        renderDescriptorToDOM(this.renderer, descriptor, hostEl);
+        this.attachEventListeners();
+    }
+    attachEventListeners() {
+        this.removeEventListeners();
+        const hostEl = this.elementRef.nativeElement;
+        // Click delegation for tab selection
+        this.clickListener = this.renderer.listen(hostEl, 'click', (event) => {
+            const target = event.target;
+            const tabButton = target.closest('[role="tab"]');
+            if (tabButton) {
+                const tablist = tabButton.parentElement;
+                if (tablist) {
+                    const tabButtons = Array.from(tablist.querySelectorAll('[role="tab"]'));
+                    const index = tabButtons.indexOf(tabButton);
+                    if (index >= 0 && !this.tabs[index]?.disabled) {
+                        this.activeIndex = index;
+                        this.tabChange.emit(index);
+                        this.renderComponent();
+                    }
+                }
+            }
+        });
+        // Keyboard navigation for tabs
+        this.keydownListener = this.renderer.listen(hostEl, 'keydown', (event) => {
+            const target = event.target;
+            if (target.getAttribute('role') !== 'tab')
+                return;
+            const isHorizontal = !this.vertical;
+            const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+            const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+            let newIndex = -1;
+            if (event.key === nextKey) {
+                event.preventDefault();
+                let candidate = this.activeIndex;
+                do {
+                    candidate = (candidate + 1) % this.tabs.length;
+                } while (this.tabs[candidate].disabled && candidate !== this.activeIndex);
+                if (!this.tabs[candidate].disabled)
+                    newIndex = candidate;
+            }
+            else if (event.key === prevKey) {
+                event.preventDefault();
+                let candidate = this.activeIndex;
+                do {
+                    candidate = (candidate - 1 + this.tabs.length) % this.tabs.length;
+                } while (this.tabs[candidate].disabled && candidate !== this.activeIndex);
+                if (!this.tabs[candidate].disabled)
+                    newIndex = candidate;
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                const first = this.tabs.findIndex((tab) => !tab.disabled);
+                if (first !== -1)
+                    newIndex = first;
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                for (let i = this.tabs.length - 1; i >= 0; i--) {
+                    if (!this.tabs[i].disabled) {
+                        newIndex = i;
+                        break;
+                    }
+                }
+            }
+            if (newIndex >= 0 && newIndex !== this.activeIndex) {
+                this.activeIndex = newIndex;
+                this.tabChange.emit(newIndex);
+                this.renderComponent();
+                // Focus the newly active tab
+                const hostEl = this.elementRef.nativeElement;
+                const tabButtons = hostEl.querySelectorAll('[role="tab"]');
+                if (tabButtons[newIndex]) {
+                    tabButtons[newIndex].focus();
+                }
+            }
+        });
+    }
+    removeEventListeners() {
+        if (this.clickListener) {
+            this.clickListener();
+            this.clickListener = null;
+        }
+        if (this.keydownListener) {
+            this.keydownListener();
+            this.keydownListener = null;
+        }
+    }
+    ngOnDestroy() {
+        this.removeEventListeners();
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: UX4GNativeTabsComponent, isStandalone: true, selector: "ux4g-native-tabs", inputs: { tabs: "tabs", activeIndex: "activeIndex", variant: "variant", size: "size", vertical: "vertical" }, outputs: { tabChange: "tabChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ux4g-native-tabs',
+                    standalone: true,
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], tabChange: [{
+                type: Output
+            }] } });
+
+/**
+ * NgModule for backward compatibility with module-based Angular applications.
+ * For standalone components (Angular 17+), import UX4GNativeTabsComponent directly.
+ */
+class UX4GNativeTabsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTabsModule, imports: [UX4GNativeTabsComponent], exports: [UX4GNativeTabsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTabsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [UX4GNativeTabsComponent],
+                    exports: [UX4GNativeTabsComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UX4GNativeTabsComponent, UX4GNativeTabsModule };
+//# sourceMappingURL=ux4g-components-angular-native-tabs.mjs.map

package/dist/native/tabs/fesm2022/ux4g-components-angular-native-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-components-angular-native-tabs.mjs","sources":["../../../../src/native/tabs/ux4g-native-tabs.component.ts","../../../../src/native/tabs/ux4g-native-tabs.module.ts","../../../../src/native/tabs/ux4g-components-angular-native-tabs.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ViewEncapsulation,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  OnDestroy,\r\n} from '@angular/core';\r\nimport { generateTabsDOM } from 'ux4g-components-web/dom-generators';\r\nimport { TabVariant, TabSize } from 'ux4g-components-web/types';\r\nimport { BaseNativeComponent, renderDescriptorToDOM } from '@ux4g-native-shared';\r\n\r\n/**\r\n * UX4G Native Tabs — Angular Native Wrapper for the UX4G Tabs component.\r\n *\r\n * Generates the complete tablist DOM with proper ARIA attributes,\r\n * keyboard navigation, and Runtime_JS-compatible data attributes.\r\n *\r\n * Usage:\r\n * ```html\r\n * <ux4g-native-tabs\r\n *   [tabs]=\"tabItems\"\r\n *   [activeIndex]=\"0\"\r\n *   variant=\"underline\"\r\n *   size=\"md\"\r\n *   (tabChange)=\"onTabChange($event)\">\r\n * </ux4g-native-tabs>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'ux4g-native-tabs',\r\n  standalone: true,\r\n  template: '',\r\n  encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class UX4GNativeTabsComponent extends BaseNativeComponent implements OnChanges, OnDestroy {\r\n  @Input() tabs: Array<{ label: string; content: string; disabled?: boolean }> = [];\r\n  @Input() activeIndex: number = 0;\r\n  @Input() variant: TabVariant = 'underline';\r\n  @Input() size: TabSize = 'md';\r\n  @Input() vertical: boolean = false;\r\n\r\n  @Output() tabChange = new EventEmitter<number>();\r\n\r\n  private clickListener: (() => void) | null = null;\r\n  private keydownListener: (() => void) | null = null;\r\n\r\n  ngOnChanges(_changes: SimpleChanges): void {\r\n    this.renderComponent();\r\n  }\r\n\r\n  protected override renderComponent(): void {\r\n    super.renderComponent();\r\n\r\n    if (!this.tabs || this.tabs.length === 0) {\r\n      return;\r\n    }\r\n\r\n    const descriptor = generateTabsDOM({\r\n      tabs: this.tabs,\r\n      activeIndex: this.activeIndex,\r\n      variant: this.variant,\r\n      size: this.size,\r\n      vertical: this.vertical,\r\n    });\r\n\r\n    const hostEl = this.elementRef.nativeElement;\r\n    renderDescriptorToDOM(this.renderer, descriptor, hostEl);\r\n\r\n    this.attachEventListeners();\r\n  }\r\n\r\n  private attachEventListeners(): void {\r\n    this.removeEventListeners();\r\n\r\n    const hostEl = this.elementRef.nativeElement;\r\n\r\n    // Click delegation for tab selection\r\n    this.clickListener = this.renderer.listen(hostEl, 'click', (event: Event) => {\r\n      const target = event.target as HTMLElement;\r\n      const tabButton = target.closest('[role=\"tab\"]') as HTMLElement | null;\r\n      if (tabButton) {\r\n        const tablist = tabButton.parentElement;\r\n        if (tablist) {\r\n          const tabButtons = Array.from(tablist.querySelectorAll('[role=\"tab\"]'));\r\n          const index = tabButtons.indexOf(tabButton);\r\n          if (index >= 0 && !this.tabs[index]?.disabled) {\r\n            this.activeIndex = index;\r\n            this.tabChange.emit(index);\r\n            this.renderComponent();\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n    // Keyboard navigation for tabs\r\n    this.keydownListener = this.renderer.listen(hostEl, 'keydown', (event: KeyboardEvent) => {\r\n      const target = event.target as HTMLElement;\r\n      if (target.getAttribute('role') !== 'tab') return;\r\n\r\n      const isHorizontal = !this.vertical;\r\n      const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\r\n      const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\r\n\r\n      let newIndex = -1;\r\n\r\n      if (event.key === nextKey) {\r\n        event.preventDefault();\r\n        let candidate = this.activeIndex;\r\n        do {\r\n          candidate = (candidate + 1) % this.tabs.length;\r\n        } while (this.tabs[candidate].disabled && candidate !== this.activeIndex);\r\n        if (!this.tabs[candidate].disabled) newIndex = candidate;\r\n      } else if (event.key === prevKey) {\r\n        event.preventDefault();\r\n        let candidate = this.activeIndex;\r\n        do {\r\n          candidate = (candidate - 1 + this.tabs.length) % this.tabs.length;\r\n        } while (this.tabs[candidate].disabled && candidate !== this.activeIndex);\r\n        if (!this.tabs[candidate].disabled) newIndex = candidate;\r\n      } else if (event.key === 'Home') {\r\n        event.preventDefault();\r\n        const first = this.tabs.findIndex((tab) => !tab.disabled);\r\n        if (first !== -1) newIndex = first;\r\n      } else if (event.key === 'End') {\r\n        event.preventDefault();\r\n        for (let i = this.tabs.length - 1; i >= 0; i--) {\r\n          if (!this.tabs[i].disabled) {\r\n            newIndex = i;\r\n            break;\r\n          }\r\n        }\r\n      }\r\n\r\n      if (newIndex >= 0 && newIndex !== this.activeIndex) {\r\n        this.activeIndex = newIndex;\r\n        this.tabChange.emit(newIndex);\r\n        this.renderComponent();\r\n\r\n        // Focus the newly active tab\r\n        const hostEl = this.elementRef.nativeElement;\r\n        const tabButtons = hostEl.querySelectorAll('[role=\"tab\"]');\r\n        if (tabButtons[newIndex]) {\r\n          (tabButtons[newIndex] as HTMLElement).focus();\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  private removeEventListeners(): void {\r\n    if (this.clickListener) {\r\n      this.clickListener();\r\n      this.clickListener = null;\r\n    }\r\n    if (this.keydownListener) {\r\n      this.keydownListener();\r\n      this.keydownListener = null;\r\n    }\r\n  }\r\n\r\n  override ngOnDestroy(): void {\r\n    this.removeEventListeners();\r\n    super.ngOnDestroy();\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { UX4GNativeTabsComponent } from './ux4g-native-tabs.component';\r\n\r\n/**\r\n * NgModule for backward compatibility with module-based Angular applications.\r\n * For standalone components (Angular 17+), import UX4GNativeTabsComponent directly.\r\n */\r\n@NgModule({\r\n  imports: [UX4GNativeTabsComponent],\r\n  exports: [UX4GNativeTabsComponent],\r\n})\r\nexport class UX4GNativeTabsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/dist/native/tabs/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ux4g-components-angular" />
+export * from './public-api';
+//# sourceMappingURL=ux4g-components-angular-native-tabs.d.ts.map

package/dist/native/tabs/public-api.d.ts

@@ -0,0 +1,3 @@
+export { UX4GNativeTabsComponent } from './ux4g-native-tabs.component';
+export { UX4GNativeTabsModule } from './ux4g-native-tabs.module';
+//# sourceMappingURL=public-api.d.ts.map

package/dist/native/tabs/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../src/native/tabs/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/native/tabs/ux4g-components-angular-native-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-components-angular-native-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/tabs/ux4g-components-angular-native-tabs.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}

package/dist/native/tabs/ux4g-native-tabs.component.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { TabVariant, TabSize } from 'ux4g-components-web/types';
+import { BaseNativeComponent } from '@ux4g-native-shared';
+import * as i0 from "@angular/core";
+/**
+ * UX4G Native Tabs — Angular Native Wrapper for the UX4G Tabs component.
+ *
+ * Generates the complete tablist DOM with proper ARIA attributes,
+ * keyboard navigation, and Runtime_JS-compatible data attributes.
+ *
+ * Usage:
+ * ```html
+ * <ux4g-native-tabs
+ *   [tabs]="tabItems"
+ *   [activeIndex]="0"
+ *   variant="underline"
+ *   size="md"
+ *   (tabChange)="onTabChange($event)">
+ * </ux4g-native-tabs>
+ * ```
+ */
+export declare class UX4GNativeTabsComponent extends BaseNativeComponent implements OnChanges, OnDestroy {
+    tabs: Array<{
+        label: string;
+        content: string;
+        disabled?: boolean;
+    }>;
+    activeIndex: number;
+    variant: TabVariant;
+    size: TabSize;
+    vertical: boolean;
+    tabChange: EventEmitter<number>;
+    private clickListener;
+    private keydownListener;
+    ngOnChanges(_changes: SimpleChanges): void;
+    protected renderComponent(): void;
+    private attachEventListeners;
+    private removeEventListeners;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UX4GNativeTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UX4GNativeTabsComponent, "ux4g-native-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=ux4g-native-tabs.component.d.ts.map

package/dist/native/tabs/ux4g-native-tabs.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-native-tabs.component.d.ts","sourceRoot":"","sources":["../../../src/native/tabs/ux4g-native-tabs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAEZ,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAyB,MAAM,qBAAqB,CAAC;;AAEjF;;;;;;;;;;;;;;;;GAgBG;AACH,qBAMa,uBAAwB,SAAQ,mBAAoB,YAAW,SAAS,EAAE,SAAS;IACrF,IAAI,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAM;IACzE,WAAW,EAAE,MAAM,CAAK;IACxB,OAAO,EAAE,UAAU,CAAe;IAClC,IAAI,EAAE,OAAO,CAAQ;IACrB,QAAQ,EAAE,OAAO,CAAS;IAEzB,SAAS,uBAA8B;IAEjD,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,eAAe,CAA6B;IAEpD,WAAW,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;cAIvB,eAAe,IAAI,IAAI;IAqB1C,OAAO,CAAC,oBAAoB;IA6E5B,OAAO,CAAC,oBAAoB;IAWnB,WAAW,IAAI,IAAI;yCA7HjB,uBAAuB;2CAAvB,uBAAuB;CAiInC"}

package/dist/native/tabs/ux4g-native-tabs.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ux4g-native-tabs.component";
+/**
+ * NgModule for backward compatibility with module-based Angular applications.
+ * For standalone components (Angular 17+), import UX4GNativeTabsComponent directly.
+ */
+export declare class UX4GNativeTabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UX4GNativeTabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UX4GNativeTabsModule, never, [typeof i1.UX4GNativeTabsComponent], [typeof i1.UX4GNativeTabsComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UX4GNativeTabsModule>;
+}
+//# sourceMappingURL=ux4g-native-tabs.module.d.ts.map

package/dist/native/tabs/ux4g-native-tabs.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-native-tabs.module.d.ts","sourceRoot":"","sources":["../../../src/native/tabs/ux4g-native-tabs.module.ts"],"names":[],"mappings":";;AAGA;;;GAGG;AACH,qBAIa,oBAAoB;yCAApB,oBAAoB;0CAApB,oBAAoB;0CAApB,oBAAoB;CAAG"}