@solcre-org/core-ui 2.18.0 → 2.18.1
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.
|
@@ -851,3 +851,52 @@
|
|
|
851
851
|
font-size: 0.875rem;
|
|
852
852
|
padding: 0 12px;
|
|
853
853
|
}
|
|
854
|
+
|
|
855
|
+
/* Calendar event status styles */
|
|
856
|
+
.c-bookings-grid__month-event[data-status="pending"] {
|
|
857
|
+
background-image: repeating-linear-gradient(
|
|
858
|
+
45deg,
|
|
859
|
+
rgba(255, 255, 255, 0.4),
|
|
860
|
+
rgba(255, 255, 255, 0.4) 4px,
|
|
861
|
+
rgba(245, 158, 11, 0.1) 4px,
|
|
862
|
+
rgba(245, 158, 11, 0.1) 8px
|
|
863
|
+
);
|
|
864
|
+
border: 1px solid rgba(245, 158, 11, 0.2);
|
|
865
|
+
border-left: 3px solid #f59e0b; /* Amber-500 */
|
|
866
|
+
color: #78350f; /* Amber-900 */
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.c-bookings-grid__month-event[data-status="pending_cancellation"] {
|
|
870
|
+
background-image: repeating-linear-gradient(
|
|
871
|
+
-45deg,
|
|
872
|
+
rgba(255, 255, 255, 0.4),
|
|
873
|
+
rgba(255, 255, 255, 0.4) 4px,
|
|
874
|
+
rgba(239, 68, 68, 0.1) 4px,
|
|
875
|
+
rgba(239, 68, 68, 0.1) 8px
|
|
876
|
+
);
|
|
877
|
+
border: 1px dotted #ef4444;
|
|
878
|
+
border-left: 3px solid #ef4444; /* Red-500 */
|
|
879
|
+
color: #7f1d1d; /* Red-900 */
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
.c-bookings-grid__month-event[data-status="approved"] {
|
|
883
|
+
background-color: #dcfce7; /* Green-100 */
|
|
884
|
+
border-left: 3px solid #22c55e; /* Green-500 */
|
|
885
|
+
color: #14532d; /* Green-900 */
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
.c-bookings-grid__month-event[data-status="rejected"] {
|
|
889
|
+
opacity: 0.7;
|
|
890
|
+
text-decoration: line-through;
|
|
891
|
+
background-color: #f3f4f6; /* Gray-100 */
|
|
892
|
+
border-left: 3px solid #ef4444; /* Red-500 */
|
|
893
|
+
color: #374151; /* Gray-700 */
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.c-bookings-grid__month-event[data-status="cancelled"] {
|
|
897
|
+
opacity: 0.6;
|
|
898
|
+
text-decoration: line-through;
|
|
899
|
+
background-color: #f3f4f6;
|
|
900
|
+
border: 1px solid #e5e7eb;
|
|
901
|
+
color: #9ca3af;
|
|
902
|
+
}
|
|
@@ -3821,11 +3821,11 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
3821
3821
|
this.hasValue.set(false);
|
|
3822
3822
|
}
|
|
3823
3823
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3824
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n
|
|
3824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n\n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <div\n class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n >\n <ng-select\n [items]=\"field().options ?? []\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n [readonly]=\"isReadonly()\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"\n isPlaceholderVisible() ? (field().placeholder ?? '' | translate) : ''\n \"\n >\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-notfound-tmp>\n <span class=\"ng-select-notfound\">{{\n \"modal.field.serverSelect.noResults\" | translate\n }}</span>\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}.ng-dropdown-panel{width:auto!important}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px;z-index:0}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}.c-entry-input--ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled .ng-select-container{background-color:var(--color-neutral-100, #f5f5f5);cursor:not-allowed}::ng-deep .ng-select.disabled .ng-select-container .ng-value-container .ng-input input{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
3825
3825
|
}
|
|
3826
3826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
3827
3827
|
type: Component,
|
|
3828
|
-
args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n
|
|
3828
|
+
args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n\n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <div\n class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n >\n <ng-select\n [items]=\"field().options ?? []\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n [readonly]=\"isReadonly()\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"\n isPlaceholderVisible() ? (field().placeholder ?? '' | translate) : ''\n \"\n >\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-notfound-tmp>\n <span class=\"ng-select-notfound\">{{\n \"modal.field.serverSelect.noResults\" | translate\n }}</span>\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}.ng-dropdown-panel{width:auto!important}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px;z-index:0}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}.c-entry-input--ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled .ng-select-container{background-color:var(--color-neutral-100, #f5f5f5);cursor:not-allowed}::ng-deep .ng-select.disabled .ng-select-container .ng-value-container .ng-input input{cursor:not-allowed}\n"] }]
|
|
3829
3829
|
}], ctorParameters: () => [], propDecorators: { ngSelect: [{
|
|
3830
3830
|
type: ViewChild,
|
|
3831
3831
|
args: [NgSelectComponent]
|
|
@@ -16655,11 +16655,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
16655
16655
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
16656
16656
|
// No edites manualmente este archivo
|
|
16657
16657
|
const VERSION = {
|
|
16658
|
-
full: '2.18.
|
|
16658
|
+
full: '2.18.1',
|
|
16659
16659
|
major: 2,
|
|
16660
16660
|
minor: 18,
|
|
16661
|
-
patch:
|
|
16662
|
-
timestamp: '2025-12-
|
|
16661
|
+
patch: 1,
|
|
16662
|
+
timestamp: '2025-12-29T16:27:07.896Z',
|
|
16663
16663
|
buildDate: '29/12/2025'
|
|
16664
16664
|
};
|
|
16665
16665
|
|
|
@@ -16686,6 +16686,7 @@ class MainNavComponent {
|
|
|
16686
16686
|
collapsedLogo = input('');
|
|
16687
16687
|
expandedLogo = input('');
|
|
16688
16688
|
onLogout = output();
|
|
16689
|
+
onNavItemAction = output();
|
|
16689
16690
|
constructor() { }
|
|
16690
16691
|
get userConfig() {
|
|
16691
16692
|
return this.navConfig().userInfo;
|
|
@@ -16921,6 +16922,26 @@ class MainNavComponent {
|
|
|
16921
16922
|
}
|
|
16922
16923
|
return true;
|
|
16923
16924
|
}
|
|
16925
|
+
onNavItemClick(item, event) {
|
|
16926
|
+
if (item.disabled) {
|
|
16927
|
+
event?.preventDefault();
|
|
16928
|
+
return;
|
|
16929
|
+
}
|
|
16930
|
+
if (item.customAction) {
|
|
16931
|
+
event?.preventDefault();
|
|
16932
|
+
item.customAction();
|
|
16933
|
+
this.onNavItemAction.emit(item);
|
|
16934
|
+
if (this.isMobile && this.isBottomNavOpen) {
|
|
16935
|
+
this.closeMobileNav();
|
|
16936
|
+
}
|
|
16937
|
+
}
|
|
16938
|
+
else if (item.path) {
|
|
16939
|
+
this.router.navigate([item.path]);
|
|
16940
|
+
}
|
|
16941
|
+
}
|
|
16942
|
+
hasCustomAction(item) {
|
|
16943
|
+
return typeof item.customAction === 'function';
|
|
16944
|
+
}
|
|
16924
16945
|
logout() {
|
|
16925
16946
|
document.body.classList.remove('nav-expanded', 'bottom-nav-open', 'bottom-nav-closing');
|
|
16926
16947
|
document.documentElement.classList.remove('nav-expanded');
|
|
@@ -17027,11 +17048,11 @@ class MainNavComponent {
|
|
|
17027
17048
|
});
|
|
17028
17049
|
}
|
|
17029
17050
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17030
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", 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 } }, outputs: { onLogout: "onLogout" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n\n <!-- Toggle btn -->\n <button (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img class=\"c-mn-brand__iso\" \n [src]=\"getCollapsedLogoSrc()\" \n [width]=\"getCollapsedLogoSettings().width\" \n [height]=\"getCollapsedLogoSettings().height\" \n [alt]=\"getCollapsedLogoSettings().alt\">\n }\n @if(getExpandedLogoSrc()) {\n <img class=\"c-mn-brand__logo\" \n [src]=\"getExpandedLogoSrc()\" \n [width]=\"getExpandedLogoSettings().width\" \n [height]=\"getExpandedLogoSettings().height\" \n [alt]=\"getExpandedLogoSettings().alt\">\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <div class=\"c-mn-user__short c-mn-user__nav-close\">\n <span>{{ getUserInitials() }}</span>\n </div>\n <div class=\"c-mn-user__nav-open\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ (userConfig?.greetingKey ?? '') | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else {\n Bienvenido/a,\n }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ (userConfig?.nameKey ?? '') | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n >\n \n <button class=\"c-mn-nav__link\"\n [ngClass]=\"{'is-active': isParentActive(item)}\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\">\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let child of item.children; let j = index\">\n <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n <li class=\"c-mn-nav__subitem\">\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n [ngClass]=\"{'is-disabled': child.disabled}\"\n [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n \n <li class=\"c-mn-nav__subitem\"\n [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button class=\"c-mn-nav__sublink\"\n [ngClass]=\"{'is-active': isParentActive(child)}\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let subItem of child.children\">\n <li class=\"c-mn-nav__subitem\"\n *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n >\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n\n </ul>\n </div>\n </li>\n </ng-template>\n\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (item.label | translate) : ''\" \n [ngClass]=\"{'is-disabled': item.disabled}\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </li>\n </ng-template>\n\n\n </ng-container>\n </ng-container>\n </ng-template>\n \n <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n </ul>\n </nav> <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ 'sidebar.logout' | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">\n v{{ appVersion().full }}\n </li>\n }\n </ul>\n </nav>\n\n </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
17051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", 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 } }, outputs: { onLogout: "onLogout", onNavItemAction: "onNavItemAction" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n <!-- Toggle btn -->\n <button\n (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"\n isCollapsed\n ? ('Expandir navegaci\u00F3n' | translate)\n : ('Colapsar navegaci\u00F3n' | translate)\n \"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img\n class=\"c-mn-brand__iso\"\n [src]=\"getCollapsedLogoSrc()\"\n [width]=\"getCollapsedLogoSettings().width\"\n [height]=\"getCollapsedLogoSettings().height\"\n [alt]=\"getCollapsedLogoSettings().alt\"\n />\n } @if(getExpandedLogoSrc()) {\n <img\n class=\"c-mn-brand__logo\"\n [src]=\"getExpandedLogoSrc()\"\n [width]=\"getExpandedLogoSettings().width\"\n [height]=\"getExpandedLogoSettings().height\"\n [alt]=\"getExpandedLogoSettings().alt\"\n />\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <div class=\"c-mn-user__short c-mn-user__nav-close\">\n <span>{{ getUserInitials() }}</span>\n </div>\n <div class=\"c-mn-user__nav-open\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ userConfig?.greetingKey ?? \"\" | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else { Bienvenido/a, }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ userConfig?.nameKey ?? \"\" | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngIf=\"\n hasPermission(item) &&\n !item.hidden &&\n (!item.children || hasVisibleChildren(item))\n \"\n >\n <li\n class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{\n 'is-expanded': isSectionExpanded(item.label, level)\n }\"\n *ngIf=\"\n item.children && hasVisibleChildren(item);\n else singleLink\n \"\n >\n <button\n class=\"c-mn-nav__link\"\n [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\"\n >\n <span\n class=\"c-mn-nav__icon\"\n [ngClass]=\"item.icon | coreIconCompat\"\n ></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n <ng-container\n *ngFor=\"let child of item.children; let j = index\"\n >\n <ng-container\n *ngIf=\"\n hasPermission(child) &&\n !child.hidden &&\n (!child.children || hasVisibleChildren(child))\n \"\n >\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n <li class=\"c-mn-nav__subitem\">\n <button\n class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\"\n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n [title]=\"\n isCollapsed ? (child.label | translate) : ''\n \"\n [ngClass]=\"{ 'is-disabled': child.disabled }\"\n [style.pointer-events]=\"\n child.disabled ? 'none' : 'auto'\n \"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n <li\n class=\"c-mn-nav__subitem\"\n [ngClass]=\"{\n 'submenu-open':\n isSectionExpanded(child.label, level + 1) &&\n !isCollapsed\n }\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button\n class=\"c-mn-nav__sublink\"\n [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"\n isCollapsed ? (child.label | translate) : ''\n \"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n <ng-container\n *ngFor=\"let subItem of child.children\"\n >\n <li\n class=\"c-mn-nav__subitem\"\n *ngIf=\"\n hasPermission(subItem) && !subItem.hidden\n \"\n >\n <button\n class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n </ul>\n </div>\n </li>\n </ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n <!-- Nav item with custom action (no routing) -->\n <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n <button\n class=\"c-mn-nav__link\"\n (click)=\"onNavItemClick(item, $event)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\"\n [ngClass]=\"{ 'is-disabled': item.disabled }\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span\n class=\"c-mn-nav__icon\"\n [ngClass]=\"item.icon | coreIconCompat\"\n ></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </ng-container>\n\n <!-- Nav item with router link (default behavior) -->\n <ng-template #routeLink>\n <button\n class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\"\n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\"\n [ngClass]=\"{ 'is-disabled': item.disabled }\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span\n class=\"c-mn-nav__icon\"\n [ngClass]=\"item.icon | coreIconCompat\"\n ></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </ng-template>\n </li>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n menuItems;\n context: { items: navItems(), level: 0 }\n \"\n ></ng-container>\n </ul>\n </nav>\n <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button\n class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ \"sidebar.logout\" | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n }\n </ul>\n </nav>\n </div>\n <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
17031
17052
|
}
|
|
17032
17053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, decorators: [{
|
|
17033
17054
|
type: Component,
|
|
17034
|
-
args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n\n <!-- Toggle btn -->\n <button (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img class=\"c-mn-brand__iso\" \n [src]=\"getCollapsedLogoSrc()\" \n [width]=\"getCollapsedLogoSettings().width\" \n [height]=\"getCollapsedLogoSettings().height\" \n [alt]=\"getCollapsedLogoSettings().alt\">\n }\n @if(getExpandedLogoSrc()) {\n <img class=\"c-mn-brand__logo\" \n [src]=\"getExpandedLogoSrc()\" \n [width]=\"getExpandedLogoSettings().width\" \n [height]=\"getExpandedLogoSettings().height\" \n [alt]=\"getExpandedLogoSettings().alt\">\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <div class=\"c-mn-user__short c-mn-user__nav-close\">\n <span>{{ getUserInitials() }}</span>\n </div>\n <div class=\"c-mn-user__nav-open\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ (userConfig?.greetingKey ?? '') | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else {\n Bienvenido/a,\n }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ (userConfig?.nameKey ?? '') | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n >\n \n <button class=\"c-mn-nav__link\"\n [ngClass]=\"{'is-active': isParentActive(item)}\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\">\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let child of item.children; let j = index\">\n <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n <li class=\"c-mn-nav__subitem\">\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n [ngClass]=\"{'is-disabled': child.disabled}\"\n [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n \n <li class=\"c-mn-nav__subitem\"\n [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button class=\"c-mn-nav__sublink\"\n [ngClass]=\"{'is-active': isParentActive(child)}\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let subItem of child.children\">\n <li class=\"c-mn-nav__subitem\"\n *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n >\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n\n </ul>\n </div>\n </li>\n </ng-template>\n\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (item.label | translate) : ''\" \n [ngClass]=\"{'is-disabled': item.disabled}\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </li>\n </ng-template>\n\n\n </ng-container>\n </ng-container>\n </ng-template>\n \n <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n </ul>\n </nav> <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ 'sidebar.logout' | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">\n v{{ appVersion().full }}\n </li>\n }\n </ul>\n </nav>\n\n </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n" }]
|
|
17055
|
+
args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n <!-- Toggle btn -->\n <button\n (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"\n isCollapsed\n ? ('Expandir navegaci\u00F3n' | translate)\n : ('Colapsar navegaci\u00F3n' | translate)\n \"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img\n class=\"c-mn-brand__iso\"\n [src]=\"getCollapsedLogoSrc()\"\n [width]=\"getCollapsedLogoSettings().width\"\n [height]=\"getCollapsedLogoSettings().height\"\n [alt]=\"getCollapsedLogoSettings().alt\"\n />\n } @if(getExpandedLogoSrc()) {\n <img\n class=\"c-mn-brand__logo\"\n [src]=\"getExpandedLogoSrc()\"\n [width]=\"getExpandedLogoSettings().width\"\n [height]=\"getExpandedLogoSettings().height\"\n [alt]=\"getExpandedLogoSettings().alt\"\n />\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <div class=\"c-mn-user__short c-mn-user__nav-close\">\n <span>{{ getUserInitials() }}</span>\n </div>\n <div class=\"c-mn-user__nav-open\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ userConfig?.greetingKey ?? \"\" | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else { Bienvenido/a, }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ userConfig?.nameKey ?? \"\" | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngIf=\"\n hasPermission(item) &&\n !item.hidden &&\n (!item.children || hasVisibleChildren(item))\n \"\n >\n <li\n class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{\n 'is-expanded': isSectionExpanded(item.label, level)\n }\"\n *ngIf=\"\n item.children && hasVisibleChildren(item);\n else singleLink\n \"\n >\n <button\n class=\"c-mn-nav__link\"\n [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\"\n >\n <span\n class=\"c-mn-nav__icon\"\n [ngClass]=\"item.icon | coreIconCompat\"\n ></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n <ng-container\n *ngFor=\"let child of item.children; let j = index\"\n >\n <ng-container\n *ngIf=\"\n hasPermission(child) &&\n !child.hidden &&\n (!child.children || hasVisibleChildren(child))\n \"\n >\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n <li class=\"c-mn-nav__subitem\">\n <button\n class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\"\n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n [title]=\"\n isCollapsed ? (child.label | translate) : ''\n \"\n [ngClass]=\"{ 'is-disabled': child.disabled }\"\n [style.pointer-events]=\"\n child.disabled ? 'none' : 'auto'\n \"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n <li\n class=\"c-mn-nav__subitem\"\n [ngClass]=\"{\n 'submenu-open':\n isSectionExpanded(child.label, level + 1) &&\n !isCollapsed\n }\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button\n class=\"c-mn-nav__sublink\"\n [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"\n isCollapsed ? (child.label | translate) : ''\n \"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n <ng-container\n *ngFor=\"let subItem of child.children\"\n >\n <li\n class=\"c-mn-nav__subitem\"\n *ngIf=\"\n hasPermission(subItem) && !subItem.hidden\n \"\n >\n <button\n class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n </ul>\n </div>\n </li>\n </ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n <!-- Nav item with custom action (no routing) -->\n <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n <button\n class=\"c-mn-nav__link\"\n (click)=\"onNavItemClick(item, $event)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\"\n [ngClass]=\"{ 'is-disabled': item.disabled }\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span\n class=\"c-mn-nav__icon\"\n [ngClass]=\"item.icon | coreIconCompat\"\n ></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </ng-container>\n\n <!-- Nav item with router link (default behavior) -->\n <ng-template #routeLink>\n <button\n class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\"\n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\"\n [ngClass]=\"{ 'is-disabled': item.disabled }\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span\n class=\"c-mn-nav__icon\"\n [ngClass]=\"item.icon | coreIconCompat\"\n ></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </ng-template>\n </li>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n menuItems;\n context: { items: navItems(), level: 0 }\n \"\n ></ng-container>\n </ul>\n </nav>\n <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button\n class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ \"sidebar.logout\" | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n }\n </ul>\n </nav>\n </div>\n <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n" }]
|
|
17035
17056
|
}], ctorParameters: () => [] });
|
|
17036
17057
|
|
|
17037
17058
|
class LayoutStateService {
|
|
@@ -18308,7 +18329,7 @@ class LayoutComponent {
|
|
|
18308
18329
|
this.onLogout.emit();
|
|
18309
18330
|
}
|
|
18310
18331
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18311
|
-
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 }, mobileHeaderConfig: { classPropertyName: "mobileHeaderConfig", publicName: "mobileHeaderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onMobileRefresh: "onMobileRefresh", onMobileFilter: "onMobileFilter" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mainNavComponent", first: true, predicate: MainNavComponent, descendants: true }], 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(shouldShowMobileHeader() && mobileHeaderConfig()) {\n <core-mobile-header\n class=\"o-layout__header c-header-mobile\"\n [config]=\"mobileHeaderConfig()!\"\n (menuClick)=\"onMobileMenuClick()\"\n (refreshClick)=\"onMobileRefreshClick()\"\n (filterClick)=\"onMobileFilterClick()\">\n </core-mobile-header>\n }\n\n @if(layoutStateService.isHeaderVisible$() | async) {\n @if(!shouldShowMobileHeader()) {\n <core-header\n [class]=\"getHeaderClasses()\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\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<!-- Fixed Actions (Mobile) -->\n<core-generic-fixed-actions class=\"c-fixed-actions c-fixed-actions--right\"/>\n\n<!-- Fixed Actions Mobile Modal -->\n<core-fixed-actions-mobile-modal />\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<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-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: "component", type: MobileHeaderComponent, selector: "core-mobile-header", inputs: ["config"], outputs: ["menuClick", "refreshClick", "filterClick"] }, { 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", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }, { kind: "component", type: GenericFixedActionsComponent, selector: "core-generic-fixed-actions", inputs: ["externalActions", "tableId"] }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
|
|
18332
|
+
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 }, mobileHeaderConfig: { classPropertyName: "mobileHeaderConfig", publicName: "mobileHeaderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onMobileRefresh: "onMobileRefresh", onMobileFilter: "onMobileFilter" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mainNavComponent", first: true, predicate: MainNavComponent, descendants: true }], 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(shouldShowMobileHeader() && mobileHeaderConfig()) {\n <core-mobile-header\n class=\"o-layout__header c-header-mobile\"\n [config]=\"mobileHeaderConfig()!\"\n (menuClick)=\"onMobileMenuClick()\"\n (refreshClick)=\"onMobileRefreshClick()\"\n (filterClick)=\"onMobileFilterClick()\">\n </core-mobile-header>\n }\n\n @if(layoutStateService.isHeaderVisible$() | async) {\n @if(!shouldShowMobileHeader()) {\n <core-header\n [class]=\"getHeaderClasses()\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\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<!-- Fixed Actions (Mobile) -->\n<core-generic-fixed-actions class=\"c-fixed-actions c-fixed-actions--right\"/>\n\n<!-- Fixed Actions Mobile Modal -->\n<core-fixed-actions-mobile-modal />\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<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-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", "onNavItemAction"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "component", type: MobileHeaderComponent, selector: "core-mobile-header", inputs: ["config"], outputs: ["menuClick", "refreshClick", "filterClick"] }, { 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", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }, { kind: "component", type: GenericFixedActionsComponent, selector: "core-generic-fixed-actions", inputs: ["externalActions", "tableId"] }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
|
|
18312
18333
|
}
|
|
18313
18334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
18314
18335
|
type: Component,
|
|
@@ -21714,7 +21735,7 @@ class GenericSchedulerComponent {
|
|
|
21714
21735
|
return `${weekday}\n${dayNum}`;
|
|
21715
21736
|
}
|
|
21716
21737
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSchedulerComponent, isStandalone: true, selector: "core-generic-scheduler", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showTimeColumn: { classPropertyName: "showTimeColumn", publicName: "showTimeColumn", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySlotLabel: { classPropertyName: "emptySlotLabel", publicName: "emptySlotLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledSlotLabel: { classPropertyName: "disabledSlotLabel", publicName: "disabledSlotLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay", previousWeek: "previousWeek", nextWeek: "nextWeek", previousMonth: "previousMonth", nextMonth: "nextMonth", viewModeChange: "viewModeChange" }, host: { properties: { "class.c-bookings-grid--weekly": "viewMode() === \"week\"", "style.--cols": "columns().length" }, classAttribute: "c-bookings-grid c-bookings-card" }, ngImport: i0, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n {{ todayLabel() }}\n </button>\n\n <div class=\"c-bookings-header__date\">\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-left\"\n [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n (click)=\"onPrevious()\"\n ></button>\n <span>{{ formattedDate() }}</span>\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-right\"\n [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n (click)=\"onNext()\"\n ></button>\n </div>\n\n <div class=\"c-bookings-header__view-toggle\">\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'day'\"\n (click)=\"setViewMode('day')\"\n >\n {{ dayLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'week'\"\n (click)=\"setViewMode('week')\"\n >\n {{ weekLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'month'\"\n (click)=\"setViewMode('month')\"\n >\n {{ monthLabel() }}\n </button>\n </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper\"\n [style.--cols]=\"columns().length\"\n style=\"position: relative\"\n>\n @if (isToday() && currentTimePosition() !== null) {\n <div\n class=\"c-bookings-grid__current-time-line\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (column of columns(); track column.id) {\n <div class=\"c-bookings-grid__col\">\n <div class=\"c-bookings-grid__top\">\n <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n >\n {{ disabledSlotLabel() }}\n </button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onSlotClick(column.id, slot)\"\n >\n {{ emptySlotLabel() }}\n </button>\n } } @if (shouldShowEvent(column.id, slot)) { @let event =\n getEventForSlot(column.id, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onEventClick(event, column)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n\n @if (event.canCancel) {\n <button\n class=\"c-bookings-grid__link c-link--underlined\"\n (click)=\"$event.stopPropagation()\"\n >\n <span class=\"icon-cross-thin\"></span>\n Cancelar\n </button>\n } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n <div class=\"c-bookings-grid__quick-actions\">\n @if (event.canApprove) {\n <button\n class=\"c-icon-btn--fill context:success icon-check\"\n title=\"Aprobar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n } @if (event.canReject) {\n <button\n class=\"c-icon-btn--fill context:error icon-cross\"\n title=\"Rechazar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n }\n </div>\n }\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n [style.--cols]=\"7\"\n style=\"position: relative\"\n>\n @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n <div\n class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n [style.--day-index]=\"currentTimeDayIndex()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (day of weekDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__col\"\n [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n >\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n <span\n class=\"c-bookings-grid__day-number\"\n [class.is-today]=\"day.isToday\"\n >{{ day.dayNumber }}</span\n >\n </div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n (isSlotDisabledForDay(day.date, slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n ></button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onWeekSlotClick(day.date, slot)\"\n ></button>\n } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n getEventForDaySlot(day.date, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onWeekEventClick(event, day.date)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n <!-- Header Row -->\n <div class=\"c-bookings-grid__header-row\">\n @for (day of monthDays().slice(0, 7); track day.dayName) {\n <div class=\"c-bookings-grid__header-cell\">\n {{ day.dayName }}\n </div>\n }\n </div>\n\n <!-- Days Grid -->\n <div class=\"c-bookings-grid__month-grid\">\n @for (day of monthDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__month-cell\"\n [class.is-today]=\"day.isToday\"\n [class.is-weekend]=\"day.isWeekend\"\n [class.is-other-month]=\"\n day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n \"\n [class.is-disabled]=\"isDayDisabled(day.date)\"\n (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n >\n <div class=\"c-bookings-grid__month-day-number\">\n {{ day.dayNumber }}\n </div>\n\n <div class=\"c-bookings-grid__month-events\">\n @let dayEvents = getEventsForDay(day.date); @for (event of\n dayEvents.slice(0, 3); track event.id) {\n <div\n class=\"c-bookings-grid__month-event\"\n [attr.data-type]=\"event.type\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n } @if (dayEvents.length > 3) {\n <div\n class=\"c-bookings-grid__more-events\"\n (click)=\"openDayPopover(day.date, $event)\"\n >\n {{ dayEvents.length - 3 }} m\u00E1s\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (expandedDay()) {\n <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n <div class=\"c-bookings-grid__popover-header\">\n <div class=\"c-bookings-grid__popover-date\">\n <span class=\"c-bookings-grid__popover-weekday\">{{\n expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n }}</span>\n <span class=\"c-bookings-grid__popover-daynum\">{{\n expandedDay() | date : \"d\" : \"UTC\"\n }}</span>\n </div>\n <button\n class=\"c-bookings-grid__popover-close\"\n (click)=\"closeDayPopover()\"\n >\n <span class=\"icon-cross\"></span>\n </button>\n </div>\n <div class=\"c-bookings-grid__popover-content\">\n @for (event of getExpandedDayEvents(); track event.id) {\n <div\n class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n [attr.data-type]=\"event.type\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"onMonthEventClick(event, expandedDay()!)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
|
|
21738
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSchedulerComponent, isStandalone: true, selector: "core-generic-scheduler", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showTimeColumn: { classPropertyName: "showTimeColumn", publicName: "showTimeColumn", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySlotLabel: { classPropertyName: "emptySlotLabel", publicName: "emptySlotLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledSlotLabel: { classPropertyName: "disabledSlotLabel", publicName: "disabledSlotLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay", previousWeek: "previousWeek", nextWeek: "nextWeek", previousMonth: "previousMonth", nextMonth: "nextMonth", viewModeChange: "viewModeChange" }, host: { properties: { "class.c-bookings-grid--weekly": "viewMode() === \"week\"", "style.--cols": "columns().length" }, classAttribute: "c-bookings-grid c-bookings-card" }, ngImport: i0, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n {{ todayLabel() }}\n </button>\n\n <div class=\"c-bookings-header__date\">\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-left\"\n [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n (click)=\"onPrevious()\"\n ></button>\n <span>{{ formattedDate() }}</span>\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-right\"\n [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n (click)=\"onNext()\"\n ></button>\n </div>\n\n <div class=\"c-bookings-header__view-toggle\">\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'day'\"\n (click)=\"setViewMode('day')\"\n >\n {{ dayLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'week'\"\n (click)=\"setViewMode('week')\"\n >\n {{ weekLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'month'\"\n (click)=\"setViewMode('month')\"\n >\n {{ monthLabel() }}\n </button>\n </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper\"\n [style.--cols]=\"columns().length\"\n style=\"position: relative\"\n>\n @if (isToday() && currentTimePosition() !== null) {\n <div\n class=\"c-bookings-grid__current-time-line\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (column of columns(); track column.id) {\n <div class=\"c-bookings-grid__col\">\n <div class=\"c-bookings-grid__top\">\n <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n >\n {{ disabledSlotLabel() }}\n </button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onSlotClick(column.id, slot)\"\n >\n {{ emptySlotLabel() }}\n </button>\n } } @if (shouldShowEvent(column.id, slot)) { @let event =\n getEventForSlot(column.id, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onEventClick(event, column)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n\n @if (event.canCancel) {\n <button\n class=\"c-bookings-grid__link c-link--underlined\"\n (click)=\"$event.stopPropagation()\"\n >\n <span class=\"icon-cross-thin\"></span>\n Cancelar\n </button>\n } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n <div class=\"c-bookings-grid__quick-actions\">\n @if (event.canApprove) {\n <button\n class=\"c-icon-btn--fill context:success icon-check\"\n title=\"Aprobar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n } @if (event.canReject) {\n <button\n class=\"c-icon-btn--fill context:error icon-cross\"\n title=\"Rechazar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n }\n </div>\n }\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n [style.--cols]=\"7\"\n style=\"position: relative\"\n>\n @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n <div\n class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n [style.--day-index]=\"currentTimeDayIndex()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (day of weekDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__col\"\n [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n >\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n <span\n class=\"c-bookings-grid__day-number\"\n [class.is-today]=\"day.isToday\"\n >{{ day.dayNumber }}</span\n >\n </div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n (isSlotDisabledForDay(day.date, slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n ></button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onWeekSlotClick(day.date, slot)\"\n ></button>\n } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n getEventForDaySlot(day.date, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onWeekEventClick(event, day.date)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n <!-- Header Row -->\n <div class=\"c-bookings-grid__header-row\">\n @for (day of monthDays().slice(0, 7); track day.dayName) {\n <div class=\"c-bookings-grid__header-cell\">\n {{ day.dayName }}\n </div>\n }\n </div>\n\n <!-- Days Grid -->\n <div class=\"c-bookings-grid__month-grid\">\n @for (day of monthDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__month-cell\"\n [class.is-today]=\"day.isToday\"\n [class.is-weekend]=\"day.isWeekend\"\n [class.is-other-month]=\"\n day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n \"\n [class.is-disabled]=\"isDayDisabled(day.date)\"\n (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n >\n <div class=\"c-bookings-grid__month-day-number\">\n {{ day.dayNumber }}\n </div>\n\n <div class=\"c-bookings-grid__month-events\">\n @let dayEvents = getEventsForDay(day.date); @for (event of\n dayEvents.slice(0, 3); track event.id) {\n <div\n class=\"c-bookings-grid__month-event\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n } @if (dayEvents.length > 3) {\n <div\n class=\"c-bookings-grid__more-events\"\n (click)=\"openDayPopover(day.date, $event)\"\n >\n {{ dayEvents.length - 3 }} m\u00E1s\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (expandedDay()) {\n <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n <div class=\"c-bookings-grid__popover-header\">\n <div class=\"c-bookings-grid__popover-date\">\n <span class=\"c-bookings-grid__popover-weekday\">{{\n expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n }}</span>\n <span class=\"c-bookings-grid__popover-daynum\">{{\n expandedDay() | date : \"d\" : \"UTC\"\n }}</span>\n </div>\n <button\n class=\"c-bookings-grid__popover-close\"\n (click)=\"closeDayPopover()\"\n >\n <span class=\"icon-cross\"></span>\n </button>\n </div>\n <div class=\"c-bookings-grid__popover-content\">\n @for (event of getExpandedDayEvents(); track event.id) {\n <div\n class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"onMonthEventClick(event, expandedDay()!)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
|
|
21718
21739
|
}
|
|
21719
21740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, decorators: [{
|
|
21720
21741
|
type: Component,
|
|
@@ -21722,7 +21743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
21722
21743
|
'class': 'c-bookings-grid c-bookings-card',
|
|
21723
21744
|
'[class.c-bookings-grid--weekly]': 'viewMode() === "week"',
|
|
21724
21745
|
'[style.--cols]': 'columns().length'
|
|
21725
|
-
}, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n {{ todayLabel() }}\n </button>\n\n <div class=\"c-bookings-header__date\">\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-left\"\n [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n (click)=\"onPrevious()\"\n ></button>\n <span>{{ formattedDate() }}</span>\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-right\"\n [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n (click)=\"onNext()\"\n ></button>\n </div>\n\n <div class=\"c-bookings-header__view-toggle\">\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'day'\"\n (click)=\"setViewMode('day')\"\n >\n {{ dayLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'week'\"\n (click)=\"setViewMode('week')\"\n >\n {{ weekLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'month'\"\n (click)=\"setViewMode('month')\"\n >\n {{ monthLabel() }}\n </button>\n </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper\"\n [style.--cols]=\"columns().length\"\n style=\"position: relative\"\n>\n @if (isToday() && currentTimePosition() !== null) {\n <div\n class=\"c-bookings-grid__current-time-line\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (column of columns(); track column.id) {\n <div class=\"c-bookings-grid__col\">\n <div class=\"c-bookings-grid__top\">\n <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n >\n {{ disabledSlotLabel() }}\n </button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onSlotClick(column.id, slot)\"\n >\n {{ emptySlotLabel() }}\n </button>\n } } @if (shouldShowEvent(column.id, slot)) { @let event =\n getEventForSlot(column.id, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onEventClick(event, column)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n\n @if (event.canCancel) {\n <button\n class=\"c-bookings-grid__link c-link--underlined\"\n (click)=\"$event.stopPropagation()\"\n >\n <span class=\"icon-cross-thin\"></span>\n Cancelar\n </button>\n } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n <div class=\"c-bookings-grid__quick-actions\">\n @if (event.canApprove) {\n <button\n class=\"c-icon-btn--fill context:success icon-check\"\n title=\"Aprobar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n } @if (event.canReject) {\n <button\n class=\"c-icon-btn--fill context:error icon-cross\"\n title=\"Rechazar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n }\n </div>\n }\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n [style.--cols]=\"7\"\n style=\"position: relative\"\n>\n @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n <div\n class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n [style.--day-index]=\"currentTimeDayIndex()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (day of weekDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__col\"\n [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n >\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n <span\n class=\"c-bookings-grid__day-number\"\n [class.is-today]=\"day.isToday\"\n >{{ day.dayNumber }}</span\n >\n </div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n (isSlotDisabledForDay(day.date, slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n ></button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onWeekSlotClick(day.date, slot)\"\n ></button>\n } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n getEventForDaySlot(day.date, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onWeekEventClick(event, day.date)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n <!-- Header Row -->\n <div class=\"c-bookings-grid__header-row\">\n @for (day of monthDays().slice(0, 7); track day.dayName) {\n <div class=\"c-bookings-grid__header-cell\">\n {{ day.dayName }}\n </div>\n }\n </div>\n\n <!-- Days Grid -->\n <div class=\"c-bookings-grid__month-grid\">\n @for (day of monthDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__month-cell\"\n [class.is-today]=\"day.isToday\"\n [class.is-weekend]=\"day.isWeekend\"\n [class.is-other-month]=\"\n day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n \"\n [class.is-disabled]=\"isDayDisabled(day.date)\"\n (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n >\n <div class=\"c-bookings-grid__month-day-number\">\n {{ day.dayNumber }}\n </div>\n\n <div class=\"c-bookings-grid__month-events\">\n @let dayEvents = getEventsForDay(day.date); @for (event of\n dayEvents.slice(0, 3); track event.id) {\n <div\n class=\"c-bookings-grid__month-event\"\n [attr.data-type]=\"event.type\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n } @if (dayEvents.length > 3) {\n <div\n class=\"c-bookings-grid__more-events\"\n (click)=\"openDayPopover(day.date, $event)\"\n >\n {{ dayEvents.length - 3 }} m\u00E1s\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (expandedDay()) {\n <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n <div class=\"c-bookings-grid__popover-header\">\n <div class=\"c-bookings-grid__popover-date\">\n <span class=\"c-bookings-grid__popover-weekday\">{{\n expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n }}</span>\n <span class=\"c-bookings-grid__popover-daynum\">{{\n expandedDay() | date : \"d\" : \"UTC\"\n }}</span>\n </div>\n <button\n class=\"c-bookings-grid__popover-close\"\n (click)=\"closeDayPopover()\"\n >\n <span class=\"icon-cross\"></span>\n </button>\n </div>\n <div class=\"c-bookings-grid__popover-content\">\n @for (event of getExpandedDayEvents(); track event.id) {\n <div\n class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n [attr.data-type]=\"event.type\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"onMonthEventClick(event, expandedDay()!)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"] }]
|
|
21746
|
+
}, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n {{ todayLabel() }}\n </button>\n\n <div class=\"c-bookings-header__date\">\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-left\"\n [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n (click)=\"onPrevious()\"\n ></button>\n <span>{{ formattedDate() }}</span>\n <button\n class=\"c-bookings-header__date-arrow icon-arrow-right\"\n [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n (click)=\"onNext()\"\n ></button>\n </div>\n\n <div class=\"c-bookings-header__view-toggle\">\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'day'\"\n (click)=\"setViewMode('day')\"\n >\n {{ dayLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'week'\"\n (click)=\"setViewMode('week')\"\n >\n {{ weekLabel() }}\n </button>\n <button\n class=\"c-bookings-header__view-btn\"\n [class.is-active]=\"viewMode() === 'month'\"\n (click)=\"setViewMode('month')\"\n >\n {{ monthLabel() }}\n </button>\n </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper\"\n [style.--cols]=\"columns().length\"\n style=\"position: relative\"\n>\n @if (isToday() && currentTimePosition() !== null) {\n <div\n class=\"c-bookings-grid__current-time-line\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (column of columns(); track column.id) {\n <div class=\"c-bookings-grid__col\">\n <div class=\"c-bookings-grid__top\">\n <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n >\n {{ disabledSlotLabel() }}\n </button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onSlotClick(column.id, slot)\"\n >\n {{ emptySlotLabel() }}\n </button>\n } } @if (shouldShowEvent(column.id, slot)) { @let event =\n getEventForSlot(column.id, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onEventClick(event, column)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n\n @if (event.canCancel) {\n <button\n class=\"c-bookings-grid__link c-link--underlined\"\n (click)=\"$event.stopPropagation()\"\n >\n <span class=\"icon-cross-thin\"></span>\n Cancelar\n </button>\n } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n <div class=\"c-bookings-grid__quick-actions\">\n @if (event.canApprove) {\n <button\n class=\"c-icon-btn--fill context:success icon-check\"\n title=\"Aprobar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n } @if (event.canReject) {\n <button\n class=\"c-icon-btn--fill context:error icon-cross\"\n title=\"Rechazar\"\n (click)=\"$event.stopPropagation()\"\n ></button>\n }\n </div>\n }\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n [style.--cols]=\"7\"\n style=\"position: relative\"\n>\n @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n <div\n class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n [style.--time-position-rem]=\"currentTimePosition()\"\n [style.--day-index]=\"currentTimeDayIndex()\"\n ></div>\n } @if (showTimeColumn()) {\n <div class=\"c-bookings-grid__times\">\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (slot.displayTime) {\n <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n }\n </div>\n }\n </div>\n } @for (day of weekDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__col\"\n [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n >\n <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n <span\n class=\"c-bookings-grid__day-number\"\n [class.is-today]=\"day.isToday\"\n >{{ day.dayNumber }}</span\n >\n </div>\n </div>\n\n @for (slot of timeSlots(); track slot.time) {\n <div class=\"c-bookings-grid__row\">\n @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n (isSlotDisabledForDay(day.date, slot)) {\n <button\n class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n disabled\n [title]=\"disabledSlotLabel()\"\n ></button>\n } @else {\n <button\n class=\"c-bookings-grid__slot\"\n [title]=\"emptySlotLabel()\"\n (click)=\"onWeekSlotClick(day.date, slot)\"\n ></button>\n } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n getEventForDaySlot(day.date, slot); @if (event) {\n <div\n [class]=\"getEventClasses(event)\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.--rows]=\"getEventRowSpan(event)\"\n (mouseenter)=\"onEventHover($event, event)\"\n (mouseleave)=\"onEventLeave()\"\n (click)=\"onWeekEventClick(event, day.date)\"\n >\n <p class=\"c-bookings-grid__title\">\n {{ event.subtitle || event.title }}\n </p>\n <p class=\"c-bookings-grid__text\">\n {{ event.startTime }} - {{ event.endTime }}\n </p>\n </div>\n } }\n </div>\n }\n </div>\n }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n <!-- Header Row -->\n <div class=\"c-bookings-grid__header-row\">\n @for (day of monthDays().slice(0, 7); track day.dayName) {\n <div class=\"c-bookings-grid__header-cell\">\n {{ day.dayName }}\n </div>\n }\n </div>\n\n <!-- Days Grid -->\n <div class=\"c-bookings-grid__month-grid\">\n @for (day of monthDays(); track day.date.getTime()) {\n <div\n class=\"c-bookings-grid__month-cell\"\n [class.is-today]=\"day.isToday\"\n [class.is-weekend]=\"day.isWeekend\"\n [class.is-other-month]=\"\n day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n \"\n [class.is-disabled]=\"isDayDisabled(day.date)\"\n (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n >\n <div class=\"c-bookings-grid__month-day-number\">\n {{ day.dayNumber }}\n </div>\n\n <div class=\"c-bookings-grid__month-events\">\n @let dayEvents = getEventsForDay(day.date); @for (event of\n dayEvents.slice(0, 3); track event.id) {\n <div\n class=\"c-bookings-grid__month-event\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n } @if (dayEvents.length > 3) {\n <div\n class=\"c-bookings-grid__more-events\"\n (click)=\"openDayPopover(day.date, $event)\"\n >\n {{ dayEvents.length - 3 }} m\u00E1s\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (expandedDay()) {\n <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n <div class=\"c-bookings-grid__popover-header\">\n <div class=\"c-bookings-grid__popover-date\">\n <span class=\"c-bookings-grid__popover-weekday\">{{\n expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n }}</span>\n <span class=\"c-bookings-grid__popover-daynum\">{{\n expandedDay() | date : \"d\" : \"UTC\"\n }}</span>\n </div>\n <button\n class=\"c-bookings-grid__popover-close\"\n (click)=\"closeDayPopover()\"\n >\n <span class=\"icon-cross\"></span>\n </button>\n </div>\n <div class=\"c-bookings-grid__popover-content\">\n @for (event of getExpandedDayEvents(); track event.id) {\n <div\n class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n [attr.data-type]=\"event.type\"\n [attr.data-status]=\"event.status\"\n [style.background-color]=\"event.metadata?.['color']\"\n [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n (click)=\"onMonthEventClick(event, expandedDay()!)\"\n >\n <span class=\"c-bookings-grid__month-event-title\">{{\n event.title\n }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"] }]
|
|
21726
21747
|
}] });
|
|
21727
21748
|
|
|
21728
21749
|
class CacheBustingInterceptor {
|