@solcre-org/core-ui 2.12.19 → 2.12.21

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.
@@ -175,11 +175,22 @@
175
175
  }
176
176
 
177
177
 
178
+ /* ********************** ONLY MOBILE ********************** */
179
+
180
+ @media (max-width: 47.9375rem) /* up to 767px */ {
181
+
182
+ [class*="c-btn"]{
183
+ --_padd-x: 1em;
184
+ }
185
+
186
+ }
187
+
188
+
178
189
  /* ********************** SHORT MOBILE ********************** */
179
190
 
180
191
  @media (max-width: 22.4375rem) /* 359px */ {
181
192
 
182
- [class*="c-btn"]{
193
+ [class*="c-btn"]{
183
194
  --_fz: var(--fz-000);
184
195
  }
185
196
 
@@ -9,7 +9,7 @@
9
9
  * --layout-padd-y: Size
10
10
  */
11
11
  .o-layout{
12
- --_layout-padd-x: calc(var(--space-x)*2);
12
+ --_layout-padd-x: calc(var(--space-x)*1.5);
13
13
  --_layout-padd-y: var(--space-y);
14
14
  }
15
15
  .o-layout__nav{
@@ -75,4 +75,14 @@
75
75
  --_layout-padd-x: calc(var(--space-x)*1.2);
76
76
  }
77
77
 
78
+ }
79
+
80
+ /* ********************** de Hd a FULL HD ********************** */
81
+
82
+ @media (min-width: 100rem) /* 1600px */ {
83
+
84
+ .o-layout{
85
+ --_layout-padd-x: calc(var(--space-x)*2);
86
+ }
87
+
78
88
  }
@@ -8265,6 +8265,14 @@ class HeaderService {
8265
8265
  customTemplate = signal(null);
8266
8266
  filterButtonConfig = signal(undefined);
8267
8267
  createButtonConfig = signal(undefined);
8268
+ globalCustomClass = signal('');
8269
+ headerOutside = signal(false);
8270
+ getHeaderOutside() {
8271
+ return this.headerOutside;
8272
+ }
8273
+ setHeaderOutside(outside) {
8274
+ this.headerOutside.set(outside);
8275
+ }
8268
8276
  setHeaderData(data) {
8269
8277
  if (data.title !== undefined)
8270
8278
  this.title.set(data.title);
@@ -8320,6 +8328,8 @@ class HeaderService {
8320
8328
  this.customTemplate.set(null);
8321
8329
  this.filterButtonConfig.set(undefined);
8322
8330
  this.createButtonConfig.set(undefined);
8331
+ this.globalCustomClass.set('');
8332
+ this.headerOutside.set(false);
8323
8333
  }
8324
8334
  setTitle(title) {
8325
8335
  this.title.set(title);
@@ -8354,6 +8364,10 @@ class HeaderService {
8354
8364
  this.filterButtonConfig.set(config.filterButtonConfig);
8355
8365
  if (config.createButtonConfig !== undefined)
8356
8366
  this.createButtonConfig.set(config.createButtonConfig);
8367
+ if (config.globalCustomClass !== undefined)
8368
+ this.globalCustomClass.set(config.globalCustomClass);
8369
+ if (config.headerOutside !== undefined)
8370
+ this.headerOutside.set(config.headerOutside);
8357
8371
  }
8358
8372
  getIsVisible() {
8359
8373
  return this.isVisible;
@@ -8397,6 +8411,12 @@ class HeaderService {
8397
8411
  getCreateButtonConfig() {
8398
8412
  return this.createButtonConfig;
8399
8413
  }
8414
+ getGlobalCustomClass() {
8415
+ return this.globalCustomClass;
8416
+ }
8417
+ setGlobalCustomClass(customClass) {
8418
+ this.globalCustomClass.set(customClass);
8419
+ }
8400
8420
  getOrderedElements() {
8401
8421
  const order = this.headerOrder();
8402
8422
  if (!order || !order.useCustomOrder || !order.elements) {
@@ -11911,7 +11931,7 @@ class HeaderComponent {
11911
11931
  return this.headerService.getText()();
11912
11932
  }
11913
11933
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11914
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderComponent, isStandalone: true, selector: "core-header", outputs: { filterRequested: "filterRequested", createRequested: "createRequested", globalActionTriggered: "globalActionTriggered" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!--\n MODELO:\n <div class=\"o-layout__header c-header\">\n <div class=\"c-header__row\">\n\n <div class=\"c-header__group\">\n\n <h2 class=\"c-header__heading u-heading\">Listado de usuarios</h2>\n <div class=\"c-header__text u-text\"></div>\n\n </div>\n\n <div class=\"c-header__group u-flex\">\n\n <button class=\"c-icon-btn\"><span class=\"icon-excel\"></span></button>\n <button class=\"c-icon-btn\"><span class=\"icon-filter\"></span></button>\n <button class=\"c-btn\"><span class=\"icon-add\"></span> Agregar</button>\n\n </div>\n\n </div>\n </div>\n-->\n\n@if (headerService.getIsVisible()()) {\n <div class=\"c-header\">\n <div class=\"c-header__row\">\n\n <div class=\"c-header__group\">\n\n <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n </div>\n\n <div class=\"c-header__group u-flex\">\n\n @for (element of headerService.getOrderedElements(); track element.type) {\n @if (headerService.isElementVisible(element.type)) {\n \n @switch (element.type) {\n @case (HeaderElementType.GLOBAL_ACTIONS) {\n @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n @if (hasPermission(globalAction)) {\n <core-generic-button \n [config]=\"getGlobalActionButtonConfig(globalAction)\"\n (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.CUSTOM_ACTIONS) {\n @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n @if (isCustomActionVisible(customAction)) {\n <core-generic-button \n [config]=\"getCustomActionButtonConfig(customAction)\"\n (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.FILTER) {\n <core-generic-button \n [config]=\"getFilterButtonConfig()\"\n (buttonClick)=\"onFilterButtonClick()\">\n </core-generic-button>\n }\n \n @case (HeaderElementType.CREATE) {\n <core-generic-button \n [config]=\"getCreateButtonConfig()\"\n (buttonClick)=\"onCreateButtonClick()\">\n </core-generic-button>\n }\n }\n \n }\n }\n\n </div>\n\n </div>\n\n <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n {{ getHeaderText() }}\n </p>\n\n @if (headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && headerService.getCustomTemplate()()) {\n <ng-container *ngTemplateOutlet=\"headerService.getCustomTemplate()()\"></ng-container>\n }\n </div>\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"], dependencies: [{ 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: "ngmodule", type: TranslateModule }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }] });
11934
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderComponent, isStandalone: true, selector: "core-header", outputs: { filterRequested: "filterRequested", createRequested: "createRequested", globalActionTriggered: "globalActionTriggered" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (headerService.getIsVisible()()) {\n <div class=\"c-header\">\n <div class=\"c-header__row\">\n\n <div class=\"c-header__group\">\n\n <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n </div>\n\n <div class=\"c-header__group u-flex\">\n\n @for (element of headerService.getOrderedElements(); track element.type) {\n @if (headerService.isElementVisible(element.type)) {\n \n @switch (element.type) {\n @case (HeaderElementType.GLOBAL_ACTIONS) {\n @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n @if (hasPermission(globalAction)) {\n <core-generic-button \n [config]=\"getGlobalActionButtonConfig(globalAction)\"\n (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.CUSTOM_ACTIONS) {\n @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n @if (isCustomActionVisible(customAction)) {\n <core-generic-button \n [config]=\"getCustomActionButtonConfig(customAction)\"\n (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.FILTER) {\n <core-generic-button \n [config]=\"getFilterButtonConfig()\"\n (buttonClick)=\"onFilterButtonClick()\">\n </core-generic-button>\n }\n \n @case (HeaderElementType.CREATE) {\n <core-generic-button \n [config]=\"getCreateButtonConfig()\"\n (buttonClick)=\"onCreateButtonClick()\">\n </core-generic-button>\n }\n }\n \n }\n }\n\n </div>\n\n </div>\n\n <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n {{ getHeaderText() }}\n </p>\n\n @if (\n headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n headerService.getCustomTemplate()() &&\n !headerService.getHeaderOutside()) {\n <ng-container *ngTemplateOutlet=\"headerService.getCustomTemplate()()\"></ng-container>\n }\n </div>\n @if (\n headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n headerService.getCustomTemplate()() &&\n headerService.getHeaderOutside()\n ) {\n <ng-container *ngTemplateOutlet=\"headerService.getCustomTemplate()()\"></ng-container>\n }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"], dependencies: [{ 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: "ngmodule", type: TranslateModule }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }] });
11915
11935
  }
11916
11936
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderComponent, decorators: [{
11917
11937
  type: Component,
@@ -11919,7 +11939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
11919
11939
  CommonModule,
11920
11940
  TranslateModule,
11921
11941
  GenericButtonComponent
11922
- ], hostDirectives: [CoreHostDirective], template: "<!--\n MODELO:\n <div class=\"o-layout__header c-header\">\n <div class=\"c-header__row\">\n\n <div class=\"c-header__group\">\n\n <h2 class=\"c-header__heading u-heading\">Listado de usuarios</h2>\n <div class=\"c-header__text u-text\"></div>\n\n </div>\n\n <div class=\"c-header__group u-flex\">\n\n <button class=\"c-icon-btn\"><span class=\"icon-excel\"></span></button>\n <button class=\"c-icon-btn\"><span class=\"icon-filter\"></span></button>\n <button class=\"c-btn\"><span class=\"icon-add\"></span> Agregar</button>\n\n </div>\n\n </div>\n </div>\n-->\n\n@if (headerService.getIsVisible()()) {\n <div class=\"c-header\">\n <div class=\"c-header__row\">\n\n <div class=\"c-header__group\">\n\n <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n </div>\n\n <div class=\"c-header__group u-flex\">\n\n @for (element of headerService.getOrderedElements(); track element.type) {\n @if (headerService.isElementVisible(element.type)) {\n \n @switch (element.type) {\n @case (HeaderElementType.GLOBAL_ACTIONS) {\n @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n @if (hasPermission(globalAction)) {\n <core-generic-button \n [config]=\"getGlobalActionButtonConfig(globalAction)\"\n (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.CUSTOM_ACTIONS) {\n @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n @if (isCustomActionVisible(customAction)) {\n <core-generic-button \n [config]=\"getCustomActionButtonConfig(customAction)\"\n (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.FILTER) {\n <core-generic-button \n [config]=\"getFilterButtonConfig()\"\n (buttonClick)=\"onFilterButtonClick()\">\n </core-generic-button>\n }\n \n @case (HeaderElementType.CREATE) {\n <core-generic-button \n [config]=\"getCreateButtonConfig()\"\n (buttonClick)=\"onCreateButtonClick()\">\n </core-generic-button>\n }\n }\n \n }\n }\n\n </div>\n\n </div>\n\n <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n {{ getHeaderText() }}\n </p>\n\n @if (headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && headerService.getCustomTemplate()()) {\n <ng-container *ngTemplateOutlet=\"headerService.getCustomTemplate()()\"></ng-container>\n }\n </div>\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"] }]
11942
+ ], hostDirectives: [CoreHostDirective], template: "@if (headerService.getIsVisible()()) {\n <div class=\"c-header\">\n <div class=\"c-header__row\">\n\n <div class=\"c-header__group\">\n\n <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n </div>\n\n <div class=\"c-header__group u-flex\">\n\n @for (element of headerService.getOrderedElements(); track element.type) {\n @if (headerService.isElementVisible(element.type)) {\n \n @switch (element.type) {\n @case (HeaderElementType.GLOBAL_ACTIONS) {\n @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n @if (hasPermission(globalAction)) {\n <core-generic-button \n [config]=\"getGlobalActionButtonConfig(globalAction)\"\n (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.CUSTOM_ACTIONS) {\n @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n @if (isCustomActionVisible(customAction)) {\n <core-generic-button \n [config]=\"getCustomActionButtonConfig(customAction)\"\n (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n </core-generic-button>\n }\n }\n }\n \n @case (HeaderElementType.FILTER) {\n <core-generic-button \n [config]=\"getFilterButtonConfig()\"\n (buttonClick)=\"onFilterButtonClick()\">\n </core-generic-button>\n }\n \n @case (HeaderElementType.CREATE) {\n <core-generic-button \n [config]=\"getCreateButtonConfig()\"\n (buttonClick)=\"onCreateButtonClick()\">\n </core-generic-button>\n }\n }\n \n }\n }\n\n </div>\n\n </div>\n\n <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n {{ getHeaderText() }}\n </p>\n\n @if (\n headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n headerService.getCustomTemplate()() &&\n !headerService.getHeaderOutside()) {\n <ng-container *ngTemplateOutlet=\"headerService.getCustomTemplate()()\"></ng-container>\n }\n </div>\n @if (\n headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n headerService.getCustomTemplate()() &&\n headerService.getHeaderOutside()\n ) {\n <ng-container *ngTemplateOutlet=\"headerService.getCustomTemplate()()\"></ng-container>\n }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"] }]
11923
11943
  }], ctorParameters: () => [] });
11924
11944
 
11925
11945
  var PermissionsActions;
@@ -11996,11 +12016,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
11996
12016
  // Este archivo es generado automáticamente por scripts/update-version.js
11997
12017
  // No edites manualmente este archivo
11998
12018
  const VERSION = {
11999
- full: '2.12.19',
12019
+ full: '2.12.21',
12000
12020
  major: 2,
12001
12021
  minor: 12,
12002
- patch: 19,
12003
- timestamp: '2025-09-09T12:48:52.457Z',
12022
+ patch: 21,
12023
+ timestamp: '2025-09-09T16:24:40.194Z',
12004
12024
  buildDate: '9/9/2025'
12005
12025
  };
12006
12026
 
@@ -12590,6 +12610,7 @@ class LayoutComponent {
12590
12610
  layoutStateService = inject(LayoutStateService);
12591
12611
  sidebarMobileModalService = inject(SidebarMobileModalService);
12592
12612
  templateRegistry = inject(SidebarTemplateRegistryService);
12613
+ headerService = inject(HeaderService);
12593
12614
  SidebarVisibility = SidebarVisibility;
12594
12615
  ModalMode = ModalMode;
12595
12616
  SidebarMobileType = SidebarMobileType;
@@ -12684,6 +12705,11 @@ class LayoutComponent {
12684
12705
  toggleSidebar() {
12685
12706
  this.mainNavService.toggleSidebarState();
12686
12707
  }
12708
+ getHeaderClasses() {
12709
+ const baseClass = 'o-layout__header';
12710
+ const customClass = this.headerService.getGlobalCustomClass()();
12711
+ return customClass ? `${baseClass} ${customClass}` : baseClass;
12712
+ }
12687
12713
  onFilterRequested() {
12688
12714
  const event = new CustomEvent('filterRequested');
12689
12715
  window.dispatchEvent(event);
@@ -12746,7 +12772,7 @@ class LayoutComponent {
12746
12772
  this.onLogout.emit();
12747
12773
  }
12748
12774
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12749
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n class=\"o-layout__header\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
12775
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n [class]=\"getHeaderClasses()\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
12750
12776
  }
12751
12777
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
12752
12778
  type: Component,
@@ -12759,7 +12785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
12759
12785
  GenericModalComponent,
12760
12786
  ImageModalComponent,
12761
12787
  SidebarCustomModalComponent
12762
- ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n class=\"o-layout__header\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->" }]
12788
+ ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n [class]=\"getHeaderClasses()\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->" }]
12763
12789
  }], propDecorators: { onResize: [{
12764
12790
  type: HostListener,
12765
12791
  args: ['window:resize', ['$event']]