@brickclay-org/ui 0.0.86 → 0.0.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4903,11 +4903,11 @@ class BkTabs {
|
|
|
4903
4903
|
return tab.icon;
|
|
4904
4904
|
}
|
|
4905
4905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4906
|
-
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--icon-right]=\"tab.direction === 'right'\"\r\n class=\"tabs-button\"\r\n (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n @if (getTabIcon(tab) && tab.direction !== 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\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 @if (getTabIcon(tab) && tab.direction === 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n [src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\"\r\n class=\"tabs-icon\">\r\n }\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 }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
|
|
4906
|
+
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--icon-right]=\"tab.direction === 'right'\"\r\n class=\"tabs-button\"\r\n (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n @if (getTabIcon(tab) && tab.direction !== 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\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 @if (getTabIcon(tab) && tab.direction === 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n [src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\"\r\n class=\"tabs-icon\">\r\n }\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full overflow-x-auto whitespace-nowrap;}.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 }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
|
|
4907
4907
|
}
|
|
4908
4908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
|
|
4909
4909
|
type: Component,
|
|
4910
|
-
args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], 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--icon-right]=\"tab.direction === 'right'\"\r\n class=\"tabs-button\"\r\n (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n @if (getTabIcon(tab) && tab.direction !== 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\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 @if (getTabIcon(tab) && tab.direction === 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n [src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\"\r\n class=\"tabs-icon\">\r\n }\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"] }]
|
|
4910
|
+
args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], 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--icon-right]=\"tab.direction === 'right'\"\r\n class=\"tabs-button\"\r\n (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n @if (getTabIcon(tab) && tab.direction !== 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\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 @if (getTabIcon(tab) && tab.direction === 'right') {\r\n <img\r\n [bkTooltip]=\"tab.iconTooltip || []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n [src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\"\r\n class=\"tabs-icon\">\r\n }\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full overflow-x-auto whitespace-nowrap;}.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"] }]
|
|
4911
4911
|
}], propDecorators: { list: [{
|
|
4912
4912
|
type: Input
|
|
4913
4913
|
}], activeTabId: [{
|