@brickclay-org/ui 0.0.82 → 0.0.83
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.
|
@@ -4639,11 +4639,11 @@ class BkTabs {
|
|
|
4639
4639
|
return tab.icon;
|
|
4640
4640
|
}
|
|
4641
4641
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4642
|
-
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 }] });
|
|
4642
|
+
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"] }] });
|
|
4643
4643
|
}
|
|
4644
4644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
|
|
4645
4645
|
type: Component,
|
|
4646
|
-
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"] }]
|
|
4646
|
+
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"] }]
|
|
4647
4647
|
}], propDecorators: { list: [{
|
|
4648
4648
|
type: Input
|
|
4649
4649
|
}], activeTabId: [{
|
|
@@ -6833,6 +6833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6833
6833
|
class BkColumnSelect {
|
|
6834
6834
|
columnFilterService;
|
|
6835
6835
|
searchable = false;
|
|
6836
|
+
buttonClass = '';
|
|
6836
6837
|
cacheKey;
|
|
6837
6838
|
columns = [];
|
|
6838
6839
|
isOpened = false;
|
|
@@ -6924,13 +6925,13 @@ class BkColumnSelect {
|
|
|
6924
6925
|
return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
|
|
6925
6926
|
}
|
|
6926
6927
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6927
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [
|
|
6928
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", buttonClass: "buttonClass", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [
|
|
6928
6929
|
{
|
|
6929
6930
|
provide: NG_VALUE_ACCESSOR,
|
|
6930
6931
|
useExisting: forwardRef(() => BkColumnSelect),
|
|
6931
6932
|
multi: true,
|
|
6932
6933
|
},
|
|
6933
|
-
], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n <bk-button [size]=\"'
|
|
6934
|
+
], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n <bk-button [size]=\"'md'\" [variant]=\"'secondary'\" [leftIcon]=\"'../../../../assets/icons/columns-black.svg'\"\r\n (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n <!-- Dropdown Box -->\r\n @if(isOpened){\r\n\r\n <div #formBox\r\n class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n @if(searchable){\r\n <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n placeholder=\"Search\"></bk-input>\r\n }\r\n <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n @for (column of list; track column.columnName; let i = $index) {\r\n <div class=\"flex items-center gap-2 px-3 py-2\">\r\n <bk-checkbox id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onChangeColumnFilter()\">\r\n\r\n </bk-checkbox>\r\n\r\n\r\n\r\n <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n for=\"columnsFilterList-{{column.columnName}}\">\r\n {{column.columnName}}\r\n </label>\r\n </div>\r\n }\r\n @if(!list.length){\r\n <p class=\"column-select-option-empty\">No items found</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
|
|
6934
6935
|
}
|
|
6935
6936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
|
|
6936
6937
|
type: Component,
|
|
@@ -6940,9 +6941,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6940
6941
|
useExisting: forwardRef(() => BkColumnSelect),
|
|
6941
6942
|
multi: true,
|
|
6942
6943
|
},
|
|
6943
|
-
], template: "<div class=\"relative\">\r\n\r\n <bk-button [size]=\"'
|
|
6944
|
+
], template: "<div class=\"relative\">\r\n\r\n <bk-button [size]=\"'md'\" [variant]=\"'secondary'\" [leftIcon]=\"'../../../../assets/icons/columns-black.svg'\"\r\n (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n <!-- Dropdown Box -->\r\n @if(isOpened){\r\n\r\n <div #formBox\r\n class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n @if(searchable){\r\n <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n placeholder=\"Search\"></bk-input>\r\n }\r\n <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n @for (column of list; track column.columnName; let i = $index) {\r\n <div class=\"flex items-center gap-2 px-3 py-2\">\r\n <bk-checkbox id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onChangeColumnFilter()\">\r\n\r\n </bk-checkbox>\r\n\r\n\r\n\r\n <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n for=\"columnsFilterList-{{column.columnName}}\">\r\n {{column.columnName}}\r\n </label>\r\n </div>\r\n }\r\n @if(!list.length){\r\n <p class=\"column-select-option-empty\">No items found</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}\n"] }]
|
|
6944
6945
|
}], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
|
|
6945
6946
|
type: Input
|
|
6947
|
+
}], buttonClass: [{
|
|
6948
|
+
type: Input
|
|
6946
6949
|
}], cacheKey: [{
|
|
6947
6950
|
type: Input
|
|
6948
6951
|
}], columns: [{
|