From f86db1556c321f122dc25524e6e17703a6c0e2ac Mon Sep 17 00:00:00 2001 From: Josep Piguillem Date: Thu, 6 Aug 2026 18:10:55 +0200 Subject: [PATCH] new components --- apps/playground/src/app/app.config.ts | 1 + apps/playground/src/app/app.html | 2 + apps/playground/src/app/app.routes.ts | 22 + apps/playground/src/app/app.ts | 13 +- .../src/app/pages/catalog/catalog.page.html | 210 +++++- .../src/app/pages/catalog/catalog.page.scss | 54 ++ .../src/app/pages/catalog/catalog.page.ts | 204 ++++- .../examples/dashboard/dashboard.page.html | 193 +++++ .../examples/dashboard/dashboard.page.scss | 222 ++++++ .../examples/dashboard/dashboard.page.ts | 239 ++++++ .../pages/examples/landing/landing.page.html | 242 ++++++ .../pages/examples/landing/landing.page.scss | 409 ++++++++++ .../pages/examples/landing/landing.page.ts | 220 ++++++ .../app/pages/examples/login/login.page.html | 92 +++ .../app/pages/examples/login/login.page.scss | 179 +++++ .../app/pages/examples/login/login.page.ts | 68 ++ apps/playground/src/styles.scss | 41 + libs/ui/README.md | 65 ++ libs/ui/TOKENS.md | 247 ++++++ libs/ui/TOKENS.pdf | Bin 0 -> 531372 bytes libs/ui/docs/theming.html | 706 ++++++++++++++++++ libs/ui/docs/theming.pdf | Bin 329615 -> 670112 bytes libs/ui/src/index.ts | 8 + .../styles/common/vendors/_mat-dialog.scss | 4 +- .../lib/styles/common/vendors/_mat-hub.scss | 27 + .../styles/common/vendors/_mat-snackbar.scss | 6 +- .../styles/common/vendors/_mat-tooltip.scss | 4 +- .../src/lib/styles/common/vendors/index.scss | 1 + libs/ui/src/lib/styles/themes/_minimal.scss | 8 + .../directives/accordion-content.directive.ts | 20 +- .../styles/_horizontal-accordion.scss | 7 +- .../accordion/styles/_vertical-accordion.scss | 28 +- .../accordion/styles/accordion.component.scss | 12 +- .../avatar-group/avatar-group.component.html | 13 + .../avatar-group/avatar-group.component.scss | 54 ++ .../avatar-group.component.spec.ts | 75 ++ .../avatar-group/avatar-group.component.ts | 55 ++ .../ui/avatar/avatar/avatar.component.spec.ts | 81 ++ libs/ui/src/lib/ui/avatar/index.ts | 1 + .../ui/badge/badge/badge.component.spec.ts | 87 +++ .../breadcrumb/breadcrumb.component.html | 16 + .../breadcrumb/breadcrumb.component.scss | 40 + .../breadcrumb/breadcrumb.component.spec.ts | 62 ++ .../breadcrumb/breadcrumb.component.ts | 32 + libs/ui/src/lib/ui/breadcrumb/index.ts | 1 + .../lib/ui/button/base-button.component.ts | 2 +- .../ui/src/lib/ui/card/base-card.component.ts | 8 +- .../src/lib/ui/carousel/carousel.directive.ts | 2 +- .../carousel/carousel/carousel.component.html | 2 +- .../carousel/carousel/carousel.component.ts | 112 +-- .../bar-chart.component.html} | 2 +- .../chart/bar-chart/bar-chart.component.scss | 7 + .../ui/chart/bar-chart/bar-chart.component.ts | 42 ++ .../lib/ui/chart/base-arc-chart.component.ts | 72 ++ .../chart/base-cartesian-chart.component.ts | 113 +++ .../src/lib/ui/chart/base-chart.component.ts | 39 + libs/ui/src/lib/ui/chart/chart.configs.ts | 26 +- .../lib/ui/chart/chart/chart.component.scss | 34 - .../src/lib/ui/chart/chart/chart.component.ts | 184 ----- .../doughnut-chart.component.html | 3 + .../doughnut-chart.component.scss | 7 + .../doughnut-chart.component.ts | 27 + .../gauge-chart/gauge-chart.component.html | 11 + .../gauge-chart/gauge-chart.component.scss | 35 + .../gauge-chart/gauge-chart.component.ts | 65 ++ libs/ui/src/lib/ui/chart/index.ts | 11 +- .../line-chart/line-chart.component.html | 9 + .../line-chart/line-chart.component.scss | 7 + .../chart/line-chart/line-chart.component.ts | 73 ++ .../chart/pie-chart/pie-chart.component.html | 3 + .../chart/pie-chart/pie-chart.component.scss | 7 + .../ui/chart/pie-chart/pie-chart.component.ts | 21 + .../radar-chart/radar-chart.component.html | 9 + .../radar-chart/radar-chart.component.scss | 7 + .../radar-chart/radar-chart.component.ts | 106 +++ .../lib/ui/chart/styles/_chart-canvas.scss | 41 + .../data-table-item.component.ts | 2 +- .../ui/drawer/drawer/drawer.component.spec.ts | 115 +++ .../lib/ui/drawer/entities/drawer.model.ts | 2 +- .../empty-state/empty-state.component.html | 6 + .../empty-state/empty-state.component.scss | 23 + .../empty-state/empty-state.component.spec.ts | 56 ++ .../empty-state/empty-state.component.ts | 27 + libs/ui/src/lib/ui/empty-state/index.ts | 1 + .../autocomplete-field.component.html | 50 ++ .../autocomplete-field.component.scss | 40 + .../autocomplete-field.component.ts | 126 ++++ .../date-range-field.component.html | 36 + .../date-range-field.component.ts | 67 ++ libs/ui/src/lib/ui/form-field/index.ts | 2 + .../ui/src/lib/ui/hub/entities/hub-configs.ts | 43 ++ libs/ui/src/lib/ui/hub/entities/hub.model.ts | 6 + libs/ui/src/lib/ui/hub/hub/hub.component.html | 12 + libs/ui/src/lib/ui/hub/hub/hub.component.scss | 30 + .../src/lib/ui/hub/hub/hub.component.spec.ts | 115 +++ libs/ui/src/lib/ui/hub/hub/hub.component.ts | 31 + libs/ui/src/lib/ui/hub/index.ts | 9 + libs/ui/src/lib/ui/hub/utils.ts | 16 + .../src/lib/ui/icon/icon/icon.component.html | 2 +- .../src/lib/ui/icon/icon/icon.component.scss | 24 +- .../ui/src/lib/ui/icon/icon/icon.component.ts | 2 +- .../src/lib/ui/modal/entities/modal.model.ts | 4 +- .../snack-bar/snack-bar.component.scss | 2 +- .../src/lib/ui/panel/base-panel.component.ts | 4 +- .../lib/ui/popover/popover.directive.spec.ts | 233 ++++++ libs/ui/src/lib/ui/progress/index.ts | 2 + .../loader-bar/loader-bar.component.html | 3 + .../loader-bar/loader-bar.component.scss | 12 + .../loader-bar/loader-bar.component.spec.ts | 57 ++ .../loader-bar/loader-bar.component.ts | 33 + libs/ui/src/lib/ui/rating/index.ts | 1 + .../ui/rating/rating/rating.component.html | 25 + .../ui/rating/rating/rating.component.scss | 35 + .../ui/rating/rating/rating.component.spec.ts | 175 +++++ .../lib/ui/rating/rating/rating.component.ts | 110 +++ libs/ui/src/lib/ui/segmented-control/index.ts | 1 + .../segmented-control.component.html | 11 + .../segmented-control.component.scss | 22 + .../segmented-control.component.spec.ts | 66 ++ .../segmented-control.component.ts | 41 + .../lib/ui/select/base-select.component.ts | 13 +- .../lib/ui/select/entities/select.model.ts | 1 + .../select-carousel.component.ts | 3 - .../select-multiple.component.ts | 8 +- .../lib/ui/select/select-option/_color.scss | 15 +- .../select-period/select-period.component.ts | 3 - .../lib/ui/select/select/select.component.ts | 3 - libs/ui/src/lib/ui/stat-card/index.ts | 1 + .../stat-card/stat-card.component.html | 19 + .../stat-card/stat-card.component.scss | 59 ++ .../stat-card/stat-card.component.ts | 34 + libs/ui/src/lib/ui/tab/tab.directive.ts | 4 +- libs/ui/src/lib/ui/tab/tab/tab.component.html | 8 +- libs/ui/src/lib/ui/tab/tab/tab.component.scss | 8 +- libs/ui/src/lib/ui/tab/tab/tab.component.ts | 63 +- libs/ui/src/lib/ui/timeline/index.ts | 1 + .../timeline/timeline/timeline.component.html | 16 + .../timeline/timeline/timeline.component.scss | 71 ++ .../timeline/timeline.component.spec.ts | 53 ++ .../timeline/timeline/timeline.component.ts | 23 + .../ui/src/lib/ui/tree/entities/tree.model.ts | 6 + libs/ui/src/lib/ui/tree/index.ts | 6 + .../tree/tree-node/tree-node.component.html | 42 ++ .../tree/tree-node/tree-node.component.scss | 41 + .../ui/tree/tree-node/tree-node.component.ts | 47 ++ .../src/lib/ui/tree/tree/tree.component.html | 9 + .../src/lib/ui/tree/tree/tree.component.scss | 3 + .../ui/src/lib/ui/tree/tree/tree.component.ts | 18 + libs/ui/src/lib/util/models/chart-data.ts | 17 +- 149 files changed, 7038 insertions(+), 395 deletions(-) create mode 100644 apps/playground/src/app/pages/examples/dashboard/dashboard.page.html create mode 100644 apps/playground/src/app/pages/examples/dashboard/dashboard.page.scss create mode 100644 apps/playground/src/app/pages/examples/dashboard/dashboard.page.ts create mode 100644 apps/playground/src/app/pages/examples/landing/landing.page.html create mode 100644 apps/playground/src/app/pages/examples/landing/landing.page.scss create mode 100644 apps/playground/src/app/pages/examples/landing/landing.page.ts create mode 100644 apps/playground/src/app/pages/examples/login/login.page.html create mode 100644 apps/playground/src/app/pages/examples/login/login.page.scss create mode 100644 apps/playground/src/app/pages/examples/login/login.page.ts create mode 100644 libs/ui/TOKENS.md create mode 100644 libs/ui/TOKENS.pdf create mode 100644 libs/ui/docs/theming.html create mode 100644 libs/ui/src/lib/styles/common/vendors/_mat-hub.scss create mode 100644 libs/ui/src/lib/ui/avatar/avatar-group/avatar-group.component.html create mode 100644 libs/ui/src/lib/ui/avatar/avatar-group/avatar-group.component.scss create mode 100644 libs/ui/src/lib/ui/avatar/avatar-group/avatar-group.component.spec.ts create mode 100644 libs/ui/src/lib/ui/avatar/avatar-group/avatar-group.component.ts create mode 100644 libs/ui/src/lib/ui/avatar/avatar/avatar.component.spec.ts create mode 100644 libs/ui/src/lib/ui/badge/badge/badge.component.spec.ts create mode 100644 libs/ui/src/lib/ui/breadcrumb/breadcrumb/breadcrumb.component.html create mode 100644 libs/ui/src/lib/ui/breadcrumb/breadcrumb/breadcrumb.component.scss create mode 100644 libs/ui/src/lib/ui/breadcrumb/breadcrumb/breadcrumb.component.spec.ts create mode 100644 libs/ui/src/lib/ui/breadcrumb/breadcrumb/breadcrumb.component.ts create mode 100644 libs/ui/src/lib/ui/breadcrumb/index.ts rename libs/ui/src/lib/ui/chart/{chart/chart.component.html => bar-chart/bar-chart.component.html} (82%) create mode 100644 libs/ui/src/lib/ui/chart/bar-chart/bar-chart.component.scss create mode 100644 libs/ui/src/lib/ui/chart/bar-chart/bar-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/base-arc-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/base-cartesian-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/base-chart.component.ts delete mode 100644 libs/ui/src/lib/ui/chart/chart/chart.component.scss delete mode 100644 libs/ui/src/lib/ui/chart/chart/chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/doughnut-chart/doughnut-chart.component.html create mode 100644 libs/ui/src/lib/ui/chart/doughnut-chart/doughnut-chart.component.scss create mode 100644 libs/ui/src/lib/ui/chart/doughnut-chart/doughnut-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/gauge-chart/gauge-chart.component.html create mode 100644 libs/ui/src/lib/ui/chart/gauge-chart/gauge-chart.component.scss create mode 100644 libs/ui/src/lib/ui/chart/gauge-chart/gauge-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/line-chart/line-chart.component.html create mode 100644 libs/ui/src/lib/ui/chart/line-chart/line-chart.component.scss create mode 100644 libs/ui/src/lib/ui/chart/line-chart/line-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/pie-chart/pie-chart.component.html create mode 100644 libs/ui/src/lib/ui/chart/pie-chart/pie-chart.component.scss create mode 100644 libs/ui/src/lib/ui/chart/pie-chart/pie-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/radar-chart/radar-chart.component.html create mode 100644 libs/ui/src/lib/ui/chart/radar-chart/radar-chart.component.scss create mode 100644 libs/ui/src/lib/ui/chart/radar-chart/radar-chart.component.ts create mode 100644 libs/ui/src/lib/ui/chart/styles/_chart-canvas.scss create mode 100644 libs/ui/src/lib/ui/drawer/drawer/drawer.component.spec.ts create mode 100644 libs/ui/src/lib/ui/empty-state/empty-state/empty-state.component.html create mode 100644 libs/ui/src/lib/ui/empty-state/empty-state/empty-state.component.scss create mode 100644 libs/ui/src/lib/ui/empty-state/empty-state/empty-state.component.spec.ts create mode 100644 libs/ui/src/lib/ui/empty-state/empty-state/empty-state.component.ts create mode 100644 libs/ui/src/lib/ui/empty-state/index.ts create mode 100644 libs/ui/src/lib/ui/form-field/autocomplete-field/autocomplete-field.component.html create mode 100644 libs/ui/src/lib/ui/form-field/autocomplete-field/autocomplete-field.component.scss create mode 100644 libs/ui/src/lib/ui/form-field/autocomplete-field/autocomplete-field.component.ts create mode 100644 libs/ui/src/lib/ui/form-field/date-range-field/date-range-field.component.html create mode 100644 libs/ui/src/lib/ui/form-field/date-range-field/date-range-field.component.ts create mode 100644 libs/ui/src/lib/ui/hub/entities/hub-configs.ts create mode 100644 libs/ui/src/lib/ui/hub/entities/hub.model.ts create mode 100644 libs/ui/src/lib/ui/hub/hub/hub.component.html create mode 100644 libs/ui/src/lib/ui/hub/hub/hub.component.scss create mode 100644 libs/ui/src/lib/ui/hub/hub/hub.component.spec.ts create mode 100644 libs/ui/src/lib/ui/hub/hub/hub.component.ts create mode 100644 libs/ui/src/lib/ui/hub/index.ts create mode 100644 libs/ui/src/lib/ui/hub/utils.ts create mode 100644 libs/ui/src/lib/ui/popover/popover.directive.spec.ts create mode 100644 libs/ui/src/lib/ui/progress/loader-bar/loader-bar.component.html create mode 100644 libs/ui/src/lib/ui/progress/loader-bar/loader-bar.component.scss create mode 100644 libs/ui/src/lib/ui/progress/loader-bar/loader-bar.component.spec.ts create mode 100644 libs/ui/src/lib/ui/progress/loader-bar/loader-bar.component.ts create mode 100644 libs/ui/src/lib/ui/rating/index.ts create mode 100644 libs/ui/src/lib/ui/rating/rating/rating.component.html create mode 100644 libs/ui/src/lib/ui/rating/rating/rating.component.scss create mode 100644 libs/ui/src/lib/ui/rating/rating/rating.component.spec.ts create mode 100644 libs/ui/src/lib/ui/rating/rating/rating.component.ts create mode 100644 libs/ui/src/lib/ui/segmented-control/index.ts create mode 100644 libs/ui/src/lib/ui/segmented-control/segmented-control/segmented-control.component.html create mode 100644 libs/ui/src/lib/ui/segmented-control/segmented-control/segmented-control.component.scss create mode 100644 libs/ui/src/lib/ui/segmented-control/segmented-control/segmented-control.component.spec.ts create mode 100644 libs/ui/src/lib/ui/segmented-control/segmented-control/segmented-control.component.ts create mode 100644 libs/ui/src/lib/ui/stat-card/index.ts create mode 100644 libs/ui/src/lib/ui/stat-card/stat-card/stat-card.component.html create mode 100644 libs/ui/src/lib/ui/stat-card/stat-card/stat-card.component.scss create mode 100644 libs/ui/src/lib/ui/stat-card/stat-card/stat-card.component.ts create mode 100644 libs/ui/src/lib/ui/timeline/index.ts create mode 100644 libs/ui/src/lib/ui/timeline/timeline/timeline.component.html create mode 100644 libs/ui/src/lib/ui/timeline/timeline/timeline.component.scss create mode 100644 libs/ui/src/lib/ui/timeline/timeline/timeline.component.spec.ts create mode 100644 libs/ui/src/lib/ui/timeline/timeline/timeline.component.ts create mode 100644 libs/ui/src/lib/ui/tree/entities/tree.model.ts create mode 100644 libs/ui/src/lib/ui/tree/index.ts create mode 100644 libs/ui/src/lib/ui/tree/tree-node/tree-node.component.html create mode 100644 libs/ui/src/lib/ui/tree/tree-node/tree-node.component.scss create mode 100644 libs/ui/src/lib/ui/tree/tree-node/tree-node.component.ts create mode 100644 libs/ui/src/lib/ui/tree/tree/tree.component.html create mode 100644 libs/ui/src/lib/ui/tree/tree/tree.component.scss create mode 100644 libs/ui/src/lib/ui/tree/tree/tree.component.ts diff --git a/apps/playground/src/app/app.config.ts b/apps/playground/src/app/app.config.ts index ce1cd7e..d2ded9c 100644 --- a/apps/playground/src/app/app.config.ts +++ b/apps/playground/src/app/app.config.ts @@ -32,6 +32,7 @@ const TRANSLATIONS: TranslationObject = { reset: 'Borrar', search: 'Buscar…', noResults: 'Sin resultados', + legend: 'Leyenda', validator: { requiredField: 'Este campo es obligatorio', onlyNumbers: 'Sólo se admiten números', diff --git a/apps/playground/src/app/app.html b/apps/playground/src/app/app.html index a812adf..3497039 100644 --- a/apps/playground/src/app/app.html +++ b/apps/playground/src/app/app.html @@ -1,3 +1,5 @@ + +