spiderly 19.5.2 → 19.5.4-preview.0

package/lib/services/validator-abstract.service.d.ts

@@ -1,13 +1,18 @@
 import { TranslocoService } from '@jsverse/transloco';
-import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyValidatorFn } from "../components/spiderly-form-control/spiderly-form-control";
+import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyValidatorFn } from '../components/spiderly-form-control/spiderly-form-control';
+import { ImageDimensionsValidationResult } from '../entities/image-dimensions-validation-result';
 import * as i0 from "@angular/core";
 export declare abstract class ValidatorAbstractService {
     protected translocoService: TranslocoService;
     constructor(translocoService: TranslocoService);
     abstract setValidator(formControl: SpiderlyFormControl, className: string): SpiderlyValidatorFn;
-    isArrayEmpty: (control: SpiderlyFormControl) => SpiderlyValidatorFn;
+    abstract setFormArrayValidator(formArray: SpiderlyFormArray, className: string): void;
+    validateImageDimensions(file: File, imageWidth: number, imageHeight: number): Promise<ImageDimensionsValidationResult>;
     notEmpty: (control: SpiderlyFormControl) => void;
-    isFormArrayEmpty: (control: SpiderlyFormArray) => SpiderlyValidatorFn;
+    /** Validates that a SpiderlyFormArray (collection of form controls/groups) is not empty. */
+    isFormArrayEmpty: (control: SpiderlyFormArray) => void;
+    /** Validates that a SpiderlyFormControl holding an array value (e.g., multi-select dropdown) is not empty. */
+    isArrayEmpty: (control: SpiderlyFormControl) => SpiderlyValidatorFn;
     static ɵfac: i0.ɵɵFactoryDeclaration<ValidatorAbstractService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ValidatorAbstractService>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spiderly",
-  "version": "19.5.2",
+  "version": "19.5.4-preview.0",
   "author": "Filip Trivan",
   "license": "MIT",
   "description": "Spiderly Angular Library to use in combination with Spiderly.",

package/public-api.d.ts

@@ -1,7 +1,11 @@
+export * from './lib/controls/base-autocomplete-control';
+export * from './lib/controls/base-control';
+export * from './lib/controls/base-dropdown-control';
 export * from './lib/controls/spiderly-autocomplete/spiderly-autocomplete.component';
 export * from './lib/controls/spiderly-calendar/spiderly-calendar.component';
 export * from './lib/controls/spiderly-checkbox/spiderly-checkbox.component';
 export * from './lib/controls/spiderly-colorpicker/spiderly-colorpicker.component';
+export * from './lib/controls/spiderly-controls.module';
 export * from './lib/controls/spiderly-dropdown/spiderly-dropdown.component';
 export * from './lib/controls/spiderly-editor/spiderly-editor.component';
 export * from './lib/controls/spiderly-file/spiderly-file.component';
@@ -11,25 +15,28 @@ export * from './lib/controls/spiderly-number/spiderly-number.component';
 export * from './lib/controls/spiderly-password/spiderly-password.component';
 export * from './lib/controls/spiderly-textarea/spiderly-textarea.component';
 export * from './lib/controls/spiderly-textbox/spiderly-textbox.component';
-export * from './lib/controls/base-control';
-export * from './lib/controls/base-autocomplete-control';
-export * from './lib/controls/base-dropdown-control';
-export * from './lib/controls/spiderly-controls.module';
-export * from './lib/components/base-form/base-form copy';
-export * from './lib/components/card-skeleton/card-skeleton.component';
+export * from './lib/components/auth/login/login.component';
 export * from './lib/components/auth/partials/login-verification.component';
 export * from './lib/components/auth/partials/verification-wrapper.component';
-export * from './lib/components/auth/login/login.component';
+export * from './lib/components/base-form/base-form copy';
+export * from './lib/components/card-skeleton/card-skeleton.component';
 export * from './lib/components/footer/footer.component';
-export * from './lib/components/spiderly-buttons/google-button/google-button.component';
 export * from './lib/components/index-card/index-card.component';
 export * from './lib/components/info-card/info-card.component';
+export * from './lib/components/layout/layout.component';
+export * from './lib/components/layout/profile-avatar/profile-avatar.component';
+export * from './lib/components/layout/sidebar/menuitem.component';
+export * from './lib/components/layout/sidebar/sidebar-menu.component';
+export * from './lib/components/layout/sidebar/sidebar.component';
+export * from './lib/components/layout/sidemenu-topbar/sidemenu-topbar.component';
+export * from './lib/components/layout/topbar/topbar.component';
 export * from './lib/components/not-found/not-found.component';
 export * from './lib/components/required/required.component';
+export * from './lib/components/spiderly-buttons/google-button/google-button.component';
 export * from './lib/components/spiderly-buttons/return-button/return-button.component';
+export * from './lib/components/spiderly-buttons/spiderly-button-base/spiderly-button-base';
 export * from './lib/components/spiderly-buttons/spiderly-button/spiderly-button.component';
 export * from './lib/components/spiderly-buttons/spiderly-split-button/spiderly-split-button.component';
-export * from './lib/components/spiderly-buttons/spiderly-button-base/spiderly-button-base';
 export * from './lib/components/spiderly-data-table/spiderly-data-table.component';
 export * from './lib/components/spiderly-data-view/spiderly-data-view.component';
 export * from './lib/components/spiderly-delete-dialog/spiderly-delete-confirmation.component';
@@ -40,34 +47,27 @@ export * from './lib/components/spiderly-panels/panel-header/panel-header.compon
 export * from './lib/components/spiderly-panels/spiderly-card/spiderly-card.component';
 export * from './lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component';
 export * from './lib/components/spiderly-panels/spiderly-panels.module';
-export * from './lib/components/layout/sidebar/sidebar-menu.component';
-export * from './lib/components/layout/sidebar/menuitem.component';
-export * from './lib/components/layout/sidebar/sidebar.component';
-export * from './lib/components/layout/sidemenu-topbar/sidemenu-topbar.component';
-export * from './lib/components/layout/layout.component';
-export * from './lib/components/layout/topbar/topbar.component';
-export * from './lib/components/layout/profile-avatar/profile-avatar.component';
 export * from './lib/entities/base-entity';
 export * from './lib/entities/codebook';
+export * from './lib/entities/filter';
+export * from './lib/entities/filter-rule';
+export * from './lib/entities/filter-sort-meta';
+export * from './lib/entities/image-dimensions-validation-result';
+export * from './lib/entities/init-company-auth-dialog-details';
+export * from './lib/entities/init-top-bar-data';
+export * from './lib/entities/is-authorized-for-save-event';
 export * from './lib/entities/last-menu-icon-index-clicked';
 export * from './lib/entities/lazy-load-selected-ids-result';
 export * from './lib/entities/menuchangeevent';
-export * from './lib/entities/mime-type';
 export * from './lib/entities/namebook';
+export * from './lib/entities/paginated-result';
 export * from './lib/entities/primeng-option';
 export * from './lib/entities/security-entities';
 export * from './lib/entities/simple-save-result';
 export * from './lib/entities/spiderly-button';
-export * from './lib/entities/filter';
-export * from './lib/entities/filter-rule';
-export * from './lib/entities/filter-sort-meta';
-export * from './lib/entities/paginated-result';
-export * from './lib/entities/init-company-auth-dialog-details';
-export * from './lib/entities/init-top-bar-data';
-export * from './lib/entities/is-authorized-for-save-event';
+export * from './lib/enums/match-mode-enum-codes';
 export * from './lib/enums/security-enums';
 export * from './lib/enums/verification-type-codes';
-export * from './lib/enums/match-mode-enum-codes';
 export * from './lib/guards/auth.guard';
 export * from './lib/guards/not-auth.guard';
 export * from './lib/handlers/spiderly-error-handler';
@@ -77,13 +77,12 @@ export * from './lib/interceptors/jwt.interceptor';
 export * from './lib/interceptors/unauthorized.interceptor';
 export * from './lib/services/api.service.security';
 export * from './lib/services/app-initializer';
+export * from './lib/services/app-layout.service.base';
 export * from './lib/services/auth.service.base';
 export * from './lib/services/base-form.service';
 export * from './lib/services/config.service.base';
 export * from './lib/services/helper-functions';
 export * from './lib/services/spiderly-message.service';
 export * from './lib/services/spiderly-transloco-loader';
-export * from './lib/services/translate-labels-abstract.service';
 export * from './lib/services/validator-abstract.service';
-export * from './lib/services/app-layout.service.base';
 export * from './lib/directives/template-type.directive';

package/styles/components/info-card/info-card.component.scss

@@ -35,19 +35,19 @@
     transform: rotate(30deg);
     color: var(--p-primary-400);
     opacity: 0.2;
-    position: absolute; 
-    overflow: hidden; 
-    right: -30px; 
-    top: -25px; 
+    position: absolute;
+    overflow: hidden;
+    right: -30px;
+    top: -25px;
     z-index: 1;
-    
+
     i {
       font-size: 270px;
     }
   }
 }
 
-::ng-deep{
+::ng-deep {
   html.dark .info-card {
     background-color: var(--p-primary-950);
 
@@ -58,4 +58,4 @@
       color: var(--p-primary-400);
     }
   }
-}
+}

package/styles/components/layout/profile-avatar/profile-avatar.component.scss

@@ -1,9 +1,9 @@
 .side-menu-profile-dialog {
-    right: 26px;
-    top: 60px;
+  right: 26px;
+  top: 60px;
 }
 
 .top-menu-profile-dialog {
-    right: 0px;
-    top: 40px;
-}
+  right: 0px;
+  top: 40px;
+}

package/styles/components/layout/topbar/topbar.component.scss

@@ -1,11 +1,11 @@
 .topbar-wrapper {
-  background-color: var(--p-content-background); 
-  width: 100%; 
-  border-bottom: 1px solid var(--p-content-border-color); 
+  background-color: var(--p-content-background);
+  width: 100%;
+  border-bottom: 1px solid var(--p-content-border-color);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  position: sticky; 
-  top: 0; 
-  left: 0; 
+  position: sticky;
+  top: 0;
+  left: 0;
   z-index: 1000;
 }
 
@@ -14,7 +14,7 @@
   margin: auto;
 }
 
-::ng-deep{
+::ng-deep {
   .show-hover-bg-on-root-items {
     .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
       background-color: transparent !important;
@@ -36,4 +36,4 @@
       height: 16px;
     }
   }
-}
+}

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -1,49 +1,49 @@
 .table-header {
-	display: flex;
-	justify-content: space-between; 
-	align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 @media (max-width: 640px) {
-	.table-header {
-		display: flex;
-		flex-direction: column;
-		align-items: start;
-		gap: 14px;
-	}
+  .table-header {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 14px;
+  }
 }
 
 .spiderly-table {
-	.p-paginator {
-		padding: 1rem;
-	}
-	.p-paginator-left-content {
-		@media (min-width: 1400px) {			
-			position: absolute;
-			padding: 14px;
-			left: 0;
-		}
-	}
-	.p-paginator-right-content {
-		@media (min-width: 1400px) {			
-			position: absolute;
-			padding: 14px;
-			right: 0;
-		}
-	}
+  .p-paginator {
+    padding: 1rem;
+  }
+  .p-paginator-left-content {
+    @media (min-width: 1400px) {
+      position: absolute;
+      padding: 14px;
+      left: 0;
+    }
+  }
+  .p-paginator-right-content {
+    @media (min-width: 1400px) {
+      position: absolute;
+      padding: 14px;
+      right: 0;
+    }
+  }
 }
 
 :host {
-	::ng-deep {
-		.p-datatable-thead{
-			position: unset !important;
-		}
-		.p-datatable-header{
-			border-radius: 6px 6px 0 0;
-		}
-		.p-datatable {
-			border-radius: var(--p-content-border-radius);
-			border: 1px solid var(--p-datatable-border-color);
-		}
-	}
-}
+  ::ng-deep {
+    .p-datatable-thead {
+      position: unset !important;
+    }
+    .p-datatable-header {
+      border-radius: 6px 6px 0 0;
+    }
+    .p-datatable {
+      border-radius: var(--p-content-border-radius);
+      border: 1px solid var(--p-datatable-border-color);
+    }
+  }
+}

package/styles/components/spiderly-data-view/spiderly-data-view.component.scss

@@ -1,56 +1,54 @@
-
-::ng-deep{
-	.p-datatable-tbody {
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
-	}
-
-	.p-datatable-header {
-		margin-bottom: 36px;
-		border: 0 !important;
-		padding: 0 !important;
-		background-color: transparent !important;
-	}
-
-	.p-paginator {
-		padding: 18px 9px 0px 9px !important;
-	}
-
-	.p-fluid {
-		width: 100% !important;
-	}
-
-	.p-inputtext {
-		width: 100% !important;
-	}
-
-	.p-inputnumber {
-		width: 100% !important;
-	}
-
-	.p-datepicker {
-		width: 100% !important;
-	}
+::ng-deep {
+  .p-datatable-tbody {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .p-datatable-header {
+    margin-bottom: 36px;
+    border: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
+  }
+
+  .p-paginator {
+    padding: 18px 9px 0px 9px !important;
+  }
+
+  .p-fluid {
+    width: 100% !important;
+  }
+
+  .p-inputtext {
+    width: 100% !important;
+  }
+
+  .p-inputnumber {
+    width: 100% !important;
+  }
+
+  .p-datepicker {
+    width: 100% !important;
+  }
 }
 
-
 .data-view-grid {
-    display: grid;
-    gap: 18px;
-    grid-template-columns: 1fr 1fr 1fr;
-	margin-bottom: 18px;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin-bottom: 18px;
 }
 
 @media (max-width: 1080px) {
-    .data-view-grid {
-        gap: 12px;
-        grid-template-columns: 1fr 1fr;
-    }
+  .data-view-grid {
+    gap: 12px;
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 @media (max-width: 500px) {
-    .data-view-grid {
-        grid-template-columns: 1fr;
-    }
-}
+  .data-view-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/styles/components/spiderly-panels/panel-body/panel-body.component.scss

@@ -1,9 +1,9 @@
-.non-grid-panel-bottom-padding{
-	padding-bottom: 14px;
+.non-grid-panel-bottom-padding {
+  padding-bottom: 14px;
 }
 
 @media (max-width: 600px) {
-	.non-grid-panel-bottom-padding{
-		padding-bottom: 0px;
-	}
-}
+  .non-grid-panel-bottom-padding {
+    padding-bottom: 0px;
+  }
+}

package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss

@@ -1,17 +1,17 @@
-.spiderly-panel-footer{
-    display: flex; 
-    align-items: center; 
-    justify-content: space-between; 
-    gap: 10px; 
-    border-top: 1px solid var(--p-content-border-color);
-    border-bottom-right-radius: var(--p-content-border-radius);
-    border-bottom-left-radius: var(--p-content-border-radius);
-    padding: 18px;
+.spiderly-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-top: 1px solid var(--p-content-border-color);
+  border-bottom-right-radius: var(--p-content-border-radius);
+  border-bottom-left-radius: var(--p-content-border-radius);
+  padding: 18px;
 }
 
-.buttons-wrapper{
-    gap: 0.5rem;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-}
+.buttons-wrapper {
+  gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss

@@ -1,88 +1,88 @@
 :host {
   ::ng-deep {
-    .spiderly-panel{
-      .p-panel-content{
+    .spiderly-panel {
+      .p-panel-content {
         padding: 0;
       }
     }
-    .p-panel{
+    .p-panel {
       overflow: hidden;
     }
-    .p-panel-icons{
+    .p-panel-icons {
       display: flex;
       align-items: center;
     }
-    
-		.panel-header-cursor-pointer {
-			.p-panel-header {
-				cursor: pointer !important;
-			}
-		}
+
+    .panel-header-cursor-pointer {
+      .p-panel-header {
+        cursor: pointer !important;
+      }
+    }
   }
 }
 
-.multiple-panel-first-without-header{
-	.p-panel {
-		border-bottom-left-radius: 0px;
-		border-bottom-right-radius: 0px;
-		border-top: 1px solid var(--surface-border);
-		border-top-left-radius: var(--p-content-border-radius);
-		border-top-right-radius: var(--p-content-border-radius);
-		border-bottom: none;
-	}
+.multiple-panel-first-without-header {
+  .p-panel {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top: 1px solid var(--surface-border);
+    border-top-left-radius: var(--p-content-border-radius);
+    border-top-right-radius: var(--p-content-border-radius);
+    border-bottom: none;
+  }
 }
 
-.multiple-panel-middle-without-header{
-	.p-panel {
-		border-bottom-left-radius: 0px;
-		border-bottom-right-radius: 0px;
-		border-top: 1px solid var(--surface-border);
-		border-top-left-radius: 0px;
-		border-top-right-radius: 0px;
-		border-bottom: none;
-	}
+.multiple-panel-middle-without-header {
+  .p-panel {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top: 1px solid var(--surface-border);
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom: none;
+  }
 }
 
-.multiple-panel-last-without-header{
-	.p-panel {
-		border-bottom-left-radius: var(--p-content-border-radius);
-		border-bottom-right-radius: var(--p-content-border-radius);
-		border-top: 1px solid var(--surface-border);
-		border-top-left-radius: 0px;
-		border-top-right-radius: 0px;
-	}
+.multiple-panel-last-without-header {
+  .p-panel {
+    border-bottom-left-radius: var(--p-content-border-radius);
+    border-bottom-right-radius: var(--p-content-border-radius);
+    border-top: 1px solid var(--surface-border);
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
 }
 
-.multiple-panel-first{
-	.p-panel {
-		border-bottom-left-radius: 0px;
-		border-bottom-right-radius: 0px;
-		border-bottom: none;
-	}
+.multiple-panel-first {
+  .p-panel {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom: none;
+  }
 }
 
-.panel-border{
-	.p-panel {
-		border-bottom-left-radius: var(--p-content-border-radius);
-		border-bottom-right-radius: var(--p-content-border-radius);
-		border-bottom: 1px solid var(--surface-border);
-	}
+.panel-border {
+  .p-panel {
+    border-bottom-left-radius: var(--p-content-border-radius);
+    border-bottom-right-radius: var(--p-content-border-radius);
+    border-bottom: 1px solid var(--surface-border);
+  }
 }
 
 .multiple-panel-middle {
-	.p-panel {
-		border-radius: 0px;
-		border-bottom: none;
-	}
+  .p-panel {
+    border-radius: 0px;
+    border-bottom: none;
+  }
 }
 
 .multiple-panel-last {
-	.p-panel {
-		border-top-left-radius: 0px;
-		border-top-right-radius: 0px;
-	}
+  .p-panel {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
 }
 
-.panel-body-wrapper{
-	padding: 18px; 
-}
+.panel-body-wrapper {
+  padding: 18px;
+}

package/styles/controls/base-controls.scss

@@ -1,17 +1,17 @@
 .spiderly-inputgroup {
-    display: flex;
-    gap: 8px;
+  display: flex;
+  gap: 8px;
 }
 
 .spiderly-inputgroup-addon {
-    width: 38px;
-    cursor: pointer; 
-    background-color: var(--p-primary-color); 
-    border-color: var(--p-primary-color);
-    border-radius: var(--p-content-border-radius);
-    display: flex;
+  width: 38px;
+  cursor: pointer;
+  background-color: var(--p-primary-color);
+  border-color: var(--p-primary-color);
+  border-radius: var(--p-content-border-radius);
+  display: flex;
 
-    i {
-        margin: auto;
-    }
-}
+  i {
+    margin: auto;
+  }
+}