valtech-components 4.0.1013 → 4.0.1015

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/esm2022/lib/components/atoms/display/display.component.mjs +2 -2
  2. package/esm2022/lib/components/organisms/data-table/data-table.component.mjs +317 -35
  3. package/esm2022/lib/components/organisms/data-table/types.mjs +1 -1
  4. package/esm2022/lib/components/organisms/field-schema-editor/field-schema-editor.component.mjs +14 -7
  5. package/esm2022/lib/components/organisms/field-schema-editor/types.mjs +1 -1
  6. package/esm2022/lib/components/organisms/form/form.component.mjs +7 -1
  7. package/esm2022/lib/components/organisms/survey-builder/survey-builder.component.mjs +432 -157
  8. package/esm2022/lib/components/organisms/survey-builder/survey-builder.i18n.mjs +21 -1
  9. package/esm2022/lib/components/organisms/survey-builder/types.mjs +1 -1
  10. package/esm2022/lib/components/types.mjs +1 -1
  11. package/esm2022/lib/services/forms/form-schema-builder.service.mjs +3 -1
  12. package/esm2022/lib/services/forms/types.mjs +1 -1
  13. package/esm2022/lib/services/requests/types.mjs +1 -1
  14. package/esm2022/lib/version.mjs +2 -2
  15. package/fesm2022/valtech-components.mjs +790 -198
  16. package/fesm2022/valtech-components.mjs.map +1 -1
  17. package/lib/components/organisms/data-table/data-table.component.d.ts +10 -1
  18. package/lib/components/organisms/data-table/types.d.ts +14 -0
  19. package/lib/components/organisms/field-schema-editor/field-schema-editor.component.d.ts +1 -0
  20. package/lib/components/organisms/field-schema-editor/types.d.ts +4 -0
  21. package/lib/components/organisms/survey-builder/survey-builder.component.d.ts +33 -5
  22. package/lib/components/organisms/survey-builder/types.d.ts +1 -0
  23. package/lib/components/types.d.ts +2 -0
  24. package/lib/services/forms/types.d.ts +2 -0
  25. package/lib/services/requests/types.d.ts +6 -0
  26. package/lib/version.d.ts +1 -1
  27. package/package.json +1 -1
  28. package/src/lib/components/styles/typography.scss +1 -1
package/fesm2022/valtech-components.mjs CHANGED
@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
70
70
  * Current version of valtech-components.
71
71
  * This is automatically updated during the publish process.
72
72
  */
73
- const VERSION = '4.0.1013';
73
+ const VERSION = '4.0.1015';
74
74
 
75
75
  function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
76
76
  if (rule == null)
@@ -8881,7 +8881,7 @@ class DisplayComponent {
8881
8881
  {{ getDisplayContent() }}
8882
8882
  </p>
8883
8883
  </ion-text>
8884
- `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
8884
+ `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
8885
8885
  }
8886
8886
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisplayComponent, decorators: [{
8887
8887
  type: Component,
@@ -8891,7 +8891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
8891
8891
  {{ getDisplayContent() }}
8892
8892
  </p>
8893
8893
  </ion-text>
8894
- `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"] }]
8894
+ `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"] }]
8895
8895
  }], propDecorators: { props: [{
8896
8896
  type: Input
8897
8897
  }] } });
@@ -38144,6 +38144,9 @@ class FormComponent {
38144
38144
  @for (s of props.sections; track s.name) {
38145
38145
  <div class="section">
38146
38146
  <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
38147
+ @if (s.subtitle) {
38148
+ <p class="section-subtitle">{{ s.subtitle }}</p>
38149
+ }
38147
38150
  @for (f of s.fields; track f.name) {
38148
38151
  <div class="input" [attr.data-testid]="f.token">
38149
38152
  @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
@@ -38360,6 +38363,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
38360
38363
  @for (s of props.sections; track s.name) {
38361
38364
  <div class="section">
38362
38365
  <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
38366
+ @if (s.subtitle) {
38367
+ <p class="section-subtitle">{{ s.subtitle }}</p>
38368
+ }
38363
38369
  @for (f of s.fields; track f.name) {
38364
38370
  <div class="input" [attr.data-testid]="f.token">
38365
38371
  @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
@@ -39127,6 +39133,7 @@ class FormSchemaBuilderService {
39127
39133
  const section = sectionsById.get(key) ??
39128
39134
  {
39129
39135
  name: def.sectionLabel || '',
39136
+ subtitle: def.sectionSubtitle || '',
39130
39137
  order: def.sectionOrder ?? 0,
39131
39138
  fields: [],
39132
39139
  };
@@ -39213,6 +39220,7 @@ class FormSchemaBuilderService {
39213
39220
  options: this.normalizeOptions(field.options),
39214
39221
  sectionId: field.sectionId,
39215
39222
  sectionLabel: field.sectionLabel?.trim() ?? '',
39223
+ sectionSubtitle: field.sectionSubtitle?.trim() ?? '',
39216
39224
  sectionOrder: field.sectionOrder,
39217
39225
  step: field.step,
39218
39226
  unitLabel: field.unitLabel,
@@ -40604,6 +40612,7 @@ class FieldSchemaEditorComponent {
40604
40612
  this.selectedPresetId = signal('');
40605
40613
  /** Se refresca con cada cambio de tipo — `needsOptions` no puede leer el control directo. */
40606
40614
  this.currentType = signal('TEXT');
40615
+ this.currentSectionId = '';
40607
40616
  /** Una vez que se toca el token a mano (o se edita un campo ya guardado) deja de derivarse del label. */
40608
40617
  this.nameLocked = false;
40609
40618
  this.name = '';
@@ -40659,6 +40668,7 @@ class FieldSchemaEditorComponent {
40659
40668
  const initial = this.props.field;
40660
40669
  if (initial) {
40661
40670
  this.fieldId = initial.id;
40671
+ this.currentSectionId = initial.sectionId ?? '';
40662
40672
  this.nameLocked = true;
40663
40673
  this.name = initial.name;
40664
40674
  this.labelControl.setValue(initial.label ?? '');
@@ -40746,6 +40756,7 @@ class FieldSchemaEditorComponent {
40746
40756
  placeholderText: (this.placeholderControl.value || '').trim(),
40747
40757
  hintText: (this.hintControl.value || '').trim(),
40748
40758
  type: this.coerceType(this.typeControl.value),
40759
+ sectionId: this.currentSectionId,
40749
40760
  required: this.requiredControl.value,
40750
40761
  sectionLabel: (this.sectionControl.value || '').trim(),
40751
40762
  options: this.needsOptions() ? this.options().map((option, index) => ({ ...option, order: index })) : undefined,
@@ -40808,9 +40819,11 @@ class FieldSchemaEditorComponent {
40808
40819
  </val-form-field>
40809
40820
  }
40810
40821
 
40811
- <val-form-field [label]="t('sectionLabel')">
40812
- <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
40813
- </val-form-field>
40822
+ @if (props.showSection !== false) {
40823
+ <val-form-field [label]="t('sectionLabel')">
40824
+ <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
40825
+ </val-form-field>
40826
+ }
40814
40827
 
40815
40828
  <val-toggle-input
40816
40829
  [props]="{
@@ -40884,9 +40897,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
40884
40897
  </val-form-field>
40885
40898
  }
40886
40899
 
40887
- <val-form-field [label]="t('sectionLabel')">
40888
- <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
40889
- </val-form-field>
40900
+ @if (props.showSection !== false) {
40901
+ <val-form-field [label]="t('sectionLabel')">
40902
+ <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
40903
+ </val-form-field>
40904
+ }
40890
40905
 
40891
40906
  <val-toggle-input
40892
40907
  [props]="{
@@ -41342,6 +41357,9 @@ const SURVEY_QUESTION_TYPES = [
41342
41357
 
41343
41358
  const SURVEY_BUILDER_I18N = {
41344
41359
  es: {
41360
+ surveyNameLabel: 'Nombre interno',
41361
+ surveyNamePlaceholder: 'Ej: encuesta-ventas-entrada',
41362
+ noSurveyName: 'Ponle un nombre interno a la encuesta',
41345
41363
  titleLabel: 'Título',
41346
41364
  titlePlaceholder: 'Ej: ¿Qué te pareció el evento?',
41347
41365
  subtitleLabel: 'Subtítulo',
@@ -41365,8 +41383,10 @@ const SURVEY_BUILDER_I18N = {
41365
41383
  successImageLabel: 'Imagen de cierre',
41366
41384
  successImagePlaceholder: 'URL de la imagen que se muestra al terminar',
41367
41385
  questionsLabel: 'Preguntas',
41386
+ sectionQuestionsLabel: 'Sin sección',
41368
41387
  questionLabelPlaceholder: 'Escribe la pregunta',
41369
41388
  addQuestion: 'Agregar pregunta',
41389
+ addQuestionToSection: 'Agregar aquí',
41370
41390
  removeQuestion: 'Quitar pregunta',
41371
41391
  editQuestion: 'Editar pregunta',
41372
41392
  duplicateQuestion: 'Duplicar pregunta',
@@ -41379,11 +41399,16 @@ const SURVEY_BUILDER_I18N = {
41379
41399
  save: 'Guardar encuesta',
41380
41400
  noTitle: 'Ponle un título a la encuesta',
41381
41401
  noQuestions: 'Agrega al menos una pregunta',
41402
+ noSectionName: 'Ponle nombre a la sección',
41382
41403
  emptyQuestionLabel: 'Todas las preguntas necesitan texto',
41383
41404
  saveError: 'No pudimos guardar la encuesta. Inténtalo de nuevo en un rato.',
41384
41405
  loadError: 'No pudimos cargar la encuesta para editar.',
41385
41406
  stepStart: 'Inicio',
41386
41407
  stepQuestions: 'Preguntas',
41408
+ sectionNameLabel: 'Nombre de la sección',
41409
+ sectionNamePlaceholder: 'Ej: Información personal',
41410
+ sectionSubtitleLabel: 'Subtítulo',
41411
+ sectionSubtitlePlaceholder: 'Escribe un subtítulo para esta sección',
41387
41412
  stepClose: 'Cierre',
41388
41413
  stepReview: 'Revisar',
41389
41414
  wizardStepsLabel: 'Pasos para crear la encuesta',
@@ -41401,6 +41426,9 @@ const SURVEY_BUILDER_I18N = {
41401
41426
  reviewDefaultClose: 'Cierre por defecto',
41402
41427
  },
41403
41428
  en: {
41429
+ surveyNameLabel: 'Internal name',
41430
+ surveyNamePlaceholder: 'E.g: event-feedback',
41431
+ noSurveyName: 'Give the survey an internal name',
41404
41432
  titleLabel: 'Title',
41405
41433
  titlePlaceholder: 'E.g: How was the event?',
41406
41434
  subtitleLabel: 'Subtitle',
@@ -41424,8 +41452,10 @@ const SURVEY_BUILDER_I18N = {
41424
41452
  successImageLabel: 'Closing image',
41425
41453
  successImagePlaceholder: 'Image URL shown after submit',
41426
41454
  questionsLabel: 'Questions',
41455
+ sectionQuestionsLabel: 'No section',
41427
41456
  questionLabelPlaceholder: 'Write the question',
41428
41457
  addQuestion: 'Add question',
41458
+ addQuestionToSection: 'Add here',
41429
41459
  removeQuestion: 'Remove question',
41430
41460
  editQuestion: 'Edit question',
41431
41461
  duplicateQuestion: 'Duplicate question',
@@ -41438,11 +41468,16 @@ const SURVEY_BUILDER_I18N = {
41438
41468
  save: 'Save survey',
41439
41469
  noTitle: 'Give the survey a title',
41440
41470
  noQuestions: 'Add at least one question',
41471
+ noSectionName: 'Give the section a name',
41441
41472
  emptyQuestionLabel: 'Every question needs text',
41442
41473
  saveError: "We couldn't save the survey. Please try again in a while.",
41443
41474
  loadError: "We couldn't load the survey to edit.",
41444
41475
  stepStart: 'Start',
41445
41476
  stepQuestions: 'Questions',
41477
+ sectionNameLabel: 'Section name',
41478
+ sectionNamePlaceholder: 'E.g: Personal information',
41479
+ sectionSubtitleLabel: 'Subtitle',
41480
+ sectionSubtitlePlaceholder: 'Add a subtitle for this section',
41446
41481
  stepClose: 'Close',
41447
41482
  stepReview: 'Review',
41448
41483
  wizardStepsLabel: 'Survey builder steps',
@@ -41606,6 +41641,65 @@ let rowUid = 0;
41606
41641
  * `val-survey-response` sabe renderizar, no a lo que el editor sabe editar.
41607
41642
  */
41608
41643
  class SurveyBuilderComponent {
41644
+ groupQuestions(rows) {
41645
+ const groups = this.sectionIds().map(id => ({
41646
+ id,
41647
+ label: this.sectionNames()[id] ?? '',
41648
+ subtitle: this.sectionSubtitles()[id] ?? '',
41649
+ rows: [],
41650
+ }));
41651
+ const index = new Map();
41652
+ groups.forEach((group, position) => index.set(group.id, position));
41653
+ rows.forEach(question => {
41654
+ const section = (question.sectionLabel ?? '').trim();
41655
+ const sectionKey = question.sectionId || (section ? this.formBuilder.toToken(section) : '__default__');
41656
+ const label = this.sectionNames()[sectionKey] ?? section;
41657
+ let position = index.get(sectionKey);
41658
+ if (position == null) {
41659
+ position = groups.length;
41660
+ index.set(sectionKey, position);
41661
+ groups.push({ id: sectionKey, label, subtitle: this.sectionSubtitles()[sectionKey] ?? '', rows: [] });
41662
+ }
41663
+ groups[position].rows.push(question);
41664
+ });
41665
+ if (!groups.length) {
41666
+ const defaultId = '__default__';
41667
+ groups.push({ id: defaultId, label: this.sectionNames()[defaultId] ?? '', subtitle: this.sectionSubtitles()[defaultId] ?? '', rows: [] });
41668
+ }
41669
+ return groups;
41670
+ }
41671
+ normalizeSectionId(sectionId) {
41672
+ return (sectionId ?? '').trim() || '__default__';
41673
+ }
41674
+ questionGroupById(sectionId) {
41675
+ return this.questionGroups().find(group => group.id === sectionId);
41676
+ }
41677
+ sectionNameControl(sectionId) {
41678
+ const normalized = this.normalizeSectionId(sectionId);
41679
+ if (!this.sectionNameControls[normalized]) {
41680
+ const control = new FormControl(this.sectionNames()[normalized] ?? '', { nonNullable: true });
41681
+ control.valueChanges.subscribe(value => {
41682
+ const label = (value ?? '').trim();
41683
+ this.sectionNames.update(values => ({ ...values, [normalized]: value }));
41684
+ this.questions.update(rows => rows.map(row => this.normalizeSectionId(row.sectionId) === normalized
41685
+ ? { ...row, sectionId: normalized, sectionLabel: label || undefined }
41686
+ : row));
41687
+ });
41688
+ this.sectionNameControls[normalized] = control;
41689
+ }
41690
+ return this.sectionNameControls[normalized];
41691
+ }
41692
+ sectionSubtitleControl(sectionId) {
41693
+ const normalized = this.normalizeSectionId(sectionId);
41694
+ if (!this.sectionSubtitleControls[normalized]) {
41695
+ const control = new FormControl(this.sectionSubtitles()[normalized] ?? '', { nonNullable: true });
41696
+ control.valueChanges.subscribe(value => {
41697
+ this.sectionSubtitles.update(values => ({ ...values, [normalized]: value }));
41698
+ });
41699
+ this.sectionSubtitleControls[normalized] = control;
41700
+ }
41701
+ return this.sectionSubtitleControls[normalized];
41702
+ }
41609
41703
  constructor() {
41610
41704
  this.props = {};
41611
41705
  this.saved = new EventEmitter();
@@ -41621,6 +41715,7 @@ class SurveyBuilderComponent {
41621
41715
  this.formBuilder = inject(RequestFormBuilderService);
41622
41716
  this.errors = inject(ValtechErrorService);
41623
41717
  this.modals = inject(ModalService);
41718
+ this.surveyNameControl = new FormControl('', { nonNullable: true });
41624
41719
  this.titleControl = new FormControl('', { nonNullable: true });
41625
41720
  this.subtitleControl = new FormControl('', { nonNullable: true });
41626
41721
  this.headerImageControl = new FormControl('', { nonNullable: true });
@@ -41633,12 +41728,23 @@ class SurveyBuilderComponent {
41633
41728
  this.validationError = signal('');
41634
41729
  this.saving = signal(false);
41635
41730
  this.uploadingImage = signal('');
41636
- this.wizardSteps = [
41637
- { id: 'start', labelKey: 'stepStart' },
41638
- { id: 'questions', labelKey: 'stepQuestions' },
41639
- { id: 'close', labelKey: 'stepClose' },
41640
- { id: 'review', labelKey: 'stepReview' },
41641
- ];
41731
+ this.sectionIds = signal(['__default__']);
41732
+ this.sectionNames = signal({});
41733
+ this.sectionSubtitles = signal({});
41734
+ this.sectionNameControls = {};
41735
+ this.sectionSubtitleControls = {};
41736
+ this.questionGroups = computed(() => this.groupQuestions(this.questions()));
41737
+ this.wizardSteps = computed(() => {
41738
+ const groups = this.questionGroups();
41739
+ const steps = [{ id: 'start', label: this.t('stepStart') }];
41740
+ groups.forEach((group, index) => {
41741
+ const sectionLabel = group.label || `${this.t('sectionQuestionsLabel')} ${index + 1}`;
41742
+ steps.push({ id: `section-${group.id}`, label: `${index + 1}. ${sectionLabel}` });
41743
+ });
41744
+ steps.push({ id: 'close', label: this.t('stepClose') });
41745
+ steps.push({ id: 'review', label: this.t('stepReview') });
41746
+ return steps;
41747
+ });
41642
41748
  this.allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
41643
41749
  this.maxImageBytes = 10 * 1024 * 1024;
41644
41750
  if (!this.i18n.hasNamespace(NAMESPACE$1)) {
@@ -41657,14 +41763,15 @@ class SurveyBuilderComponent {
41657
41763
  async ngOnInit() {
41658
41764
  // Sembrado directo: la app ya tenía la encuesta, no hace falta leerla.
41659
41765
  if (this.props.initial) {
41660
- this.hydrate(this.props.initial.label, this.props.initial.subtitle, this.props.initial.questions, this.props.initial.presentation);
41766
+ this.hydrate(this.props.initial.name, this.props.initial.label, this.props.initial.subtitle, this.props.initial.questions, this.props.initial.presentation);
41661
41767
  return;
41662
41768
  }
41663
41769
  if (!this.props.typeId)
41664
41770
  return;
41665
41771
  try {
41666
41772
  const cfg = await firstValueFrom(this.requests.getRequestType(this.props.typeId));
41667
- this.hydrate(cfg.label, cfg.subtitle ?? '', cfg.fieldSchema, cfg.presentation);
41773
+ const metadataName = typeof cfg.metadata?.['name'] === 'string' ? cfg.metadata['name'] : '';
41774
+ this.hydrate(metadataName || cfg.label, cfg.label, cfg.subtitle ?? '', cfg.fieldSchema, cfg.presentation);
41668
41775
  }
41669
41776
  catch (err) {
41670
41777
  this.errors.handle(err, {
@@ -41708,7 +41815,7 @@ class SurveyBuilderComponent {
41708
41815
  nextStep() {
41709
41816
  if (!this.validateWizardStep(this.wizardStep()))
41710
41817
  return;
41711
- this.wizardStep.update(step => Math.min(step + 1, this.wizardSteps.length - 1));
41818
+ this.wizardStep.update(step => Math.min(step + 1, this.wizardSteps().length - 1));
41712
41819
  }
41713
41820
  previousStep() {
41714
41821
  this.validationError.set('');
@@ -41751,11 +41858,23 @@ class SurveyBuilderComponent {
41751
41858
  state: this.saving() ? ComponentStates.WORKING : ComponentStates.ENABLED,
41752
41859
  };
41753
41860
  }
41861
+ closeStep() {
41862
+ return Math.max(this.wizardSteps().length - 2, 0);
41863
+ }
41864
+ reviewStep() {
41865
+ return Math.max(this.wizardSteps().length - 1, 0);
41866
+ }
41867
+ sectionStepIndex(sectionIndex) {
41868
+ return sectionIndex + 1;
41869
+ }
41870
+ showCurrentSectionQuestionStep() {
41871
+ return this.isWizard() && this.wizardStep() >= 1 && this.wizardStep() < this.reviewStep();
41872
+ }
41754
41873
  interpolate(template, values) {
41755
41874
  return Object.entries(values).reduce((text, [key, value]) => text.replaceAll(`{${key}}`, String(value)), template);
41756
41875
  }
41757
41876
  editorProps(row) {
41758
- return { mode: 'edit', field: row, allowedTypes: this.questionTypes() };
41877
+ return { mode: 'edit', field: row, allowedTypes: this.questionTypes(), showSection: false };
41759
41878
  }
41760
41879
  iconAction(token, icon, label, disabled = false, color = 'dark') {
41761
41880
  return {
@@ -41771,7 +41890,17 @@ class SurveyBuilderComponent {
41771
41890
  icon: { name: icon, slot: 'icon-only' },
41772
41891
  };
41773
41892
  }
41774
- addQuestion() {
41893
+ addQuestionAriaLabel(sectionLabel) {
41894
+ const section = (sectionLabel ?? '').trim();
41895
+ if (!section) {
41896
+ return this.t('addQuestionToSection');
41897
+ }
41898
+ return `${this.t('addQuestionToSection')} (${section})`;
41899
+ }
41900
+ addQuestion(sectionId) {
41901
+ const normalizedSectionId = this.normalizeSectionId(sectionId);
41902
+ const targetGroup = this.questionGroupById(normalizedSectionId);
41903
+ const sectionLabel = this.sectionNameControl(normalizedSectionId).value.trim() || targetGroup?.label || '';
41775
41904
  const row = {
41776
41905
  id: `row-${rowUid++}`,
41777
41906
  name: '',
@@ -41780,12 +41909,45 @@ class SurveyBuilderComponent {
41780
41909
  hintText: '',
41781
41910
  type: this.questionTypes()[0],
41782
41911
  required: true,
41912
+ sectionId: normalizedSectionId,
41913
+ sectionLabel: sectionLabel || undefined,
41783
41914
  };
41784
- this.questions.update(rows => [...rows, row]);
41915
+ this.questions.update(rows => {
41916
+ const next = [...rows];
41917
+ const insertionIndex = this.nextQuestionIndexForSection(next, normalizedSectionId);
41918
+ next.splice(insertionIndex, 0, row);
41919
+ return next;
41920
+ });
41785
41921
  // Una pregunta recién agregada está vacía: abrirla es el único paso
41786
41922
  // siguiente posible, y dejarla cerrada la haría ver como una fila rota.
41787
41923
  this.editingId.set(row.id);
41788
41924
  }
41925
+ rowGlobalIndex(sectionId, groupRowIndex) {
41926
+ const normalized = this.normalizeSectionId(sectionId);
41927
+ let index = 0;
41928
+ for (const row of this.questions()) {
41929
+ if (this.normalizeSectionId(row.sectionId) === normalized) {
41930
+ if (groupRowIndex === 0)
41931
+ return index;
41932
+ groupRowIndex -= 1;
41933
+ }
41934
+ index += 1;
41935
+ }
41936
+ return Math.min(index - 1, 0);
41937
+ }
41938
+ nextQuestionIndexForSection(rows, sectionId) {
41939
+ const normalized = this.normalizeSectionId(sectionId);
41940
+ if (!rows.length)
41941
+ return 0;
41942
+ if (!normalized)
41943
+ return rows.length;
41944
+ for (let i = rows.length - 1; i >= 0; i -= 1) {
41945
+ if (this.normalizeSectionId(rows[i].sectionId) === normalized) {
41946
+ return i + 1;
41947
+ }
41948
+ }
41949
+ return rows.length;
41950
+ }
41789
41951
  toggleEdit(row) {
41790
41952
  this.editingId.update(current => (current === row.id ? '' : row.id));
41791
41953
  }
@@ -41828,20 +41990,28 @@ class SurveyBuilderComponent {
41828
41990
  * paso obligatorio que no se veía por ningún lado.
41829
41991
  */
41830
41992
  draftQuestion(field) {
41831
- this.questions.update(rows => rows.map(r => (r.id === field.id ? { ...r, ...field } : r)));
41993
+ this.questions.update(rows => rows.map(r => (r.id === field.id ? this.withResolvedSection({ ...r, ...field }) : r)));
41832
41994
  if (this.validationError())
41833
41995
  this.validationError.set('');
41834
41996
  }
41835
41997
  applyQuestion(field) {
41836
41998
  this.questions.update(rows => rows.map(r => r.id === field.id
41837
41999
  ? {
41838
- ...field,
42000
+ ...this.withResolvedSection(field),
41839
42001
  name: this.formBuilder.uniqueFieldName(field.name || field.label, rows.filter(o => o.id !== r.id)),
41840
42002
  }
41841
42003
  : r));
41842
42004
  this.editingId.set('');
41843
42005
  this.validationError.set('');
41844
42006
  }
42007
+ withResolvedSection(field) {
42008
+ const label = (field.sectionLabel ?? '').trim();
42009
+ const id = this.normalizeSectionId(field.sectionId);
42010
+ if (id !== '__default__' || !label) {
42011
+ return { ...field, sectionId: id, sectionLabel: label || undefined };
42012
+ }
42013
+ return { ...field, sectionId: this.formBuilder.toToken(label), sectionLabel: label };
42014
+ }
41845
42015
  async onPresentationFileSelected(slot, event) {
41846
42016
  const input = event.target;
41847
42017
  const file = input.files?.[0];
@@ -41901,9 +42071,10 @@ class SurveyBuilderComponent {
41901
42071
  label: row.label.trim(),
41902
42072
  type: row.type,
41903
42073
  required: row.required,
41904
- sectionId: row.sectionLabel ? this.formBuilder.toToken(row.sectionLabel) : undefined,
41905
- sectionLabel: row.sectionLabel,
41906
- sectionOrder: this.sectionOrderFor(row.sectionLabel, rows),
42074
+ sectionId: row.sectionId,
42075
+ sectionLabel: this.sectionNameControl(row.sectionId).value.trim() || row.sectionLabel,
42076
+ sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(row.sectionId)] ?? '',
42077
+ sectionOrder: this.sectionOrderFor(row.sectionId, rows),
41907
42078
  placeholderText: row.placeholderText,
41908
42079
  hintText: row.hintText,
41909
42080
  options: row.options,
@@ -41913,7 +42084,13 @@ class SurveyBuilderComponent {
41913
42084
  const presentation = this.presentationPayload();
41914
42085
  // La app guarda: acá solo se valida y se entrega lo escrito.
41915
42086
  if (this.props.persist === false) {
41916
- this.draft.emit({ label: title, subtitle, presentation, questions: fieldSchema });
42087
+ this.draft.emit({
42088
+ name: this.surveyNameControl.value.trim() || title,
42089
+ label: title,
42090
+ subtitle,
42091
+ presentation,
42092
+ questions: fieldSchema,
42093
+ });
41917
42094
  return;
41918
42095
  }
41919
42096
  this.saving.set(true);
@@ -41924,6 +42101,7 @@ class SurveyBuilderComponent {
41924
42101
  // endpoint (`persist: false`) y arma el id con la entidad adentro.
41925
42102
  const typeId = this.props.typeId ?? `${this.props.typePrefix ?? DEFAULT_TYPE_PREFIX}:${this.formBuilder.toToken(title)}`;
41926
42103
  const payload = {
42104
+ name: this.surveyNameControl.value.trim() || title,
41927
42105
  label: title,
41928
42106
  subtitle,
41929
42107
  presentation,
@@ -41951,14 +42129,29 @@ class SurveyBuilderComponent {
41951
42129
  });
41952
42130
  }
41953
42131
  }
41954
- hydrate(label, subtitle, questions, presentation) {
42132
+ hydrate(name, label, subtitle, questions, presentation) {
42133
+ this.surveyNameControl.setValue(name ?? '');
41955
42134
  this.titleControl.setValue(label ?? '');
41956
42135
  this.subtitleControl.setValue(subtitle ?? '');
41957
42136
  this.headerImageControl.setValue(presentation?.headerImageUrl ?? '');
41958
42137
  this.successTitleControl.setValue(presentation?.successTitle || this.defaultSuccessTitle());
41959
42138
  this.successMessageControl.setValue(presentation?.successMessage || this.defaultSuccessMessage());
41960
42139
  this.successImageControl.setValue(presentation?.successImageUrl ?? '');
41961
- this.questions.set([...(questions ?? [])].sort((a, b) => a.order - b.order).map(f => this.rowFromField(f)));
42140
+ const rows = [...(questions ?? [])].sort((a, b) => a.order - b.order).map(f => this.rowFromField(f));
42141
+ const ids = [...new Set(rows.map(row => this.normalizeSectionId(row.sectionId)))];
42142
+ this.sectionIds.set(ids.length ? ids : ['__default__']);
42143
+ const names = {};
42144
+ const subtitles = {};
42145
+ rows.forEach(row => {
42146
+ const id = this.normalizeSectionId(row.sectionId);
42147
+ if (row.sectionLabel && names[id] === undefined)
42148
+ names[id] = row.sectionLabel;
42149
+ if (row.sectionSubtitle && subtitles[id] === undefined)
42150
+ subtitles[id] = row.sectionSubtitle;
42151
+ });
42152
+ this.sectionNames.set(names);
42153
+ this.sectionSubtitles.set(subtitles);
42154
+ this.questions.set(rows);
41962
42155
  }
41963
42156
  presentationPayload() {
41964
42157
  const presentation = {
@@ -41978,6 +42171,13 @@ class SurveyBuilderComponent {
41978
42171
  validateWizardStep(step) {
41979
42172
  this.validationError.set('');
41980
42173
  if (step === 0) {
42174
+ if (!this.isWizard())
42175
+ return true;
42176
+ if (!this.surveyNameControl.value.trim()) {
42177
+ this.surveyNameControl.markAsTouched();
42178
+ this.validationError.set(this.t('noSurveyName'));
42179
+ return false;
42180
+ }
41981
42181
  if (!this.titleControl.value.trim()) {
41982
42182
  this.titleControl.markAsTouched();
41983
42183
  this.validationError.set(this.t('noTitle'));
@@ -42013,7 +42213,9 @@ class SurveyBuilderComponent {
42013
42213
  hintText: f.hintText ?? '',
42014
42214
  type: f.type,
42015
42215
  required: !!f.required,
42216
+ sectionId: f.sectionId,
42016
42217
  sectionLabel: f.sectionLabel ?? '',
42218
+ sectionSubtitle: f.sectionSubtitle ?? '',
42017
42219
  sectionOrder: f.sectionOrder,
42018
42220
  options: f.options,
42019
42221
  };
@@ -42037,7 +42239,7 @@ class SurveyBuilderComponent {
42037
42239
  };
42038
42240
  }
42039
42241
  async openPreview() {
42040
- await this.modals.open({
42242
+ await this.modals.openAdaptive({
42041
42243
  component: SurveyPreviewModalComponent,
42042
42244
  componentProps: {
42043
42245
  modalTitle: this.t('previewTitle'),
@@ -42053,26 +42255,26 @@ class SurveyBuilderComponent {
42053
42255
  order: index,
42054
42256
  name: question.name || this.formBuilder.toToken(question.label),
42055
42257
  typeLabel: this.typeLabel(question.type),
42056
- sectionId: question.sectionLabel ? this.formBuilder.toToken(question.sectionLabel) : undefined,
42057
- sectionOrder: this.sectionOrderFor(question.sectionLabel, this.questions()),
42258
+ sectionId: this.normalizeSectionId(question.sectionId),
42259
+ sectionLabel: this.sectionNameControl(question.sectionId).value.trim() || question.sectionLabel,
42260
+ sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(question.sectionId)] ?? '',
42261
+ sectionOrder: this.sectionOrderFor(question.sectionId, this.questions()),
42058
42262
  })),
42059
42263
  },
42060
- size: 'medium',
42061
- });
42264
+ }, 'wide');
42062
42265
  }
42063
- sectionOrderFor(sectionLabel, rows) {
42064
- const label = sectionLabel?.trim();
42065
- if (!label)
42066
- return undefined;
42067
- const labels = [...new Set(rows.map(row => row.sectionLabel?.trim()).filter(Boolean))];
42068
- return labels.indexOf(label);
42266
+ sectionOrderFor(sectionId, rows) {
42267
+ const id = this.normalizeSectionId(sectionId);
42268
+ const sectionIds = [...new Set(rows.map(row => this.normalizeSectionId(row.sectionId)).filter(Boolean))];
42269
+ const index = sectionIds.indexOf(id);
42270
+ return index >= 0 ? index : undefined;
42069
42271
  }
42070
42272
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
42071
42273
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SurveyBuilderComponent, isStandalone: true, selector: "val-survey-builder", inputs: { props: "props" }, outputs: { saved: "saved", draft: "draft" }, ngImport: i0, template: `
42072
42274
  <div class="survey-builder">
42073
42275
  @if (isWizard()) {
42074
42276
  <nav class="survey-builder__steps" [attr.aria-label]="t('wizardStepsLabel')">
42075
- @for (step of wizardSteps; track step.id; let i = $index) {
42277
+ @for (step of wizardSteps(); track step.id; let i = $index) {
42076
42278
  <button
42077
42279
  type="button"
42078
42280
  class="survey-builder__step"
@@ -42081,7 +42283,7 @@ class SurveyBuilderComponent {
42081
42283
  (click)="goToStep(i)"
42082
42284
  >
42083
42285
  <span>{{ i + 1 }}</span>
42084
- {{ t(step.labelKey) }}
42286
+ {{ step.label }}
42085
42287
  </button>
42086
42288
  }
42087
42289
  </nav>
@@ -42098,6 +42300,9 @@ class SurveyBuilderComponent {
42098
42300
 
42099
42301
  @if (showWizardSection(0)) {
42100
42302
  <section class="survey-builder__section">
42303
+ <val-form-field [label]="t('surveyNameLabel')">
42304
+ <val-text-input [props]="{ control: surveyNameControl, placeholder: t('surveyNamePlaceholder') }" />
42305
+ </val-form-field>
42101
42306
  <val-form-field [label]="t('titleLabel')">
42102
42307
  <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
42103
42308
  </val-form-field>
@@ -42223,7 +42428,7 @@ class SurveyBuilderComponent {
42223
42428
  </div>
42224
42429
  }
42225
42430
 
42226
- @if (showWizardSection(2)) {
42431
+ @if (showWizardSection(closeStep())) {
42227
42432
  <section class="survey-builder__section">
42228
42433
  <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
42229
42434
  <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42270,7 +42475,7 @@ class SurveyBuilderComponent {
42270
42475
  </section>
42271
42476
  }
42272
42477
 
42273
- @if (showWizardSection(1)) {
42478
+ @if (showCurrentSectionQuestionStep()) {
42274
42479
  <div class="survey-builder__questions">
42275
42480
  <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
42276
42481
 
@@ -42278,68 +42483,119 @@ class SurveyBuilderComponent {
42278
42483
  <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
42279
42484
  }
42280
42485
 
42281
- @for (row of questions(); track row.id; let i = $index; let first = $first; let last = $last) {
42282
- <div class="survey-builder__row">
42283
- <div class="survey-builder__row-head">
42284
- <div class="survey-builder__row-text">
42285
- <strong>{{ row.label || t('untitledQuestion') }}</strong>
42286
- <span>
42287
- {{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}{{ row.sectionLabel ? ' · ' + row.sectionLabel : '' }}
42288
- </span>
42289
- </div>
42290
- <div class="survey-builder__row-actions">
42291
- <val-button
42292
- [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
42293
- (onClick)="move(i, -1)"
42294
- />
42295
- <val-button
42296
- [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
42297
- (onClick)="move(i, 1)"
42298
- />
42299
- <val-button
42300
- [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
42301
- (onClick)="duplicate(row)"
42302
- />
42303
- <val-button
42304
- [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
42305
- (onClick)="toggleEdit(row)"
42306
- />
42307
- <val-button
42308
- [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
42309
- (onClick)="removeQuestion(row)"
42310
- />
42311
- </div>
42312
- </div>
42313
-
42314
- @if (editingId() === row.id) {
42315
- <div class="survey-builder__row-editor">
42316
- <val-field-schema-editor
42317
- #editor
42318
- [props]="editorProps(row)"
42319
- (changed)="draftQuestion($event)"
42320
- (save)="applyQuestion($event)"
42321
- />
42322
- <div class="survey-builder__row-editor-actions">
42323
- <val-button
42486
+ @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
42487
+ @if (wizardStep() === sectionStepIndex(sectionIndex)) {
42488
+ <section class="survey-builder__question-section">
42489
+ <div class="survey-builder__section-head">
42490
+ <div class="survey-builder__section-fields">
42491
+ <val-form-field [label]="t('sectionNameLabel')">
42492
+ <val-text-input
42324
42493
  [props]="{
42325
- token: 'q-done-' + row.id,
42326
- text: t('doneEditing'),
42327
- color: 'dark',
42328
- fill: 'solid',
42329
- shape: 'round',
42330
- size: 'default',
42331
- type: 'button',
42332
- state: 'ENABLED',
42494
+ control: sectionNameControl(group.id),
42495
+ placeholder: t('sectionNamePlaceholder'),
42333
42496
  }"
42334
- (onClick)="editor.submit()"
42335
42497
  />
42498
+ </val-form-field>
42499
+ <div class="survey-builder__section-subtitle">
42500
+ <val-form-field [label]="t('sectionSubtitleLabel')">
42501
+ <val-text-input
42502
+ [props]="{
42503
+ control: sectionSubtitleControl(group.id),
42504
+ placeholder: t('sectionSubtitlePlaceholder'),
42505
+ }"
42506
+ />
42507
+ </val-form-field>
42508
+ </div>
42509
+ </div>
42510
+ <val-button
42511
+ [props]="{
42512
+ token: 'survey-builder-add-question-' + group.id,
42513
+ text: t('addQuestionToSection'),
42514
+ color: 'dark',
42515
+ fill: 'outline',
42516
+ shape: 'round',
42517
+ size: 'small',
42518
+ type: 'button',
42519
+ state: 'ENABLED',
42520
+ icon: { name: 'add-outline', slot: 'start' },
42521
+ }"
42522
+ (onClick)="addQuestion(group.id)"
42523
+ />
42524
+ </div>
42525
+
42526
+ @for (row of group.rows; track row.id; let i = $index; let first = $first; let last = $last) {
42527
+ @let globalIndex = rowGlobalIndex(group.id, i);
42528
+ <div class="survey-builder__row">
42529
+ <div class="survey-builder__row-head">
42530
+ <div class="survey-builder__row-text">
42531
+ <strong>{{ row.label || t('untitledQuestion') }}</strong>
42532
+ <span>
42533
+ {{
42534
+ typeLabel(row.type) +
42535
+ (row.required ? ' · ' + t('requiredTag') : '')
42536
+ }}
42537
+ </span>
42538
+ </div>
42539
+ <div class="survey-builder__row-actions">
42540
+ <val-button
42541
+ [props]="iconAction('q-add-' + row.id, 'add-outline', addQuestionAriaLabel(row.sectionLabel), false)"
42542
+ (onClick)="addQuestion(row.sectionId || group.id)"
42543
+ />
42544
+ <val-button
42545
+ [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
42546
+ (onClick)="move(globalIndex, -1)"
42547
+ />
42548
+ <val-button
42549
+ [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
42550
+ (onClick)="move(globalIndex, 1)"
42551
+ />
42552
+ <val-button
42553
+ [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
42554
+ (onClick)="duplicate(row)"
42555
+ />
42556
+ <val-button
42557
+ [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
42558
+ (onClick)="toggleEdit(row)"
42559
+ />
42560
+ <val-button
42561
+ [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
42562
+ (onClick)="removeQuestion(row)"
42563
+ />
42564
+ </div>
42336
42565
  </div>
42566
+
42567
+ @if (editingId() === row.id) {
42568
+ <div class="survey-builder__row-editor">
42569
+ <val-field-schema-editor
42570
+ #editor
42571
+ [props]="editorProps(row)"
42572
+ (changed)="draftQuestion($event)"
42573
+ (save)="applyQuestion($event)"
42574
+ />
42575
+ <div class="survey-builder__row-editor-actions">
42576
+ <val-button
42577
+ [props]="{
42578
+ token: 'q-done-' + row.id,
42579
+ text: t('doneEditing'),
42580
+ color: 'dark',
42581
+ fill: 'solid',
42582
+ shape: 'round',
42583
+ size: 'default',
42584
+ type: 'button',
42585
+ state: 'ENABLED',
42586
+ }"
42587
+ (onClick)="editor.submit()"
42588
+ />
42589
+ </div>
42590
+ </div>
42591
+ }
42337
42592
  </div>
42338
42593
  }
42339
- </div>
42594
+ </section>
42595
+ }
42340
42596
  }
42341
42597
 
42342
- <val-button
42598
+ <val-button
42343
42599
  [props]="{
42344
42600
  token: 'survey-builder-add-question',
42345
42601
  text: t('addQuestion'),
@@ -42351,12 +42607,12 @@ class SurveyBuilderComponent {
42351
42607
  state: 'ENABLED',
42352
42608
  icon: { name: 'add-outline', slot: 'start' },
42353
42609
  }"
42354
- (onClick)="addQuestion()"
42610
+ (onClick)="addQuestion(questionGroups()[0]?.id)"
42355
42611
  />
42356
42612
  </div>
42357
42613
  }
42358
42614
 
42359
- @if (showWizardSection(3)) {
42615
+ @if (showWizardSection(reviewStep())) {
42360
42616
  <section class="survey-builder__review">
42361
42617
  <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
42362
42618
  <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42379,7 +42635,7 @@ class SurveyBuilderComponent {
42379
42635
  @if (wizardStep() > 0) {
42380
42636
  <val-button [props]="wizardBackProps()" (onClick)="previousStep()" />
42381
42637
  }
42382
- @if (wizardStep() < wizardSteps.length - 1) {
42638
+ @if (wizardStep() < wizardSteps().length - 1) {
42383
42639
  <val-button [props]="wizardNextProps()" (onClick)="nextStep()" />
42384
42640
  } @else {
42385
42641
  <val-button [props]="saveProps()" (onClick)="save()" />
@@ -42389,7 +42645,7 @@ class SurveyBuilderComponent {
42389
42645
  <val-button [props]="saveProps()" (onClick)="save()" />
42390
42646
  }
42391
42647
  </div>
42392
- `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
42648
+ `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
42393
42649
  }
42394
42650
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
42395
42651
  type: Component,
@@ -42406,7 +42662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42406
42662
  <div class="survey-builder">
42407
42663
  @if (isWizard()) {
42408
42664
  <nav class="survey-builder__steps" [attr.aria-label]="t('wizardStepsLabel')">
42409
- @for (step of wizardSteps; track step.id; let i = $index) {
42665
+ @for (step of wizardSteps(); track step.id; let i = $index) {
42410
42666
  <button
42411
42667
  type="button"
42412
42668
  class="survey-builder__step"
@@ -42415,7 +42671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42415
42671
  (click)="goToStep(i)"
42416
42672
  >
42417
42673
  <span>{{ i + 1 }}</span>
42418
- {{ t(step.labelKey) }}
42674
+ {{ step.label }}
42419
42675
  </button>
42420
42676
  }
42421
42677
  </nav>
@@ -42432,6 +42688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42432
42688
 
42433
42689
  @if (showWizardSection(0)) {
42434
42690
  <section class="survey-builder__section">
42691
+ <val-form-field [label]="t('surveyNameLabel')">
42692
+ <val-text-input [props]="{ control: surveyNameControl, placeholder: t('surveyNamePlaceholder') }" />
42693
+ </val-form-field>
42435
42694
  <val-form-field [label]="t('titleLabel')">
42436
42695
  <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
42437
42696
  </val-form-field>
@@ -42557,7 +42816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42557
42816
  </div>
42558
42817
  }
42559
42818
 
42560
- @if (showWizardSection(2)) {
42819
+ @if (showWizardSection(closeStep())) {
42561
42820
  <section class="survey-builder__section">
42562
42821
  <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
42563
42822
  <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42604,7 +42863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42604
42863
  </section>
42605
42864
  }
42606
42865
 
42607
- @if (showWizardSection(1)) {
42866
+ @if (showCurrentSectionQuestionStep()) {
42608
42867
  <div class="survey-builder__questions">
42609
42868
  <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
42610
42869
 
@@ -42612,68 +42871,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42612
42871
  <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
42613
42872
  }
42614
42873
 
42615
- @for (row of questions(); track row.id; let i = $index; let first = $first; let last = $last) {
42616
- <div class="survey-builder__row">
42617
- <div class="survey-builder__row-head">
42618
- <div class="survey-builder__row-text">
42619
- <strong>{{ row.label || t('untitledQuestion') }}</strong>
42620
- <span>
42621
- {{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}{{ row.sectionLabel ? ' · ' + row.sectionLabel : '' }}
42622
- </span>
42623
- </div>
42624
- <div class="survey-builder__row-actions">
42625
- <val-button
42626
- [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
42627
- (onClick)="move(i, -1)"
42628
- />
42629
- <val-button
42630
- [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
42631
- (onClick)="move(i, 1)"
42632
- />
42633
- <val-button
42634
- [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
42635
- (onClick)="duplicate(row)"
42636
- />
42637
- <val-button
42638
- [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
42639
- (onClick)="toggleEdit(row)"
42640
- />
42641
- <val-button
42642
- [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
42643
- (onClick)="removeQuestion(row)"
42644
- />
42645
- </div>
42646
- </div>
42647
-
42648
- @if (editingId() === row.id) {
42649
- <div class="survey-builder__row-editor">
42650
- <val-field-schema-editor
42651
- #editor
42652
- [props]="editorProps(row)"
42653
- (changed)="draftQuestion($event)"
42654
- (save)="applyQuestion($event)"
42655
- />
42656
- <div class="survey-builder__row-editor-actions">
42657
- <val-button
42874
+ @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
42875
+ @if (wizardStep() === sectionStepIndex(sectionIndex)) {
42876
+ <section class="survey-builder__question-section">
42877
+ <div class="survey-builder__section-head">
42878
+ <div class="survey-builder__section-fields">
42879
+ <val-form-field [label]="t('sectionNameLabel')">
42880
+ <val-text-input
42658
42881
  [props]="{
42659
- token: 'q-done-' + row.id,
42660
- text: t('doneEditing'),
42661
- color: 'dark',
42662
- fill: 'solid',
42663
- shape: 'round',
42664
- size: 'default',
42665
- type: 'button',
42666
- state: 'ENABLED',
42882
+ control: sectionNameControl(group.id),
42883
+ placeholder: t('sectionNamePlaceholder'),
42667
42884
  }"
42668
- (onClick)="editor.submit()"
42669
42885
  />
42886
+ </val-form-field>
42887
+ <div class="survey-builder__section-subtitle">
42888
+ <val-form-field [label]="t('sectionSubtitleLabel')">
42889
+ <val-text-input
42890
+ [props]="{
42891
+ control: sectionSubtitleControl(group.id),
42892
+ placeholder: t('sectionSubtitlePlaceholder'),
42893
+ }"
42894
+ />
42895
+ </val-form-field>
42896
+ </div>
42897
+ </div>
42898
+ <val-button
42899
+ [props]="{
42900
+ token: 'survey-builder-add-question-' + group.id,
42901
+ text: t('addQuestionToSection'),
42902
+ color: 'dark',
42903
+ fill: 'outline',
42904
+ shape: 'round',
42905
+ size: 'small',
42906
+ type: 'button',
42907
+ state: 'ENABLED',
42908
+ icon: { name: 'add-outline', slot: 'start' },
42909
+ }"
42910
+ (onClick)="addQuestion(group.id)"
42911
+ />
42912
+ </div>
42913
+
42914
+ @for (row of group.rows; track row.id; let i = $index; let first = $first; let last = $last) {
42915
+ @let globalIndex = rowGlobalIndex(group.id, i);
42916
+ <div class="survey-builder__row">
42917
+ <div class="survey-builder__row-head">
42918
+ <div class="survey-builder__row-text">
42919
+ <strong>{{ row.label || t('untitledQuestion') }}</strong>
42920
+ <span>
42921
+ {{
42922
+ typeLabel(row.type) +
42923
+ (row.required ? ' · ' + t('requiredTag') : '')
42924
+ }}
42925
+ </span>
42926
+ </div>
42927
+ <div class="survey-builder__row-actions">
42928
+ <val-button
42929
+ [props]="iconAction('q-add-' + row.id, 'add-outline', addQuestionAriaLabel(row.sectionLabel), false)"
42930
+ (onClick)="addQuestion(row.sectionId || group.id)"
42931
+ />
42932
+ <val-button
42933
+ [props]="iconAction('q-up-' + row.id, 'arrow-up-outline', t('moveUp'), first)"
42934
+ (onClick)="move(globalIndex, -1)"
42935
+ />
42936
+ <val-button
42937
+ [props]="iconAction('q-down-' + row.id, 'arrow-down-outline', t('moveDown'), last)"
42938
+ (onClick)="move(globalIndex, 1)"
42939
+ />
42940
+ <val-button
42941
+ [props]="iconAction('q-copy-' + row.id, 'copy-outline', t('duplicateQuestion'))"
42942
+ (onClick)="duplicate(row)"
42943
+ />
42944
+ <val-button
42945
+ [props]="iconAction('q-edit-' + row.id, 'create-outline', t('editQuestion'))"
42946
+ (onClick)="toggleEdit(row)"
42947
+ />
42948
+ <val-button
42949
+ [props]="iconAction('q-remove-' + row.id, 'trash-outline', t('removeQuestion'), false, 'danger')"
42950
+ (onClick)="removeQuestion(row)"
42951
+ />
42952
+ </div>
42670
42953
  </div>
42954
+
42955
+ @if (editingId() === row.id) {
42956
+ <div class="survey-builder__row-editor">
42957
+ <val-field-schema-editor
42958
+ #editor
42959
+ [props]="editorProps(row)"
42960
+ (changed)="draftQuestion($event)"
42961
+ (save)="applyQuestion($event)"
42962
+ />
42963
+ <div class="survey-builder__row-editor-actions">
42964
+ <val-button
42965
+ [props]="{
42966
+ token: 'q-done-' + row.id,
42967
+ text: t('doneEditing'),
42968
+ color: 'dark',
42969
+ fill: 'solid',
42970
+ shape: 'round',
42971
+ size: 'default',
42972
+ type: 'button',
42973
+ state: 'ENABLED',
42974
+ }"
42975
+ (onClick)="editor.submit()"
42976
+ />
42977
+ </div>
42978
+ </div>
42979
+ }
42671
42980
  </div>
42672
42981
  }
42673
- </div>
42982
+ </section>
42983
+ }
42674
42984
  }
42675
42985
 
42676
- <val-button
42986
+ <val-button
42677
42987
  [props]="{
42678
42988
  token: 'survey-builder-add-question',
42679
42989
  text: t('addQuestion'),
@@ -42685,12 +42995,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42685
42995
  state: 'ENABLED',
42686
42996
  icon: { name: 'add-outline', slot: 'start' },
42687
42997
  }"
42688
- (onClick)="addQuestion()"
42998
+ (onClick)="addQuestion(questionGroups()[0]?.id)"
42689
42999
  />
42690
43000
  </div>
42691
43001
  }
42692
43002
 
42693
- @if (showWizardSection(3)) {
43003
+ @if (showWizardSection(reviewStep())) {
42694
43004
  <section class="survey-builder__review">
42695
43005
  <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
42696
43006
  <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42713,7 +43023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42713
43023
  @if (wizardStep() > 0) {
42714
43024
  <val-button [props]="wizardBackProps()" (onClick)="previousStep()" />
42715
43025
  }
42716
- @if (wizardStep() < wizardSteps.length - 1) {
43026
+ @if (wizardStep() < wizardSteps().length - 1) {
42717
43027
  <val-button [props]="wizardNextProps()" (onClick)="nextStep()" />
42718
43028
  } @else {
42719
43029
  <val-button [props]="saveProps()" (onClick)="save()" />
@@ -42723,7 +43033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42723
43033
  <val-button [props]="saveProps()" (onClick)="save()" />
42724
43034
  }
42725
43035
  </div>
42726
- `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
43036
+ `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
42727
43037
  }], ctorParameters: () => [], propDecorators: { props: [{
42728
43038
  type: Input
42729
43039
  }], saved: [{
@@ -51175,6 +51485,39 @@ class DataTableComponent {
51175
51485
  get visibleColumns() {
51176
51486
  return this._visibleColumns;
51177
51487
  }
51488
+ get mobileCardLayout() {
51489
+ return this.props.mobileCardLayout || {};
51490
+ }
51491
+ get mobileCardLayoutActive() {
51492
+ return Object.keys(this.mobileCardLayout).length > 0;
51493
+ }
51494
+ get mobileCardPrimaryColumns() {
51495
+ return this.mobileCardLayout.primary ? this.resolveMobileCardColumns(this.mobileCardLayout.primary) : [];
51496
+ }
51497
+ get mobileCardSecondaryColumns() {
51498
+ return this.mobileCardLayout.secondary ? this.resolveMobileCardColumns(this.mobileCardLayout.secondary) : [];
51499
+ }
51500
+ get mobileCardMetaColumns() {
51501
+ return this.resolveMobileCardColumns(this.mobileCardLayout.meta);
51502
+ }
51503
+ get mobileCardStatusColumns() {
51504
+ return this.resolveMobileCardColumns(this.mobileCardLayout.status);
51505
+ }
51506
+ get mobileCardAdditionalColumns() {
51507
+ if (this.mobileCardLayoutActive && this.mobileCardLayout.showUnmappedColumns === false) {
51508
+ return [];
51509
+ }
51510
+ const mapped = new Set([
51511
+ ...this.mobileCardPrimaryColumns.map(c => c.key),
51512
+ ...this.mobileCardSecondaryColumns.map(c => c.key),
51513
+ ...this.mobileCardMetaColumns.map(c => c.key),
51514
+ ...this.mobileCardStatusColumns.map(c => c.key),
51515
+ ]);
51516
+ if (mapped.size === 0) {
51517
+ return this.visibleColumns;
51518
+ }
51519
+ return this.visibleColumns.filter(column => !mapped.has(column.key));
51520
+ }
51178
51521
  get totalColumns() {
51179
51522
  let count = this.visibleColumns.length;
51180
51523
  if (this.props.showSelectionColumn)
@@ -51276,6 +51619,21 @@ class DataTableComponent {
51276
51619
  return 'none';
51277
51620
  return this.currentSort.direction === 'asc' ? 'ascending' : 'descending';
51278
51621
  }
51622
+ getMobileCardFieldAriaLabel(column, row) {
51623
+ const value = this.getCellValue(row, column);
51624
+ const textValue = value === null || value === undefined ? '' : `${value}`;
51625
+ return textValue ? `${column.label}: ${textValue}` : column.label;
51626
+ }
51627
+ resolveMobileCardColumns(keys) {
51628
+ if (!keys)
51629
+ return [];
51630
+ const orderedKeys = Array.isArray(keys) ? keys : [keys];
51631
+ const columnByKey = new Map(this.visibleColumns.map(column => [column.key, column]));
51632
+ return orderedKeys
51633
+ .map(key => columnByKey.get(key))
51634
+ .filter((column) => Boolean(column))
51635
+ .filter((column, index, list) => list.findIndex(c => c.key === column.key) === index);
51636
+ }
51279
51637
  getRowNumber(index) {
51280
51638
  const start = this.props.rowNumberStart ?? 1;
51281
51639
  if (this.props.pagination) {
@@ -51662,22 +52020,139 @@ class DataTableComponent {
51662
52020
 
51663
52021
  <!-- Card body with fields -->
51664
52022
  <div class="card-body">
51665
- @for (column of visibleColumns; track column.key) {
51666
- <div class="card-field">
51667
- <span class="card-field__label">{{ column.label }}</span>
51668
- <span class="card-field__value">
51669
- @if (column.cellTemplate) {
51670
- <ng-container
51671
- *ngTemplateOutlet="
51672
- column.cellTemplate;
51673
- context: { row, column, value: getCellValue(row, column) }
51674
- "
51675
- ></ng-container>
51676
- } @else {
51677
- {{ getFormattedValue(row, column) }}
51678
- }
51679
- </span>
51680
- </div>
52023
+ @if (mobileCardLayoutActive) {
52024
+ @if (mobileCardPrimaryColumns.length) {
52025
+ @for (column of mobileCardPrimaryColumns; track column.key) {
52026
+ <div
52027
+ class="card-field card-field--primary"
52028
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52029
+ >
52030
+ <span class="card-field__label">{{ column.label }}</span>
52031
+ <span class="card-field__value">
52032
+ @if (column.cellTemplate) {
52033
+ <ng-container
52034
+ *ngTemplateOutlet="
52035
+ column.cellTemplate;
52036
+ context: { row, column, value: getCellValue(row, column) }
52037
+ "
52038
+ ></ng-container>
52039
+ } @else {
52040
+ {{ getFormattedValue(row, column) }}
52041
+ }
52042
+ </span>
52043
+ </div>
52044
+ }
52045
+ }
52046
+
52047
+ @if (mobileCardSecondaryColumns.length) {
52048
+ @for (column of mobileCardSecondaryColumns; track column.key) {
52049
+ <div
52050
+ class="card-field card-field--secondary"
52051
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52052
+ >
52053
+ <span class="card-field__label">{{ column.label }}</span>
52054
+ <span class="card-field__value">
52055
+ @if (column.cellTemplate) {
52056
+ <ng-container
52057
+ *ngTemplateOutlet="
52058
+ column.cellTemplate;
52059
+ context: { row, column, value: getCellValue(row, column) }
52060
+ "
52061
+ ></ng-container>
52062
+ } @else {
52063
+ {{ getFormattedValue(row, column) }}
52064
+ }
52065
+ </span>
52066
+ </div>
52067
+ }
52068
+ }
52069
+
52070
+ @if (mobileCardMetaColumns.length) {
52071
+ @for (column of mobileCardMetaColumns; track column.key) {
52072
+ <div
52073
+ class="card-field card-field--meta"
52074
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52075
+ >
52076
+ <span class="card-field__label">{{ column.label }}</span>
52077
+ <span class="card-field__value">
52078
+ @if (column.cellTemplate) {
52079
+ <ng-container
52080
+ *ngTemplateOutlet="
52081
+ column.cellTemplate;
52082
+ context: { row, column, value: getCellValue(row, column) }
52083
+ "
52084
+ ></ng-container>
52085
+ } @else {
52086
+ {{ getFormattedValue(row, column) }}
52087
+ }
52088
+ </span>
52089
+ </div>
52090
+ }
52091
+ }
52092
+
52093
+ @if (mobileCardStatusColumns.length) {
52094
+ @for (column of mobileCardStatusColumns; track column.key) {
52095
+ <div
52096
+ class="card-field card-field--status"
52097
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52098
+ >
52099
+ <span class="card-field__label">{{ column.label }}</span>
52100
+ <span class="card-field__value">
52101
+ @if (column.cellTemplate) {
52102
+ <ng-container
52103
+ *ngTemplateOutlet="
52104
+ column.cellTemplate;
52105
+ context: { row, column, value: getCellValue(row, column) }
52106
+ "
52107
+ ></ng-container>
52108
+ } @else {
52109
+ {{ getFormattedValue(row, column) }}
52110
+ }
52111
+ </span>
52112
+ </div>
52113
+ }
52114
+ }
52115
+
52116
+ @if (mobileCardAdditionalColumns.length) {
52117
+ @for (column of mobileCardAdditionalColumns; track column.key) {
52118
+ <div
52119
+ class="card-field card-field--meta"
52120
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52121
+ >
52122
+ <span class="card-field__label">{{ column.label }}</span>
52123
+ <span class="card-field__value">
52124
+ @if (column.cellTemplate) {
52125
+ <ng-container
52126
+ *ngTemplateOutlet="
52127
+ column.cellTemplate;
52128
+ context: { row, column, value: getCellValue(row, column) }
52129
+ "
52130
+ ></ng-container>
52131
+ } @else {
52132
+ {{ getFormattedValue(row, column) }}
52133
+ }
52134
+ </span>
52135
+ </div>
52136
+ }
52137
+ }
52138
+ } @else {
52139
+ @for (column of visibleColumns; track column.key) {
52140
+ <div class="card-field">
52141
+ <span class="card-field__label">{{ column.label }}</span>
52142
+ <span class="card-field__value">
52143
+ @if (column.cellTemplate) {
52144
+ <ng-container
52145
+ *ngTemplateOutlet="
52146
+ column.cellTemplate;
52147
+ context: { row, column, value: getCellValue(row, column) }
52148
+ "
52149
+ ></ng-container>
52150
+ } @else {
52151
+ {{ getFormattedValue(row, column) }}
52152
+ }
52153
+ </span>
52154
+ </div>
52155
+ }
51681
52156
  }
51682
52157
  </div>
51683
52158
 
@@ -51766,7 +52241,7 @@ class DataTableComponent {
51766
52241
  </div>
51767
52242
  }
51768
52243
  </div>
51769
- `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
52244
+ `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-selection ion-checkbox,.card-selection input[type=radio]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-field--primary .card-field__label{color:var(--dt-text-primary)}.card-field--primary .card-field__value{font-size:1rem;font-weight:600}.card-field--secondary .card-field__label,.card-field--status .card-field__label{color:var(--dt-text-muted)}.card-field--status .card-field__value{font-size:.8125rem;font-weight:600}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
51770
52245
  }
51771
52246
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
51772
52247
  type: Component,
@@ -52021,22 +52496,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
52021
52496
 
52022
52497
  <!-- Card body with fields -->
52023
52498
  <div class="card-body">
52024
- @for (column of visibleColumns; track column.key) {
52025
- <div class="card-field">
52026
- <span class="card-field__label">{{ column.label }}</span>
52027
- <span class="card-field__value">
52028
- @if (column.cellTemplate) {
52029
- <ng-container
52030
- *ngTemplateOutlet="
52031
- column.cellTemplate;
52032
- context: { row, column, value: getCellValue(row, column) }
52033
- "
52034
- ></ng-container>
52035
- } @else {
52036
- {{ getFormattedValue(row, column) }}
52037
- }
52038
- </span>
52039
- </div>
52499
+ @if (mobileCardLayoutActive) {
52500
+ @if (mobileCardPrimaryColumns.length) {
52501
+ @for (column of mobileCardPrimaryColumns; track column.key) {
52502
+ <div
52503
+ class="card-field card-field--primary"
52504
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52505
+ >
52506
+ <span class="card-field__label">{{ column.label }}</span>
52507
+ <span class="card-field__value">
52508
+ @if (column.cellTemplate) {
52509
+ <ng-container
52510
+ *ngTemplateOutlet="
52511
+ column.cellTemplate;
52512
+ context: { row, column, value: getCellValue(row, column) }
52513
+ "
52514
+ ></ng-container>
52515
+ } @else {
52516
+ {{ getFormattedValue(row, column) }}
52517
+ }
52518
+ </span>
52519
+ </div>
52520
+ }
52521
+ }
52522
+
52523
+ @if (mobileCardSecondaryColumns.length) {
52524
+ @for (column of mobileCardSecondaryColumns; track column.key) {
52525
+ <div
52526
+ class="card-field card-field--secondary"
52527
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52528
+ >
52529
+ <span class="card-field__label">{{ column.label }}</span>
52530
+ <span class="card-field__value">
52531
+ @if (column.cellTemplate) {
52532
+ <ng-container
52533
+ *ngTemplateOutlet="
52534
+ column.cellTemplate;
52535
+ context: { row, column, value: getCellValue(row, column) }
52536
+ "
52537
+ ></ng-container>
52538
+ } @else {
52539
+ {{ getFormattedValue(row, column) }}
52540
+ }
52541
+ </span>
52542
+ </div>
52543
+ }
52544
+ }
52545
+
52546
+ @if (mobileCardMetaColumns.length) {
52547
+ @for (column of mobileCardMetaColumns; track column.key) {
52548
+ <div
52549
+ class="card-field card-field--meta"
52550
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52551
+ >
52552
+ <span class="card-field__label">{{ column.label }}</span>
52553
+ <span class="card-field__value">
52554
+ @if (column.cellTemplate) {
52555
+ <ng-container
52556
+ *ngTemplateOutlet="
52557
+ column.cellTemplate;
52558
+ context: { row, column, value: getCellValue(row, column) }
52559
+ "
52560
+ ></ng-container>
52561
+ } @else {
52562
+ {{ getFormattedValue(row, column) }}
52563
+ }
52564
+ </span>
52565
+ </div>
52566
+ }
52567
+ }
52568
+
52569
+ @if (mobileCardStatusColumns.length) {
52570
+ @for (column of mobileCardStatusColumns; track column.key) {
52571
+ <div
52572
+ class="card-field card-field--status"
52573
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52574
+ >
52575
+ <span class="card-field__label">{{ column.label }}</span>
52576
+ <span class="card-field__value">
52577
+ @if (column.cellTemplate) {
52578
+ <ng-container
52579
+ *ngTemplateOutlet="
52580
+ column.cellTemplate;
52581
+ context: { row, column, value: getCellValue(row, column) }
52582
+ "
52583
+ ></ng-container>
52584
+ } @else {
52585
+ {{ getFormattedValue(row, column) }}
52586
+ }
52587
+ </span>
52588
+ </div>
52589
+ }
52590
+ }
52591
+
52592
+ @if (mobileCardAdditionalColumns.length) {
52593
+ @for (column of mobileCardAdditionalColumns; track column.key) {
52594
+ <div
52595
+ class="card-field card-field--meta"
52596
+ [attr.aria-label]="getMobileCardFieldAriaLabel(column, row)"
52597
+ >
52598
+ <span class="card-field__label">{{ column.label }}</span>
52599
+ <span class="card-field__value">
52600
+ @if (column.cellTemplate) {
52601
+ <ng-container
52602
+ *ngTemplateOutlet="
52603
+ column.cellTemplate;
52604
+ context: { row, column, value: getCellValue(row, column) }
52605
+ "
52606
+ ></ng-container>
52607
+ } @else {
52608
+ {{ getFormattedValue(row, column) }}
52609
+ }
52610
+ </span>
52611
+ </div>
52612
+ }
52613
+ }
52614
+ } @else {
52615
+ @for (column of visibleColumns; track column.key) {
52616
+ <div class="card-field">
52617
+ <span class="card-field__label">{{ column.label }}</span>
52618
+ <span class="card-field__value">
52619
+ @if (column.cellTemplate) {
52620
+ <ng-container
52621
+ *ngTemplateOutlet="
52622
+ column.cellTemplate;
52623
+ context: { row, column, value: getCellValue(row, column) }
52624
+ "
52625
+ ></ng-container>
52626
+ } @else {
52627
+ {{ getFormattedValue(row, column) }}
52628
+ }
52629
+ </span>
52630
+ </div>
52631
+ }
52040
52632
  }
52041
52633
  </div>
52042
52634
 
@@ -52125,7 +52717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
52125
52717
  </div>
52126
52718
  }
52127
52719
  </div>
52128
- `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"] }]
52720
+ `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.data-table-container{--dt-elevation-none: none;--dt-elevation-low: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--dt-primary: var(--ion-color-primary, #4f46e5);--dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);--dt-surface: var(--ion-background-color, #ffffff);--dt-surface-variant: #f8fafc;--dt-border: #e2e8f0;--dt-text-primary: #1e293b;--dt-text-secondary: #64748b;--dt-text-muted: #94a3b8;--dt-gradient-start: #6366f1;--dt-gradient-end: #8b5cf6;--dt-border-radius: 16px;--dt-cell-padding-x: 16px;--dt-cell-padding-y: 14px;--dt-header-padding-y: 12px}.data-table-container{position:relative;background:var(--dt-surface);border-radius:var(--dt-border-radius);box-shadow:var(--dt-elevation-medium);border:1px solid var(--dt-border);overflow:hidden}.data-table-container.elevation-none{box-shadow:var(--dt-elevation-none)}.data-table-container.elevation-low{box-shadow:var(--dt-elevation-low)}.data-table-container.elevation-high{box-shadow:var(--dt-elevation-high)}.data-table-container.header-gradient:before{content:\"\";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dt-gradient-start),var(--dt-gradient-end));border-radius:var(--dt-border-radius) var(--dt-border-radius) 0 0;z-index:2}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.loading-overlay ion-spinner{--color: var(--dt-primary);width:32px;height:32px}.loading-message{font-size:.875rem;font-weight:500;color:var(--dt-text-secondary)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.5;pointer-events:none}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--dt-surface-variant);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--dt-border);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--dt-text-muted)}table{width:100%;border-collapse:collapse;font-size:.875rem}th,td{padding:var(--dt-cell-padding-y) var(--dt-cell-padding-x);text-align:left;vertical-align:middle}thead{background:var(--dt-surface-variant)}thead th{font-weight:600;font-size:.8125rem;color:var(--dt-text-secondary);white-space:nowrap;position:relative;border-bottom:1px solid var(--dt-border);padding:var(--dt-header-padding-y) var(--dt-cell-padding-x);transition:all .2s ease}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}thead th.sortable:hover{background:#00000008;color:var(--dt-text-primary)}thead th.sorted{color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04)}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0;opacity:.4;transition:opacity .2s ease}.sortable:hover .sort-icons{opacity:.7}.sorted .sort-icons{opacity:1}.sort-icons ion-icon{font-size:.75rem;color:var(--dt-text-muted);margin:-3px 0;transition:all .2s ease}.sort-icons ion-icon.active{color:var(--dt-primary);transform:scale(1.2)}tbody tr{border-bottom:1px solid var(--dt-border)}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--dt-primary-rgb),.06)}tbody td{color:var(--dt-text-primary);font-size:.875rem}.hoverable tbody tr:hover:not(.empty-row){background:var(--dt-surface-variant)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--dt-primary-rgb),.08)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:52px;min-width:52px;max-width:52px;text-align:center;padding:8px 12px;box-sizing:border-box}.selection-cell ion-checkbox{--size: 20px;--border-radius: 50%;--border-width: 2px;--border-color: var(--dt-border);--border-color-checked: var(--dt-primary);--background: transparent;--background-checked: var(--dt-primary);--checkmark-color: white;--checkmark-width: 2px;margin:0;display:block}.selection-cell ion-checkbox::part(container){border-radius:50%}.selection-cell input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:var(--dt-primary);margin:0;display:block}.checkbox-circular .selection-cell ion-checkbox{--border-radius: 50%}.checkbox-circular .selection-cell ion-checkbox::part(container){border-radius:50%}.row-number-cell{width:60px;text-align:center;color:var(--dt-text-muted);font-size:.75rem;font-weight:500}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1;box-shadow:2px 0 4px #0000000d}.sticky-end{position:sticky;right:0;background:inherit;z-index:1;box-shadow:-2px 0 4px #0000000d}.empty-row td{padding:64px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dt-text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:20px;opacity:.4;color:var(--dt-text-muted)}.empty-title{font-size:1.125rem;font-weight:600;margin:0 0 8px;color:var(--dt-text-primary)}.empty-description{font-size:.875rem;margin:0;max-width:320px;color:var(--dt-text-secondary);line-height:1.5}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:20px;font-size:.875rem;color:var(--dt-text-secondary)}.pagination-info span{font-weight:500}.page-size-select{--padding-start: 12px;--padding-end: 12px;font-size:.875rem;min-width:140px;--background: var(--dt-surface-variant);--border-radius: 8px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-controls ion-button{--padding-start: 10px;--padding-end: 10px;--border-radius: 8px;--background: var(--dt-surface-variant);--background-hover: var(--dt-border);--color: var(--dt-text-secondary);--color-hover: var(--dt-text-primary);margin:0;height:36px;min-width:36px}.pagination-controls ion-button:disabled{opacity:.4}.pagination-controls ion-button ion-icon{font-size:1rem}.page-indicator{padding:0 16px;font-size:.875rem;color:var(--dt-text-primary);font-weight:600;background:var(--dt-surface-variant);border-radius:8px;height:36px;display:flex;align-items:center;min-width:80px;justify-content:center}.bordered th,.bordered td{border:1px solid var(--dt-border)}.striped tbody tr:nth-child(2n){background:var(--dt-surface-variant)}.striped tbody tr:nth-child(2n).selected{background:rgba(var(--dt-primary-rgb),.08)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--dt-border)}.size-small{--dt-cell-padding-x: 12px;--dt-cell-padding-y: 10px;--dt-header-padding-y: 10px}.size-small th,.size-small td{font-size:.8125rem}.size-small thead th{font-size:.75rem}.size-small .selection-cell{width:44px;padding:6px 8px}.size-small .selection-cell ion-checkbox{--size: 18px}.size-small .row-number-cell{width:48px;font-size:.6875rem}.size-small .pagination-container{padding:12px 16px}.size-small .pagination-info,.size-small .page-indicator{font-size:.8125rem}.size-small .pagination-controls ion-button{height:32px;min-width:32px}.size-small .page-indicator{height:32px;min-width:70px}.size-large{--dt-cell-padding-x: 20px;--dt-cell-padding-y: 18px;--dt-header-padding-y: 16px}.size-large th,.size-large td{font-size:.9375rem}.size-large thead th{font-size:.875rem}.size-large .selection-cell{width:60px;padding:12px 16px}.size-large .selection-cell ion-checkbox{--size: 24px}.size-large .row-number-cell{width:72px;font-size:.875rem}.size-large .pagination-container{padding:20px 24px}.size-large .pagination-info,.size-large .page-indicator{font-size:.9375rem}.size-large .pagination-controls ion-button{height:40px;min-width:40px}.size-large .page-indicator{height:40px;min-width:90px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.data-table-container{--dt-border-radius: 12px}.pagination-container{flex-direction:column;align-items:stretch;gap:12px}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch;padding:16px}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap;letter-spacing:.025em}.status-badge--success{background:#dcfce7;color:#15803d}.status-badge--warning{background:#fef3c7;color:#b45309}.status-badge--danger{background:#fee2e2;color:#dc2626}.status-badge--primary{background:#e0e7ff;color:#4338ca}.status-badge--secondary{background:#f1f5f9;color:#475569}.status-badge--medium{background:#f1f5f9;color:#64748b}.status-badge--tertiary{background:#f3e8ff;color:#7c3aed}.status-badge--filled.status-badge--success{background:#22c55e;color:#fff}.status-badge--filled.status-badge--warning{background:#f59e0b;color:#fff}.status-badge--filled.status-badge--danger{background:#ef4444;color:#fff}.status-badge--filled.status-badge--primary{background:var(--dt-primary);color:#fff}.status-badge--outlined{background:transparent;border:1.5px solid currentColor}.status-badge--outlined.status-badge--success{color:#16a34a}.status-badge--outlined.status-badge--warning{color:#d97706}.status-badge--outlined.status-badge--danger{color:#dc2626}.status-badge--outlined.status-badge--primary{color:var(--dt-primary)}.action-buttons{display:flex;gap:6px;justify-content:center}.action-buttons ion-button{--padding-start: 8px;--padding-end: 8px;--border-radius: 8px;margin:0}.action-buttons ion-button ion-icon{font-size:1.125rem}.card-list{display:none;padding:12px;gap:12px}.data-card{background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.data-card.selected{border-color:var(--dt-primary);background:rgba(var(--dt-primary-rgb),.04);box-shadow:0 0 0 1px var(--dt-primary)}.data-card.clickable{cursor:pointer}.data-card.clickable:hover{box-shadow:var(--dt-elevation-medium);transform:translateY(-2px)}.data-card.clickable:active{transform:translateY(0)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--dt-border)}.card-selection{display:flex;align-items:center}.card-selection ion-checkbox,.card-selection input[type=radio]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.card-body{display:flex;flex-direction:column;gap:12px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card-field__label{font-size:.75rem;font-weight:600;color:var(--dt-text-muted);flex-shrink:0}.card-field__value{font-size:.875rem;color:var(--dt-text-primary);text-align:right;word-break:break-word;font-weight:500}.card-field--primary .card-field__label{color:var(--dt-text-primary)}.card-field--primary .card-field__value{font-size:1rem;font-weight:600}.card-field--secondary .card-field__label,.card-field--status .card-field__label{color:var(--dt-text-muted)}.card-field--status .card-field__value{font-size:.8125rem;font-weight:600}.card-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--dt-border)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}:host-context(body.dark) .data-table-container,:host-context(.dark) .data-table-container,:host-context(.ion-palette-dark) .data-table-container,:host-context(html.ion-palette-dark) .data-table-container,:host-context([data-theme=dark]) .data-table-container{--dt-surface: #1e293b;--dt-surface-variant: #334155;--dt-border: #475569;--dt-text-primary: #f1f5f9;--dt-text-secondary: #94a3b8;--dt-text-muted: #64748b}:host-context(body.dark) .loading-overlay,:host-context(.dark) .loading-overlay,:host-context(.ion-palette-dark) .loading-overlay,:host-context(html.ion-palette-dark) .loading-overlay,:host-context([data-theme=dark]) .loading-overlay{background:#1e293be6}:host-context(body.dark) .status-badge--success,:host-context(.dark) .status-badge--success,:host-context(.ion-palette-dark) .status-badge--success,:host-context(html.ion-palette-dark) .status-badge--success,:host-context([data-theme=dark]) .status-badge--success{background:#22c55e33;color:#4ade80}:host-context(body.dark) .status-badge--warning,:host-context(.dark) .status-badge--warning,:host-context(.ion-palette-dark) .status-badge--warning,:host-context(html.ion-palette-dark) .status-badge--warning,:host-context([data-theme=dark]) .status-badge--warning{background:#f59e0b33;color:#fbbf24}:host-context(body.dark) .status-badge--danger,:host-context(.dark) .status-badge--danger,:host-context(.ion-palette-dark) .status-badge--danger,:host-context(html.ion-palette-dark) .status-badge--danger,:host-context([data-theme=dark]) .status-badge--danger{background:#ef444433;color:#f87171}:host-context(body.dark) .status-badge--primary,:host-context(.dark) .status-badge--primary,:host-context(.ion-palette-dark) .status-badge--primary,:host-context(html.ion-palette-dark) .status-badge--primary,:host-context([data-theme=dark]) .status-badge--primary{background:#6366f133;color:#a5b4fc}\n"] }]
52129
52721
  }], propDecorators: { props: [{
52130
52722
  type: Input
52131
52723
  }], rowClick: [{