sidesys-generic-ui 2.4.3 → 2.4.4
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/icon-material/s-icon-material.component.mjs +2 -2
- package/esm2022/lib/input/components/input/s-input-model.mjs +3 -1
- package/esm2022/lib/input/components/input/s-input.component.mjs +16 -23
- package/esm2022/lib/list-simple/s-list-simple.component.mjs +2 -2
- package/esm2022/lib/modal/modal-confirm/modal-confirm.component.mjs +4 -4
- package/esm2022/lib/modal/modal-confirm/models/modal-confirm.interface.mjs +1 -1
- package/esm2022/lib/select/select/s-select.component.mjs +8 -7
- package/esm2022/lib/table-complete/table-complete.component.mjs +14 -5
- package/esm2022/lib/table-double/table-double.component.mjs +163 -63
- package/esm2022/lib/table-double/table-double.model.mjs +1 -1
- package/esm2022/lib/table-double-complete/table-double-complete.component.mjs +256 -0
- package/esm2022/lib/table-double-complete/table-double-complete.model.mjs +2 -0
- package/esm2022/lib/table-t/s-tablet.component.mjs +7 -4
- package/esm2022/lib/table-t/table-actions-buttons/table-actions-buttons.component.mjs +2 -2
- package/esm2022/lib/tabs/s-tabs.component.mjs +2 -2
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/sidesys-generic-ui.mjs +461 -107
- package/fesm2022/sidesys-generic-ui.mjs.map +1 -1
- package/lib/input/components/input/s-input-model.d.ts +2 -0
- package/lib/input/components/input/s-input.component.d.ts +2 -2
- package/lib/modal/modal-confirm/models/modal-confirm.interface.d.ts +1 -1
- package/lib/table-complete/table-complete.component.d.ts +4 -0
- package/lib/table-double/table-double.component.d.ts +39 -25
- package/lib/table-double/table-double.model.d.ts +19 -4
- package/lib/table-double-complete/table-double-complete.component.d.ts +38 -0
- package/lib/table-double-complete/table-double-complete.model.d.ts +37 -0
- package/lib/table-t/s-tablet.component.d.ts +2 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -66,11 +66,11 @@ class SIconMaterialComponent {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", opticalSize: "opticalSize", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n <ng-content *ngIf=\"!name\"></ng-content>\n <ng-container *ngIf=\"name\">{{name}}</ng-container>\n </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", opticalSize: "opticalSize", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n <ng-content *ngIf=\"!name\"></ng-content>\n <ng-container *ngIf=\"name\">{{name}}</ng-container>\n </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
|
-
args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n <ng-content *ngIf=\"!name\"></ng-content>\n <ng-container *ngIf=\"name\">{{name}}</ng-container>\n </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/
|
|
73
|
+
args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n <ng-content *ngIf=\"!name\"></ng-content>\n <ng-container *ngIf=\"name\">{{name}}</ng-container>\n </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
|
|
74
74
|
}], propDecorators: { Icon: [{
|
|
75
75
|
type: ViewChild,
|
|
76
76
|
args: ['icon', { static: true }]
|
|
@@ -1474,6 +1474,8 @@ class SInput {
|
|
|
1474
1474
|
const INPUTS_REGEX = {
|
|
1475
1475
|
URL: /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}(\/[a-zA-Z0-9#]+\/?)*$/,
|
|
1476
1476
|
EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
1477
|
+
ALPHANUMERIC: /[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9._\- ]/g,
|
|
1478
|
+
SEARCH: /^[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9._\- ]*$/,
|
|
1477
1479
|
};
|
|
1478
1480
|
var INPUT_TYPE;
|
|
1479
1481
|
(function (INPUT_TYPE) {
|
|
@@ -1685,18 +1687,18 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1685
1687
|
this.blur = new EventEmitter();
|
|
1686
1688
|
this.focus = new EventEmitter();
|
|
1687
1689
|
this.iconSymbol = false;
|
|
1688
|
-
this.ICON_THEME = ICON_THEME;
|
|
1689
1690
|
this.showPassword = false;
|
|
1690
1691
|
this.INPUT_TYPE = INPUT_TYPE;
|
|
1691
1692
|
this.THEME = THEME;
|
|
1693
|
+
this.ICON_THEME = ICON_THEME;
|
|
1692
1694
|
this.isFocused = false;
|
|
1693
1695
|
}
|
|
1694
1696
|
onInput(event) {
|
|
1695
|
-
this.patternError();
|
|
1696
1697
|
const input = event.target;
|
|
1697
1698
|
this.value = input.value;
|
|
1698
1699
|
this.onChange(this.value);
|
|
1699
1700
|
this.onTouched();
|
|
1701
|
+
this.patternError();
|
|
1700
1702
|
}
|
|
1701
1703
|
registerOnChange(fn) {
|
|
1702
1704
|
if (!this.config.useFormControl) {
|
|
@@ -1707,25 +1709,18 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1707
1709
|
return this.config.theme === 'yellow' ? 'symbol' : 'icon';
|
|
1708
1710
|
}
|
|
1709
1711
|
showIconType() {
|
|
1710
|
-
this.iconType = this.config.type
|
|
1711
|
-
? this.getIconByType(this.config.type)
|
|
1712
|
-
: undefined;
|
|
1712
|
+
this.iconType = this.config.type ? this.getIconByType(this.config.type) : undefined;
|
|
1713
1713
|
return !!this.iconType;
|
|
1714
1714
|
}
|
|
1715
1715
|
getIconByType(type) {
|
|
1716
|
-
return type in ICON_INPUT
|
|
1717
|
-
? ICON_INPUT[type]
|
|
1718
|
-
: undefined;
|
|
1716
|
+
return type in ICON_INPUT ? ICON_INPUT[type] : undefined;
|
|
1719
1717
|
}
|
|
1720
1718
|
patternError() {
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
this.
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
if (this.config.type === INPUT_TYPE.EMAIL &&
|
|
1727
|
-
!INPUTS_REGEX.EMAIL.test(this.control?.value || this.value)) {
|
|
1728
|
-
this.errorPattern = 'Formato de email invalido.';
|
|
1719
|
+
const value = this.control?.value || this.value;
|
|
1720
|
+
if ((this.config.type === INPUT_TYPE.SEARCH && !INPUTS_REGEX.SEARCH.test(value)) ||
|
|
1721
|
+
(this.config.type === INPUT_TYPE.URL && !INPUTS_REGEX.URL.test(value)) ||
|
|
1722
|
+
(this.config.type === INPUT_TYPE.EMAIL && !INPUTS_REGEX.EMAIL.test(value))) {
|
|
1723
|
+
this.errorPattern = 'validation.invalidData';
|
|
1729
1724
|
return;
|
|
1730
1725
|
}
|
|
1731
1726
|
this.errorPattern = undefined;
|
|
@@ -1735,16 +1730,16 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1735
1730
|
this.showPassword = !this.showPassword;
|
|
1736
1731
|
}
|
|
1737
1732
|
clickHelp() {
|
|
1738
|
-
this.clickHelpIconEvent.
|
|
1733
|
+
this.clickHelpIconEvent.emit();
|
|
1739
1734
|
}
|
|
1740
1735
|
onBlur(event) {
|
|
1741
1736
|
this.patternError();
|
|
1742
1737
|
this.isFocused = false;
|
|
1743
|
-
this.blur.
|
|
1738
|
+
this.blur.emit(event);
|
|
1744
1739
|
}
|
|
1745
1740
|
onFocus(event) {
|
|
1746
1741
|
this.isFocused = true;
|
|
1747
|
-
this.focus.
|
|
1742
|
+
this.focus.emit(event);
|
|
1748
1743
|
}
|
|
1749
1744
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1750
1745
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SInputComponent, selector: "s-input", inputs: { config: "config" }, outputs: { clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
|
|
@@ -1753,7 +1748,7 @@ class SInputComponent extends ControlValueAccessorDirective {
|
|
|
1753
1748
|
useExisting: forwardRef(() => SInputComponent),
|
|
1754
1749
|
multi: true,
|
|
1755
1750
|
},
|
|
1756
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n <label [for]=\"config.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 }} {{
|
|
1751
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n <label [for]=\"config.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 && (isFocused || control.touched)) ||\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]=\"config.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]=\"config.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 <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched) &&\n !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n \"\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n {{ config.errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n {{ errorPattern }}\n </s-error-control>\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\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", 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__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", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1757
1752
|
}
|
|
1758
1753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, decorators: [{
|
|
1759
1754
|
type: Component,
|
|
@@ -1763,7 +1758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1763
1758
|
useExisting: forwardRef(() => SInputComponent),
|
|
1764
1759
|
multi: true,
|
|
1765
1760
|
},
|
|
1766
|
-
], template: "<div class=\"s-input\">\n <label [for]=\"config.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 }} {{
|
|
1761
|
+
], template: "<div class=\"s-input\">\n <label [for]=\"config.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 && (isFocused || control.touched)) ||\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]=\"config.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]=\"config.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 <s-validation-error\n *ngIf=\"\n !config.hideErrorText &&\n control &&\n control.invalid &&\n (isFocused || control.touched) &&\n !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n \"\n [customErrorMessages]=\"config.errorMessages ?? undefined\"\n [errors]=\"control.errors\">\n </s-validation-error>\n <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n {{ config.errorText }}\n </s-error-control>\n <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n {{ errorPattern }}\n </s-error-control>\n <s-error-control\n *ngIf=\"\n !config.hideErrorText &&\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", 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__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"] }]
|
|
1767
1762
|
}], propDecorators: { config: [{
|
|
1768
1763
|
type: Input
|
|
1769
1764
|
}], clickHelpIconEvent: [{
|
|
@@ -3424,13 +3419,14 @@ class SSelectComponent extends ControlValueAccessorDirective {
|
|
|
3424
3419
|
return this.control;
|
|
3425
3420
|
}
|
|
3426
3421
|
getTitle() {
|
|
3427
|
-
if (this.
|
|
3428
|
-
|
|
3429
|
-
this.activeIndex = index;
|
|
3422
|
+
if (!this.config?.options?.length) {
|
|
3423
|
+
return '';
|
|
3430
3424
|
}
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3425
|
+
if (this.value === null || this.value === undefined) {
|
|
3426
|
+
return '';
|
|
3427
|
+
}
|
|
3428
|
+
const option = this.config.options.find(item => item.value === this.value.toString());
|
|
3429
|
+
return option?.title ?? '';
|
|
3434
3430
|
}
|
|
3435
3431
|
onInput(event) {
|
|
3436
3432
|
const input = event.target;
|
|
@@ -4092,6 +4088,7 @@ class FormFilledMetadataDto {
|
|
|
4092
4088
|
class STabletComponent {
|
|
4093
4089
|
constructor() {
|
|
4094
4090
|
this.loading = false;
|
|
4091
|
+
this.isTreeMode = false;
|
|
4095
4092
|
this.loadingScroll = input(false);
|
|
4096
4093
|
this.updateDataEvent = new EventEmitter();
|
|
4097
4094
|
this.ordenByEvent = new EventEmitter();
|
|
@@ -4105,7 +4102,7 @@ class STabletComponent {
|
|
|
4105
4102
|
this.initData = this.data;
|
|
4106
4103
|
}
|
|
4107
4104
|
orderBy(column) {
|
|
4108
|
-
if (column.sortable !== false && !column.disabled) {
|
|
4105
|
+
if (column.sortable !== false && !column.disabled && !column.checkbox) {
|
|
4109
4106
|
if (column.id) {
|
|
4110
4107
|
//column.id es el campo a ordenar.
|
|
4111
4108
|
const sortAsc = this.fieldSelect && this.fieldSelect.SortField === column.id && this.fieldSelect.SortAsc === true
|
|
@@ -4136,11 +4133,11 @@ class STabletComponent {
|
|
|
4136
4133
|
}
|
|
4137
4134
|
}
|
|
4138
4135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STabletComponent, selector: "s-tablet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, bodyloading: { classPropertyName: "bodyloading", publicName: "bodyloading", isSignal: false, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: false, isRequired: false, transformFunction: null }, configColumn: { classPropertyName: "configColumn", publicName: "configColumn", isSignal: false, isRequired: false, transformFunction: null }, loadingScroll: { classPropertyName: "loadingScroll", publicName: "loadingScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataEvent: "updateDataEvent", ordenByEvent: "ordenByEvent", checkAllEvent: "checkAllEvent", scrollEvent: "scrollEvent" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <
|
|
4136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STabletComponent, selector: "s-tablet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, bodyloading: { classPropertyName: "bodyloading", publicName: "bodyloading", isSignal: false, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: false, isRequired: false, transformFunction: null }, configColumn: { classPropertyName: "configColumn", publicName: "configColumn", isSignal: false, isRequired: false, transformFunction: null }, isTreeMode: { classPropertyName: "isTreeMode", publicName: "isTreeMode", isSignal: false, isRequired: false, transformFunction: null }, loadingScroll: { classPropertyName: "loadingScroll", publicName: "loadingScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataEvent: "updateDataEvent", ordenByEvent: "ordenByEvent", checkAllEvent: "checkAllEvent", scrollEvent: "scrollEvent" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <ng-container *ngIf=\"column.checkbox\">\n <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n <s-checkbox\n [ngClass]=\"{ 'mr-2': column.title }\"\n [config]=\"checkboxConfig\"\n [(ngModel)]=\"column.checkboxValue\"\n (ngModelChange)=\"checkAll($event)\">\n </s-checkbox>\n </ng-container>\n <div\n class=\"s-tablet__header__label\"\n [ngClass]=\"{\n 's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n }\">\n {{ column.title }}\n </div>\n <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\">{{\n fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</s-icon-mat>\n </span>\n <span\n *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n <span\n *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n class=\"s-tablet__header__icon--standard\">\n <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n <ng-container *ngIf=\"loading; else body\">\n <ng-template #body>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n </ng-container>\n </tbody>\n @if (loadingScroll()) {\n <tbody class=\"s-tablet__body\">\n <tr>\n <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n <s-spinner size=\"sm\"></s-spinner>\n </td>\n </tr>\n </tbody>\n }\n </table>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight: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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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: "component", type: SSpinnerComponent, selector: "s-spinner", inputs: ["size", "animation"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4140
4137
|
}
|
|
4141
4138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabletComponent, decorators: [{
|
|
4142
4139
|
type: Component,
|
|
4143
|
-
args: [{ selector: 's-tablet', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <
|
|
4140
|
+
args: [{ selector: 's-tablet', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n <table class=\"s-tablet\">\n <thead>\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n <th\n *ngFor=\"let column of configColumn\"\n [width]=\"column.width\"\n tabindex=\"0\"\n (keydown.enter)=\"orderBy(column)\"\n (click)=\"orderBy(column)\">\n <div\n class=\"s-tablet__header\"\n [ngClass]=\"{\n 's-tablet__header--align-center': column.align === 'center',\n 's-tablet__header--align-right': column.align === 'right',\n 's-tablet__header--align-left': column.align === 'left' || !column.align,\n cursor: column.sortable !== false,\n 's-tablet__disabled': loading,\n }\">\n <ng-container *ngIf=\"column.checkbox\">\n <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n <s-checkbox\n [ngClass]=\"{ 'mr-2': column.title }\"\n [config]=\"checkboxConfig\"\n [(ngModel)]=\"column.checkboxValue\"\n (ngModelChange)=\"checkAll($event)\">\n </s-checkbox>\n </ng-container>\n <div\n class=\"s-tablet__header__label\"\n [ngClass]=\"{\n 's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n }\">\n {{ column.title }}\n </div>\n <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\">{{\n fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</s-icon-mat>\n </span>\n <span\n *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n <span\n *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n class=\"s-tablet__header__icon--standard\">\n <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n >keyboard_arrow_down</s-icon-mat\n >\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n <ng-container *ngIf=\"loading; else body\">\n <ng-template #body>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n </ng-container>\n </tbody>\n @if (loadingScroll()) {\n <tbody class=\"s-tablet__body\">\n <tr>\n <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n <s-spinner size=\"sm\"></s-spinner>\n </td>\n </tr>\n </tbody>\n }\n </table>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}\n"] }]
|
|
4144
4141
|
}], propDecorators: { data: [{
|
|
4145
4142
|
type: Input
|
|
4146
4143
|
}], loading: [{
|
|
@@ -4155,6 +4152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4155
4152
|
type: Input
|
|
4156
4153
|
}], configColumn: [{
|
|
4157
4154
|
type: Input
|
|
4155
|
+
}], isTreeMode: [{
|
|
4156
|
+
type: Input
|
|
4158
4157
|
}], updateDataEvent: [{
|
|
4159
4158
|
type: Output
|
|
4160
4159
|
}], ordenByEvent: [{
|
|
@@ -4438,11 +4437,11 @@ class TableActionsButtonsComponent {
|
|
|
4438
4437
|
}
|
|
4439
4438
|
}
|
|
4440
4439
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableActionsButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: { tableActionsButtons: "tableActionsButtons" }, outputs: { clickButtonEvent: "clickButtonEvent" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon p-1 no-select\"\n size=\"20\"\n [ngClass]=\"getButtonsClass(button)\"\n [tooltip]=\"tooltip\"\n (keyup.enter)=\"handleButtonClick(button)\"\n (click)=\"handleButtonClick(button)\">\n {{ button.icon ?? getButtonsType(button.type).icon }}\n </s-icon-mat>\n <s-tooltip\n #tooltip\n [title]=\"button.tooltip\"\n [position]=\"button.tooltipPosition ?? 'top'\"\n theme=\"dark\"></s-tooltip>\n </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--
|
|
4440
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: { tableActionsButtons: "tableActionsButtons" }, outputs: { clickButtonEvent: "clickButtonEvent" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon p-1 no-select\"\n size=\"20\"\n [ngClass]=\"getButtonsClass(button)\"\n [tooltip]=\"tooltip\"\n (keyup.enter)=\"handleButtonClick(button)\"\n (click)=\"handleButtonClick(button)\">\n {{ button.icon ?? getButtonsType(button.type).icon }}\n </s-icon-mat>\n <s-tooltip\n #tooltip\n [title]=\"button.tooltip\"\n [position]=\"button.tooltipPosition ?? 'top'\"\n theme=\"dark\"></s-tooltip>\n </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--primary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\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: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }] }); }
|
|
4442
4441
|
}
|
|
4443
4442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableActionsButtonsComponent, decorators: [{
|
|
4444
4443
|
type: Component,
|
|
4445
|
-
args: [{ selector: 's-table-actions-buttons', template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon p-1 no-select\"\n size=\"20\"\n [ngClass]=\"getButtonsClass(button)\"\n [tooltip]=\"tooltip\"\n (keyup.enter)=\"handleButtonClick(button)\"\n (click)=\"handleButtonClick(button)\">\n {{ button.icon ?? getButtonsType(button.type).icon }}\n </s-icon-mat>\n <s-tooltip\n #tooltip\n [title]=\"button.tooltip\"\n [position]=\"button.tooltipPosition ?? 'top'\"\n theme=\"dark\"></s-tooltip>\n </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--
|
|
4444
|
+
args: [{ selector: 's-table-actions-buttons', template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n <ng-container *ngFor=\"let button of tableActionsButtons\">\n <s-icon-mat\n tabindex=\"0\"\n class=\"table-actions-buttons__icon p-1 no-select\"\n size=\"20\"\n [ngClass]=\"getButtonsClass(button)\"\n [tooltip]=\"tooltip\"\n (keyup.enter)=\"handleButtonClick(button)\"\n (click)=\"handleButtonClick(button)\">\n {{ button.icon ?? getButtonsType(button.type).icon }}\n </s-icon-mat>\n <s-tooltip\n #tooltip\n [title]=\"button.tooltip\"\n [position]=\"button.tooltipPosition ?? 'top'\"\n theme=\"dark\"></s-tooltip>\n </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--primary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"] }]
|
|
4446
4445
|
}], propDecorators: { tableActionsButtons: [{
|
|
4447
4446
|
type: Input
|
|
4448
4447
|
}], clickButtonEvent: [{
|
|
@@ -5470,11 +5469,11 @@ class SListSimpleComponent {
|
|
|
5470
5469
|
this.listStyle = 'default';
|
|
5471
5470
|
}
|
|
5472
5471
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5473
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListSimpleComponent, selector: "s-list-simple", inputs: { listStyle: "listStyle" }, ngImport: i0, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/
|
|
5472
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListSimpleComponent, selector: "s-list-simple", inputs: { listStyle: "listStyle" }, ngImport: i0, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-list-simple ul{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.01563rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.s-list-simple ul,.s-list-simple ol{margin-left:.625rem}.s-list-simple ul ul,.s-list-simple ul ol,.s-list-simple ol ul,.s-list-simple ol ol{margin-left:1.063rem}.s-list-simple ul ul ul,.s-list-simple ul ul ol,.s-list-simple ul ol ul,.s-list-simple ul ol ol,.s-list-simple ol ul ul,.s-list-simple ol ul ol,.s-list-simple ol ol ul,.s-list-simple ol ol ol{margin-left:1.5rem}.s-list-simple ul ul ul ul,.s-list-simple ul ul ul ol,.s-list-simple ul ul ol ul,.s-list-simple ul ul ol ol,.s-list-simple ul ol ul ul,.s-list-simple ul ol ul ol,.s-list-simple ul ol ol ul,.s-list-simple ul ol ol ol,.s-list-simple ol ul ul ul,.s-list-simple ol ul ul ol,.s-list-simple ol ul ol ul,.s-list-simple ol ul ol ol,.s-list-simple ol ol ul ul,.s-list-simple ol ol ul ol,.s-list-simple ol ol ol ul,.s-list-simple ol ol ol ol{margin-left:30.063rem}.s-list-simple--default ul{list-style:disc}.s-list-simple--check li,.s-list-simple--chevron li,.s-list-simple--folder li{list-style-type:none}.s-list-simple--check li:before,.s-list-simple--chevron li:before,.s-list-simple--folder li:before{font-family:Material Icons;display:inline-block;margin-right:.5em}.s-list-simple--check ul ul ul li:before{color:var(--green-700)}.s-list-simple--check ul ul ul .mark-invert:before,.s-list-simple--check ul ul ul .mark-invert::marker{color:var(--green-600)!important}.s-list-simple--check li:before{content:\"\\e5ca\";color:var(--green-600)}.s-list-simple--check .mark-invert:before,.s-list-simple--check .mark-invert::marker{color:var(--green-700)}.s-list-simple--chevron li:before{content:\"\\e5cc\";color:var(--secondary-600)}.s-list-simple--dot ul,.s-list-simple--dot ul ul{list-style:disc}.s-list-simple--dot ul ul ul{list-style:circle}.s-list-simple--dot li::marker{font-size:1.063rem;color:var(--secondary-600)}.s-list-simple--folder ul ul ul li:before{font-family:Material Symbols Outlined}.s-list-simple--folder ul ul ul .mark-invert:before,.s-list-simple--folder ul ul ul .mark-invert::marker{font-family:Material Icons!important}.s-list-simple--folder li:before{content:\"\\e2c7\";color:var(--secondary-600)}.s-list-simple--folder .mark-invert:before,.s-list-simple--folder .mark-invert::marker{font-family:Material Symbols Outlined}.s-list-simple--a1 ul>li:before{color:var(--primary-600);font-weight:700;content:counter(level1) \". \";counter-increment:level1}.s-list-simple--a1 ul ul>li:before{color:var(--secondary-600);font-weight:700;content:counter(level2,lower-alpha) \". \";counter-increment:level2}.s-list-simple--a1 ul ul ul>li:before{font-weight:400;content:counter(level2,lower-alpha) \".\" counter(level3) \" \";counter-increment:level3}.s-list-simple--a1 ul{counter-reset:level1}.s-list-simple--a1 ul ul{counter-reset:level2}.s-list-simple--a1 ul ul ul{counter-reset:level3}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5474
5473
|
}
|
|
5475
5474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListSimpleComponent, decorators: [{
|
|
5476
5475
|
type: Component,
|
|
5477
|
-
args: [{ selector: 's-list-simple', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/
|
|
5476
|
+
args: [{ selector: 's-list-simple', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-list-simple ul{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.01563rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.s-list-simple ul,.s-list-simple ol{margin-left:.625rem}.s-list-simple ul ul,.s-list-simple ul ol,.s-list-simple ol ul,.s-list-simple ol ol{margin-left:1.063rem}.s-list-simple ul ul ul,.s-list-simple ul ul ol,.s-list-simple ul ol ul,.s-list-simple ul ol ol,.s-list-simple ol ul ul,.s-list-simple ol ul ol,.s-list-simple ol ol ul,.s-list-simple ol ol ol{margin-left:1.5rem}.s-list-simple ul ul ul ul,.s-list-simple ul ul ul ol,.s-list-simple ul ul ol ul,.s-list-simple ul ul ol ol,.s-list-simple ul ol ul ul,.s-list-simple ul ol ul ol,.s-list-simple ul ol ol ul,.s-list-simple ul ol ol ol,.s-list-simple ol ul ul ul,.s-list-simple ol ul ul ol,.s-list-simple ol ul ol ul,.s-list-simple ol ul ol ol,.s-list-simple ol ol ul ul,.s-list-simple ol ol ul ol,.s-list-simple ol ol ol ul,.s-list-simple ol ol ol ol{margin-left:30.063rem}.s-list-simple--default ul{list-style:disc}.s-list-simple--check li,.s-list-simple--chevron li,.s-list-simple--folder li{list-style-type:none}.s-list-simple--check li:before,.s-list-simple--chevron li:before,.s-list-simple--folder li:before{font-family:Material Icons;display:inline-block;margin-right:.5em}.s-list-simple--check ul ul ul li:before{color:var(--green-700)}.s-list-simple--check ul ul ul .mark-invert:before,.s-list-simple--check ul ul ul .mark-invert::marker{color:var(--green-600)!important}.s-list-simple--check li:before{content:\"\\e5ca\";color:var(--green-600)}.s-list-simple--check .mark-invert:before,.s-list-simple--check .mark-invert::marker{color:var(--green-700)}.s-list-simple--chevron li:before{content:\"\\e5cc\";color:var(--secondary-600)}.s-list-simple--dot ul,.s-list-simple--dot ul ul{list-style:disc}.s-list-simple--dot ul ul ul{list-style:circle}.s-list-simple--dot li::marker{font-size:1.063rem;color:var(--secondary-600)}.s-list-simple--folder ul ul ul li:before{font-family:Material Symbols Outlined}.s-list-simple--folder ul ul ul .mark-invert:before,.s-list-simple--folder ul ul ul .mark-invert::marker{font-family:Material Icons!important}.s-list-simple--folder li:before{content:\"\\e2c7\";color:var(--secondary-600)}.s-list-simple--folder .mark-invert:before,.s-list-simple--folder .mark-invert::marker{font-family:Material Symbols Outlined}.s-list-simple--a1 ul>li:before{color:var(--primary-600);font-weight:700;content:counter(level1) \". \";counter-increment:level1}.s-list-simple--a1 ul ul>li:before{color:var(--secondary-600);font-weight:700;content:counter(level2,lower-alpha) \". \";counter-increment:level2}.s-list-simple--a1 ul ul ul>li:before{font-weight:400;content:counter(level2,lower-alpha) \".\" counter(level3) \" \";counter-increment:level3}.s-list-simple--a1 ul{counter-reset:level1}.s-list-simple--a1 ul ul{counter-reset:level2}.s-list-simple--a1 ul ul ul{counter-reset:level3}\n"] }]
|
|
5478
5477
|
}], propDecorators: { listStyle: [{
|
|
5479
5478
|
type: Input
|
|
5480
5479
|
}] } });
|
|
@@ -6093,11 +6092,11 @@ class STabsComponent {
|
|
|
6093
6092
|
this.eventSelect.emit(tab);
|
|
6094
6093
|
}
|
|
6095
6094
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6096
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\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 >\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig\"\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\">{{ tab.text }}</span>\n <s-badge\n *ngIf=\"tab.badge\"\n [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n >{{ tab.badge }}</s-badge\n >\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}.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__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", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6095
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"s-tabs s-scroll no-select\"\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 >\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig\"\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\">{{ tab.text }}</span>\n <s-badge\n *ngIf=\"tab.badge\"\n [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n >{{ tab.badge }}</s-badge\n >\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", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6097
6096
|
}
|
|
6098
6097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, decorators: [{
|
|
6099
6098
|
type: Component,
|
|
6100
|
-
args: [{ selector: 's-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"s-tabs s-scroll no-select\"\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 >\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig\"\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\">{{ tab.text }}</span>\n <s-badge\n *ngIf=\"tab.badge\"\n [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n >{{ tab.badge }}</s-badge\n >\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}.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__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"] }]
|
|
6099
|
+
args: [{ selector: 's-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"s-tabs s-scroll no-select\"\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 >\n <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n <div\n class=\"s-tabs__content\"\n *ngFor=\"let tab of tabsConfig\"\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\">{{ tab.text }}</span>\n <s-badge\n *ngIf=\"tab.badge\"\n [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n >{{ tab.badge }}</s-badge\n >\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"] }]
|
|
6101
6100
|
}], ctorParameters: () => [], propDecorators: { tabs: [{
|
|
6102
6101
|
type: Input
|
|
6103
6102
|
}], configTabs: [{
|
|
@@ -6496,6 +6495,8 @@ class TableCompleteComponent {
|
|
|
6496
6495
|
this.searchEvent = new EventEmitter();
|
|
6497
6496
|
this.bottomStatusBarEvent = new EventEmitter();
|
|
6498
6497
|
this.scrollEvent = new EventEmitter();
|
|
6498
|
+
this._sTranslateService = inject(STranslateService);
|
|
6499
|
+
this.searchText = '';
|
|
6499
6500
|
}
|
|
6500
6501
|
ngOnChanges(changes) {
|
|
6501
6502
|
if (changes['config']) {
|
|
@@ -6504,12 +6505,17 @@ class TableCompleteComponent {
|
|
|
6504
6505
|
}
|
|
6505
6506
|
ngOnInit() {
|
|
6506
6507
|
this.filtersDisabled();
|
|
6508
|
+
this.emptyConfigSearch = {
|
|
6509
|
+
image: 'assets/empty/empty-search.png',
|
|
6510
|
+
title: this._sTranslateService.instant('ui.generic.emptySearch.title'),
|
|
6511
|
+
detail: this._sTranslateService.instant('ui.generic.emptySearch.detail'),
|
|
6512
|
+
};
|
|
6507
6513
|
}
|
|
6508
6514
|
filtersDisabled() {
|
|
6509
6515
|
if (this.config.configToolbarTop) {
|
|
6510
6516
|
this.config.configToolbarTop = {
|
|
6511
6517
|
...this.config.configToolbarTop,
|
|
6512
|
-
filtersDisabled: this.config.totalItems === 0,
|
|
6518
|
+
filtersDisabled: this.config.totalItems === 0 && this.searchText === '',
|
|
6513
6519
|
};
|
|
6514
6520
|
}
|
|
6515
6521
|
}
|
|
@@ -6526,6 +6532,7 @@ class TableCompleteComponent {
|
|
|
6526
6532
|
this.deleteEvent.emit();
|
|
6527
6533
|
}
|
|
6528
6534
|
search(text) {
|
|
6535
|
+
this.searchText = text;
|
|
6529
6536
|
this.searchEvent.emit(text);
|
|
6530
6537
|
}
|
|
6531
6538
|
select(value) {
|
|
@@ -6561,11 +6568,11 @@ class TableCompleteComponent {
|
|
|
6561
6568
|
this.scrollEvent.emit();
|
|
6562
6569
|
}
|
|
6563
6570
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TableCompleteComponent, selector: "s-table-complete", inputs: { config: "config" }, outputs: { actionEvent: "actionEvent", checkAllEvent: "checkAllEvent", deleteEvent: "deleteEvent", emptyEvent: "emptyEvent", filterEvent: "filterEvent", orderByEvent: "orderByEvent", pageEvent: "pageEvent", paginationEvent: "paginationEvent", multiSelectEvent: "multiSelectEvent", pillButtonEvent: "pillButtonEvent", selectEvent: "selectEvent", searchEvent: "searchEvent", bottomStatusBarEvent: "bottomStatusBarEvent", scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"s-table-complete\">\n <s-toolbar-top\n *ngIf=\"config.configToolbarTop\"\n [config]=\"config.configToolbarTop\"\n (searchEvent)=\"search($event)\"\n (actionEvent)=\"action()\"\n (deleteEvent)=\"delete()\"\n (filterEvent)=\"filter($event)\"\n (multiSelectEvent)=\"multiSelect($event)\"\n (pillButtonEvent)=\"pillButton()\"\n (selectEvent)=\"select($event)\">\n </s-toolbar-top>\n <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n <s-tablet\n [configColumn]=\"config.columns\"\n [loading]=\"config.totalItems === 0\"\n [loadingScroll]=\"config.loadingScroll ?? false\"\n (ordenByEvent)=\"ordenEvent($event)\"\n (checkAllEvent)=\"checkAll($event)\"\n (scrollEvent)=\"onScroll()\">\n <ng-template STemplate=\"body\">\n <ng-content></ng-content>\n </ng-template>\n <ng-template STemplate=\"bodyloading\" #notItems>\n <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n </ng-template>\n </s-tablet>\n </div>\n @if (config.configBottomStatusBar) {\n <s-bottom-status-bar\n [config]=\"config.configBottomStatusBar()\"\n (stateChangeEvent)=\"selectionControlChange($event)\" />\n }\n @if (!config.scroll) {\n @if (!config.hidePagination) {\n <div class=\"s-table-complete__pagination\">\n <section>\n <s-pagination\n *ngIf=\"config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [showing]=\"config.paginationText.showing\"\n [of]=\"config.paginationText.of\"\n [items]=\"config.paginationText.items\"\n [empty]=\"config.paginationText.empty\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n [totalItems]=\"config.totalItems ?? 0\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n <s-pagination\n *ngIf=\"!config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [totalItems]=\"config.totalItems ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n </section>\n </div>\n }\n }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SToolbarTopComponent, selector: "s-toolbar-top", inputs: ["config"], outputs: ["actionEvent", "deleteEvent", "filterEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent"] }, { kind: "component", type: EmptyComponent, selector: "s-empty", inputs: ["config"], outputs: ["buttonEvent"] }, { kind: "component", type: STabletComponent, selector: "s-tablet", inputs: ["data", "loading", "caption", "header", "bodyloading", "body", "configColumn", "loadingScroll"], outputs: ["updateDataEvent", "ordenByEvent", "checkAllEvent", "scrollEvent"] }, { kind: "directive", type: STemplate, selector: "[STemplate]", inputs: ["STemplate"] }, { kind: "component", type: SPaginationComponent, selector: "s-pagination", inputs: ["showing", "to", "of", "items", "empty", "disabled", "pageNumber", "totalItems", "pageSize", "pageSizes"], outputs: ["pageEmitter", "paginationEmitter"] }, { kind: "component", type: SBottomStatusBarComponent, selector: "s-bottom-status-bar", inputs: ["config"], outputs: ["stateChange", "stateChangeEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TableCompleteComponent, selector: "s-table-complete", inputs: { config: "config" }, outputs: { actionEvent: "actionEvent", checkAllEvent: "checkAllEvent", deleteEvent: "deleteEvent", emptyEvent: "emptyEvent", filterEvent: "filterEvent", orderByEvent: "orderByEvent", pageEvent: "pageEvent", paginationEvent: "paginationEvent", multiSelectEvent: "multiSelectEvent", pillButtonEvent: "pillButtonEvent", selectEvent: "selectEvent", searchEvent: "searchEvent", bottomStatusBarEvent: "bottomStatusBarEvent", scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"s-table-complete\">\n <s-toolbar-top\n *ngIf=\"config.configToolbarTop\"\n [config]=\"config.configToolbarTop\"\n (searchEvent)=\"search($event)\"\n (actionEvent)=\"action()\"\n (deleteEvent)=\"delete()\"\n (filterEvent)=\"filter($event)\"\n (multiSelectEvent)=\"multiSelect($event)\"\n (pillButtonEvent)=\"pillButton()\"\n (selectEvent)=\"select($event)\">\n </s-toolbar-top>\n <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n <s-tablet\n [configColumn]=\"config.columns\"\n [loading]=\"config.totalItems === 0\"\n [loadingScroll]=\"config.loadingScroll ?? false\"\n [isTreeMode]=\"config.isTreeMode ?? false\"\n (ordenByEvent)=\"ordenEvent($event)\"\n (checkAllEvent)=\"checkAll($event)\"\n (scrollEvent)=\"onScroll()\">\n <ng-template STemplate=\"body\">\n <ng-content></ng-content>\n </ng-template>\n <ng-template STemplate=\"bodyloading\" #notItems>\n @if (searchText) {\n <s-empty [config]=\"emptyConfigSearch\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n } @else {\n <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n }\n </ng-template>\n </s-tablet>\n </div>\n @if (config.configBottomStatusBar) {\n <s-bottom-status-bar\n [config]=\"config.configBottomStatusBar()\"\n (stateChangeEvent)=\"selectionControlChange($event)\" />\n }\n @if (!config.scroll) {\n @if (!config.hidePagination) {\n <div class=\"s-table-complete__pagination\">\n <section>\n <s-pagination\n *ngIf=\"config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [showing]=\"config.paginationText.showing\"\n [of]=\"config.paginationText.of\"\n [items]=\"config.paginationText.items\"\n [empty]=\"config.paginationText.empty\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n [totalItems]=\"config.totalItems ?? 0\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n <s-pagination\n *ngIf=\"!config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [totalItems]=\"config.totalItems ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n </section>\n </div>\n }\n }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SToolbarTopComponent, selector: "s-toolbar-top", inputs: ["config"], outputs: ["actionEvent", "deleteEvent", "filterEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent"] }, { kind: "component", type: EmptyComponent, selector: "s-empty", inputs: ["config"], outputs: ["buttonEvent"] }, { kind: "component", type: STabletComponent, selector: "s-tablet", inputs: ["data", "loading", "caption", "header", "bodyloading", "body", "configColumn", "isTreeMode", "loadingScroll"], outputs: ["updateDataEvent", "ordenByEvent", "checkAllEvent", "scrollEvent"] }, { kind: "directive", type: STemplate, selector: "[STemplate]", inputs: ["STemplate"] }, { kind: "component", type: SPaginationComponent, selector: "s-pagination", inputs: ["showing", "to", "of", "items", "empty", "disabled", "pageNumber", "totalItems", "pageSize", "pageSizes"], outputs: ["pageEmitter", "paginationEmitter"] }, { kind: "component", type: SBottomStatusBarComponent, selector: "s-bottom-status-bar", inputs: ["config"], outputs: ["stateChange", "stateChangeEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6565
6572
|
}
|
|
6566
6573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableCompleteComponent, decorators: [{
|
|
6567
6574
|
type: Component,
|
|
6568
|
-
args: [{ selector: 's-table-complete', encapsulation: ViewEncapsulation.None, template: "<section class=\"s-table-complete\">\n <s-toolbar-top\n *ngIf=\"config.configToolbarTop\"\n [config]=\"config.configToolbarTop\"\n (searchEvent)=\"search($event)\"\n (actionEvent)=\"action()\"\n (deleteEvent)=\"delete()\"\n (filterEvent)=\"filter($event)\"\n (multiSelectEvent)=\"multiSelect($event)\"\n (pillButtonEvent)=\"pillButton()\"\n (selectEvent)=\"select($event)\">\n </s-toolbar-top>\n <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n <s-tablet\n [configColumn]=\"config.columns\"\n [loading]=\"config.totalItems === 0\"\n [loadingScroll]=\"config.loadingScroll ?? false\"\n (ordenByEvent)=\"ordenEvent($event)\"\n (checkAllEvent)=\"checkAll($event)\"\n (scrollEvent)=\"onScroll()\">\n <ng-template STemplate=\"body\">\n <ng-content></ng-content>\n </ng-template>\n <ng-template STemplate=\"bodyloading\" #notItems>\n <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n </ng-template>\n </s-tablet>\n </div>\n @if (config.configBottomStatusBar) {\n <s-bottom-status-bar\n [config]=\"config.configBottomStatusBar()\"\n (stateChangeEvent)=\"selectionControlChange($event)\" />\n }\n @if (!config.scroll) {\n @if (!config.hidePagination) {\n <div class=\"s-table-complete__pagination\">\n <section>\n <s-pagination\n *ngIf=\"config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [showing]=\"config.paginationText.showing\"\n [of]=\"config.paginationText.of\"\n [items]=\"config.paginationText.items\"\n [empty]=\"config.paginationText.empty\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n [totalItems]=\"config.totalItems ?? 0\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n <s-pagination\n *ngIf=\"!config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [totalItems]=\"config.totalItems ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n </section>\n </div>\n }\n }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"] }]
|
|
6575
|
+
args: [{ selector: 's-table-complete', encapsulation: ViewEncapsulation.None, template: "<section class=\"s-table-complete\">\n <s-toolbar-top\n *ngIf=\"config.configToolbarTop\"\n [config]=\"config.configToolbarTop\"\n (searchEvent)=\"search($event)\"\n (actionEvent)=\"action()\"\n (deleteEvent)=\"delete()\"\n (filterEvent)=\"filter($event)\"\n (multiSelectEvent)=\"multiSelect($event)\"\n (pillButtonEvent)=\"pillButton()\"\n (selectEvent)=\"select($event)\">\n </s-toolbar-top>\n <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n <s-tablet\n [configColumn]=\"config.columns\"\n [loading]=\"config.totalItems === 0\"\n [loadingScroll]=\"config.loadingScroll ?? false\"\n [isTreeMode]=\"config.isTreeMode ?? false\"\n (ordenByEvent)=\"ordenEvent($event)\"\n (checkAllEvent)=\"checkAll($event)\"\n (scrollEvent)=\"onScroll()\">\n <ng-template STemplate=\"body\">\n <ng-content></ng-content>\n </ng-template>\n <ng-template STemplate=\"bodyloading\" #notItems>\n @if (searchText) {\n <s-empty [config]=\"emptyConfigSearch\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n } @else {\n <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n }\n </ng-template>\n </s-tablet>\n </div>\n @if (config.configBottomStatusBar) {\n <s-bottom-status-bar\n [config]=\"config.configBottomStatusBar()\"\n (stateChangeEvent)=\"selectionControlChange($event)\" />\n }\n @if (!config.scroll) {\n @if (!config.hidePagination) {\n <div class=\"s-table-complete__pagination\">\n <section>\n <s-pagination\n *ngIf=\"config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [showing]=\"config.paginationText.showing\"\n [of]=\"config.paginationText.of\"\n [items]=\"config.paginationText.items\"\n [empty]=\"config.paginationText.empty\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n [totalItems]=\"config.totalItems ?? 0\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n <s-pagination\n *ngIf=\"!config.paginationText\"\n [disabled]=\"config.totalItems === 0\"\n [pageNumber]=\"config.pageNumber ?? 0\"\n [totalItems]=\"config.totalItems ?? 0\"\n [pageSize]=\"config.pageSize ?? 0\"\n [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n (pageEmitter)=\"goToPage($event)\"\n (paginationEmitter)=\"pagination($event)\">\n </s-pagination>\n </section>\n </div>\n }\n }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"] }]
|
|
6569
6576
|
}], propDecorators: { config: [{
|
|
6570
6577
|
type: Input
|
|
6571
6578
|
}], actionEvent: [{
|
|
@@ -6727,10 +6734,10 @@ class SModalConfirmComponent {
|
|
|
6727
6734
|
this.modalConfirmService.close(response, checkboxChecked);
|
|
6728
6735
|
}
|
|
6729
6736
|
getTextAlignClass() {
|
|
6730
|
-
return 's-modal-confirm__message--' + (this.config?.textAlign ?? '
|
|
6737
|
+
return 's-modal-confirm__message--' + (this.config?.textAlign ?? 'left');
|
|
6731
6738
|
}
|
|
6732
6739
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6733
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div\n class=\"s-modal-confirm\"\n (click)=\"close(false)\"\n (keydown.enter)=\"close(false)\"\n tabindex=\"0\">\n <div\n class=\"s-modal-confirm__content\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n tabindex=\"0\">\n <section\n class=\"s-modal-confirm__header\"\n [ngClass]=\"{\n 's-modal-confirm__header--secondary':\n config.backgroundType === 'secondary',\n }\">\n <div class=\"s-modal-confirm__header-title\">\n <s-icon-mat\n size=\"20\"\n [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n {{ getIconType(config.type).icon }}\n </s-icon-mat>\n <h4 class=\"s-modal-confirm__title\">\n {{ config.title }}\n </h4>\n </div>\n <s-icon-mat\n
|
|
6740
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div\n class=\"s-modal-confirm\"\n (click)=\"close(false)\"\n (keydown.enter)=\"close(false)\"\n tabindex=\"0\">\n <div\n class=\"s-modal-confirm__content\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n tabindex=\"0\">\n <section\n class=\"s-modal-confirm__header\"\n [ngClass]=\"{\n 's-modal-confirm__header--secondary':\n config.backgroundType === 'secondary',\n }\">\n <div class=\"s-modal-confirm__header-title\">\n <s-icon-mat\n size=\"20\"\n [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n {{ getIconType(config.type).icon }}\n </s-icon-mat>\n <h4 class=\"s-modal-confirm__title\">\n {{ config.title }}\n </h4>\n </div>\n @if (config.cancelText) {\n <s-icon-mat\n tabindex=\"0\"\n class=\"s-modal-confirm__icon-close\"\n size=\"20\"\n (click)=\"close(false)\">\n close\n </s-icon-mat>\n }\n </section>\n <div class=\"s-scroll s-modal-confirm__body\">\n <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n {{ config.message }}\n </p>\n </div>\n <section\n class=\"s-modal-confirm__buttons\"\n [ngClass]=\"{\n 's-modal-confirm__buttons--secondary':\n config.backgroundType === 'secondary',\n }\">\n <div>\n @if (config.checkbox) {\n <s-checkbox\n [config]=\"configCheckbox\"\n [(ngModel)]=\"valueCheckbox\"\n (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n }\n </div>\n <div>\n @if (config.cancelText) {\n <s-button\n type=\"tertiary\"\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(false, valueCheckbox)\"\n (keydown.enter)=\"close(false, valueCheckbox)\">\n {{ config.cancelText }}\n </s-button>\n }\n <s-button\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(true, valueCheckbox)\"\n (keydown.enter)=\"close(true, valueCheckbox)\">\n {{ config.confirmText }}\n </s-button>\n </div>\n </section>\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SCheckboxModule }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] }); }
|
|
6734
6741
|
}
|
|
6735
6742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, decorators: [{
|
|
6736
6743
|
type: Component,
|
|
@@ -6740,7 +6747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6740
6747
|
SIconMaterialModule,
|
|
6741
6748
|
SCheckboxModule,
|
|
6742
6749
|
FormsModule,
|
|
6743
|
-
], template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div\n class=\"s-modal-confirm\"\n (click)=\"close(false)\"\n (keydown.enter)=\"close(false)\"\n tabindex=\"0\">\n <div\n class=\"s-modal-confirm__content\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n tabindex=\"0\">\n <section\n class=\"s-modal-confirm__header\"\n [ngClass]=\"{\n 's-modal-confirm__header--secondary':\n config.backgroundType === 'secondary',\n }\">\n <div class=\"s-modal-confirm__header-title\">\n <s-icon-mat\n size=\"20\"\n [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n {{ getIconType(config.type).icon }}\n </s-icon-mat>\n <h4 class=\"s-modal-confirm__title\">\n {{ config.title }}\n </h4>\n </div>\n <s-icon-mat\n
|
|
6750
|
+
], template: "@if (config.isVisible) {\n <div class=\"overlay\">\n <div class=\"overlay__grid-12\">\n <div\n class=\"s-modal-confirm\"\n (click)=\"close(false)\"\n (keydown.enter)=\"close(false)\"\n tabindex=\"0\">\n <div\n class=\"s-modal-confirm__content\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n tabindex=\"0\">\n <section\n class=\"s-modal-confirm__header\"\n [ngClass]=\"{\n 's-modal-confirm__header--secondary':\n config.backgroundType === 'secondary',\n }\">\n <div class=\"s-modal-confirm__header-title\">\n <s-icon-mat\n size=\"20\"\n [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n {{ getIconType(config.type).icon }}\n </s-icon-mat>\n <h4 class=\"s-modal-confirm__title\">\n {{ config.title }}\n </h4>\n </div>\n @if (config.cancelText) {\n <s-icon-mat\n tabindex=\"0\"\n class=\"s-modal-confirm__icon-close\"\n size=\"20\"\n (click)=\"close(false)\">\n close\n </s-icon-mat>\n }\n </section>\n <div class=\"s-scroll s-modal-confirm__body\">\n <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n {{ config.message }}\n </p>\n </div>\n <section\n class=\"s-modal-confirm__buttons\"\n [ngClass]=\"{\n 's-modal-confirm__buttons--secondary':\n config.backgroundType === 'secondary',\n }\">\n <div>\n @if (config.checkbox) {\n <s-checkbox\n [config]=\"configCheckbox\"\n [(ngModel)]=\"valueCheckbox\"\n (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n }\n </div>\n <div>\n @if (config.cancelText) {\n <s-button\n type=\"tertiary\"\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(false, valueCheckbox)\"\n (keydown.enter)=\"close(false, valueCheckbox)\">\n {{ config.cancelText }}\n </s-button>\n }\n <s-button\n [theme]=\"getIconType(config.type).color\"\n (click)=\"close(true, valueCheckbox)\"\n (keydown.enter)=\"close(true, valueCheckbox)\">\n {{ config.confirmText }}\n </s-button>\n </div>\n </section>\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"] }]
|
|
6744
6751
|
}], propDecorators: { onEscapeKey: [{
|
|
6745
6752
|
type: HostListener,
|
|
6746
6753
|
args: ['document:keydown.escape', ['$event']]
|
|
@@ -7080,6 +7087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7080
7087
|
type: Input
|
|
7081
7088
|
}] } });
|
|
7082
7089
|
|
|
7090
|
+
const MAX_TREE_LEVEL = 20;
|
|
7083
7091
|
class STableDoubleComponent {
|
|
7084
7092
|
constructor() {
|
|
7085
7093
|
this.actionPositionEvent = new EventEmitter();
|
|
@@ -7096,7 +7104,10 @@ class STableDoubleComponent {
|
|
|
7096
7104
|
this.pillButtonPositionEvent = new EventEmitter();
|
|
7097
7105
|
this.scrollPositionEvent = new EventEmitter();
|
|
7098
7106
|
this.selectPositionEvent = new EventEmitter();
|
|
7107
|
+
this.rowSelectPositionEvent = new EventEmitter();
|
|
7099
7108
|
this.actionEvent = new EventEmitter();
|
|
7109
|
+
this.toggleExpandEvent = new EventEmitter();
|
|
7110
|
+
this.reorderItemEvent = new EventEmitter();
|
|
7100
7111
|
this.disabledButtonLeft = signal(true);
|
|
7101
7112
|
this.disabledButtonRight = signal(true);
|
|
7102
7113
|
this.itemsTableLeft = [];
|
|
@@ -7133,34 +7144,35 @@ class STableDoubleComponent {
|
|
|
7133
7144
|
onDragLeave(event) {
|
|
7134
7145
|
this.dragOverItemId = null;
|
|
7135
7146
|
}
|
|
7136
|
-
onDrop(event, itemId,
|
|
7147
|
+
onDrop(event, itemId, isLeftTable) {
|
|
7137
7148
|
if (this.dragItemId === null || this.dragItemId === itemId) {
|
|
7138
7149
|
return;
|
|
7139
7150
|
}
|
|
7140
7151
|
// Reordenar los elementos
|
|
7141
|
-
const
|
|
7142
|
-
const
|
|
7152
|
+
const items = this.getItems(isLeftTable);
|
|
7153
|
+
const dragIndex = items.findIndex((item) => item.id === this.dragItemId);
|
|
7154
|
+
const dropIndex = items.findIndex((item) => item.id === itemId);
|
|
7143
7155
|
if (dragIndex !== -1 && dropIndex !== -1) {
|
|
7144
|
-
const draggedItem =
|
|
7145
|
-
|
|
7146
|
-
|
|
7156
|
+
const draggedItem = items[dragIndex];
|
|
7157
|
+
items.splice(dragIndex, 1);
|
|
7158
|
+
items.splice(dropIndex, 0, draggedItem);
|
|
7147
7159
|
}
|
|
7148
7160
|
this.dragItemId = null;
|
|
7149
7161
|
this.dragOverItemId = null;
|
|
7150
7162
|
event.preventDefault();
|
|
7151
7163
|
this.eventUpdateTablesEmit();
|
|
7152
7164
|
}
|
|
7153
|
-
iconAction(itemId,
|
|
7154
|
-
const items = this.
|
|
7165
|
+
iconAction(itemId, isLeftTable) {
|
|
7166
|
+
const items = this.getItems(isLeftTable);
|
|
7155
7167
|
const item = items.find((item) => item.id === itemId);
|
|
7156
7168
|
if (item)
|
|
7157
|
-
this.actionEvent.emit({
|
|
7169
|
+
this.actionEvent.emit({ isLeftTable, id: itemId });
|
|
7158
7170
|
}
|
|
7159
|
-
selectItem(itemId,
|
|
7160
|
-
const items = this.
|
|
7171
|
+
selectItem(itemId, isLeftTable) {
|
|
7172
|
+
const items = this.getItems(isLeftTable);
|
|
7161
7173
|
const itemIndex = items.findIndex((item) => item.id === itemId);
|
|
7162
7174
|
if (itemIndex !== -1) {
|
|
7163
|
-
items[itemIndex].
|
|
7175
|
+
items[itemIndex].selectedCheckbox = !items[itemIndex].selectedCheckbox;
|
|
7164
7176
|
this.updateCounter();
|
|
7165
7177
|
}
|
|
7166
7178
|
}
|
|
@@ -7168,18 +7180,29 @@ class STableDoubleComponent {
|
|
|
7168
7180
|
this.itemsTableLeft = [...this.config.tableLeftItems];
|
|
7169
7181
|
this.itemsTableRightData = [...this.config.tableRightItems];
|
|
7170
7182
|
}
|
|
7171
|
-
moveItems(
|
|
7172
|
-
const sourceData = this.
|
|
7173
|
-
const targetData = this.
|
|
7174
|
-
const
|
|
7175
|
-
const
|
|
7176
|
-
const
|
|
7177
|
-
const
|
|
7178
|
-
|
|
7183
|
+
moveItems(isLeftTableSource) {
|
|
7184
|
+
const sourceData = this.getItems(isLeftTableSource);
|
|
7185
|
+
const targetData = this.getItems(!isLeftTableSource);
|
|
7186
|
+
const originalSourceData = isLeftTableSource ? this.itemsTableLeft : this.itemsTableRightData;
|
|
7187
|
+
const originalTargetData = isLeftTableSource ? this.itemsTableRightData : this.itemsTableLeft;
|
|
7188
|
+
const hasItemSelection = sourceData.some(item => item.itemSelected);
|
|
7189
|
+
const selectedItems = sourceData
|
|
7190
|
+
.filter(item => hasItemSelection ? item.itemSelected : item.selectedCheckbox)
|
|
7191
|
+
.map(item => ({
|
|
7192
|
+
...item,
|
|
7193
|
+
selectedCheckbox: false,
|
|
7194
|
+
itemSelected: false
|
|
7195
|
+
}));
|
|
7179
7196
|
targetData.push(...selectedItems);
|
|
7180
|
-
this.
|
|
7197
|
+
this.setItems(isLeftTableSource, sourceData.filter(item => hasItemSelection ? !item.itemSelected : !item.selectedCheckbox));
|
|
7181
7198
|
originalTargetData.push(...selectedItems);
|
|
7182
|
-
|
|
7199
|
+
const filteredOriginalSource = originalSourceData.filter(item => !selectedItems.some(sel => sel.name === item.name));
|
|
7200
|
+
if (isLeftTableSource) {
|
|
7201
|
+
this.itemsTableLeft = filteredOriginalSource;
|
|
7202
|
+
}
|
|
7203
|
+
else {
|
|
7204
|
+
this.itemsTableRightData = filteredOriginalSource;
|
|
7205
|
+
}
|
|
7183
7206
|
const checkColumnRight = this.config.tableRightConfig.columns[0]?.checkboxValue;
|
|
7184
7207
|
const checkColumnLeft = this.config.tableLeftConfig.columns[0]?.checkboxValue;
|
|
7185
7208
|
if (checkColumnRight)
|
|
@@ -7198,69 +7221,69 @@ class STableDoubleComponent {
|
|
|
7198
7221
|
});
|
|
7199
7222
|
}
|
|
7200
7223
|
addItem() {
|
|
7201
|
-
this.moveItems(
|
|
7224
|
+
this.moveItems(true);
|
|
7202
7225
|
this.cloneItemsTables();
|
|
7203
7226
|
}
|
|
7204
7227
|
removeItem() {
|
|
7205
|
-
this.moveItems(
|
|
7228
|
+
this.moveItems(false);
|
|
7206
7229
|
this.cloneItemsTables();
|
|
7207
7230
|
}
|
|
7208
|
-
action(
|
|
7209
|
-
this.actionPositionEvent.emit(
|
|
7231
|
+
action(isLeftTable) {
|
|
7232
|
+
this.actionPositionEvent.emit(isLeftTable);
|
|
7210
7233
|
}
|
|
7211
|
-
delete(
|
|
7212
|
-
this.deletePositionEvent.emit(
|
|
7234
|
+
delete(isLeftTable) {
|
|
7235
|
+
this.deletePositionEvent.emit(isLeftTable);
|
|
7213
7236
|
}
|
|
7214
|
-
empty(
|
|
7215
|
-
this.emptyPositionEvent.emit(
|
|
7237
|
+
empty(isLeftTable) {
|
|
7238
|
+
this.emptyPositionEvent.emit(isLeftTable);
|
|
7216
7239
|
}
|
|
7217
|
-
orderBy(event,
|
|
7218
|
-
this.orderByPositionEvent.emit({
|
|
7240
|
+
orderBy(event, isLeftTable) {
|
|
7241
|
+
this.orderByPositionEvent.emit({ isLeftTable, value: event });
|
|
7219
7242
|
}
|
|
7220
|
-
page(event,
|
|
7221
|
-
this.pagePositionEvent.emit({
|
|
7243
|
+
page(event, isLeftTable) {
|
|
7244
|
+
this.pagePositionEvent.emit({ isLeftTable, value: event });
|
|
7222
7245
|
}
|
|
7223
|
-
paginationEmitter(event,
|
|
7224
|
-
this.paginationPositionEvent.emit({
|
|
7246
|
+
paginationEmitter(event, isLeftTable) {
|
|
7247
|
+
this.paginationPositionEvent.emit({ isLeftTable, value: event });
|
|
7225
7248
|
}
|
|
7226
|
-
select(event,
|
|
7227
|
-
this.selectPositionEvent.emit({
|
|
7249
|
+
select(event, isLeftTable) {
|
|
7250
|
+
this.selectPositionEvent.emit({ isLeftTable, value: event });
|
|
7228
7251
|
}
|
|
7229
|
-
pillButton(
|
|
7230
|
-
this.pillButtonPositionEvent.emit(
|
|
7252
|
+
pillButton(isLeftTable) {
|
|
7253
|
+
this.pillButtonPositionEvent.emit(isLeftTable);
|
|
7231
7254
|
}
|
|
7232
|
-
filter(event,
|
|
7233
|
-
this.filterPositionEvent.emit({
|
|
7255
|
+
filter(event, isLeftTable) {
|
|
7256
|
+
this.filterPositionEvent.emit({ isLeftTable, value: event });
|
|
7234
7257
|
}
|
|
7235
|
-
multiSelect(event,
|
|
7236
|
-
this.multiSelectPositionEvent.emit({
|
|
7258
|
+
multiSelect(event, isLeftTable) {
|
|
7259
|
+
this.multiSelectPositionEvent.emit({ isLeftTable, value: event });
|
|
7237
7260
|
}
|
|
7238
|
-
checkAllEvent(event,
|
|
7239
|
-
|
|
7261
|
+
checkAllEvent(event, isLeftTable) {
|
|
7262
|
+
const items = this.getItems(isLeftTable);
|
|
7263
|
+
this.setItems(isLeftTable, items.map(item => ({
|
|
7240
7264
|
...item,
|
|
7241
|
-
|
|
7242
|
-
}));
|
|
7265
|
+
selectedCheckbox: event,
|
|
7266
|
+
})));
|
|
7243
7267
|
this.updateCounter();
|
|
7244
7268
|
}
|
|
7245
|
-
onScroll(
|
|
7246
|
-
this.scrollPositionEvent.emit(
|
|
7269
|
+
onScroll(isLeftTable) {
|
|
7270
|
+
this.scrollPositionEvent.emit(isLeftTable);
|
|
7247
7271
|
}
|
|
7248
7272
|
changeCheckbox() {
|
|
7249
7273
|
this.config.tableRightConfig.columns[0].checkboxValue =
|
|
7250
|
-
this.config.tableRightItems.length > 0 && this.config.tableRightItems.every(item => item.
|
|
7274
|
+
this.config.tableRightItems.length > 0 && this.config.tableRightItems.every(item => item.selectedCheckbox);
|
|
7251
7275
|
this.config.tableLeftConfig.columns[0].checkboxValue =
|
|
7252
|
-
this.config.tableLeftItems.length > 0 && this.config.tableLeftItems.every(item => item.
|
|
7276
|
+
this.config.tableLeftItems.length > 0 && this.config.tableLeftItems.every(item => item.selectedCheckbox);
|
|
7253
7277
|
this.updateCounter();
|
|
7254
7278
|
}
|
|
7255
|
-
bottomStatusBarChange(state,
|
|
7256
|
-
this.bottomStatusBarPositionEvent.emit({
|
|
7279
|
+
bottomStatusBarChange(state, isLeftTable) {
|
|
7280
|
+
this.bottomStatusBarPositionEvent.emit({ isLeftTable, value: state });
|
|
7257
7281
|
this.updateCounter();
|
|
7258
7282
|
}
|
|
7259
|
-
search(event,
|
|
7260
|
-
const
|
|
7261
|
-
const original = isLeft ? this.itemsTableLeft : this.itemsTableRightData;
|
|
7283
|
+
search(event, isLeftTable) {
|
|
7284
|
+
const original = isLeftTable ? this.itemsTableLeft : this.itemsTableRightData;
|
|
7262
7285
|
const filtered = this.getFilteredItems(original, event);
|
|
7263
|
-
if (
|
|
7286
|
+
if (isLeftTable) {
|
|
7264
7287
|
this.config.tableLeftItems = filtered;
|
|
7265
7288
|
}
|
|
7266
7289
|
else {
|
|
@@ -7275,24 +7298,99 @@ class STableDoubleComponent {
|
|
|
7275
7298
|
}
|
|
7276
7299
|
updateCounter() {
|
|
7277
7300
|
const updateStatusBar = (items, config, setter) => {
|
|
7278
|
-
const
|
|
7301
|
+
const counterCheckbox = items.filter(item => item.selectedCheckbox).length;
|
|
7302
|
+
const counterItem = items.filter(item => item.itemSelected).length;
|
|
7303
|
+
const counter = Math.max(counterCheckbox, counterItem);
|
|
7279
7304
|
config.configBottomStatusBar = signal({
|
|
7280
7305
|
...config.configBottomStatusBar?.(),
|
|
7281
7306
|
counter,
|
|
7282
7307
|
disabled: items.length === 0,
|
|
7283
7308
|
total: items.length,
|
|
7284
7309
|
});
|
|
7285
|
-
|
|
7310
|
+
// Habilitar botón si hay items seleccionados (por checkbox O por item)
|
|
7311
|
+
setter.set(counterCheckbox === 0 && counterItem === 0);
|
|
7286
7312
|
};
|
|
7287
7313
|
updateStatusBar(this.config.tableLeftItems, this.config.tableLeftConfig, this.disabledButtonLeft);
|
|
7288
7314
|
updateStatusBar(this.config.tableRightItems, this.config.tableRightConfig, this.disabledButtonRight);
|
|
7289
7315
|
}
|
|
7316
|
+
getTreeLevelClass(item) {
|
|
7317
|
+
if (!this.config.isTreeMode || !item.level) {
|
|
7318
|
+
return 's-table-double__tree-level-0';
|
|
7319
|
+
}
|
|
7320
|
+
const level = Math.min(item.level, MAX_TREE_LEVEL);
|
|
7321
|
+
return `s-table-double__tree-level-${level}`;
|
|
7322
|
+
}
|
|
7323
|
+
toggleExpand(event, itemId) {
|
|
7324
|
+
event.stopPropagation();
|
|
7325
|
+
this.toggleExpandEvent.emit(itemId);
|
|
7326
|
+
}
|
|
7327
|
+
rowClick(item, isLeftTable) {
|
|
7328
|
+
if (isLeftTable && this.config.disableLeftRowSelection) {
|
|
7329
|
+
return;
|
|
7330
|
+
}
|
|
7331
|
+
if (!isLeftTable) {
|
|
7332
|
+
this.config.tableRightItems.forEach(i => {
|
|
7333
|
+
i.itemSelected = i.id === item.id ? !i.itemSelected : false;
|
|
7334
|
+
});
|
|
7335
|
+
}
|
|
7336
|
+
else {
|
|
7337
|
+
item.itemSelected = !item.itemSelected;
|
|
7338
|
+
}
|
|
7339
|
+
this.updateCounter();
|
|
7340
|
+
this.rowSelectPositionEvent.emit({ isLeftTable, value: item });
|
|
7341
|
+
}
|
|
7342
|
+
getItems(isLeftTable) {
|
|
7343
|
+
return isLeftTable ? this.config.tableLeftItems : this.config.tableRightItems;
|
|
7344
|
+
}
|
|
7345
|
+
setItems(isLeftTable, items) {
|
|
7346
|
+
if (isLeftTable) {
|
|
7347
|
+
this.config.tableLeftItems = items;
|
|
7348
|
+
}
|
|
7349
|
+
else {
|
|
7350
|
+
this.config.tableRightItems = items;
|
|
7351
|
+
}
|
|
7352
|
+
}
|
|
7353
|
+
getOrderButtons(item) {
|
|
7354
|
+
const isFirst = !!item.__isFirstSibling;
|
|
7355
|
+
const isLast = !!item.__isLastSibling;
|
|
7356
|
+
if (item.__orderButtons &&
|
|
7357
|
+
item.__orderButtons[0].disabled === isFirst &&
|
|
7358
|
+
item.__orderButtons[2].disabled === isLast) {
|
|
7359
|
+
return item.__orderButtons;
|
|
7360
|
+
}
|
|
7361
|
+
item.__orderButtons = [
|
|
7362
|
+
{
|
|
7363
|
+
type: ActionsButtonsType.DOUBLE_ARROW_UP,
|
|
7364
|
+
tooltip: this._sTranslateService.instant('ui.generic.first'),
|
|
7365
|
+
disabled: isFirst,
|
|
7366
|
+
},
|
|
7367
|
+
{
|
|
7368
|
+
type: ActionsButtonsType.ARROW_UP,
|
|
7369
|
+
tooltip: this._sTranslateService.instant('ui.generic.up'),
|
|
7370
|
+
disabled: isFirst,
|
|
7371
|
+
},
|
|
7372
|
+
{
|
|
7373
|
+
type: ActionsButtonsType.ARROW_DOWN,
|
|
7374
|
+
tooltip: this._sTranslateService.instant('ui.generic.down'),
|
|
7375
|
+
disabled: isLast,
|
|
7376
|
+
},
|
|
7377
|
+
{
|
|
7378
|
+
type: ActionsButtonsType.DOUBLE_ARROW_DOWN,
|
|
7379
|
+
tooltip: this._sTranslateService.instant('ui.generic.last'),
|
|
7380
|
+
disabled: isLast,
|
|
7381
|
+
},
|
|
7382
|
+
];
|
|
7383
|
+
return item.__orderButtons;
|
|
7384
|
+
}
|
|
7385
|
+
onOrderButtonClick(type, itemId) {
|
|
7386
|
+
this.reorderItemEvent.emit({ itemId, direction: type });
|
|
7387
|
+
}
|
|
7290
7388
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7291
|
-
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", actionEvent: "actionEvent" }, ngImport: i0, template: "<div class=\"s-table-double\">\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('Left')\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Left')\"\n (checkAllEvent)=\"checkAllEvent($event, 'Left')\"\n (deleteEvent)=\"delete('Left')\"\n (emptyEvent)=\"empty('Left')\"\n (filterEvent)=\"filter($event, 'Left')\"\n (multiSelectEvent)=\"multiSelect($event, 'Left')\"\n (orderByEvent)=\"orderBy($event, 'Left')\"\n (pageEvent)=\"page($event, 'Left')\"\n (paginationEvent)=\"paginationEmitter($event, 'Left')\"\n (pillButtonEvent)=\"pillButton('Left')\"\n (scrollEvent)=\"onScroll('Left')\"\n (searchEvent)=\"search($event, 'Left')\">\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 [selected]=\"item.selected\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, 'Left')\"\n (click)=\"selectItem(item.id, 'Left')\">\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, 'Left')\">{{ 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 [ngClass]=\"{ active: item.selected }\">\n <td>\n <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ 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 (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_forward </span></s-icon-mat></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_back </span></s-icon-mat></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('Right')\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Right')\"\n (checkAllEvent)=\"checkAllEvent($event, 'Right')\"\n (deleteEvent)=\"delete('Right')\"\n (emptyEvent)=\"empty('Right')\"\n (filterEvent)=\"filter($event, 'Right')\"\n (multiSelectEvent)=\"multiSelect($event, 'Right')\"\n (orderByEvent)=\"orderBy($event, 'Right')\"\n (pageEvent)=\"page($event, 'Right')\"\n (paginationEvent)=\"paginationEmitter($event, 'Right')\"\n (pillButtonEvent)=\"pillButton('Right')\"\n (scrollEvent)=\"onScroll('Right')\"\n (searchEvent)=\"search($event, 'Right')\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selected\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, 'Right')\"\n (click)=\"selectItem(item.id, 'Right')\">\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, 'Right')\">{{ 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 [ngClass]=\"{ active: item.selected }\">\n <td>\n <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double{margin-bottom:1rem}.s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer}.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}.s-table-double__drag{display:flex;justify-content:space-between;width:100%}.s-table-double__drag-icon{color:var(--primary-600)}.s-table-double__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}\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"], 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", "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", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7389
|
+
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" }, ngImport: i0, template: "<div class=\"s-table-double\">\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 [selected]=\"item.selectedCheckbox\"\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 [ngClass]=\"{ active: !config.disableLeftRowSelection && item.itemSelected }\" (click)=\"!config.disableLeftRowSelection && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ 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 (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'add' : 'arrow_forward' }} </span></s-icon-mat></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'remove' : 'arrow_back' }} </span></s-icon-mat></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 [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selectedCheckbox\"\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 [ngClass]=\"{ active: item.itemSelected }\" (click)=\"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 ? config.tableRightConfig.columns.length - (config.showOrderButtons ? 1 : 0) : 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 type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (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 (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n <td>{{ item[column.id] }}</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"], 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", "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", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size"] }, { kind: "ngmodule", type: TableActionsButtonsModule }, { kind: "component", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: ["tableActionsButtons"], outputs: ["clickButtonEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7292
7390
|
}
|
|
7293
7391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, decorators: [{
|
|
7294
7392
|
type: Component,
|
|
7295
|
-
args: [{ selector: 's-table-double', standalone: true, imports: [CommonModule, STableCompleteModule, SButtonModule, FormsModule, SIconMaterialModule, SListModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\">\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('Left')\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Left')\"\n (checkAllEvent)=\"checkAllEvent($event, 'Left')\"\n (deleteEvent)=\"delete('Left')\"\n (emptyEvent)=\"empty('Left')\"\n (filterEvent)=\"filter($event, 'Left')\"\n (multiSelectEvent)=\"multiSelect($event, 'Left')\"\n (orderByEvent)=\"orderBy($event, 'Left')\"\n (pageEvent)=\"page($event, 'Left')\"\n (paginationEvent)=\"paginationEmitter($event, 'Left')\"\n (pillButtonEvent)=\"pillButton('Left')\"\n (scrollEvent)=\"onScroll('Left')\"\n (searchEvent)=\"search($event, 'Left')\">\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 [selected]=\"item.selected\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, 'Left')\"\n (click)=\"selectItem(item.id, 'Left')\">\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, 'Left')\">{{ 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 [ngClass]=\"{ active: item.selected }\">\n <td>\n <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ 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 (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_forward </span></s-icon-mat></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_back </span></s-icon-mat></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('Right')\"\n (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Right')\"\n (checkAllEvent)=\"checkAllEvent($event, 'Right')\"\n (deleteEvent)=\"delete('Right')\"\n (emptyEvent)=\"empty('Right')\"\n (filterEvent)=\"filter($event, 'Right')\"\n (multiSelectEvent)=\"multiSelect($event, 'Right')\"\n (orderByEvent)=\"orderBy($event, 'Right')\"\n (pageEvent)=\"page($event, 'Right')\"\n (paginationEvent)=\"paginationEmitter($event, 'Right')\"\n (pillButtonEvent)=\"pillButton('Right')\"\n (scrollEvent)=\"onScroll('Right')\"\n (searchEvent)=\"search($event, 'Right')\">\n @if (config.dragAndDrop) {\n @for (item of config.tableRightItems; track item) {\n <s-list\n [size]=\"'xs'\"\n [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selected\"\n (dragstart)=\"onDragStart($event, item.id)\"\n (dragover)=\"onDragOver($event, item.id)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item.id, 'Right')\"\n (click)=\"selectItem(item.id, 'Right')\">\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, 'Right')\">{{ 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 [ngClass]=\"{ active: item.selected }\">\n <td>\n <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n </td>\n @for (column of config.tableRightConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ item[column.id] }}</td>\n }\n }\n </tr>\n }\n }\n </s-table-complete>\n </div>\n </div>\n</div>\n", styles: [".s-table-double{margin-bottom:1rem}.s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer}.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}.s-table-double__drag{display:flex;justify-content:space-between;width:100%}.s-table-double__drag-icon{color:var(--primary-600)}.s-table-double__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}\n"] }]
|
|
7393
|
+
args: [{ selector: 's-table-double', standalone: true, imports: [CommonModule, STableCompleteModule, SButtonModule, FormsModule, SIconMaterialModule, SListModule, TableActionsButtonsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\">\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 [selected]=\"item.selectedCheckbox\"\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 [ngClass]=\"{ active: !config.disableLeftRowSelection && item.itemSelected }\" (click)=\"!config.disableLeftRowSelection && rowClick(item, true)\">\n <td (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (change)=\"changeCheckbox()\" />\n </td>\n @for (column of config.tableLeftConfig.columns; track column) {\n @if (column.id !== 'checkbox' && column.id !== undefined) {\n <td>{{ 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 (click)=\"addItem()\"\n (keydown.enter)=\"addItem()\"\n position=\"normal\"\n [disabled]=\"disabledButtonLeft()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'add' : 'arrow_forward' }} </span></s-icon-mat></s-button\n >\n </div>\n <div>\n <s-button\n (click)=\"removeItem()\"\n (keydown.enter)=\"removeItem()\"\n position=\"normal\"\n type=\"secondary\"\n [disabled]=\"disabledButtonRight()\"\n [pill]=\"true\"\n ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'remove' : 'arrow_back' }} </span></s-icon-mat></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 [attr.data-item-id]=\"item.id\"\n [draggable]=\"true\"\n [selected]=\"item.selectedCheckbox\"\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 [ngClass]=\"{ active: item.itemSelected }\" (click)=\"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 ? config.tableRightConfig.columns.length - (config.showOrderButtons ? 1 : 0) : 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 type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (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 (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n <td>{{ item[column.id] }}</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"] }]
|
|
7296
7394
|
}], propDecorators: { config: [{
|
|
7297
7395
|
type: Input
|
|
7298
7396
|
}], actionPositionEvent: [{
|
|
@@ -7323,13 +7421,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7323
7421
|
type: Output
|
|
7324
7422
|
}], selectPositionEvent: [{
|
|
7325
7423
|
type: Output
|
|
7424
|
+
}], rowSelectPositionEvent: [{
|
|
7425
|
+
type: Output
|
|
7326
7426
|
}], actionEvent: [{
|
|
7327
7427
|
type: Output
|
|
7428
|
+
}], toggleExpandEvent: [{
|
|
7429
|
+
type: Output
|
|
7430
|
+
}], reorderItemEvent: [{
|
|
7431
|
+
type: Output
|
|
7432
|
+
}] } });
|
|
7433
|
+
|
|
7434
|
+
class STableDoubleCompleteComponent {
|
|
7435
|
+
constructor() {
|
|
7436
|
+
this.updateEvent = new EventEmitter();
|
|
7437
|
+
this.actionPositionEvent = new EventEmitter();
|
|
7438
|
+
this.bottomStatusBarPositionEvent = new EventEmitter();
|
|
7439
|
+
this.checkAllPositionEvent = new EventEmitter();
|
|
7440
|
+
this.deletePositionEvent = new EventEmitter();
|
|
7441
|
+
this.emptyPositionEvent = new EventEmitter();
|
|
7442
|
+
this.filterPositionEvent = new EventEmitter();
|
|
7443
|
+
this.multiSelectPositionEvent = new EventEmitter();
|
|
7444
|
+
this.orderByPositionEvent = new EventEmitter();
|
|
7445
|
+
this.pillButtonPositionEvent = new EventEmitter();
|
|
7446
|
+
this.scrollPositionEvent = new EventEmitter();
|
|
7447
|
+
this.selectPositionEvent = new EventEmitter();
|
|
7448
|
+
this.rightTableState = [];
|
|
7449
|
+
this.expandedNodes = new Map();
|
|
7450
|
+
}
|
|
7451
|
+
ngOnInit() {
|
|
7452
|
+
this.rightTableState = [
|
|
7453
|
+
...(this.config.tableConfig.tableRightItems ?? []),
|
|
7454
|
+
];
|
|
7455
|
+
const selectedTab = this.config.tabs.find(t => t.selected);
|
|
7456
|
+
if (selectedTab) {
|
|
7457
|
+
this.setActiveTab(selectedTab);
|
|
7458
|
+
}
|
|
7459
|
+
}
|
|
7460
|
+
onTabSelect(tab) {
|
|
7461
|
+
this.setActiveTab(tab);
|
|
7462
|
+
}
|
|
7463
|
+
setActiveTab(tab) {
|
|
7464
|
+
this.activeTabKey = String(tab.value ?? tab.text);
|
|
7465
|
+
const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7466
|
+
const tableLeftItems = this.mapToTableDoubleItems(leftItems);
|
|
7467
|
+
let tableRightItems = this.mapToTableDoubleItems(this.rightTableState);
|
|
7468
|
+
if (this.config.treeMode) {
|
|
7469
|
+
tableRightItems = this.flattenTree(this.buildTree(this.rightTableState));
|
|
7470
|
+
}
|
|
7471
|
+
this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems);
|
|
7472
|
+
}
|
|
7473
|
+
onUpdateTables(event) {
|
|
7474
|
+
const prevRightIds = new Set(this.rightTableState.map(i => i.id));
|
|
7475
|
+
const sourceLeft = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7476
|
+
const selectedRightItems = event.tableRightItems.filter(i => i.itemSelected);
|
|
7477
|
+
const parentId = this.config.treeMode && selectedRightItems.length === 1
|
|
7478
|
+
? selectedRightItems[0].id
|
|
7479
|
+
: null;
|
|
7480
|
+
const nextRight = event.tableRightItems.map(item => {
|
|
7481
|
+
const prev = this.rightTableState.find(r => r.id === item.id);
|
|
7482
|
+
const fromLeft = sourceLeft.find(l => l.id === item.id);
|
|
7483
|
+
return {
|
|
7484
|
+
...(prev ?? fromLeft ?? {}),
|
|
7485
|
+
id: item.id,
|
|
7486
|
+
name: item.name,
|
|
7487
|
+
selectedCheckbox: !!item.selectedCheckbox,
|
|
7488
|
+
parentId: prev?.parentId ?? null,
|
|
7489
|
+
};
|
|
7490
|
+
});
|
|
7491
|
+
const addedItems = nextRight.filter(i => !prevRightIds.has(i.id));
|
|
7492
|
+
if (this.config.treeMode && parentId) {
|
|
7493
|
+
addedItems.forEach(item => {
|
|
7494
|
+
item.parentId = parentId;
|
|
7495
|
+
});
|
|
7496
|
+
}
|
|
7497
|
+
this.rightTableState = nextRight;
|
|
7498
|
+
this.resetSelections();
|
|
7499
|
+
this.refreshTables();
|
|
7500
|
+
}
|
|
7501
|
+
refreshTables() {
|
|
7502
|
+
const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7503
|
+
const tableLeftItems = this.mapToTableDoubleItems(leftItems);
|
|
7504
|
+
let tableRightItems = this.mapToTableDoubleItems(this.rightTableState);
|
|
7505
|
+
if (this.config.treeMode) {
|
|
7506
|
+
tableRightItems = this.flattenTree(this.buildTree(this.rightTableState));
|
|
7507
|
+
}
|
|
7508
|
+
this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems);
|
|
7509
|
+
this.updateEvent.emit({
|
|
7510
|
+
tabKey: this.activeTabKey,
|
|
7511
|
+
tableLeftItems,
|
|
7512
|
+
tableRightItems,
|
|
7513
|
+
});
|
|
7514
|
+
}
|
|
7515
|
+
buildTableDoubleAdapter(leftItems, rightItems) {
|
|
7516
|
+
const rightColumns = [...this.config.tableConfig.tableRightConfig.columns];
|
|
7517
|
+
if (this.config.showOrderButtons && !rightColumns.some(c => c.id === 'actions')) {
|
|
7518
|
+
rightColumns.push({ id: 'actions', title: '' });
|
|
7519
|
+
}
|
|
7520
|
+
return {
|
|
7521
|
+
additionButton: true,
|
|
7522
|
+
isTreeMode: !!this.config.treeMode,
|
|
7523
|
+
showOrderButtons: !!this.config.showOrderButtons,
|
|
7524
|
+
disableLeftRowSelection: true,
|
|
7525
|
+
tableLeftConfig: {
|
|
7526
|
+
...this.config.tableConfig.tableLeftConfig,
|
|
7527
|
+
totalItems: leftItems.length,
|
|
7528
|
+
isTreeMode: false,
|
|
7529
|
+
configBottomStatusBar: signal({
|
|
7530
|
+
counter: leftItems.filter(i => i.selectedCheckbox).length,
|
|
7531
|
+
total: leftItems.length,
|
|
7532
|
+
disabled: leftItems.length === 0,
|
|
7533
|
+
}),
|
|
7534
|
+
},
|
|
7535
|
+
tableRightConfig: {
|
|
7536
|
+
...this.config.tableConfig.tableRightConfig,
|
|
7537
|
+
columns: rightColumns,
|
|
7538
|
+
totalItems: rightItems.length,
|
|
7539
|
+
isTreeMode: !!this.config.treeMode,
|
|
7540
|
+
configBottomStatusBar: signal({
|
|
7541
|
+
counter: rightItems.filter(i => i.selectedCheckbox).length,
|
|
7542
|
+
total: rightItems.length,
|
|
7543
|
+
disabled: rightItems.length === 0,
|
|
7544
|
+
}),
|
|
7545
|
+
},
|
|
7546
|
+
tableLeftItems: leftItems,
|
|
7547
|
+
tableRightItems: rightItems,
|
|
7548
|
+
};
|
|
7549
|
+
}
|
|
7550
|
+
mapToTableDoubleItems(items) {
|
|
7551
|
+
return items.map((item, index) => ({
|
|
7552
|
+
...item,
|
|
7553
|
+
name: item.name ?? '',
|
|
7554
|
+
selectedCheckbox: item.selectedCheckbox ?? false,
|
|
7555
|
+
}));
|
|
7556
|
+
}
|
|
7557
|
+
buildTree(items) {
|
|
7558
|
+
const map = new Map();
|
|
7559
|
+
const roots = [];
|
|
7560
|
+
items.forEach(item => {
|
|
7561
|
+
map.set(item.id, { ...item, children: [] });
|
|
7562
|
+
});
|
|
7563
|
+
map.forEach(item => {
|
|
7564
|
+
if (item.parentId) {
|
|
7565
|
+
const parent = map.get(item.parentId);
|
|
7566
|
+
if (parent)
|
|
7567
|
+
parent.children.push(item);
|
|
7568
|
+
}
|
|
7569
|
+
else {
|
|
7570
|
+
roots.push(item);
|
|
7571
|
+
}
|
|
7572
|
+
});
|
|
7573
|
+
return roots;
|
|
7574
|
+
}
|
|
7575
|
+
flattenTree(nodes, level = 0) {
|
|
7576
|
+
let result = [];
|
|
7577
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
7578
|
+
const node = nodes[i];
|
|
7579
|
+
const hasChildren = !!node.children?.length;
|
|
7580
|
+
const isExpanded = this.expandedNodes.get(node.id) ?? true;
|
|
7581
|
+
result.push({
|
|
7582
|
+
id: node.id,
|
|
7583
|
+
name: node.name ?? '',
|
|
7584
|
+
selectedCheckbox: !!node.selectedCheckbox,
|
|
7585
|
+
parentId: node.parentId ?? null,
|
|
7586
|
+
level: level,
|
|
7587
|
+
expanded: isExpanded,
|
|
7588
|
+
hasChildren: hasChildren,
|
|
7589
|
+
});
|
|
7590
|
+
if (hasChildren && isExpanded && node.children) {
|
|
7591
|
+
result = result.concat(this.flattenTree(node.children, level + 1));
|
|
7592
|
+
}
|
|
7593
|
+
}
|
|
7594
|
+
return result;
|
|
7595
|
+
}
|
|
7596
|
+
resetSelections() {
|
|
7597
|
+
const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
|
|
7598
|
+
leftItems.forEach(i => {
|
|
7599
|
+
i.selectedCheckbox = false;
|
|
7600
|
+
i.itemSelected = false;
|
|
7601
|
+
});
|
|
7602
|
+
this.rightTableState.forEach(i => {
|
|
7603
|
+
i.selectedCheckbox = false;
|
|
7604
|
+
i.itemSelected = false;
|
|
7605
|
+
});
|
|
7606
|
+
}
|
|
7607
|
+
toggleNodeExpansion(nodeId) {
|
|
7608
|
+
const currentState = this.expandedNodes.get(nodeId) ?? true;
|
|
7609
|
+
this.expandedNodes.set(nodeId, !currentState);
|
|
7610
|
+
this.refreshTables();
|
|
7611
|
+
}
|
|
7612
|
+
onReorderItem(event) {
|
|
7613
|
+
const { itemId, direction } = event;
|
|
7614
|
+
const item = this.rightTableState.find(i => i.id === itemId);
|
|
7615
|
+
if (!item)
|
|
7616
|
+
return;
|
|
7617
|
+
const parentId = item.parentId ?? null;
|
|
7618
|
+
const siblings = this.rightTableState.filter(i => (i.parentId ?? null) === parentId);
|
|
7619
|
+
const siblingIndex = siblings.findIndex(i => i.id === itemId);
|
|
7620
|
+
if (siblingIndex === -1)
|
|
7621
|
+
return;
|
|
7622
|
+
let targetIndex;
|
|
7623
|
+
switch (direction) {
|
|
7624
|
+
case 'top':
|
|
7625
|
+
targetIndex = 0;
|
|
7626
|
+
break;
|
|
7627
|
+
case 'up':
|
|
7628
|
+
targetIndex = siblingIndex - 1;
|
|
7629
|
+
break;
|
|
7630
|
+
case 'down':
|
|
7631
|
+
targetIndex = siblingIndex + 1;
|
|
7632
|
+
break;
|
|
7633
|
+
case 'bottom':
|
|
7634
|
+
targetIndex = siblings.length - 1;
|
|
7635
|
+
break;
|
|
7636
|
+
default:
|
|
7637
|
+
return;
|
|
7638
|
+
}
|
|
7639
|
+
if (targetIndex < 0 || targetIndex >= siblings.length || targetIndex === siblingIndex)
|
|
7640
|
+
return;
|
|
7641
|
+
siblings.splice(siblingIndex, 1);
|
|
7642
|
+
siblings.splice(targetIndex, 0, item);
|
|
7643
|
+
this.rightTableState = this.rightTableState.filter(i => (i.parentId ?? null) !== parentId);
|
|
7644
|
+
const insertRef = parentId
|
|
7645
|
+
? this.rightTableState.findIndex(i => i.id === parentId) + 1
|
|
7646
|
+
: 0;
|
|
7647
|
+
this.rightTableState.splice(insertRef, 0, ...siblings);
|
|
7648
|
+
this.refreshTables();
|
|
7649
|
+
}
|
|
7650
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7651
|
+
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" }, ngImport: i0, template: "<div class=\"s-table-double-complete\">\n <s-tabs\n [tabs]=\"config.tabs\"\n [configTabs]=\"config.configTabs\"\n (eventSelect)=\"onTabSelect($event)\">\n </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)=\"filterPositionEvent.emit($event)\"\n (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($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: "ngmodule", type: STabsModule }, { kind: "component", type: STabsComponent, selector: "s-tabs", inputs: ["tabs", "configTabs"], 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7652
|
+
}
|
|
7653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, decorators: [{
|
|
7654
|
+
type: Component,
|
|
7655
|
+
args: [{ selector: 's-table-double-complete', standalone: true, imports: [CommonModule, STabsModule, STableDoubleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double-complete\">\n <s-tabs\n [tabs]=\"config.tabs\"\n [configTabs]=\"config.configTabs\"\n (eventSelect)=\"onTabSelect($event)\">\n </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)=\"filterPositionEvent.emit($event)\"\n (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n (reorderItemEvent)=\"onReorderItem($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"] }]
|
|
7656
|
+
}], propDecorators: { config: [{
|
|
7657
|
+
type: Input
|
|
7658
|
+
}], updateEvent: [{
|
|
7659
|
+
type: Output
|
|
7660
|
+
}], actionPositionEvent: [{
|
|
7661
|
+
type: Output
|
|
7662
|
+
}], bottomStatusBarPositionEvent: [{
|
|
7663
|
+
type: Output
|
|
7664
|
+
}], checkAllPositionEvent: [{
|
|
7665
|
+
type: Output
|
|
7666
|
+
}], deletePositionEvent: [{
|
|
7667
|
+
type: Output
|
|
7668
|
+
}], emptyPositionEvent: [{
|
|
7669
|
+
type: Output
|
|
7670
|
+
}], filterPositionEvent: [{
|
|
7671
|
+
type: Output
|
|
7672
|
+
}], multiSelectPositionEvent: [{
|
|
7673
|
+
type: Output
|
|
7674
|
+
}], orderByPositionEvent: [{
|
|
7675
|
+
type: Output
|
|
7676
|
+
}], pillButtonPositionEvent: [{
|
|
7677
|
+
type: Output
|
|
7678
|
+
}], scrollPositionEvent: [{
|
|
7679
|
+
type: Output
|
|
7680
|
+
}], selectPositionEvent: [{
|
|
7681
|
+
type: Output
|
|
7328
7682
|
}] } });
|
|
7329
7683
|
|
|
7330
7684
|
/**
|
|
7331
7685
|
* Generated bundle index. Do not edit.
|
|
7332
7686
|
*/
|
|
7333
7687
|
|
|
7334
|
-
export { ANIMATION, ANIMATION_CONFIG, ActionsButtons, ActionsButtonsType, AnimationComponent, BehaviorDto, CustomTooltipDirective, DataTypeDto, EmptyComponent, FieldOptionDto, FieldTemplateDto, FormFilledDto, FormFilledMetadataDto, FormFilledValueDto, FormGroupDto, FormLayoutDto, FormTypeDto, GridMultiInputsComponent, GridMultiInputsToolbarTopComponent, GroupFieldDto, GroupTemplateDto, ICON_INPUT, ICON_THEME, INPUTS_REGEX, INPUT_SIZE, INPUT_TYPE, ImageLoaderDirective, InputSearch, LinkedFieldDto, LocalstorageService, ModalTypeIcon, SAnimationModule, SAvatarComponent, SAvatarModule, SBadgeComponent, SBadgeModule, SBottomStatusBarComponent, SBreadcrumComponent, SBreadcrumModule, SButtonComponent, SButtonModule, SCalendar, SCalendarComponent, SCardComponent, SCardModule, SCheckData, SCheckbox, SCheckboxComponent, SCheckboxModule, SCheckboxOldComponent, SCollapseComponent, SCollapseModule, SColorComponent, SCompanyLogoComponent, SCompanyLogoModule, SContainerComponent, SContainerModule, SContentComponent, SContentModule, SDynamicFormComponent, SDynamicFormModule, SEmptyModule, SErrorControl, SFooterComponent, SFooterModule, SGridMultiInputsModule, SIcon, SIconMaterialComponent, SIconMaterialModule, SIconMenuComponent, SIconMenuModel, SIconMenuModule, SInput, SInputComponent, SInputModule, SInputNumber, SInputNumberComponent, SInputTextAreaComponent, SLinkComponent, SLinkModule, SListComponent, SListModule, SListSimpleComponent, SListSimpleModule, SMenuItemTitleComponent, SMenuMain, SMenuMainComponent, SMenuMainModule, SModalConfirmComponent, SModalConfirmService, SNavbarComponent, SNavbarModule, SNotificationComponent, SPaginationComponent, SPaginationModule, SPopupComponent, SPopupModule, SPrecodeComponent, SPrecodeModule, SProfileGroupComponent, SProfileGroupModule, SProgressbarComponent, SProgressbarModule, SRadioComponent, SRadioModule, SRedirectComponent, SSelect, SSelectComponent, SSelectModule, SSelectMultipleComponent, SSelectMultipleModel, SSelectMultipleOldComponent, SSelectSimpleComponent, SSelectSimpleModel, SSelectUser, SSidebarComponent, SSidebarModule, SSliderComponent, SSpinnerComponent, SSpinnerModule, SSubMenu, SSubMenuComponent, SSubMenuHeader, SSubMenuItem, SSubMenuModule, SSwitch, STableCompleteModule, STableDoubleComponent, STabletComponent, STabletModule, STabsComponent, STabsModule, STagComponent, STagModule, STemplate, STemplatePopup, STextArea, SThemeComponent, SThemeModule, SThumbnailComponent, SThumbnailModule, STime, STimeComponent, STimelineComponent, STimelineModule, SToastComponent, SToastModule, SToastService, SToggleSwitchComponent, SToggleSwitchModule, SToolbarTopComponent, SToolbarTopModule, STooltipComponent, STooltipModule, STranslatePipe, STranslateService, STreeListComponent, STreeListModule, SUser, SValidationError, SharedModule, SidebarStateService, SortableColumn, THEME, TableActionsButtonsComponent, TableActionsButtonsModule, TableCompleteComponent, ToggleSwitchFormComponent };
|
|
7688
|
+
export { ANIMATION, ANIMATION_CONFIG, ActionsButtons, ActionsButtonsType, AnimationComponent, BehaviorDto, CustomTooltipDirective, DataTypeDto, EmptyComponent, FieldOptionDto, FieldTemplateDto, FormFilledDto, FormFilledMetadataDto, FormFilledValueDto, FormGroupDto, FormLayoutDto, FormTypeDto, GridMultiInputsComponent, GridMultiInputsToolbarTopComponent, GroupFieldDto, GroupTemplateDto, ICON_INPUT, ICON_THEME, INPUTS_REGEX, INPUT_SIZE, INPUT_TYPE, ImageLoaderDirective, InputSearch, LinkedFieldDto, LocalstorageService, ModalTypeIcon, SAnimationModule, SAvatarComponent, SAvatarModule, SBadgeComponent, SBadgeModule, SBottomStatusBarComponent, SBreadcrumComponent, SBreadcrumModule, SButtonComponent, SButtonModule, SCalendar, SCalendarComponent, SCardComponent, SCardModule, SCheckData, SCheckbox, SCheckboxComponent, SCheckboxModule, SCheckboxOldComponent, SCollapseComponent, SCollapseModule, SColorComponent, SCompanyLogoComponent, SCompanyLogoModule, SContainerComponent, SContainerModule, SContentComponent, SContentModule, SDynamicFormComponent, SDynamicFormModule, SEmptyModule, SErrorControl, SFooterComponent, SFooterModule, SGridMultiInputsModule, SIcon, SIconMaterialComponent, SIconMaterialModule, SIconMenuComponent, SIconMenuModel, SIconMenuModule, SInput, SInputComponent, SInputModule, SInputNumber, SInputNumberComponent, SInputTextAreaComponent, SLinkComponent, SLinkModule, SListComponent, SListModule, SListSimpleComponent, SListSimpleModule, SMenuItemTitleComponent, SMenuMain, SMenuMainComponent, SMenuMainModule, SModalConfirmComponent, SModalConfirmService, SNavbarComponent, SNavbarModule, SNotificationComponent, SPaginationComponent, SPaginationModule, SPopupComponent, SPopupModule, SPrecodeComponent, SPrecodeModule, SProfileGroupComponent, SProfileGroupModule, SProgressbarComponent, SProgressbarModule, SRadioComponent, SRadioModule, SRedirectComponent, SSelect, SSelectComponent, SSelectModule, SSelectMultipleComponent, SSelectMultipleModel, SSelectMultipleOldComponent, SSelectSimpleComponent, SSelectSimpleModel, SSelectUser, SSidebarComponent, SSidebarModule, SSliderComponent, SSpinnerComponent, SSpinnerModule, SSubMenu, SSubMenuComponent, SSubMenuHeader, SSubMenuItem, SSubMenuModule, SSwitch, STableCompleteModule, STableDoubleCompleteComponent, STableDoubleComponent, STabletComponent, STabletModule, STabsComponent, STabsModule, STagComponent, STagModule, STemplate, STemplatePopup, STextArea, SThemeComponent, SThemeModule, SThumbnailComponent, SThumbnailModule, STime, STimeComponent, STimelineComponent, STimelineModule, SToastComponent, SToastModule, SToastService, SToggleSwitchComponent, SToggleSwitchModule, SToolbarTopComponent, SToolbarTopModule, STooltipComponent, STooltipModule, STranslatePipe, STranslateService, STreeListComponent, STreeListModule, SUser, SValidationError, SharedModule, SidebarStateService, SortableColumn, THEME, TableActionsButtonsComponent, TableActionsButtonsModule, TableCompleteComponent, ToggleSwitchFormComponent };
|
|
7335
7689
|
//# sourceMappingURL=sidesys-generic-ui.mjs.map
|