@brickclay-org/ui 0.0.37 → 0.0.39

package/fesm2022/brickclay-org-ui.mjs

@@ -3982,6 +3982,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class BkTabs {
+    list = [];
+    activeTabId = '';
+    disabled = false;
+    change = new EventEmitter();
+    // Set active tab and emit change event
+    setActiveTab(tab) {
+        debugger;
+        if (tab?.disabled || this.disabled)
+            return;
+        this.activeTabId = tab.id;
+        this.change.emit(tab);
+    }
+    // Check if a tab is active
+    isActive(tabId) {
+        return this.activeTabId === tabId;
+    }
+    // Get the appropriate icon for a tab based on its active state
+    getTabIcon(tab) {
+        if (this.isActive(tab.id) && tab.iconActive) {
+            return tab.iconActive;
+        }
+        return tab.icon;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\">\r\n  <ul class=\"tabs-list\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n          [class.tabs-button--no-icon]=\"!getTabIcon(tab)\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          @if (getTabIcon(tab)) {\r\n            <img\r\n              [src]=\"getTabIcon(tab)\"\r\n              [alt]=\"tab.iconAlt || tab.label\"\r\n              class=\"tabs-icon\">\r\n          }\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-2 list-none m-0 p-0;}.tabs-item{@apply flex-shrink-0;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button--no-icon{@apply gap-0 px-3 py-[10.5px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;transition:opacity .2s ease}.tabs-label{@apply whitespace-nowrap;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule], template: "<div class=\"tabs-container\">\r\n  <ul class=\"tabs-list\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n          [class.tabs-button--no-icon]=\"!getTabIcon(tab)\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          @if (getTabIcon(tab)) {\r\n            <img\r\n              [src]=\"getTabIcon(tab)\"\r\n              [alt]=\"tab.iconAlt || tab.label\"\r\n              class=\"tabs-icon\">\r\n          }\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-2 list-none m-0 p-0;}.tabs-item{@apply flex-shrink-0;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button--no-icon{@apply gap-0 px-3 py-[10.5px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;transition:opacity .2s ease}.tabs-label{@apply whitespace-nowrap;}\n"] }]
+        }], propDecorators: { list: [{
+                type: Input
+            }], activeTabId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -3991,5 +4031,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
 //# sourceMappingURL=brickclay-org-ui.mjs.map