@brickclay-org/ui 0.0.81 → 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.
|
@@ -2952,21 +2952,32 @@ class BkIconButton {
|
|
|
2952
2952
|
// Custom classes
|
|
2953
2953
|
buttonClass = '';
|
|
2954
2954
|
clicked = new EventEmitter();
|
|
2955
|
+
hovered = new EventEmitter();
|
|
2955
2956
|
onClick(event) {
|
|
2956
2957
|
if (!this.disabled) {
|
|
2957
2958
|
this.clicked.emit(true);
|
|
2958
2959
|
}
|
|
2959
2960
|
}
|
|
2961
|
+
onMouseEnter() {
|
|
2962
|
+
if (!this.disabled) {
|
|
2963
|
+
this.hovered.emit(true);
|
|
2964
|
+
}
|
|
2965
|
+
}
|
|
2966
|
+
onMouseLeave() {
|
|
2967
|
+
if (!this.disabled) {
|
|
2968
|
+
this.hovered.emit(false);
|
|
2969
|
+
}
|
|
2970
|
+
}
|
|
2960
2971
|
get buttonClasses() {
|
|
2961
2972
|
// Maps inputs to CSS classes: .btn-icon .primary .md
|
|
2962
2973
|
return `btn-icon ${this.variant} ${this.size} ${this.buttonClass}`;
|
|
2963
2974
|
}
|
|
2964
2975
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2965
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkIconButton, isStandalone: true, selector: "bk-icon-button", inputs: { icon: "icon", alt: "alt", variant: "variant", size: "size", disabled: "disabled", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxxsm{@apply p-1;}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxxsm .icon{@apply size-[10px];}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2976
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkIconButton, isStandalone: true, selector: "bk-icon-button", inputs: { icon: "icon", alt: "alt", variant: "variant", size: "size", disabled: "disabled", buttonClass: "buttonClass" }, outputs: { clicked: "clicked", hovered: "hovered" }, ngImport: i0, template: "<button\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n>\r\n <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.none{@apply bg-transparent border-0 shadow-none text-[#6B7080] outline-transparent outline-0 focus-visible:outline-none focus-visible:border-0 active:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed;}.btn-icon.primary{@apply border-0;}.btn-icon.xxxsm{@apply p-1;}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxxsm .icon{@apply size-[10px];}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2966
2977
|
}
|
|
2967
2978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkIconButton, decorators: [{
|
|
2968
2979
|
type: Component,
|
|
2969
|
-
args: [{ selector: 'bk-icon-button', standalone: true, imports: [CommonModule], template: "<button\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxxsm{@apply p-1;}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxxsm .icon{@apply size-[10px];}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"] }]
|
|
2980
|
+
args: [{ selector: 'bk-icon-button', standalone: true, imports: [CommonModule], template: "<button\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n>\r\n <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.none{@apply bg-transparent border-0 shadow-none text-[#6B7080] outline-transparent outline-0 focus-visible:outline-none focus-visible:border-0 active:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed;}.btn-icon.primary{@apply border-0;}.btn-icon.xxxsm{@apply p-1;}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxxsm .icon{@apply size-[10px];}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"] }]
|
|
2970
2981
|
}], propDecorators: { icon: [{
|
|
2971
2982
|
type: Input
|
|
2972
2983
|
}], alt: [{
|
|
@@ -2981,6 +2992,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2981
2992
|
type: Input
|
|
2982
2993
|
}], clicked: [{
|
|
2983
2994
|
type: Output
|
|
2995
|
+
}], hovered: [{
|
|
2996
|
+
type: Output
|
|
2984
2997
|
}] } });
|
|
2985
2998
|
|
|
2986
2999
|
class BkButtonGroup {
|
|
@@ -4626,11 +4639,11 @@ class BkTabs {
|
|
|
4626
4639
|
return tab.icon;
|
|
4627
4640
|
}
|
|
4628
4641
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4629
|
-
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"] }] });
|
|
4630
4643
|
}
|
|
4631
4644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
|
|
4632
4645
|
type: Component,
|
|
4633
|
-
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"] }]
|
|
4634
4647
|
}], propDecorators: { list: [{
|
|
4635
4648
|
type: Input
|
|
4636
4649
|
}], activeTabId: [{
|
|
@@ -6820,6 +6833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6820
6833
|
class BkColumnSelect {
|
|
6821
6834
|
columnFilterService;
|
|
6822
6835
|
searchable = false;
|
|
6836
|
+
buttonClass = '';
|
|
6823
6837
|
cacheKey;
|
|
6824
6838
|
columns = [];
|
|
6825
6839
|
isOpened = false;
|
|
@@ -6911,13 +6925,13 @@ class BkColumnSelect {
|
|
|
6911
6925
|
return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
|
|
6912
6926
|
}
|
|
6913
6927
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6914
|
-
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: [
|
|
6915
6929
|
{
|
|
6916
6930
|
provide: NG_VALUE_ACCESSOR,
|
|
6917
6931
|
useExisting: forwardRef(() => BkColumnSelect),
|
|
6918
6932
|
multi: true,
|
|
6919
6933
|
},
|
|
6920
|
-
], 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"] }] });
|
|
6921
6935
|
}
|
|
6922
6936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
|
|
6923
6937
|
type: Component,
|
|
@@ -6927,9 +6941,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6927
6941
|
useExisting: forwardRef(() => BkColumnSelect),
|
|
6928
6942
|
multi: true,
|
|
6929
6943
|
},
|
|
6930
|
-
], 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"] }]
|
|
6931
6945
|
}], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
|
|
6932
6946
|
type: Input
|
|
6947
|
+
}], buttonClass: [{
|
|
6948
|
+
type: Input
|
|
6933
6949
|
}], cacheKey: [{
|
|
6934
6950
|
type: Input
|
|
6935
6951
|
}], columns: [{
|