sidesys-generic-ui 2.4.7 → 2.4.9
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.
- package/esm2022/lib/animation/animation.component.mjs +2 -2
- package/esm2022/lib/badge/s-badge.component.mjs +7 -5
- package/esm2022/lib/button/components/button/s-button.component.mjs +4 -4
- package/esm2022/lib/input/components/input/s-input.component.mjs +14 -8
- package/esm2022/lib/navbar/components/icon-menu/s-icon-menu.component.mjs +1 -1
- package/esm2022/lib/select/select-multiple/s-select-multiple.component.mjs +10 -3
- package/esm2022/lib/sidebar/s-sidebar.component.mjs +1 -1
- package/esm2022/lib/table-double/table-double.component.mjs +42 -18
- package/esm2022/lib/table-double-complete/table-double-complete.component.mjs +161 -39
- package/esm2022/lib/table-double-complete/table-double-complete.model.mjs +1 -1
- package/esm2022/lib/tabs/s-tabs.component.mjs +1 -1
- package/esm2022/lib/theme/s-theme.component.mjs +2 -2
- package/esm2022/lib/toolbar-top/toolbar-top.component.mjs +6 -3
- package/fesm2022/sidesys-generic-ui.mjs +241 -78
- package/fesm2022/sidesys-generic-ui.mjs.map +1 -1
- package/lib/badge/s-badge.component.d.ts +3 -2
- package/lib/button/components/button/s-button.component.d.ts +1 -1
- package/lib/input/components/input/s-input.component.d.ts +4 -5
- package/lib/select/select-multiple/s-select-multiple.component.d.ts +3 -2
- package/lib/table-double/table-double.component.d.ts +6 -5
- package/lib/table-double-complete/table-double-complete.component.d.ts +25 -9
- package/lib/table-double-complete/table-double-complete.model.d.ts +11 -5
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, Input, ViewChild, HostListener, Directive, EventEmitter, forwardRef, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, input, Injectable, inject, signal, effect, Pipe, output, computed } from '@angular/core';
|
|
2
|
+
import { Component, ViewEncapsulation, Input, ViewChild, HostListener, Directive, EventEmitter, forwardRef, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, input, Injectable, inject, signal, effect, Pipe, output, computed, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/router';
|
|
@@ -449,14 +449,14 @@ class SButtonComponent {
|
|
|
449
449
|
this.id = `s-button-${this.type}`;
|
|
450
450
|
// Por decision de ICEI
|
|
451
451
|
// Cuando el size es SM el round debe ser sm , para el resto el round debe ser md
|
|
452
|
-
this.roundedPrivate = this.size === 'sm' ? 'sm' : 'md';
|
|
452
|
+
this.roundedPrivate = (this.size === 'sm' || this.size === 'xs') ? 'sm' : 'md';
|
|
453
453
|
}
|
|
454
454
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
455
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SButtonComponent, selector: "s-button", inputs: { disabled: "disabled", id: "id", pill: "pill", size: "size", invert: "invert", type: "type", loading: "loading", position: "position", theme: "theme", active: "active" }, ngImport: i0, template: "<button\n class=\"s-button \ns-button--{{ size }}\ns-button--{{ type }}\n\n{{ theme ? 's-button--' + theme + '--' + type : '' }}\n{{ roundedPrivate ? 's-button--round-' + roundedPrivate : '' }} \n{{ position ? 's-button--position-' + position : '' }} \n{{ loading ? 's-button--loading' : '' }}\n{{ pill ? 's-button--pill' : '' }}\n{{ pill ? 's-button--pill--' + size : '' }}\n{{ invert ? invert : '' }}\n{{ active ? 's-button--' + type + '--active' : '' }}\n{{ active ? 's-button--' + theme + '--' + type + '--active' : '' }}\n\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tabindex]=\"0\">\n <ng-content></ng-content>\n</button>\n", styles: ["s-button{width:fit-content}.s-button{line-height:1.875rem;letter-spacing:.01rem;font-size:1rem;padding:.6rem 1.85rem;width:auto;cursor:pointer;border:0rem;margin:.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:Roboto,Arial,sans-serif;transition:.2s}.s-button--primary{background:var(--primary-600);color:var(--neutrals-1200);border:0rem}.s-button--primary:hover{background:var(--primary-700);color:var(--neutrals-1200);border:0rem}.s-button--primary:active,.s-button--primary--active{background:var(--primary-800);color:var(--neutrals-1200);border:0rem}.s-button--primary:disabled{background:var(--primary-200);color:var(--primary-400);border:0rem}.s-button--secondary{background-color:var(--primary-100);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:hover{background-color:var(--primary-200);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:active,.s-button--secondary--active{background-color:var(--primary-300);color:var(--primary-1000);border:.063rem solid var(--primary-600)}.s-button--secondary:disabled{background-color:var(--neutrals-1100);color:var(--neutrals-700);border:.063rem solid var(--neutrals-800)}.s-button--tertiary{background-color:unset;color:var(--primary-600)}.s-button--tertiary:hover{background-color:unset;color:var(--primary-800)}.s-button--tertiary:active,.s-button--tertiary--active{background-color:unset;color:var(--neutral-1000)}.s-button--tertiary:disabled{background-color:unset;color:var(--neutrals-700)}.s-button--red--primary{background-color:var(--red-600)}.s-button--red--primary:hover{background-color:var(--red-700)}.s-button--red--primary:active,.s-button--red--primary--active{background-color:var(--red-800)}.s-button--red--primary:disabled{background-color:var(--red-200);color:var(--red-400)}.s-button--red--secondary{background-color:var(--red-100);border:.063rem solid var(--red-600);color:var(--secondary-600)}.s-button--red--secondary:hover{background-color:var(--red-200);border:.063rem solid var(--red-600)}.s-button--red--secondary:active,.s-button--red--secondary--active{background-color:var(--red-300);border:.063rem solid var(--red-600)}.s-button--red--secondary:disabled{background-color:var(--red-100);border:.063rem solid var(--red-300);color:var(--neutrals-700)}.s-button--red--tertiary{color:var(--red-600)}.s-button--red--tertiary:hover{color:var(--red-700)}.s-button--red--tertiary:active,.s-button--red--tertiary--active{color:var(--red-900)}.s-button--red--tertiary:disabled{color:var(--red-200)}.s-button--yellow--primary{color:var(--neutrals-1200);background-color:var(--yellow-600)}.s-button--yellow--primary:hover{background-color:var(--yellow-700)}.s-button--yellow--primary:active,.s-button--yellow--primary--active{background-color:var(--yellow-800)}.s-button--yellow--primary:disabled{color:var(--yellow-400);background-color:var(--yellow-200)}.s-button--yellow--secondary{background-color:var(--yellow-100);border:.063rem solid var(--yellow-600);color:var(--primary-900)}.s-button--yellow--secondary:hover{background-color:var(--yellow-200);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:active,.s-button--yellow--secondary--active{background-color:var(--yellow-300);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:disabled{background-color:var(--yellow-200);border:.063rem solid var(--yellow-300);color:var(--neutrals-700)}.s-button--yellow--tertiary{color:var(--yellow-600)}.s-button--yellow--tertiary:hover{color:var(--yellow-700)}.s-button--yellow--tertiary:active,.s-button--yellow--tertiary--active{color:var(--yellow-800)}.s-button--yellow--tertiary:disabled{color:var(--yellow-200)}.s-button--green--primary{background-color:var(--green-600)}.s-button--green--primary:hover{background-color:var(--green-700)}.s-button--green--primary:active,.s-button--green--primary--active{background-color:var(--green-800)}.s-button--green--primary:disabled{background-color:var(--green-200);color:var(--green-400)}.s-button--green--secondary{background-color:var(--green-100);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:hover{background-color:var(--green-200);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:active,.s-button--green--secondary--active{background-color:var(--green-300);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:disabled{background-color:var(--green-100);border:.063rem solid var(--green-300);color:var(--neutrals-700)}.s-button--green--tertiary{color:var(--green-600)}.s-button--green--tertiary:hover{color:var(--green-700)}.s-button--green--tertiary:active,.s-button--green--tertiary--active{color:var(--green-800)}.s-button--green--tertiary:disabled{color:var(--green-200)}.s-button--xl{font-size:1.125rem;padding:0rem 2rem;line-height:3.625rem}.s-button--xl s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xl s-icon-mat span{font-size:2rem!important}.s-button--lg{font-size:1rem;padding:0rem 2rem;line-height:3.125rem}.s-button--lg s-icon-mat{display:flex;padding:0rem .25rem}.s-button--lg s-icon-mat span{font-size:1.6rem!important}.s-button--md{font-size:.875rem;padding:0rem 1.5rem;line-height:2.375rem}.s-button--md s-icon-mat{display:flex;padding:0rem .25rem}.s-button--md s-icon-mat span{font-size:1.3rem!important}.s-button--sm{font-size:.75rem;padding:0rem .75rem;line-height:1.
|
|
455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SButtonComponent, selector: "s-button", inputs: { disabled: "disabled", id: "id", pill: "pill", size: "size", invert: "invert", type: "type", loading: "loading", position: "position", theme: "theme", active: "active" }, ngImport: i0, template: "<button\n class=\"s-button \ns-button--{{ size }}\ns-button--{{ type }}\n\n{{ theme ? 's-button--' + theme + '--' + type : '' }}\n{{ roundedPrivate ? 's-button--round-' + roundedPrivate : '' }} \n{{ position ? 's-button--position-' + position : '' }} \n{{ loading ? 's-button--loading' : '' }}\n{{ pill ? 's-button--pill' : '' }}\n{{ pill ? 's-button--pill--' + size : '' }}\n{{ invert ? invert : '' }}\n{{ active ? 's-button--' + type + '--active' : '' }}\n{{ active ? 's-button--' + theme + '--' + type + '--active' : '' }}\n\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tabindex]=\"0\">\n <ng-content></ng-content>\n</button>\n", styles: ["s-button{width:fit-content}.s-button{line-height:1.875rem;letter-spacing:.01rem;font-size:1rem;padding:.6rem 1.85rem;width:auto;cursor:pointer;border:0rem;margin:.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:Roboto,Arial,sans-serif;transition:.2s}.s-button--primary{background:var(--primary-600);color:var(--neutrals-1200);border:0rem}.s-button--primary:hover{background:var(--primary-700);color:var(--neutrals-1200);border:0rem}.s-button--primary:active,.s-button--primary--active{background:var(--primary-800);color:var(--neutrals-1200);border:0rem}.s-button--primary:disabled{background:var(--primary-200);color:var(--primary-400);border:0rem}.s-button--secondary{background-color:var(--primary-100);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:hover{background-color:var(--primary-200);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:active,.s-button--secondary--active{background-color:var(--primary-300);color:var(--primary-1000);border:.063rem solid var(--primary-600)}.s-button--secondary:disabled{background-color:var(--neutrals-1100);color:var(--neutrals-700);border:.063rem solid var(--neutrals-800)}.s-button--tertiary{background-color:unset;color:var(--primary-600)}.s-button--tertiary:hover{background-color:unset;color:var(--primary-800)}.s-button--tertiary:active,.s-button--tertiary--active{background-color:unset;color:var(--neutral-1000)}.s-button--tertiary:disabled{background-color:unset;color:var(--neutrals-700)}.s-button--red--primary{background-color:var(--red-600)}.s-button--red--primary:hover{background-color:var(--red-700)}.s-button--red--primary:active,.s-button--red--primary--active{background-color:var(--red-800)}.s-button--red--primary:disabled{background-color:var(--red-200);color:var(--red-400)}.s-button--red--secondary{background-color:var(--red-100);border:.063rem solid var(--red-600);color:var(--secondary-600)}.s-button--red--secondary:hover{background-color:var(--red-200);border:.063rem solid var(--red-600)}.s-button--red--secondary:active,.s-button--red--secondary--active{background-color:var(--red-300);border:.063rem solid var(--red-600)}.s-button--red--secondary:disabled{background-color:var(--red-100);border:.063rem solid var(--red-300);color:var(--neutrals-700)}.s-button--red--tertiary{color:var(--red-600)}.s-button--red--tertiary:hover{color:var(--red-700)}.s-button--red--tertiary:active,.s-button--red--tertiary--active{color:var(--red-900)}.s-button--red--tertiary:disabled{color:var(--red-200)}.s-button--yellow--primary{color:var(--neutrals-1200);background-color:var(--yellow-600)}.s-button--yellow--primary:hover{background-color:var(--yellow-700)}.s-button--yellow--primary:active,.s-button--yellow--primary--active{background-color:var(--yellow-800)}.s-button--yellow--primary:disabled{color:var(--yellow-400);background-color:var(--yellow-200)}.s-button--yellow--secondary{background-color:var(--yellow-100);border:.063rem solid var(--yellow-600);color:var(--primary-900)}.s-button--yellow--secondary:hover{background-color:var(--yellow-200);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:active,.s-button--yellow--secondary--active{background-color:var(--yellow-300);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:disabled{background-color:var(--yellow-200);border:.063rem solid var(--yellow-300);color:var(--neutrals-700)}.s-button--yellow--tertiary{color:var(--yellow-600)}.s-button--yellow--tertiary:hover{color:var(--yellow-700)}.s-button--yellow--tertiary:active,.s-button--yellow--tertiary--active{color:var(--yellow-800)}.s-button--yellow--tertiary:disabled{color:var(--yellow-200)}.s-button--green--primary{background-color:var(--green-600)}.s-button--green--primary:hover{background-color:var(--green-700)}.s-button--green--primary:active,.s-button--green--primary--active{background-color:var(--green-800)}.s-button--green--primary:disabled{background-color:var(--green-200);color:var(--green-400)}.s-button--green--secondary{background-color:var(--green-100);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:hover{background-color:var(--green-200);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:active,.s-button--green--secondary--active{background-color:var(--green-300);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:disabled{background-color:var(--green-100);border:.063rem solid var(--green-300);color:var(--neutrals-700)}.s-button--green--tertiary{color:var(--green-600)}.s-button--green--tertiary:hover{color:var(--green-700)}.s-button--green--tertiary:active,.s-button--green--tertiary--active{color:var(--green-800)}.s-button--green--tertiary:disabled{color:var(--green-200)}.s-button--xl{font-size:1.125rem;padding:0rem 2rem;line-height:3.625rem}.s-button--xl s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xl s-icon-mat span{font-size:2rem!important}.s-button--lg{font-size:1rem;padding:0rem 2rem;line-height:3.125rem}.s-button--lg s-icon-mat{display:flex;padding:0rem .25rem}.s-button--lg s-icon-mat span{font-size:1.6rem!important}.s-button--md{font-size:.875rem;padding:0rem 1.5rem;line-height:2.375rem}.s-button--md s-icon-mat{display:flex;padding:0rem .25rem}.s-button--md s-icon-mat span{font-size:1.3rem!important}.s-button--sm{font-size:.75rem;padding:0rem .75rem;line-height:1.75rem}.s-button--sm s-icon-mat{display:flex;padding:0rem .313rem}.s-button--sm s-icon-mat span{font-size:1rem!important}.s-button--xs{font-size:.625rem;padding:0rem .5rem;line-height:1.25rem}.s-button--xs s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xs s-icon-mat span{font-size:.875rem!important}.s-button--pill{border-radius:.2rem;padding:.5rem;height:3rem;width:3rem;margin:.04rem}.s-button--pill span{font-size:1.4rem}.s-button--pill label{padding:.7rem;cursor:pointer;margin:0rem}.s-button--pill--xl{padding:.875rem;height:3.75rem;width:3.75rem}.s-button--pill--lg{padding:1.063rem;height:3.25rem;width:3.25rem}.s-button--pill--md{padding:.05rem;height:2.5rem;width:2.5rem}.s-button--pill--sm{padding:.438rem;height:1.75rem;width:1.75rem}.s-button--pill--xs{padding:.25rem;height:1.25rem;width:1.25rem}.s-button.border{border:none!important;height:auto!important;background-color:inherit!important;vertical-align:bottom}.s-button--round-sm{border-radius:.188rem}.s-button--round-md{border-radius:.25rem}.s-button--position-reverse:not(.s-button--pill){flex-direction:row-reverse}.s-button--position-reverse:not(.s-button--pill) s-icon-mat{margin:0rem -.375rem 0rem 0rem}.s-button--position-normal:not(.s-button--pill){flex-direction:row}.s-button--position-normal:not(.s-button--pill) s-icon-mat{margin:0rem 0rem 0rem -.625rem}.s-button--loading{animation:3s linear infinite animationEffect;background-size:200%!important;cursor:wait}.s-button--loading.s-button--primary{background:linear-gradient(90deg,var(--primary-900) 50%,var(--primary-600) 50%)}.s-button--loading.s-button--secondary{background:linear-gradient(90deg,var(--primary-300) 50%,var(--primary-200) 50%)}.s-button--loading.s-button--tertiary{background:linear-gradient(90deg,var(--primary-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--red--primary{background:linear-gradient(90deg,var(--red-900) 50%,var(--red-600) 50%)}.s-button--loading.s-button--red--secondary{background:linear-gradient(90deg,var(--red-300) 50%,var(--red-200) 50%)}.s-button--loading.s-button--red--tertiary{background:linear-gradient(90deg,var(--red-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--green--primary{background:linear-gradient(90deg,var(--green-900) 50%,var(--green-600) 50%)}.s-button--loading.s-button--green--secondary{background:linear-gradient(90deg,var(--green-300) 50%,var(--green-200) 50%)}.s-button--loading.s-button--green--tertiary{background:linear-gradient(90deg,var(--green-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--yellow--primary{background:linear-gradient(90deg,var(--yellow-900) 50%,var(--yellow-600) 50%)}.s-button--loading.s-button--yellow--secondary{background:linear-gradient(90deg,var(--yellow-300) 50%,var(--yellow-200) 50%)}.s-button--loading.s-button--yellow--tertiary{background:linear-gradient(90deg,var(--yellow-100) 50%,rgba(0,0,0,0) 50%)}@keyframes animationEffect{0%{background-position:100%}to{background-position:-100%}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
456
456
|
}
|
|
457
457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SButtonComponent, decorators: [{
|
|
458
458
|
type: Component,
|
|
459
|
-
args: [{ selector: 's-button', encapsulation: ViewEncapsulation.None, template: "<button\n class=\"s-button \ns-button--{{ size }}\ns-button--{{ type }}\n\n{{ theme ? 's-button--' + theme + '--' + type : '' }}\n{{ roundedPrivate ? 's-button--round-' + roundedPrivate : '' }} \n{{ position ? 's-button--position-' + position : '' }} \n{{ loading ? 's-button--loading' : '' }}\n{{ pill ? 's-button--pill' : '' }}\n{{ pill ? 's-button--pill--' + size : '' }}\n{{ invert ? invert : '' }}\n{{ active ? 's-button--' + type + '--active' : '' }}\n{{ active ? 's-button--' + theme + '--' + type + '--active' : '' }}\n\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tabindex]=\"0\">\n <ng-content></ng-content>\n</button>\n", styles: ["s-button{width:fit-content}.s-button{line-height:1.875rem;letter-spacing:.01rem;font-size:1rem;padding:.6rem 1.85rem;width:auto;cursor:pointer;border:0rem;margin:.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:Roboto,Arial,sans-serif;transition:.2s}.s-button--primary{background:var(--primary-600);color:var(--neutrals-1200);border:0rem}.s-button--primary:hover{background:var(--primary-700);color:var(--neutrals-1200);border:0rem}.s-button--primary:active,.s-button--primary--active{background:var(--primary-800);color:var(--neutrals-1200);border:0rem}.s-button--primary:disabled{background:var(--primary-200);color:var(--primary-400);border:0rem}.s-button--secondary{background-color:var(--primary-100);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:hover{background-color:var(--primary-200);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:active,.s-button--secondary--active{background-color:var(--primary-300);color:var(--primary-1000);border:.063rem solid var(--primary-600)}.s-button--secondary:disabled{background-color:var(--neutrals-1100);color:var(--neutrals-700);border:.063rem solid var(--neutrals-800)}.s-button--tertiary{background-color:unset;color:var(--primary-600)}.s-button--tertiary:hover{background-color:unset;color:var(--primary-800)}.s-button--tertiary:active,.s-button--tertiary--active{background-color:unset;color:var(--neutral-1000)}.s-button--tertiary:disabled{background-color:unset;color:var(--neutrals-700)}.s-button--red--primary{background-color:var(--red-600)}.s-button--red--primary:hover{background-color:var(--red-700)}.s-button--red--primary:active,.s-button--red--primary--active{background-color:var(--red-800)}.s-button--red--primary:disabled{background-color:var(--red-200);color:var(--red-400)}.s-button--red--secondary{background-color:var(--red-100);border:.063rem solid var(--red-600);color:var(--secondary-600)}.s-button--red--secondary:hover{background-color:var(--red-200);border:.063rem solid var(--red-600)}.s-button--red--secondary:active,.s-button--red--secondary--active{background-color:var(--red-300);border:.063rem solid var(--red-600)}.s-button--red--secondary:disabled{background-color:var(--red-100);border:.063rem solid var(--red-300);color:var(--neutrals-700)}.s-button--red--tertiary{color:var(--red-600)}.s-button--red--tertiary:hover{color:var(--red-700)}.s-button--red--tertiary:active,.s-button--red--tertiary--active{color:var(--red-900)}.s-button--red--tertiary:disabled{color:var(--red-200)}.s-button--yellow--primary{color:var(--neutrals-1200);background-color:var(--yellow-600)}.s-button--yellow--primary:hover{background-color:var(--yellow-700)}.s-button--yellow--primary:active,.s-button--yellow--primary--active{background-color:var(--yellow-800)}.s-button--yellow--primary:disabled{color:var(--yellow-400);background-color:var(--yellow-200)}.s-button--yellow--secondary{background-color:var(--yellow-100);border:.063rem solid var(--yellow-600);color:var(--primary-900)}.s-button--yellow--secondary:hover{background-color:var(--yellow-200);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:active,.s-button--yellow--secondary--active{background-color:var(--yellow-300);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:disabled{background-color:var(--yellow-200);border:.063rem solid var(--yellow-300);color:var(--neutrals-700)}.s-button--yellow--tertiary{color:var(--yellow-600)}.s-button--yellow--tertiary:hover{color:var(--yellow-700)}.s-button--yellow--tertiary:active,.s-button--yellow--tertiary--active{color:var(--yellow-800)}.s-button--yellow--tertiary:disabled{color:var(--yellow-200)}.s-button--green--primary{background-color:var(--green-600)}.s-button--green--primary:hover{background-color:var(--green-700)}.s-button--green--primary:active,.s-button--green--primary--active{background-color:var(--green-800)}.s-button--green--primary:disabled{background-color:var(--green-200);color:var(--green-400)}.s-button--green--secondary{background-color:var(--green-100);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:hover{background-color:var(--green-200);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:active,.s-button--green--secondary--active{background-color:var(--green-300);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:disabled{background-color:var(--green-100);border:.063rem solid var(--green-300);color:var(--neutrals-700)}.s-button--green--tertiary{color:var(--green-600)}.s-button--green--tertiary:hover{color:var(--green-700)}.s-button--green--tertiary:active,.s-button--green--tertiary--active{color:var(--green-800)}.s-button--green--tertiary:disabled{color:var(--green-200)}.s-button--xl{font-size:1.125rem;padding:0rem 2rem;line-height:3.625rem}.s-button--xl s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xl s-icon-mat span{font-size:2rem!important}.s-button--lg{font-size:1rem;padding:0rem 2rem;line-height:3.125rem}.s-button--lg s-icon-mat{display:flex;padding:0rem .25rem}.s-button--lg s-icon-mat span{font-size:1.6rem!important}.s-button--md{font-size:.875rem;padding:0rem 1.5rem;line-height:2.375rem}.s-button--md s-icon-mat{display:flex;padding:0rem .25rem}.s-button--md s-icon-mat span{font-size:1.3rem!important}.s-button--sm{font-size:.75rem;padding:0rem .75rem;line-height:1.
|
|
459
|
+
args: [{ selector: 's-button', encapsulation: ViewEncapsulation.None, template: "<button\n class=\"s-button \ns-button--{{ size }}\ns-button--{{ type }}\n\n{{ theme ? 's-button--' + theme + '--' + type : '' }}\n{{ roundedPrivate ? 's-button--round-' + roundedPrivate : '' }} \n{{ position ? 's-button--position-' + position : '' }} \n{{ loading ? 's-button--loading' : '' }}\n{{ pill ? 's-button--pill' : '' }}\n{{ pill ? 's-button--pill--' + size : '' }}\n{{ invert ? invert : '' }}\n{{ active ? 's-button--' + type + '--active' : '' }}\n{{ active ? 's-button--' + theme + '--' + type + '--active' : '' }}\n\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tabindex]=\"0\">\n <ng-content></ng-content>\n</button>\n", styles: ["s-button{width:fit-content}.s-button{line-height:1.875rem;letter-spacing:.01rem;font-size:1rem;padding:.6rem 1.85rem;width:auto;cursor:pointer;border:0rem;margin:.1rem;display:inline-flex;align-items:center;justify-content:center;font-family:Roboto,Arial,sans-serif;transition:.2s}.s-button--primary{background:var(--primary-600);color:var(--neutrals-1200);border:0rem}.s-button--primary:hover{background:var(--primary-700);color:var(--neutrals-1200);border:0rem}.s-button--primary:active,.s-button--primary--active{background:var(--primary-800);color:var(--neutrals-1200);border:0rem}.s-button--primary:disabled{background:var(--primary-200);color:var(--primary-400);border:0rem}.s-button--secondary{background-color:var(--primary-100);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:hover{background-color:var(--primary-200);color:var(--primary-900);border:.063rem solid var(--primary-600)}.s-button--secondary:active,.s-button--secondary--active{background-color:var(--primary-300);color:var(--primary-1000);border:.063rem solid var(--primary-600)}.s-button--secondary:disabled{background-color:var(--neutrals-1100);color:var(--neutrals-700);border:.063rem solid var(--neutrals-800)}.s-button--tertiary{background-color:unset;color:var(--primary-600)}.s-button--tertiary:hover{background-color:unset;color:var(--primary-800)}.s-button--tertiary:active,.s-button--tertiary--active{background-color:unset;color:var(--neutral-1000)}.s-button--tertiary:disabled{background-color:unset;color:var(--neutrals-700)}.s-button--red--primary{background-color:var(--red-600)}.s-button--red--primary:hover{background-color:var(--red-700)}.s-button--red--primary:active,.s-button--red--primary--active{background-color:var(--red-800)}.s-button--red--primary:disabled{background-color:var(--red-200);color:var(--red-400)}.s-button--red--secondary{background-color:var(--red-100);border:.063rem solid var(--red-600);color:var(--secondary-600)}.s-button--red--secondary:hover{background-color:var(--red-200);border:.063rem solid var(--red-600)}.s-button--red--secondary:active,.s-button--red--secondary--active{background-color:var(--red-300);border:.063rem solid var(--red-600)}.s-button--red--secondary:disabled{background-color:var(--red-100);border:.063rem solid var(--red-300);color:var(--neutrals-700)}.s-button--red--tertiary{color:var(--red-600)}.s-button--red--tertiary:hover{color:var(--red-700)}.s-button--red--tertiary:active,.s-button--red--tertiary--active{color:var(--red-900)}.s-button--red--tertiary:disabled{color:var(--red-200)}.s-button--yellow--primary{color:var(--neutrals-1200);background-color:var(--yellow-600)}.s-button--yellow--primary:hover{background-color:var(--yellow-700)}.s-button--yellow--primary:active,.s-button--yellow--primary--active{background-color:var(--yellow-800)}.s-button--yellow--primary:disabled{color:var(--yellow-400);background-color:var(--yellow-200)}.s-button--yellow--secondary{background-color:var(--yellow-100);border:.063rem solid var(--yellow-600);color:var(--primary-900)}.s-button--yellow--secondary:hover{background-color:var(--yellow-200);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:active,.s-button--yellow--secondary--active{background-color:var(--yellow-300);border:.063rem solid var(--yellow-600)}.s-button--yellow--secondary:disabled{background-color:var(--yellow-200);border:.063rem solid var(--yellow-300);color:var(--neutrals-700)}.s-button--yellow--tertiary{color:var(--yellow-600)}.s-button--yellow--tertiary:hover{color:var(--yellow-700)}.s-button--yellow--tertiary:active,.s-button--yellow--tertiary--active{color:var(--yellow-800)}.s-button--yellow--tertiary:disabled{color:var(--yellow-200)}.s-button--green--primary{background-color:var(--green-600)}.s-button--green--primary:hover{background-color:var(--green-700)}.s-button--green--primary:active,.s-button--green--primary--active{background-color:var(--green-800)}.s-button--green--primary:disabled{background-color:var(--green-200);color:var(--green-400)}.s-button--green--secondary{background-color:var(--green-100);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:hover{background-color:var(--green-200);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:active,.s-button--green--secondary--active{background-color:var(--green-300);border:.063rem solid var(--green-600);color:var(--secondary-600)}.s-button--green--secondary:disabled{background-color:var(--green-100);border:.063rem solid var(--green-300);color:var(--neutrals-700)}.s-button--green--tertiary{color:var(--green-600)}.s-button--green--tertiary:hover{color:var(--green-700)}.s-button--green--tertiary:active,.s-button--green--tertiary--active{color:var(--green-800)}.s-button--green--tertiary:disabled{color:var(--green-200)}.s-button--xl{font-size:1.125rem;padding:0rem 2rem;line-height:3.625rem}.s-button--xl s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xl s-icon-mat span{font-size:2rem!important}.s-button--lg{font-size:1rem;padding:0rem 2rem;line-height:3.125rem}.s-button--lg s-icon-mat{display:flex;padding:0rem .25rem}.s-button--lg s-icon-mat span{font-size:1.6rem!important}.s-button--md{font-size:.875rem;padding:0rem 1.5rem;line-height:2.375rem}.s-button--md s-icon-mat{display:flex;padding:0rem .25rem}.s-button--md s-icon-mat span{font-size:1.3rem!important}.s-button--sm{font-size:.75rem;padding:0rem .75rem;line-height:1.75rem}.s-button--sm s-icon-mat{display:flex;padding:0rem .313rem}.s-button--sm s-icon-mat span{font-size:1rem!important}.s-button--xs{font-size:.625rem;padding:0rem .5rem;line-height:1.25rem}.s-button--xs s-icon-mat{display:flex;padding:0rem .25rem}.s-button--xs s-icon-mat span{font-size:.875rem!important}.s-button--pill{border-radius:.2rem;padding:.5rem;height:3rem;width:3rem;margin:.04rem}.s-button--pill span{font-size:1.4rem}.s-button--pill label{padding:.7rem;cursor:pointer;margin:0rem}.s-button--pill--xl{padding:.875rem;height:3.75rem;width:3.75rem}.s-button--pill--lg{padding:1.063rem;height:3.25rem;width:3.25rem}.s-button--pill--md{padding:.05rem;height:2.5rem;width:2.5rem}.s-button--pill--sm{padding:.438rem;height:1.75rem;width:1.75rem}.s-button--pill--xs{padding:.25rem;height:1.25rem;width:1.25rem}.s-button.border{border:none!important;height:auto!important;background-color:inherit!important;vertical-align:bottom}.s-button--round-sm{border-radius:.188rem}.s-button--round-md{border-radius:.25rem}.s-button--position-reverse:not(.s-button--pill){flex-direction:row-reverse}.s-button--position-reverse:not(.s-button--pill) s-icon-mat{margin:0rem -.375rem 0rem 0rem}.s-button--position-normal:not(.s-button--pill){flex-direction:row}.s-button--position-normal:not(.s-button--pill) s-icon-mat{margin:0rem 0rem 0rem -.625rem}.s-button--loading{animation:3s linear infinite animationEffect;background-size:200%!important;cursor:wait}.s-button--loading.s-button--primary{background:linear-gradient(90deg,var(--primary-900) 50%,var(--primary-600) 50%)}.s-button--loading.s-button--secondary{background:linear-gradient(90deg,var(--primary-300) 50%,var(--primary-200) 50%)}.s-button--loading.s-button--tertiary{background:linear-gradient(90deg,var(--primary-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--red--primary{background:linear-gradient(90deg,var(--red-900) 50%,var(--red-600) 50%)}.s-button--loading.s-button--red--secondary{background:linear-gradient(90deg,var(--red-300) 50%,var(--red-200) 50%)}.s-button--loading.s-button--red--tertiary{background:linear-gradient(90deg,var(--red-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--green--primary{background:linear-gradient(90deg,var(--green-900) 50%,var(--green-600) 50%)}.s-button--loading.s-button--green--secondary{background:linear-gradient(90deg,var(--green-300) 50%,var(--green-200) 50%)}.s-button--loading.s-button--green--tertiary{background:linear-gradient(90deg,var(--green-100) 50%,rgba(0,0,0,0) 50%)}.s-button--loading.s-button--yellow--primary{background:linear-gradient(90deg,var(--yellow-900) 50%,var(--yellow-600) 50%)}.s-button--loading.s-button--yellow--secondary{background:linear-gradient(90deg,var(--yellow-300) 50%,var(--yellow-200) 50%)}.s-button--loading.s-button--yellow--tertiary{background:linear-gradient(90deg,var(--yellow-100) 50%,rgba(0,0,0,0) 50%)}@keyframes animationEffect{0%{background-position:100%}to{background-position:-100%}}\n"] }]
|
|
460
460
|
}], propDecorators: { disabled: [{
|
|
461
461
|
type: Input
|
|
462
462
|
}], id: [{
|
|
@@ -605,21 +605,23 @@ class SBadgeComponent {
|
|
|
605
605
|
this.id = 's-badge';
|
|
606
606
|
this.type = 'primary';
|
|
607
607
|
this.size = 'sm';
|
|
608
|
-
this.
|
|
608
|
+
this.disabled = false;
|
|
609
609
|
}
|
|
610
610
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SBadgeComponent, selector: "s-badge", inputs: { id: "id", type: "type", size: "size",
|
|
611
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SBadgeComponent, selector: "s-badge", inputs: { id: "id", type: "type", size: "size", disabled: "disabled", icon: "icon" }, ngImport: i0, template: "<span class=\"s-badge s-badge--{{ type }} {{ size ? 's-badge--size-' + size : '' }} {{ disabled ? 's-badge--disabled' : '' }}\" [id]=\"id\">\n <s-icon-mat *ngIf=\"icon\">{{ icon }}</s-icon-mat>\n <ng-content></ng-content>\n</span>\n", styles: ["s-badge{display:inline-flex;cursor:default;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}s-badge s-icon-mat{display:inline-flex;margin-left:-.063rem;margin-right:.25rem}.s-badge{padding:.23rem .47rem;line-height:normal;border-radius:1.125rem;width:max-content;display:inline-flex;align-items:center;margin:.125rem;font-size:.77rem;letter-spacing:.02rem;color:var(--neutrals-1200);background-color:var(--primary-600)}.s-badge--secondary{background-color:var(--secondary-600)}.s-badge--green{background-color:var(--green-600)}.s-badge--red{background-color:var(--red-600)}.s-badge--yellow{background-color:var(--yellow-600)}.s-badge--disabled.s-badge--primary{background-color:var(--primary-100)!important;color:var(--primary-400)!important}.s-badge--disabled.s-badge--secondary{background-color:var(--secondary-100)!important;color:var(--secondary-200)!important}.s-badge--disabled.s-badge--red{background-color:var(--red-200)!important;color:var(--red-400)!important}.s-badge--disabled.s-badge--yellow{background-color:var(--yellow-200)!important;color:var(--yellow-400)!important}.s-badge--disabled.s-badge--green{background-color:var(--green-200)!important;color:var(--green-400)!important}.s-badge--size-xs{font-size:.53rem;padding:.09rem .26rem}.s-badge--size-xs s-icon-mat span{font-size:.65rem!important}.s-badge--size-sm s-icon-mat span{font-size:.85rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
612
612
|
}
|
|
613
613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SBadgeComponent, decorators: [{
|
|
614
614
|
type: Component,
|
|
615
|
-
args: [{ selector: 's-badge', encapsulation: ViewEncapsulation.None, template: "<span class=\"s-badge s-badge--{{ type }} {{ size ? 's-badge--size-' + size : '' }}\" [id]=\"id\">\n <s-icon-mat *ngIf=\"
|
|
615
|
+
args: [{ selector: 's-badge', encapsulation: ViewEncapsulation.None, template: "<span class=\"s-badge s-badge--{{ type }} {{ size ? 's-badge--size-' + size : '' }} {{ disabled ? 's-badge--disabled' : '' }}\" [id]=\"id\">\n <s-icon-mat *ngIf=\"icon\">{{ icon }}</s-icon-mat>\n <ng-content></ng-content>\n</span>\n", styles: ["s-badge{display:inline-flex;cursor:default;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}s-badge s-icon-mat{display:inline-flex;margin-left:-.063rem;margin-right:.25rem}.s-badge{padding:.23rem .47rem;line-height:normal;border-radius:1.125rem;width:max-content;display:inline-flex;align-items:center;margin:.125rem;font-size:.77rem;letter-spacing:.02rem;color:var(--neutrals-1200);background-color:var(--primary-600)}.s-badge--secondary{background-color:var(--secondary-600)}.s-badge--green{background-color:var(--green-600)}.s-badge--red{background-color:var(--red-600)}.s-badge--yellow{background-color:var(--yellow-600)}.s-badge--disabled.s-badge--primary{background-color:var(--primary-100)!important;color:var(--primary-400)!important}.s-badge--disabled.s-badge--secondary{background-color:var(--secondary-100)!important;color:var(--secondary-200)!important}.s-badge--disabled.s-badge--red{background-color:var(--red-200)!important;color:var(--red-400)!important}.s-badge--disabled.s-badge--yellow{background-color:var(--yellow-200)!important;color:var(--yellow-400)!important}.s-badge--disabled.s-badge--green{background-color:var(--green-200)!important;color:var(--green-400)!important}.s-badge--size-xs{font-size:.53rem;padding:.09rem .26rem}.s-badge--size-xs s-icon-mat span{font-size:.65rem!important}.s-badge--size-sm s-icon-mat span{font-size:.85rem!important}\n"] }]
|
|
616
616
|
}], propDecorators: { id: [{
|
|
617
617
|
type: Input
|
|
618
618
|
}], type: [{
|
|
619
619
|
type: Input
|
|
620
620
|
}], size: [{
|
|
621
621
|
type: Input
|
|
622
|
-
}],
|
|
622
|
+
}], disabled: [{
|
|
623
|
+
type: Input
|
|
624
|
+
}], icon: [{
|
|
623
625
|
type: Input
|
|
624
626
|
}] } });
|
|
625
627
|
|
|
@@ -720,7 +722,7 @@ class SIconMenuComponent {
|
|
|
720
722
|
this.clickInside = false;
|
|
721
723
|
}
|
|
722
724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMenuComponent, selector: "s-icon-menu", inputs: { iconMenu: "iconMenu" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: "<div class=\"s-icon-menu\">\n <ul class=\"s-icon-menu__main-ul\">\n <ng-container *ngFor=\"let item of iconMenu\">\n <li class=\"s-icon-menu__main-ul__li\" [tooltip]=\"titleItem\">\n <s-tooltip position=\"bottom\" #titleItem [title]=\"item.title ?? ''\" ></s-tooltip>\n <ng-container *ngIf=\"item.notification\">\n <a tabindex=\"0\" (keydown.enter)=\"clickSubMenu(item)\" (click)=\"clickSubMenu(item)\" class=\"item-link cursor\">\n <div class=\"item-link__content-badge\" *ngIf=\"item.unread\">\n <div class=\"item-link__content-badge__badge-notification\">\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread > 99\">+99</s-badge>\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread < 99\">{{item.unread}}</s-badge>\n </div>\n </div>\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!item.notification && item.link\">\n <a *ngIf=\"isExternalLink(item.link); else internalLink\"\n [href]=\"item.link\" [target]=\"item.target\" (click)=\"closeSubMenu()\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n <ng-template #internalLink>\n <a routerLink=\"{{item.link}}\" (click)=\"closeSubMenu()\" routerLinkActive=\"active\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-template>\n </ng-container>\n\n <div class=\"s-icon-menu__main-ul__li__dropdown\">\n <div *ngIf=\"item.hideme\" class=\"s-icon-menu__main-ul__li__dropdown__content\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__left\">Notificaciones</div>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__right\">\n <s-icon-mat>mark_email_read</s-icon-mat>\n </div>\n </div>\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <s-notification (clickTitle)=\"_clickTitle($event)\" (clickDelete)=\"_clickDelete($event)\" (clickUnread)=\"_clickUnread($event)\" [item]=\"itemChildren\"></s-notification>\n </ng-container>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__footer\">\n <s-button (click)=\"closeSubMenu()\" routerLink=\"{{item.link? item.link : null}}\" size=\"sm\">Ver todas las notificaciones</s-button>\n </div>\n </div>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n</div>", styles: [".s-icon-menu{text-align:center;margin-right:auto}.s-icon-menu__main-ul{height:3.5rem;display:flex;align-items:center;position:relative;margin-right:.3rem}.s-icon-menu__main-ul__li{margin-left:.5rem;margin-right:.5rem}.s-icon-menu__main-ul__li .item-link{text-decoration:none}.s-icon-menu__main-ul__li .item-link__content-badge{position:relative}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification{position:absolute;top:-.563rem;left:.563rem}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification s-badge{-webkit-user-select:auto;-o-user-select:auto;user-select:auto;cursor:pointer}.s-icon-menu__main-ul__li .item-link__icon span{color:var(--primary-600)}.s-icon-menu__main-ul__li .item-link__icon span:hover{color:var(--primary-700)}.s-icon-menu__main-ul__li .item-link__icon span:active{color:var(--primary-800)}.s-icon-menu__main-ul__li__dropdown{position:relative}.s-icon-menu__main-ul__li__dropdown__content{position:absolute;right:0;z-index:1;min-width:7.5rem;width:max-content}.s-icon-menu__main-ul__li__dropdown__content__notification{width:23.75rem;background-color:var(--neutrals-1100);border-radius:.375rem;box-shadow:0 .75rem 1rem -.25rem var(--blue-alpha-100),0 .25rem .375rem -.125rem var(--blue-alpha-100)}.s-icon-menu__main-ul__li__dropdown__content__notification__header{padding:.438rem 1.375rem .5rem .75rem;height:1.688rem;display:flex;justify-content:space-between;align-items:center}.s-icon-menu__main-ul__li__dropdown__content__notification__header__right s-icon-mat span{color:var(--primary-600);font-size:1rem}.s-icon-menu__main-ul__li__dropdown__content__notification__header__left{font-size:1rem;font-weight:700;color:var(--secondary-600)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer{text-align:center;height:2.5rem;padding-top:.375rem;border-top:.031rem solid var(--neutrals-700)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer s-button button{width:calc(100% - 1.125rem)}.theme-dark .item-link__icon span{color:var(--neutrals-1200)}.theme-dark .item-link__icon span:hover{color:var(--primary-300)}.theme-dark .item-link__icon span:active{color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "id", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position", "id"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "
|
|
725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMenuComponent, selector: "s-icon-menu", inputs: { iconMenu: "iconMenu" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, host: { listeners: { "click": "clicked()", "document:click": "clickedOut()" } }, ngImport: i0, template: "<div class=\"s-icon-menu\">\n <ul class=\"s-icon-menu__main-ul\">\n <ng-container *ngFor=\"let item of iconMenu\">\n <li class=\"s-icon-menu__main-ul__li\" [tooltip]=\"titleItem\">\n <s-tooltip position=\"bottom\" #titleItem [title]=\"item.title ?? ''\" ></s-tooltip>\n <ng-container *ngIf=\"item.notification\">\n <a tabindex=\"0\" (keydown.enter)=\"clickSubMenu(item)\" (click)=\"clickSubMenu(item)\" class=\"item-link cursor\">\n <div class=\"item-link__content-badge\" *ngIf=\"item.unread\">\n <div class=\"item-link__content-badge__badge-notification\">\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread > 99\">+99</s-badge>\n <s-badge size=\"xs\" type=\"red\" *ngIf=\"item.unread < 99\">{{item.unread}}</s-badge>\n </div>\n </div>\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!item.notification && item.link\">\n <a *ngIf=\"isExternalLink(item.link); else internalLink\"\n [href]=\"item.link\" [target]=\"item.target\" (click)=\"closeSubMenu()\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n <ng-template #internalLink>\n <a routerLink=\"{{item.link}}\" (click)=\"closeSubMenu()\" routerLinkActive=\"active\" class=\"item-link\">\n <s-icon-mat class=\"item-link__icon cursor\">{{item.icon}}</s-icon-mat>\n </a>\n </ng-template>\n </ng-container>\n\n <div class=\"s-icon-menu__main-ul__li__dropdown\">\n <div *ngIf=\"item.hideme\" class=\"s-icon-menu__main-ul__li__dropdown__content\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header\">\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__left\">Notificaciones</div>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__header__right\">\n <s-icon-mat>mark_email_read</s-icon-mat>\n </div>\n </div>\n <ng-container *ngFor=\"let itemChildren of item.children\">\n <s-notification (clickTitle)=\"_clickTitle($event)\" (clickDelete)=\"_clickDelete($event)\" (clickUnread)=\"_clickUnread($event)\" [item]=\"itemChildren\"></s-notification>\n </ng-container>\n <div class=\"s-icon-menu__main-ul__li__dropdown__content__notification__footer\">\n <s-button (click)=\"closeSubMenu()\" routerLink=\"{{item.link? item.link : null}}\" size=\"sm\">Ver todas las notificaciones</s-button>\n </div>\n </div>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n</div>", styles: [".s-icon-menu{text-align:center;margin-right:auto}.s-icon-menu__main-ul{height:3.5rem;display:flex;align-items:center;position:relative;margin-right:.3rem}.s-icon-menu__main-ul__li{margin-left:.5rem;margin-right:.5rem}.s-icon-menu__main-ul__li .item-link{text-decoration:none}.s-icon-menu__main-ul__li .item-link__content-badge{position:relative}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification{position:absolute;top:-.563rem;left:.563rem}.s-icon-menu__main-ul__li .item-link__content-badge__badge-notification s-badge{-webkit-user-select:auto;-o-user-select:auto;user-select:auto;cursor:pointer}.s-icon-menu__main-ul__li .item-link__icon span{color:var(--primary-600)}.s-icon-menu__main-ul__li .item-link__icon span:hover{color:var(--primary-700)}.s-icon-menu__main-ul__li .item-link__icon span:active{color:var(--primary-800)}.s-icon-menu__main-ul__li__dropdown{position:relative}.s-icon-menu__main-ul__li__dropdown__content{position:absolute;right:0;z-index:1;min-width:7.5rem;width:max-content}.s-icon-menu__main-ul__li__dropdown__content__notification{width:23.75rem;background-color:var(--neutrals-1100);border-radius:.375rem;box-shadow:0 .75rem 1rem -.25rem var(--blue-alpha-100),0 .25rem .375rem -.125rem var(--blue-alpha-100)}.s-icon-menu__main-ul__li__dropdown__content__notification__header{padding:.438rem 1.375rem .5rem .75rem;height:1.688rem;display:flex;justify-content:space-between;align-items:center}.s-icon-menu__main-ul__li__dropdown__content__notification__header__right s-icon-mat span{color:var(--primary-600);font-size:1rem}.s-icon-menu__main-ul__li__dropdown__content__notification__header__left{font-size:1rem;font-weight:700;color:var(--secondary-600)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer{text-align:center;height:2.5rem;padding-top:.375rem;border-top:.031rem solid var(--neutrals-700)}.s-icon-menu__main-ul__li__dropdown__content__notification__footer s-button button{width:calc(100% - 1.125rem)}.theme-dark .item-link__icon span{color:var(--neutrals-1200)}.theme-dark .item-link__icon span:hover{color:var(--primary-300)}.theme-dark .item-link__icon span:active{color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "id", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position", "id"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "disabled", "icon"] }, { kind: "component", type: SNotificationComponent, selector: "s-notification", inputs: ["item"], outputs: ["clickUnread", "clickDelete", "clickTitle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
724
726
|
}
|
|
725
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMenuComponent, decorators: [{
|
|
726
728
|
type: Component,
|
|
@@ -1912,17 +1914,24 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1912
1914
|
this.ICON_THEME = ICON_THEME;
|
|
1913
1915
|
this.isFocused = false;
|
|
1914
1916
|
}
|
|
1915
|
-
ngOnInit() {
|
|
1916
|
-
this.id = this.config.id ?? 's-input';
|
|
1917
|
-
this.type = this.config.type || INPUT_TYPE.TEXT;
|
|
1918
|
-
}
|
|
1919
1917
|
onInput(event) {
|
|
1918
|
+
// this.id = this.config.id ?? 's-input';
|
|
1919
|
+
// this.type = this.config.type || INPUT_TYPE.TEXT;
|
|
1920
1920
|
const input = event.target;
|
|
1921
1921
|
this.value = input.value;
|
|
1922
1922
|
this.onChange(this.value);
|
|
1923
1923
|
this.onTouched();
|
|
1924
1924
|
this.patternError();
|
|
1925
1925
|
}
|
|
1926
|
+
get id() {
|
|
1927
|
+
return this.config.id ?? 's-input';
|
|
1928
|
+
}
|
|
1929
|
+
get type() {
|
|
1930
|
+
if (this.config.type === INPUT_TYPE.PASSWORD && this.showPassword) {
|
|
1931
|
+
return INPUT_TYPE.TEXT;
|
|
1932
|
+
}
|
|
1933
|
+
return this.config.type || INPUT_TYPE.TEXT;
|
|
1934
|
+
}
|
|
1926
1935
|
registerOnChange(fn) {
|
|
1927
1936
|
if (!this.config.useFormControl) {
|
|
1928
1937
|
this.onChange = fn;
|
|
@@ -1949,7 +1958,6 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1949
1958
|
this.errorPattern = undefined;
|
|
1950
1959
|
}
|
|
1951
1960
|
changeShowPassword() {
|
|
1952
|
-
this.type = this.showPassword ? INPUT_TYPE.PASSWORD : INPUT_TYPE.TEXT;
|
|
1953
1961
|
this.showPassword = !this.showPassword;
|
|
1954
1962
|
}
|
|
1955
1963
|
clickHelp() {
|
|
@@ -1971,7 +1979,7 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1971
1979
|
useExisting: forwardRef(() => SInputComponent),
|
|
1972
1980
|
multi: true,
|
|
1973
1981
|
},
|
|
1974
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n <label [for]=\"id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n {{ config.label }}\n <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n [ngClass]=\"{\n 'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n readonly: config.readOnly,\n 'theme-red':\n (control && control.invalid && (
|
|
1982
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n <label [for]=\"id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n {{ config.label }}\n <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n [ngClass]=\"{\n 'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n readonly: config.readOnly,\n 'theme-red':\n (control && control.invalid && (control.touched || (isFocused && control.dirty))) ||\n errorPattern ||\n config.theme === THEME.RED ||\n config.errorText,\n }\">\n <div *ngIf=\"showIconType()\" class=\"content-left\">\n <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n </div>\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [id]=\"id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [maxlength]=\"config.maxlength ?? null\"\n [formControl]=\"control\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [id]=\"id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n >{{ showPassword ? 'visibility' : 'visibility_off' }}\n </s-icon-mat>\n </div>\n <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n </div>\n </div>\n <div class=\"s-input__message\" *ngIf=\"!config.hideErrorText\">\n <s-validation-error\n *ngIf=\"\n control &&\n control.invalid &&\n (control.touched || (isFocused && control.dirty)) &&\n !(\n (config.type === INPUT_TYPE.URL && config.errorText) ||\n (config.type === INPUT_TYPE.EMAIL && config.errorText)\n )\n \"\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control *ngIf=\"config.errorText\" theme=\"red\">\n {{ config.errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"errorPattern && !config.errorText\" theme=\"red\">\n {{ config.errorMessages?.pattern ?? errorPattern }}\n </s-error-control>\n <s-error-control\n *ngIf=\"\n !errorPattern &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n </div>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__message{min-height:1.25rem}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size", "id"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1975
1983
|
}
|
|
1976
1984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, decorators: [{
|
|
1977
1985
|
type: Component,
|
|
@@ -1981,7 +1989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1981
1989
|
useExisting: forwardRef(() => SInputComponent),
|
|
1982
1990
|
multi: true,
|
|
1983
1991
|
},
|
|
1984
|
-
], template: "<div class=\"s-input\">\n <label [for]=\"id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n {{ config.label }}\n <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n [ngClass]=\"{\n 'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n readonly: config.readOnly,\n 'theme-red':\n (control && control.invalid && (
|
|
1992
|
+
], template: "<div class=\"s-input\">\n <label [for]=\"id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n {{ config.label }}\n <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n </label>\n <div\n class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n [ngClass]=\"{\n 'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n readonly: config.readOnly,\n 'theme-red':\n (control && control.invalid && (control.touched || (isFocused && control.dirty))) ||\n errorPattern ||\n config.theme === THEME.RED ||\n config.errorText,\n }\">\n <div *ngIf=\"showIconType()\" class=\"content-left\">\n <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n </div>\n <div class=\"content-center\">\n <ng-container *ngIf=\"control; else notUseFormControl\">\n <input\n autocomplete=\"off\"\n [id]=\"id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [maxlength]=\"config.maxlength ?? null\"\n [formControl]=\"control\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-container>\n <ng-template #notUseFormControl>\n <input\n autocomplete=\"off\"\n [id]=\"id\"\n [placeholder]=\"config.placeholder ?? ''\"\n [readOnly]=\"config.readOnly || config.disabled\"\n type=\"{{ type }}\"\n max=\"{{ config.max }}\"\n min=\"{{ config.min }}\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </ng-template>\n </div>\n <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n >{{ showPassword ? 'visibility' : 'visibility_off' }}\n </s-icon-mat>\n </div>\n <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n </div>\n <div\n *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n class=\"content-right\">\n <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n </div>\n </div>\n <div class=\"s-input__message\" *ngIf=\"!config.hideErrorText\">\n <s-validation-error\n *ngIf=\"\n control &&\n control.invalid &&\n (control.touched || (isFocused && control.dirty)) &&\n !(\n (config.type === INPUT_TYPE.URL && config.errorText) ||\n (config.type === INPUT_TYPE.EMAIL && config.errorText)\n )\n \"\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control *ngIf=\"config.errorText\" theme=\"red\">\n {{ config.errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"errorPattern && !config.errorText\" theme=\"red\">\n {{ config.errorMessages?.pattern ?? errorPattern }}\n </s-error-control>\n <s-error-control\n *ngIf=\"\n !errorPattern &&\n !config.errorText &&\n ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n !(isFocused && control.invalid)\n \">\n {{ config.helpText || '' }}\n </s-error-control>\n </div>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__message{min-height:1.25rem}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
|
|
1985
1993
|
}], propDecorators: { config: [{
|
|
1986
1994
|
type: Input
|
|
1987
1995
|
}], clickHelpIconEvent: [{
|
|
@@ -2272,7 +2280,7 @@ class AnimationComponent {
|
|
|
2272
2280
|
this.pauseOnLeaveEvent = new EventEmitter();
|
|
2273
2281
|
}
|
|
2274
2282
|
ngAfterViewInit() {
|
|
2275
|
-
const container = document.getElementById(
|
|
2283
|
+
const container = document.getElementById(this.id);
|
|
2276
2284
|
this.animationConfig = ANIMATION_CONFIG[this.animation];
|
|
2277
2285
|
const animationLottie = Lottie.loadAnimation({
|
|
2278
2286
|
container: container,
|
|
@@ -3490,9 +3498,16 @@ class SSelectMultipleComponent extends ControlValueAccessorDirective {
|
|
|
3490
3498
|
}
|
|
3491
3499
|
ngAfterContentInit() {
|
|
3492
3500
|
this._initConfig();
|
|
3493
|
-
this.options = this.config.options;
|
|
3501
|
+
this.options = [...this.config.options];
|
|
3494
3502
|
this.countSelect();
|
|
3495
3503
|
}
|
|
3504
|
+
ngOnChanges(changes) {
|
|
3505
|
+
if (changes['config']) {
|
|
3506
|
+
this._initConfig();
|
|
3507
|
+
this.options = [...this.config.options];
|
|
3508
|
+
this.countSelect();
|
|
3509
|
+
}
|
|
3510
|
+
}
|
|
3496
3511
|
openDropDown() {
|
|
3497
3512
|
if (this.config.disabled || this.config.readOnly) {
|
|
3498
3513
|
this.isOpen = false;
|
|
@@ -3604,7 +3619,7 @@ class SSelectMultipleComponent extends ControlValueAccessorDirective {
|
|
|
3604
3619
|
useExisting: forwardRef(() => SSelectMultipleComponent),
|
|
3605
3620
|
multi: true,
|
|
3606
3621
|
},
|
|
3607
|
-
], usesInheritance: true, ngImport: i0, template: "<article *ngIf=\"config\" class=\"s-select\" [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n {{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <section\r\n class=\"s-select__main cursor\"\r\n [id]=\"id\"\r\n [ngClass]=\"{\r\n readonly: config.readOnly,\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n (click)=\"openDropDown()\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-multiple\" [id]=\"id + '-options'\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'md' ? 'md' : 'sm'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar [size]=\"config.size === 'sm' ? 'sm' : 'md'\"></s-avatar>\r\n </div>\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n {{ selectionText }}\r\n </span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n {{ config.placeholder }}\r\n </span>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!config.readOnly || !config.disabled\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\"\r\n [id]=\"id + '-errorValidation'\">\r\n </s-validation-error>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n theme=\"red\"\r\n [id]=\"id + '-errorText'\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\"\r\n [id]=\"id + '-helpText'\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n <div class=\"s-select__options-multiple--search\">\r\n <!-- //TODO flag opcional, por defecto true -->\r\n <s-input\r\n [config]=\"configSearch\"\r\n [id]=\"id + '-search'\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filter()\"></s-input>\r\n </div>\r\n <div class=\"s-select__options-multiple\" [ngClass]=\"config.size === 'sm' ? 'xs' : 'sm'\">\r\n <div\r\n role=\"option\"\r\n tabindex=\"0\"\r\n class=\"s-select__item\"\r\n [ngClass]=\"{ sm: config.size === 'sm', md: config.size !== 'sm', 'no-display': !config.display }\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n [attr.aria-selected]=\"item.value\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left select-multiple\">\r\n <s-checkbox [config]=\"checkItem\" [(ngModel)]=\"item.value\"></s-checkbox>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n [display]=\"item.user?.display\"\r\n [letters]=\"item.user?.letters\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\">\r\n </s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options-multiple--selected\" [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n <div class=\"s-select__options-multiple--selected-content\">\r\n <p class=\"s-select__options-multiple--selected-text\">{{ this.config.selected }}: {{ this.countSelected }}</p>\r\n <a\r\n tabindex=\"0\"\r\n class=\"s-select__options-multiple--selectAllOption\"\r\n (click)=\"selectAllEvent()\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n >{{ options.length === countSelected ? config.deselectAllOptions : config.selectAllOption }}</a\r\n >\r\n </div>\r\n </div>\r\n </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["id", "urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config", "id"], outputs: ["blur", "focus"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size", "id"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages", "id"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3622
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<article *ngIf=\"config\" class=\"s-select\" [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n {{ config.label }}\r\n <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n </span>\r\n <section\r\n class=\"s-select__main cursor\"\r\n [id]=\"id\"\r\n [ngClass]=\"{\r\n readonly: config.readOnly,\r\n 'theme-red': control && control.invalid && isFocused,\r\n 'is-open': isOpen,\r\n sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n }\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n (click)=\"openDropDown()\"\r\n (keydown)=\"onKeyDownMain($event)\">\r\n <div class=\"s-select__main__selected-option select-multiple\" [id]=\"id + '-options'\">\r\n <div class=\"s-select__main__selected-option__left\">\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'md' ? 'md' : 'sm'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar [size]=\"config.size === 'sm' ? 'sm' : 'md'\"></s-avatar>\r\n </div>\r\n <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n {{ selectionText }}\r\n </span>\r\n <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n {{ config.placeholder }}\r\n </span>\r\n <div class=\"s-select__main__selected-option__right\">\r\n <s-icon-mat *ngIf=\"!config.readOnly || !config.disabled\" class=\"{{ isOpen ? 'is-open-arrow' : '' }}\">{{\r\n isOpen ? 'expand_less' : 'expand_more'\r\n }}</s-icon-mat>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <s-validation-error\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n [errors]=\"control.errors\"\r\n [id]=\"id + '-errorValidation'\">\r\n </s-validation-error>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n theme=\"red\"\r\n [id]=\"id + '-errorText'\">\r\n {{ config.errorText }}\r\n </s-error-control>\r\n <s-error-control\r\n *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\"\r\n [id]=\"id + '-helpText'\">\r\n {{ config.helpText }}\r\n </s-error-control>\r\n <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n <div class=\"s-select__options-multiple--search\">\r\n <!-- //TODO flag opcional, por defecto true -->\r\n <s-input\r\n [config]=\"configSearch\"\r\n [id]=\"id + '-search'\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filter()\"></s-input>\r\n </div>\r\n <div class=\"s-select__options-multiple\" [ngClass]=\"config.size === 'sm' ? 'xs' : 'sm'\">\r\n <div\r\n role=\"option\"\r\n tabindex=\"0\"\r\n class=\"s-select__item\"\r\n [ngClass]=\"{ sm: config.size === 'sm', md: config.size !== 'sm', 'no-display': !config.display }\"\r\n *ngFor=\"let item of options; index as i\"\r\n (click)=\"changeItem(item)\"\r\n [attr.aria-selected]=\"item.value\"\r\n (keydown)=\"onKeyDownItems($event, item)\"\r\n [class.active]=\"item.value === true\">\r\n <div class=\"content-left select-multiple\">\r\n <s-checkbox [config]=\"checkItem\" [(ngModel)]=\"item.value\"></s-checkbox>\r\n <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n <s-avatar\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n [display]=\"item.user?.display\"\r\n [letters]=\"item.user?.letters\"\r\n [status]=\"item.user?.status\"\r\n [urlProfileImage]=\"item.user?.url\">\r\n </s-avatar>\r\n </div>\r\n <s-icon-mat\r\n [size]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n class=\"iconPerson\"\r\n *ngIf=\"config.display === 'iconperson'\">\r\n person_outline\r\n </s-icon-mat>\r\n <span class=\"option-value\">\r\n {{ item.title }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"s-select__options-multiple--selected\" [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n <div class=\"s-select__options-multiple--selected-content\">\r\n <p class=\"s-select__options-multiple--selected-text\">{{ this.config.selected }}: {{ this.countSelected }}</p>\r\n <a\r\n tabindex=\"0\"\r\n class=\"s-select__options-multiple--selectAllOption\"\r\n (click)=\"selectAllEvent()\"\r\n (keydown.enter)=\"selectAllEvent()\"\r\n >{{ options.length === countSelected ? config.deselectAllOptions : config.selectAllOption }}</a\r\n >\r\n </div>\r\n </div>\r\n </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["id", "urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config", "id"], outputs: ["blur", "focus"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size", "id"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages", "id"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3608
3623
|
}
|
|
3609
3624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectMultipleComponent, decorators: [{
|
|
3610
3625
|
type: Component,
|
|
@@ -5375,7 +5390,7 @@ class SSidebarComponent {
|
|
|
5375
5390
|
}
|
|
5376
5391
|
}
|
|
5377
5392
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, deps: [{ token: SidebarStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images", id: "id" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div\n class=\"s-sidebar\"\n [ngClass]=\"[theme ? 's-sidebar--theme-' + theme : '', expand ? 's-sidebar--open' : 's-sidebar--close']\"\n [id]=\"id\">\n <div\n *ngIf=\"images\"\n class=\"s-sidebar__top\"\n [ngClass]=\"{ 's-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand }\">\n <img [src]=\"getImageSource()\" alt=\"\" />\n </div>\n\n <ul class=\"s-sidebar__menu s-scroll\">\n <ng-container *ngFor=\"let item of menu; index as i\">\n <!-- Cuando es separate -->\n <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n <div class=\"s-sidebar__menu__line-separate__text\">{{ item.separateText }}</div>\n <div\n class=\"s-sidebar__menu__line-separate__dot cursor\"\n title=\"{{ item.separateText ? item.separateText : '' }}\"\n (click)=\"toogleMenu()\">\n ...\n </div>\n </div>\n <!-- Cuando NO tiene hijos esta visible y no es separate -->\n <li\n class=\"s-sidebar__menu__item\"\n [id]=\"id + '-title-' + i\"\n *ngIf=\"!item.hidden && !item.separate && !item.children\"\n title=\"{{ item.title }}\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Cuando SI tiene hijos esta visible y no es separate -->\n <!-- Padre -->\n <li\n class=\"s-sidebar__menu__item {{\n item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'\n }}\"\n *ngIf=\"!item.hidden && !item.separate && item.children\"\n title=\"{{ item.title }}\"\n [id]=\"id + '-title-' + i\"\n (click)=\"clickParent(item)\"\n (keydown.enter)=\"clickParent(item)\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Hijos -->\n <ul\n *ngIf=\"item.children && !item.hidden && !item.separate\"\n class=\"s-sidebar__menu {{ item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close' }}\">\n <ng-container *ngFor=\"let itemChildren of item.children; index as i\">\n <li *ngIf=\"!itemChildren.hidden\" [id]=\"id + '-children-' + i\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: itemChildren,\n tabindex: item.expanded ? true : false,\n }\"></ng-template>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n </ul>\n</div>\n\n<div\n tabindex=\"0\"\n class=\"no-select button-menu {{ expand ? 'button-menu--open' : 'button-menu--close' }}\"\n (keydown.enter)=\"toogleMenu()\"\n (click)=\"toogleMenu()\">\n <s-icon-mat size=\"md\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n <a\n [tabindex]=\"tabindex ? 0 : -1\"\n [ngClass]=\"[getClassItem(item), getClassChildren(item), getClassActive(item)]\"\n (click)=\"item.action ? item.action() : null; clickItem(item)\"\n [routerLink]=\"item.link ? item.link : undefined\"\n routerLinkActive=\"active\"\n title=\"{{ item.title ? item.title : '' }}\">\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n <ng-template\n *ngIf=\"item.badge\"\n [ngTemplateOutlet]=\"badgeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n <s-icon-mat\n size=\"sm\"\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"arrow {{ item.expanded ? 'arrow-open' : 'arrow-close' }}\">\n keyboard_arrow_down\n </s-icon-mat>\n </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n <s-icon-mat\n *ngIf=\"icon\"\n [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n [size]=\"isSIcon(icon) && icon.size ? icon.size : 'md'\"\n class=\"icon-menu\"\n >{{ isSIcon(icon) && icon.name ? icon.name : icon }}\n </s-icon-mat>\n <s-icon-mat *ngIf=\"!icon\" type=\"symbol\" size=\"md\" class=\"icon-menu icon-menu-default\"\n >fiber_manual_record\n </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n <s-badge class=\"badge-padding\" [class.collapsed-badge]=\"!expand\" type=\"{{ item.badgeType ? item.badgeType : 'secondary' }}\">\n {{ item.badge }}\n </s-badge>\n</ng-template>\n", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 1.125rem 1.75rem 0 var(--blue-alpha-200);z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:.313rem;padding-right:.188rem;padding-bottom:2.5rem}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:.188rem;position:relative}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:.625rem;padding-right:.625rem}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:.625rem}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:.625rem}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:.625rem}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:1.5rem;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:0 10.063rem}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:.313rem}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:.625rem 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:.125rem}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:.25rem;margin-bottom:.25rem;background-color:var(--cyan-alpha-200);border-radius:.25rem}.s-sidebar__menu--open li a{border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 .188rem;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:1.25rem;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:.188rem solid var(--primary-400);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:.188rem solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:.625rem}.s-sidebar__top--collapse{margin:.313rem}.s-sidebar__top img{width:76%}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box{display:none!important}.s-sidebar--close .s-sidebar__menu{overflow-x:visible!important;overflow-y:auto!important}.s-sidebar--close li{position:relative}.s-sidebar--close li .s-badge,.s-sidebar--close li .collapsed-badge{display:inline-flex!important;visibility:visible!important;opacity:1!important;position:absolute!important;top:.3rem!important;right:.2rem!important;width:.5rem!important;height:.5rem!important;min-width:.5rem!important;min-height:.5rem!important;max-width:.5rem!important;max-height:.5rem!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:1!important;margin:0!important;overflow:visible!important;z-index:100!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:3.125rem;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:2.75rem;height:2rem;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:11.875rem;bottom:2.625rem;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:.938rem;bottom:2.625rem;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "new"] }, { kind: "component", type: SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images", id: "id" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div\n class=\"s-sidebar\"\n [ngClass]=\"[theme ? 's-sidebar--theme-' + theme : '', expand ? 's-sidebar--open' : 's-sidebar--close']\"\n [id]=\"id\">\n <div\n *ngIf=\"images\"\n class=\"s-sidebar__top\"\n [ngClass]=\"{ 's-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand }\">\n <img [src]=\"getImageSource()\" alt=\"\" />\n </div>\n\n <ul class=\"s-sidebar__menu s-scroll\">\n <ng-container *ngFor=\"let item of menu; index as i\">\n <!-- Cuando es separate -->\n <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n <div class=\"s-sidebar__menu__line-separate__text\">{{ item.separateText }}</div>\n <div\n class=\"s-sidebar__menu__line-separate__dot cursor\"\n title=\"{{ item.separateText ? item.separateText : '' }}\"\n (click)=\"toogleMenu()\">\n ...\n </div>\n </div>\n <!-- Cuando NO tiene hijos esta visible y no es separate -->\n <li\n class=\"s-sidebar__menu__item\"\n [id]=\"id + '-title-' + i\"\n *ngIf=\"!item.hidden && !item.separate && !item.children\"\n title=\"{{ item.title }}\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Cuando SI tiene hijos esta visible y no es separate -->\n <!-- Padre -->\n <li\n class=\"s-sidebar__menu__item {{\n item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'\n }}\"\n *ngIf=\"!item.hidden && !item.separate && item.children\"\n title=\"{{ item.title }}\"\n [id]=\"id + '-title-' + i\"\n (click)=\"clickParent(item)\"\n (keydown.enter)=\"clickParent(item)\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item, tabindex: true }\"></ng-template>\n </li>\n <!-- Hijos -->\n <ul\n *ngIf=\"item.children && !item.hidden && !item.separate\"\n class=\"s-sidebar__menu {{ item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close' }}\">\n <ng-container *ngFor=\"let itemChildren of item.children; index as i\">\n <li *ngIf=\"!itemChildren.hidden\" [id]=\"id + '-children-' + i\">\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: itemChildren,\n tabindex: item.expanded ? true : false,\n }\"></ng-template>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n </ul>\n</div>\n\n<div\n tabindex=\"0\"\n class=\"no-select button-menu {{ expand ? 'button-menu--open' : 'button-menu--close' }}\"\n (keydown.enter)=\"toogleMenu()\"\n (click)=\"toogleMenu()\">\n <s-icon-mat size=\"md\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n <a\n [tabindex]=\"tabindex ? 0 : -1\"\n [ngClass]=\"[getClassItem(item), getClassChildren(item), getClassActive(item)]\"\n (click)=\"item.action ? item.action() : null; clickItem(item)\"\n [routerLink]=\"item.link ? item.link : undefined\"\n routerLinkActive=\"active\"\n title=\"{{ item.title ? item.title : '' }}\">\n <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n <ng-template\n *ngIf=\"item.badge\"\n [ngTemplateOutlet]=\"badgeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n <s-icon-mat\n size=\"sm\"\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"arrow {{ item.expanded ? 'arrow-open' : 'arrow-close' }}\">\n keyboard_arrow_down\n </s-icon-mat>\n </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n <s-icon-mat\n *ngIf=\"icon\"\n [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n [size]=\"isSIcon(icon) && icon.size ? icon.size : 'md'\"\n class=\"icon-menu\"\n >{{ isSIcon(icon) && icon.name ? icon.name : icon }}\n </s-icon-mat>\n <s-icon-mat *ngIf=\"!icon\" type=\"symbol\" size=\"md\" class=\"icon-menu icon-menu-default\"\n >fiber_manual_record\n </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n <s-badge class=\"badge-padding\" [class.collapsed-badge]=\"!expand\" type=\"{{ item.badgeType ? item.badgeType : 'secondary' }}\">\n {{ item.badge }}\n </s-badge>\n</ng-template>\n", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 1.125rem 1.75rem 0 var(--blue-alpha-200);z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:.313rem;padding-right:.188rem;padding-bottom:2.5rem}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:.188rem;position:relative}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:.625rem;padding-right:.625rem}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:.625rem}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:.625rem}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:.625rem}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:1.5rem;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:0 10.063rem}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:.313rem}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:.063rem;background:var(--primary-600);margin:.625rem 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:.125rem}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:.25rem;margin-bottom:.25rem;background-color:var(--cyan-alpha-200);border-radius:.25rem}.s-sidebar__menu--open li a{border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:.25rem;background-color:var(--primary-300);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 .188rem;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:1.25rem;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:.25rem;background-color:var(--primary-200);border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:.188rem solid var(--primary-400);border-radius:.25rem}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:.25rem;border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:.188rem solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:.188rem solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:.625rem}.s-sidebar__top--collapse{margin:.313rem}.s-sidebar__top img{width:76%}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box{display:none!important}.s-sidebar--close .s-sidebar__menu{overflow-x:visible!important;overflow-y:auto!important}.s-sidebar--close li{position:relative}.s-sidebar--close li .s-badge,.s-sidebar--close li .collapsed-badge{display:inline-flex!important;visibility:visible!important;opacity:1!important;position:absolute!important;top:.3rem!important;right:.2rem!important;width:.5rem!important;height:.5rem!important;min-width:.5rem!important;min-height:.5rem!important;max-width:.5rem!important;max-height:.5rem!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:1!important;margin:0!important;overflow:visible!important;z-index:100!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:3.125rem;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:2.75rem;height:2rem;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:11.875rem;bottom:2.625rem;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:.938rem;bottom:2.625rem;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "disabled", "icon"] }, { kind: "component", type: SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5379
5394
|
}
|
|
5380
5395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, decorators: [{
|
|
5381
5396
|
type: Component,
|
|
@@ -5887,11 +5902,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5887
5902
|
|
|
5888
5903
|
class SThemeComponent {
|
|
5889
5904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SThemeComponent, selector: "s-theme", ngImport: i0, template: '', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap\";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}*{font-family:Roboto,Arial,sans-serif;font-size:1rem;letter-spacing:.013rem;line-height:1.25rem;font-weight:400}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}h1{font-size:2.5rem;line-height:3.75rem}h2{font-size:2rem;line-height:2.5rem}h3{font-size:1.75rem;line-height:2.2rem}h4{font-size:1.5rem;line-height:1.875rem}h5{font-size:1.25rem;line-height:1.5rem}h6{font-size:1rem;line-height:1.5rem}p{font-size:1rem}a{font-size:1rem;line-height:1.5rem}.s-subtitle{font-size:1rem;line-height:1.5rem;letter-spacing:.009rem}.s-subtitle-bold{font-size:1rem;line-height:1.5rem;font-weight:700;letter-spacing:.006rem}.s-body-1{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-body-2{font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem}.s-button-xl,.s-button-xl-bold{font-size:1.125rem;line-height:1.75rem;letter-spacing:.031rem}.s-button-lg,.s-button-lg-bold{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-button-sm,.s-button-sm-bold{font-size:.875rem;line-height:1.375rem;letter-spacing:.013rem}.s-button-xs,.s-button-xs-bold{font-size:.75rem;line-height:1.125rem;letter-spacing:.006rem}.s-button-xl-bold,.s-button-lg-bold,.s-button-sm-bold,.s-button-xs-bold{font-weight:700}.s-caption{font-size:.75rem;line-height:1.125rem;letter-spacing:.031rem}.s-overline{font-size:.75rem;line-height:1.125rem;font-weight:500;letter-spacing:.094rem}.s-link-1{font-size:1rem;line-height:1.5rem;text-decoration:underline;letter-spacing:.031rem}.s-link-2{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-link-3{font-size:.875rem;line-height:1.3rem;text-decoration:underline;letter-spacing:.031rem}.s-link-4{font-size:.875rem;line-height:1.3rem;letter-spacing:.031rem}@media only screen and (max-width: 37.5rem){h1{font-size:2rem;line-height:2.5rem}h2,h3{font-size:1.5rem;line-height:1.875rem}h4{font-size:1.25rem;line-height:1.5rem}h5{font-size:1rem;line-height:1.25rem}}:root{--primary-100: #E6F4FF;--primary-200: #CCE9FF;--primary-300: #99D3FF;--primary-400: #66BDFE;--primary-500: #33A7FE;--primary-600: #0091FE;--primary-700: #0074CB;--primary-800: #005798;--primary-900: #003A66;--primary-1000: #001D33;--secondary-100: #E4EDF9;--secondary-200: #BBC9DB;--secondary-300: #92A5BC;--secondary-400: #69809E;--secondary-500: #405C7F;--secondary-600: #173861;--secondary-700: #122D4E;--secondary-800: #0E223A;--secondary-900: #091627;--secondary-1000: #07111D;--neutrals-100: #000000;--neutrals-200: #1E1E1E;--neutrals-300: #3C3C3C;--neutrals-400: #5A5A5A;--neutrals-500: #787878;--neutrals-600: #969696;--neutrals-700: #B4B4B4;--neutrals-800: #CECECE;--neutrals-900: #E0E0E0;--neutrals-1000: #EEEEEE;--neutrals-1100: #F7F7F7;--neutrals-1200: #FFFFFF;--green-100: #F3F8F5;--green-200: #E5F2EB;--green-300: #C8E4D5;--green-400: #A7D5BD;--green-500: #7CC5A0;--green-600: #36B37E;--green-700: #30A071;--green-800: #2A8B62;--green-900: #227150;--green-1000: #185038;--yellow-100: #FEF6E6;--yellow-200: #FEEDCD;--yellow-300: #FFDD86;--yellow-400: #FFCB59;--yellow-500: #FFB828;--yellow-600: #F9A60C;--yellow-700: #EC9709;--yellow-800: #DF8806;--yellow-900: #D37A03;--yellow-1000: #B26000;--red-100: #FFF1EC;--red-200: #FFE8E0;--red-300: #FDD1CA;--red-400: #FBB9B3;--red-500: #F68783;--red-600: #F46A68;--red-700: #F14848;--red-800: #E12E2E;--red-900: #CB1818;--red-1000: #B30000;--blue-alpha-100: rgba(23, 56, 97, .05);--blue-alpha-200: rgba(23, 56, 97, .125);--blue-alpha-250: rgba(23, 56, 97, .15);--blue-alpha-280: rgba(23, 56, 97, .18);--blue-alpha-300: rgba(23, 56, 97, .25);--blue-alpha-400: rgba(23, 56, 97, .375);--blue-alpha-500: rgba(23, 56, 97, .5);--blue-alpha-600: rgba(23, 56, 97, .625);--blue-alpha-700: rgba(23, 56, 97, .75);--blue-alpha-800: rgba(23, 56, 97, .875);--cyan-alpha-100: rgba(0, 145, 254, .05);--cyan-alpha-200: rgba(0, 145, 254, .125);--cyan-alpha-300: rgba(0, 145, 254, .25);--cyan-alpha-400: rgba(0, 145, 254, .375);--cyan-alpha-500: rgba(0, 145, 254, .5);--cyan-alpha-600: rgba(0, 145, 254, .625);--cyan-alpha-700: rgba(0, 145, 254, .75);--cyan-alpha-800: rgba(0, 145, 254, .875);--green-alpha-100: rgba(54, 179, 126, .05);--green-alpha-200: rgba(54, 179, 126, .125);--green-alpha-300: rgba(54, 179, 126, .25);--green-alpha-400: rgba(54, 179, 126, .375);--green-alpha-500: rgba(54, 179, 126, .5);--green-alpha-600: rgba(54, 179, 126, .625);--green-alpha-700: rgba(54, 179, 126, .75);--green-alpha-800: rgba(54, 179, 126, .875);--red-alpha-100: rgba(255, 86, 48, .05);--red-alpha-200: rgba(255, 86, 48, .125);--red-alpha-300: rgba(255, 86, 48, .25);--red-alpha-400: rgba(255, 86, 48, .375);--red-alpha-500: rgba(255, 86, 48, .5);--red-alpha-600: rgba(255, 86, 48, .625);--red-alpha-700: rgba(255, 86, 48, .75);--red-alpha-800: rgba(255, 86, 48, .875);--yellow-alpha-100: rgba(255, 171, 0, .05);--yellow-alpha-200: rgba(255, 171, 0, .125);--yellow-alpha-300: rgba(255, 171, 0, .25);--yellow-alpha-400: rgba(255, 171, 0, .375);--yellow-alpha-500: rgba(255, 171, 0, .5);--yellow-alpha-600: rgba(255, 171, 0, .625);--yellow-alpha-700: rgba(255, 171, 0, .75);--yellow-alpha-800: rgba(255, 171, 0, .875);--E000: 0rem 0rem .125rem 0rem var(--blue-alpha-200);--E100: 0rem 0rem 10rem 0rem var(--blue-alpha-200);--E200: 0rem 0rem 1rem 0rem var(--blue-alpha-250);--E300: 0rem .313rem 1.5rem 0rem var(--blue-alpha-280);--E400: 0rem 0rem 1.5rem 0rem var(--blue-alpha-200), 0rem .5rem 1.25rem 0rem var(--blue-alpha-100), 0rem .25rem 1.75rem 0rem var(--blue-alpha-250);--E500: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75rem 0rem var(--blue-alpha-200);--E600: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75ren 0rem var(--blue-alpha-200);--focus-cyan--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--cyan-alpha-200);--focus-cyan--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--cyan-alpha-200);--focus-blue--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--blue-alpha-200);--focus-blue--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--blue-alpha-200);--focus-green--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--green-alpha-200);--focus-green--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--green-alpha-200);--focus-yellow--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--yellow-alpha-200);--focus-yellow--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--yellow-alpha-200);--focus-red--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--red-alpha-200);--focus-red--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--red-alpha-200)}body,html{height:100%;margin:0;overflow:hidden}.skeleton-loading{background:linear-gradient(.25turn,transparent,#fff,transparent),linear-gradient(#eee,#eee),radial-gradient(2.375rem circle at 1.188rem 1.188rem,#eee 50%,transparent 51%),linear-gradient(#eee,#eee);animation:skeleton-animation 1.5s infinite ease-in-out}@keyframes skeleton-animation{0%{opacity:.6}50%{opacity:.8}to{opacity:.6}}body::selection{background:var(--primary-600);color:var(--neutrals-100)}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cursor{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-25{width:25%!important}.w-33{width:33%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.p-auto{padding:auto}.px-auto{padding:0 auto}.py-auto{padding:auto 0}.pt-auto{padding-top:auto}.pb-auto{padding-bottom:auto}.pl-auto{padding-left:auto}.pr-auto{padding-right:auto}.p-0{padding:0}.p-1{padding:.25em}.p-2{padding:.5em}.p-3{padding:1em}.p-4{padding:1.5em}.p-5{padding:3em}.px-0{padding:0}.px-1{padding:0 .25em}.px-2{padding:0 .5em}.px-3{padding:0 1em}.px-4{padding:0 1.5em}.px-5{padding:0 3em}.py-0{padding:0}.py-1{padding:.25em 0}.py-2{padding:.5em 0}.py-3{padding:1em 0}.py-4{padding:1.5em 0}.py-5{padding:3em 0}.pt-0{padding-top:0}.pt-1{padding-top:.25em}.pt-2{padding-top:.5em}.pt-3{padding-top:1em}.pt-4{padding-top:1.5em}.pt-5{padding-top:3em}.pr-0{padding-right:0}.pr-1{padding-right:.25em}.pr-2{padding-right:.5em}.pr-3{padding-right:1em}.pr-4{padding-right:1.5em}.pr-5{padding-right:3em}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25em}.pb-2{padding-bottom:.5em}.pb-3{padding-bottom:1em}.pb-4{padding-bottom:1.5em}.pb-5{padding-bottom:3em}.pl-0{padding-left:0}.pl-1{padding-left:.25em}.pl-2{padding-left:.5em}.pl-3{padding-left:1em}.pl-4{padding-left:1.5em}.pl-5{padding-left:3em}.m-auto{margin:auto}.mx-auto{margin:0 auto}.my-auto{margin:auto 0}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.m-0{margin:0}.m-1{margin:.25em}.m-2{margin:.5em}.m-3{margin:1em}.m-4{margin:1.5em}.m-5{margin:3em}.mx-0{margin:0}.mx-1{margin:0 .25em}.mx-2{margin:0 .5em}.mx-3{margin:0 1em}.mx-4{margin:0 1.5em}.mx-5{margin:0 3em}.my-0{margin:0}.my-1{margin:.25em 0}.my-2{margin:.5em 0}.my-3{margin:1em 0}.my-4{margin:1.5em 0}.my-5{margin:3em 0}.mt-0{margin-top:0}.mt-1{margin-top:.25em}.mt-2{margin-top:.5em}.mt-3{margin-top:1em}.mt-4{margin-top:1.5em}.mt-5{margin-top:3em}.mr-0{margin-right:0}.mr-1{margin-right:.25em}.mr-2{margin-right:.5em}.mr-3{margin-right:1em}.mr-4{margin-right:1.5em}.mr-5{margin-right:3em}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25em}.mb-2{margin-bottom:.5em}.mb-3{margin-bottom:1em}.mb-4{margin-bottom:1.5em}.mb-5{margin-bottom:3em}.ml-0{margin-left:0}.ml-1{margin-left:.25em}.ml-2{margin-left:.5em}.ml-3{margin-left:1em}.ml-4{margin-left:1.5em}.ml-5{margin-left:3em}.d-flex{display:flex}.fx-right{flex-direction:row-reverse}.fx-left{flex-direction:row}.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-center{align-items:center}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.border,.border-1{border:.063rem solid}.border-2{border:.125rem solid}.border-left-1,.border-left{border-left:.063rem solid}.border-left-2{border-left:.125rem solid}.border-right-1,.border-right{border-right:.063rem solid}.border-right-2{border-right:.125rem solid}.border-top-1,.border-top{border-top:.063rem solid}.border-top-2{border-top:.125rem solid}.border-bottom-1,.border-bottom{border-bottom:.063rem solid}.border-bottom-2{border-bottom:.125rem solid}.border-y-1,.border-y{border-top:.063rem solid;border-bottom:.063rem solid}.border-y-2{border-top:.125rem solid;border-bottom:.125rem solid}.border-x-1,.border-x{border-left:.063rem solid;border-right:.063rem solid}.border-x-2{border-left:.125rem solid;border-right:.125rem solid}.br-1{border-radius:.125rem}.br-2{border-radius:.25rem}.br-3{border-radius:.5rem}.shadow-inner-1{box-shadow:inset 0 .125rem .125rem #0000001a}.shadow-inner-2{box-shadow:inset 0 .25rem .5rem #0000001a}.shadow-outer-1{box-shadow:0 .125rem .125rem #0000001a}.shadow-outer-2{box-shadow:0 .25rem .5rem #0000001a}.opacity-100{opacity:1}.opacity-90{opacity:.9}.opacity-80{opacity:.8}.opacity-70{opacity:.7}.opacity-60{opacity:.6}.opacity-50{opacity:.5}.opacity-40{opacity:.4}.opacity-30{opacity:.3}.opacity-20{opacity:.2}.opacity-10{opacity:.1}.highlighter,.highlighter-primary{color:var(--primary-600)}.highlighter-succes{color:var(--green-500)}.highlighter-warning{color:var(--yellow-600)}.highlighter-error{color:var(--red-600)}.highlighter-info{color:var(--secondary-600)}.s-scroll{overflow:auto}.s-scroll::-webkit-scrollbar{height:.4rem;width:.7rem}.s-scroll::-webkit-scrollbar-track{background-color:transparent}.s-scroll::-webkit-scrollbar-thumb{background-color:var(--neutrals-900);border-radius:1.25rem .813rem .813rem 1.25rem;border-right:.1em solid transparent;border-left:.3rem solid transparent;background-clip:content-box}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SThemeComponent, selector: "s-theme", ngImport: i0, template: '', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap\";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}*{font-family:Roboto,Arial,sans-serif;font-size:1rem;letter-spacing:.013rem;line-height:1.25rem;font-weight:400}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}h1{font-size:2.5rem;line-height:3.75rem}h2{font-size:2rem;line-height:2.5rem}h3{font-size:1.75rem;line-height:2.2rem}h4{font-size:1.5rem;line-height:1.875rem}h5{font-size:1.25rem;line-height:1.5rem}h6{font-size:1rem;line-height:1.5rem}p{font-size:1rem}a{font-size:1rem;line-height:1.5rem}.s-subtitle{font-size:1rem;line-height:1.5rem;letter-spacing:.009rem}.s-subtitle-bold{font-size:1rem;line-height:1.5rem;font-weight:700;letter-spacing:.006rem}.s-body-1{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-body-2{font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem}.s-button-xl,.s-button-xl-bold{font-size:1.125rem;line-height:1.75rem;letter-spacing:.031rem}.s-button-lg,.s-button-lg-bold{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-button-sm,.s-button-sm-bold{font-size:.875rem;line-height:1.375rem;letter-spacing:.013rem}.s-button-xs,.s-button-xs-bold{font-size:.75rem;line-height:1.125rem;letter-spacing:.006rem}.s-button-xl-bold,.s-button-lg-bold,.s-button-sm-bold,.s-button-xs-bold{font-weight:700}.s-caption{font-size:.75rem;line-height:1.125rem;letter-spacing:.031rem}.s-overline{font-size:.75rem;line-height:1.125rem;font-weight:500;letter-spacing:.094rem}.s-link-1{font-size:1rem;line-height:1.5rem;text-decoration:underline;letter-spacing:.031rem}.s-link-2{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-link-3{font-size:.875rem;line-height:1.3rem;text-decoration:underline;letter-spacing:.031rem}.s-link-4{font-size:.875rem;line-height:1.3rem;letter-spacing:.031rem}@media only screen and (max-width: 37.5rem){h1{font-size:2rem;line-height:2.5rem}h2,h3{font-size:1.5rem;line-height:1.875rem}h4{font-size:1.25rem;line-height:1.5rem}h5{font-size:1rem;line-height:1.25rem}}:root{--primary-100: #E6F4FF;--primary-200: #CCE9FF;--primary-300: #99D3FF;--primary-400: #66BDFE;--primary-500: #33A7FE;--primary-600: #0091FE;--primary-700: #0074CB;--primary-800: #005798;--primary-900: #003A66;--primary-1000: #001D33;--secondary-100: #E4EDF9;--secondary-200: #BBC9DB;--secondary-300: #92A5BC;--secondary-400: #69809E;--secondary-500: #405C7F;--secondary-600: #173861;--secondary-700: #122D4E;--secondary-800: #0E223A;--secondary-900: #091627;--secondary-1000: #07111D;--neutrals-100: #000000;--neutrals-200: #1E1E1E;--neutrals-300: #3C3C3C;--neutrals-400: #5A5A5A;--neutrals-500: #787878;--neutrals-600: #969696;--neutrals-700: #B4B4B4;--neutrals-800: #CECECE;--neutrals-900: #E0E0E0;--neutrals-1000: #EEEEEE;--neutrals-1100: #F7F7F7;--neutrals-1200: #FFFFFF;--green-100: #D9F8F0;--green-200: #C3F3E7;--green-300: #95E8CF;--green-400: #63DCB6;--green-500: #3BCD9E;--green-600: #33BB8F;--green-700: #2CAA81;--green-800: #249873;--green-900: #1C8865;--green-1000: #157757;--yellow-100: #FEF6E6;--yellow-200: #FEEDCD;--yellow-300: #FFDD86;--yellow-400: #FFCB59;--yellow-500: #FFB828;--yellow-600: #F9A60C;--yellow-700: #EC9709;--yellow-800: #DF8806;--yellow-900: #D37A03;--yellow-1000: #B26000;--red-100: #FFF1EC;--red-200: #FFE8E0;--red-300: #FDD1CA;--red-400: #FBB9B3;--red-500: #F68783;--red-600: #F46A68;--red-700: #F14848;--red-800: #E12E2E;--red-900: #CB1818;--red-1000: #B30000;--violet-100: #F7E3FF;--violet-200: #F0CDFF;--violet-300: #E4A5FF;--violet-400: #D46CFF;--violet-500: #C535FF;--violet-600: #B60FFF;--violet-700: #9600DF;--violet-800: #8806C3;--violet-900: #70079C;--violet-1000: #4D0076;--blue-alpha-100: rgba(23, 56, 97, .05);--blue-alpha-200: rgba(23, 56, 97, .125);--blue-alpha-250: rgba(23, 56, 97, .15);--blue-alpha-280: rgba(23, 56, 97, .18);--blue-alpha-300: rgba(23, 56, 97, .25);--blue-alpha-400: rgba(23, 56, 97, .375);--blue-alpha-500: rgba(23, 56, 97, .5);--blue-alpha-600: rgba(23, 56, 97, .625);--blue-alpha-700: rgba(23, 56, 97, .75);--blue-alpha-800: rgba(23, 56, 97, .875);--cyan-alpha-100: rgba(0, 145, 254, .05);--cyan-alpha-200: rgba(0, 145, 254, .125);--cyan-alpha-300: rgba(0, 145, 254, .25);--cyan-alpha-400: rgba(0, 145, 254, .375);--cyan-alpha-500: rgba(0, 145, 254, .5);--cyan-alpha-600: rgba(0, 145, 254, .625);--cyan-alpha-700: rgba(0, 145, 254, .75);--cyan-alpha-800: rgba(0, 145, 254, .875);--green-alpha-100: rgba(54, 179, 126, .05);--green-alpha-200: rgba(54, 179, 126, .125);--green-alpha-300: rgba(54, 179, 126, .25);--green-alpha-400: rgba(54, 179, 126, .375);--green-alpha-500: rgba(54, 179, 126, .5);--green-alpha-600: rgba(54, 179, 126, .625);--green-alpha-700: rgba(54, 179, 126, .75);--green-alpha-800: rgba(54, 179, 126, .875);--red-alpha-100: rgba(255, 86, 48, .05);--red-alpha-200: rgba(255, 86, 48, .125);--red-alpha-300: rgba(255, 86, 48, .25);--red-alpha-400: rgba(255, 86, 48, .375);--red-alpha-500: rgba(255, 86, 48, .5);--red-alpha-600: rgba(255, 86, 48, .625);--red-alpha-700: rgba(255, 86, 48, .75);--red-alpha-800: rgba(255, 86, 48, .875);--yellow-alpha-100: rgba(255, 171, 0, .05);--yellow-alpha-200: rgba(255, 171, 0, .125);--yellow-alpha-300: rgba(255, 171, 0, .25);--yellow-alpha-400: rgba(255, 171, 0, .375);--yellow-alpha-500: rgba(255, 171, 0, .5);--yellow-alpha-600: rgba(255, 171, 0, .625);--yellow-alpha-700: rgba(255, 171, 0, .75);--yellow-alpha-800: rgba(255, 171, 0, .875);--E000: 0rem 0rem .125rem 0rem var(--blue-alpha-200);--E100: 0rem 0rem 10rem 0rem var(--blue-alpha-200);--E200: 0rem 0rem 1rem 0rem var(--blue-alpha-250);--E300: 0rem .313rem 1.5rem 0rem var(--blue-alpha-280);--E400: 0rem 0rem 1.5rem 0rem var(--blue-alpha-200), 0rem .5rem 1.25rem 0rem var(--blue-alpha-100), 0rem .25rem 1.75rem 0rem var(--blue-alpha-250);--E500: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75rem 0rem var(--blue-alpha-200);--E600: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75ren 0rem var(--blue-alpha-200);--focus-cyan--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--cyan-alpha-200);--focus-cyan--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--cyan-alpha-200);--focus-blue--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--blue-alpha-200);--focus-blue--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--blue-alpha-200);--focus-green--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--green-alpha-200);--focus-green--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--green-alpha-200);--focus-yellow--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--yellow-alpha-200);--focus-yellow--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--yellow-alpha-200);--focus-red--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--red-alpha-200);--focus-red--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--red-alpha-200)}body,html{height:100%;margin:0;overflow:hidden}.skeleton-loading{background:linear-gradient(.25turn,transparent,#fff,transparent),linear-gradient(#eee,#eee),radial-gradient(2.375rem circle at 1.188rem 1.188rem,#eee 50%,transparent 51%),linear-gradient(#eee,#eee);animation:skeleton-animation 1.5s infinite ease-in-out}@keyframes skeleton-animation{0%{opacity:.6}50%{opacity:.8}to{opacity:.6}}body::selection{background:var(--primary-600);color:var(--neutrals-100)}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cursor{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-25{width:25%!important}.w-33{width:33%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.p-auto{padding:auto}.px-auto{padding:0 auto}.py-auto{padding:auto 0}.pt-auto{padding-top:auto}.pb-auto{padding-bottom:auto}.pl-auto{padding-left:auto}.pr-auto{padding-right:auto}.p-0{padding:0}.p-1{padding:.25em}.p-2{padding:.5em}.p-3{padding:1em}.p-4{padding:1.5em}.p-5{padding:3em}.px-0{padding:0}.px-1{padding:0 .25em}.px-2{padding:0 .5em}.px-3{padding:0 1em}.px-4{padding:0 1.5em}.px-5{padding:0 3em}.py-0{padding:0}.py-1{padding:.25em 0}.py-2{padding:.5em 0}.py-3{padding:1em 0}.py-4{padding:1.5em 0}.py-5{padding:3em 0}.pt-0{padding-top:0}.pt-1{padding-top:.25em}.pt-2{padding-top:.5em}.pt-3{padding-top:1em}.pt-4{padding-top:1.5em}.pt-5{padding-top:3em}.pr-0{padding-right:0}.pr-1{padding-right:.25em}.pr-2{padding-right:.5em}.pr-3{padding-right:1em}.pr-4{padding-right:1.5em}.pr-5{padding-right:3em}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25em}.pb-2{padding-bottom:.5em}.pb-3{padding-bottom:1em}.pb-4{padding-bottom:1.5em}.pb-5{padding-bottom:3em}.pl-0{padding-left:0}.pl-1{padding-left:.25em}.pl-2{padding-left:.5em}.pl-3{padding-left:1em}.pl-4{padding-left:1.5em}.pl-5{padding-left:3em}.m-auto{margin:auto}.mx-auto{margin:0 auto}.my-auto{margin:auto 0}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.m-0{margin:0}.m-1{margin:.25em}.m-2{margin:.5em}.m-3{margin:1em}.m-4{margin:1.5em}.m-5{margin:3em}.mx-0{margin:0}.mx-1{margin:0 .25em}.mx-2{margin:0 .5em}.mx-3{margin:0 1em}.mx-4{margin:0 1.5em}.mx-5{margin:0 3em}.my-0{margin:0}.my-1{margin:.25em 0}.my-2{margin:.5em 0}.my-3{margin:1em 0}.my-4{margin:1.5em 0}.my-5{margin:3em 0}.mt-0{margin-top:0}.mt-1{margin-top:.25em}.mt-2{margin-top:.5em}.mt-3{margin-top:1em}.mt-4{margin-top:1.5em}.mt-5{margin-top:3em}.mr-0{margin-right:0}.mr-1{margin-right:.25em}.mr-2{margin-right:.5em}.mr-3{margin-right:1em}.mr-4{margin-right:1.5em}.mr-5{margin-right:3em}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25em}.mb-2{margin-bottom:.5em}.mb-3{margin-bottom:1em}.mb-4{margin-bottom:1.5em}.mb-5{margin-bottom:3em}.ml-0{margin-left:0}.ml-1{margin-left:.25em}.ml-2{margin-left:.5em}.ml-3{margin-left:1em}.ml-4{margin-left:1.5em}.ml-5{margin-left:3em}.d-flex{display:flex}.fx-right{flex-direction:row-reverse}.fx-left{flex-direction:row}.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-center{align-items:center}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.border,.border-1{border:.063rem solid}.border-2{border:.125rem solid}.border-left-1,.border-left{border-left:.063rem solid}.border-left-2{border-left:.125rem solid}.border-right-1,.border-right{border-right:.063rem solid}.border-right-2{border-right:.125rem solid}.border-top-1,.border-top{border-top:.063rem solid}.border-top-2{border-top:.125rem solid}.border-bottom-1,.border-bottom{border-bottom:.063rem solid}.border-bottom-2{border-bottom:.125rem solid}.border-y-1,.border-y{border-top:.063rem solid;border-bottom:.063rem solid}.border-y-2{border-top:.125rem solid;border-bottom:.125rem solid}.border-x-1,.border-x{border-left:.063rem solid;border-right:.063rem solid}.border-x-2{border-left:.125rem solid;border-right:.125rem solid}.br-1{border-radius:.125rem}.br-2{border-radius:.25rem}.br-3{border-radius:.5rem}.shadow-inner-1{box-shadow:inset 0 .125rem .125rem #0000001a}.shadow-inner-2{box-shadow:inset 0 .25rem .5rem #0000001a}.shadow-outer-1{box-shadow:0 .125rem .125rem #0000001a}.shadow-outer-2{box-shadow:0 .25rem .5rem #0000001a}.opacity-100{opacity:1}.opacity-90{opacity:.9}.opacity-80{opacity:.8}.opacity-70{opacity:.7}.opacity-60{opacity:.6}.opacity-50{opacity:.5}.opacity-40{opacity:.4}.opacity-30{opacity:.3}.opacity-20{opacity:.2}.opacity-10{opacity:.1}.highlighter,.highlighter-primary{color:var(--primary-600)}.highlighter-succes{color:var(--green-500)}.highlighter-warning{color:var(--yellow-600)}.highlighter-error{color:var(--red-600)}.highlighter-info{color:var(--secondary-600)}.s-scroll{overflow:auto}.s-scroll::-webkit-scrollbar{height:.4rem;width:.7rem}.s-scroll::-webkit-scrollbar-track{background-color:transparent}.s-scroll::-webkit-scrollbar-thumb{background-color:var(--neutrals-900);border-radius:1.25rem .813rem .813rem 1.25rem;border-right:.1em solid transparent;border-left:.3rem solid transparent;background-clip:content-box}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5891
5906
|
}
|
|
5892
5907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SThemeComponent, decorators: [{
|
|
5893
5908
|
type: Component,
|
|
5894
|
-
args: [{ selector: 's-theme', template: '', encapsulation: ViewEncapsulation.None, styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap\";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}*{font-family:Roboto,Arial,sans-serif;font-size:1rem;letter-spacing:.013rem;line-height:1.25rem;font-weight:400}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}h1{font-size:2.5rem;line-height:3.75rem}h2{font-size:2rem;line-height:2.5rem}h3{font-size:1.75rem;line-height:2.2rem}h4{font-size:1.5rem;line-height:1.875rem}h5{font-size:1.25rem;line-height:1.5rem}h6{font-size:1rem;line-height:1.5rem}p{font-size:1rem}a{font-size:1rem;line-height:1.5rem}.s-subtitle{font-size:1rem;line-height:1.5rem;letter-spacing:.009rem}.s-subtitle-bold{font-size:1rem;line-height:1.5rem;font-weight:700;letter-spacing:.006rem}.s-body-1{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-body-2{font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem}.s-button-xl,.s-button-xl-bold{font-size:1.125rem;line-height:1.75rem;letter-spacing:.031rem}.s-button-lg,.s-button-lg-bold{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-button-sm,.s-button-sm-bold{font-size:.875rem;line-height:1.375rem;letter-spacing:.013rem}.s-button-xs,.s-button-xs-bold{font-size:.75rem;line-height:1.125rem;letter-spacing:.006rem}.s-button-xl-bold,.s-button-lg-bold,.s-button-sm-bold,.s-button-xs-bold{font-weight:700}.s-caption{font-size:.75rem;line-height:1.125rem;letter-spacing:.031rem}.s-overline{font-size:.75rem;line-height:1.125rem;font-weight:500;letter-spacing:.094rem}.s-link-1{font-size:1rem;line-height:1.5rem;text-decoration:underline;letter-spacing:.031rem}.s-link-2{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-link-3{font-size:.875rem;line-height:1.3rem;text-decoration:underline;letter-spacing:.031rem}.s-link-4{font-size:.875rem;line-height:1.3rem;letter-spacing:.031rem}@media only screen and (max-width: 37.5rem){h1{font-size:2rem;line-height:2.5rem}h2,h3{font-size:1.5rem;line-height:1.875rem}h4{font-size:1.25rem;line-height:1.5rem}h5{font-size:1rem;line-height:1.25rem}}:root{--primary-100: #E6F4FF;--primary-200: #CCE9FF;--primary-300: #99D3FF;--primary-400: #66BDFE;--primary-500: #33A7FE;--primary-600: #0091FE;--primary-700: #0074CB;--primary-800: #005798;--primary-900: #003A66;--primary-1000: #001D33;--secondary-100: #E4EDF9;--secondary-200: #BBC9DB;--secondary-300: #92A5BC;--secondary-400: #69809E;--secondary-500: #405C7F;--secondary-600: #173861;--secondary-700: #122D4E;--secondary-800: #0E223A;--secondary-900: #091627;--secondary-1000: #07111D;--neutrals-100: #000000;--neutrals-200: #1E1E1E;--neutrals-300: #3C3C3C;--neutrals-400: #5A5A5A;--neutrals-500: #787878;--neutrals-600: #969696;--neutrals-700: #B4B4B4;--neutrals-800: #CECECE;--neutrals-900: #E0E0E0;--neutrals-1000: #EEEEEE;--neutrals-1100: #F7F7F7;--neutrals-1200: #FFFFFF;--green-100: #F3F8F5;--green-200: #E5F2EB;--green-300: #C8E4D5;--green-400: #A7D5BD;--green-500: #7CC5A0;--green-600: #36B37E;--green-700: #30A071;--green-800: #2A8B62;--green-900: #227150;--green-1000: #185038;--yellow-100: #FEF6E6;--yellow-200: #FEEDCD;--yellow-300: #FFDD86;--yellow-400: #FFCB59;--yellow-500: #FFB828;--yellow-600: #F9A60C;--yellow-700: #EC9709;--yellow-800: #DF8806;--yellow-900: #D37A03;--yellow-1000: #B26000;--red-100: #FFF1EC;--red-200: #FFE8E0;--red-300: #FDD1CA;--red-400: #FBB9B3;--red-500: #F68783;--red-600: #F46A68;--red-700: #F14848;--red-800: #E12E2E;--red-900: #CB1818;--red-1000: #B30000;--blue-alpha-100: rgba(23, 56, 97, .05);--blue-alpha-200: rgba(23, 56, 97, .125);--blue-alpha-250: rgba(23, 56, 97, .15);--blue-alpha-280: rgba(23, 56, 97, .18);--blue-alpha-300: rgba(23, 56, 97, .25);--blue-alpha-400: rgba(23, 56, 97, .375);--blue-alpha-500: rgba(23, 56, 97, .5);--blue-alpha-600: rgba(23, 56, 97, .625);--blue-alpha-700: rgba(23, 56, 97, .75);--blue-alpha-800: rgba(23, 56, 97, .875);--cyan-alpha-100: rgba(0, 145, 254, .05);--cyan-alpha-200: rgba(0, 145, 254, .125);--cyan-alpha-300: rgba(0, 145, 254, .25);--cyan-alpha-400: rgba(0, 145, 254, .375);--cyan-alpha-500: rgba(0, 145, 254, .5);--cyan-alpha-600: rgba(0, 145, 254, .625);--cyan-alpha-700: rgba(0, 145, 254, .75);--cyan-alpha-800: rgba(0, 145, 254, .875);--green-alpha-100: rgba(54, 179, 126, .05);--green-alpha-200: rgba(54, 179, 126, .125);--green-alpha-300: rgba(54, 179, 126, .25);--green-alpha-400: rgba(54, 179, 126, .375);--green-alpha-500: rgba(54, 179, 126, .5);--green-alpha-600: rgba(54, 179, 126, .625);--green-alpha-700: rgba(54, 179, 126, .75);--green-alpha-800: rgba(54, 179, 126, .875);--red-alpha-100: rgba(255, 86, 48, .05);--red-alpha-200: rgba(255, 86, 48, .125);--red-alpha-300: rgba(255, 86, 48, .25);--red-alpha-400: rgba(255, 86, 48, .375);--red-alpha-500: rgba(255, 86, 48, .5);--red-alpha-600: rgba(255, 86, 48, .625);--red-alpha-700: rgba(255, 86, 48, .75);--red-alpha-800: rgba(255, 86, 48, .875);--yellow-alpha-100: rgba(255, 171, 0, .05);--yellow-alpha-200: rgba(255, 171, 0, .125);--yellow-alpha-300: rgba(255, 171, 0, .25);--yellow-alpha-400: rgba(255, 171, 0, .375);--yellow-alpha-500: rgba(255, 171, 0, .5);--yellow-alpha-600: rgba(255, 171, 0, .625);--yellow-alpha-700: rgba(255, 171, 0, .75);--yellow-alpha-800: rgba(255, 171, 0, .875);--E000: 0rem 0rem .125rem 0rem var(--blue-alpha-200);--E100: 0rem 0rem 10rem 0rem var(--blue-alpha-200);--E200: 0rem 0rem 1rem 0rem var(--blue-alpha-250);--E300: 0rem .313rem 1.5rem 0rem var(--blue-alpha-280);--E400: 0rem 0rem 1.5rem 0rem var(--blue-alpha-200), 0rem .5rem 1.25rem 0rem var(--blue-alpha-100), 0rem .25rem 1.75rem 0rem var(--blue-alpha-250);--E500: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75rem 0rem var(--blue-alpha-200);--E600: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75ren 0rem var(--blue-alpha-200);--focus-cyan--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--cyan-alpha-200);--focus-cyan--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--cyan-alpha-200);--focus-blue--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--blue-alpha-200);--focus-blue--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--blue-alpha-200);--focus-green--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--green-alpha-200);--focus-green--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--green-alpha-200);--focus-yellow--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--yellow-alpha-200);--focus-yellow--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--yellow-alpha-200);--focus-red--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--red-alpha-200);--focus-red--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--red-alpha-200)}body,html{height:100%;margin:0;overflow:hidden}.skeleton-loading{background:linear-gradient(.25turn,transparent,#fff,transparent),linear-gradient(#eee,#eee),radial-gradient(2.375rem circle at 1.188rem 1.188rem,#eee 50%,transparent 51%),linear-gradient(#eee,#eee);animation:skeleton-animation 1.5s infinite ease-in-out}@keyframes skeleton-animation{0%{opacity:.6}50%{opacity:.8}to{opacity:.6}}body::selection{background:var(--primary-600);color:var(--neutrals-100)}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cursor{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-25{width:25%!important}.w-33{width:33%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.p-auto{padding:auto}.px-auto{padding:0 auto}.py-auto{padding:auto 0}.pt-auto{padding-top:auto}.pb-auto{padding-bottom:auto}.pl-auto{padding-left:auto}.pr-auto{padding-right:auto}.p-0{padding:0}.p-1{padding:.25em}.p-2{padding:.5em}.p-3{padding:1em}.p-4{padding:1.5em}.p-5{padding:3em}.px-0{padding:0}.px-1{padding:0 .25em}.px-2{padding:0 .5em}.px-3{padding:0 1em}.px-4{padding:0 1.5em}.px-5{padding:0 3em}.py-0{padding:0}.py-1{padding:.25em 0}.py-2{padding:.5em 0}.py-3{padding:1em 0}.py-4{padding:1.5em 0}.py-5{padding:3em 0}.pt-0{padding-top:0}.pt-1{padding-top:.25em}.pt-2{padding-top:.5em}.pt-3{padding-top:1em}.pt-4{padding-top:1.5em}.pt-5{padding-top:3em}.pr-0{padding-right:0}.pr-1{padding-right:.25em}.pr-2{padding-right:.5em}.pr-3{padding-right:1em}.pr-4{padding-right:1.5em}.pr-5{padding-right:3em}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25em}.pb-2{padding-bottom:.5em}.pb-3{padding-bottom:1em}.pb-4{padding-bottom:1.5em}.pb-5{padding-bottom:3em}.pl-0{padding-left:0}.pl-1{padding-left:.25em}.pl-2{padding-left:.5em}.pl-3{padding-left:1em}.pl-4{padding-left:1.5em}.pl-5{padding-left:3em}.m-auto{margin:auto}.mx-auto{margin:0 auto}.my-auto{margin:auto 0}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.m-0{margin:0}.m-1{margin:.25em}.m-2{margin:.5em}.m-3{margin:1em}.m-4{margin:1.5em}.m-5{margin:3em}.mx-0{margin:0}.mx-1{margin:0 .25em}.mx-2{margin:0 .5em}.mx-3{margin:0 1em}.mx-4{margin:0 1.5em}.mx-5{margin:0 3em}.my-0{margin:0}.my-1{margin:.25em 0}.my-2{margin:.5em 0}.my-3{margin:1em 0}.my-4{margin:1.5em 0}.my-5{margin:3em 0}.mt-0{margin-top:0}.mt-1{margin-top:.25em}.mt-2{margin-top:.5em}.mt-3{margin-top:1em}.mt-4{margin-top:1.5em}.mt-5{margin-top:3em}.mr-0{margin-right:0}.mr-1{margin-right:.25em}.mr-2{margin-right:.5em}.mr-3{margin-right:1em}.mr-4{margin-right:1.5em}.mr-5{margin-right:3em}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25em}.mb-2{margin-bottom:.5em}.mb-3{margin-bottom:1em}.mb-4{margin-bottom:1.5em}.mb-5{margin-bottom:3em}.ml-0{margin-left:0}.ml-1{margin-left:.25em}.ml-2{margin-left:.5em}.ml-3{margin-left:1em}.ml-4{margin-left:1.5em}.ml-5{margin-left:3em}.d-flex{display:flex}.fx-right{flex-direction:row-reverse}.fx-left{flex-direction:row}.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-center{align-items:center}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.border,.border-1{border:.063rem solid}.border-2{border:.125rem solid}.border-left-1,.border-left{border-left:.063rem solid}.border-left-2{border-left:.125rem solid}.border-right-1,.border-right{border-right:.063rem solid}.border-right-2{border-right:.125rem solid}.border-top-1,.border-top{border-top:.063rem solid}.border-top-2{border-top:.125rem solid}.border-bottom-1,.border-bottom{border-bottom:.063rem solid}.border-bottom-2{border-bottom:.125rem solid}.border-y-1,.border-y{border-top:.063rem solid;border-bottom:.063rem solid}.border-y-2{border-top:.125rem solid;border-bottom:.125rem solid}.border-x-1,.border-x{border-left:.063rem solid;border-right:.063rem solid}.border-x-2{border-left:.125rem solid;border-right:.125rem solid}.br-1{border-radius:.125rem}.br-2{border-radius:.25rem}.br-3{border-radius:.5rem}.shadow-inner-1{box-shadow:inset 0 .125rem .125rem #0000001a}.shadow-inner-2{box-shadow:inset 0 .25rem .5rem #0000001a}.shadow-outer-1{box-shadow:0 .125rem .125rem #0000001a}.shadow-outer-2{box-shadow:0 .25rem .5rem #0000001a}.opacity-100{opacity:1}.opacity-90{opacity:.9}.opacity-80{opacity:.8}.opacity-70{opacity:.7}.opacity-60{opacity:.6}.opacity-50{opacity:.5}.opacity-40{opacity:.4}.opacity-30{opacity:.3}.opacity-20{opacity:.2}.opacity-10{opacity:.1}.highlighter,.highlighter-primary{color:var(--primary-600)}.highlighter-succes{color:var(--green-500)}.highlighter-warning{color:var(--yellow-600)}.highlighter-error{color:var(--red-600)}.highlighter-info{color:var(--secondary-600)}.s-scroll{overflow:auto}.s-scroll::-webkit-scrollbar{height:.4rem;width:.7rem}.s-scroll::-webkit-scrollbar-track{background-color:transparent}.s-scroll::-webkit-scrollbar-thumb{background-color:var(--neutrals-900);border-radius:1.25rem .813rem .813rem 1.25rem;border-right:.1em solid transparent;border-left:.3rem solid transparent;background-clip:content-box}\n"] }]
|
|
5909
|
+
args: [{ selector: 's-theme', template: '', encapsulation: ViewEncapsulation.None, styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap\";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}*{font-family:Roboto,Arial,sans-serif;font-size:1rem;letter-spacing:.013rem;line-height:1.25rem;font-weight:400}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}h1{font-size:2.5rem;line-height:3.75rem}h2{font-size:2rem;line-height:2.5rem}h3{font-size:1.75rem;line-height:2.2rem}h4{font-size:1.5rem;line-height:1.875rem}h5{font-size:1.25rem;line-height:1.5rem}h6{font-size:1rem;line-height:1.5rem}p{font-size:1rem}a{font-size:1rem;line-height:1.5rem}.s-subtitle{font-size:1rem;line-height:1.5rem;letter-spacing:.009rem}.s-subtitle-bold{font-size:1rem;line-height:1.5rem;font-weight:700;letter-spacing:.006rem}.s-body-1{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-body-2{font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem}.s-button-xl,.s-button-xl-bold{font-size:1.125rem;line-height:1.75rem;letter-spacing:.031rem}.s-button-lg,.s-button-lg-bold{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-button-sm,.s-button-sm-bold{font-size:.875rem;line-height:1.375rem;letter-spacing:.013rem}.s-button-xs,.s-button-xs-bold{font-size:.75rem;line-height:1.125rem;letter-spacing:.006rem}.s-button-xl-bold,.s-button-lg-bold,.s-button-sm-bold,.s-button-xs-bold{font-weight:700}.s-caption{font-size:.75rem;line-height:1.125rem;letter-spacing:.031rem}.s-overline{font-size:.75rem;line-height:1.125rem;font-weight:500;letter-spacing:.094rem}.s-link-1{font-size:1rem;line-height:1.5rem;text-decoration:underline;letter-spacing:.031rem}.s-link-2{font-size:1rem;line-height:1.5rem;letter-spacing:.031rem}.s-link-3{font-size:.875rem;line-height:1.3rem;text-decoration:underline;letter-spacing:.031rem}.s-link-4{font-size:.875rem;line-height:1.3rem;letter-spacing:.031rem}@media only screen and (max-width: 37.5rem){h1{font-size:2rem;line-height:2.5rem}h2,h3{font-size:1.5rem;line-height:1.875rem}h4{font-size:1.25rem;line-height:1.5rem}h5{font-size:1rem;line-height:1.25rem}}:root{--primary-100: #E6F4FF;--primary-200: #CCE9FF;--primary-300: #99D3FF;--primary-400: #66BDFE;--primary-500: #33A7FE;--primary-600: #0091FE;--primary-700: #0074CB;--primary-800: #005798;--primary-900: #003A66;--primary-1000: #001D33;--secondary-100: #E4EDF9;--secondary-200: #BBC9DB;--secondary-300: #92A5BC;--secondary-400: #69809E;--secondary-500: #405C7F;--secondary-600: #173861;--secondary-700: #122D4E;--secondary-800: #0E223A;--secondary-900: #091627;--secondary-1000: #07111D;--neutrals-100: #000000;--neutrals-200: #1E1E1E;--neutrals-300: #3C3C3C;--neutrals-400: #5A5A5A;--neutrals-500: #787878;--neutrals-600: #969696;--neutrals-700: #B4B4B4;--neutrals-800: #CECECE;--neutrals-900: #E0E0E0;--neutrals-1000: #EEEEEE;--neutrals-1100: #F7F7F7;--neutrals-1200: #FFFFFF;--green-100: #D9F8F0;--green-200: #C3F3E7;--green-300: #95E8CF;--green-400: #63DCB6;--green-500: #3BCD9E;--green-600: #33BB8F;--green-700: #2CAA81;--green-800: #249873;--green-900: #1C8865;--green-1000: #157757;--yellow-100: #FEF6E6;--yellow-200: #FEEDCD;--yellow-300: #FFDD86;--yellow-400: #FFCB59;--yellow-500: #FFB828;--yellow-600: #F9A60C;--yellow-700: #EC9709;--yellow-800: #DF8806;--yellow-900: #D37A03;--yellow-1000: #B26000;--red-100: #FFF1EC;--red-200: #FFE8E0;--red-300: #FDD1CA;--red-400: #FBB9B3;--red-500: #F68783;--red-600: #F46A68;--red-700: #F14848;--red-800: #E12E2E;--red-900: #CB1818;--red-1000: #B30000;--violet-100: #F7E3FF;--violet-200: #F0CDFF;--violet-300: #E4A5FF;--violet-400: #D46CFF;--violet-500: #C535FF;--violet-600: #B60FFF;--violet-700: #9600DF;--violet-800: #8806C3;--violet-900: #70079C;--violet-1000: #4D0076;--blue-alpha-100: rgba(23, 56, 97, .05);--blue-alpha-200: rgba(23, 56, 97, .125);--blue-alpha-250: rgba(23, 56, 97, .15);--blue-alpha-280: rgba(23, 56, 97, .18);--blue-alpha-300: rgba(23, 56, 97, .25);--blue-alpha-400: rgba(23, 56, 97, .375);--blue-alpha-500: rgba(23, 56, 97, .5);--blue-alpha-600: rgba(23, 56, 97, .625);--blue-alpha-700: rgba(23, 56, 97, .75);--blue-alpha-800: rgba(23, 56, 97, .875);--cyan-alpha-100: rgba(0, 145, 254, .05);--cyan-alpha-200: rgba(0, 145, 254, .125);--cyan-alpha-300: rgba(0, 145, 254, .25);--cyan-alpha-400: rgba(0, 145, 254, .375);--cyan-alpha-500: rgba(0, 145, 254, .5);--cyan-alpha-600: rgba(0, 145, 254, .625);--cyan-alpha-700: rgba(0, 145, 254, .75);--cyan-alpha-800: rgba(0, 145, 254, .875);--green-alpha-100: rgba(54, 179, 126, .05);--green-alpha-200: rgba(54, 179, 126, .125);--green-alpha-300: rgba(54, 179, 126, .25);--green-alpha-400: rgba(54, 179, 126, .375);--green-alpha-500: rgba(54, 179, 126, .5);--green-alpha-600: rgba(54, 179, 126, .625);--green-alpha-700: rgba(54, 179, 126, .75);--green-alpha-800: rgba(54, 179, 126, .875);--red-alpha-100: rgba(255, 86, 48, .05);--red-alpha-200: rgba(255, 86, 48, .125);--red-alpha-300: rgba(255, 86, 48, .25);--red-alpha-400: rgba(255, 86, 48, .375);--red-alpha-500: rgba(255, 86, 48, .5);--red-alpha-600: rgba(255, 86, 48, .625);--red-alpha-700: rgba(255, 86, 48, .75);--red-alpha-800: rgba(255, 86, 48, .875);--yellow-alpha-100: rgba(255, 171, 0, .05);--yellow-alpha-200: rgba(255, 171, 0, .125);--yellow-alpha-300: rgba(255, 171, 0, .25);--yellow-alpha-400: rgba(255, 171, 0, .375);--yellow-alpha-500: rgba(255, 171, 0, .5);--yellow-alpha-600: rgba(255, 171, 0, .625);--yellow-alpha-700: rgba(255, 171, 0, .75);--yellow-alpha-800: rgba(255, 171, 0, .875);--E000: 0rem 0rem .125rem 0rem var(--blue-alpha-200);--E100: 0rem 0rem 10rem 0rem var(--blue-alpha-200);--E200: 0rem 0rem 1rem 0rem var(--blue-alpha-250);--E300: 0rem .313rem 1.5rem 0rem var(--blue-alpha-280);--E400: 0rem 0rem 1.5rem 0rem var(--blue-alpha-200), 0rem .5rem 1.25rem 0rem var(--blue-alpha-100), 0rem .25rem 1.75rem 0rem var(--blue-alpha-250);--E500: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75rem 0rem var(--blue-alpha-200);--E600: 0rem 1rem 2rem 0rem var(--blue-alpha-250), 0rem 0rem .625rem 0rem var(--blue-alpha-100), 0rem 1rem 1.75ren 0rem var(--blue-alpha-200);--focus-cyan--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--cyan-alpha-200);--focus-cyan--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--cyan-alpha-200);--focus-blue--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--blue-alpha-200);--focus-blue--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--blue-alpha-200);--focus-green--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--green-alpha-200);--focus-green--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--green-alpha-200);--focus-yellow--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--yellow-alpha-200);--focus-yellow--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--yellow-alpha-200);--focus-red--sm: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .125rem var(--red-alpha-200);--focus-red--md: 0rem .063rem .125rem 0rem var(--blue-alpha-100), 0rem 0rem 0rem .25rem var(--red-alpha-200)}body,html{height:100%;margin:0;overflow:hidden}.skeleton-loading{background:linear-gradient(.25turn,transparent,#fff,transparent),linear-gradient(#eee,#eee),radial-gradient(2.375rem circle at 1.188rem 1.188rem,#eee 50%,transparent 51%),linear-gradient(#eee,#eee);animation:skeleton-animation 1.5s infinite ease-in-out}@keyframes skeleton-animation{0%{opacity:.6}50%{opacity:.8}to{opacity:.6}}body::selection{background:var(--primary-600);color:var(--neutrals-100)}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cursor{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-25{width:25%!important}.w-33{width:33%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.p-auto{padding:auto}.px-auto{padding:0 auto}.py-auto{padding:auto 0}.pt-auto{padding-top:auto}.pb-auto{padding-bottom:auto}.pl-auto{padding-left:auto}.pr-auto{padding-right:auto}.p-0{padding:0}.p-1{padding:.25em}.p-2{padding:.5em}.p-3{padding:1em}.p-4{padding:1.5em}.p-5{padding:3em}.px-0{padding:0}.px-1{padding:0 .25em}.px-2{padding:0 .5em}.px-3{padding:0 1em}.px-4{padding:0 1.5em}.px-5{padding:0 3em}.py-0{padding:0}.py-1{padding:.25em 0}.py-2{padding:.5em 0}.py-3{padding:1em 0}.py-4{padding:1.5em 0}.py-5{padding:3em 0}.pt-0{padding-top:0}.pt-1{padding-top:.25em}.pt-2{padding-top:.5em}.pt-3{padding-top:1em}.pt-4{padding-top:1.5em}.pt-5{padding-top:3em}.pr-0{padding-right:0}.pr-1{padding-right:.25em}.pr-2{padding-right:.5em}.pr-3{padding-right:1em}.pr-4{padding-right:1.5em}.pr-5{padding-right:3em}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25em}.pb-2{padding-bottom:.5em}.pb-3{padding-bottom:1em}.pb-4{padding-bottom:1.5em}.pb-5{padding-bottom:3em}.pl-0{padding-left:0}.pl-1{padding-left:.25em}.pl-2{padding-left:.5em}.pl-3{padding-left:1em}.pl-4{padding-left:1.5em}.pl-5{padding-left:3em}.m-auto{margin:auto}.mx-auto{margin:0 auto}.my-auto{margin:auto 0}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.m-0{margin:0}.m-1{margin:.25em}.m-2{margin:.5em}.m-3{margin:1em}.m-4{margin:1.5em}.m-5{margin:3em}.mx-0{margin:0}.mx-1{margin:0 .25em}.mx-2{margin:0 .5em}.mx-3{margin:0 1em}.mx-4{margin:0 1.5em}.mx-5{margin:0 3em}.my-0{margin:0}.my-1{margin:.25em 0}.my-2{margin:.5em 0}.my-3{margin:1em 0}.my-4{margin:1.5em 0}.my-5{margin:3em 0}.mt-0{margin-top:0}.mt-1{margin-top:.25em}.mt-2{margin-top:.5em}.mt-3{margin-top:1em}.mt-4{margin-top:1.5em}.mt-5{margin-top:3em}.mr-0{margin-right:0}.mr-1{margin-right:.25em}.mr-2{margin-right:.5em}.mr-3{margin-right:1em}.mr-4{margin-right:1.5em}.mr-5{margin-right:3em}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25em}.mb-2{margin-bottom:.5em}.mb-3{margin-bottom:1em}.mb-4{margin-bottom:1.5em}.mb-5{margin-bottom:3em}.ml-0{margin-left:0}.ml-1{margin-left:.25em}.ml-2{margin-left:.5em}.ml-3{margin-left:1em}.ml-4{margin-left:1.5em}.ml-5{margin-left:3em}.d-flex{display:flex}.fx-right{flex-direction:row-reverse}.fx-left{flex-direction:row}.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-center{align-items:center}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.border,.border-1{border:.063rem solid}.border-2{border:.125rem solid}.border-left-1,.border-left{border-left:.063rem solid}.border-left-2{border-left:.125rem solid}.border-right-1,.border-right{border-right:.063rem solid}.border-right-2{border-right:.125rem solid}.border-top-1,.border-top{border-top:.063rem solid}.border-top-2{border-top:.125rem solid}.border-bottom-1,.border-bottom{border-bottom:.063rem solid}.border-bottom-2{border-bottom:.125rem solid}.border-y-1,.border-y{border-top:.063rem solid;border-bottom:.063rem solid}.border-y-2{border-top:.125rem solid;border-bottom:.125rem solid}.border-x-1,.border-x{border-left:.063rem solid;border-right:.063rem solid}.border-x-2{border-left:.125rem solid;border-right:.125rem solid}.br-1{border-radius:.125rem}.br-2{border-radius:.25rem}.br-3{border-radius:.5rem}.shadow-inner-1{box-shadow:inset 0 .125rem .125rem #0000001a}.shadow-inner-2{box-shadow:inset 0 .25rem .5rem #0000001a}.shadow-outer-1{box-shadow:0 .125rem .125rem #0000001a}.shadow-outer-2{box-shadow:0 .25rem .5rem #0000001a}.opacity-100{opacity:1}.opacity-90{opacity:.9}.opacity-80{opacity:.8}.opacity-70{opacity:.7}.opacity-60{opacity:.6}.opacity-50{opacity:.5}.opacity-40{opacity:.4}.opacity-30{opacity:.3}.opacity-20{opacity:.2}.opacity-10{opacity:.1}.highlighter,.highlighter-primary{color:var(--primary-600)}.highlighter-succes{color:var(--green-500)}.highlighter-warning{color:var(--yellow-600)}.highlighter-error{color:var(--red-600)}.highlighter-info{color:var(--secondary-600)}.s-scroll{overflow:auto}.s-scroll::-webkit-scrollbar{height:.4rem;width:.7rem}.s-scroll::-webkit-scrollbar-track{background-color:transparent}.s-scroll::-webkit-scrollbar-thumb{background-color:var(--neutrals-900);border-radius:1.25rem .813rem .813rem 1.25rem;border-right:.1em solid transparent;border-left:.3rem solid transparent;background-clip:content-box}\n"] }]
|
|
5895
5910
|
}] });
|
|
5896
5911
|
|
|
5897
5912
|
class SThemeModule {
|
|
@@ -6277,7 +6292,7 @@ class STabsComponent {
|
|
|
6277
6292
|
this.eventSelect.emit(tab);
|
|
6278
6293
|
}
|
|
6279
6294
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6280
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs", id: "id" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\n [id]=\"id\"\n *ngIf=\"tabsConfig\"\n [ngClass]=\"{\n 's-tabs__background': configTabs?.background,\n 's-tabs__pill': configTabs?.pill,\n 's-tabs__sm': configTabs?.size === 'sm',\n 's-tabs__vertical': configTabs?.orientation === 'vertical',\n 's-tabs__underline': configTabs?.underline,\n 's-tabs__backgroundSelected': configTabs?.backgroundSelected,\n }\"\n [ngStyle]=\"{\n '--tabs-width': configTabs?.width + '%',\n '--tabs-height': configTabs?.height + '%',\n }\">\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig; index as i\"\n [ngClass]=\"{\n selected: tab.selected,\n highlight: tab.highlight,\n disabled: tab.disabled,\n }\"\n tabindex=\"0\"\n (keydown.enter)=\"selectTab(tab)\"\n (click)=\"selectTab(tab)\">\n <s-icon-mat\n class=\"s-tabs__icon\"\n *ngIf=\"tab.icon\"\n [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n >{{ tab.icon }}</s-icon-mat\n >\n <span *ngIf=\"tab.text\" class=\"s-tabs__text\" [id]=\"id + '-' + i\">{{ tab.text }}</span>\n <s-badge *ngIf=\"tab.badge\" [type]=\"tab.badgeType ? tab.badgeType : 'primary'\">{{ tab.badge }}</s-badge>\n </div>\n </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto;height:var(--tabs-height, auto)}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center;height:13%}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}.s-tabs__vertical{display:flex;width:var(--tabs-width, max-content);height:var(--tabs-height, 100%)}.s-tabs__vertical s-icon-mat.s-tabs__icon{padding-left:.6rem;padding-right:.2rem}.s-tabs__vertical .s-tabs__container{flex-direction:column;width:100%!important;justify-content:flex-start;align-items:stretch}.s-tabs__vertical.s-tabs__pill{padding-left:.7rem;padding-right:.7rem;padding-bottom:var(--_pill-padding-bottom, .5rem)}.s-tabs__vertical.s-tabs__pill .s-tabs__container{display:flex;flex-direction:column;width:100%!important;justify-content:flex-start;align-items:center!important}.s-tabs__vertical .s-tabs__content{justify-content:flex-start;text-align:left;flex-basis:auto;border-bottom:none;border-left:.063rem solid transparent;border-radius:0}.s-tabs__vertical .s-tabs__content.selected{border-left:.188rem solid var(--primary-600);border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;background-color:var(--primary-200)}.s-tabs__vertical .s-tabs__content:not(:has(.s-tabs__icon)) .s-tabs__text{padding-left:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__content{border-left:0;border-radius:.25rem;width:100%}.s-tabs__vertical.s-tabs__pill .s-tabs__content.selected{border-left:0}.s-tabs__vertical.s-tabs__underline.s-tabs__pill .s-tabs__content.selected{border-bottom:.15rem solid var(--primary-600);border-bottom-left-radius:0;border-bottom-right-radius:0}.s-tabs__vertical.s-tabs__backgroundSelected.s-tabs__pill .s-tabs__content.selected{background:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "
|
|
6295
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs", id: "id" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\n [id]=\"id\"\n *ngIf=\"tabsConfig\"\n [ngClass]=\"{\n 's-tabs__background': configTabs?.background,\n 's-tabs__pill': configTabs?.pill,\n 's-tabs__sm': configTabs?.size === 'sm',\n 's-tabs__vertical': configTabs?.orientation === 'vertical',\n 's-tabs__underline': configTabs?.underline,\n 's-tabs__backgroundSelected': configTabs?.backgroundSelected,\n }\"\n [ngStyle]=\"{\n '--tabs-width': configTabs?.width + '%',\n '--tabs-height': configTabs?.height + '%',\n }\">\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig; index as i\"\n [ngClass]=\"{\n selected: tab.selected,\n highlight: tab.highlight,\n disabled: tab.disabled,\n }\"\n tabindex=\"0\"\n (keydown.enter)=\"selectTab(tab)\"\n (click)=\"selectTab(tab)\">\n <s-icon-mat\n class=\"s-tabs__icon\"\n *ngIf=\"tab.icon\"\n [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n >{{ tab.icon }}</s-icon-mat\n >\n <span *ngIf=\"tab.text\" class=\"s-tabs__text\" [id]=\"id + '-' + i\">{{ tab.text }}</span>\n <s-badge *ngIf=\"tab.badge\" [type]=\"tab.badgeType ? tab.badgeType : 'primary'\">{{ tab.badge }}</s-badge>\n </div>\n </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto;height:var(--tabs-height, auto)}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center;height:13%}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}.s-tabs__vertical{display:flex;width:var(--tabs-width, max-content);height:var(--tabs-height, 100%)}.s-tabs__vertical s-icon-mat.s-tabs__icon{padding-left:.6rem;padding-right:.2rem}.s-tabs__vertical .s-tabs__container{flex-direction:column;width:100%!important;justify-content:flex-start;align-items:stretch}.s-tabs__vertical.s-tabs__pill{padding-left:.7rem;padding-right:.7rem;padding-bottom:var(--_pill-padding-bottom, .5rem)}.s-tabs__vertical.s-tabs__pill .s-tabs__container{display:flex;flex-direction:column;width:100%!important;justify-content:flex-start;align-items:center!important}.s-tabs__vertical .s-tabs__content{justify-content:flex-start;text-align:left;flex-basis:auto;border-bottom:none;border-left:.063rem solid transparent;border-radius:0}.s-tabs__vertical .s-tabs__content.selected{border-left:.188rem solid var(--primary-600);border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;background-color:var(--primary-200)}.s-tabs__vertical .s-tabs__content:not(:has(.s-tabs__icon)) .s-tabs__text{padding-left:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__content{border-left:0;border-radius:.25rem;width:100%}.s-tabs__vertical.s-tabs__pill .s-tabs__content.selected{border-left:0}.s-tabs__vertical.s-tabs__underline.s-tabs__pill .s-tabs__content.selected{border-bottom:.15rem solid var(--primary-600);border-bottom-left-radius:0;border-bottom-right-radius:0}.s-tabs__vertical.s-tabs__backgroundSelected.s-tabs__pill .s-tabs__content.selected{background:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["id", "type", "size", "disabled", "icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6281
6296
|
}
|
|
6282
6297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, decorators: [{
|
|
6283
6298
|
type: Component,
|
|
@@ -6366,8 +6381,10 @@ class SToolbarTopComponent {
|
|
|
6366
6381
|
}
|
|
6367
6382
|
ngOnChanges(changes) {
|
|
6368
6383
|
if (changes['config']) {
|
|
6369
|
-
if (this.config.search
|
|
6370
|
-
this.inputSearchConfig
|
|
6384
|
+
if (this.config.search === undefined || this.config.search) {
|
|
6385
|
+
if (this.inputSearchConfig) {
|
|
6386
|
+
this.inputSearchConfig.disabled = this.config.filtersDisabled ?? false;
|
|
6387
|
+
}
|
|
6371
6388
|
}
|
|
6372
6389
|
if (this.config.select) {
|
|
6373
6390
|
this.config.select.disabled = this.config.filtersDisabled ?? false;
|
|
@@ -6417,6 +6434,7 @@ class SToolbarTopComponent {
|
|
|
6417
6434
|
placeholder: this.config.placeholderSearch ?? 'Buscar',
|
|
6418
6435
|
type: INPUT_TYPE.SEARCH,
|
|
6419
6436
|
useFormControl: false,
|
|
6437
|
+
hideErrorText: true,
|
|
6420
6438
|
};
|
|
6421
6439
|
}
|
|
6422
6440
|
if (this.config.select) {
|
|
@@ -7226,6 +7244,7 @@ class STableDoubleComponent {
|
|
|
7226
7244
|
this.toggleExpandEvent = new EventEmitter();
|
|
7227
7245
|
this.reorderItemEvent = new EventEmitter();
|
|
7228
7246
|
this.switchChangeEvent = new EventEmitter();
|
|
7247
|
+
this.searchEvent = new EventEmitter();
|
|
7229
7248
|
this.disabledButtonLeft = signal(true);
|
|
7230
7249
|
this.disabledButtonRight = signal(true);
|
|
7231
7250
|
this.itemsTableLeft = [];
|
|
@@ -7248,6 +7267,17 @@ class STableDoubleComponent {
|
|
|
7248
7267
|
title: this._sTranslateService.instant('ui.tableDouble.emptyTitleRight'), //'No hay elementos agregados',
|
|
7249
7268
|
};
|
|
7250
7269
|
}
|
|
7270
|
+
//si tiene items checkeados hay que actualizar el contador del bottomStatusBarEvent
|
|
7271
|
+
const itemsChecked = this.config.tableLeftItems.filter(item => item.checked);
|
|
7272
|
+
if (itemsChecked.length > 0) {
|
|
7273
|
+
this.updateCounter();
|
|
7274
|
+
}
|
|
7275
|
+
}
|
|
7276
|
+
ngOnChanges(changes) {
|
|
7277
|
+
if (changes['config'] && !changes['config'].isFirstChange()) {
|
|
7278
|
+
this.id = this.config.id ?? this.id;
|
|
7279
|
+
this.cloneItemsTables();
|
|
7280
|
+
}
|
|
7251
7281
|
}
|
|
7252
7282
|
onDragStart(event, itemId) {
|
|
7253
7283
|
this.dragItemId = itemId;
|
|
@@ -7357,6 +7387,20 @@ class STableDoubleComponent {
|
|
|
7357
7387
|
this.emptyPositionEvent.emit(isLeftTable);
|
|
7358
7388
|
}
|
|
7359
7389
|
orderBy(event, isLeftTable) {
|
|
7390
|
+
const tableConfig = isLeftTable ? this.config.tableLeftConfig : this.config.tableRightConfig;
|
|
7391
|
+
if (tableConfig.hidePagination && !tableConfig.scroll) {
|
|
7392
|
+
const sortedItems = [...this.getItems(isLeftTable)].sort((a, b) => {
|
|
7393
|
+
const valueA = a[event.SortField];
|
|
7394
|
+
const valueB = b[event.SortField];
|
|
7395
|
+
if (valueA < valueB)
|
|
7396
|
+
return event.SortAsc ? -1 : 1;
|
|
7397
|
+
if (valueA > valueB)
|
|
7398
|
+
return event.SortAsc ? 1 : -1;
|
|
7399
|
+
return 0;
|
|
7400
|
+
});
|
|
7401
|
+
this.setItems(isLeftTable, sortedItems);
|
|
7402
|
+
return;
|
|
7403
|
+
}
|
|
7360
7404
|
this.orderByPositionEvent.emit({ isLeftTable, value: event });
|
|
7361
7405
|
}
|
|
7362
7406
|
page(event, isLeftTable) {
|
|
@@ -7400,20 +7444,16 @@ class STableDoubleComponent {
|
|
|
7400
7444
|
this.updateCounter();
|
|
7401
7445
|
}
|
|
7402
7446
|
search(event, isLeftTable) {
|
|
7403
|
-
|
|
7404
|
-
const
|
|
7405
|
-
if (
|
|
7406
|
-
this.
|
|
7407
|
-
|
|
7408
|
-
|
|
7409
|
-
this.
|
|
7447
|
+
// Si la tabla no tiene paginación ni scroll, se asume que el filtrado es local
|
|
7448
|
+
const tableConfig = isLeftTable ? this.config.tableLeftConfig : this.config.tableRightConfig;
|
|
7449
|
+
if (tableConfig.hidePagination && !tableConfig.scroll) {
|
|
7450
|
+
const sourceItems = isLeftTable ? this.itemsTableLeft : this.itemsTableRightData;
|
|
7451
|
+
const lowerCaseEvent = event.toLowerCase();
|
|
7452
|
+
const filteredItems = sourceItems.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(lowerCaseEvent)));
|
|
7453
|
+
this.setItems(isLeftTable, filteredItems);
|
|
7454
|
+
return;
|
|
7410
7455
|
}
|
|
7411
|
-
|
|
7412
|
-
getFilteredItems(original, searchTerm) {
|
|
7413
|
-
const term = searchTerm.toLowerCase().trim();
|
|
7414
|
-
if (!term)
|
|
7415
|
-
return [...original];
|
|
7416
|
-
return original.filter(item => Object.values(item).some(value => String(value).toLowerCase().includes(term)));
|
|
7456
|
+
this.searchEvent.emit({ isLeftTable, value: event });
|
|
7417
7457
|
}
|
|
7418
7458
|
updateCounter() {
|
|
7419
7459
|
const updateStatusBar = (items, config, setter) => {
|
|
@@ -7426,8 +7466,8 @@ class STableDoubleComponent {
|
|
|
7426
7466
|
disabled: items.length === 0,
|
|
7427
7467
|
total: items.length,
|
|
7428
7468
|
});
|
|
7429
|
-
// Habilitar botón si hay items
|
|
7430
|
-
setter.set(counterCheckbox === 0
|
|
7469
|
+
// Habilitar botón si hay items checkeados
|
|
7470
|
+
setter.set(counterCheckbox === 0);
|
|
7431
7471
|
};
|
|
7432
7472
|
updateStatusBar(this.config.tableLeftItems, this.config.tableLeftConfig, this.disabledButtonLeft);
|
|
7433
7473
|
updateStatusBar(this.config.tableRightItems, this.config.tableRightConfig, this.disabledButtonRight);
|
|
@@ -7516,7 +7556,7 @@ class STableDoubleComponent {
|
|
|
7516
7556
|
this.switchChangeEvent.emit({ isLeftTable, itemId, columnId, value });
|
|
7517
7557
|
}
|
|
7518
7558
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STableDoubleComponent, isStandalone: true, selector: "s-table-double", inputs: { config: "config" }, outputs: { actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", eventUpdateTables: "eventUpdateTables", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pagePositionEvent: "pagePositionEvent", paginationPositionEvent: "paginationPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", rowSelectPositionEvent: "rowSelectPositionEvent", actionEvent: "actionEvent", toggleExpandEvent: "toggleExpandEvent", reorderItemEvent: "reorderItemEvent", switchChangeEvent: "switchChangeEvent" }, ngImport: i0, template: "<div class=\"s-table-double\" [id]=\"id\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete\n [config]=\"config.tableLeftConfig\"\n (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\"\n (emptyEvent)=\"empty(true)\"\n (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\"\n (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\"\n (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\"\n (scrollEvent)=\"onScroll(true)\"\n (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track item) {\n <div class=\"s-table-double__list\">\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [id]=\"id + '-listLeft-' + item.id\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\"\n (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track item) {\n <tr\n [ngClass]=\"{\n active: !config.disableLeftRowSelection && config.isTreeMode && item.selected,\n }\"\n (click)=\"!config.disableLeftRowSelection && config.isTreeMode && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [id]=\"id + '-checkboxLeft-' + item.id\"\n [(ngModel)]=\"item.checked\"\n (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td [id]=\"id + '-itemLeft-' + item.id\">{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button\n [id]=\"id + '-addButton'\"\n (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'add' : 'arrow_forward' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n <div>\n <s-button\n [id]=\"id + '-removeButton'\"\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'remove' : 'arrow_back' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete\n [config]=\"config.tableRightConfig\"\n (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\"\n (emptyEvent)=\"empty(false)\"\n (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\"\n (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\"\n (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\"\n (scrollEvent)=\"onScroll(false)\"\n (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [id]=\"id + '-listRight-' + item.id\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\"\n (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n }\n } @else {\n @for (item of config.tableRightItems; track item) {\n <tr\n [ngClass]=\"{ active: config.isTreeMode && item.selected }\"\n (click)=\"config.isTreeMode && rowClick(item, false)\">\n <td\n class=\"s-table-double__tree-cell\"\n [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? getTreeCellColspan() : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat\n class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input\n type=\"checkbox\"\n [id]=\"id + '-checkboxRight-' + item.id\"\n [(ngModel)]=\"item.checked\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (\n column.id !== 'checkbox' &&\n column.id !== undefined &&\n !(config.isTreeMode && column.id === 'name') &&\n column.id !== 'actions'\n ) {\n <td [id]=\"id + '-itemRight-' + item.id\" (click)=\"column.switchConfig && $event.stopPropagation()\">\n @if (column.switchConfig && item[column.id!] !== undefined) {\n <s-toggle-switch\n [config]=\"column.switchConfig\"\n [(ngModel)]=\"item[column.id!]\"\n (valueChange)=\"onSwitchChange($event, item.id, column.id!, false)\">\n </s-toggle-switch>\n } @else if (!column.switchConfig) {\n {{ item[column.id] }}\n }\n </td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons\n [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: STableCompleteModule }, { kind: "component", type: TableCompleteComponent, selector: "s-table-complete", inputs: ["config", "id"], outputs: ["actionEvent", "checkAllEvent", "deleteEvent", "emptyEvent", "filterEvent", "orderByEvent", "pageEvent", "paginationEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent", "bottomStatusBarEvent", "scrollEvent"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "id", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size", "id"] }, { kind: "ngmodule", type: TableActionsButtonsModule }, { kind: "component", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: ["tableActionsButtons", "id"], outputs: ["clickButtonEvent"] }, { kind: "ngmodule", type: SToggleSwitchModule }, { kind: "component", type: ToggleSwitchFormComponent, selector: "s-toggle-switch", inputs: ["config", "id"], outputs: ["blur", "focus", "valueChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7559
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STableDoubleComponent, isStandalone: true, selector: "s-table-double", inputs: { config: "config" }, outputs: { actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", eventUpdateTables: "eventUpdateTables", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pagePositionEvent: "pagePositionEvent", paginationPositionEvent: "paginationPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", rowSelectPositionEvent: "rowSelectPositionEvent", actionEvent: "actionEvent", toggleExpandEvent: "toggleExpandEvent", reorderItemEvent: "reorderItemEvent", switchChangeEvent: "switchChangeEvent", searchEvent: "searchEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"s-table-double\" [id]=\"id\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete [config]=\"config.tableLeftConfig\" (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\" (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\" (emptyEvent)=\"empty(true)\" (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\" (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\" (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\" (scrollEvent)=\"onScroll(true)\" (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track $index) {\n <div class=\"s-table-double__list\">\n <s-list [size]=\"'xs'\" [attr.data-item-id]=\"item.id\" [draggable]=\"true\" [id]=\"id + '-listLeft-' + item.id\"\n [selected]=\"item.checked\" (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\" (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track $index) {\n <tr [ngClass]=\"{\n active: !config.disableLeftRowSelection && config.isTreeMode && item.selected,\n }\" (click)=\"!config.disableLeftRowSelection && config.isTreeMode && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [id]=\"id + '-checkboxLeft-' + item.id\" [(ngModel)]=\"item.checked\"\n (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td [id]=\"id + '-itemLeft-' + item.id\">{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button [id]=\"id + '-addButton'\" (click)=\"addItem()\" (keydown.enter)=\"addItem()\" position=\"normal\"\n [disabled]=\"disabledButtonLeft()\" [pill]=\"true\"><s-icon-mat><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'add' : 'arrow_forward' }}\n </span></s-icon-mat></s-button>\n </div>\n <div>\n <s-button [id]=\"id + '-removeButton'\" (click)=\"removeItem()\" (keydown.enter)=\"removeItem()\" position=\"normal\"\n type=\"secondary\" [disabled]=\"disabledButtonRight()\" [pill]=\"true\"><s-icon-mat><span\n class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'remove' : 'arrow_back' }}\n </span></s-icon-mat></s-button>\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete [config]=\"config.tableRightConfig\" (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\" (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\" (emptyEvent)=\"empty(false)\" (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\" (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\" (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\" (scrollEvent)=\"onScroll(false)\" (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track $index) {\n <div class=\"s-table-double__list\">\n <s-list [size]=\"'xs'\" [id]=\"id + '-listRight-' + item.id\" [attr.data-item-id]=\"item.id\" [draggable]=\"true\"\n [selected]=\"item.checked\" (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\" (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableRightItems; track $index) {\n <tr [ngClass]=\"{ active: config.isTreeMode && item.selected }\"\n (click)=\"config.isTreeMode && rowClick(item, false)\">\n <td class=\"s-table-double__tree-cell\" [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? getTreeCellColspan() : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\" (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input type=\"checkbox\" [id]=\"id + '-checkboxRight-' + item.id\" [(ngModel)]=\"item.checked\"\n (click)=\"$event.stopPropagation()\" (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (\n column.id !== 'checkbox' &&\n column.id !== undefined &&\n !(config.isTreeMode && column.id === 'name') &&\n column.id !== 'actions'\n ) {\n <td [id]=\"id + '-itemRight-' + item.id\" (click)=\"column.switchConfig && $event.stopPropagation()\">\n @if (column.switchConfig && item[column.id!] !== undefined) {\n <s-toggle-switch [config]=\"column.switchConfig\" [(ngModel)]=\"item[column.id!]\"\n (valueChange)=\"onSwitchChange($event, item.id, column.id!, false)\">\n </s-toggle-switch>\n } @else if (!column.switchConfig) {\n {{ item[column.id] }}\n }\n </td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double__list{margin:.5rem .8rem}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: STableCompleteModule }, { kind: "component", type: TableCompleteComponent, selector: "s-table-complete", inputs: ["config", "id"], outputs: ["actionEvent", "checkAllEvent", "deleteEvent", "emptyEvent", "filterEvent", "orderByEvent", "pageEvent", "paginationEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent", "bottomStatusBarEvent", "scrollEvent"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "id", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type", "id"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size", "id"] }, { kind: "ngmodule", type: TableActionsButtonsModule }, { kind: "component", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: ["tableActionsButtons", "id"], outputs: ["clickButtonEvent"] }, { kind: "ngmodule", type: SToggleSwitchModule }, { kind: "component", type: ToggleSwitchFormComponent, selector: "s-toggle-switch", inputs: ["config", "id"], outputs: ["blur", "focus", "valueChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7520
7560
|
}
|
|
7521
7561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, decorators: [{
|
|
7522
7562
|
type: Component,
|
|
@@ -7529,7 +7569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7529
7569
|
SListModule,
|
|
7530
7570
|
TableActionsButtonsModule,
|
|
7531
7571
|
SToggleSwitchModule,
|
|
7532
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\" [id]=\"id\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete\n [config]=\"config.tableLeftConfig\"\n (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\"\n (emptyEvent)=\"empty(true)\"\n (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\"\n (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\"\n (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\"\n (scrollEvent)=\"onScroll(true)\"\n (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track item) {\n <div class=\"s-table-double__list\">\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [id]=\"id + '-listLeft-' + item.id\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\"\n (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track item) {\n <tr\n [ngClass]=\"{\n active: !config.disableLeftRowSelection && config.isTreeMode && item.selected,\n }\"\n (click)=\"!config.disableLeftRowSelection && config.isTreeMode && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [id]=\"id + '-checkboxLeft-' + item.id\"\n [(ngModel)]=\"item.checked\"\n (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td [id]=\"id + '-itemLeft-' + item.id\">{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button\n [id]=\"id + '-addButton'\"\n (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'add' : 'arrow_forward' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n <div>\n <s-button\n [id]=\"id + '-removeButton'\"\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat\n ><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'remove' : 'arrow_back' }}\n </span></s-icon-mat\n ></s-button\n >\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete\n [config]=\"config.tableRightConfig\"\n (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\"\n (emptyEvent)=\"empty(false)\"\n (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\"\n (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\"\n (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\"\n (scrollEvent)=\"onScroll(false)\"\n (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [id]=\"id + '-listRight-' + item.id\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.checked\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\"\n (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n }\n } @else {\n @for (item of config.tableRightItems; track item) {\n <tr\n [ngClass]=\"{ active: config.isTreeMode && item.selected }\"\n (click)=\"config.isTreeMode && rowClick(item, false)\">\n <td\n class=\"s-table-double__tree-cell\"\n [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? getTreeCellColspan() : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat\n class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input\n type=\"checkbox\"\n [id]=\"id + '-checkboxRight-' + item.id\"\n [(ngModel)]=\"item.checked\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (\n column.id !== 'checkbox' &&\n column.id !== undefined &&\n !(config.isTreeMode && column.id === 'name') &&\n column.id !== 'actions'\n ) {\n <td [id]=\"id + '-itemRight-' + item.id\" (click)=\"column.switchConfig && $event.stopPropagation()\">\n @if (column.switchConfig && item[column.id!] !== undefined) {\n <s-toggle-switch\n [config]=\"column.switchConfig\"\n [(ngModel)]=\"item[column.id!]\"\n (valueChange)=\"onSwitchChange($event, item.id, column.id!, false)\">\n </s-toggle-switch>\n } @else if (!column.switchConfig) {\n {{ item[column.id] }}\n }\n </td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons\n [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"] }]
|
|
7572
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\" [id]=\"id\">\n <div class=\"s-table-double__header\"></div>\n <div class=\"s-table-double__body\">\n <div class=\"s-table-double__body__left\">\n <s-table-complete [config]=\"config.tableLeftConfig\" (actionEvent)=\"action(true)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\" (checkAllEvent)=\"checkAllEvent($event, true)\"\n (deleteEvent)=\"delete(true)\" (emptyEvent)=\"empty(true)\" (filterEvent)=\"filter($event, true)\"\n (multiSelectEvent)=\"multiSelect($event, true)\" (orderByEvent)=\"orderBy($event, true)\"\n (pageEvent)=\"page($event, true)\" (paginationEvent)=\"paginationEmitter($event, true)\"\n (pillButtonEvent)=\"pillButton(true)\" (scrollEvent)=\"onScroll(true)\" (searchEvent)=\"search($event, true)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableLeftItems; track $index) {\n <div class=\"s-table-double__list\">\n <s-list [size]=\"'xs'\" [attr.data-item-id]=\"item.id\" [draggable]=\"true\" [id]=\"id + '-listLeft-' + item.id\"\n [selected]=\"item.checked\" (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, true)\" (click)=\"selectItem(item.id, true)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableLeftItems; track $index) {\n <tr [ngClass]=\"{\n active: !config.disableLeftRowSelection && config.isTreeMode && item.selected,\n }\" (click)=\"!config.disableLeftRowSelection && config.isTreeMode && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [id]=\"id + '-checkboxLeft-' + item.id\" [(ngModel)]=\"item.checked\"\n (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td [id]=\"id + '-itemLeft-' + item.id\">{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n <div class=\"s-table-double__body__middle\">\n <div>\n <s-button [id]=\"id + '-addButton'\" (click)=\"addItem()\" (keydown.enter)=\"addItem()\" position=\"normal\"\n [disabled]=\"disabledButtonLeft()\" [pill]=\"true\"><s-icon-mat><span class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'add' : 'arrow_forward' }}\n </span></s-icon-mat></s-button>\n </div>\n <div>\n <s-button [id]=\"id + '-removeButton'\" (click)=\"removeItem()\" (keydown.enter)=\"removeItem()\" position=\"normal\"\n type=\"secondary\" [disabled]=\"disabledButtonRight()\" [pill]=\"true\"><s-icon-mat><span\n class=\"material-symbols-outlined\">\n {{ config.additionButton ? 'remove' : 'arrow_back' }}\n </span></s-icon-mat></s-button>\n </div>\n </div>\n <div class=\"s-table-double__body__right\">\n <s-table-complete [config]=\"config.tableRightConfig\" (actionEvent)=\"action(false)\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\" (checkAllEvent)=\"checkAllEvent($event, false)\"\n (deleteEvent)=\"delete(false)\" (emptyEvent)=\"empty(false)\" (filterEvent)=\"filter($event, false)\"\n (multiSelectEvent)=\"multiSelect($event, false)\" (orderByEvent)=\"orderBy($event, false)\"\n (pageEvent)=\"page($event, false)\" (paginationEvent)=\"paginationEmitter($event, false)\"\n (pillButtonEvent)=\"pillButton(false)\" (scrollEvent)=\"onScroll(false)\" (searchEvent)=\"search($event, false)\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track $index) {\n <div class=\"s-table-double__list\">\n <s-list [size]=\"'xs'\" [id]=\"id + '-listRight-' + item.id\" [attr.data-item-id]=\"item.id\" [draggable]=\"true\"\n [selected]=\"item.checked\" (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, false)\" (click)=\"selectItem(item.id, false)\">\n <div class=\"s-table-double__drag\">\n <h5 class=\"ml-2\">{{ item.name }}</h5>\n @if (item.iconAction) {\n <div class=\"s-table-double__drag-icon\">\n <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n </div>\n }\n </div>\n </s-list>\n </div>\n }\n } @else {\n @for (item of config.tableRightItems; track $index) {\n <tr [ngClass]=\"{ active: config.isTreeMode && item.selected }\"\n (click)=\"config.isTreeMode && rowClick(item, false)\">\n <td class=\"s-table-double__tree-cell\" [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n [attr.colspan]=\"config.isTreeMode ? getTreeCellColspan() : null\">\n <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n @if (config.isTreeMode && item.hasChildren) {\n <s-icon-mat class=\"s-table-double__tree-toggle\"\n [class.s-table-double__tree-toggle--expanded]=\"item.expanded\" (click)=\"toggleExpand($event, item.id)\">\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </s-icon-mat>\n } @else if (config.isTreeMode) {\n <span class=\"s-table-double__tree-spacer\"></span>\n }\n <input type=\"checkbox\" [id]=\"id + '-checkboxRight-' + item.id\" [(ngModel)]=\"item.checked\"\n (click)=\"$event.stopPropagation()\" (change)=\"changeCheckbox()\" />\n @if (config.isTreeMode) {\n <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n }\n </div>\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (\n column.id !== 'checkbox' &&\n column.id !== undefined &&\n !(config.isTreeMode && column.id === 'name') &&\n column.id !== 'actions'\n ) {\n <td [id]=\"id + '-itemRight-' + item.id\" (click)=\"column.switchConfig && $event.stopPropagation()\">\n @if (column.switchConfig && item[column.id!] !== undefined) {\n <s-toggle-switch [config]=\"column.switchConfig\" [(ngModel)]=\"item[column.id!]\"\n (valueChange)=\"onSwitchChange($event, item.id, column.id!, false)\">\n </s-toggle-switch>\n } @else if (!column.switchConfig) {\n {{ item[column.id] }}\n }\n </td>\n }\n }\n @if (config.showOrderButtons) {\n <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n <s-table-actions-buttons [tableActionsButtons]=\"getOrderButtons(item)\"\n (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n </s-table-actions-buttons>\n </td>\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double__list{margin:.5rem .8rem}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"] }]
|
|
7533
7573
|
}], propDecorators: { config: [{
|
|
7534
7574
|
type: Input
|
|
7535
7575
|
}], actionPositionEvent: [{
|
|
@@ -7570,6 +7610,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7570
7610
|
type: Output
|
|
7571
7611
|
}], switchChangeEvent: [{
|
|
7572
7612
|
type: Output
|
|
7613
|
+
}], searchEvent: [{
|
|
7614
|
+
type: Output
|
|
7573
7615
|
}] } });
|
|
7574
7616
|
|
|
7575
7617
|
class STableDoubleCompleteComponent {
|
|
@@ -7586,42 +7628,129 @@ class STableDoubleCompleteComponent {
|
|
|
7586
7628
|
this.pillButtonPositionEvent = new EventEmitter();
|
|
7587
7629
|
this.scrollPositionEvent = new EventEmitter();
|
|
7588
7630
|
this.selectPositionEvent = new EventEmitter();
|
|
7631
|
+
this.searchEvent = new EventEmitter();
|
|
7589
7632
|
this.switchChangeEvent = new EventEmitter();
|
|
7633
|
+
this.tabs = [];
|
|
7634
|
+
this.previousItemsByTab = '';
|
|
7590
7635
|
this.rightTableState = [];
|
|
7636
|
+
this.rightTableSearchTerm = '';
|
|
7591
7637
|
this.expandedNodes = new Map();
|
|
7592
7638
|
this._sTranslateService = inject(STranslateService);
|
|
7639
|
+
this._cdr = inject(ChangeDetectorRef);
|
|
7593
7640
|
}
|
|
7594
7641
|
ngOnInit() {
|
|
7595
7642
|
this.id = this.config.id ?? `s-table-double-complete`;
|
|
7596
|
-
this.rightTableState = [
|
|
7597
|
-
|
|
7643
|
+
this.rightTableState = [];
|
|
7644
|
+
this.previousItemsByTab = JSON.stringify(this.config?.tableLeft);
|
|
7645
|
+
this.updateTabsList();
|
|
7646
|
+
const activeEntry = Object.entries(this.config.tableLeft || {}).find(([key, val]) => val.tabActive);
|
|
7647
|
+
const selectedTab = this.tabs.find(t => t.value === activeEntry?.[0]) ?? this.tabs[0];
|
|
7598
7648
|
if (selectedTab) {
|
|
7649
|
+
if (!selectedTab.selected)
|
|
7650
|
+
selectedTab.selected = true;
|
|
7599
7651
|
this.setActiveTab(selectedTab);
|
|
7600
7652
|
}
|
|
7653
|
+
if (!this.config.configTabs) {
|
|
7654
|
+
this.config.configTabs = {
|
|
7655
|
+
orientation: 'vertical',
|
|
7656
|
+
pill: true,
|
|
7657
|
+
width: 85,
|
|
7658
|
+
background: true,
|
|
7659
|
+
height: 98,
|
|
7660
|
+
};
|
|
7661
|
+
}
|
|
7662
|
+
}
|
|
7663
|
+
ngOnChanges(changes) {
|
|
7664
|
+
if (changes['config'] && !changes['config'].isFirstChange()) {
|
|
7665
|
+
this.id = this.config.id ?? this.id;
|
|
7666
|
+
if (this.activeTabKey)
|
|
7667
|
+
this.refreshTables();
|
|
7668
|
+
}
|
|
7669
|
+
}
|
|
7670
|
+
ngDoCheck() {
|
|
7671
|
+
if (!this.config?.tableLeft) {
|
|
7672
|
+
return;
|
|
7673
|
+
}
|
|
7674
|
+
const currentItemsByTab = this.calculateStructuralHash(this.config.tableLeft);
|
|
7675
|
+
if (currentItemsByTab !== this.previousItemsByTab) {
|
|
7676
|
+
this.previousItemsByTab = currentItemsByTab;
|
|
7677
|
+
this.updateTabsList();
|
|
7678
|
+
if (this.tabs.length > 0 && !this.tabs.some(t => t.selected)) {
|
|
7679
|
+
this.tabs[0].selected = true;
|
|
7680
|
+
this.activeTabKey = String(this.tabs[0].value ?? this.tabs[0].text);
|
|
7681
|
+
}
|
|
7682
|
+
this.refreshTables();
|
|
7683
|
+
}
|
|
7684
|
+
}
|
|
7685
|
+
calculateStructuralHash(tableLeft) {
|
|
7686
|
+
return JSON.stringify(Object.entries(tableLeft).map(([k, v]) => ({
|
|
7687
|
+
key: k,
|
|
7688
|
+
label: v.tabLabel,
|
|
7689
|
+
active: v.tabActive,
|
|
7690
|
+
items: v.items?.map(i => {
|
|
7691
|
+
const cloned = { ...i };
|
|
7692
|
+
delete cloned.checked;
|
|
7693
|
+
delete cloned.selected;
|
|
7694
|
+
delete cloned.expanded;
|
|
7695
|
+
return cloned;
|
|
7696
|
+
})
|
|
7697
|
+
})));
|
|
7698
|
+
}
|
|
7699
|
+
updateTabsList() {
|
|
7700
|
+
this.tabs = Object.entries(this.config.tableLeft || {}).map(([key, value]) => ({
|
|
7701
|
+
text: value.tabLabel,
|
|
7702
|
+
value: key,
|
|
7703
|
+
selected: key === this.activeTabKey || !!value.tabActive
|
|
7704
|
+
}));
|
|
7601
7705
|
}
|
|
7602
7706
|
onTabSelect(tab) {
|
|
7603
7707
|
this.setActiveTab(tab);
|
|
7604
7708
|
}
|
|
7709
|
+
orderByPosition(event) {
|
|
7710
|
+
if (event.isLeftTable) {
|
|
7711
|
+
this.orderByPositionEvent.emit({ ...event, tabKey: this.activeTabKey });
|
|
7712
|
+
return;
|
|
7713
|
+
}
|
|
7714
|
+
this.rightTableSort = {
|
|
7715
|
+
SortAsc: event.value.SortAsc,
|
|
7716
|
+
SortField: event.value.SortField,
|
|
7717
|
+
};
|
|
7718
|
+
this.refreshTables();
|
|
7719
|
+
}
|
|
7720
|
+
onFilterPosition(event) {
|
|
7721
|
+
this.filterPositionEvent.emit({ ...event, tabKey: this.activeTabKey });
|
|
7722
|
+
}
|
|
7723
|
+
onMultiSelectPosition(event) {
|
|
7724
|
+
this.multiSelectPositionEvent.emit({ ...event, tabKey: this.activeTabKey });
|
|
7725
|
+
}
|
|
7726
|
+
onSearchEvent(event) {
|
|
7727
|
+
if (event.isLeftTable) {
|
|
7728
|
+
this.searchEvent.emit({ ...event, tabKey: this.activeTabKey });
|
|
7729
|
+
return;
|
|
7730
|
+
}
|
|
7731
|
+
this.rightTableSearchTerm = event.value;
|
|
7732
|
+
this.refreshTables(false);
|
|
7733
|
+
}
|
|
7605
7734
|
setActiveTab(tab) {
|
|
7606
7735
|
this.activeTabKey = String(tab.value ?? tab.text);
|
|
7607
|
-
|
|
7608
|
-
|
|
7609
|
-
|
|
7610
|
-
|
|
7611
|
-
|
|
7612
|
-
}
|
|
7613
|
-
this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems);
|
|
7736
|
+
this.tabs.forEach(t => t.selected = t.value === this.activeTabKey);
|
|
7737
|
+
Object.keys(this.config.tableLeft).forEach(key => {
|
|
7738
|
+
this.config.tableLeft[key].tabActive = key === this.activeTabKey;
|
|
7739
|
+
});
|
|
7740
|
+
this.refreshTables(false);
|
|
7614
7741
|
}
|
|
7615
7742
|
onUpdateTables(event) {
|
|
7616
7743
|
const prevRightIds = new Set(this.rightTableState.map(i => i.id));
|
|
7617
|
-
const
|
|
7744
|
+
const leftData = this.config.tableLeft?.[this.activeTabKey];
|
|
7745
|
+
if (leftData) {
|
|
7746
|
+
leftData.items = event.tableLeftItems;
|
|
7747
|
+
}
|
|
7618
7748
|
const selectedRightItems = event.tableRightItems.filter(i => i.selected);
|
|
7619
7749
|
const parentId = this.config.treeMode && selectedRightItems.length === 1 ? selectedRightItems[0].id : null;
|
|
7620
7750
|
const nextRight = event.tableRightItems.map(item => {
|
|
7621
7751
|
const prev = this.rightTableState.find(r => r.id === item.id);
|
|
7622
|
-
const fromLeft = sourceLeft.find(l => l.id === item.id);
|
|
7623
7752
|
return {
|
|
7624
|
-
...
|
|
7753
|
+
...item,
|
|
7625
7754
|
id: item.id,
|
|
7626
7755
|
name: item.name,
|
|
7627
7756
|
checked: !!item.checked,
|
|
@@ -7638,25 +7767,48 @@ class STableDoubleCompleteComponent {
|
|
|
7638
7767
|
this.resetSelections();
|
|
7639
7768
|
this.refreshTables();
|
|
7640
7769
|
}
|
|
7641
|
-
refreshTables() {
|
|
7642
|
-
const
|
|
7770
|
+
refreshTables(emitUpdate = true) {
|
|
7771
|
+
const leftData = this.config.tableLeft?.[this.activeTabKey];
|
|
7772
|
+
const leftItems = leftData?.items ?? [];
|
|
7643
7773
|
const tableLeftItems = this.mapToTableDoubleItems(leftItems);
|
|
7644
7774
|
let tableRightItems = this.mapToTableDoubleItems(this.rightTableState);
|
|
7645
7775
|
if (this.config.treeMode) {
|
|
7646
7776
|
tableRightItems = this.flattenTree(this.buildTree(this.rightTableState));
|
|
7647
|
-
tableLeftItems;
|
|
7648
7777
|
}
|
|
7649
|
-
|
|
7650
|
-
this.
|
|
7651
|
-
|
|
7652
|
-
|
|
7653
|
-
|
|
7778
|
+
tableRightItems = this.applyRightTableSearch(tableRightItems);
|
|
7779
|
+
tableRightItems = this.applyRightTableSort(tableRightItems);
|
|
7780
|
+
this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems, leftData?.tableConfig);
|
|
7781
|
+
if (emitUpdate) {
|
|
7782
|
+
this.updateEvent.emit({
|
|
7783
|
+
tabKey: this.activeTabKey,
|
|
7784
|
+
tableLeftItems,
|
|
7785
|
+
tableRightItems,
|
|
7786
|
+
});
|
|
7787
|
+
}
|
|
7788
|
+
}
|
|
7789
|
+
applyRightTableSearch(items) {
|
|
7790
|
+
const term = this.rightTableSearchTerm.toLowerCase().trim();
|
|
7791
|
+
if (!term)
|
|
7792
|
+
return items;
|
|
7793
|
+
return items.filter(item => Object.values(item).some(value => String(value).toLowerCase().includes(term)));
|
|
7794
|
+
}
|
|
7795
|
+
applyRightTableSort(items) {
|
|
7796
|
+
if (!this.rightTableSort)
|
|
7797
|
+
return items;
|
|
7798
|
+
return [...items].sort((a, b) => {
|
|
7799
|
+
const valueA = a[this.rightTableSort.SortField];
|
|
7800
|
+
const valueB = b[this.rightTableSort.SortField];
|
|
7801
|
+
if (valueA < valueB)
|
|
7802
|
+
return this.rightTableSort.SortAsc ? -1 : 1;
|
|
7803
|
+
if (valueA > valueB)
|
|
7804
|
+
return this.rightTableSort.SortAsc ? 1 : -1;
|
|
7805
|
+
return 0;
|
|
7654
7806
|
});
|
|
7655
7807
|
}
|
|
7656
|
-
buildTableDoubleAdapter(leftItems, rightItems) {
|
|
7657
|
-
const rightColumns = [...this.config.
|
|
7808
|
+
buildTableDoubleAdapter(leftItems, rightItems, leftTableConfig) {
|
|
7809
|
+
const rightColumns = [...(this.config.tableRight?.columns ?? [])];
|
|
7658
7810
|
if (this.config.showOrderButtons && !rightColumns.some(c => c.id === 'actions')) {
|
|
7659
|
-
rightColumns.push({ id: 'actions', title: this._sTranslateService.instant('ui.generic.actions') });
|
|
7811
|
+
rightColumns.push({ id: 'actions', title: this._sTranslateService.instant('ui.generic.actions'), sortable: false });
|
|
7660
7812
|
}
|
|
7661
7813
|
return {
|
|
7662
7814
|
additionButton: true,
|
|
@@ -7664,25 +7816,34 @@ class STableDoubleCompleteComponent {
|
|
|
7664
7816
|
showOrderButtons: !!this.config.showOrderButtons,
|
|
7665
7817
|
disableLeftRowSelection: true,
|
|
7666
7818
|
tableLeftConfig: {
|
|
7667
|
-
...
|
|
7819
|
+
...(leftTableConfig ?? {}),
|
|
7668
7820
|
totalItems: leftItems.length,
|
|
7669
7821
|
isTreeMode: false,
|
|
7670
7822
|
configBottomStatusBar: signal({
|
|
7671
7823
|
counter: leftItems.filter(i => i.checked).length,
|
|
7672
|
-
total: leftItems.length,
|
|
7673
7824
|
disabled: leftItems.length === 0,
|
|
7825
|
+
total: leftItems.length,
|
|
7674
7826
|
}),
|
|
7827
|
+
emptyConfig: leftTableConfig?.emptyConfig ?? {
|
|
7828
|
+
image: 'assets/empty/empty.png',
|
|
7829
|
+
title: this._sTranslateService.instant('ui.tableDouble.emptyTitleLeft'),
|
|
7830
|
+
}
|
|
7675
7831
|
},
|
|
7676
7832
|
tableRightConfig: {
|
|
7677
|
-
...this.config.
|
|
7833
|
+
...(this.config.tableRight ?? {}),
|
|
7678
7834
|
columns: rightColumns,
|
|
7679
7835
|
totalItems: rightItems.length,
|
|
7680
7836
|
isTreeMode: !!this.config.treeMode,
|
|
7681
7837
|
configBottomStatusBar: signal({
|
|
7682
7838
|
counter: rightItems.filter(i => i.checked).length,
|
|
7683
|
-
total: rightItems.length,
|
|
7684
7839
|
disabled: rightItems.length === 0,
|
|
7840
|
+
total: rightItems.length,
|
|
7685
7841
|
}),
|
|
7842
|
+
emptyConfig: this.config.tableRight?.emptyConfig ?? {
|
|
7843
|
+
detail: this._sTranslateService.instant('ui.tableDouble.emptyDetailRight'),
|
|
7844
|
+
image: 'assets/empty/empty.png',
|
|
7845
|
+
title: this._sTranslateService.instant('ui.tableDouble.emptyTitleRight'),
|
|
7846
|
+
}
|
|
7686
7847
|
},
|
|
7687
7848
|
tableLeftItems: leftItems,
|
|
7688
7849
|
tableRightItems: rightItems,
|
|
@@ -7690,11 +7851,11 @@ class STableDoubleCompleteComponent {
|
|
|
7690
7851
|
};
|
|
7691
7852
|
}
|
|
7692
7853
|
mapToTableDoubleItems(items) {
|
|
7693
|
-
|
|
7694
|
-
|
|
7695
|
-
|
|
7696
|
-
|
|
7697
|
-
|
|
7854
|
+
items.forEach((item) => {
|
|
7855
|
+
item.name = item.name ?? '';
|
|
7856
|
+
item.checked = item.checked ?? false;
|
|
7857
|
+
});
|
|
7858
|
+
return items;
|
|
7698
7859
|
}
|
|
7699
7860
|
buildTree(items) {
|
|
7700
7861
|
const map = new Map();
|
|
@@ -7736,7 +7897,7 @@ class STableDoubleCompleteComponent {
|
|
|
7736
7897
|
return result;
|
|
7737
7898
|
}
|
|
7738
7899
|
resetSelections() {
|
|
7739
|
-
const leftItems = this.config.
|
|
7900
|
+
const leftItems = this.config.tableLeft?.[this.activeTabKey]?.items ?? [];
|
|
7740
7901
|
leftItems.forEach(i => {
|
|
7741
7902
|
i.checked = false;
|
|
7742
7903
|
i.selected = false;
|
|
@@ -7748,7 +7909,7 @@ class STableDoubleCompleteComponent {
|
|
|
7748
7909
|
}
|
|
7749
7910
|
onSwitchChange(event) {
|
|
7750
7911
|
if (event.isLeftTable) {
|
|
7751
|
-
const leftItems = this.config.
|
|
7912
|
+
const leftItems = this.config.tableLeft?.[this.activeTabKey]?.items ?? [];
|
|
7752
7913
|
const item = leftItems.find(i => i.id === event.itemId);
|
|
7753
7914
|
if (item)
|
|
7754
7915
|
item[event.columnId] = event.value;
|
|
@@ -7802,11 +7963,11 @@ class STableDoubleCompleteComponent {
|
|
|
7802
7963
|
this.refreshTables();
|
|
7803
7964
|
}
|
|
7804
7965
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7805
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STableDoubleCompleteComponent, isStandalone: true, selector: "s-table-double-complete", inputs: { config: "config" }, outputs: { updateEvent: "updateEvent", actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", switchChangeEvent: "switchChangeEvent" }, ngImport: i0, template: "<div class=\"s-table-double-complete\" [id]=\"id\">\n <s-tabs [tabs]=\"
|
|
7966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STableDoubleCompleteComponent, isStandalone: true, selector: "s-table-double-complete", inputs: { config: "config" }, outputs: { updateEvent: "updateEvent", actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", searchEvent: "searchEvent", switchChangeEvent: "switchChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"s-table-double-complete\" [id]=\"id\">\n <s-tabs *ngIf=\"tabs.length > 0\" [tabs]=\"tabs\" [configTabs]=\"config.configTabs\" (eventSelect)=\"onTabSelect($event)\"> </s-tabs>\n\n <s-table-double\n [config]=\"tableDoubleAdapter\"\n (eventUpdateTables)=\"onUpdateTables($event)\"\n (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n (filterPositionEvent)=\"onFilterPosition($event)\"\n (multiSelectPositionEvent)=\"onMultiSelectPosition($event)\"\n (orderByPositionEvent)=\"orderByPosition($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($event)\"\n (searchEvent)=\"onSearchEvent($event)\"\n (switchChangeEvent)=\"onSwitchChange($event)\">\n </s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: STabsModule }, { kind: "component", type: STabsComponent, selector: "s-tabs", inputs: ["tabs", "configTabs", "id"], outputs: ["eventSelect"] }, { kind: "component", type: STableDoubleComponent, selector: "s-table-double", inputs: ["config"], outputs: ["actionPositionEvent", "bottomStatusBarPositionEvent", "checkAllPositionEvent", "deletePositionEvent", "emptyPositionEvent", "eventUpdateTables", "filterPositionEvent", "multiSelectPositionEvent", "orderByPositionEvent", "pagePositionEvent", "paginationPositionEvent", "pillButtonPositionEvent", "scrollPositionEvent", "selectPositionEvent", "rowSelectPositionEvent", "actionEvent", "toggleExpandEvent", "reorderItemEvent", "switchChangeEvent", "searchEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7806
7967
|
}
|
|
7807
7968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, decorators: [{
|
|
7808
7969
|
type: Component,
|
|
7809
|
-
args: [{ selector: 's-table-double-complete', standalone: true, imports: [CommonModule, STabsModule, STableDoubleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double-complete\" [id]=\"id\">\n <s-tabs [tabs]=\"
|
|
7970
|
+
args: [{ selector: 's-table-double-complete', standalone: true, imports: [CommonModule, STabsModule, STableDoubleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double-complete\" [id]=\"id\">\n <s-tabs *ngIf=\"tabs.length > 0\" [tabs]=\"tabs\" [configTabs]=\"config.configTabs\" (eventSelect)=\"onTabSelect($event)\"> </s-tabs>\n\n <s-table-double\n [config]=\"tableDoubleAdapter\"\n (eventUpdateTables)=\"onUpdateTables($event)\"\n (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n (filterPositionEvent)=\"onFilterPosition($event)\"\n (multiSelectPositionEvent)=\"onMultiSelectPosition($event)\"\n (orderByPositionEvent)=\"orderByPosition($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($event)\"\n (searchEvent)=\"onSearchEvent($event)\"\n (switchChangeEvent)=\"onSwitchChange($event)\">\n </s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"] }]
|
|
7810
7971
|
}], propDecorators: { config: [{
|
|
7811
7972
|
type: Input
|
|
7812
7973
|
}], updateEvent: [{
|
|
@@ -7833,6 +7994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7833
7994
|
type: Output
|
|
7834
7995
|
}], selectPositionEvent: [{
|
|
7835
7996
|
type: Output
|
|
7997
|
+
}], searchEvent: [{
|
|
7998
|
+
type: Output
|
|
7836
7999
|
}], switchChangeEvent: [{
|
|
7837
8000
|
type: Output
|
|
7838
8001
|
}] } });
|