@tetacom/ng-components 1.2.6 → 1.2.7

package/fesm2022/tetacom-ng-components.mjs

@@ -9500,8 +9500,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }] } });
 
 class TabsComponent {
+    get verticalClassTabs() {
+        return this.direction === 'vertical';
+    }
     constructor() {
         this.classTabs = true;
+        /**
+         * Tabs direction
+         */
+        this.direction = 'horizontal';
+        /**
+         * Tabs size
+         */
+        this.size = 'm';
         /**
          * Whether the closed tabs should be hidden without destroying them
          */
@@ -9517,9 +9528,7 @@ class TabsComponent {
      */
     select(tabId) {
         const selectedTab = this._getTabById(tabId);
-        if (selectedTab &&
-            !selectedTab.disabled &&
-            this.activeId !== selectedTab.id) {
+        if (selectedTab && !selectedTab.disabled && this.activeId !== selectedTab.id) {
             let defaultPrevented = false;
             this.tabChange.emit({
                 activeId: this.activeId,
@@ -9535,27 +9544,30 @@ class TabsComponent {
     }
     ngAfterContentChecked() {
         const activeTab = this._getTabById(this.activeId);
-        this.activeId = activeTab
-            ? activeTab.id
-            : this.tabs.length
-                ? this.tabs.first.id
-                : null;
+        this.activeId = activeTab ? activeTab.id : this.tabs.length ? this.tabs.first.id : null;
     }
     _getTabById(id) {
         const tabsWithId = this.tabs.filter((tab) => tab.id === id);
         return tabsWithId.length ? tabsWithId[0] : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TabsComponent, isStandalone: true, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\" role=\"tablist\">\n  @for (tab of tabs; track tab) {\n    <div class=\"tabs-head-item\"\n      (click)=\"select(tab.id);\"\n      [class.tabs-head-item_active]=\"tab.id === activeId\"\n      [class.tabs-head-item_disabled]=\"tab.disabled\">\n      <span [id]=\"tab.id\" class=\"tabs-title\"\n        role=\"tab\"\n        [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n        [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n        [attr.aria-expanded]=\"tab.id === activeId\"\n        [attr.aria-disabled]=\"tab.disabled\">\n        {{tab.title}}\n        <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n      </span>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) {\n    @if (!destroyOnHide || tab.id === activeId) {\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TabsComponent, isStandalone: true, selector: "teta-tabs", inputs: { activeId: "activeId", direction: "direction", size: "size", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs", "class.tabs_vertical": "this.verticalClassTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div role=\"tablist\" class=\"tabs-head\" [class.tabs-head_small]=\"size === 's'\">\n  @for (tab of tabs; track tab) {\n  <button\n    type=\"button\"\n    class=\"tabs-head-item\"\n    (click)=\"select(tab.id)\"\n    [class.tabs-head-item_active]=\"tab.id === activeId\"\n    [disabled]=\"tab.disabled\"\n  >\n    <span\n      [id]=\"tab.id\"\n      class=\"tabs-title\"\n      role=\"tab\"\n      [attr.tabindex]=\"tab.disabled ? '-1' : undefined\"\n      [attr.aria-controls]=\"!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null\"\n      [attr.aria-expanded]=\"tab.id === activeId\"\n      [attr.aria-disabled]=\"tab.disabled\"\n    >\n      {{ tab.title }}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </button>\n  }\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) { @if (!destroyOnHide || tab.id === activeId) {\n  <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tabs', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"tabs-head\" role=\"tablist\">\n  @for (tab of tabs; track tab) {\n    <div class=\"tabs-head-item\"\n      (click)=\"select(tab.id);\"\n      [class.tabs-head-item_active]=\"tab.id === activeId\"\n      [class.tabs-head-item_disabled]=\"tab.disabled\">\n      <span [id]=\"tab.id\" class=\"tabs-title\"\n        role=\"tab\"\n        [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n        [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n        [attr.aria-expanded]=\"tab.id === activeId\"\n        [attr.aria-disabled]=\"tab.disabled\">\n        {{tab.title}}\n        <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n      </span>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) {\n    @if (!destroyOnHide || tab.id === activeId) {\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'teta-tabs', standalone: true, imports: [NgTemplateOutlet], template: "<div role=\"tablist\" class=\"tabs-head\" [class.tabs-head_small]=\"size === 's'\">\n  @for (tab of tabs; track tab) {\n  <button\n    type=\"button\"\n    class=\"tabs-head-item\"\n    (click)=\"select(tab.id)\"\n    [class.tabs-head-item_active]=\"tab.id === activeId\"\n    [disabled]=\"tab.disabled\"\n  >\n    <span\n      [id]=\"tab.id\"\n      class=\"tabs-title\"\n      role=\"tab\"\n      [attr.tabindex]=\"tab.disabled ? '-1' : undefined\"\n      [attr.aria-controls]=\"!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null\"\n      [attr.aria-expanded]=\"tab.id === activeId\"\n      [attr.aria-disabled]=\"tab.disabled\"\n    >\n      {{ tab.title }}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </button>\n  }\n</div>\n<div class=\"tabs-content\">\n  @for (tab of tabs; track tab) { @if (!destroyOnHide || tab.id === activeId) {\n  <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n  } }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { classTabs: [{
                 type: HostBinding,
                 args: ['class.tabs']
+            }], verticalClassTabs: [{
+                type: HostBinding,
+                args: ['class.tabs_vertical']
             }], activeId: [{
                 type: Input
+            }], direction: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], destroyOnHide: [{
                 type: Input
             }], tabChange: [{
@@ -9580,7 +9592,7 @@ class HeadCellDropdownComponent {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: HeadCellDropdownComponent, isStandalone: true, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "@if (dropDownOpen) {\n  <teta-tabs class=\"column_auto\">\n    @for (tab of tabTemplates; track trackIndex($index)) {\n      @if (tab.showTab(column)) {\n        <teta-tab>\n          <ng-template tetaTabTitle>\n            @if (tab.icon) {\n              <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n            }\n          </ng-template>\n          <ng-template tetaTabContent>\n            <ng-container\n          *ngTemplateOutlet=\"tab.template; context: {\n            column: column,\n            columns: columns,\n            data: data,\n            state: state,\n            close: closeDropdown\n          }\"></ng-container>\n          </ng-template>\n        </teta-tab>\n      }\n    }\n  </teta-tabs>\n}\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: HeadCellDropdownComponent, isStandalone: true, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "@if (dropDownOpen) {\n  <teta-tabs class=\"column_auto\">\n    @for (tab of tabTemplates; track trackIndex($index)) {\n      @if (tab.showTab(column)) {\n        <teta-tab>\n          <ng-template tetaTabTitle>\n            @if (tab.icon) {\n              <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n            }\n          </ng-template>\n          <ng-template tetaTabContent>\n            <ng-container\n          *ngTemplateOutlet=\"tab.template; context: {\n            column: column,\n            columns: columns,\n            data: data,\n            state: state,\n            close: closeDropdown\n          }\"></ng-container>\n          </ng-template>\n        </teta-tab>\n      }\n    }\n  </teta-tabs>\n}\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "direction", "size", "destroyOnHide"], outputs: ["tabChange"] }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
             type: Component,