@brickclay-org/ui 0.0.76 → 0.0.77
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.
|
@@ -6925,6 +6925,7 @@ class BkFilePicker {
|
|
|
6925
6925
|
errorMessage = '';
|
|
6926
6926
|
hasError = false;
|
|
6927
6927
|
draggable = true;
|
|
6928
|
+
description = '';
|
|
6928
6929
|
set required(val) {
|
|
6929
6930
|
this._required = val;
|
|
6930
6931
|
this._onValidatorChange?.();
|
|
@@ -7062,7 +7063,7 @@ class BkFilePicker {
|
|
|
7062
7063
|
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
7063
7064
|
}
|
|
7064
7065
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFilePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7065
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFilePicker, isStandalone: true, selector: "bk-file-picker", inputs: { id: "id", name: "name", accept: "accept", multi: "multi", disable: "disable", errorMessage: "errorMessage", hasError: "hasError", draggable: "draggable", required: "required" }, outputs: { change: "change", error: "error", cancel: "cancel" }, providers: [
|
|
7066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFilePicker, isStandalone: true, selector: "bk-file-picker", inputs: { id: "id", name: "name", accept: "accept", multi: "multi", disable: "disable", errorMessage: "errorMessage", hasError: "hasError", draggable: "draggable", description: "description", required: "required" }, outputs: { change: "change", error: "error", cancel: "cancel" }, providers: [
|
|
7066
7067
|
{
|
|
7067
7068
|
provide: NG_VALUE_ACCESSOR,
|
|
7068
7069
|
useExisting: forwardRef(() => BkFilePicker),
|
|
@@ -7073,7 +7074,7 @@ class BkFilePicker {
|
|
|
7073
7074
|
useExisting: forwardRef(() => BkFilePicker),
|
|
7074
7075
|
multi: true,
|
|
7075
7076
|
},
|
|
7076
|
-
], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"id\"\n [name]=\"name\"\n [accept]=\"accept\"\n [multiple]=\"multi\"\n [disabled]=\"disable\"\n [required]=\"required\"\n class=\"file-picker__input\"\n (cancel)=\"onCancel()\"\n (change)=\"onFileChange($event)\"\n />\n\n <div\n class=\"file-picker\"\n [ngClass]=\"{\n 'file-picker--default': pickerState === 'default',\n 'file-picker--active': pickerState === 'active',\n 'file-picker--disabled': pickerState === 'disabled',\n 'file-picker-has-error': hasError\n }\"\n (click)=\"onContainerClick()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n [attr.aria-disabled]=\"disable\"\n tabindex=\"0\"\n>\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"file-picker__icon\">\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n stroke-width=\"7.14\"/>\n <g clip-path=\"url(#clip0_1_149094)\">\n <path\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1_149094\">\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n </clipPath>\n </defs>\n </svg>\n <p\n class=\"file-picker__text-primary\"\n [ngClass]=\"{\n 'file-picker__text-primary--default': pickerState === 'default',\n 'file-picker__text-primary--active': pickerState === 'active',\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\n }\">\n <span\n [ngClass]=\"{\n 'file-picker__text-primary-bold--default': pickerState === 'default',\n 'file-picker__text-primary-bold--active': pickerState === 'active',\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n }\">Click to upload</span> or drag and drop\n </p>\n <p\n class=\"file-picker__text-secondary\"\n [ngClass]=\"{\n 'file-picker__text-secondary--default': pickerState === 'default',\n 'file-picker__text-secondary--active': pickerState === 'active',\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\n }\">
|
|
7077
|
+
], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"id\"\n [name]=\"name\"\n [accept]=\"accept\"\n [multiple]=\"multi\"\n [disabled]=\"disable\"\n [required]=\"required\"\n class=\"file-picker__input\"\n (cancel)=\"onCancel()\"\n (change)=\"onFileChange($event)\"\n />\n\n <div\n class=\"file-picker\"\n [ngClass]=\"{\n 'file-picker--default': pickerState === 'default',\n 'file-picker--active': pickerState === 'active',\n 'file-picker--disabled': pickerState === 'disabled',\n 'file-picker-has-error': hasError\n }\"\n (click)=\"onContainerClick()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n [attr.aria-disabled]=\"disable\"\n tabindex=\"0\"\n>\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"file-picker__icon\">\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n stroke-width=\"7.14\"/>\n <g clip-path=\"url(#clip0_1_149094)\">\n <path\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1_149094\">\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n </clipPath>\n </defs>\n </svg>\n <p\n class=\"file-picker__text-primary\"\n [ngClass]=\"{\n 'file-picker__text-primary--default': pickerState === 'default',\n 'file-picker__text-primary--active': pickerState === 'active',\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\n }\">\n <span\n [ngClass]=\"{\n 'file-picker__text-primary-bold--default': pickerState === 'default',\n 'file-picker__text-primary-bold--active': pickerState === 'active',\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n </p>\n <p\n class=\"file-picker__text-secondary\"\n [ngClass]=\"{\n 'file-picker__text-secondary--default': pickerState === 'default',\n 'file-picker__text-secondary--active': pickerState === 'active',\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\n }\">{{description}}</p>\n </div>\n\n @if (hasError) {\n @if (errorMessage) {\n <p class=\"file-picker-error\">{{ errorMessage }}</p>\n }\n }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7077
7078
|
}
|
|
7078
7079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFilePicker, decorators: [{
|
|
7079
7080
|
type: Component,
|
|
@@ -7088,7 +7089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7088
7089
|
useExisting: forwardRef(() => BkFilePicker),
|
|
7089
7090
|
multi: true,
|
|
7090
7091
|
},
|
|
7091
|
-
], template: "<div class=\"file-picker-wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"id\"\n [name]=\"name\"\n [accept]=\"accept\"\n [multiple]=\"multi\"\n [disabled]=\"disable\"\n [required]=\"required\"\n class=\"file-picker__input\"\n (cancel)=\"onCancel()\"\n (change)=\"onFileChange($event)\"\n />\n\n <div\n class=\"file-picker\"\n [ngClass]=\"{\n 'file-picker--default': pickerState === 'default',\n 'file-picker--active': pickerState === 'active',\n 'file-picker--disabled': pickerState === 'disabled',\n 'file-picker-has-error': hasError\n }\"\n (click)=\"onContainerClick()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n [attr.aria-disabled]=\"disable\"\n tabindex=\"0\"\n>\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"file-picker__icon\">\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n stroke-width=\"7.14\"/>\n <g clip-path=\"url(#clip0_1_149094)\">\n <path\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1_149094\">\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n </clipPath>\n </defs>\n </svg>\n <p\n class=\"file-picker__text-primary\"\n [ngClass]=\"{\n 'file-picker__text-primary--default': pickerState === 'default',\n 'file-picker__text-primary--active': pickerState === 'active',\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\n }\">\n <span\n [ngClass]=\"{\n 'file-picker__text-primary-bold--default': pickerState === 'default',\n 'file-picker__text-primary-bold--active': pickerState === 'active',\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n }\">Click to upload</span> or drag and drop\n </p>\n <p\n class=\"file-picker__text-secondary\"\n [ngClass]=\"{\n 'file-picker__text-secondary--default': pickerState === 'default',\n 'file-picker__text-secondary--active': pickerState === 'active',\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\n }\">
|
|
7092
|
+
], template: "<div class=\"file-picker-wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"id\"\n [name]=\"name\"\n [accept]=\"accept\"\n [multiple]=\"multi\"\n [disabled]=\"disable\"\n [required]=\"required\"\n class=\"file-picker__input\"\n (cancel)=\"onCancel()\"\n (change)=\"onFileChange($event)\"\n />\n\n <div\n class=\"file-picker\"\n [ngClass]=\"{\n 'file-picker--default': pickerState === 'default',\n 'file-picker--active': pickerState === 'active',\n 'file-picker--disabled': pickerState === 'disabled',\n 'file-picker-has-error': hasError\n }\"\n (click)=\"onContainerClick()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n [attr.aria-disabled]=\"disable\"\n tabindex=\"0\"\n>\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"file-picker__icon\">\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n stroke-width=\"7.14\"/>\n <g clip-path=\"url(#clip0_1_149094)\">\n <path\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1_149094\">\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n </clipPath>\n </defs>\n </svg>\n <p\n class=\"file-picker__text-primary\"\n [ngClass]=\"{\n 'file-picker__text-primary--default': pickerState === 'default',\n 'file-picker__text-primary--active': pickerState === 'active',\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\n }\">\n <span\n [ngClass]=\"{\n 'file-picker__text-primary-bold--default': pickerState === 'default',\n 'file-picker__text-primary-bold--active': pickerState === 'active',\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n </p>\n <p\n class=\"file-picker__text-secondary\"\n [ngClass]=\"{\n 'file-picker__text-secondary--default': pickerState === 'default',\n 'file-picker__text-secondary--active': pickerState === 'active',\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\n }\">{{description}}</p>\n </div>\n\n @if (hasError) {\n @if (errorMessage) {\n <p class=\"file-picker-error\">{{ errorMessage }}</p>\n }\n }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
|
|
7092
7093
|
}], propDecorators: { id: [{
|
|
7093
7094
|
type: Input
|
|
7094
7095
|
}], name: [{
|
|
@@ -7105,6 +7106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7105
7106
|
type: Input
|
|
7106
7107
|
}], draggable: [{
|
|
7107
7108
|
type: Input
|
|
7109
|
+
}], description: [{
|
|
7110
|
+
type: Input
|
|
7108
7111
|
}], required: [{
|
|
7109
7112
|
type: Input
|
|
7110
7113
|
}], change: [{
|