@tekus/design-system 5.10.0 → 5.16.0

package/fesm2022/tekus-design-system-components-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import { Component, computed, input, EventEmitter, Type, ElementRef } from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content, titles, and footer actions.\n * The modal is not instantiated via template bindings, but rather opened through a service with a configuration object.\n *\n * This component supports:\n * - Configurable title and content.\n * - Optional footer buttons with callbacks and return values.\n * - Multiple sizes: `'small' | 'large' | 'full'`.\n * - Closable modal and outside-click behavior.\n * - Passing arbitrary data to the modal instance.\n *\n * @usage\n * ### Open a modal from TypeScript using the modal service\n * ```ts\n * this.modalService.open({\n *   title: 'Demo Modal',\n *   content: 'This modal is opened from TypeScript using the service.',\n *   footerButtons: [\n *     {\n *       label: 'Accept',\n *       severity: 'secondary',\n *       action: () => console.log('Accept clicked'),\n *       returnValue: true,\n *     },\n *     {\n *       label: 'Cancel',\n *       severity: 'danger',\n *       action: () => console.log('Cancel clicked'),\n *       returnValue: false,\n *     },\n *   ],\n *   size: 'small',\n *   closable: true,\n *   closeOnOutsideClick: false,\n * }).subscribe((result) => {\n *   console.log('Modal closed with value:', result);\n * });\n * ```\n */\n\n@Component({\n  selector: 'tk-modal',\n  standalone: true,\n  imports: [DialogModule, ButtonComponent, NgComponentOutlet],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss']\n})\nexport class ModalComponent {\n\n  constructor(private readonly elementRef: ElementRef) {}\n\n   /** The title displayed at the top of the modal */\n  title = input<string>('');\n  /** The main content of the modal */\n  content = input<string | Type<unknown> | null>(null);\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n  /** Modal size: 'small', 'large', or 'full' */\n  size = input<ModalSizeType>('small');\n  /** Whether the modal can be closed by the user */\n  closable = input<boolean>(true);\n   /** Whether clicking outside closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n  isContentString = computed(() => typeof this.content() === 'string');\n  /** Computed: whether the modal has footer buttons */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n  /** Computed: calculates modal width based on `size` */\n  modalWidth = computed(() => {\n  switch (this.size()) {\n    case 'large':\n      return '67.5rem'; // Large\n    case 'medium':\n      return '35rem';    // Medium\n    case 'full':\n      return '98vw';    // Full\n    default:\n      return '25rem';   // Small\n  }\n});\n  /** Whether the modal content has a scrollbar */\n  hasScroll = false;\n\n  /** Visibility flag */\n  isOpened: boolean = false;\n\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly onClose = new EventEmitter<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  /** Opens the modal */\n  open() {\n    this.isOpened = true;\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /**\n   * Checks if the modal content has a scrollbar and updates `hasScroll` state.\n   * This is called when the modal is shown.\n   */\n  checkScroll() {\n    const contentEl = this.elementRef.nativeElement.querySelector('.p-dialog-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  /** Closes the modal and emits onClose with null */\n handleClose() {\n    if (!this.alreadyEmitted) {\n      this.onClose.emit(null);\n    } else {\n      this.onClose.emit(this.returnValueOnClose);\n    }\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /** Closes the modal without emitting an event */\n  close() {\n    this.isOpened = false;\n  }\n\n  /**\n   * Handles footer button actions.\n   * Executes the action callback, emits `onClose` with the provided returnValue, then closes the modal.\n   * @param action Callback to execute when the button is clicked\n   * @param returnValue Value emitted on modal close\n   */\n  handleAction(action: (() => void) | undefined, returnValue: unknown) {\n    if (action) action();\n    this.alreadyEmitted = true;\n    this.returnValueOnClose = returnValue;\n    this.isOpened = false;\n  }\n}\n","<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ width: modalWidth() }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\"\n>\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\" ></p>\n      } @else {\n        <ng-container *ngComponentOutlet=\"$any(content())\"></ng-container>\n      }\n    }\n  </section>\n\n <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section class=\"tk-modal__footer\" [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n          />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>","import {\n  Injectable,\n  ApplicationRef,\n  ComponentRef,\n  Injector,\n  createComponent,\n  EmbeddedViewRef,\n} from '@angular/core';\nimport { ModalComponent } from '../modal.component';\nimport { Observable, Subject } from 'rxjs';\nimport { ModalConfig } from '../modal.types';\n\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private modalRef: ComponentRef<ModalComponent> | null = null;\n\n  constructor(\n    private readonly injector: Injector,\n    private readonly appRef: ApplicationRef\n  ) {}\n\n  get _modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.modalRef;\n  }\n  set _modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.modalRef = ref;\n  }\n\n  open(config: ModalConfig): Observable<unknown> {\n  if (this.modalRef) {\n    return this.modalRef.instance.onClose.asObservable();\n  }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    });\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content ?? null);\n    componentRef.setInput('footerButtons', config.footerButtons ?? []);\n    componentRef.setInput('size', config.size ?? 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n\n    const close$ = new Subject<unknown>();\n\n    componentRef.instance.onClose.subscribe((value) => {\n      close$.next(value);\n      close$.complete();\n\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.modalRef = null;\n    });\n\n    componentRef.instance.open();\n    this.modalRef = componentRef;\n\n    return close$.asObservable();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import { Component, computed, input, EventEmitter, Type, ElementRef } from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content, titles, and footer actions.\n * The modal is not instantiated via template bindings, but rather opened through a service with a configuration object.\n *\n * This component supports:\n * - Configurable title and content.\n * - Optional footer buttons with callbacks and return values.\n * - Multiple sizes: `'small' | 'large' | 'full'`.\n * - Closable modal and outside-click behavior.\n * - Passing arbitrary data to the modal instance.\n *\n * @usage\n * ### Open a modal from TypeScript using the modal service\n * ```ts\n * this.modalService.open({\n *   title: 'Demo Modal',\n *   content: 'This modal is opened from TypeScript using the service.',\n *   footerButtons: [\n *     {\n *       label: 'Accept',\n *       severity: 'secondary',\n *       action: () => console.log('Accept clicked'),\n *       returnValue: true,\n *     },\n *     {\n *       label: 'Cancel',\n *       severity: 'danger',\n *       action: () => console.log('Cancel clicked'),\n *       returnValue: false,\n *     },\n *   ],\n *   size: 'small',\n *   closable: true,\n *   closeOnOutsideClick: false,\n * }).subscribe((result) => {\n *   console.log('Modal closed with value:', result);\n * });\n * ```\n */\n\n@Component({\n  selector: 'tk-modal',\n  standalone: true,\n  imports: [DialogModule, ButtonComponent, NgComponentOutlet],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss']\n})\nexport class ModalComponent {\n\n  constructor(private readonly elementRef: ElementRef) {}\n\n   /** The title displayed at the top of the modal */\n  title = input<string>('');\n  /** The main content of the modal */\n  content = input<string | Type<unknown> | null>(null);\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n  /** Modal size: 'small', 'large', or 'full' */\n  size = input<ModalSizeType>('small');\n  /** Whether the modal can be closed by the user */\n  closable = input<boolean>(true);\n   /** Whether clicking outside closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n  isContentString = computed(() => typeof this.content() === 'string');\n  /** Computed: whether the modal has footer buttons */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n\n  /**\n   * Whether the modal should be responsive on mobile screens.\n   * If true, the modal width will adapt based on breakpoints.\n   * @default true\n   */\n  responsive = input<boolean>(true);\n\n  /** Computed: calculates modal max-width based on `size` */\n  modalMaxWidth = computed(() => {\n    switch (this.size()) {\n      case 'large':\n        return '67.5rem'; // Large\n      case 'medium':\n        return '35rem';    // Medium\n      case 'full':\n        return '98vw';    // Full\n      default:\n        return '25rem';   // Small\n    }\n  });\n  /** Whether the modal content has a scrollbar */\n  hasScroll = false;\n\n  /** Visibility flag */\n  isOpened: boolean = false;\n\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly onClose = new EventEmitter<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  /** Opens the modal */\n  open() {\n    this.isOpened = true;\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /**\n   * Checks if the modal content has a scrollbar and updates `hasScroll` state.\n   * This is called when the modal is shown.\n   */\n  checkScroll() {\n    const contentEl = this.elementRef.nativeElement.querySelector('.p-dialog-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  /** Closes the modal and emits onClose with null */\n handleClose() {\n    if (!this.alreadyEmitted) {\n      this.onClose.emit(null);\n    } else {\n      this.onClose.emit(this.returnValueOnClose);\n    }\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /** Closes the modal without emitting an event */\n  close() {\n    this.isOpened = false;\n  }\n\n  /**\n   * Handles footer button actions.\n   * Executes the action callback, emits `onClose` with the provided returnValue, then closes the modal.\n   * @param action Callback to execute when the button is clicked\n   * @param returnValue Value emitted on modal close\n   */\n  handleAction(action: (() => void) | undefined, returnValue: unknown) {\n    if (action) action();\n    this.alreadyEmitted = true;\n    this.returnValueOnClose = returnValue;\n    this.isOpened = false;\n  }\n}","<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ 'max-width': modalMaxWidth(), width: 'calc(100% - var(--tk-spacing-base-200))' }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\"\n>\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\" ></p>\n      } @else {\n        <ng-container *ngComponentOutlet=\"$any(content())\"></ng-container>\n      }\n    }\n  </section>\n\n <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section class=\"tk-modal__footer\" [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n          />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n","import {\n  Injectable,\n  ApplicationRef,\n  ComponentRef,\n  Injector,\n  createComponent,\n  EmbeddedViewRef,\n} from '@angular/core';\nimport { ModalComponent } from '../modal.component';\nimport { Observable, Subject } from 'rxjs';\nimport { ModalConfig } from '../modal.types';\n\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private modalRef: ComponentRef<ModalComponent> | null = null;\n\n  constructor(\n    private readonly injector: Injector,\n    private readonly appRef: ApplicationRef\n  ) {}\n\n  get _modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.modalRef;\n  }\n  set _modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.modalRef = ref;\n  }\n\n  open(config: ModalConfig): Observable<unknown> {\n  if (this.modalRef) {\n    return this.modalRef.instance.onClose.asObservable();\n  }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    });\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content ?? null);\n    componentRef.setInput('footerButtons', config.footerButtons ?? []);\n    componentRef.setInput('size', config.size ?? 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n\n    const close$ = new Subject<unknown>();\n\n    componentRef.instance.onClose.subscribe((value) => {\n      close$.next(value);\n      close$.complete();\n\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.modalRef = null;\n    });\n\n    componentRef.instance.open();\n    this.modalRef = componentRef;\n\n    return close$.asObservable();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-tabs.mjs

@@ -0,0 +1,77 @@
+import * as i0 from '@angular/core';
+import { input, model, output, viewChild, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import { TooltipComponent } from '@tekus/design-system/components/tooltip';
+import { BadgeComponent } from '@tekus/design-system/components/badge';
+
+class TabsComponent {
+    constructor() {
+        /**
+         * @property {InputSignal<TabData[]>} tabs
+         * @description
+         * Array of tab configurations to display.
+         */
+        this.tabs = input([]);
+        /**
+         * @property {ModelSignal<number>} activeIndex
+         * @description
+         * The index of the currently active tab. Supports two-way binding via signals.
+         * @default 0
+         */
+        this.activeIndex = model(0);
+        /**
+         * @event tabChange
+         * @description
+         * Emitted when the active tab changes.
+         * Payload: object containing the tab index and tab data.
+         *
+         * @example
+         * <tk-tabs (tabChange)="onTabChange($event)"></tk-tabs>
+         */
+        this.tabChange = output();
+        /**
+         * @property {ViewChild<TabsComponent>} tkTabs
+         * @description
+         * Reference to the tabs component for programmatic access.
+         */
+        this.tkTabs = viewChild('tkTabs');
+    }
+    /**
+     * @method visibleTabs
+     * @description
+     * Returns only the tabs that are marked as visible.
+     * @returns {TabData[]} Array of visible tabs.
+     */
+    get visibleTabs() {
+        return this.tabs().filter(t => t.visible !== false);
+    }
+    /**
+     * @method onTabChange
+     * @description
+     * Handles tab change events and emits the tabChange output.
+     * @param {number} index - The index of the newly selected tab.
+     */
+    onTabChange(index) {
+        this.activeIndex.set(index);
+        this.tabChange.emit({
+            index,
+            tab: this.visibleTabs[index],
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TabsComponent, isStandalone: true, selector: "tk-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tkTabs", first: true, predicate: ["tkTabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-tabs\n  #tkTabs\n  [value]=\"activeIndex()\"\n  scrollable\n  (valueChange)=\"onTabChange(+$event)\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    <p-tab\n      *ngFor=\"let tab of visibleTabs; let i = index\"\n      [value]=\"i\"\n      [disabled]=\"tab.disabled\"\n      tooltipPosition=\"top\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span\n          class=\"tk-tab-label\"\n          [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-tabs', imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent], template: "<p-tabs\n  #tkTabs\n  [value]=\"activeIndex()\"\n  scrollable\n  (valueChange)=\"onTabChange(+$event)\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    <p-tab\n      *ngFor=\"let tab of visibleTabs; let i = index\"\n      [value]=\"i\"\n      [disabled]=\"tab.disabled\"\n      tooltipPosition=\"top\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span\n          class=\"tk-tab-label\"\n          [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TabsComponent };
+//# sourceMappingURL=tekus-design-system-components-tabs.mjs.map

package/fesm2022/tekus-design-system-components-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-tabs.mjs","sources":["../../../projects/design-system/components/tabs/src/tabs.component.ts","../../../projects/design-system/components/tabs/src/tabs.component.html","../../../projects/design-system/components/tabs/tekus-design-system-components-tabs.ts"],"sourcesContent":["import { Component, input, output, model, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsModule } from 'primeng/tabs';\nimport { TabData } from './tabs.interface';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\nimport { BadgeComponent } from '@tekus/design-system/components/badge';\n\n@Component({\n  selector: 'tk-tabs',\n  imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent],\n  templateUrl: './tabs.component.html',\n  styleUrl: './tabs.component.scss',\n})\nexport class TabsComponent {\n  /**\n   * @property {InputSignal<TabData[]>} tabs\n   * @description\n   * Array of tab configurations to display.\n   */\n  tabs = input<TabData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeIndex\n   * @description\n   * The index of the currently active tab. Supports two-way binding via signals.\n   * @default 0\n   */\n  activeIndex = model<number>(0);\n\n  /**\n   * @event tabChange\n   * @description\n   * Emitted when the active tab changes.\n   * Payload: object containing the tab index and tab data.\n   *\n   * @example\n   * <tk-tabs (tabChange)=\"onTabChange($event)\"></tk-tabs>\n   */\n  tabChange = output<{\n    index: number;\n    tab: TabData;\n  }>();\n\n  /**\n   * @property {ViewChild<TabsComponent>} tkTabs\n   * @description\n   * Reference to the tabs component for programmatic access.\n   */\n  tkTabs = viewChild('tkTabs');\n\n  /**\n   * @method visibleTabs\n   * @description\n   * Returns only the tabs that are marked as visible.\n   * @returns {TabData[]} Array of visible tabs.\n   */\n  get visibleTabs(): TabData[] {\n    return this.tabs().filter(t => t.visible !== false);\n  }\n\n  /**\n   * @method onTabChange\n   * @description\n   * Handles tab change events and emits the tabChange output.\n   * @param {number} index - The index of the newly selected tab.\n   */\n  onTabChange(index: number) {\n    this.activeIndex.set(index);\n\n    this.tabChange.emit({\n      index,\n      tab: this.visibleTabs[index],\n    });\n  }\n}\n","<p-tabs\n  #tkTabs\n  [value]=\"activeIndex()\"\n  scrollable\n  (valueChange)=\"onTabChange(+$event)\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    <p-tab\n      *ngFor=\"let tab of visibleTabs; let i = index\"\n      [value]=\"i\"\n      [disabled]=\"tab.disabled\"\n      tooltipPosition=\"top\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span\n          class=\"tk-tab-label\"\n          [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.10.0",
+  "version": "5.16.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -39,18 +39,14 @@
       "types": "./core/index.d.ts",
       "default": "./fesm2022/tekus-design-system-core.mjs"
     },
-    "./directives/gird-item": {
-      "types": "./directives/gird-item/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
-    },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-core-types.mjs"
-    },
     "./components/autocomplete": {
       "types": "./components/autocomplete/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-autocomplete.mjs"
     },
+    "./components/badge": {
+      "types": "./components/badge/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-badge.mjs"
+    },
     "./components/button": {
       "types": "./components/button/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-button.mjs"
@@ -71,6 +67,10 @@
       "types": "./components/icon/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-icon.mjs"
     },
+    "./components/input-number": {
+      "types": "./components/input-number/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-input-number.mjs"
+    },
     "./components/input-text": {
       "types": "./components/input-text/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-input-text.mjs"
@@ -99,6 +99,10 @@
       "types": "./components/table/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-table.mjs"
     },
+    "./components/tabs": {
+      "types": "./components/tabs/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-tabs.mjs"
+    },
     "./components/tag": {
       "types": "./components/tag/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-tag.mjs"
@@ -115,6 +119,14 @@
       "types": "./components/tooltip/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-tooltip.mjs"
     },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    },
+    "./directives/gird-item": {
+      "types": "./directives/gird-item/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
+    },
     "./utils/sanitizer-utils": {
       "types": "./utils/sanitizer-utils/index.d.ts",
       "default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"