@brickclay-org/ui 0.1.64 → 0.1.65
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.
|
@@ -565,7 +565,7 @@ class BkCustomCalendar {
|
|
|
565
565
|
placeholder = 'Select date range'; // NEW: Custom placeholder
|
|
566
566
|
opens = 'left'; // NEW: Popup position
|
|
567
567
|
inline = false; // NEW: Always show calendar inline (no popup)
|
|
568
|
-
compact =
|
|
568
|
+
compact = false; // NEW: Compact (smaller) layout variant. Default false keeps the original sizing.
|
|
569
569
|
autoPosition = false; // NEW: When true, auto-flip popup above/below based on available viewport space. Default false.
|
|
570
570
|
appendToBody = false; // When true, positions popup with fixed so it isn't clipped inside dialogs/overflow
|
|
571
571
|
isDisplayCrossIcon = true; // NEW: Show/Hide clear (X) icon
|
|
@@ -3241,7 +3241,7 @@ class BkCheckbox {
|
|
|
3241
3241
|
useExisting: forwardRef(() => BkCheckbox),
|
|
3242
3242
|
multi: true
|
|
3243
3243
|
}
|
|
3244
|
-
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded
|
|
3244
|
+
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded checkbox\"\r\n [ngClass]=\"[\r\n checkboxClass,\r\n isChecked && !disabled ? 'bg-black border-black' : '',\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : '',\r\n ]\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </div>\r\n @if (label) {\r\n <span\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n class=\"font-medium text-xs text-[#1B223A] select-none {{ labelClass }}\"\r\n >\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".checkbox.xsm{@apply size-[14px];}.checkbox.sm{@apply size-[16px];}.checkbox.md{@apply size-[18px];}.checkbox.lg{@apply size-[20px];}.checkbox.xsm svg{@apply size-[10.5px];}.checkbox.sm svg{@apply size-[12px];}.checkbox.md svg{@apply size-[13.5px];}.checkbox.lg svg{@apply size-[14px];}.group:focus .checkbox,.group:focus-visible .checkbox{outline:none;box-shadow:0 0 0 1px #000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3245
3245
|
}
|
|
3246
3246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCheckbox, decorators: [{
|
|
3247
3247
|
type: Component,
|
|
@@ -3251,7 +3251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3251
3251
|
useExisting: forwardRef(() => BkCheckbox),
|
|
3252
3252
|
multi: true
|
|
3253
3253
|
}
|
|
3254
|
-
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded
|
|
3254
|
+
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded checkbox\"\r\n [ngClass]=\"[\r\n checkboxClass,\r\n isChecked && !disabled ? 'bg-black border-black' : '',\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : '',\r\n ]\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </div>\r\n @if (label) {\r\n <span\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n class=\"font-medium text-xs text-[#1B223A] select-none {{ labelClass }}\"\r\n >\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".checkbox.xsm{@apply size-[14px];}.checkbox.sm{@apply size-[16px];}.checkbox.md{@apply size-[18px];}.checkbox.lg{@apply size-[20px];}.checkbox.xsm svg{@apply size-[10.5px];}.checkbox.sm svg{@apply size-[12px];}.checkbox.md svg{@apply size-[13.5px];}.checkbox.lg svg{@apply size-[14px];}.group:focus .checkbox,.group:focus-visible .checkbox{outline:none;box-shadow:0 0 0 1px #000}\n"] }]
|
|
3255
3255
|
}], propDecorators: { checkboxClass: [{
|
|
3256
3256
|
type: Input
|
|
3257
3257
|
}], label: [{
|
|
@@ -3327,7 +3327,7 @@ class BkRadioButton {
|
|
|
3327
3327
|
useExisting: forwardRef(() => BkRadioButton),
|
|
3328
3328
|
multi: true,
|
|
3329
3329
|
},
|
|
3330
|
-
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0
|
|
3330
|
+
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 radio\"\r\n [ngClass]=\"[\r\n radioClass,\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && isChecked && variant === 'dot' ? 'border-gray-300 bg-gray-50' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n@if(variant === 'dot'){\r\n <span\r\n class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n [class.scale-0]=\"!isChecked\"\r\n [class.scale-100]=\"isChecked\"\r\n [class.bg-gray-400]=\"disabled\"\r\n ></span>\r\n}\r\n @if (variant === 'tick'){\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(label) {\r\n <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px] min-h-[14px] min-w-[14px];}.radio.sm{@apply size-[16px] min-h-[16px] min-w-[16px];}.radio.md{@apply size-[18px] min-h-[18px] min-w-[18px];}.radio.lg{@apply size-[19px] min-h-[19px] min-w-[19px];}.radio.xsm .dot{@apply size-[6px] min-h-[6px] min-w-[6px];}.radio.sm .dot{@apply size-[8px] min-h-[8px] min-w-[8px];}.radio.md .dot{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.lg .dot{@apply size-[11px] min-h-[11px] min-w-[11px];}.radio.xsm .tick{@apply size-[9px] min-h-[9px] min-w-[9px];}.radio.sm .tick{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.md .tick{@apply size-[12px] min-h-[12px] min-w-[12px];}.radio.lg .tick{@apply size-[14px] min-h-[14px] min-w-[14px];}.group:focus .radio,.group:focus-visible .radio{outline:none;box-shadow:0 0 0 1px #000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3331
3331
|
}
|
|
3332
3332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkRadioButton, decorators: [{
|
|
3333
3333
|
type: Component,
|
|
@@ -3337,7 +3337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3337
3337
|
useExisting: forwardRef(() => BkRadioButton),
|
|
3338
3338
|
multi: true,
|
|
3339
3339
|
},
|
|
3340
|
-
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0
|
|
3340
|
+
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 radio\"\r\n [ngClass]=\"[\r\n radioClass,\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && isChecked && variant === 'dot' ? 'border-gray-300 bg-gray-50' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n@if(variant === 'dot'){\r\n <span\r\n class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n [class.scale-0]=\"!isChecked\"\r\n [class.scale-100]=\"isChecked\"\r\n [class.bg-gray-400]=\"disabled\"\r\n ></span>\r\n}\r\n @if (variant === 'tick'){\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(label) {\r\n <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px] min-h-[14px] min-w-[14px];}.radio.sm{@apply size-[16px] min-h-[16px] min-w-[16px];}.radio.md{@apply size-[18px] min-h-[18px] min-w-[18px];}.radio.lg{@apply size-[19px] min-h-[19px] min-w-[19px];}.radio.xsm .dot{@apply size-[6px] min-h-[6px] min-w-[6px];}.radio.sm .dot{@apply size-[8px] min-h-[8px] min-w-[8px];}.radio.md .dot{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.lg .dot{@apply size-[11px] min-h-[11px] min-w-[11px];}.radio.xsm .tick{@apply size-[9px] min-h-[9px] min-w-[9px];}.radio.sm .tick{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.md .tick{@apply size-[12px] min-h-[12px] min-w-[12px];}.radio.lg .tick{@apply size-[14px] min-h-[14px] min-w-[14px];}.group:focus .radio,.group:focus-visible .radio{outline:none;box-shadow:0 0 0 1px #000}\n"] }]
|
|
3341
3341
|
}], propDecorators: { radioClass: [{
|
|
3342
3342
|
type: Input
|
|
3343
3343
|
}], label: [{
|