@brickclay-org/ui 0.0.94 → 0.0.95
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.
|
@@ -3129,6 +3129,7 @@ class BkButton {
|
|
|
3129
3129
|
// 1. Style & Size Inputs
|
|
3130
3130
|
variant = 'primary';
|
|
3131
3131
|
size = 'md';
|
|
3132
|
+
shadow = true;
|
|
3132
3133
|
// 2. Content Inputs
|
|
3133
3134
|
label = ''; // Pass text directly
|
|
3134
3135
|
leftIcon;
|
|
@@ -3158,15 +3159,17 @@ class BkButton {
|
|
|
3158
3159
|
return `btn ${variantClass} ${this.size} ${this.buttonClass}`;
|
|
3159
3160
|
}
|
|
3160
3161
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3162
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", shadow: "shadow", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n [ngClass]=\"{ 'btn-shadow': shadow }\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}.btn-shadow{box-shadow:0 1px 2px #1018280d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3162
3163
|
}
|
|
3163
3164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButton, decorators: [{
|
|
3164
3165
|
type: Component,
|
|
3165
|
-
args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"] }]
|
|
3166
|
+
args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n [ngClass]=\"{ 'btn-shadow': shadow }\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}.btn-shadow{box-shadow:0 1px 2px #1018280d}\n"] }]
|
|
3166
3167
|
}], propDecorators: { variant: [{
|
|
3167
3168
|
type: Input
|
|
3168
3169
|
}], size: [{
|
|
3169
3170
|
type: Input
|
|
3171
|
+
}], shadow: [{
|
|
3172
|
+
type: Input
|
|
3170
3173
|
}], label: [{
|
|
3171
3174
|
type: Input
|
|
3172
3175
|
}], leftIcon: [{
|
|
@@ -7197,7 +7200,7 @@ class BkColumnSelect {
|
|
|
7197
7200
|
useExisting: forwardRef(() => BkColumnSelect),
|
|
7198
7201
|
multi: true,
|
|
7199
7202
|
},
|
|
7200
|
-
], 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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] });
|
|
7203
|
+
], 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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "shadow", "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"] }] });
|
|
7201
7204
|
}
|
|
7202
7205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
|
|
7203
7206
|
type: Component,
|