@brickclay-org/ui 0.0.80 → 0.0.82

package/fesm2022/brickclay-org-ui.mjs

@@ -2952,21 +2952,32 @@ class BkIconButton {
     // Custom classes
     buttonClass = '';
     clicked = new EventEmitter();
+    hovered = new EventEmitter();
     onClick(event) {
         if (!this.disabled) {
             this.clicked.emit(true);
         }
     }
+    onMouseEnter() {
+        if (!this.disabled) {
+            this.hovered.emit(true);
+        }
+    }
+    onMouseLeave() {
+        if (!this.disabled) {
+            this.hovered.emit(false);
+        }
+    }
     get buttonClasses() {
         // Maps inputs to CSS classes: .btn-icon .primary .md
         return `btn-icon ${this.variant} ${this.size} ${this.buttonClass}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }] });
+    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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkIconButton, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], alt: [{
@@ -2981,6 +2992,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], clicked: [{
                 type: Output
+            }], hovered: [{
+                type: Output
             }] } });
 
 class BkButtonGroup {
@@ -7320,6 +7333,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class BkLoader {
+    loading = false;
+    variant = 'dots';
+    frontAfter = false;
+    constructor() {
+        const duration = 2000;
+        const pause = 500;
+        setInterval(() => {
+            setTimeout(() => (this.frontAfter = !this.frontAfter), pause);
+        }, duration + pause);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkLoader, isStandalone: true, selector: "bk-loader", inputs: { loading: "loading", variant: "variant" }, ngImport: i0, template: "    @if (loading) {\r\n      <div\r\n        class=\"lg:h-[calc(100vh-80px)] lg:w-[calc(100vw-79px)] h-[calc(100vh-76px)] w-[calc(100vw-33px)] top-[59px] lg:left-[58px] left-[17px] right-0 bottom-6 bg-[#00000047] backdrop-blur-[2px] flex justify-center flex-col gap-4 items-center fixed z-[99999] rounded-xl\"\r\n      >\r\n        @switch (variant) {\r\n          @case ('dots') {\r\n            <div class=\"grid-loader\" [class.front-after]=\"frontAfter\">\r\n              <div class=\"grid-circle grid-filled\"></div>\r\n              <div class=\"grid-circle grid-outline\"></div>\r\n            </div>\r\n          }\r\n\r\n          @case ('spinners') {\r\n            <div class=\"grid-spinner\"></div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n", styles: [".grid-loader{position:relative;width:66px;height:34px}.grid-circle{position:absolute;top:0;width:32px;height:32px;border-radius:50%;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.grid-filled{left:0;background:#141414;animation-name:moveLeft;z-index:2;border:2px solid #141414;width:34px;height:34px}.grid-outline{right:0;border:2px solid #141414;background:#b8b8b8;animation-name:moveRight;z-index:1}.grid-loader.front-after .grid-filled{z-index:1}.grid-loader.front-after .grid-outline{z-index:2}@keyframes moveLeft{0%,10%{transform:translate(0)}50%,60%{transform:translate(32px)}to{transform:translate(0)}}@keyframes moveRight{0%,10%{transform:translate(0)}50%,60%{transform:translate(-32px)}to{transform:translate(0)}}.grid-spinner{width:48px;height:48px;border:5px solid #ccc;border-top-color:#000;border-right-color:#000;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-loader', standalone: true, imports: [CommonModule], template: "    @if (loading) {\r\n      <div\r\n        class=\"lg:h-[calc(100vh-80px)] lg:w-[calc(100vw-79px)] h-[calc(100vh-76px)] w-[calc(100vw-33px)] top-[59px] lg:left-[58px] left-[17px] right-0 bottom-6 bg-[#00000047] backdrop-blur-[2px] flex justify-center flex-col gap-4 items-center fixed z-[99999] rounded-xl\"\r\n      >\r\n        @switch (variant) {\r\n          @case ('dots') {\r\n            <div class=\"grid-loader\" [class.front-after]=\"frontAfter\">\r\n              <div class=\"grid-circle grid-filled\"></div>\r\n              <div class=\"grid-circle grid-outline\"></div>\r\n            </div>\r\n          }\r\n\r\n          @case ('spinners') {\r\n            <div class=\"grid-spinner\"></div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n", styles: [".grid-loader{position:relative;width:66px;height:34px}.grid-circle{position:absolute;top:0;width:32px;height:32px;border-radius:50%;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.grid-filled{left:0;background:#141414;animation-name:moveLeft;z-index:2;border:2px solid #141414;width:34px;height:34px}.grid-outline{right:0;border:2px solid #141414;background:#b8b8b8;animation-name:moveRight;z-index:1}.grid-loader.front-after .grid-filled{z-index:1}.grid-loader.front-after .grid-outline{z-index:2}@keyframes moveLeft{0%,10%{transform:translate(0)}50%,60%{transform:translate(32px)}to{transform:translate(0)}}@keyframes moveRight{0%,10%{transform:translate(0)}50%,60%{transform:translate(-32px)}to{transform:translate(0)}}.grid-spinner{width:48px;height:48px;border:5px solid #ccc;border-top-color:#000;border-right-color:#000;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { loading: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -7329,5 +7365,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map