@brickclay-org/ui 0.1.69 → 0.1.70
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.
|
@@ -5736,11 +5736,11 @@ class BkTabs {
|
|
|
5736
5736
|
return tab.icon;
|
|
5737
5737
|
}
|
|
5738
5738
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5739
|
-
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", orientation: "orientation", variant: "variant", colors: "colors" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-
|
|
5739
|
+
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", orientation: "orientation", variant: "variant", colors: "colors" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
|
|
5740
5740
|
}
|
|
5741
5741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
|
|
5742
5742
|
type: Component,
|
|
5743
|
-
args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-
|
|
5743
|
+
args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"] }]
|
|
5744
5744
|
}], propDecorators: { list: [{
|
|
5745
5745
|
type: Input
|
|
5746
5746
|
}], activeTabId: [{
|