spiderly 19.3.0 → 19.4.0-preview.0

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.
Files changed (31) hide show
  1. package/README.md +17 -17
  2. package/fesm2022/spiderly.mjs +122 -85
  3. package/fesm2022/spiderly.mjs.map +1 -1
  4. package/lib/components/layout/layout.component.d.ts +5 -1
  5. package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts +14 -1
  6. package/package.json +1 -1
  7. package/styles/components/info-card/info-card.component.scss +60 -60
  8. package/styles/components/layout/profile-avatar/profile-avatar.component.scss +8 -8
  9. package/styles/components/layout/topbar/topbar.component.scss +38 -38
  10. package/styles/components/spiderly-data-table/spiderly-data-table.component.scss +48 -48
  11. package/styles/components/spiderly-data-view/spiderly-data-view.component.scss +55 -55
  12. package/styles/components/spiderly-panels/panel-body/panel-body.component.scss +8 -8
  13. package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss +16 -16
  14. package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss +87 -87
  15. package/styles/controls/base-controls.scss +16 -16
  16. package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss +22 -22
  17. package/styles/styles/layout/_content.scss +14 -14
  18. package/styles/styles/layout/_footer.scss +11 -11
  19. package/styles/styles/layout/_main.scss +34 -34
  20. package/styles/styles/layout/_menu.scss +137 -137
  21. package/styles/styles/layout/_mixins.scss +13 -13
  22. package/styles/styles/layout/_preloading.scss +47 -47
  23. package/styles/styles/layout/_responsive.scss +102 -102
  24. package/styles/styles/layout/_spiderly-controls.scss +14 -14
  25. package/styles/styles/layout/_topbar.scss +235 -235
  26. package/styles/styles/layout/_typography.scss +63 -63
  27. package/styles/styles/layout/_utils.scss +19 -19
  28. package/styles/styles/layout/_variables.scss +908 -908
  29. package/styles/styles/layout/layout.scss +11 -11
  30. package/styles/styles/shared.scss +483 -483
  31. package/styles/styles/styles.scss +2 -2
@@ -352,7 +352,7 @@ class SpiderlyAutocompleteComponent extends BaseAutocompleteControl {
352
352
  this.helperFormControl.markAsDirty();
353
353
  }
354
354
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyAutocompleteComponent, deps: [{ token: i1.TranslocoService }, { token: ValidatorAbstractService }], target: i0.ɵɵFactoryTarget.Component }); }
355
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyAutocompleteComponent, isStandalone: true, selector: "spiderly-autocomplete", inputs: { appendTo: "appendTo", showClear: "showClear", emptyMessage: "emptyMessage", displayName: "displayName" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"> <!-- By passing an empty string we remove the label entirely -->\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n \r\n <!-- Don't support p-inputgroup -->\r\n <p-autocomplete\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [id]=\"label\"\r\n [formControl]=\"helperFormControl\"\r\n [placeholder]=\"placeholder\"\r\n [suggestions]=\"options\"\r\n (completeMethod)=\"search($event)\"\r\n [forceSelection]=\"true\"\r\n [dropdown]=\"false\"\r\n [showClear]=\"showClear\"\r\n (onHide)=\"autocompleteMarkAsDirty()\"\r\n (onSelect)=\"select($event)\"\r\n (onClear)=\"clear()\"\r\n [completeOnFocus]=\"true\"\r\n [fluid]=\"true\"\r\n [style]=\"{'width':'100%'}\"\r\n [appendTo]=\"appendTo\"\r\n [emptyMessage]=\"emptyMessage\"\r\n [lazy]=\"true\"\r\n optionLabel=\"displayName\"\r\n ></p-autocomplete>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
355
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyAutocompleteComponent, isStandalone: true, selector: "spiderly-autocomplete", inputs: { appendTo: "appendTo", showClear: "showClear", emptyMessage: "emptyMessage", displayName: "displayName" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"> <!-- By passing an empty string we remove the label entirely -->\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n \n <!-- Don't support p-inputgroup -->\n <p-autocomplete\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [id]=\"label\"\n [formControl]=\"helperFormControl\"\n [placeholder]=\"placeholder\"\n [suggestions]=\"options\"\n (completeMethod)=\"search($event)\"\n [forceSelection]=\"true\"\n [dropdown]=\"false\"\n [showClear]=\"showClear\"\n (onHide)=\"autocompleteMarkAsDirty()\"\n (onSelect)=\"select($event)\"\n (onClear)=\"clear()\"\n [completeOnFocus]=\"true\"\n [fluid]=\"true\"\n [style]=\"{'width':'100%'}\"\n [appendTo]=\"appendTo\"\n [emptyMessage]=\"emptyMessage\"\n [lazy]=\"true\"\n optionLabel=\"displayName\"\n ></p-autocomplete>\n </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
356
356
  }
357
357
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyAutocompleteComponent, decorators: [{
358
358
  type: Component,
@@ -366,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
366
366
  CommonModule,
367
367
  RequiredComponent,
368
368
  TranslocoDirective,
369
- ], template: "<ng-container *transloco=\"let t\">\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"> <!-- By passing an empty string we remove the label entirely -->\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n \r\n <!-- Don't support p-inputgroup -->\r\n <p-autocomplete\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [id]=\"label\"\r\n [formControl]=\"helperFormControl\"\r\n [placeholder]=\"placeholder\"\r\n [suggestions]=\"options\"\r\n (completeMethod)=\"search($event)\"\r\n [forceSelection]=\"true\"\r\n [dropdown]=\"false\"\r\n [showClear]=\"showClear\"\r\n (onHide)=\"autocompleteMarkAsDirty()\"\r\n (onSelect)=\"select($event)\"\r\n (onClear)=\"clear()\"\r\n [completeOnFocus]=\"true\"\r\n [fluid]=\"true\"\r\n [style]=\"{'width':'100%'}\"\r\n [appendTo]=\"appendTo\"\r\n [emptyMessage]=\"emptyMessage\"\r\n [lazy]=\"true\"\r\n optionLabel=\"displayName\"\r\n ></p-autocomplete>\r\n </div>\r\n</ng-container>" }]
369
+ ], template: "<ng-container *transloco=\"let t\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"> <!-- By passing an empty string we remove the label entirely -->\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n \n <!-- Don't support p-inputgroup -->\n <p-autocomplete\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [id]=\"label\"\n [formControl]=\"helperFormControl\"\n [placeholder]=\"placeholder\"\n [suggestions]=\"options\"\n (completeMethod)=\"search($event)\"\n [forceSelection]=\"true\"\n [dropdown]=\"false\"\n [showClear]=\"showClear\"\n (onHide)=\"autocompleteMarkAsDirty()\"\n (onSelect)=\"select($event)\"\n (onClear)=\"clear()\"\n [completeOnFocus]=\"true\"\n [fluid]=\"true\"\n [style]=\"{'width':'100%'}\"\n [appendTo]=\"appendTo\"\n [emptyMessage]=\"emptyMessage\"\n [lazy]=\"true\"\n optionLabel=\"displayName\"\n ></p-autocomplete>\n </div>\n</ng-container>" }]
370
370
  }], ctorParameters: () => [{ type: i1.TranslocoService }, { type: ValidatorAbstractService }], propDecorators: { appendTo: [{
371
371
  type: Input
372
372
  }], showClear: [{
@@ -389,7 +389,7 @@ class SpiderlyCalendarComponent extends BaseControl {
389
389
  setDate(event) {
390
390
  }
391
391
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
392
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCalendarComponent, isStandalone: true, selector: "spiderly-calendar", inputs: { showTime: "showTime" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\" style=\"display: flex; align-items: center;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 8px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n </div>\r\n <p-datepicker\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n (onBlur)=\"control.markAsDirty()\"\r\n dateFormat=\"dd.mm.yy.\"\r\n iconDisplay=\"input\" \r\n [showIcon]=\"true\" \r\n [showTime]=\"showTime\"\r\n (onSelect)=\"setDate($event)\"\r\n appendTo=\"body\"\r\n [fluid]=\"true\"\r\n />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
392
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCalendarComponent, isStandalone: true, selector: "spiderly-calendar", inputs: { showTime: "showTime" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\" style=\"display: flex; align-items: center;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 8px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\n </div>\n <p-datepicker\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n (onBlur)=\"control.markAsDirty()\"\n dateFormat=\"dd.mm.yy.\"\n iconDisplay=\"input\" \n [showIcon]=\"true\" \n [showTime]=\"showTime\"\n (onSelect)=\"setDate($event)\"\n appendTo=\"body\"\n [fluid]=\"true\"\n />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
393
393
  }
394
394
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, decorators: [{
395
395
  type: Component,
@@ -400,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
400
400
  DatePickerModule,
401
401
  TooltipModule,
402
402
  RequiredComponent
403
- ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\" style=\"display: flex; align-items: center;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 8px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n </div>\r\n <p-datepicker\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n (onBlur)=\"control.markAsDirty()\"\r\n dateFormat=\"dd.mm.yy.\"\r\n iconDisplay=\"input\" \r\n [showIcon]=\"true\" \r\n [showTime]=\"showTime\"\r\n (onSelect)=\"setDate($event)\"\r\n appendTo=\"body\"\r\n [fluid]=\"true\"\r\n />\r\n</div>\r\n" }]
403
+ ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\" style=\"display: flex; align-items: center;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 8px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\n </div>\n <p-datepicker\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n (onBlur)=\"control.markAsDirty()\"\n dateFormat=\"dd.mm.yy.\"\n iconDisplay=\"input\" \n [showIcon]=\"true\" \n [showTime]=\"showTime\"\n (onSelect)=\"setDate($event)\"\n appendTo=\"body\"\n [fluid]=\"true\"\n />\n</div>\n" }]
404
404
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showTime: [{
405
405
  type: Input
406
406
  }] } });
@@ -423,7 +423,7 @@ class SpiderlyCheckboxComponent extends BaseControl {
423
423
  super.ngOnInit();
424
424
  }
425
425
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
426
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <div style=\"margin-top: 0.5rem; position: relative;\"> <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\r\n <p-checkbox\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n [formControl]=\"control\"\r\n [value]=\"inlineLabel ? label : null\"\r\n [id]=\"label\"\r\n [binary]=\"true\"\r\n (onChange)=\"change($event)\"\r\n />\r\n </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
426
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <div style=\"margin-top: 0.5rem; position: relative;\"> <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\n <p-checkbox\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \n [formControl]=\"control\"\n [value]=\"inlineLabel ? label : null\"\n [id]=\"label\"\n [binary]=\"true\"\n (onChange)=\"change($event)\"\n />\n </div>\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
427
427
  }
428
428
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, decorators: [{
429
429
  type: Component,
@@ -434,7 +434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
434
434
  CheckboxModule,
435
435
  TooltipModule,
436
436
  RequiredComponent
437
- ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <div style=\"margin-top: 0.5rem; position: relative;\"> <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\r\n <p-checkbox\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n [formControl]=\"control\"\r\n [value]=\"inlineLabel ? label : null\"\r\n [id]=\"label\"\r\n [binary]=\"true\"\r\n (onChange)=\"change($event)\"\r\n />\r\n </div>\r\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
437
+ ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"inlineLabel === false && getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <div style=\"margin-top: 0.5rem; position: relative;\"> <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\n <p-checkbox\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \n [formControl]=\"control\"\n [value]=\"inlineLabel ? label : null\"\n [id]=\"label\"\n [binary]=\"true\"\n (onChange)=\"change($event)\"\n />\n </div>\n</div>", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
438
438
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { fakeLabel: [{
439
439
  type: Input
440
440
  }], initializeToFalse: [{
@@ -460,7 +460,7 @@ class SpiderlyColorPickerComponent extends BaseControl {
460
460
  super.ngOnInit();
461
461
  }
462
462
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
463
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyColorPickerComponent, isStandalone: true, selector: "spiderly-colorpicker", inputs: { showInputTextField: "showInputTextField" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <input\r\n *ngIf=\"control && showInputTextField\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n pInputText\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n [fluid]=\"true\"\r\n />\r\n <p-colorpicker\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n appendTo=\"body\"\r\n ></p-colorpicker>\r\n </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
463
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyColorPickerComponent, isStandalone: true, selector: "spiderly-colorpicker", inputs: { showInputTextField: "showInputTextField" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <div style=\"display: flex; gap: 10px;\">\n <input\n *ngIf=\"control && showInputTextField\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n pInputText\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n [fluid]=\"true\"\n />\n <p-colorpicker\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n appendTo=\"body\"\n ></p-colorpicker>\n </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
464
464
  }
465
465
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, decorators: [{
466
466
  type: Component,
@@ -472,7 +472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
472
472
  InputTextModule,
473
473
  TooltipModule,
474
474
  RequiredComponent
475
- ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <input\r\n *ngIf=\"control && showInputTextField\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n pInputText\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n [fluid]=\"true\"\r\n />\r\n <p-colorpicker\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n appendTo=\"body\"\r\n ></p-colorpicker>\r\n </div>\r\n</div>" }]
475
+ ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <div style=\"display: flex; gap: 10px;\">\n <input\n *ngIf=\"control && showInputTextField\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n pInputText\n [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n [fluid]=\"true\"\n />\n <p-colorpicker\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n appendTo=\"body\"\n ></p-colorpicker>\n </div>\n</div>" }]
476
476
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showInputTextField: [{
477
477
  type: Input
478
478
  }] } });
@@ -498,7 +498,7 @@ class SpiderlyDropdownComponent extends BaseDropdownControl {
498
498
  this.onChange.next(event);
499
499
  }
500
500
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDropdownComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
501
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDropdownComponent, isStandalone: true, selector: "spiderly-dropdown", inputs: { isBooleanPicker: "isBooleanPicker" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n </div>\r\n\r\n <!-- Don't support p-inputgroup -->\r\n <p-select\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n [id]=\"label\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [options]=\"options\"\r\n optionLabel=\"displayName\"\r\n optionValue=\"id\"\r\n [showClear]=\"true\"\r\n (onHide)=\"dropdownMarkAsDirty()\"\r\n (onChange)=\"change($event)\"\r\n [fluid]=\"true\"\r\n appendTo=\"body\"\r\n />\r\n \r\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
501
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDropdownComponent, isStandalone: true, selector: "spiderly-dropdown", inputs: { isBooleanPicker: "isBooleanPicker" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\n </div>\n\n <!-- Don't support p-inputgroup -->\n <p-select\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \n [id]=\"label\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [options]=\"options\"\n optionLabel=\"displayName\"\n optionValue=\"id\"\n [showClear]=\"true\"\n (onHide)=\"dropdownMarkAsDirty()\"\n (onChange)=\"change($event)\"\n [fluid]=\"true\"\n appendTo=\"body\"\n />\n \n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
502
502
  }
503
503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDropdownComponent, decorators: [{
504
504
  type: Component,
@@ -509,7 +509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
509
509
  TooltipModule,
510
510
  CommonModule,
511
511
  RequiredComponent,
512
- ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\r\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\r\n </div>\r\n\r\n <!-- Don't support p-inputgroup -->\r\n <p-select\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \r\n [id]=\"label\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [options]=\"options\"\r\n optionLabel=\"displayName\"\r\n optionValue=\"id\"\r\n [showClear]=\"true\"\r\n (onHide)=\"dropdownMarkAsDirty()\"\r\n (onChange)=\"change($event)\"\r\n [fluid]=\"true\"\r\n appendTo=\"body\"\r\n />\r\n \r\n</div>" }]
512
+ ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n <i *ngIf=\"showTooltip\" class=\"{{tooltipIcon}}\" style=\"margin-left: 5px; cursor: pointer;\" [pTooltip]=\"tooltipText\" tabindex=\"-1\" tooltipEvent=\"focus\"></i>\n </div>\n\n <!-- Don't support p-inputgroup -->\n <p-select\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\" \n [id]=\"label\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [options]=\"options\"\n optionLabel=\"displayName\"\n optionValue=\"id\"\n [showClear]=\"true\"\n (onHide)=\"dropdownMarkAsDirty()\"\n (onChange)=\"change($event)\"\n [fluid]=\"true\"\n appendTo=\"body\"\n />\n \n</div>" }]
513
513
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { isBooleanPicker: [{
514
514
  type: Input
515
515
  }], onChange: [{
@@ -542,7 +542,7 @@ class SpiderlyEditorComponent extends BaseControl {
542
542
  };
543
543
  }
544
544
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
545
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }, { propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n\r\n <!-- Disable doesn't work on this control -->\r\n <p-editor\r\n *ngIf=\"control\"\r\n [formControl]=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [readonly]=\"control.disabled\"\r\n [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\r\n [id]=\"control.label\"\r\n [placeholder]=\"placeholder\"\r\n (click)=\"onClick()\"\r\n [style]=\"{ height: '320px' }\"\r\n ></p-editor>\r\n\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4$4.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
545
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }, { propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n\n <!-- Disable doesn't work on this control -->\n <p-editor\n *ngIf=\"control\"\n [formControl]=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [readonly]=\"control.disabled\"\n [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n [id]=\"control.label\"\n [placeholder]=\"placeholder\"\n (click)=\"onClick()\"\n [style]=\"{ height: '320px' }\"\n ></p-editor>\n\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4$4.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
546
546
  }
547
547
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, decorators: [{
548
548
  type: Component,
@@ -553,7 +553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
553
553
  EditorModule,
554
554
  TooltipModule,
555
555
  RequiredComponent
556
- ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n\r\n <!-- Disable doesn't work on this control -->\r\n <p-editor\r\n *ngIf=\"control\"\r\n [formControl]=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [readonly]=\"control.disabled\"\r\n [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\r\n [id]=\"control.label\"\r\n [placeholder]=\"placeholder\"\r\n (click)=\"onClick()\"\r\n [style]=\"{ height: '320px' }\"\r\n ></p-editor>\r\n\r\n</div>" }]
556
+ ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n\n <!-- Disable doesn't work on this control -->\n <p-editor\n *ngIf=\"control\"\n [formControl]=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [readonly]=\"control.disabled\"\n [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n [id]=\"control.label\"\n [placeholder]=\"placeholder\"\n (click)=\"onClick()\"\n [style]=\"{ height: '320px' }\"\n ></p-editor>\n\n</div>" }]
557
557
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { editor: [{
558
558
  type: ViewChild,
559
559
  args: [Editor]
@@ -634,7 +634,7 @@ class SpiderlyButtonComponent extends SpiderlyButtonBaseComponent {
634
634
  this.type = 'button';
635
635
  }
636
636
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
637
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonComponent, isStandalone: true, selector: "spiderly-button", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<p-button \r\n(onClick)=\"handleClick($event)\" \r\n[label]=\"label\" \r\n[icon]=\"icon\" \r\n[outlined]=\"outlined\" \r\n[styleClass]=\"styleClass\" \r\n[severity]=\"severity\" \r\n[rounded]=\"rounded\"\r\n[style]=\"style\"\r\n[class]=\"class\"\r\n[disabled]=\"disabled\"\r\n[size]=\"size\"\r\n[type]=\"type\"\r\n>\r\n <ng-content></ng-content>\r\n</p-button>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SplitButtonModule }] }); }
637
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonComponent, isStandalone: true, selector: "spiderly-button", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<p-button \n(onClick)=\"handleClick($event)\" \n[label]=\"label\" \n[icon]=\"icon\" \n[outlined]=\"outlined\" \n[styleClass]=\"styleClass\" \n[severity]=\"severity\" \n[rounded]=\"rounded\"\n[style]=\"style\"\n[class]=\"class\"\n[disabled]=\"disabled\"\n[size]=\"size\"\n[type]=\"type\"\n>\n <ng-content></ng-content>\n</p-button>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SplitButtonModule }] }); }
638
638
  }
639
639
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonComponent, decorators: [{
640
640
  type: Component,
@@ -642,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
642
642
  CommonModule,
643
643
  ButtonModule,
644
644
  SplitButtonModule
645
- ], template: "<p-button \r\n(onClick)=\"handleClick($event)\" \r\n[label]=\"label\" \r\n[icon]=\"icon\" \r\n[outlined]=\"outlined\" \r\n[styleClass]=\"styleClass\" \r\n[severity]=\"severity\" \r\n[rounded]=\"rounded\"\r\n[style]=\"style\"\r\n[class]=\"class\"\r\n[disabled]=\"disabled\"\r\n[size]=\"size\"\r\n[type]=\"type\"\r\n>\r\n <ng-content></ng-content>\r\n</p-button>" }]
645
+ ], template: "<p-button \n(onClick)=\"handleClick($event)\" \n[label]=\"label\" \n[icon]=\"icon\" \n[outlined]=\"outlined\" \n[styleClass]=\"styleClass\" \n[severity]=\"severity\" \n[rounded]=\"rounded\"\n[style]=\"style\"\n[class]=\"class\"\n[disabled]=\"disabled\"\n[size]=\"size\"\n[type]=\"type\"\n>\n <ng-content></ng-content>\n</p-button>" }]
646
646
  }], propDecorators: { type: [{
647
647
  type: Input
648
648
  }] } });
@@ -982,7 +982,7 @@ class SpiderlyFileComponent extends BaseControl {
982
982
  return isExcelFileType(mimeType);
983
983
  }
984
984
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
985
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", isCloudinaryFileData: "isCloudinaryFileData", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\r\n <required *ngIf=\"control?.required || required\"></required>\r\n </div>\r\n\r\n <p-fileUpload \r\n [files]=\"files\" \r\n [disabled]=\"disabled\" \r\n [name]=\"control?.label ?? label\" \r\n [multiple]=\"multiple\" \r\n [accept]=\"acceptedFileTypesCommaSeparated\" \r\n [maxFileSize]=\"1000000\" \r\n (onSelect)=\"filesSelected($event)\"\r\n [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\r\n >\r\n <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\r\n <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n <div class=\"flex gap-2\">\r\n <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\r\n <div *ngIf=\"files.length > 0\">\r\n <div class=\"flex justify-content-center p-0 gap-5\">\r\n <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\r\n <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\r\n <img role=\"presentation\" [src]=\"file.objectURL\"/>\r\n </div>\r\n <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\r\n <div class=\"excel-details\">\r\n <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\r\n <span class=\"file-name\">{{ file.name }}</span>\r\n </div>\r\n </div>\r\n <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"file\"> </ng-template>\r\n <ng-template pTemplate=\"empty\">\r\n <div class=\"flex align-items-center justify-content-center flex-column\">\r\n <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"></i>\r\n <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\r\n </div>\r\n </ng-template>\r\n </p-fileUpload>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$3.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
985
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", isCloudinaryFileData: "isCloudinaryFileData", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n <required *ngIf=\"control?.required || required\"></required>\n </div>\n\n <p-fileUpload \n [files]=\"files\" \n [disabled]=\"disabled\" \n [name]=\"control?.label ?? label\" \n [multiple]=\"multiple\" \n [accept]=\"acceptedFileTypesCommaSeparated\" \n [maxFileSize]=\"1000000\" \n (onSelect)=\"filesSelected($event)\"\n [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n >\n <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\n <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\n <div class=\"flex gap-2\">\n <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\n <div *ngIf=\"files.length > 0\">\n <div class=\"flex justify-content-center p-0 gap-5\">\n <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\n <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\n <img role=\"presentation\" [src]=\"file.objectURL\"/>\n </div>\n <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n <div class=\"excel-details\">\n <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\n <span class=\"file-name\">{{ file.name }}</span>\n </div>\n </div>\n <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"file\"> </ng-template>\n <ng-template pTemplate=\"empty\">\n <div class=\"flex align-items-center justify-content-center flex-column\">\n <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"></i>\n <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\n </div>\n </ng-template>\n </p-fileUpload>\n </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$3.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
986
986
  }
987
987
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, decorators: [{
988
988
  type: Component,
@@ -994,7 +994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
994
994
  RequiredComponent,
995
995
  SpiderlyButtonComponent,
996
996
  TranslocoDirective
997
- ], template: "<ng-container *transloco=\"let t\">\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\r\n <required *ngIf=\"control?.required || required\"></required>\r\n </div>\r\n\r\n <p-fileUpload \r\n [files]=\"files\" \r\n [disabled]=\"disabled\" \r\n [name]=\"control?.label ?? label\" \r\n [multiple]=\"multiple\" \r\n [accept]=\"acceptedFileTypesCommaSeparated\" \r\n [maxFileSize]=\"1000000\" \r\n (onSelect)=\"filesSelected($event)\"\r\n [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\r\n >\r\n <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\r\n <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n <div class=\"flex gap-2\">\r\n <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\r\n <div *ngIf=\"files.length > 0\">\r\n <div class=\"flex justify-content-center p-0 gap-5\">\r\n <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\r\n <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\r\n <img role=\"presentation\" [src]=\"file.objectURL\"/>\r\n </div>\r\n <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\r\n <div class=\"excel-details\">\r\n <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\r\n <span class=\"file-name\">{{ file.name }}</span>\r\n </div>\r\n </div>\r\n <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"file\"> </ng-template>\r\n <ng-template pTemplate=\"empty\">\r\n <div class=\"flex align-items-center justify-content-center flex-column\">\r\n <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"></i>\r\n <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\r\n </div>\r\n </ng-template>\r\n </p-fileUpload>\r\n </div>\r\n</ng-container>" }]
997
+ ], template: "<ng-container *transloco=\"let t\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n <required *ngIf=\"control?.required || required\"></required>\n </div>\n\n <p-fileUpload \n [files]=\"files\" \n [disabled]=\"disabled\" \n [name]=\"control?.label ?? label\" \n [multiple]=\"multiple\" \n [accept]=\"acceptedFileTypesCommaSeparated\" \n [maxFileSize]=\"1000000\" \n (onSelect)=\"filesSelected($event)\"\n [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n >\n <ng-template pTemplate=\"header\" let-files let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\" let-uploadCallback=\"uploadCallback\">\n <div class=\"flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\n <div class=\"flex gap-2\">\n <spiderly-button [disabled]=\"disabled\" (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-upload\" [rounded]=\"true\" [outlined]=\"true\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"content\" let-files let-removeFileCallback=\"removeFileCallback\">\n <div *ngIf=\"files.length > 0\">\n <div class=\"flex justify-content-center p-0 gap-5\">\n <div *ngFor=\"let file of files; let index = index\" class=\"card m-0 px-3 py-3 flex flex-column align-items-center gap-3\" style=\"justify-content: center; overflow: hidden;\">\n <div *ngIf=\"isImageFileType(file.type)\" class=\"image-container\">\n <img role=\"presentation\" [src]=\"file.objectURL\"/>\n </div>\n <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n <div class=\"excel-details\">\n <i class=\"pi pi-file-excel\" style=\"color: green; margin-right: 4px;\"></i>\n <span class=\"file-name\">{{ file.name }}</span>\n </div>\n </div>\n <spiderly-button [disabled]=\"disabled\" icon=\"pi pi-times\" (onClick)=\"fileRemoved(removeFileCallback, index)\" [outlined]=\"true\" [rounded]=\"true\" severity=\"danger\" />\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"file\"> </ng-template>\n <ng-template pTemplate=\"empty\">\n <div class=\"flex align-items-center justify-content-center flex-column\">\n <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400 mt-3\"></i>\n <p class=\"mt-4 mb-0\">{{t('DragAndDropFilesHereToUpload')}}</p>\n </div>\n </ng-template>\n </p-fileUpload>\n </div>\n</ng-container>" }]
998
998
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { onFileSelected: [{
999
999
  type: Output
1000
1000
  }], onFileRemoved: [{
@@ -1035,7 +1035,7 @@ class SpiderlyMultiAutocompleteComponent extends BaseAutocompleteControl {
1035
1035
  this.onTextInput.next(event);
1036
1036
  }
1037
1037
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1038
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiAutocompleteComponent, isStandalone: true, selector: "spiderly-multiautocomplete", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n\r\n <!-- Don't support p-inputgroup -->\r\n <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\r\n <p-autocomplete \r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [id]=\"label\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [suggestions]=\"options\"\r\n (completeMethod)=\"search($event)\"\r\n [forceSelection]=\"true\"\r\n [multiple]=\"true\"\r\n [dropdown]=\"false\"\r\n [showClear]=\"true\"\r\n (onHide)=\"dropdownMarkAsDirty()\"\r\n [completeOnFocus]=\"true\"\r\n dropdownIcon=\"pi pi-plus\"\r\n [fluid]=\"true\"\r\n [style]=\"{'width': '100%'}\"\r\n appendTo=\"body\"\r\n optionLabel=\"displayName\"\r\n dataKey=\"id\"\r\n >\r\n </p-autocomplete>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
1038
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiAutocompleteComponent, isStandalone: true, selector: "spiderly-multiautocomplete", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n\n <!-- Don't support p-inputgroup -->\n <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\n <p-autocomplete \n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [id]=\"label\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [suggestions]=\"options\"\n (completeMethod)=\"search($event)\"\n [forceSelection]=\"true\"\n [multiple]=\"true\"\n [dropdown]=\"false\"\n [showClear]=\"true\"\n (onHide)=\"dropdownMarkAsDirty()\"\n [completeOnFocus]=\"true\"\n dropdownIcon=\"pi pi-plus\"\n [fluid]=\"true\"\n [style]=\"{'width': '100%'}\"\n appendTo=\"body\"\n optionLabel=\"displayName\"\n dataKey=\"id\"\n >\n </p-autocomplete>\n </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
1039
1039
  }
1040
1040
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, decorators: [{
1041
1041
  type: Component,
@@ -1047,7 +1047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1047
1047
  CommonModule,
1048
1048
  RequiredComponent,
1049
1049
  TranslocoDirective,
1050
- ], template: "<ng-container *transloco=\"let t\">\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n\r\n <!-- Don't support p-inputgroup -->\r\n <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\r\n <p-autocomplete \r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [id]=\"label\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [suggestions]=\"options\"\r\n (completeMethod)=\"search($event)\"\r\n [forceSelection]=\"true\"\r\n [multiple]=\"true\"\r\n [dropdown]=\"false\"\r\n [showClear]=\"true\"\r\n (onHide)=\"dropdownMarkAsDirty()\"\r\n [completeOnFocus]=\"true\"\r\n dropdownIcon=\"pi pi-plus\"\r\n [fluid]=\"true\"\r\n [style]=\"{'width': '100%'}\"\r\n appendTo=\"body\"\r\n optionLabel=\"displayName\"\r\n dataKey=\"id\"\r\n >\r\n </p-autocomplete>\r\n </div>\r\n</ng-container>" }]
1050
+ ], template: "<ng-container *transloco=\"let t\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n\n <!-- Don't support p-inputgroup -->\n <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\n <p-autocomplete \n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [id]=\"label\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [suggestions]=\"options\"\n (completeMethod)=\"search($event)\"\n [forceSelection]=\"true\"\n [multiple]=\"true\"\n [dropdown]=\"false\"\n [showClear]=\"true\"\n (onHide)=\"dropdownMarkAsDirty()\"\n [completeOnFocus]=\"true\"\n dropdownIcon=\"pi pi-plus\"\n [fluid]=\"true\"\n [style]=\"{'width': '100%'}\"\n appendTo=\"body\"\n optionLabel=\"displayName\"\n dataKey=\"id\"\n >\n </p-autocomplete>\n </div>\n</ng-container>" }]
1051
1051
  }], ctorParameters: () => [{ type: i1.TranslocoService }] });
1052
1052
 
1053
1053
  class SpiderlyMultiSelectComponent extends BaseDropdownControl {
@@ -1059,7 +1059,7 @@ class SpiderlyMultiSelectComponent extends BaseDropdownControl {
1059
1059
  super.ngOnInit();
1060
1060
  }
1061
1061
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiSelectComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1062
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiSelectComponent, isStandalone: true, selector: "spiderly-multiselect", usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <p-multiSelect\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [id]=\"label\"\r\n [formControl]=\"control\"\r\n [options]=\"options\"\r\n optionLabel=\"displayName\"\r\n optionValue=\"id\"\r\n display=\"chip\"\r\n [maxSelectedLabels]=\"20\"\r\n [placeholder]=\"placeholder\"\r\n [fluid]=\"true\"\r\n appendTo=\"body\"\r\n />\r\n <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\r\n <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\r\n we need to use this and dropdown control only on the client -->\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1062
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiSelectComponent, isStandalone: true, selector: "spiderly-multiselect", usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <p-multiSelect\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [id]=\"label\"\n [formControl]=\"control\"\n [options]=\"options\"\n optionLabel=\"displayName\"\n optionValue=\"id\"\n display=\"chip\"\n [maxSelectedLabels]=\"20\"\n [placeholder]=\"placeholder\"\n [fluid]=\"true\"\n appendTo=\"body\"\n />\n <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\n <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\n we need to use this and dropdown control only on the client -->\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1063
1063
  }
1064
1064
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiSelectComponent, decorators: [{
1065
1065
  type: Component,
@@ -1070,7 +1070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1070
1070
  MultiSelectModule,
1071
1071
  TooltipModule,
1072
1072
  RequiredComponent
1073
- ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <p-multiSelect\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [id]=\"label\"\r\n [formControl]=\"control\"\r\n [options]=\"options\"\r\n optionLabel=\"displayName\"\r\n optionValue=\"id\"\r\n display=\"chip\"\r\n [maxSelectedLabels]=\"20\"\r\n [placeholder]=\"placeholder\"\r\n [fluid]=\"true\"\r\n appendTo=\"body\"\r\n />\r\n <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\r\n <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\r\n we need to use this and dropdown control only on the client -->\r\n</div>" }]
1073
+ ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <p-multiSelect\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [id]=\"label\"\n [formControl]=\"control\"\n [options]=\"options\"\n optionLabel=\"displayName\"\n optionValue=\"id\"\n display=\"chip\"\n [maxSelectedLabels]=\"20\"\n [placeholder]=\"placeholder\"\n [fluid]=\"true\"\n appendTo=\"body\"\n />\n <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\n <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\n we need to use this and dropdown control only on the client -->\n</div>" }]
1074
1074
  }], ctorParameters: () => [{ type: i1.TranslocoService }] });
1075
1075
 
1076
1076
  class SpiderlyNumberComponent extends BaseControl {
@@ -1084,7 +1084,7 @@ class SpiderlyNumberComponent extends BaseControl {
1084
1084
  super.ngOnInit();
1085
1085
  }
1086
1086
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyNumberComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1087
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyNumberComponent, isStandalone: true, selector: "spiderly-number", inputs: { prefix: "prefix", showButtons: "showButtons", decimal: "decimal", maxFractionDigits: "maxFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"showLabel\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <p-inputNumber\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (onBlur)=\"control.markAsDirty()\"\r\n [prefix]=\"prefix\"\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n [showButtons]=\"showButtons\"\r\n buttonLayout=\"horizontal\"\r\n [maxFractionDigits]=\"maxFractionDigits\"\r\n />\r\n </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1087
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyNumberComponent, isStandalone: true, selector: "spiderly-number", inputs: { prefix: "prefix", showButtons: "showButtons", decimal: "decimal", maxFractionDigits: "maxFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"showLabel\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <p-inputNumber\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n [id]=\"control.label\"\n (onBlur)=\"control.markAsDirty()\"\n [prefix]=\"prefix\"\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n [showButtons]=\"showButtons\"\n buttonLayout=\"horizontal\"\n [maxFractionDigits]=\"maxFractionDigits\"\n />\n </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1088
1088
  }
1089
1089
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyNumberComponent, decorators: [{
1090
1090
  type: Component,
@@ -1095,7 +1095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1095
1095
  InputNumberModule,
1096
1096
  TooltipModule,
1097
1097
  RequiredComponent
1098
- ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"showLabel\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <p-inputNumber\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (onBlur)=\"control.markAsDirty()\"\r\n [prefix]=\"prefix\"\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n [showButtons]=\"showButtons\"\r\n buttonLayout=\"horizontal\"\r\n [maxFractionDigits]=\"maxFractionDigits\"\r\n />\r\n </div>" }]
1098
+ ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"showLabel\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <p-inputNumber\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n [id]=\"control.label\"\n (onBlur)=\"control.markAsDirty()\"\n [prefix]=\"prefix\"\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n [showButtons]=\"showButtons\"\n buttonLayout=\"horizontal\"\n [maxFractionDigits]=\"maxFractionDigits\"\n />\n </div>" }]
1099
1099
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { prefix: [{
1100
1100
  type: Input
1101
1101
  }], showButtons: [{
@@ -1116,7 +1116,7 @@ class SpiderlyPasswordComponent extends BaseControl {
1116
1116
  super.ngOnInit();
1117
1117
  }
1118
1118
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1119
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPasswordComponent, isStandalone: true, selector: "spiderly-password", inputs: { showPasswordStrength: "showPasswordStrength" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <p-password\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n [id]=\"control?.label\"\r\n [toggleMask]=\"true\"\r\n [feedback]=\"showPasswordStrength\"\r\n (onBlur)=\"control?.markAsDirty()\"\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n />\r\n </div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i4$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1119
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPasswordComponent, isStandalone: true, selector: "spiderly-password", inputs: { showPasswordStrength: "showPasswordStrength" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <p-password\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n [id]=\"control?.label\"\n [toggleMask]=\"true\"\n [feedback]=\"showPasswordStrength\"\n (onBlur)=\"control?.markAsDirty()\"\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n />\n </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i4$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1120
1120
  }
1121
1121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, decorators: [{
1122
1122
  type: Component,
@@ -1127,7 +1127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1127
1127
  PasswordModule,
1128
1128
  TooltipModule,
1129
1129
  RequiredComponent
1130
- ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <p-password\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n [formControl]=\"control\"\r\n [id]=\"control?.label\"\r\n [toggleMask]=\"true\"\r\n [feedback]=\"showPasswordStrength\"\r\n (onBlur)=\"control?.markAsDirty()\"\r\n [style]=\"{'width':'100%'}\"\r\n [inputStyle]=\"{'width':'100%'}\"\r\n />\r\n </div>\r\n" }]
1130
+ ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <p-password\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n [formControl]=\"control\"\n [id]=\"control?.label\"\n [toggleMask]=\"true\"\n [feedback]=\"showPasswordStrength\"\n (onBlur)=\"control?.markAsDirty()\"\n [style]=\"{'width':'100%'}\"\n [inputStyle]=\"{'width':'100%'}\"\n />\n </div>\n" }]
1131
1131
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showPasswordStrength: [{
1132
1132
  type: Input
1133
1133
  }] } });
@@ -1141,7 +1141,7 @@ class SpiderlyTextareaComponent extends BaseControl {
1141
1141
  super.ngOnInit();
1142
1142
  }
1143
1143
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextareaComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1144
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextareaComponent, isStandalone: true, selector: "spiderly-textarea", usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <textarea\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n pTextarea\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n [autoResize]=\"true\"\r\n [class]=\"control.disabled ? 'disabled' : ''\"\r\n ></textarea>\r\n </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$8.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1144
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextareaComponent, isStandalone: true, selector: "spiderly-textarea", usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <textarea\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n pTextarea\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n [autoResize]=\"true\"\n [class]=\"control.disabled ? 'disabled' : ''\"\n ></textarea>\n </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$8.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1145
1145
  }
1146
1146
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextareaComponent, decorators: [{
1147
1147
  type: Component,
@@ -1152,7 +1152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1152
1152
  TextareaModule,
1153
1153
  TooltipModule,
1154
1154
  RequiredComponent
1155
- ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div>\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <textarea\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n pTextarea\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n [autoResize]=\"true\"\r\n [class]=\"control.disabled ? 'disabled' : ''\"\r\n ></textarea>\r\n </div>" }]
1155
+ ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div>\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <textarea\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n pTextarea\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n [autoResize]=\"true\"\n [class]=\"control.disabled ? 'disabled' : ''\"\n ></textarea>\n </div>" }]
1156
1156
  }], ctorParameters: () => [{ type: i1.TranslocoService }] });
1157
1157
 
1158
1158
  class SpiderlyTextboxComponent extends BaseControl {
@@ -1169,7 +1169,7 @@ class SpiderlyTextboxComponent extends BaseControl {
1169
1169
  this.onButtonClick.next(null);
1170
1170
  }
1171
1171
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextboxComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1172
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextboxComponent, isStandalone: true, selector: "spiderly-textbox", inputs: { showButton: "showButton", buttonIcon: "buttonIcon" }, outputs: { onButtonClick: "onButtonClick" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <div class=\"spiderly-inputgroup\">\r\n <input\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n pInputText\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n [placeholder]=\"placeholder\"\r\n [fluid]=\"true\"\r\n />\r\n <span *ngIf=\"showButton\" (click)=\"buttonClick()\" class=\"spiderly-inputgroup-addon\">\r\n <i class=\"{{buttonIcon}}\"></i>\r\n </span>\r\n </div>\r\n</div>", styles: [".spiderly-inputgroup{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}.spiderly-inputgroup-addon i{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1172
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextboxComponent, isStandalone: true, selector: "spiderly-textbox", inputs: { showButton: "showButton", buttonIcon: "buttonIcon" }, outputs: { onButtonClick: "onButtonClick" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <div class=\"spiderly-inputgroup\">\n <input\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n pInputText\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n [placeholder]=\"placeholder\"\n [fluid]=\"true\"\n />\n <span *ngIf=\"showButton\" (click)=\"buttonClick()\" class=\"spiderly-inputgroup-addon\">\n <i class=\"{{buttonIcon}}\"></i>\n </span>\n </div>\n</div>", styles: [".spiderly-inputgroup{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}.spiderly-inputgroup-addon i{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
1173
1173
  }
1174
1174
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextboxComponent, decorators: [{
1175
1175
  type: Component,
@@ -1180,7 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1180
1180
  InputTextModule,
1181
1181
  TooltipModule,
1182
1182
  RequiredComponent
1183
- ], template: "<!-- Can't put (onBlur) in this control -->\r\n\r\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\r\n <label>{{getTranslatedLabel()}}</label>\r\n <required *ngIf=\"control?.required && showRequired\"></required>\r\n </div>\r\n <div class=\"spiderly-inputgroup\">\r\n <input\r\n *ngIf=\"control\"\r\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\r\n pInputText\r\n [formControl]=\"control\"\r\n [id]=\"control.label\"\r\n (blur)=\"control.markAsDirty()\"\r\n [placeholder]=\"placeholder\"\r\n [fluid]=\"true\"\r\n />\r\n <span *ngIf=\"showButton\" (click)=\"buttonClick()\" class=\"spiderly-inputgroup-addon\">\r\n <i class=\"{{buttonIcon}}\"></i>\r\n </span>\r\n </div>\r\n</div>", styles: [".spiderly-inputgroup{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}.spiderly-inputgroup-addon i{margin:auto}\n"] }]
1183
+ ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n <label>{{getTranslatedLabel()}}</label>\n <required *ngIf=\"control?.required && showRequired\"></required>\n </div>\n <div class=\"spiderly-inputgroup\">\n <input\n *ngIf=\"control\"\n [pTooltip]=\"getValidationErrrorMessages()\" [tooltipEvent]=\"errorMessageTooltipEvent\" tooltipPosition=\"bottom\" [tooltipDisabled]=\"control.valid\" tooltipStyleClass=\"spiderly-tooltip-invalid\"\n pInputText\n [formControl]=\"control\"\n [id]=\"control.label\"\n (blur)=\"control.markAsDirty()\"\n [placeholder]=\"placeholder\"\n [fluid]=\"true\"\n />\n <span *ngIf=\"showButton\" (click)=\"buttonClick()\" class=\"spiderly-inputgroup-addon\">\n <i class=\"{{buttonIcon}}\"></i>\n </span>\n </div>\n</div>", styles: [".spiderly-inputgroup{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}.spiderly-inputgroup-addon i{margin:auto}\n"] }]
1184
1184
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showButton: [{
1185
1185
  type: Input
1186
1186
  }], buttonIcon: [{
@@ -1204,7 +1204,7 @@ class SpiderlyReturnButtonComponent {
1204
1204
  }
1205
1205
  }
1206
1206
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyReturnButtonComponent, deps: [{ token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
1207
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyReturnButtonComponent, isStandalone: true, selector: "return-button", inputs: { navigateUrl: "navigateUrl" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <spiderly-button (onClick)=\"onReturn()\" [label]=\"t('Return')\" icon=\"pi pi-undo\" [outlined]=\"true\"></spiderly-button>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
1207
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyReturnButtonComponent, isStandalone: true, selector: "return-button", inputs: { navigateUrl: "navigateUrl" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <spiderly-button (onClick)=\"onReturn()\" [label]=\"t('Return')\" icon=\"pi pi-undo\" [outlined]=\"true\"></spiderly-button>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
1208
1208
  }
1209
1209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyReturnButtonComponent, decorators: [{
1210
1210
  type: Component,
@@ -1213,7 +1213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
1213
1213
  ButtonModule,
1214
1214
  SpiderlyButtonComponent,
1215
1215
  TranslocoDirective,
1216
- ], template: "<ng-container *transloco=\"let t\">\r\n <spiderly-button (onClick)=\"onReturn()\" [label]=\"t('Return')\" icon=\"pi pi-undo\" [outlined]=\"true\"></spiderly-button>\r\n</ng-container>" }]
1216
+ ], template: "<ng-container *transloco=\"let t\">\n <spiderly-button (onClick)=\"onReturn()\" [label]=\"t('Return')\" icon=\"pi pi-undo\" [outlined]=\"true\"></spiderly-button>\n</ng-container>" }]
1217
1217
  }], ctorParameters: () => [{ type: i3$2.Router }], propDecorators: { navigateUrl: [{
1218
1218
  type: Input
1219
1219
  }] } });
@@ -1665,11 +1665,11 @@ class CardSkeletonComponent {
1665
1665
  this.dataHeight = this.height - (this.titleHeight + this.padding * 2 + this.titleMarginBottom + this.titleMarginTop);
1666
1666
  }
1667
1667
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: CardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1668
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: CardSkeletonComponent, isStandalone: true, selector: "card-skeleton", inputs: { height: "height" }, ngImport: i0, template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\r\n <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\r\n <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\r\n </div>\r\n <div [style]=\"'height: ' + dataHeight + 'px;'\">\r\n <p-skeleton width=\"100%\" height=\"100%\"/>\r\n </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] }); }
1668
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: CardSkeletonComponent, isStandalone: true, selector: "card-skeleton", inputs: { height: "height" }, ngImport: i0, template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\n <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\n <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\n </div>\n <div [style]=\"'height: ' + dataHeight + 'px;'\">\n <p-skeleton width=\"100%\" height=\"100%\"/>\n </div>\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] }); }
1669
1669
  }
1670
1670
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: CardSkeletonComponent, decorators: [{
1671
1671
  type: Component,
1672
- args: [{ selector: 'card-skeleton', imports: [SkeletonModule], template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\r\n <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\r\n <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\r\n </div>\r\n <div [style]=\"'height: ' + dataHeight + 'px;'\">\r\n <p-skeleton width=\"100%\" height=\"100%\"/>\r\n </div>\r\n</div>" }]
1672
+ args: [{ selector: 'card-skeleton', imports: [SkeletonModule], template: "<div class=\"border-round border-1 surface-border p-4 surface-card\" [style]=\"'height: ' + height + 'px;'\">\n <div [style]=\"'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'\">\n <p-skeleton width=\"160px\" [height]=\"titleHeight + 'px'\"></p-skeleton>\n </div>\n <div [style]=\"'height: ' + dataHeight + 'px;'\">\n <p-skeleton width=\"100%\" height=\"100%\"/>\n </div>\n</div>" }]
1673
1673
  }], propDecorators: { height: [{
1674
1674
  type: Input
1675
1675
  }] } });
@@ -1681,11 +1681,11 @@ class PanelBodyComponent {
1681
1681
  ngOnInit() {
1682
1682
  }
1683
1683
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1684
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PanelBodyComponent, isStandalone: false, selector: "panel-body", inputs: { normalBottomPadding: "normalBottomPadding" }, ngImport: i0, template: "<!-- this is selector, not the class -->\r\n<div class=\"panel-body\"\r\n [ngClass]=\"{\r\n 'non-grid-panel-bottom-padding': normalBottomPadding, \r\n }\"\r\n style=\"overflow: auto;\">\r\n <!-- 'card': true, -->\r\n <ng-content></ng-content>\r\n</div>", styles: [".non-grid-panel-bottom-padding{padding-bottom:14px}@media (max-width: 600px){.non-grid-panel-bottom-padding{padding-bottom:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1684
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PanelBodyComponent, isStandalone: false, selector: "panel-body", inputs: { normalBottomPadding: "normalBottomPadding" }, ngImport: i0, template: "<!-- this is selector, not the class -->\n<div class=\"panel-body\"\n [ngClass]=\"{\n 'non-grid-panel-bottom-padding': normalBottomPadding, \n }\"\n style=\"overflow: auto;\">\n <!-- 'card': true, -->\n <ng-content></ng-content>\n</div>", styles: [".non-grid-panel-bottom-padding{padding-bottom:14px}@media (max-width: 600px){.non-grid-panel-bottom-padding{padding-bottom:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1685
1685
  }
1686
1686
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelBodyComponent, decorators: [{
1687
1687
  type: Component,
1688
- args: [{ selector: 'panel-body', standalone: false, template: "<!-- this is selector, not the class -->\r\n<div class=\"panel-body\"\r\n [ngClass]=\"{\r\n 'non-grid-panel-bottom-padding': normalBottomPadding, \r\n }\"\r\n style=\"overflow: auto;\">\r\n <!-- 'card': true, -->\r\n <ng-content></ng-content>\r\n</div>", styles: [".non-grid-panel-bottom-padding{padding-bottom:14px}@media (max-width: 600px){.non-grid-panel-bottom-padding{padding-bottom:0}}\n"] }]
1688
+ args: [{ selector: 'panel-body', standalone: false, template: "<!-- this is selector, not the class -->\n<div class=\"panel-body\"\n [ngClass]=\"{\n 'non-grid-panel-bottom-padding': normalBottomPadding, \n }\"\n style=\"overflow: auto;\">\n <!-- 'card': true, -->\n <ng-content></ng-content>\n</div>", styles: [".non-grid-panel-bottom-padding{padding-bottom:14px}@media (max-width: 600px){.non-grid-panel-bottom-padding{padding-bottom:0}}\n"] }]
1689
1689
  }], ctorParameters: () => [], propDecorators: { normalBottomPadding: [{
1690
1690
  type: Input
1691
1691
  }] } });
@@ -1695,11 +1695,11 @@ class PanelFooterComponent {
1695
1695
  ngOnInit() {
1696
1696
  }
1697
1697
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1698
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PanelFooterComponent, isStandalone: false, selector: "panel-footer", ngImport: i0, template: "<div class=\"spiderly-panel-footer\">\r\n <div class=\"buttons-wrapper\">\r\n <ng-content></ng-content>\r\n </div>\r\n <span class=\"p-text-secondary\">\r\n <ng-content select=\"[footerRight]\"></ng-content>\r\n </span>\r\n</div>", styles: [".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:.5rem;display:flex;align-items:center;flex-wrap:wrap}\n"] }); }
1698
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PanelFooterComponent, isStandalone: false, selector: "panel-footer", ngImport: i0, template: "<div class=\"spiderly-panel-footer\">\n <div class=\"buttons-wrapper\">\n <ng-content></ng-content>\n </div>\n <span class=\"p-text-secondary\">\n <ng-content select=\"[footerRight]\"></ng-content>\n </span>\n</div>", styles: [".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:.5rem;display:flex;align-items:center;flex-wrap:wrap}\n"] }); }
1699
1699
  }
1700
1700
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelFooterComponent, decorators: [{
1701
1701
  type: Component,
1702
- args: [{ selector: 'panel-footer', standalone: false, template: "<div class=\"spiderly-panel-footer\">\r\n <div class=\"buttons-wrapper\">\r\n <ng-content></ng-content>\r\n </div>\r\n <span class=\"p-text-secondary\">\r\n <ng-content select=\"[footerRight]\"></ng-content>\r\n </span>\r\n</div>", styles: [".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:.5rem;display:flex;align-items:center;flex-wrap:wrap}\n"] }]
1702
+ args: [{ selector: 'panel-footer', standalone: false, template: "<div class=\"spiderly-panel-footer\">\n <div class=\"buttons-wrapper\">\n <ng-content></ng-content>\n </div>\n <span class=\"p-text-secondary\">\n <ng-content select=\"[footerRight]\"></ng-content>\n </span>\n</div>", styles: [".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:.5rem;display:flex;align-items:center;flex-wrap:wrap}\n"] }]
1703
1703
  }], ctorParameters: () => [] });
1704
1704
 
1705
1705
  class PanelHeaderComponent {
@@ -1720,11 +1720,11 @@ class PanelHeaderComponent {
1720
1720
  tab.isSelected = true;
1721
1721
  }
1722
1722
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelHeaderComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
1723
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PanelHeaderComponent, isStandalone: false, selector: "panel-header", inputs: { title: "title", showBigTitle: "showBigTitle", showIcon: "showIcon", icon: "icon", index: "index", tabs: "tabs" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\r\n @if (tabs == null) {\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n <div [style]=\"(showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : '')\">{{title}}</div>\r\n </div>\r\n }\r\n @else {\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"setTabIsSelected(tab)\"\r\n [style]=\"{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n cursor: 'pointer',\r\n fontWeight: tab.isSelected ? '700' : 'normal'\r\n }\">\r\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n <div [style]=\"showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : ''\">{{tab.label}}</div>\r\n </div>\r\n }\r\n }\r\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1723
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PanelHeaderComponent, isStandalone: false, selector: "panel-header", inputs: { title: "title", showBigTitle: "showBigTitle", showIcon: "showIcon", icon: "icon", index: "index", tabs: "tabs" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\n @if (tabs == null) {\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\n <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \n <div [style]=\"(showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : '')\">{{title}}</div>\n </div>\n }\n @else {\n @for (tab of tabs; track $index) {\n <div (click)=\"setTabIsSelected(tab)\"\n [style]=\"{\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n cursor: 'pointer',\n fontWeight: tab.isSelected ? '700' : 'normal'\n }\">\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\n <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \n <div [style]=\"showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : ''\">{{tab.label}}</div>\n </div>\n }\n }\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1724
1724
  }
1725
1725
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PanelHeaderComponent, decorators: [{
1726
1726
  type: Component,
1727
- args: [{ selector: 'panel-header', standalone: false, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\r\n @if (tabs == null) {\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n <div [style]=\"(showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : '')\">{{title}}</div>\r\n </div>\r\n }\r\n @else {\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"setTabIsSelected(tab)\"\r\n [style]=\"{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n cursor: 'pointer',\r\n fontWeight: tab.isSelected ? '700' : 'normal'\r\n }\">\r\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\r\n <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \r\n <div [style]=\"showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : ''\">{{tab.label}}</div>\r\n </div>\r\n }\r\n }\r\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"] }]
1727
+ args: [{ selector: 'panel-header', standalone: false, template: "<div style=\"display: flex; align-items: center; gap: 24px; flex-wrap: wrap;\">\n @if (tabs == null) {\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\n <i class=\"{{icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \n <div [style]=\"(showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : '')\">{{title}}</div>\n </div>\n }\n @else {\n @for (tab of tabs; track $index) {\n <div (click)=\"setTabIsSelected(tab)\"\n [style]=\"{\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n cursor: 'pointer',\n fontWeight: tab.isSelected ? '700' : 'normal'\n }\">\n <span *ngIf=\"index != null\" class=\"number-circle\">{{index + 1}}</span>\n <i class=\"{{tab.icon}} primary-color\" [style]=\"showBigTitle ? 'font-size: 21px' : 'font-size: 16px;'\"></i> \n <div [style]=\"showBigTitle ? 'font-size: 17.5px; font-weight: 500;' : ''\">{{tab.label}}</div>\n </div>\n }\n }\n</div>", styles: [".p-panel-icons-end{font-size:50px}\n"] }]
1728
1728
  }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { title: [{
1729
1729
  type: Input
1730
1730
  }], showBigTitle: [{
@@ -1771,11 +1771,11 @@ class SpiderlyPanelComponent {
1771
1771
  this.onRemoveIconClick.next(null);
1772
1772
  }
1773
1773
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1774
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPanelComponent, isStandalone: false, selector: "spiderly-panel", inputs: { isFirstMultiplePanel: "isFirstMultiplePanel", isMiddleMultiplePanel: "isMiddleMultiplePanel", isLastMultiplePanel: "isLastMultiplePanel", toggleable: "toggleable", toggler: "toggler", collapsed: "collapsed", crudMenu: "crudMenu", showCrudMenu: "showCrudMenu", showRemoveIcon: "showRemoveIcon", index: "index", showPanelHeader: "showPanelHeader" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<p-panel \r\n[showHeader]=\"showPanelHeader\"\r\n[ngClass]=\"{\r\n 'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,\r\n 'multiple-panel-first': isFirstMultiplePanel,\r\n 'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,\r\n 'multiple-panel-middle': isMiddleMultiplePanel,\r\n 'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,\r\n 'multiple-panel-last': isLastMultiplePanel,\r\n 'panel-border': !isFirstMultiplePanel,\r\n 'spiderly-panel': true,\r\n 'panel-header-cursor-pointer': toggler === 'header' && toggleable\r\n}\"\r\n[toggleable]=\"toggleable\"\r\n[toggler]=\"toggler\"\r\n[collapsed]=\"toggleable && collapsed\"\r\nexpandIcon=\"pi pi-chevron-up\"\r\ncollapseIcon=\"pi pi-chevron-down\"\r\n>\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <ng-content select=\"panel-header\"></ng-content>\r\n <ng-content select=\"[panelHeader]\"></ng-content>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"icons\">\r\n <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\r\n <i class=\"pi pi-ellipsis-h icon-hover\" (click)=\"menuItemClick(index, $event)\"></i>\r\n <!-- https://github.com/primefaces/primeng/issues/13934 -->\r\n <p-menu #menu [model]=\"crudMenu\" [popup]=\"true\" appendTo=\"body\" [tabindex]=\"undefined\"></p-menu>\r\n </div>\r\n <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\r\n <i class=\"pi pi-minus icon-hover error-color-light\" (click)=\"removeItemClick()\"></i>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"panel-body-wrapper\">\r\n <ng-content select=\"panel-body\"></ng-content>\r\n </div>\r\n\r\n <ng-content select=\"panel-footer\"></ng-content>\r\n\r\n</p-panel>\r\n", styles: [":host ::ng-deep .spiderly-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}:host ::ng-deep .panel-header-cursor-pointer .p-panel-header{cursor:pointer!important}.multiple-panel-first-without-header .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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-radius:0/0px;border-top:1px solid var(--surface-border);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:0;border-top-right-radius:0}.multiple-panel-first .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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)}.multiple-panel-middle .p-panel{border-radius:0;border-bottom:none}.multiple-panel-last .p-panel{border-top-left-radius:0;border-top-right-radius:0}.panel-body-wrapper{padding:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$9.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
1774
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPanelComponent, isStandalone: false, selector: "spiderly-panel", inputs: { isFirstMultiplePanel: "isFirstMultiplePanel", isMiddleMultiplePanel: "isMiddleMultiplePanel", isLastMultiplePanel: "isLastMultiplePanel", toggleable: "toggleable", toggler: "toggler", collapsed: "collapsed", crudMenu: "crudMenu", showCrudMenu: "showCrudMenu", showRemoveIcon: "showRemoveIcon", index: "index", showPanelHeader: "showPanelHeader" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<p-panel \n[showHeader]=\"showPanelHeader\"\n[ngClass]=\"{\n 'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,\n 'multiple-panel-first': isFirstMultiplePanel,\n 'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,\n 'multiple-panel-middle': isMiddleMultiplePanel,\n 'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,\n 'multiple-panel-last': isLastMultiplePanel,\n 'panel-border': !isFirstMultiplePanel,\n 'spiderly-panel': true,\n 'panel-header-cursor-pointer': toggler === 'header' && toggleable\n}\"\n[toggleable]=\"toggleable\"\n[toggler]=\"toggler\"\n[collapsed]=\"toggleable && collapsed\"\nexpandIcon=\"pi pi-chevron-up\"\ncollapseIcon=\"pi pi-chevron-down\"\n>\n <ng-template pTemplate=\"header\">\n <div>\n <ng-content select=\"panel-header\"></ng-content>\n <ng-content select=\"[panelHeader]\"></ng-content>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"icons\">\n <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\n <i class=\"pi pi-ellipsis-h icon-hover\" (click)=\"menuItemClick(index, $event)\"></i>\n <!-- https://github.com/primefaces/primeng/issues/13934 -->\n <p-menu #menu [model]=\"crudMenu\" [popup]=\"true\" appendTo=\"body\" [tabindex]=\"undefined\"></p-menu>\n </div>\n <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\n <i class=\"pi pi-minus icon-hover error-color-light\" (click)=\"removeItemClick()\"></i>\n </div>\n </ng-template>\n\n <div class=\"panel-body-wrapper\">\n <ng-content select=\"panel-body\"></ng-content>\n </div>\n\n <ng-content select=\"panel-footer\"></ng-content>\n\n</p-panel>\n", styles: [":host ::ng-deep .spiderly-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}:host ::ng-deep .panel-header-cursor-pointer .p-panel-header{cursor:pointer!important}.multiple-panel-first-without-header .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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-radius:0/0px;border-top:1px solid var(--surface-border);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:0;border-top-right-radius:0}.multiple-panel-first .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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)}.multiple-panel-middle .p-panel{border-radius:0;border-bottom:none}.multiple-panel-last .p-panel{border-top-left-radius:0;border-top-right-radius:0}.panel-body-wrapper{padding:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$9.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
1775
1775
  }
1776
1776
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, decorators: [{
1777
1777
  type: Component,
1778
- args: [{ selector: 'spiderly-panel', standalone: false, template: "<p-panel \r\n[showHeader]=\"showPanelHeader\"\r\n[ngClass]=\"{\r\n 'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,\r\n 'multiple-panel-first': isFirstMultiplePanel,\r\n 'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,\r\n 'multiple-panel-middle': isMiddleMultiplePanel,\r\n 'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,\r\n 'multiple-panel-last': isLastMultiplePanel,\r\n 'panel-border': !isFirstMultiplePanel,\r\n 'spiderly-panel': true,\r\n 'panel-header-cursor-pointer': toggler === 'header' && toggleable\r\n}\"\r\n[toggleable]=\"toggleable\"\r\n[toggler]=\"toggler\"\r\n[collapsed]=\"toggleable && collapsed\"\r\nexpandIcon=\"pi pi-chevron-up\"\r\ncollapseIcon=\"pi pi-chevron-down\"\r\n>\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <ng-content select=\"panel-header\"></ng-content>\r\n <ng-content select=\"[panelHeader]\"></ng-content>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"icons\">\r\n <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\r\n <i class=\"pi pi-ellipsis-h icon-hover\" (click)=\"menuItemClick(index, $event)\"></i>\r\n <!-- https://github.com/primefaces/primeng/issues/13934 -->\r\n <p-menu #menu [model]=\"crudMenu\" [popup]=\"true\" appendTo=\"body\" [tabindex]=\"undefined\"></p-menu>\r\n </div>\r\n <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\r\n <i class=\"pi pi-minus icon-hover error-color-light\" (click)=\"removeItemClick()\"></i>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"panel-body-wrapper\">\r\n <ng-content select=\"panel-body\"></ng-content>\r\n </div>\r\n\r\n <ng-content select=\"panel-footer\"></ng-content>\r\n\r\n</p-panel>\r\n", styles: [":host ::ng-deep .spiderly-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}:host ::ng-deep .panel-header-cursor-pointer .p-panel-header{cursor:pointer!important}.multiple-panel-first-without-header .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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-radius:0/0px;border-top:1px solid var(--surface-border);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:0;border-top-right-radius:0}.multiple-panel-first .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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)}.multiple-panel-middle .p-panel{border-radius:0;border-bottom:none}.multiple-panel-last .p-panel{border-top-left-radius:0;border-top-right-radius:0}.panel-body-wrapper{padding:18px}\n"] }]
1778
+ args: [{ selector: 'spiderly-panel', standalone: false, template: "<p-panel \n[showHeader]=\"showPanelHeader\"\n[ngClass]=\"{\n 'multiple-panel-first-without-header': isFirstMultiplePanel && !showPanelHeader,\n 'multiple-panel-first': isFirstMultiplePanel,\n 'multiple-panel-middle-without-header': isMiddleMultiplePanel && !showPanelHeader,\n 'multiple-panel-middle': isMiddleMultiplePanel,\n 'multiple-panel-last-without-header': isLastMultiplePanel && !showPanelHeader,\n 'multiple-panel-last': isLastMultiplePanel,\n 'panel-border': !isFirstMultiplePanel,\n 'spiderly-panel': true,\n 'panel-header-cursor-pointer': toggler === 'header' && toggleable\n}\"\n[toggleable]=\"toggleable\"\n[toggler]=\"toggler\"\n[collapsed]=\"toggleable && collapsed\"\nexpandIcon=\"pi pi-chevron-up\"\ncollapseIcon=\"pi pi-chevron-down\"\n>\n <ng-template pTemplate=\"header\">\n <div>\n <ng-content select=\"panel-header\"></ng-content>\n <ng-content select=\"[panelHeader]\"></ng-content>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"icons\">\n <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\n <i class=\"pi pi-ellipsis-h icon-hover\" (click)=\"menuItemClick(index, $event)\"></i>\n <!-- https://github.com/primefaces/primeng/issues/13934 -->\n <p-menu #menu [model]=\"crudMenu\" [popup]=\"true\" appendTo=\"body\" [tabindex]=\"undefined\"></p-menu>\n </div>\n <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\n <i class=\"pi pi-minus icon-hover error-color-light\" (click)=\"removeItemClick()\"></i>\n </div>\n </ng-template>\n\n <div class=\"panel-body-wrapper\">\n <ng-content select=\"panel-body\"></ng-content>\n </div>\n\n <ng-content select=\"panel-footer\"></ng-content>\n\n</p-panel>\n", styles: [":host ::ng-deep .spiderly-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}:host ::ng-deep .panel-header-cursor-pointer .p-panel-header{cursor:pointer!important}.multiple-panel-first-without-header .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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-radius:0/0px;border-top:1px solid var(--surface-border);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:0;border-top-right-radius:0}.multiple-panel-first .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;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)}.multiple-panel-middle .p-panel{border-radius:0;border-bottom:none}.multiple-panel-last .p-panel{border-top-left-radius:0;border-top-right-radius:0}.panel-body-wrapper{padding:18px}\n"] }]
1779
1779
  }], ctorParameters: () => [], propDecorators: { isFirstMultiplePanel: [{
1780
1780
  type: Input
1781
1781
  }], isMiddleMultiplePanel: [{
@@ -2508,7 +2508,7 @@ class RoleBaseDetailsComponent {
2508
2508
  this.onSave.next();
2509
2509
  }
2510
2510
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, deps: [{ token: ApiSecurityService }, { token: i3$2.ActivatedRoute }, { token: BaseFormService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
2511
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RoleBaseDetailsComponent, isStandalone: true, selector: "role-base-details", inputs: { getCrudMenuForOrderedData: "getCrudMenuForOrderedData", parentFormGroup: "parentFormGroup", additionalButtons: "additionalButtons", panelTitle: "panelTitle", showBigPanelTitle: "showBigPanelTitle", panelIcon: "panelIcon", handleAdditionalSaveAuthorization: "handleAdditionalSaveAuthorization" }, outputs: { onSave: "onSave", onAfterFormGroupInit: "onAfterFormGroupInit", onIsAuthorizedForSaveChange: "onIsAuthorizedForSaveChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <spiderly-panel>\r\n <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\r\n\r\n <panel-body>\r\n <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\r\n <div class=\"col-12\">\r\n <spiderly-textbox [control]=\"parentFormGroup.controls.roleDTO.getControl('name')\"></spiderly-textbox>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-textarea [control]=\"parentFormGroup.controls.roleDTO.getControl('description')\"></spiderly-textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-multiautocomplete [control]=\"parentFormGroup.controls.usersNamebookDTOList\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-multiselect [control]=\"parentFormGroup.controls.permissionsIds\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\r\n </div>\r\n </form>\r\n\r\n <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\r\n\r\n </panel-body>\r\n\r\n <panel-footer>\r\n <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\r\n @for (button of additionalButtons; track button.label) {\r\n <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\r\n }\r\n <return-button></return-button>\r\n </panel-footer>\r\n </spiderly-panel>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardSkeletonComponent, selector: "card-skeleton", inputs: ["height"] }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyTextareaComponent, selector: "spiderly-textarea" }, { kind: "component", type: SpiderlyMultiAutocompleteComponent, selector: "spiderly-multiautocomplete" }, { kind: "component", type: SpiderlyMultiSelectComponent, selector: "spiderly-multiselect" }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyReturnButtonComponent, selector: "return-button", inputs: ["navigateUrl"] }] }); }
2511
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: RoleBaseDetailsComponent, isStandalone: true, selector: "role-base-details", inputs: { getCrudMenuForOrderedData: "getCrudMenuForOrderedData", parentFormGroup: "parentFormGroup", additionalButtons: "additionalButtons", panelTitle: "panelTitle", showBigPanelTitle: "showBigPanelTitle", panelIcon: "panelIcon", handleAdditionalSaveAuthorization: "handleAdditionalSaveAuthorization" }, outputs: { onSave: "onSave", onAfterFormGroupInit: "onAfterFormGroupInit", onIsAuthorizedForSaveChange: "onIsAuthorizedForSaveChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <spiderly-panel>\n <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\n\n <panel-body>\n <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\n <div class=\"col-12\">\n <spiderly-textbox [control]=\"parentFormGroup.controls.roleDTO.getControl('name')\"></spiderly-textbox>\n </div>\n <div class=\"col-12\">\n <spiderly-textarea [control]=\"parentFormGroup.controls.roleDTO.getControl('description')\"></spiderly-textarea>\n </div>\n <div class=\"col-12\">\n <spiderly-multiautocomplete [control]=\"parentFormGroup.controls.usersNamebookDTOList\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\n </div>\n <div class=\"col-12\">\n <spiderly-multiselect [control]=\"parentFormGroup.controls.permissionsIds\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\n </div>\n </form>\n\n <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\n\n </panel-body>\n\n <panel-footer>\n <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\n @for (button of additionalButtons; track button.label) {\n <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\n }\n <return-button></return-button>\n </panel-footer>\n </spiderly-panel>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardSkeletonComponent, selector: "card-skeleton", inputs: ["height"] }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyTextareaComponent, selector: "spiderly-textarea" }, { kind: "component", type: SpiderlyMultiAutocompleteComponent, selector: "spiderly-multiautocomplete" }, { kind: "component", type: SpiderlyMultiSelectComponent, selector: "spiderly-multiselect" }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyReturnButtonComponent, selector: "return-button", inputs: ["navigateUrl"] }] }); }
2512
2512
  }
2513
2513
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RoleBaseDetailsComponent, decorators: [{
2514
2514
  type: Component,
@@ -2525,7 +2525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
2525
2525
  SpiderlyPanelsModule,
2526
2526
  SpiderlyButtonComponent,
2527
2527
  SpiderlyReturnButtonComponent
2528
- ], template: "<ng-container *transloco=\"let t\">\r\n <spiderly-panel>\r\n <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\r\n\r\n <panel-body>\r\n <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\r\n <div class=\"col-12\">\r\n <spiderly-textbox [control]=\"parentFormGroup.controls.roleDTO.getControl('name')\"></spiderly-textbox>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-textarea [control]=\"parentFormGroup.controls.roleDTO.getControl('description')\"></spiderly-textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-multiautocomplete [control]=\"parentFormGroup.controls.usersNamebookDTOList\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-multiselect [control]=\"parentFormGroup.controls.permissionsIds\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\r\n </div>\r\n </form>\r\n\r\n <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\r\n\r\n </panel-body>\r\n\r\n <panel-footer>\r\n <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\r\n @for (button of additionalButtons; track button.label) {\r\n <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\r\n }\r\n <return-button></return-button>\r\n </panel-footer>\r\n </spiderly-panel>\r\n</ng-container>" }]
2528
+ ], template: "<ng-container *transloco=\"let t\">\n <spiderly-panel>\n <panel-header [title]=\"panelTitle\" [showBigTitle]=\"showBigPanelTitle\" [icon]=\"panelIcon\"></panel-header>\n\n <panel-body>\n <form *ngIf=\"loading === false\" class=\"grid\"> <!-- FT: Don't put @deffer it's not working as expected -->\n <div class=\"col-12\">\n <spiderly-textbox [control]=\"parentFormGroup.controls.roleDTO.getControl('name')\"></spiderly-textbox>\n </div>\n <div class=\"col-12\">\n <spiderly-textarea [control]=\"parentFormGroup.controls.roleDTO.getControl('description')\"></spiderly-textarea>\n </div>\n <div class=\"col-12\">\n <spiderly-multiautocomplete [control]=\"parentFormGroup.controls.usersNamebookDTOList\" [options]=\"usersForRoleOptions\" (onTextInput)=\"searchUsersForRole($event)\" [label]=\"t('Users')\"></spiderly-multiautocomplete>\n </div>\n <div class=\"col-12\">\n <spiderly-multiselect [control]=\"parentFormGroup.controls.permissionsIds\" [options]=\"permissionsForRoleOptions\" [label]=\"t('Permissions')\"></spiderly-multiselect>\n </div>\n </form>\n\n <card-skeleton *ngIf=\"loading === true\" [height]=\"502\"></card-skeleton>\n\n </panel-body>\n\n <panel-footer>\n <spiderly-button [disabled]=\"!isAuthorizedForSave\" (onClick)=\"save()\" [label]=\"t('Save')\" icon=\"pi pi-save\"></spiderly-button>\n @for (button of additionalButtons; track button.label) {\n <spiderly-button (onClick)=\"button.onClick()\" [disabled]=\"button.disabled\" [label]=\"button.label\" [icon]=\"button.icon\"></spiderly-button>\n }\n <return-button></return-button>\n </panel-footer>\n </spiderly-panel>\n</ng-container>" }]
2529
2529
  }], ctorParameters: () => [{ type: ApiSecurityService }, { type: i3$2.ActivatedRoute }, { type: BaseFormService }, { type: AuthBaseService }], propDecorators: { onSave: [{
2530
2530
  type: Output
2531
2531
  }], onAfterFormGroupInit: [{
@@ -2680,7 +2680,7 @@ class VerificationWrapperComponent extends BaseFormCopy {
2680
2680
  this.onResendVerificationToken.next(null);
2681
2681
  }
2682
2682
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$4.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
2683
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n <div class=\"dialog\" style=\"padding: 0px;\">\r\n @if (verificationTokenRequestFormGroup != null) {\r\n <spiderly-panel>\r\n <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\r\n \r\n <panel-body>\r\n <form class=\"grid\">\r\n <div class=\"col-12\">\r\n <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n {{t('AccountVerificationDescription', {email: email})}}\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\r\n </div>\r\n </form>\r\n </panel-body>\r\n \r\n <panel-footer>\r\n <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n </panel-footer>\r\n <panel-footer>\r\n <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\r\n </panel-footer>\r\n </spiderly-panel>\r\n }\r\n @else {\r\n <!-- TODO FT: Add skeleton -->\r\n }\r\n </div>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
2683
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\n <div class=\"dialog\" style=\"padding: 0px;\">\n @if (verificationTokenRequestFormGroup != null) {\n <spiderly-panel>\n <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\n \n <panel-body>\n <form class=\"grid\">\n <div class=\"col-12\">\n <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\n </div>\n <div class=\"col-12\">\n {{t('AccountVerificationDescription', {email: email})}}\n </div>\n <div class=\"col-12\">\n <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\n </div>\n <div class=\"col-12\">\n <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\n </div>\n </form>\n </panel-body>\n \n <panel-footer>\n <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n </panel-footer>\n <panel-footer>\n <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\n </panel-footer>\n </spiderly-panel>\n }\n @else {\n <!-- TODO FT: Add skeleton -->\n }\n </div>\n </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
2684
2684
  }
2685
2685
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, decorators: [{
2686
2686
  type: Component,
@@ -2692,7 +2692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
2692
2692
  SpiderlyPanelsModule,
2693
2693
  ButtonModule,
2694
2694
  TranslocoDirective,
2695
- ], template: "<ng-container *transloco=\"let t\">\r\n <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n <div class=\"dialog\" style=\"padding: 0px;\">\r\n @if (verificationTokenRequestFormGroup != null) {\r\n <spiderly-panel>\r\n <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\r\n \r\n <panel-body>\r\n <form class=\"grid\">\r\n <div class=\"col-12\">\r\n <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\r\n </div>\r\n <div class=\"col-12\">\r\n {{t('AccountVerificationDescription', {email: email})}}\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\r\n </div>\r\n <div class=\"col-12\">\r\n <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\r\n </div>\r\n </form>\r\n </panel-body>\r\n \r\n <panel-footer>\r\n <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\r\n </panel-footer>\r\n <panel-footer>\r\n <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\r\n </panel-footer>\r\n </spiderly-panel>\r\n }\r\n @else {\r\n <!-- TODO FT: Add skeleton -->\r\n }\r\n </div>\r\n </div>\r\n</ng-container>" }]
2695
+ ], template: "<ng-container *transloco=\"let t\">\n <div class=\"min-h-screen\" style=\"display: flex; justify-content: center; align-items: center;\">\n <div class=\"dialog\" style=\"padding: 0px;\">\n @if (verificationTokenRequestFormGroup != null) {\n <spiderly-panel>\n <panel-header [title]=\"t('AccountVerificationHeader')\" [showBigTitle]=\"true\" icon=\"pi pi-envelope\"></panel-header>\n \n <panel-body>\n <form class=\"grid\">\n <div class=\"col-12\">\n <div style=\"font-size: 17.5px\">{{t('AccountVerificationTitle')}}</div>\n </div>\n <div class=\"col-12\">\n {{t('AccountVerificationDescription', {email: email})}}\n </div>\n <div class=\"col-12\">\n <spiderly-textbox [control]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"></spiderly-textbox>\n </div>\n <div class=\"col-12\">\n <spiderly-button (onClick)=\"codeSubmit()\" [label]=\"t('Submit')\" icon=\"pi pi-verified\" type=\"submit\"></spiderly-button>\n </div>\n </form>\n </panel-body>\n \n <panel-footer>\n <a pButton class=\"p-button-link\" [label]=\"t('GoToGmail')\" icon=\"pi pi-external-link\" href=\"https://mail.google.com/mail/u/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n <a pButton class=\"p-button-link\" [label]=\"t('GoToYahoo')\" icon=\"pi pi-external-link\" href=\"https://mail.yahoo.com/d/folders/1/\" target=\"_blank\" rel=\"noopener noreferrer\"></a>\n </panel-footer>\n <panel-footer>\n <div>{{t('ResendVerificationCodeFirstPart')}} <a class=\"link\" (click)=\"resendVerificationToken()\">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>\n </panel-footer>\n </spiderly-panel>\n }\n @else {\n <!-- TODO FT: Add skeleton -->\n }\n </div>\n </div>\n</ng-container>" }]
2696
2696
  }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$4.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }], propDecorators: { email: [{
2697
2697
  type: Input
2698
2698
  }], onResendVerificationToken: [{
@@ -2721,13 +2721,13 @@ class LoginVerificationComponent {
2721
2721
  });
2722
2722
  }
2723
2723
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginVerificationComponent, deps: [{ token: AuthBaseService }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
2724
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: LoginVerificationComponent, isStandalone: true, selector: "login-verification", inputs: { email: "email", userId: "userId" }, ngImport: i0, template: "<verification-wrapper [email]=\"email\" (onResendVerificationToken)=\"resendVerificationToken()\" (onCodeSubmit)=\"onCodeSubmit($event)\"></verification-wrapper>\r\n\r\n", dependencies: [{ kind: "component", type: VerificationWrapperComponent, selector: "verification-wrapper", inputs: ["email"], outputs: ["onResendVerificationToken", "onCodeSubmit"] }] }); }
2724
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: LoginVerificationComponent, isStandalone: true, selector: "login-verification", inputs: { email: "email", userId: "userId" }, ngImport: i0, template: "<verification-wrapper [email]=\"email\" (onResendVerificationToken)=\"resendVerificationToken()\" (onCodeSubmit)=\"onCodeSubmit($event)\"></verification-wrapper>\n\n", dependencies: [{ kind: "component", type: VerificationWrapperComponent, selector: "verification-wrapper", inputs: ["email"], outputs: ["onResendVerificationToken", "onCodeSubmit"] }] }); }
2725
2725
  }
2726
2726
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginVerificationComponent, decorators: [{
2727
2727
  type: Component,
2728
2728
  args: [{ selector: 'login-verification', imports: [
2729
2729
  VerificationWrapperComponent
2730
- ], template: "<verification-wrapper [email]=\"email\" (onResendVerificationToken)=\"resendVerificationToken()\" (onCodeSubmit)=\"onCodeSubmit($event)\"></verification-wrapper>\r\n\r\n" }]
2730
+ ], template: "<verification-wrapper [email]=\"email\" (onResendVerificationToken)=\"resendVerificationToken()\" (onCodeSubmit)=\"onCodeSubmit($event)\"></verification-wrapper>\n\n" }]
2731
2731
  }], ctorParameters: () => [{ type: AuthBaseService }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }], propDecorators: { email: [{
2732
2732
  type: Input
2733
2733
  }], userId: [{
@@ -2742,14 +2742,14 @@ class GoogleButtonComponent {
2742
2742
  this.loginWithGoogle.emit(createFakeGoogleWrapper());
2743
2743
  }
2744
2744
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: GoogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2745
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: GoogleButtonComponent, isStandalone: true, selector: "google-button", inputs: { label: "label" }, outputs: { loginWithGoogle: "loginWithGoogle" }, ngImport: i0, template: "<ng-container>\r\n <spiderly-button (onClick)=\"handleGoogleLogin()\" [label]=\"label\" [outlined]=\"true\" [style]=\"{width: '100%'}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0.98em\" height=\"1em\" viewBox=\"0 0 256 262\"><path fill=\"#4285f4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34a853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#fbbc05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#eb4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/></svg>\r\n </spiderly-button>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }] }); }
2745
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: GoogleButtonComponent, isStandalone: true, selector: "google-button", inputs: { label: "label" }, outputs: { loginWithGoogle: "loginWithGoogle" }, ngImport: i0, template: "<ng-container>\n <spiderly-button (onClick)=\"handleGoogleLogin()\" [label]=\"label\" [outlined]=\"true\" [style]=\"{width: '100%'}\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0.98em\" height=\"1em\" viewBox=\"0 0 256 262\"><path fill=\"#4285f4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34a853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#fbbc05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#eb4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/></svg>\n </spiderly-button>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }] }); }
2746
2746
  }
2747
2747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: GoogleButtonComponent, decorators: [{
2748
2748
  type: Component,
2749
2749
  args: [{ selector: 'google-button', imports: [
2750
2750
  ButtonModule,
2751
2751
  SpiderlyButtonComponent
2752
- ], template: "<ng-container>\r\n <spiderly-button (onClick)=\"handleGoogleLogin()\" [label]=\"label\" [outlined]=\"true\" [style]=\"{width: '100%'}\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0.98em\" height=\"1em\" viewBox=\"0 0 256 262\"><path fill=\"#4285f4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34a853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#fbbc05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#eb4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/></svg>\r\n </spiderly-button>\r\n</ng-container>" }]
2752
+ ], template: "<ng-container>\n <spiderly-button (onClick)=\"handleGoogleLogin()\" [label]=\"label\" [outlined]=\"true\" [style]=\"{width: '100%'}\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0.98em\" height=\"1em\" viewBox=\"0 0 256 262\"><path fill=\"#4285f4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34a853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#fbbc05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#eb4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/></svg>\n </spiderly-button>\n</ng-container>" }]
2753
2753
  }], propDecorators: { label: [{
2754
2754
  type: Input
2755
2755
  }], loginWithGoogle: [{
@@ -2786,7 +2786,7 @@ class AuthComponent {
2786
2786
  }
2787
2787
  }
2788
2788
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, deps: [{ token: ConfigBaseService }, { token: AuthBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
2789
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthComponent, isStandalone: true, selector: "auth", inputs: { showGoogleAuth: "showGoogleAuth" }, outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n <div class=\"text-center\" style=\"margin-bottom: 38px;\">\r\n <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\r\n <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n \r\n <div *ngIf=\"hasGoogleAuth && showGoogleAuth\">\r\n <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\r\n <div class=\"separator\"></div>\r\n <div>{{t('or')}}</div>\r\n <div class=\"separator\"></div>\r\n </div>\r\n <div>\r\n <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\r\n <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
2789
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthComponent, isStandalone: true, selector: "auth", inputs: { showGoogleAuth: "showGoogleAuth" }, outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n <div class=\"flex flex-column w-full\">\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n <div class=\"text-center\" style=\"margin-bottom: 38px;\">\n <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\n <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\n </div>\n\n <ng-content></ng-content>\n \n <div *ngIf=\"hasGoogleAuth && showGoogleAuth\">\n <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\n <div class=\"separator\"></div>\n <div>{{t('or')}}</div>\n <div class=\"separator\"></div>\n </div>\n <div>\n <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \n </div>\n </div>\n \n </div>\n </div>\n </div>\n </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
2790
2790
  }
2791
2791
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, decorators: [{
2792
2792
  type: Component,
@@ -2794,7 +2794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
2794
2794
  CommonModule,
2795
2795
  GoogleButtonComponent,
2796
2796
  TranslocoDirective,
2797
- ], template: "<ng-container *transloco=\"let t\">\r\n <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n <div class=\"text-center\" style=\"margin-bottom: 38px;\">\r\n <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\r\n <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n \r\n <div *ngIf=\"hasGoogleAuth && showGoogleAuth\">\r\n <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\r\n <div class=\"separator\"></div>\r\n <div>{{t('or')}}</div>\r\n <div class=\"separator\"></div>\r\n </div>\r\n <div>\r\n <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\r\n <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>" }]
2797
+ ], template: "<ng-container *transloco=\"let t\">\n <div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n <div class=\"flex flex-column w-full\">\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n <div class=\"text-center\" style=\"margin-bottom: 38px;\">\n <img *ngIf=\"image != null\" [src]=\"image\" alt=\"{{companyName}} Logo\" title=\"{{companyName}} Logo\" height=\"60\">\n <i *ngIf=\"image == null\" class=\"pi pi-spin pi-spinner primary-color\" style=\"font-size: 2rem\"></i>\n </div>\n\n <ng-content></ng-content>\n \n <div *ngIf=\"hasGoogleAuth && showGoogleAuth\">\n <div style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\">\n <div class=\"separator\"></div>\n <div>{{t('or')}}</div>\n <div class=\"separator\"></div>\n </div>\n <div>\n <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n <google-button (loginWithGoogle)=\"onGoogleSignIn($event)\" [label]=\"t('ContinueWithGoogle')\"></google-button> \n </div>\n </div>\n \n </div>\n </div>\n </div>\n </div>\n</ng-container>" }]
2798
2798
  }], ctorParameters: () => [{ type: ConfigBaseService }, { type: AuthBaseService }], propDecorators: { onCompanyNameChange: [{
2799
2799
  type: Output
2800
2800
  }], showGoogleAuth: [{
@@ -2835,7 +2835,7 @@ class LoginComponent extends BaseFormCopy {
2835
2835
  });
2836
2836
  }
2837
2837
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$4.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }, { token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
2838
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n @if (loginFormGroup != null) {\r\n @if (showEmailSentDialog == false) {\r\n <auth (onCompanyNameChange)=\"companyNameChange($event)\">\r\n <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\r\n <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\r\n <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\r\n </div>\r\n \r\n <div class=\"mb-4 gap-5\">\r\n <div class=\"text-center\" style=\"font-size: smaller;\">\r\n {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\r\n </div>\r\n </div>\r\n\r\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\r\n </div>\r\n </form>\r\n </auth>\r\n }\r\n @else {\r\n <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\r\n }\r\n }\r\n @else {\r\n <!-- TODO FT: Add skeleton -->\r\n }\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
2838
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n @if (loginFormGroup != null) {\n @if (showEmailSentDialog == false) {\n <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\n <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\n <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\n </div>\n \n <div class=\"mb-4 gap-5\">\n <div class=\"text-center\" style=\"font-size: smaller;\">\n {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\n </div>\n </div>\n\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\n </div>\n </form>\n </auth>\n }\n @else {\n <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\n }\n }\n @else {\n <!-- TODO FT: Add skeleton -->\n }\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", inputs: ["showGoogleAuth"], outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
2839
2839
  }
2840
2840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, decorators: [{
2841
2841
  type: Component,
@@ -2846,7 +2846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
2846
2846
  SpiderlyControlsModule,
2847
2847
  LoginVerificationComponent,
2848
2848
  TranslocoDirective,
2849
- ], template: "<ng-container *transloco=\"let t\">\r\n @if (loginFormGroup != null) {\r\n @if (showEmailSentDialog == false) {\r\n <auth (onCompanyNameChange)=\"companyNameChange($event)\">\r\n <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\r\n <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\r\n <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\r\n </div>\r\n \r\n <div class=\"mb-4 gap-5\">\r\n <div class=\"text-center\" style=\"font-size: smaller;\">\r\n {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\r\n </div>\r\n </div>\r\n\r\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\r\n </div>\r\n </form>\r\n </auth>\r\n }\r\n @else {\r\n <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\r\n }\r\n }\r\n @else {\r\n <!-- TODO FT: Add skeleton -->\r\n }\r\n</ng-container>" }]
2849
+ ], template: "<ng-container *transloco=\"let t\">\n @if (loginFormGroup != null) {\n @if (showEmailSentDialog == false) {\n <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px;\"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->\n <div class=\"col-12\" style=\"padding-left: 0; padding-right: 0;\">\n <spiderly-textbox [control]=\"loginFormGroup.getControl('email')\"></spiderly-textbox>\n </div>\n \n <div class=\"mb-4 gap-5\">\n <div class=\"text-center\" style=\"font-size: smaller;\">\n {{t('AgreementsOnRegister')}} <b routerLink=\"/user-agreement\" class=\"primary-color cursor-pointer\">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink=\"/privacy-policy\" class=\"primary-color cursor-pointer\">{{t('PrivacyPolicy')}}</b>.\n </div>\n </div>\n\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n <spiderly-button [label]=\"t('Login')\" (onClick)=\"sendLoginVerificationEmail()\" [outlined]=\"true\" [style]=\"{width: '100%'}\" type=\"submit\"></spiderly-button>\n </div>\n </form>\n </auth>\n }\n @else {\n <login-verification [email]=\"loginFormGroup.controls.email.getRawValue()\"></login-verification>\n }\n }\n @else {\n <!-- TODO FT: Add skeleton -->\n }\n</ng-container>" }]
2850
2850
  }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$4.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }, { type: AuthBaseService }, { type: ConfigBaseService }] });
2851
2851
 
2852
2852
  class FooterComponent {
@@ -2855,11 +2855,11 @@ class FooterComponent {
2855
2855
  this.companyName = this.config.companyName;
2856
2856
  }
2857
2857
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
2858
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: FooterComponent, isStandalone: true, selector: "footer", ngImport: i0, template: "<div class=\"layout-footer\">\r\n <span class=\"font-medium ml-2\">{{companyName}}</span>\r\n</div>\r\n" }); }
2858
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: FooterComponent, isStandalone: true, selector: "footer", ngImport: i0, template: "<div class=\"layout-footer\">\n <span class=\"font-medium ml-2\">{{companyName}}</span>\n</div>\n" }); }
2859
2859
  }
2860
2860
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, decorators: [{
2861
2861
  type: Component,
2862
- args: [{ selector: 'footer', standalone: true, template: "<div class=\"layout-footer\">\r\n <span class=\"font-medium ml-2\">{{companyName}}</span>\r\n</div>\r\n" }]
2862
+ args: [{ selector: 'footer', standalone: true, template: "<div class=\"layout-footer\">\n <span class=\"font-medium ml-2\">{{companyName}}</span>\n</div>\n" }]
2863
2863
  }], ctorParameters: () => [{ type: ConfigBaseService }] });
2864
2864
 
2865
2865
  class IndexCardComponent {
@@ -2879,14 +2879,14 @@ class IndexCardComponent {
2879
2879
  this.onRemoveIconClick.next(null);
2880
2880
  }
2881
2881
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IndexCardComponent, deps: [{ token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
2882
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: IndexCardComponent, isStandalone: true, selector: "index-card", inputs: { last: "last", index: "index", header: "header", description: "description", showRemoveIcon: "showRemoveIcon", showCrudMenu: "showCrudMenu", crudMenu: "crudMenu" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, ngImport: i0, template: "<div [ngClass]=\"{\r\n\t'last-child-zero-margin': last,\r\n 'card-margin-bottom': true,\r\n\t}\">\r\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\r\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\r\n\t\t\r\n\t\t<panel-body>\r\n\t\t\t<ng-content>\r\n\t\t\t\t<!-- Custom things below description -->\r\n\t\t\t</ng-content>\r\n\t\t</panel-body>\r\n\t\t\r\n\t</spiderly-panel>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }] }); }
2882
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: IndexCardComponent, isStandalone: true, selector: "index-card", inputs: { last: "last", index: "index", header: "header", description: "description", showRemoveIcon: "showRemoveIcon", showCrudMenu: "showCrudMenu", crudMenu: "crudMenu" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, ngImport: i0, template: "<div [ngClass]=\"{\n\t'last-child-zero-margin': last,\n 'card-margin-bottom': true,\n\t}\">\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\n\t\t\n\t\t<panel-body>\n\t\t\t<ng-content>\n\t\t\t\t<!-- Custom things below description -->\n\t\t\t</ng-content>\n\t\t</panel-body>\n\t\t\n\t</spiderly-panel>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }] }); }
2883
2883
  }
2884
2884
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IndexCardComponent, decorators: [{
2885
2885
  type: Component,
2886
2886
  args: [{ selector: 'index-card', imports: [
2887
2887
  CommonModule,
2888
2888
  SpiderlyPanelsModule
2889
- ], template: "<div [ngClass]=\"{\r\n\t'last-child-zero-margin': last,\r\n 'card-margin-bottom': true,\r\n\t}\">\r\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\r\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\r\n\t\t\r\n\t\t<panel-body>\r\n\t\t\t<ng-content>\r\n\t\t\t\t<!-- Custom things below description -->\r\n\t\t\t</ng-content>\r\n\t\t</panel-body>\r\n\t\t\r\n\t</spiderly-panel>\r\n</div>\r\n" }]
2889
+ ], template: "<div [ngClass]=\"{\n\t'last-child-zero-margin': last,\n 'card-margin-bottom': true,\n\t}\">\n\t<spiderly-panel [crudMenu]=\"crudMenu\" [showCrudMenu]=\"showCrudMenu\" (onMenuIconClick)=\"menuIconClick($event)\" [showRemoveIcon]=\"showRemoveIcon\" (onRemoveIconClick)=\"removeIconClick()\" [index]=\"index\">\n\t\t<panel-header [title]=\"header\" [index]=\"index\" [showIcon]=\"false\"></panel-header>\n\t\t\n\t\t<panel-body>\n\t\t\t<ng-content>\n\t\t\t\t<!-- Custom things below description -->\n\t\t\t</ng-content>\n\t\t</panel-body>\n\t\t\n\t</spiderly-panel>\n</div>\n" }]
2890
2890
  }], ctorParameters: () => [{ type: i3.FormBuilder }], propDecorators: { last: [{
2891
2891
  type: Input
2892
2892
  }], index: [{
@@ -2918,14 +2918,14 @@ class InfoCardComponent {
2918
2918
  ngOnInit() {
2919
2919
  }
2920
2920
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: InfoCardComponent, deps: [{ token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
2921
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: InfoCardComponent, isStandalone: true, selector: "info-card", inputs: { header: "header", showSmallIcon: "showSmallIcon", icon: "icon", textColor: "textColor" }, ngImport: i0, template: "<div class=\"card responsive-card-padding info-card\">\r\n <div class=\"info-card__content\">\r\n <div>\r\n <div class=\"info-card__header\">\r\n <i *ngIf=\"showSmallIcon\" class=\"{{icon}} info-card__icon\"></i>\r\n {{header}}\r\n </div>\r\n <div class=\"info-card__body\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"info-card__background-icon\">\r\n <i class=\"{{icon}}\"></i>\r\n </div>\r\n</div>", styles: [".info-card{background-color:var(--p-primary-100);position:relative;overflow:hidden}.info-card__content{display:flex;align-items:center;gap:21px;position:relative;z-index:2}.info-card__icon{font-size:21px;color:var(--p-primary-color)}.info-card__header{display:flex;gap:8px;color:var(--p-primary-color);font-weight:600;text-align:left;font-size:17.5px}.info-card__body{text-align:left;margin-top:8px}.info-card__background-icon{text-align:center;transform:rotate(30deg);color:var(--p-primary-400);opacity:.2;position:absolute;overflow:hidden;right:-30px;top:-25px;z-index:1}.info-card__background-icon i{font-size:270px}::ng-deep html.dark .info-card{background-color:var(--p-primary-950)}::ng-deep html.dark .info-card__header{color:var(--p-primary-400)}::ng-deep html.dark .info-card__icon{color:var(--p-primary-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }] }); }
2921
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: InfoCardComponent, isStandalone: true, selector: "info-card", inputs: { header: "header", showSmallIcon: "showSmallIcon", icon: "icon", textColor: "textColor" }, ngImport: i0, template: "<div class=\"card responsive-card-padding info-card\">\n <div class=\"info-card__content\">\n <div>\n <div class=\"info-card__header\">\n <i *ngIf=\"showSmallIcon\" class=\"{{icon}} info-card__icon\"></i>\n {{header}}\n </div>\n <div class=\"info-card__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n\n <div class=\"info-card__background-icon\">\n <i class=\"{{icon}}\"></i>\n </div>\n</div>", styles: [".info-card{background-color:var(--p-primary-100);position:relative;overflow:hidden}.info-card__content{display:flex;align-items:center;gap:21px;position:relative;z-index:2}.info-card__icon{font-size:21px;color:var(--p-primary-color)}.info-card__header{display:flex;gap:8px;color:var(--p-primary-color);font-weight:600;text-align:left;font-size:17.5px}.info-card__body{text-align:left;margin-top:8px}.info-card__background-icon{text-align:center;transform:rotate(30deg);color:var(--p-primary-400);opacity:.2;position:absolute;overflow:hidden;right:-30px;top:-25px;z-index:1}.info-card__background-icon i{font-size:270px}::ng-deep html.dark .info-card{background-color:var(--p-primary-950)}::ng-deep html.dark .info-card__header{color:var(--p-primary-400)}::ng-deep html.dark .info-card__icon{color:var(--p-primary-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }] }); }
2922
2922
  }
2923
2923
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: InfoCardComponent, decorators: [{
2924
2924
  type: Component,
2925
2925
  args: [{ selector: 'info-card', imports: [
2926
2926
  CommonModule,
2927
2927
  SpiderlyPanelsModule
2928
- ], template: "<div class=\"card responsive-card-padding info-card\">\r\n <div class=\"info-card__content\">\r\n <div>\r\n <div class=\"info-card__header\">\r\n <i *ngIf=\"showSmallIcon\" class=\"{{icon}} info-card__icon\"></i>\r\n {{header}}\r\n </div>\r\n <div class=\"info-card__body\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"info-card__background-icon\">\r\n <i class=\"{{icon}}\"></i>\r\n </div>\r\n</div>", styles: [".info-card{background-color:var(--p-primary-100);position:relative;overflow:hidden}.info-card__content{display:flex;align-items:center;gap:21px;position:relative;z-index:2}.info-card__icon{font-size:21px;color:var(--p-primary-color)}.info-card__header{display:flex;gap:8px;color:var(--p-primary-color);font-weight:600;text-align:left;font-size:17.5px}.info-card__body{text-align:left;margin-top:8px}.info-card__background-icon{text-align:center;transform:rotate(30deg);color:var(--p-primary-400);opacity:.2;position:absolute;overflow:hidden;right:-30px;top:-25px;z-index:1}.info-card__background-icon i{font-size:270px}::ng-deep html.dark .info-card{background-color:var(--p-primary-950)}::ng-deep html.dark .info-card__header{color:var(--p-primary-400)}::ng-deep html.dark .info-card__icon{color:var(--p-primary-400)}\n"] }]
2928
+ ], template: "<div class=\"card responsive-card-padding info-card\">\n <div class=\"info-card__content\">\n <div>\n <div class=\"info-card__header\">\n <i *ngIf=\"showSmallIcon\" class=\"{{icon}} info-card__icon\"></i>\n {{header}}\n </div>\n <div class=\"info-card__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n\n <div class=\"info-card__background-icon\">\n <i class=\"{{icon}}\"></i>\n </div>\n</div>", styles: [".info-card{background-color:var(--p-primary-100);position:relative;overflow:hidden}.info-card__content{display:flex;align-items:center;gap:21px;position:relative;z-index:2}.info-card__icon{font-size:21px;color:var(--p-primary-color)}.info-card__header{display:flex;gap:8px;color:var(--p-primary-color);font-weight:600;text-align:left;font-size:17.5px}.info-card__body{text-align:left;margin-top:8px}.info-card__background-icon{text-align:center;transform:rotate(30deg);color:var(--p-primary-400);opacity:.2;position:absolute;overflow:hidden;right:-30px;top:-25px;z-index:1}.info-card__background-icon i{font-size:270px}::ng-deep html.dark .info-card{background-color:var(--p-primary-950)}::ng-deep html.dark .info-card__header{color:var(--p-primary-400)}::ng-deep html.dark .info-card__icon{color:var(--p-primary-400)}\n"] }]
2929
2929
  }], ctorParameters: () => [{ type: i3.FormBuilder }], propDecorators: { header: [{
2930
2930
  type: Input
2931
2931
  }], showSmallIcon: [{
@@ -2943,19 +2943,19 @@ class NotFoundComponent {
2943
2943
  this.logoPath = this.config.logoPath;
2944
2944
  }
2945
2945
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, deps: [{ token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
2946
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n <div class=\"text-center\">\r\n <img \r\n [src]=\"logoPath\" \r\n alt=\"{{companyName}} Logo\" \r\n title=\"{{companyName}} Logo\" \r\n height=\"60\"\r\n class=\"mb-4\"\r\n >\r\n </div>\r\n <h1 class=\"mb-4\">\r\n <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">404</div>\r\n <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\r\n </h1>\r\n <div class=\"text-600 text-lg mb-5\">\r\n The page you're looking for doesn't exist or has been moved. Let's get you back on track.\r\n </div>\r\n <div>\r\n <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
2946
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n <div class=\"flex flex-column w-full\">\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n <div class=\"text-center\">\n <img \n [src]=\"logoPath\" \n alt=\"{{companyName}} Logo\" \n title=\"{{companyName}} Logo\" \n height=\"60\"\n class=\"mb-4\"\n >\n </div>\n <h1 class=\"mb-4\">\n <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">404</div>\n <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\n </h1>\n <div class=\"text-600 text-lg mb-5\">\n The page you're looking for doesn't exist or has been moved. Let's get you back on track.\n </div>\n <div>\n <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\n </div>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
2947
2947
  }
2948
2948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, decorators: [{
2949
2949
  type: Component,
2950
2950
  args: [{ selector: 'not-found', imports: [
2951
2951
  RouterModule,
2952
2952
  ButtonModule,
2953
- ], template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\r\n <div class=\"flex flex-column w-full\">\r\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\r\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\r\n <div class=\"text-center\">\r\n <img \r\n [src]=\"logoPath\" \r\n alt=\"{{companyName}} Logo\" \r\n title=\"{{companyName}} Logo\" \r\n height=\"60\"\r\n class=\"mb-4\"\r\n >\r\n </div>\r\n <h1 class=\"mb-4\">\r\n <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">404</div>\r\n <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\r\n </h1>\r\n <div class=\"text-600 text-lg mb-5\">\r\n The page you're looking for doesn't exist or has been moved. Let's get you back on track.\r\n </div>\r\n <div>\r\n <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>" }]
2953
+ ], template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px;\">\n <div class=\"flex flex-column w-full\">\n <div class=\"w-full sm:w-30rem\" style=\"margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);\">\n <div class=\"surface-card py-6 px-5 sm:px-6\" style=\"border-radius:45px;\">\n <div class=\"text-center\">\n <img \n [src]=\"logoPath\" \n alt=\"{{companyName}} Logo\" \n title=\"{{companyName}} Logo\" \n height=\"60\"\n class=\"mb-4\"\n >\n </div>\n <h1 class=\"mb-4\">\n <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">404</div>\n <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\n </h1>\n <div class=\"text-600 text-lg mb-5\">\n The page you're looking for doesn't exist or has been moved. Let's get you back on track.\n </div>\n <div>\n <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\n </div>\n </div>\n </div>\n </div>\n</div>" }]
2954
2954
  }], ctorParameters: () => [{ type: ConfigBaseService }] });
2955
2955
 
2956
2956
  class SpiderlySplitButtonComponent extends SpiderlyButtonBaseComponent {
2957
2957
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlySplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2958
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlySplitButtonComponent, isStandalone: true, selector: "spiderly-split-button", inputs: { dropdownItems: "dropdownItems" }, usesInheritance: true, ngImport: i0, template: "<p-splitButton\r\n(onClick)=\"handleClick($event)\" \r\n[label]=\"label\" \r\n[icon]=\"icon\" \r\n[outlined]=\"outlined\" \r\n[styleClass]=\"styleClass\" \r\n[severity]=\"severity\" \r\n[rounded]=\"rounded\"\r\n[style]=\"style\"\r\n[class]=\"class\"\r\n[disabled]=\"disabled\"\r\n[model]=\"dropdownItems\"\r\n>\r\n <ng-content></ng-content>\r\n</p-splitButton>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i1$5.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }] }); }
2958
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlySplitButtonComponent, isStandalone: true, selector: "spiderly-split-button", inputs: { dropdownItems: "dropdownItems" }, usesInheritance: true, ngImport: i0, template: "<p-splitButton\n(onClick)=\"handleClick($event)\" \n[label]=\"label\" \n[icon]=\"icon\" \n[outlined]=\"outlined\" \n[styleClass]=\"styleClass\" \n[severity]=\"severity\" \n[rounded]=\"rounded\"\n[style]=\"style\"\n[class]=\"class\"\n[disabled]=\"disabled\"\n[model]=\"dropdownItems\"\n>\n <ng-content></ng-content>\n</p-splitButton>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i1$5.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "style", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }] }); }
2959
2959
  }
2960
2960
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlySplitButtonComponent, decorators: [{
2961
2961
  type: Component,
@@ -2963,7 +2963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
2963
2963
  CommonModule,
2964
2964
  ButtonModule,
2965
2965
  SplitButtonModule
2966
- ], template: "<p-splitButton\r\n(onClick)=\"handleClick($event)\" \r\n[label]=\"label\" \r\n[icon]=\"icon\" \r\n[outlined]=\"outlined\" \r\n[styleClass]=\"styleClass\" \r\n[severity]=\"severity\" \r\n[rounded]=\"rounded\"\r\n[style]=\"style\"\r\n[class]=\"class\"\r\n[disabled]=\"disabled\"\r\n[model]=\"dropdownItems\"\r\n>\r\n <ng-content></ng-content>\r\n</p-splitButton>" }]
2966
+ ], template: "<p-splitButton\n(onClick)=\"handleClick($event)\" \n[label]=\"label\" \n[icon]=\"icon\" \n[outlined]=\"outlined\" \n[styleClass]=\"styleClass\" \n[severity]=\"severity\" \n[rounded]=\"rounded\"\n[style]=\"style\"\n[class]=\"class\"\n[disabled]=\"disabled\"\n[model]=\"dropdownItems\"\n>\n <ng-content></ng-content>\n</p-splitButton>" }]
2967
2967
  }], propDecorators: { dropdownItems: [{
2968
2968
  type: Input
2969
2969
  }] } });
@@ -2999,7 +2999,7 @@ class SpiderlyDeleteConfirmationComponent {
2999
2999
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDeleteConfirmationComponent, deps: [{ token: i1$6.DynamicDialogRef }, { token: i1$6.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
3000
3000
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDeleteConfirmationComponent, isStandalone: true, selector: "spiderly-delete-confirmation", providers: [
3001
3001
  ConfirmationService
3002
- ], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <p-confirmDialog \r\n #cd \r\n ></p-confirmDialog>\r\n <div\r\n class=\"border-bottom-1 surface-border text-lg\"\r\n style=\"display: flex; align-items: center; padding-bottom: 10px; width: 100%; gap: 10px;\"\r\n >\r\n <i class=\"pi pi-exclamation-circle text-4xl\"></i>\r\n <p>{{t('PleaseConfirmToProceed')}}</p>\r\n </div>\r\n \r\n <div style=\"display: flex; gap: 12px; justify-content: right; margin-top: 28px;\">\r\n <spiderly-button (onClick)=\"reject()\" icon=\"pi pi-times\" [label]=\"t('Cancel')\" severity=\"secondary\"></spiderly-button>\r\n <spiderly-button (onClick)=\"accept()\" icon=\"pi pi-check\" [label]=\"t('Confirm')\" styleClass=\"p-button-danger\"></spiderly-button>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i2$2.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }] }); }
3002
+ ], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <p-confirmDialog \n #cd \n ></p-confirmDialog>\n <div\n class=\"border-bottom-1 surface-border text-lg\"\n style=\"display: flex; align-items: center; padding-bottom: 10px; width: 100%; gap: 10px;\"\n >\n <i class=\"pi pi-exclamation-circle text-4xl\"></i>\n <p>{{t('PleaseConfirmToProceed')}}</p>\n </div>\n \n <div style=\"display: flex; gap: 12px; justify-content: right; margin-top: 28px;\">\n <spiderly-button (onClick)=\"reject()\" icon=\"pi pi-times\" [label]=\"t('Cancel')\" severity=\"secondary\"></spiderly-button>\n <spiderly-button (onClick)=\"accept()\" icon=\"pi pi-check\" [label]=\"t('Confirm')\" styleClass=\"p-button-danger\"></spiderly-button>\n </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i2$2.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }] }); }
3003
3003
  }
3004
3004
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDeleteConfirmationComponent, decorators: [{
3005
3005
  type: Component,
@@ -3009,7 +3009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
3009
3009
  ConfirmDialogModule,
3010
3010
  ], providers: [
3011
3011
  ConfirmationService
3012
- ], template: "<ng-container *transloco=\"let t\">\r\n <p-confirmDialog \r\n #cd \r\n ></p-confirmDialog>\r\n <div\r\n class=\"border-bottom-1 surface-border text-lg\"\r\n style=\"display: flex; align-items: center; padding-bottom: 10px; width: 100%; gap: 10px;\"\r\n >\r\n <i class=\"pi pi-exclamation-circle text-4xl\"></i>\r\n <p>{{t('PleaseConfirmToProceed')}}</p>\r\n </div>\r\n \r\n <div style=\"display: flex; gap: 12px; justify-content: right; margin-top: 28px;\">\r\n <spiderly-button (onClick)=\"reject()\" icon=\"pi pi-times\" [label]=\"t('Cancel')\" severity=\"secondary\"></spiderly-button>\r\n <spiderly-button (onClick)=\"accept()\" icon=\"pi pi-check\" [label]=\"t('Confirm')\" styleClass=\"p-button-danger\"></spiderly-button>\r\n </div>\r\n</ng-container>\r\n" }]
3012
+ ], template: "<ng-container *transloco=\"let t\">\n <p-confirmDialog \n #cd \n ></p-confirmDialog>\n <div\n class=\"border-bottom-1 surface-border text-lg\"\n style=\"display: flex; align-items: center; padding-bottom: 10px; width: 100%; gap: 10px;\"\n >\n <i class=\"pi pi-exclamation-circle text-4xl\"></i>\n <p>{{t('PleaseConfirmToProceed')}}</p>\n </div>\n \n <div style=\"display: flex; gap: 12px; justify-content: right; margin-top: 28px;\">\n <spiderly-button (onClick)=\"reject()\" icon=\"pi pi-times\" [label]=\"t('Cancel')\" severity=\"secondary\"></spiderly-button>\n <spiderly-button (onClick)=\"accept()\" icon=\"pi pi-check\" [label]=\"t('Confirm')\" styleClass=\"p-button-danger\"></spiderly-button>\n </div>\n</ng-container>\n" }]
3013
3013
  }], ctorParameters: () => [{ type: i1$6.DynamicDialogRef }, { type: i1$6.DynamicDialogConfig }] });
3014
3014
 
3015
3015
  class SpiderlyDataTableComponent {
@@ -3048,6 +3048,12 @@ class SpiderlyDataTableComponent {
3048
3048
  this.selectedItems = []; // Pass only when hasLazyLoad === false
3049
3049
  this.onRowSelect = new EventEmitter();
3050
3050
  this.onRowUnselect = new EventEmitter();
3051
+ /**
3052
+ * if true, clicking a row will navigate to the details page.
3053
+ * Set to false to disable row navigation.
3054
+ * Default is false.
3055
+ */
3056
+ this.navigateOnRowClick = false;
3051
3057
  this.clientFilterCount = 0;
3052
3058
  }
3053
3059
  ngOnInit() {
@@ -3193,8 +3199,29 @@ class SpiderlyDataTableComponent {
3193
3199
  return false;
3194
3200
  }
3195
3201
  }
3202
+ /*
3203
+ * Navigate to details page based on rowId and rowNavigationPath.
3204
+ * If rowNavigationPath is provided, it will navigate to that path with the rowId.
3205
+ * If not, it will navigate to the current route with the rowId.
3206
+ */
3196
3207
  navigateToDetails(rowId) {
3197
- this.router.navigate([rowId], { relativeTo: this.route });
3208
+ if (rowId == null)
3209
+ return;
3210
+ if (this.rowNavigationPath) {
3211
+ const cleanPath = this.rowNavigationPath.replace(/^\/|\/$/g, ''); // Remove leading and trailing slashes
3212
+ this.router.navigateByUrl(`/${cleanPath}/${rowId}`);
3213
+ }
3214
+ else {
3215
+ this.router.navigate([rowId], { relativeTo: this.route });
3216
+ }
3217
+ }
3218
+ /*
3219
+ * Handle row click event.
3220
+ */
3221
+ onRowClick(row) {
3222
+ if (!this.navigateOnRowClick || !row?.id)
3223
+ return;
3224
+ this.navigateToDetails(row.id);
3198
3225
  }
3199
3226
  deleteObject(rowId) {
3200
3227
  this.deleteRef = this.dialogService.open(SpiderlyDeleteConfirmationComponent, {
@@ -3384,7 +3411,7 @@ class SpiderlyDataTableComponent {
3384
3411
  }
3385
3412
  }
3386
3413
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3$2.Router }, { token: i1$6.DialogService }, { token: i3$2.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
3387
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"> \r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"table-header overflow-auto\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\r\n <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\r\n </div>\r\n <div style=\"display: flex; gap: 8px;\">\r\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n <div style=\"display: flex; gap: 8px;\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n </div>\r\n </th>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{col.name}}\r\n <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n [matchMode]=\"getColMatchMode(col.filterType)\"\r\n >\r\n <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-datepicker \r\n [ngModel]=\"value\" \r\n [showTime]=\"col.showTime\"\r\n (onSelect)=\"filter($event)\"\r\n ></p-datepicker>\r\n </ng-template>\r\n </p-columnFilter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == 'multiple'\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\r\n </td>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n </ng-container>\r\n <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n {{getRowData(rowData, col)}}\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"col.editable\">\r\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"loadingbody\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorright\">\r\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: [".table-header{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}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
3414
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \n (onFilter)=\"filter($event)\"> \n <ng-template pTemplate=\"caption\">\n <div class=\"table-header overflow-auto\">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\n <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\n </div>\n <div style=\"display: flex; gap: 8px;\">\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\n <div style=\"display: flex; gap: 8px;\">\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\n </div>\n </th>\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\n <th [style]=\"getColHeaderWidth(col.filterType)\">\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n {{col.name}}\n <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n [matchMode]=\"getColMatchMode(col.filterType)\"\n >\n <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"p-multiselect-representative-option\">\n <span class=\"ml-2\">{{ item.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n </ng-template>\n <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-datepicker \n [ngModel]=\"value\" \n [showTime]=\"col.showTime\"\n (onSelect)=\"filter($event)\"\n ></p-datepicker>\n </ng-template>\n </p-columnFilter>\n </div>\n </th>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\n <tr [class.clickable]=\" navigateOnRowClick\"\n (click)=\"onRowClick(rowData)\">\n <td *ngIf=\"selectionMode == 'multiple'\">\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\n </td>\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\n <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"col.filterType === 'blob'\">\n <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"col.filterType !== 'blob'\">\n {{getRowData(rowData, col)}}\n </ng-container>\n </td>\n <td *ngIf=\"col.editable\">\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\n </td>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingbody\">\n <tr>\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n {{t('TotalRecords')}}: {{totalRecords}}\n </ng-template>\n <ng-template pTemplate=\"paginatorright\">\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\n </div>\n </ng-template>\n </p-table>\n </div>\n</ng-container>", styles: [".table-header{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}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
3388
3415
  }
3389
3416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
3390
3417
  type: Component,
@@ -3399,7 +3426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
3399
3426
  DatePickerModule,
3400
3427
  CheckboxModule,
3401
3428
  TooltipModule,
3402
- ], template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"> \r\n <ng-template pTemplate=\"caption\">\r\n <div class=\"table-header overflow-auto\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\r\n <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\r\n </div>\r\n <div style=\"display: flex; gap: 8px;\">\r\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n <div style=\"display: flex; gap: 8px;\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n </div>\r\n </th>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{col.name}}\r\n <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n [matchMode]=\"getColMatchMode(col.filterType)\"\r\n >\r\n <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-datepicker \r\n [ngModel]=\"value\" \r\n [showTime]=\"col.showTime\"\r\n (onSelect)=\"filter($event)\"\r\n ></p-datepicker>\r\n </ng-template>\r\n </p-columnFilter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n <tr>\r\n <td *ngIf=\"selectionMode == 'multiple'\">\r\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\r\n </td>\r\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n </ng-container>\r\n <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n {{getRowData(rowData, col)}}\r\n </ng-container>\r\n </td>\r\n <td *ngIf=\"col.editable\">\r\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"loadingbody\">\r\n <tr>\r\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template pTemplate=\"paginatorright\">\r\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: [".table-header{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}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
3429
+ ], template: "<ng-container *transloco=\"let t\">\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\n <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\n (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \n (onFilter)=\"filter($event)\"> \n <ng-template pTemplate=\"caption\">\n <div class=\"table-header overflow-auto\">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\n <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\n </div>\n <div style=\"display: flex; gap: 8px;\">\n <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\n <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\n <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\n <div style=\"display: flex; gap: 8px;\">\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\n </div>\n </th>\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\n <th [style]=\"getColHeaderWidth(col.filterType)\">\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n {{col.name}}\n <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \n [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n [matchMode]=\"getColMatchMode(col.filterType)\"\n >\n <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"p-multiselect-representative-option\">\n <span class=\"ml-2\">{{ item.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n </ng-template>\n <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-datepicker \n [ngModel]=\"value\" \n [showTime]=\"col.showTime\"\n (onSelect)=\"filter($event)\"\n ></p-datepicker>\n </ng-template>\n </p-columnFilter>\n </div>\n </th>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\n <tr [class.clickable]=\" navigateOnRowClick\"\n (click)=\"onRowClick(rowData)\">\n <td *ngIf=\"selectionMode == 'multiple'\">\n <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\n </td>\n <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\n <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\n <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\n <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\n </ng-container>\n </div>\n <ng-container *ngIf=\"col.filterType === 'blob'\">\n <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"col.filterType !== 'blob'\">\n {{getRowData(rowData, col)}}\n </ng-container>\n </td>\n <td *ngIf=\"col.editable\">\n <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\n </td>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingbody\">\n <tr>\n <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n {{t('TotalRecords')}}: {{totalRecords}}\n </ng-template>\n <ng-template pTemplate=\"paginatorright\">\n <div style=\"display: flex; justify-content: end; gap: 10px;\">\n <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\n </div>\n </ng-template>\n </p-table>\n </div>\n</ng-container>", styles: [".table-header{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}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
3403
3430
  }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$6.DialogService }, { type: i3$2.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: undefined, decorators: [{
3404
3431
  type: Inject,
3405
3432
  args: [LOCALE_ID]
@@ -3468,6 +3495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
3468
3495
  type: Output
3469
3496
  }], onRowUnselect: [{
3470
3497
  type: Output
3498
+ }], navigateOnRowClick: [{
3499
+ type: Input
3500
+ }], rowNavigationPath: [{
3501
+ type: Input
3471
3502
  }] } });
3472
3503
  class Action {
3473
3504
  constructor({ name, field, icon, style, styleClass, onClick, } = {}) {
@@ -3621,7 +3652,7 @@ class SpiderlyDataViewComponent {
3621
3652
  this.table.clear();
3622
3653
  }
3623
3654
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token: i1.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
3624
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table \r\n #dt \r\n [value]=\"items\" \r\n [rows]=\"rows\" \r\n [rowHover]=\"false\" \r\n responsiveLayout=\"scroll\" \r\n [lazy]=\"true\"\r\n (onLazyLoad)=\"lazyLoad($event)\" \r\n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n [loading]=\"(items === undefined || loading === true)\" \r\n dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"\r\n [filterDelay]=\"500\"\r\n [paginator]=\"true\"\r\n > \r\n <ng-template #caption>\r\n <div *ngIf=\"filters.length !== 0\">\r\n <div class=\"data-view-grid\">\r\n @for (filter of filters; track $index) {\r\n <div>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n <div>\r\n <label>\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n\r\n <p-columnFilter *ngIf=\"filter.type != null\" [type]=\"filter.type\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.placeholder\" \r\n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.type)\" [matchModeOptions]=\"getMatchModeOptions(filter.type)\" \r\n >\r\n <ng-container *ngIf=\"filter.type == 'multiselect'\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'100%'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div style=\"display: flex; gap: 12px;\">\r\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #body let-rowData let-index=\"rowIndex\">\r\n <tr style=\"padding: 0; margin-bottom: 0;\">\r\n <td style=\"display: block; border: 0; padding: 0;\">\r\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n {{t('NoRecordsFound')}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{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}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
3655
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\n <p-table \n #dt \n [value]=\"items\" \n [rows]=\"rows\" \n [rowHover]=\"false\" \n responsiveLayout=\"scroll\" \n [lazy]=\"true\"\n (onLazyLoad)=\"lazyLoad($event)\" \n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \n [loading]=\"(items === undefined || loading === true)\" \n dataKey=\"id\" \n (onFilter)=\"filter($event)\"\n [filterDelay]=\"500\"\n [paginator]=\"true\"\n > \n <ng-template #caption>\n <div *ngIf=\"filters.length !== 0\">\n <div class=\"data-view-grid\">\n @for (filter of filters; track $index) {\n <div>\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\n <div>\n <label>\n {{filter.label}}\n </label>\n </div>\n\n <p-columnFilter *ngIf=\"filter.type != null\" [type]=\"filter.type\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.placeholder\" \n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.type)\" [matchModeOptions]=\"getMatchModeOptions(filter.type)\" \n >\n <ng-container *ngIf=\"filter.type == 'multiselect'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'100%'}\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"p-multiselect-representative-option\">\n <span class=\"ml-2\">{{ item.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n </ng-template>\n </ng-container>\n </p-columnFilter>\n </div>\n </div>\n }\n </div>\n <div style=\"display: flex; gap: 12px;\">\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\n </div>\n </div>\n </ng-template>\n <ng-template #body let-rowData let-index=\"rowIndex\">\n <tr style=\"padding: 0; margin-bottom: 0;\">\n <td style=\"display: block; border: 0; padding: 0;\">\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\n </ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n {{t('NoRecordsFound')}}\n </ng-template>\n <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n {{t('TotalRecords')}}: {{totalRecords}}\n </ng-template>\n <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n </ng-template>\n </p-table>\n </div>\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{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}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
3625
3656
  }
3626
3657
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, decorators: [{
3627
3658
  type: Component,
@@ -3639,7 +3670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
3639
3670
  InputTextModule,
3640
3671
  InputNumberModule,
3641
3672
  SelectModule,
3642
- ], template: "<ng-container *transloco=\"let t\">\r\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n <p-table \r\n #dt \r\n [value]=\"items\" \r\n [rows]=\"rows\" \r\n [rowHover]=\"false\" \r\n responsiveLayout=\"scroll\" \r\n [lazy]=\"true\"\r\n (onLazyLoad)=\"lazyLoad($event)\" \r\n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \r\n [loading]=\"(items === undefined || loading === true)\" \r\n dataKey=\"id\" \r\n (onFilter)=\"filter($event)\"\r\n [filterDelay]=\"500\"\r\n [paginator]=\"true\"\r\n > \r\n <ng-template #caption>\r\n <div *ngIf=\"filters.length !== 0\">\r\n <div class=\"data-view-grid\">\r\n @for (filter of filters; track $index) {\r\n <div>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\r\n <div>\r\n <label>\r\n {{filter.label}}\r\n </label>\r\n </div>\r\n\r\n <p-columnFilter *ngIf=\"filter.type != null\" [type]=\"filter.type\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.placeholder\" \r\n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.type)\" [matchModeOptions]=\"getMatchModeOptions(filter.type)\" \r\n >\r\n <ng-container *ngIf=\"filter.type == 'multiselect'\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'100%'}\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"p-multiselect-representative-option\">\r\n <span class=\"ml-2\">{{ item.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </ng-container>\r\n </p-columnFilter>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div style=\"display: flex; gap: 12px;\">\r\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\r\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #body let-rowData let-index=\"rowIndex\">\r\n <tr style=\"padding: 0; margin-bottom: 0;\">\r\n <td style=\"display: block; border: 0; padding: 0;\">\r\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n {{t('NoRecordsFound')}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\r\n {{t('TotalRecords')}}: {{totalRecords}}\r\n </ng-template>\r\n <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\r\n <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{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}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
3673
+ ], template: "<ng-container *transloco=\"let t\">\n <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\n <p-table \n #dt \n [value]=\"items\" \n [rows]=\"rows\" \n [rowHover]=\"false\" \n responsiveLayout=\"scroll\" \n [lazy]=\"true\"\n (onLazyLoad)=\"lazyLoad($event)\" \n [totalRecords]=\"totalRecords\" class=\"spiderly-table\" \n [loading]=\"(items === undefined || loading === true)\" \n dataKey=\"id\" \n (onFilter)=\"filter($event)\"\n [filterDelay]=\"500\"\n [paginator]=\"true\"\n > \n <ng-template #caption>\n <div *ngIf=\"filters.length !== 0\">\n <div class=\"data-view-grid\">\n @for (filter of filters; track $index) {\n <div>\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem; position: relative;\">\n <div>\n <label>\n {{filter.label}}\n </label>\n </div>\n\n <p-columnFilter *ngIf=\"filter.type != null\" [type]=\"filter.type\" [field]=\"filter.filterField ?? filter.field\" display=\"row\" [placeholder]=\"filter.placeholder\" \n [showOperator]=\"false\" [showMenu]=\"filter.showMatchModes\" [showMatchModes]=\"true\" [showClearButton]=\"false\" [matchMode]=\"getDefaultMatchMode(filter.type)\" [matchModeOptions]=\"getMatchModeOptions(filter.type)\" \n >\n <ng-container *ngIf=\"filter.type == 'multiselect'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"value\" [options]=\"filter.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'100%'}\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"p-multiselect-representative-option\">\n <span class=\"ml-2\">{{ item.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n </ng-template>\n </ng-container>\n </p-columnFilter>\n </div>\n </div>\n }\n </div>\n <div style=\"display: flex; gap: 12px;\">\n <spiderly-button [label]=\"t('ApplyFilters')\" (onClick)=\"applyFilters()\" [icon]=\"applyFiltersIcon\"></spiderly-button>\n <spiderly-button [label]=\"t('ClearFilters')\" (onClick)=\"clearFilters()\" [icon]=\"clearFiltersIcon\"></spiderly-button>\n </div>\n </div>\n </ng-template>\n <ng-template #body let-rowData let-index=\"rowIndex\">\n <tr style=\"padding: 0; margin-bottom: 0;\">\n <td style=\"display: block; border: 0; padding: 0;\">\n <ng-container *ngTemplateOutlet=\"cardBody; context: { $implicit: rowData, item: rowData, index: index }\">\n </ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n {{t('NoRecordsFound')}}\n </ng-template>\n <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n {{t('TotalRecords')}}: {{totalRecords}}\n </ng-template>\n <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n </ng-template>\n </p-table>\n </div>\n</ng-container>", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{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}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
3643
3674
  }], ctorParameters: () => [{ type: i1.TranslocoService }, { type: undefined, decorators: [{
3644
3675
  type: Inject,
3645
3676
  args: [LOCALE_ID]
@@ -3678,11 +3709,11 @@ class SpiderlyCardComponent {
3678
3709
  ngOnInit() {
3679
3710
  }
3680
3711
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3681
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCardComponent, isStandalone: true, selector: "spiderly-card", inputs: { icon: "icon", title: "title" }, ngImport: i0, template: "<div class=\"card responsive-card-padding\">\r\n <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 8px;\">\r\n <i style=\"font-size: 21px;\" class=\"{{icon}} primary-color\"></i>\r\n <div style=\"margin: 0; font-size: 17.5px;\">{{title}}</div>\r\n </div>\r\n <ng-content></ng-content>\r\n</div>" }); }
3712
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCardComponent, isStandalone: true, selector: "spiderly-card", inputs: { icon: "icon", title: "title" }, ngImport: i0, template: "<div class=\"card responsive-card-padding\">\n <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 8px;\">\n <i style=\"font-size: 21px;\" class=\"{{icon}} primary-color\"></i>\n <div style=\"margin: 0; font-size: 17.5px;\">{{title}}</div>\n </div>\n <ng-content></ng-content>\n</div>" }); }
3682
3713
  }
3683
3714
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCardComponent, decorators: [{
3684
3715
  type: Component,
3685
- args: [{ selector: 'spiderly-card', template: "<div class=\"card responsive-card-padding\">\r\n <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 8px;\">\r\n <i style=\"font-size: 21px;\" class=\"{{icon}} primary-color\"></i>\r\n <div style=\"margin: 0; font-size: 17.5px;\">{{title}}</div>\r\n </div>\r\n <ng-content></ng-content>\r\n</div>" }]
3716
+ args: [{ selector: 'spiderly-card', template: "<div class=\"card responsive-card-padding\">\n <div style=\"display: flex; align-items: center; margin-bottom: 14px; gap: 8px;\">\n <i style=\"font-size: 21px;\" class=\"{{icon}} primary-color\"></i>\n <div style=\"margin: 0; font-size: 17.5px;\">{{title}}</div>\n </div>\n <ng-content></ng-content>\n</div>" }]
3686
3717
  }], ctorParameters: () => [], propDecorators: { icon: [{
3687
3718
  type: Input
3688
3719
  }], title: [{
@@ -3946,7 +3977,7 @@ class MenuitemComponent {
3946
3977
  }
3947
3978
  }
3948
3979
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: MenuitemComponent, deps: [{ token: LayoutBaseService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: SidebarMenuService }, { token: AuthBaseService }, { token: ApiSecurityService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
3949
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: MenuitemComponent, isStandalone: true, selector: "[menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\r\n <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\r\n [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n </a>\r\n <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\r\n [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\r\n [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\r\n [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\r\n [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n </a>\r\n\r\n <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\r\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\r\n <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\r\n </ng-template>\r\n </ul>\r\n\r\n <!-- Delete this in the future iterations, make link to partner in /partners page -->\r\n <spiderly-autocomplete\r\n *ngIf=\"item.showPartnerDialog\"\r\n [control]=\"selectedPartner\"\r\n [options]=\"partnerOptions\"\r\n (onTextInput)=\"searchPartners($event)\"\r\n label=\"\"\r\n [placeholder]=\"t('SelectThePartner')\"\r\n [showAddon]=\"true\"\r\n (onButtonClick)=\"partnersAutocompleteButtonClick()\"\r\n addonIcon=\"pi pi-check\"\r\n [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\r\n class=\"mobile-stay-open\"\r\n ></spiderly-autocomplete>\r\n \r\n</ng-container>", dependencies: [{ kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyAutocompleteComponent, selector: "spiderly-autocomplete", inputs: ["appendTo", "showClear", "emptyMessage", "displayName"] }], animations: [
3980
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: MenuitemComponent, isStandalone: true, selector: "[menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\n <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\n [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n </a>\n <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\n [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\n [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\n [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n </a>\n\n <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\n </ng-template>\n </ul>\n\n <!-- Delete this in the future iterations, make link to partner in /partners page -->\n <spiderly-autocomplete\n *ngIf=\"item.showPartnerDialog\"\n [control]=\"selectedPartner\"\n [options]=\"partnerOptions\"\n (onTextInput)=\"searchPartners($event)\"\n label=\"\"\n [placeholder]=\"t('SelectThePartner')\"\n [showAddon]=\"true\"\n (onButtonClick)=\"partnersAutocompleteButtonClick()\"\n addonIcon=\"pi pi-check\"\n [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\n class=\"mobile-stay-open\"\n ></spiderly-autocomplete>\n \n</ng-container>", dependencies: [{ kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyAutocompleteComponent, selector: "spiderly-autocomplete", inputs: ["appendTo", "showClear", "emptyMessage", "displayName"] }], animations: [
3950
3981
  trigger('children', [
3951
3982
  state('collapsed', style({
3952
3983
  height: '0'
@@ -3975,7 +4006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
3975
4006
  RouterModule,
3976
4007
  TranslocoDirective,
3977
4008
  SpiderlyControlsModule,
3978
- ], template: "<ng-container *transloco=\"let t\">\r\n <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\r\n <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\r\n [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n </a>\r\n <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\r\n [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\r\n [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\r\n [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\r\n [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\r\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\r\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\r\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\r\n </a>\r\n\r\n <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\r\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\r\n <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\r\n </ng-template>\r\n </ul>\r\n\r\n <!-- Delete this in the future iterations, make link to partner in /partners page -->\r\n <spiderly-autocomplete\r\n *ngIf=\"item.showPartnerDialog\"\r\n [control]=\"selectedPartner\"\r\n [options]=\"partnerOptions\"\r\n (onTextInput)=\"searchPartners($event)\"\r\n label=\"\"\r\n [placeholder]=\"t('SelectThePartner')\"\r\n [showAddon]=\"true\"\r\n (onButtonClick)=\"partnersAutocompleteButtonClick()\"\r\n addonIcon=\"pi pi-check\"\r\n [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\r\n class=\"mobile-stay-open\"\r\n ></spiderly-autocomplete>\r\n \r\n</ng-container>" }]
4009
+ ], template: "<ng-container *transloco=\"let t\">\n <div *ngIf=\"root && item.visible === true\" class=\"layout-menuitem-root-text\">{{item.label}}</div>\n <a *ngIf=\"(!item.routerLink || item.items) && item.visible === true\" [attr.href]=\"item.url\" (click)=\"itemClick($event)\"\n [ngClass]=\"item.styleClass\" [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n </a>\n <a *ngIf=\"(item.routerLink && !item.items) && item.visible === true\" (click)=\"itemClick($event)\" [ngClass]=\"item.styleClass\"\n [routerLink]=\"item.routerLink\" routerLinkActive=\"active-route\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }\"\n [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\"\n [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" [queryParams]=\"item.queryParams\"\n [attr.target]=\"item.target\" tabindex=\"0\" pRipple>\n <i [ngClass]=\"item.icon\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{item.label}}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n </a>\n\n <ul *ngIf=\"item.items && item.visible === true\" [@children]=\"submenuAnimation\">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeStyleClass\"></li>\n </ng-template>\n </ul>\n\n <!-- Delete this in the future iterations, make link to partner in /partners page -->\n <spiderly-autocomplete\n *ngIf=\"item.showPartnerDialog\"\n [control]=\"selectedPartner\"\n [options]=\"partnerOptions\"\n (onTextInput)=\"searchPartners($event)\"\n label=\"\"\n [placeholder]=\"t('SelectThePartner')\"\n [showAddon]=\"true\"\n (onButtonClick)=\"partnersAutocompleteButtonClick()\"\n addonIcon=\"pi pi-check\"\n [emptyMessage]=\"t('LeftCornerPartnersEmptyMessage')\"\n class=\"mobile-stay-open\"\n ></spiderly-autocomplete>\n \n</ng-container>" }]
3979
4010
  }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: SidebarMenuService }, { type: AuthBaseService }, { type: ApiSecurityService }, { type: ConfigBaseService }], propDecorators: { item: [{
3980
4011
  type: Input
3981
4012
  }], index: [{
@@ -4004,14 +4035,14 @@ class SidebarMenuComponent {
4004
4035
  ngOnDestroy() {
4005
4036
  }
4006
4037
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: LayoutBaseService }, { token: AuthBaseService }, { token: i1.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
4007
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SidebarMenuComponent, isStandalone: true, selector: "sidebar-menu", inputs: { menu: "menu" }, ngImport: i0, template: "<ul class=\"layout-menu\">\r\n <ng-container *ngFor=\"let item of menu; let i = index;\">\r\n <li menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\r\n <li *ngIf=\"item.separator\" class=\"gray-separator\" style=\"margin-top: 11px;\"></li>\r\n </ng-container>\r\n</ul>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
4038
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SidebarMenuComponent, isStandalone: true, selector: "sidebar-menu", inputs: { menu: "menu" }, ngImport: i0, template: "<ul class=\"layout-menu\">\n <ng-container *ngFor=\"let item of menu; let i = index;\">\n <li menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n <li *ngIf=\"item.separator\" class=\"gray-separator\" style=\"margin-top: 11px;\"></li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuitemComponent, selector: "[menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
4008
4039
  }
4009
4040
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SidebarMenuComponent, decorators: [{
4010
4041
  type: Component,
4011
4042
  args: [{ selector: 'sidebar-menu', imports: [
4012
4043
  CommonModule,
4013
4044
  MenuitemComponent
4014
- ], template: "<ul class=\"layout-menu\">\r\n <ng-container *ngFor=\"let item of menu; let i = index;\">\r\n <li menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\r\n <li *ngIf=\"item.separator\" class=\"gray-separator\" style=\"margin-top: 11px;\"></li>\r\n </ng-container>\r\n</ul>\r\n" }]
4045
+ ], template: "<ul class=\"layout-menu\">\n <ng-container *ngFor=\"let item of menu; let i = index;\">\n <li menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n <li *ngIf=\"item.separator\" class=\"gray-separator\" style=\"margin-top: 11px;\"></li>\n </ng-container>\n</ul>\n" }]
4015
4046
  }], ctorParameters: () => [{ type: LayoutBaseService }, { type: AuthBaseService }, { type: i1.TranslocoService }, { type: ConfigBaseService }], propDecorators: { menu: [{
4016
4047
  type: Input
4017
4048
  }] } });
@@ -4023,13 +4054,13 @@ class AppSidebarComponent {
4023
4054
  ngOnInit() {
4024
4055
  }
4025
4056
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AppSidebarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
4026
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AppSidebarComponent, isStandalone: true, selector: "sidebar", inputs: { menu: "menu" }, ngImport: i0, template: " <sidebar-menu [menu]=\"menu\"></sidebar-menu>\r\n", dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "sidebar-menu", inputs: ["menu"] }] }); }
4057
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AppSidebarComponent, isStandalone: true, selector: "sidebar", inputs: { menu: "menu" }, ngImport: i0, template: " <sidebar-menu [menu]=\"menu\"></sidebar-menu>\n", dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "sidebar-menu", inputs: ["menu"] }] }); }
4027
4058
  }
4028
4059
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AppSidebarComponent, decorators: [{
4029
4060
  type: Component,
4030
4061
  args: [{ selector: 'sidebar', imports: [
4031
4062
  SidebarMenuComponent
4032
- ], template: " <sidebar-menu [menu]=\"menu\"></sidebar-menu>\r\n" }]
4063
+ ], template: " <sidebar-menu [menu]=\"menu\"></sidebar-menu>\n" }]
4033
4064
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menu: [{
4034
4065
  type: Input
4035
4066
  }] } });
@@ -4123,7 +4154,7 @@ class ProfileAvatarComponent {
4123
4154
  }
4124
4155
  }
4125
4156
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, deps: [{ token: LayoutBaseService }, { token: AuthBaseService }, { token: i3$2.Router }, { token: i1.TranslocoService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
4126
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div\r\n *ngIf=\"this.currentUser != null\"\r\n #topbarmenu\r\n >\r\n <div\r\n #topbarprofiledropdownmenubutton\r\n (click)=\"layoutService.showProfileDropdownSidebar()\"\r\n >\r\n <p-avatar\r\n *ngIf=\"showProfileIcon\"\r\n [label]=\"avatarLabel\"\r\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\r\n pBadge \r\n [badgeStyleClass]=\"'p-badge-danger'\"\r\n [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\r\n [value]=\"unreadNotificationsCount\"\r\n />\r\n </div>\r\n <div\r\n #topbarprofiledropdownmenu\r\n (document:click)=\"onDocumentClick($event)\"\r\n >\r\n <div \r\n *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \r\n style=\"width: 280px; position: absolute; padding: 15px; background: var(--p-content-background);\" \r\n class=\"card\"\r\n [ngClass]=\"{\r\n 'side-menu-profile-dialog': isSideMenuLayout,\r\n 'top-menu-profile-dialog': !isSideMenuLayout,\r\n }\r\n \"\r\n >\r\n <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\r\n <p-avatar\r\n [label]=\"avatarLabel\"\r\n size=\"xlarge\"\r\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'margin': 'auto', 'cursor': routeOnLargeProfileAvatarClick ? 'pointer' : '' }\"\r\n (click)=\"routeToUserPage()\"\r\n />\r\n <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\r\n </div>\r\n <div style=\"margin-top: 15px;\">\r\n <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\r\n <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\r\n <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 8px; margin-top: 5px;\">\r\n <i \r\n class=\"pi pi-fw {{item.icon}}\" \r\n style=\"font-size: 16px; position: relative;\"\r\n >\r\n <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\r\n </i>\r\n <div style=\"font-size: 15px;\"> {{item.label}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\r\n <spiderly-button \r\n [label]=\"t('Login')\" \r\n (onClick)=\"loginButtonClick()\" \r\n icon=\"pi pi-sign-in\" \r\n [outlined]=\"loginButtonOutlined\" \r\n [severity]=\"loginButtonSeverity\"\r\n [size]=\"loginButtonSize\"\r\n ></spiderly-button>\r\n </div>\r\n</ng-container>", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i8.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
4157
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div\n *ngIf=\"this.currentUser != null\"\n #topbarmenu\n >\n <div\n #topbarprofiledropdownmenubutton\n (click)=\"layoutService.showProfileDropdownSidebar()\"\n >\n <p-avatar\n *ngIf=\"showProfileIcon\"\n [label]=\"avatarLabel\"\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\n pBadge \n [badgeStyleClass]=\"'p-badge-danger'\"\n [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\n [value]=\"unreadNotificationsCount\"\n />\n </div>\n <div\n #topbarprofiledropdownmenu\n (document:click)=\"onDocumentClick($event)\"\n >\n <div \n *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \n style=\"width: 280px; position: absolute; padding: 15px; background: var(--p-content-background);\" \n class=\"card\"\n [ngClass]=\"{\n 'side-menu-profile-dialog': isSideMenuLayout,\n 'top-menu-profile-dialog': !isSideMenuLayout,\n }\n \"\n >\n <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\n <p-avatar\n [label]=\"avatarLabel\"\n size=\"xlarge\"\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'margin': 'auto', 'cursor': routeOnLargeProfileAvatarClick ? 'pointer' : '' }\"\n (click)=\"routeToUserPage()\"\n />\n <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\n </div>\n <div style=\"margin-top: 15px;\">\n <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\n <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 8px; margin-top: 5px;\">\n <i \n class=\"pi pi-fw {{item.icon}}\" \n style=\"font-size: 16px; position: relative;\"\n >\n <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\n </i>\n <div style=\"font-size: 15px;\"> {{item.label}} </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n <spiderly-button \n [label]=\"t('Login')\" \n (onClick)=\"loginButtonClick()\" \n icon=\"pi pi-sign-in\" \n [outlined]=\"loginButtonOutlined\" \n [severity]=\"loginButtonSeverity\"\n [size]=\"loginButtonSize\"\n ></spiderly-button>\n </div>\n</ng-container>", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i8.BadgeDirective, selector: "[pBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "severity", "value", "badgeStyle", "badgeStyleClass"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
4127
4158
  }
4128
4159
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, decorators: [{
4129
4160
  type: Component,
@@ -4134,7 +4165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
4134
4165
  BadgeModule,
4135
4166
  SpiderlyButtonComponent,
4136
4167
  TranslocoDirective,
4137
- ], template: "<ng-container *transloco=\"let t\">\r\n <div\r\n *ngIf=\"this.currentUser != null\"\r\n #topbarmenu\r\n >\r\n <div\r\n #topbarprofiledropdownmenubutton\r\n (click)=\"layoutService.showProfileDropdownSidebar()\"\r\n >\r\n <p-avatar\r\n *ngIf=\"showProfileIcon\"\r\n [label]=\"avatarLabel\"\r\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\r\n pBadge \r\n [badgeStyleClass]=\"'p-badge-danger'\"\r\n [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\r\n [value]=\"unreadNotificationsCount\"\r\n />\r\n </div>\r\n <div\r\n #topbarprofiledropdownmenu\r\n (document:click)=\"onDocumentClick($event)\"\r\n >\r\n <div \r\n *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \r\n style=\"width: 280px; position: absolute; padding: 15px; background: var(--p-content-background);\" \r\n class=\"card\"\r\n [ngClass]=\"{\r\n 'side-menu-profile-dialog': isSideMenuLayout,\r\n 'top-menu-profile-dialog': !isSideMenuLayout,\r\n }\r\n \"\r\n >\r\n <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\r\n <p-avatar\r\n [label]=\"avatarLabel\"\r\n size=\"xlarge\"\r\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'margin': 'auto', 'cursor': routeOnLargeProfileAvatarClick ? 'pointer' : '' }\"\r\n (click)=\"routeToUserPage()\"\r\n />\r\n <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\r\n </div>\r\n <div style=\"margin-top: 15px;\">\r\n <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\r\n <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\r\n <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 8px; margin-top: 5px;\">\r\n <i \r\n class=\"pi pi-fw {{item.icon}}\" \r\n style=\"font-size: 16px; position: relative;\"\r\n >\r\n <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\r\n </i>\r\n <div style=\"font-size: 15px;\"> {{item.label}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\r\n <spiderly-button \r\n [label]=\"t('Login')\" \r\n (onClick)=\"loginButtonClick()\" \r\n icon=\"pi pi-sign-in\" \r\n [outlined]=\"loginButtonOutlined\" \r\n [severity]=\"loginButtonSeverity\"\r\n [size]=\"loginButtonSize\"\r\n ></spiderly-button>\r\n </div>\r\n</ng-container>", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"] }]
4168
+ ], template: "<ng-container *transloco=\"let t\">\n <div\n *ngIf=\"this.currentUser != null\"\n #topbarmenu\n >\n <div\n #topbarprofiledropdownmenubutton\n (click)=\"layoutService.showProfileDropdownSidebar()\"\n >\n <p-avatar\n *ngIf=\"showProfileIcon\"\n [label]=\"avatarLabel\"\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }\"\n pBadge \n [badgeStyleClass]=\"'p-badge-danger'\"\n [badgeDisabled]=\"unreadNotificationsCount == 0 || unreadNotificationsCount == null\"\n [value]=\"unreadNotificationsCount\"\n />\n </div>\n <div\n #topbarprofiledropdownmenu\n (document:click)=\"onDocumentClick($event)\"\n >\n <div \n *ngIf=\"layoutService.state.profileDropdownSidebarVisible\" \n style=\"width: 280px; position: absolute; padding: 15px; background: var(--p-content-background);\" \n class=\"card\"\n [ngClass]=\"{\n 'side-menu-profile-dialog': isSideMenuLayout,\n 'top-menu-profile-dialog': !isSideMenuLayout,\n }\n \"\n >\n <div style=\"display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;\">\n <p-avatar\n [label]=\"avatarLabel\"\n size=\"xlarge\"\n [style]=\"{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'margin': 'auto', 'cursor': routeOnLargeProfileAvatarClick ? 'pointer' : '' }\"\n (click)=\"routeToUserPage()\"\n />\n <div style=\"font-size: 15px;\">{{currentUser?.email}}</div>\n </div>\n <div style=\"margin-top: 15px;\">\n <div *ngFor=\"let item of menuItems\" [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\">\n <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n <div (click)=\"item.onClick()\" class=\"hover-card\" style=\"display: flex; align-items: center; gap: 8px; margin-top: 5px;\">\n <i \n class=\"pi pi-fw {{item.icon}}\" \n style=\"font-size: 16px; position: relative;\"\n >\n <span *ngIf=\"item.showNotificationBadge && unreadNotificationsCount != 0\" class=\"badge\"></span>\n </i>\n <div style=\"font-size: 15px;\"> {{item.label}} </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n <spiderly-button \n [label]=\"t('Login')\" \n (onClick)=\"loginButtonClick()\" \n icon=\"pi pi-sign-in\" \n [outlined]=\"loginButtonOutlined\" \n [severity]=\"loginButtonSeverity\"\n [size]=\"loginButtonSize\"\n ></spiderly-button>\n </div>\n</ng-container>", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"] }]
4138
4169
  }], ctorParameters: () => [{ type: LayoutBaseService }, { type: AuthBaseService }, { type: i3$2.Router }, { type: i1.TranslocoService }, { type: ConfigBaseService }], propDecorators: { isSideMenuLayout: [{
4139
4170
  type: Input
4140
4171
  }], routeOnLargeProfileAvatarClick: [{
@@ -4177,7 +4208,7 @@ class SideMenuTopBarComponent {
4177
4208
  });
4178
4209
  }
4179
4210
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, deps: [{ token: LayoutBaseService }, { token: i3$2.Router }, { token: ConfigBaseService }, { token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
4180
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SideMenuTopBarComponent, isStandalone: true, selector: "spiderly-sidemenu-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\r\n <a class=\"layout-topbar-logo\" routerLink=\"/\">\r\n <span>{{companyName?.toLocaleUpperCase()}}</span>\r\n </a>\r\n\r\n <button\r\n #menubutton\r\n class=\"p-link layout-menu-button layout-topbar-button\"\r\n (click)=\"layoutService.onMenuToggle()\"\r\n >\r\n <i class=\"pi pi-bars\"></i>\r\n </button>\r\n\r\n <div class=\"profile-button\">\r\n <spiderly-profile-avatar\r\n ></spiderly-profile-avatar>\r\n </div>\r\n\r\n</div>\r\n ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
4211
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SideMenuTopBarComponent, isStandalone: true, selector: "spiderly-sidemenu-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"/\">\n <span>{{companyName?.toLocaleUpperCase()}}</span>\n </a>\n\n <button\n #menubutton\n class=\"p-link layout-menu-button layout-topbar-button\"\n (click)=\"layoutService.onMenuToggle()\"\n >\n <i class=\"pi pi-bars\"></i>\n </button>\n\n <div class=\"profile-button\">\n <spiderly-profile-avatar\n ></spiderly-profile-avatar>\n </div>\n\n</div>\n ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
4181
4212
  }
4182
4213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SideMenuTopBarComponent, decorators: [{
4183
4214
  type: Component,
@@ -4187,7 +4218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
4187
4218
  AvatarModule,
4188
4219
  BadgeModule,
4189
4220
  ProfileAvatarComponent,
4190
- ], template: "<div class=\"layout-topbar\">\r\n <a class=\"layout-topbar-logo\" routerLink=\"/\">\r\n <span>{{companyName?.toLocaleUpperCase()}}</span>\r\n </a>\r\n\r\n <button\r\n #menubutton\r\n class=\"p-link layout-menu-button layout-topbar-button\"\r\n (click)=\"layoutService.onMenuToggle()\"\r\n >\r\n <i class=\"pi pi-bars\"></i>\r\n </button>\r\n\r\n <div class=\"profile-button\">\r\n <spiderly-profile-avatar\r\n ></spiderly-profile-avatar>\r\n </div>\r\n\r\n</div>\r\n " }]
4221
+ ], template: "<div class=\"layout-topbar\">\n <a class=\"layout-topbar-logo\" routerLink=\"/\">\n <span>{{companyName?.toLocaleUpperCase()}}</span>\n </a>\n\n <button\n #menubutton\n class=\"p-link layout-menu-button layout-topbar-button\"\n (click)=\"layoutService.onMenuToggle()\"\n >\n <i class=\"pi pi-bars\"></i>\n </button>\n\n <div class=\"profile-button\">\n <spiderly-profile-avatar\n ></spiderly-profile-avatar>\n </div>\n\n</div>\n " }]
4191
4222
  }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i3$2.Router }, { type: ConfigBaseService }, { type: i1.TranslocoService }], propDecorators: { menuButton: [{
4192
4223
  type: ViewChild,
4193
4224
  args: ['menubutton']
@@ -4228,7 +4259,7 @@ class TopBarComponent {
4228
4259
  }
4229
4260
  }
4230
4261
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: AuthBaseService }, { token: ConfigBaseService }], target: i0.ɵɵFactoryTarget.Component }); }
4231
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\r\n <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\r\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n <ng-template #start>\r\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n </ng-template>\r\n <ng-template #end>\r\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n <div>\r\n <ng-content select=\"[ACTIONS]\"></ng-content>\r\n </div>\r\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n </div>\r\n </ng-template>\r\n </p-menubar>\r\n </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$a.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
4262
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\n <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\n <ng-template #start>\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\n </ng-template>\n <ng-template #end>\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\n <div>\n <ng-content select=\"[ACTIONS]\"></ng-content>\n </div>\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\n </div>\n </ng-template>\n </p-menubar>\n </nav>\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$a.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
4232
4263
  }
4233
4264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, decorators: [{
4234
4265
  type: Component,
@@ -4238,7 +4269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
4238
4269
  MenubarModule,
4239
4270
  AvatarModule,
4240
4271
  ProfileAvatarComponent,
4241
- ], template: "<div class=\"topbar-wrapper\">\r\n <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\r\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\r\n <ng-template #start>\r\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\r\n </ng-template>\r\n <ng-template #end>\r\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\r\n <div>\r\n <ng-content select=\"[ACTIONS]\"></ng-content>\r\n </div>\r\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\r\n </div>\r\n </ng-template>\r\n </p-menubar>\r\n </nav>\r\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"] }]
4272
+ ], template: "<div class=\"topbar-wrapper\">\n <nav class=\"topbar {{showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'}}\">\n <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\n <ng-template #start>\n <img style=\"margin-left: 11px; cursor: pointer;\" width=\"45\" height=\"45\" routerLink=\"/\" [src]=\"logoPath\" alt=\"Logo\">\n </ng-template>\n <ng-template #end>\n <div style=\"margin-right: 11px; display: flex; gap: 10px; align-items: center; position: relative;\">\n <div>\n <ng-content select=\"[ACTIONS]\"></ng-content>\n </div>\n <spiderly-profile-avatar [isSideMenuLayout]=\"false\"></spiderly-profile-avatar>\n </div>\n </ng-template>\n </p-menubar>\n </nav>\n</div>", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"] }]
4242
4273
  }], ctorParameters: () => [{ type: AuthBaseService }, { type: ConfigBaseService }], propDecorators: { menu: [{
4243
4274
  type: Input
4244
4275
  }], showHoverBgOnRootItems: [{
@@ -4259,6 +4290,10 @@ class SpiderlyLayoutComponent {
4259
4290
  * for root top menu items. Defaults to `false`.
4260
4291
  */
4261
4292
  this.showHoverBgOnRootTopMenuItems = false;
4293
+ /**
4294
+ * default max-width for the main content area.
4295
+ */
4296
+ this.maxWidth = '1100px';
4262
4297
  this.onAfterNgDestroy = () => { };
4263
4298
  this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
4264
4299
  if (!this.menuOutsideClickListener) {
@@ -4358,7 +4393,7 @@ class SpiderlyLayoutComponent {
4358
4393
  this.onAfterNgDestroy();
4359
4394
  }
4360
4395
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutBaseService }, { token: i0.Renderer2 }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
4361
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n <div class=\"layout-sidebar\">\r\n <sidebar [menu]=\"sideMenu\"></sidebar>\r\n </div>\r\n <div class=\"layout-main-container\">\r\n <div class=\"layout-main\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <footer></footer>\r\n </div>\r\n <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n </spiderly-topbar>\r\n <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n <router-outlet></router-outlet>\r\n </main>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
4396
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems", maxWidth: "maxWidth" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n <div class=\"layout-sidebar\">\n <sidebar [menu]=\"sideMenu\"></sidebar>\n </div>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet></router-outlet>\n </div>\n <footer></footer>\n </div>\n <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n </spiderly-topbar>\n <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px;\">\n <router-outlet></router-outlet>\n </main>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
4362
4397
  }
4363
4398
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, decorators: [{
4364
4399
  type: Component,
@@ -4369,13 +4404,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
4369
4404
  FooterComponent,
4370
4405
  SideMenuTopBarComponent,
4371
4406
  TopBarComponent,
4372
- ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n <div class=\"layout-sidebar\">\r\n <sidebar [menu]=\"sideMenu\"></sidebar>\r\n </div>\r\n <div class=\"layout-main-container\">\r\n <div class=\"layout-main\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <footer></footer>\r\n </div>\r\n <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n </spiderly-topbar>\r\n <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n <router-outlet></router-outlet>\r\n </main>\r\n</div>" }]
4407
+ ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n <div class=\"layout-sidebar\">\n <sidebar [menu]=\"sideMenu\"></sidebar>\n </div>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet></router-outlet>\n </div>\n <footer></footer>\n </div>\n <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\n <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n </spiderly-topbar>\n <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px;\">\n <router-outlet></router-outlet>\n </main>\n</div>" }]
4373
4408
  }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.Renderer2 }, { type: i3$2.Router }], propDecorators: { menu: [{
4374
4409
  type: Input
4375
4410
  }], isSideMenuLayout: [{
4376
4411
  type: Input
4377
4412
  }], showHoverBgOnRootTopMenuItems: [{
4378
4413
  type: Input
4414
+ }], maxWidth: [{
4415
+ type: Input
4379
4416
  }], appSidebar: [{
4380
4417
  type: ViewChild,
4381
4418
  args: [AppSidebarComponent]