@openkit-labs/ngx-kit-ui 0.0.30 → 0.0.31

package/fesm2022/openkit-labs-ngx-kit-ui.mjs

@@ -3301,6 +3301,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['style.height']
             }] } });
 
+class KitGridComponent {
+    display = 'grid';
+    cols = 'none';
+    rows = 'none';
+    minCols;
+    maxCols;
+    minColWidth;
+    maxColWidth;
+    minRowHeight;
+    maxRowHeight;
+    gap;
+    rowGap;
+    colGap;
+    justifyItems;
+    alignItems;
+    justifyContent;
+    alignContent;
+    get gridTemplateColumns() {
+        if (this.minColWidth) {
+            const min = this.minColWidth;
+            const max = this.maxColWidth || '1fr';
+            return `repeat(auto-fit, minmax(${min}, ${max}))`;
+        }
+        if (this.minCols !== undefined || this.maxCols !== undefined) {
+            const min = this.minCols || 1;
+            const max = this.maxCols || min;
+            if (min === max) {
+                return `repeat(${min}, 1fr)`;
+            }
+            return `repeat(auto-fit, minmax(${100 / max}%, 1fr))`;
+        }
+        if (typeof this.cols === 'number') {
+            return `repeat(${this.cols}, 1fr)`;
+        }
+        if (typeof this.cols === 'string') {
+            return this.cols;
+        }
+        return 'none';
+    }
+    get gridTemplateRows() {
+        if (this.minRowHeight) {
+            const min = this.minRowHeight;
+            const max = this.maxRowHeight || '1fr';
+            return `repeat(auto-fit, minmax(${min}, ${max}))`;
+        }
+        if (typeof this.rows === 'number') {
+            return `repeat(${this.rows}, 1fr)`;
+        }
+        if (typeof this.rows === 'string') {
+            return this.rows;
+        }
+        return 'none';
+    }
+    get gapStyle() {
+        if (this.gap !== undefined) {
+            return `${this.gap}px`;
+        }
+        return null;
+    }
+    get rowGapStyle() {
+        if (this.rowGap !== undefined) {
+            return `${this.rowGap}px`;
+        }
+        return null;
+    }
+    get colGapStyle() {
+        if (this.colGap !== undefined) {
+            return `${this.colGap}px`;
+        }
+        return null;
+    }
+    get justifyItemsStyle() {
+        return this.justifyItems ?? null;
+    }
+    get alignItemsStyle() {
+        return this.alignItems ?? null;
+    }
+    get justifyContentStyle() {
+        return this.justifyContent ?? null;
+    }
+    get alignContentStyle() {
+        return this.alignContent ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitGridComponent, isStandalone: true, selector: "kit-grid", inputs: { cols: "cols", rows: "rows", minCols: "minCols", maxCols: "maxCols", minColWidth: "minColWidth", maxColWidth: "maxColWidth", minRowHeight: "minRowHeight", maxRowHeight: "maxRowHeight", gap: "gap", rowGap: "rowGap", colGap: "colGap", justifyItems: "justifyItems", alignItems: "alignItems", justifyContent: "justifyContent", alignContent: "alignContent" }, host: { properties: { "style.display": "this.display", "style.grid-template-columns": "this.gridTemplateColumns", "style.grid-template-rows": "this.gridTemplateRows", "style.gap": "this.gapStyle", "style.row-gap": "this.rowGapStyle", "style.column-gap": "this.colGapStyle", "style.justify-items": "this.justifyItemsStyle", "style.align-items": "this.alignItemsStyle", "style.justify-content": "this.justifyContentStyle", "style.align-content": "this.alignContentStyle" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{box-sizing:border-box}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid', standalone: true, imports: [], template: "<ng-content></ng-content>\n", styles: [":host{box-sizing:border-box}\n"] }]
+        }], propDecorators: { display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], cols: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], minCols: [{
+                type: Input
+            }], maxCols: [{
+                type: Input
+            }], minColWidth: [{
+                type: Input
+            }], maxColWidth: [{
+                type: Input
+            }], minRowHeight: [{
+                type: Input
+            }], maxRowHeight: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], rowGap: [{
+                type: Input
+            }], colGap: [{
+                type: Input
+            }], justifyItems: [{
+                type: Input
+            }], alignItems: [{
+                type: Input
+            }], justifyContent: [{
+                type: Input
+            }], alignContent: [{
+                type: Input
+            }], gridTemplateColumns: [{
+                type: HostBinding,
+                args: ['style.grid-template-columns']
+            }], gridTemplateRows: [{
+                type: HostBinding,
+                args: ['style.grid-template-rows']
+            }], gapStyle: [{
+                type: HostBinding,
+                args: ['style.gap']
+            }], rowGapStyle: [{
+                type: HostBinding,
+                args: ['style.row-gap']
+            }], colGapStyle: [{
+                type: HostBinding,
+                args: ['style.column-gap']
+            }], justifyItemsStyle: [{
+                type: HostBinding,
+                args: ['style.justify-items']
+            }], alignItemsStyle: [{
+                type: HostBinding,
+                args: ['style.align-items']
+            }], justifyContentStyle: [{
+                type: HostBinding,
+                args: ['style.justify-content']
+            }], alignContentStyle: [{
+                type: HostBinding,
+                args: ['style.align-content']
+            }] } });
+
 /**
  * A component that creates a box with a specified width and height.
  * Similar to Flutter's SizedBox widget, it provides a simple way to
@@ -3850,7 +4001,8 @@ class KitLayoutModule {
             KitContainerComponent,
             KitBottomBarComponent,
             KitTopBarComponent,
-            KitSideMenuComponent], exports: [KitPaddingComponent,
+            KitSideMenuComponent,
+            KitGridComponent], exports: [KitPaddingComponent,
             KitSpacerComponent,
             KitRowComponent,
             KitColumnComponent,
@@ -3866,7 +4018,8 @@ class KitLayoutModule {
             KitContainerComponent,
             KitBottomBarComponent,
             KitTopBarComponent,
-            KitSideMenuComponent] });
+            KitSideMenuComponent,
+            KitGridComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitLayoutModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitLayoutModule, decorators: [{
@@ -3889,7 +4042,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         KitContainerComponent,
                         KitBottomBarComponent,
                         KitTopBarComponent,
-                        KitSideMenuComponent
+                        KitSideMenuComponent,
+                        KitGridComponent
                     ],
                     exports: [
                         KitPaddingComponent,
@@ -3908,7 +4062,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         KitContainerComponent,
                         KitBottomBarComponent,
                         KitTopBarComponent,
-                        KitSideMenuComponent
+                        KitSideMenuComponent,
+                        KitGridComponent
                     ]
                 }]
         }] });
@@ -5274,5 +5429,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KitAppRootComponent, KitAvatarComponent, KitBadgeComponent, KitBaseInputComponent, KitBottomBarComponent, KitBottomSheetComponent, KitButtonComponent, KitButtonGroupComponent, KitButtonGroupItemActiveDirective, KitButtonGroupItemComponent, KitButtonGroupItemIdleDirective, KitButtonModule, KitCardComponent, KitCarouselComponent, KitCenterComponent, KitColumnComponent, KitConstrainedBoxComponent, KitContainerComponent, KitCopyToClipboardDirective, KitDataModule, KitDialogComponent, KitDirectivesModule, KitDividerComponent, KitExpandedComponent, KitFileSizePipe, KitFloatingActionButtonComponent, KitGestureDetectorComponent, KitImageComponent, KitImageErrorDirective, KitImageLoadingDirective, KitInputDateComponent, KitInputEmailComponent, KitInputFieldTitleComponent, KitInputModule, KitInputNumberComponent, KitInputOtpComponent, KitInputPasswordComponent, KitInputPhoneComponent, KitInputSelectComponent, KitInputTextComponent, KitInputTextareaComponent, KitInputTimeComponent, KitInteractorsModule, KitKMBPipe, KitLayoutModule, KitMediaModule, KitNavigationModule, KitNavigationService, KitOverlaysModule, KitPaddingComponent, KitPageComponent, KitPanelModule, KitPipesModule, KitPressAndHoldDirective, KitProgressBarComponent, KitRoundButtonComponent, KitRouterOutletComponent, KitRowComponent, KitScreenService, KitSelectItemActiveDirective, KitSelectItemDirective, KitSideMenuComponent, KitSideMenuService, KitSizedBoxComponent, KitSpacerComponent, KitStickyContainerComponent, KitTabContentComponent, KitTabViewComponent, KitTextBodyComponent, KitTextButtonComponent, KitTextCaptionComponent, KitTextDisplayComponent, KitTextHeadingComponent, KitTextLabelComponent, KitTextLinkComponent, KitTextModule, KitTextSubheadingComponent, KitThemeService, KitTimeAgoPipe, KitTopBarComponent, SimpleTableComponent, StackComponent };
+export { KitAppRootComponent, KitAvatarComponent, KitBadgeComponent, KitBaseInputComponent, KitBottomBarComponent, KitBottomSheetComponent, KitButtonComponent, KitButtonGroupComponent, KitButtonGroupItemActiveDirective, KitButtonGroupItemComponent, KitButtonGroupItemIdleDirective, KitButtonModule, KitCardComponent, KitCarouselComponent, KitCenterComponent, KitColumnComponent, KitConstrainedBoxComponent, KitContainerComponent, KitCopyToClipboardDirective, KitDataModule, KitDialogComponent, KitDirectivesModule, KitDividerComponent, KitExpandedComponent, KitFileSizePipe, KitFloatingActionButtonComponent, KitGestureDetectorComponent, KitGridComponent, KitImageComponent, KitImageErrorDirective, KitImageLoadingDirective, KitInputDateComponent, KitInputEmailComponent, KitInputFieldTitleComponent, KitInputModule, KitInputNumberComponent, KitInputOtpComponent, KitInputPasswordComponent, KitInputPhoneComponent, KitInputSelectComponent, KitInputTextComponent, KitInputTextareaComponent, KitInputTimeComponent, KitInteractorsModule, KitKMBPipe, KitLayoutModule, KitMediaModule, KitNavigationModule, KitNavigationService, KitOverlaysModule, KitPaddingComponent, KitPageComponent, KitPanelModule, KitPipesModule, KitPressAndHoldDirective, KitProgressBarComponent, KitRoundButtonComponent, KitRouterOutletComponent, KitRowComponent, KitScreenService, KitSelectItemActiveDirective, KitSelectItemDirective, KitSideMenuComponent, KitSideMenuService, KitSizedBoxComponent, KitSpacerComponent, KitStickyContainerComponent, KitTabContentComponent, KitTabViewComponent, KitTextBodyComponent, KitTextButtonComponent, KitTextCaptionComponent, KitTextDisplayComponent, KitTextHeadingComponent, KitTextLabelComponent, KitTextLinkComponent, KitTextModule, KitTextSubheadingComponent, KitThemeService, KitTimeAgoPipe, KitTopBarComponent, SimpleTableComponent, StackComponent };
 //# sourceMappingURL=openkit-labs-ngx-kit-ui.mjs.map