From c15ccea1035eca52ce40f653504e5233b35ec768 Mon Sep 17 00:00:00 2001 From: Josep Piguillem Date: Mon, 27 Jul 2026 23:57:22 +0200 Subject: [PATCH] fix: elimina los ultimos errores de estrictez y normaliza a LF --- libs/ui/src/lib/styles/animations.ts | 92 +- .../common/abstracts/_pi-color-variables.scss | 684 +++--- .../abstracts/_pi-font-sizes-variables.scss | 48 +- .../abstracts/_pi-global-variables.scss | 240 +-- .../abstracts/_pi-gradient-variables.scss | 480 ++--- .../abstracts/_pi-public-variables.scss | 44 +- .../lib/styles/common/abstracts/index.scss | 10 +- .../src/lib/styles/common/base/_pi-reset.scss | 1188 +++++------ .../styles/common/base/_pi-tipography.scss | 238 +-- libs/ui/src/lib/styles/common/base/index.scss | 4 +- .../common/components/_pi-accordion.scss | 232 +-- .../styles/common/components/_pi-card.scss | 1090 +++++----- .../styles/common/components/_pi-divider.scss | 210 +- .../common/components/_pi-headline.scss | 142 +- .../common/components/_pi-list-item.scss | 354 ++-- .../styles/common/components/_pi-note.scss | 232 +-- .../styles/common/components/_pi-panel.scss | 930 ++++----- .../styles/common/components/_pi-spinner.scss | 44 +- .../common/components/_pi-text-viewer.scss | 70 +- .../styles/common/components/_pi-text.scss | 1034 ++++----- .../lib/styles/common/components/index.scss | 30 +- .../pi-button/_pi-button-private.scss | 568 ++--- .../pi-button/_pi-button-public.scss | 1474 ++++++------- .../components/pi-button/_pi-button.scss | 408 ++-- .../common/components/pi-button/index.scss | 6 +- .../components/pi-data-grid/_appearance.scss | 150 +- .../pi-data-grid/_base-data-grid.scss | 522 ++--- .../components/pi-data-grid/_card-type.scss | 308 +-- .../pi-data-grid/_data-direction.scss | 304 +-- .../common/components/pi-data-grid/_mode.scss | 46 +- .../common/components/pi-data-grid/index.scss | 10 +- .../pi-field/_pi-field-incremental.scss | 570 ++--- .../pi-field/_pi-field-password.scss | 38 +- .../pi-field/_pi-field-textarea.scss | 164 +- .../common/components/pi-field/_pi-field.scss | 362 ++-- .../common/components/pi-field/index.scss | 8 +- libs/ui/src/lib/styles/common/index.scss | 64 +- .../common/layouts/_pi-09-pricing-layout.scss | 1842 ++++++++--------- .../common/layouts/_pi-container-layout.scss | 128 +- .../lib/styles/common/layouts/_pi-layout.scss | 130 +- .../src/lib/styles/common/layouts/index.scss | 6 +- .../styles/common/vendors/_ch2-button.scss | 542 ++--- .../styles/common/vendors/_mat-checkbox.scss | 354 ++-- .../lib/styles/common/vendors/_mat-chip.scss | 98 +- .../styles/common/vendors/_mat-dialog.scss | 584 +++--- .../common/vendors/_mat-expansion-panel.scss | 26 +- .../common/vendors/_mat-form-field.scss | 856 ++++---- .../lib/styles/common/vendors/_mat-menu.scss | 104 +- .../common/vendors/_mat-progress-bar.scss | 52 +- .../common/vendors/_mat-progress-spinner.scss | 10 +- .../common/vendors/_mat-radio-button.scss | 478 ++--- .../styles/common/vendors/_mat-slider.scss | 298 +-- .../styles/common/vendors/_mat-snackbar.scss | 202 +- .../styles/common/vendors/_mat-tooltip.scss | 162 +- .../styles/common/vendors/_ngx-slider.scss | 112 +- .../lib/styles/common/vendors/_typeform.scss | 16 +- .../src/lib/styles/common/vendors/index.scss | 30 +- .../common/wrappers/_pi-action-wrapper.scss | 792 +++---- .../common/wrappers/_pi-form-wrapper.scss | 256 +-- .../common/wrappers/_pi-grid-wrapper.scss | 1032 ++++----- .../common/wrappers/_pi-header-wrapper.scss | 576 +++--- .../common/wrappers/_pi-list-wrapper.scss | 308 +-- .../common/wrappers/_pi-main-wrapper.scss | 328 +-- .../styles/common/wrappers/_pi-wrapper.scss | 594 +++--- .../src/lib/styles/common/wrappers/index.scss | 14 +- libs/ui/src/lib/styles/configs.ts | 362 ++-- libs/ui/src/lib/styles/deale-saas/index.scss | 8 +- .../layouts/_pi-00-authentication-layout.scss | 660 +++--- .../_pi-00a-authentication-layout-auth.scss | 166 +- ...uthentication-layout-recover-password.scss | 56 +- ...0c-authentication-layout-user-profile.scss | 218 +- ...d-authentication-layout-default-space.scss | 82 +- ...e-authentication-layout-impersonation.scss | 56 +- .../layouts/_pi-01-dashboard-layout-old.scss | 478 ++--- .../layouts/_pi-01-dashboard-layout.scss | 94 +- .../_pi-01a-dashboard-layout-company.scss | 646 +++--- .../layouts/_pi-02-full-width-layout.scss | 278 +-- .../_pi-02a-full-width-auto-layout.scss | 40 +- .../_pi-03-vertically-centered-layout.scss | 204 +- .../layouts/_pi-04-space-between-layout.scss | 16 +- .../layouts/_pi-05-splitted-layout.scss | 142 +- .../_pi-05a-splitted-paywall-layout.scss | 826 ++++---- .../layouts/_pi-06-edge-to-edge-layout.scss | 104 +- .../layouts/_pi-07-list-layout.scss | 442 ++-- .../layouts/_pi-07a-list-auto-layout.scss | 36 +- .../layouts/_pi-08-form-layout.scss | 38 +- .../layouts/_pi-container-layout.scss | 6 +- .../styles/deale-saas/layouts/_pi-layout.scss | 406 ++-- .../lib/styles/deale-saas/layouts/index.scss | 36 +- .../styles/deale-saas/shell/_pi-aside.scss | 722 +++---- .../styles/deale-saas/shell/_pi-header.scss | 738 +++---- .../lib/styles/deale-saas/shell/_pi-main.scss | 310 +-- .../lib/styles/deale-saas/shell/_pi-menu.scss | 1230 +++++------ .../styles/deale-saas/shell/_pi-navbar.scss | 560 ++--- .../lib/styles/deale-saas/shell/index.scss | 10 +- .../theming/_pi-user-type-theming.scss | 586 +++--- .../lib/styles/deale-saas/theming/index.scss | 2 +- .../wrappers/_pi-header-wrapper.scss | 92 +- .../deale-saas/wrappers/_pi-wrapper.scss | 84 +- .../lib/styles/deale-saas/wrappers/index.scss | 4 +- .../deale-website/components/_pi-text.scss | 78 +- .../deale-website/components/index.scss | 2 +- .../src/lib/styles/deale-website/index.scss | 10 +- .../layouts/_pi-02-full-width-layout.scss | 194 +- .../_pi-02a-full-width-auto-layout.scss | 18 +- .../_pi-03-vertically-centered-layout.scss | 234 +-- .../layouts/_pi-06-edge-to-edge-layout.scss | 18 +- ...pi-06b-edge-to-edge-home-users-layout.scss | 114 +- .../layouts/_pi-07-list-layout.scss | 328 +-- .../layouts/_pi-container-layout.scss | 106 +- .../deale-website/layouts/_pi-layout.scss | 66 +- .../styles/deale-website/layouts/index.scss | 16 +- .../screens/_pi-00-thank-you-screen.scss | 198 +- .../styles/deale-website/screens/index.scss | 2 +- .../deale-website/shell/_pi-footer.scss | 386 ++-- .../styles/deale-website/shell/_pi-main.scss | 72 +- .../deale-website/shell/_pi-menu-theming.scss | 864 ++++---- .../styles/deale-website/shell/_pi-menu.scss | 998 ++++----- .../deale-website/shell/_pi-topbar.scss | 648 +++--- .../lib/styles/deale-website/shell/index.scss | 10 +- .../wrappers/_pi-form-wrapper.scss | 124 +- .../wrappers/_pi-header-wrapper.scss | 22 +- .../deale-website/wrappers/_pi-wrapper.scss | 60 +- .../styles/deale-website/wrappers/index.scss | 6 +- libs/ui/src/lib/styles/definitions.ts | 334 +-- libs/ui/src/lib/styles/index.ts | 10 +- .../accordion/accordion.component.html | 312 +-- .../accordion/accordion.component.ts | 198 +- .../directives/accordion-content.directive.ts | 110 +- libs/ui/src/lib/ui/accordion/index.ts | 8 +- .../styles/_horizontal-accordion.scss | 274 +-- .../accordion/styles/_vertical-accordion.scss | 472 ++--- .../accordion/styles/accordion.component.scss | 372 ++-- .../ui/banner/banner/banner.component.html | 54 +- .../ui/banner/banner/banner.component.scss | 276 +-- .../lib/ui/banner/banner/banner.component.ts | 48 +- libs/ui/src/lib/ui/banner/index.ts | 6 +- .../action-button.component.html | 62 +- .../action-button.component.scss | 280 +-- .../action-button/action-button.component.ts | 126 +- .../lib/ui/button/base-button.component.ts | 102 +- libs/ui/src/lib/ui/button/button.directive.ts | 152 +- .../chevron-button.component.html | 2 +- .../chevron-button.component.scss | 74 +- .../chevron-button.component.ts | 28 +- .../close-button/close-button.component.html | 2 +- .../close-button/close-button.component.scss | 280 +-- .../close-button/close-button.component.ts | 32 +- .../button/hamburger/hamburger.component.html | 12 +- .../button/hamburger/hamburger.component.scss | 150 +- .../button/hamburger/hamburger.component.ts | 22 +- .../icon-button/icon-button.component.html | 108 +- .../icon-button/icon-button.component.scss | 378 ++-- .../icon-button/icon-button.component.ts | 114 +- libs/ui/src/lib/ui/button/index.ts | 34 +- .../radio-button/radio-button.component.html | 10 +- .../radio-button/radio-button.component.scss | 156 +- .../radio-button/radio-button.component.ts | 58 +- .../switch-button.component.html | 76 +- .../switch-button.component.scss | 266 +-- .../switch-button/switch-button.component.ts | 66 +- .../switch-button/switch-button.directive.ts | 46 +- .../toggle-button.component.html | 18 +- .../toggle-button.component.scss | 332 +-- .../toggle-button/toggle-button.component.ts | 66 +- .../ui/src/lib/ui/card/base-card.component.ts | 196 +- .../src/lib/ui/card/card/card.component.html | 26 +- .../ui/src/lib/ui/card/card/card.component.ts | 56 +- .../lib/ui/card/directives/card.directive.ts | 48 +- libs/ui/src/lib/ui/card/index.ts | 10 +- .../carousel/carousel/carousel.component.html | 62 +- .../carousel/carousel/carousel.component.scss | 286 +-- .../carousel/carousel/carousel.component.ts | 1072 +++++----- libs/ui/src/lib/ui/carousel/index.ts | 10 +- .../chart-legend/chart-legend.component.html | 18 +- .../chart-legend/chart-legend.component.scss | 246 +-- .../chart-legend/chart-legend.component.ts | 32 +- .../lib/ui/chart/chart/chart.component.html | 18 +- .../lib/ui/chart/chart/chart.component.scss | 68 +- .../src/lib/ui/chart/chart/chart.component.ts | 323 ++- libs/ui/src/lib/ui/chart/index.ts | 14 +- .../ui/src/lib/ui/chip/base-chip.component.ts | 104 +- .../chip-action/chip-action.component.html | 42 +- .../chip-action/chip-action.component.scss | 124 +- .../chip/chip-action/chip-action.component.ts | 86 +- .../chip/chip-date/chip-date.component.html | 10 +- .../chip/chip-date/chip-date.component.scss | 338 +-- .../ui/chip/chip-date/chip-date.component.ts | 120 +- .../chip-status/chip-status.component.html | 12 +- .../chip-status/chip-status.component.scss | 56 +- .../chip/chip-status/chip-status.component.ts | 54 +- .../chip/chip-time/chip-time.component.html | 56 +- .../chip/chip-time/chip-time.component.scss | 308 +-- .../ui/chip/chip-time/chip-time.component.ts | 108 +- .../chip/chip-value/chip-value.component.html | 22 +- .../chip/chip-value/chip-value.component.scss | 416 ++-- .../chip/chip-value/chip-value.component.ts | 54 +- .../src/lib/ui/chip/chip/chip.component.html | 46 +- .../src/lib/ui/chip/chip/chip.component.scss | 74 +- .../ui/src/lib/ui/chip/chip/chip.component.ts | 46 +- .../ui/src/lib/ui/chip/entities/chip.model.ts | 50 +- libs/ui/src/lib/ui/chip/index.ts | 18 +- libs/ui/src/lib/ui/chip/styles/_color.scss | 234 +-- libs/ui/src/lib/ui/chip/styles/_position.scss | 68 +- libs/ui/src/lib/ui/chip/styles/_size.scss | 562 ++--- .../ui/chip/styles/base-chip.component.scss | 150 +- .../src/lib/ui/chip/tile/tile.component.html | 22 +- .../src/lib/ui/chip/tile/tile.component.scss | 254 +-- .../ui/src/lib/ui/chip/tile/tile.component.ts | 48 +- .../data-grid/data-grid.component.html | 184 +- .../data-grid/data-grid.component.ts | 382 ++-- .../ui/data-grid/directives/cell.directive.ts | 50 +- .../directives/grid-item.directive.ts | 68 +- .../ui/data-grid/entities/data-grid.model.ts | 34 +- libs/ui/src/lib/ui/data-grid/index.ts | 14 +- .../base-data-table.component.html | 6 +- .../base-data-table.component.ts | 108 +- .../cell-type/cell-type.component.html | 90 +- .../cell-type/cell-type.component.ts | 60 +- .../data-table-item.component.html | 18 +- .../data-table-item.component.scss | 128 +- .../data-table-item.component.ts | 94 +- .../entities/data-table-item.model.ts | 13 +- libs/ui/src/lib/ui/data-table/index.ts | 14 +- .../ui/divider/divider/divider.component.html | 20 +- .../ui/divider/divider/divider.component.scss | 500 ++--- .../ui/divider/divider/divider.component.ts | 100 +- libs/ui/src/lib/ui/divider/index.ts | 6 +- libs/ui/src/lib/ui/error-status-code/index.ts | 6 +- .../not-found/not-found.component.html | 32 +- .../not-found/not-found.component.ts | 28 +- .../form-field/base-form-field.component.ts | 168 +- .../currency-field.component.html | 48 +- .../currency-field.component.ts | 44 +- .../directives/autofocus.directive.ts | 42 +- .../directives/checkbox-grid.directive.ts | 28 +- .../form-field/directives/label.directive.ts | 48 +- .../directives/radio-grid.directive.ts | 34 +- .../email-field/email-field.component.html | 46 +- .../email-field/email-field.component.ts | 16 +- .../lib/ui/form-field/entities/radio.model.ts | 14 +- .../icon-field/icon-field.component.html | 48 +- .../icon-field/icon-field.component.scss | 32 +- .../icon-field/icon-field.component.ts | 28 +- .../incremental-number-field.component.html | 84 +- .../incremental-number-field.component.ts | 106 +- .../incremental-range-field.component.html | 76 +- .../incremental-range-field.component.ts | 48 +- libs/ui/src/lib/ui/form-field/index.ts | 52 +- .../number-field/number-field.component.html | 52 +- .../number-field/number-field.component.ts | 20 +- .../password-field.component.html | 60 +- .../password-field.component.ts | 20 +- .../phone-field/phone-field.component.html | 44 +- .../phone-field/phone-field.component.ts | 16 +- .../search-field/search-field.component.html | 48 +- .../search-field/search-field.component.scss | 196 +- .../search-field/search-field.component.ts | 172 +- .../slide-toggle/slide-toggle.component.html | 8 +- .../slide-toggle/slide-toggle.component.scss | 132 +- .../slide-toggle/slide-toggle.component.ts | 42 +- .../text-field/text-field.component.html | 42 +- .../text-field/text-field.component.ts | 16 +- .../textarea/textarea.component.html | 46 +- .../form-field/textarea/textarea.component.ts | 20 +- .../src/lib/ui/icon/icon/icon.component.html | 10 +- .../src/lib/ui/icon/icon/icon.component.scss | 490 ++--- .../ui/src/lib/ui/icon/icon/icon.component.ts | 86 +- libs/ui/src/lib/ui/icon/index.ts | 6 +- .../ui/image/background-image.directive.ts | 142 +- .../ui/image/headline/headline.component.html | 42 +- .../ui/image/headline/headline.component.scss | 636 +++--- .../ui/image/headline/headline.component.ts | 100 +- libs/ui/src/lib/ui/image/index.ts | 10 +- libs/ui/src/lib/ui/list-item/index.ts | 6 +- .../list-item/list-item.component.html | 10 +- .../list-item/list-item.component.scss | 502 ++--- .../list-item/list-item.component.ts | 224 +- .../lib/ui/modal/entities/modal-configs.ts | 66 +- .../src/lib/ui/modal/entities/modal.model.ts | 70 +- libs/ui/src/lib/ui/modal/index.ts | 18 +- .../lib/ui/modal/modal/modal.component.html | 118 +- .../lib/ui/modal/modal/modal.component.scss | 294 +-- .../src/lib/ui/modal/modal/modal.component.ts | 138 +- libs/ui/src/lib/ui/modal/utils.ts | 32 +- .../ui/src/lib/ui/note/entities/note.model.ts | 12 +- libs/ui/src/lib/ui/note/index.ts | 6 +- .../note/infrastructure/note-data.service.ts | 58 +- .../src/lib/ui/note/note/note.component.html | 14 +- .../src/lib/ui/note/note/note.component.scss | 558 ++--- .../ui/src/lib/ui/note/note/note.component.ts | 152 +- .../entities/notification.data.ts | 54 +- .../entities/notification.model.ts | 26 +- libs/ui/src/lib/ui/notification/index.ts | 38 +- .../infrastructure/notification.service.ts | 110 +- .../snack-bar/snack-bar.component.html | 24 +- .../snack-bar/snack-bar.component.scss | 116 +- .../snack-bar/snack-bar.component.ts | 120 +- .../state/notification.actions.ts | 58 +- .../state/notification.effects.ts | 118 +- libs/ui/src/lib/ui/notification/utils.ts | 30 +- libs/ui/src/lib/ui/paginator/index.ts | 6 +- .../paginator/paginator.component.html | 136 +- .../paginator/paginator.component.scss | 72 +- .../paginator/paginator.component.ts | 240 +-- .../src/lib/ui/panel/base-panel.component.ts | 244 +-- .../expansion-panel.component.html | 126 +- .../expansion-panel.component.scss | 290 +-- .../expansion-panel.component.ts | 102 +- libs/ui/src/lib/ui/panel/index.ts | 16 +- libs/ui/src/lib/ui/panel/panel.directive.ts | 128 +- .../lib/ui/panel/panel/panel.component.html | 38 +- .../lib/ui/panel/panel/panel.component.scss | 672 +++--- .../src/lib/ui/panel/panel/panel.component.ts | 68 +- libs/ui/src/lib/ui/progress/index.ts | 10 +- .../progress-bar/progress-bar.component.html | 4 +- .../progress-bar/progress-bar.component.scss | 62 +- .../progress-bar/progress-bar.component.ts | 18 +- .../progress-spinner.component.html | 58 +- .../progress-spinner.component.scss | 280 +-- .../progress-spinner.component.ts | 60 +- .../lib/ui/select/base-select.component.ts | 826 ++++---- .../lib/ui/select/entities/select.model.ts | 58 +- libs/ui/src/lib/ui/select/index.ts | 24 +- .../select-carousel.component.html | 76 +- .../select-carousel.component.scss | 16 +- .../select-carousel.component.ts | 364 ++-- .../select-multiple.component.html | 342 +-- .../select-multiple.component.scss | 88 +- .../select-multiple.component.ts | 660 +++--- .../lib/ui/select/select-option/_color.scss | 818 ++++---- .../lib/ui/select/select-option/_size.scss | 784 +++---- .../ui/select/select-option/_text-align.scss | 188 +- .../lib/ui/select/select-option/_type.scss | 524 ++--- .../select-option.component.html | 130 +- .../select-option.component.scss | 110 +- .../select-option/select-option.component.ts | 198 +- .../select-period.component.html | 334 +-- .../select-period.component.scss | 10 +- .../select-period/select-period.component.ts | 366 ++-- .../ui/select/select/select.component.html | 282 +-- .../lib/ui/select/select/select.component.ts | 380 ++-- .../src/lib/ui/select/styles/_appearance.scss | 182 +- libs/ui/src/lib/ui/select/styles/_color.scss | 502 ++--- .../src/lib/ui/select/styles/_menu-color.scss | 44 +- .../src/lib/ui/select/styles/_menu-type.scss | 220 +- .../ui/select/styles/_picked-option-type.scss | 574 ++--- libs/ui/src/lib/ui/select/styles/_size.scss | 134 +- libs/ui/src/lib/ui/select/styles/_type.scss | 470 ++--- .../src/lib/ui/select/styles/base-select.scss | 60 +- libs/ui/src/lib/ui/slide-toggle/index.ts | 6 +- .../slide-toggle/slide-toggle.component.html | 2 +- .../slide-toggle/slide-toggle.component.ts | 10 +- .../lib/ui/slider/base-slider.component.ts | 112 +- libs/ui/src/lib/ui/slider/index.ts | 10 +- .../range-slider/range-slider.component.html | 26 +- .../range-slider/range-slider.component.ts | 54 +- .../ui/slider/slider/slider.component.html | 28 +- .../ui/slider/slider/slider.component.scss | 36 +- .../lib/ui/slider/slider/slider.component.ts | 60 +- libs/ui/src/lib/ui/spinner/index.ts | 6 +- .../ui/spinner/spinner/spinner.component.html | 12 +- .../ui/spinner/spinner/spinner.component.ts | 38 +- libs/ui/src/lib/ui/tab/index.ts | 14 +- libs/ui/src/lib/ui/tab/tab/tab.component.html | 118 +- libs/ui/src/lib/ui/tab/tab/tab.component.scss | 560 ++--- libs/ui/src/lib/ui/tab/tab/tab.component.ts | 394 ++-- .../lib/ui/text/base-text-viewer.component.ts | 274 +-- .../text/directives/text-color.directive.ts | 46 +- .../text-group-indicator.directive.ts | 16 +- .../text/directives/text-sizes.directive.ts | 156 +- .../text/directives/text-styles.directive.ts | 80 +- .../text/directives/text-weights.directive.ts | 82 +- libs/ui/src/lib/ui/text/index.ts | 26 +- .../ui/src/lib/ui/text/styles/_alignment.scss | 36 +- .../src/lib/ui/text/styles/_border-type.scss | 132 +- .../lib/ui/text/styles/_flex-direction.scss | 172 +- .../src/lib/ui/text/styles/_font-color.scss | 176 +- .../ui/src/lib/ui/text/styles/_font-size.scss | 446 ++-- .../src/lib/ui/text/styles/_font-style.scss | 64 +- .../src/lib/ui/text/styles/_font-weight.scss | 206 +- .../lib/ui/text/styles/_icon-appearance.scss | 24 +- .../src/lib/ui/text/styles/_icon-color.scss | 200 +- .../ui/src/lib/ui/text/styles/_icon-size.scss | 140 +- libs/ui/src/lib/ui/text/styles/_justify.scss | 86 +- .../styles/base-text-viewer.component.scss | 70 +- .../text-area-expansion.component.html | 22 +- .../text-area-expansion.component.scss | 30 +- .../text-area-expansion.component.ts | 36 +- .../text-viewer-link.component.html | 50 +- .../text-viewer-link.component.scss | 196 +- .../text-viewer-link.component.ts | 90 +- .../text-viewer/text-viewer.component.html | 14 +- .../text/text-viewer/text-viewer.component.ts | 22 +- libs/ui/src/lib/ui/tooltip/index.ts | 2 +- .../src/lib/ui/tooltip/tooltip.directive.ts | 100 +- .../lib/ui/wrapper/action/action.wrapper.ts | 58 +- libs/ui/src/lib/ui/wrapper/base.wrapper.ts | 144 +- libs/ui/src/lib/ui/wrapper/definitions.ts | 14 +- .../directives/flex-wrapper.directive.ts | 74 +- .../directives/grid-wrapper.directive.ts | 192 +- .../directives/position-wrapper.directive.ts | 34 +- .../src/lib/ui/wrapper/form/form.wrapper.html | 8 +- .../src/lib/ui/wrapper/form/form.wrapper.ts | 50 +- .../lib/ui/wrapper/header/header.wrapper.html | 36 +- .../lib/ui/wrapper/header/header.wrapper.ts | 66 +- libs/ui/src/lib/ui/wrapper/index.ts | 24 +- .../src/lib/ui/wrapper/list/list.wrapper.html | 46 +- .../src/lib/ui/wrapper/list/list.wrapper.ts | 68 +- .../src/lib/ui/wrapper/main/main.wrapper.html | 10 +- .../src/lib/ui/wrapper/main/main.wrapper.ts | 86 +- libs/ui/src/lib/util/affix/affix.directive.ts | 68 +- libs/ui/src/lib/util/affix/index.ts | 6 +- .../lib/util/amplitude/amplitude.service.ts | 88 +- libs/ui/src/lib/util/amplitude/events.ts | 140 +- libs/ui/src/lib/util/amplitude/index.ts | 10 +- .../util/color/directives/colors.directive.ts | 178 +- .../src/lib/util/color/entities/color.type.ts | 2 +- libs/ui/src/lib/util/color/index.ts | 6 +- libs/ui/src/lib/util/common/common.ts | 318 +-- libs/ui/src/lib/util/common/index.ts | 8 +- libs/ui/src/lib/util/common/sector.ts | 52 +- libs/ui/src/lib/util/common/select-options.ts | 42 +- .../src/lib/util/dato-cms/graphql.module.ts | 2 +- libs/ui/src/lib/util/dato-cms/index.ts | 2 +- .../application/device-configs.facade.ts | 75 +- .../device-configs/entities/breakpoints.ts | 38 +- .../entities/device-configs.model.ts | 10 +- libs/ui/src/lib/util/device-configs/index.ts | 36 +- .../services/device-configs.service.ts | 352 ++-- .../state/device-configs.actions.ts | 44 +- .../state/device-configs.effects.ts | 70 +- .../state/device-configs.reducer.ts | 64 +- .../state/device-configs.selectors.ts | 38 +- .../lib/util/environments/environment.dev.ts | 52 +- .../lib/util/environments/environment.prod.ts | 50 +- .../src/lib/util/environments/environment.ts | 78 +- libs/ui/src/lib/util/environments/index.ts | 2 +- .../src/lib/util/form-control/form-control.ts | 104 +- libs/ui/src/lib/util/form-control/index.ts | 2 +- .../icon-registry/icon-registry.service.ts | 58 +- .../src/lib/util/icon-registry/icons.data.ts | 334 +-- libs/ui/src/lib/util/icon-registry/index.ts | 6 +- .../util-icon-registry.module.ts | 32 +- .../infinite-scroll/infinite-scroll.data.ts | 12 +- .../application/list-configs.facade.ts | 60 +- libs/ui/src/lib/util/list-configs/index.ts | 14 +- .../state/list-configs.actions.ts | 30 +- .../state/list-configs.reducer.ts | 50 +- .../state/list-configs.selectors.ts | 18 +- .../util/loaders/aplication/loader.facade.ts | 60 +- libs/ui/src/lib/util/loaders/index.ts | 22 +- .../lib/util/loaders/state/loader.actions.ts | 12 +- .../lib/util/loaders/state/loader.reducer.ts | 74 +- .../util/loaders/state/loader.selectors.ts | 22 +- .../lib/util/loaders/util-loader.module.ts | 26 +- libs/ui/src/lib/util/local-storage/index.ts | 2 +- .../local-storage/local-storage.service.ts | 52 +- .../src/lib/util/menu/base.menu.component.ts | 80 +- .../directives/base-menu-item.directive.ts | 114 +- .../directives/menu-children.directive.ts | 24 +- .../menu/directives/menu-entry.directive.ts | 24 +- .../util/menu/entities/menu-entry.model.ts | 92 +- libs/ui/src/lib/util/menu/index.ts | 18 +- libs/ui/src/lib/util/models/date.ts | 10 +- libs/ui/src/lib/util/models/index.ts | 14 +- libs/ui/src/lib/util/models/pricing.ts | 118 +- libs/ui/src/lib/util/models/sector.ts | 102 +- libs/ui/src/lib/util/models/unit.ts | 2 +- libs/ui/src/lib/util/pipes/index.ts | 8 +- libs/ui/src/lib/util/pipes/pipes.ts | 134 +- .../router-store/custom-route-serializer.ts | 62 +- .../lib/util/router-store/error-handler.ts | 20 +- libs/ui/src/lib/util/router-store/index.ts | 20 +- .../util/router-store/state/router.effects.ts | 148 +- .../util/router-store/state/router.reducer.ts | 32 +- .../router-store/state/router.selectors.ts | 30 +- .../router-store/util-router-store.module.ts | 32 +- libs/ui/src/lib/util/schema/index.ts | 2 +- libs/ui/src/lib/util/schema/schema.service.ts | 40 +- libs/ui/src/lib/util/scroll-to/index.ts | 8 +- .../lib/util/scroll-to/scroll-to.module.ts | 14 +- .../lib/util/status/entities/status.model.ts | 2 +- libs/ui/src/lib/util/status/index.ts | 10 +- .../lib/util/translate/custom-initializer.ts | 14 +- .../ui/src/lib/util/translate/i18n.service.ts | 54 +- libs/ui/src/lib/util/translate/index.ts | 36 +- .../loaders/translate-server.loader.ts | 78 +- .../src/lib/util/translate/translate.data.ts | 20 +- .../src/lib/util/translate/translate.model.ts | 20 +- libs/ui/src/lib/util/validator/definitions.ts | 36 +- libs/ui/src/lib/util/validator/index.ts | 4 +- libs/ui/src/lib/util/validator/utils.ts | 526 ++--- .../util/value/directives/value.directive.ts | 36 +- libs/ui/src/lib/util/value/index.ts | 6 +- libs/ui/src/lib/util/view-title/index.ts | 2 +- .../lib/util/view-title/view-title.service.ts | 40 +- 497 files changed, 39058 insertions(+), 39057 deletions(-) diff --git a/libs/ui/src/lib/styles/animations.ts b/libs/ui/src/lib/styles/animations.ts index 13affb2..bbf5654 100644 --- a/libs/ui/src/lib/styles/animations.ts +++ b/libs/ui/src/lib/styles/animations.ts @@ -1,46 +1,46 @@ -import { animate, state, style, transition, trigger } from '@angular/animations'; -import { DURATION } from './configs'; - -export function transitionAnimation(duration: DURATION): any { - return [ - trigger('collapse', [ - state( - 'off', - style({ transform: 'translateY(0%)', opacity: '0', visibility: 'hidden', height: '0' }) - ), - state( - 'on', - style({ transform: 'translateY(0%)', opacity: '1', visibility: 'visible', height: '100%' }) - ), - transition('on <=> off', [animate('420ms ease-in-out')]), - ]), - ]; -} - -export const enterTransition = transition(':enter', [ - style({ - opacity: 0, - }), - animate( - '240ms 200ms ease-out', - style({ - opacity: 1, - }) - ), -]); - -export const leaveTransition = transition(':leave', [ - style({ - opacity: 1, - }), - animate( - '180ms 120ms ease-out', - style({ - opacity: 0, - }) - ), -]); - -export const fadeIn = trigger('fadeIn', [enterTransition]); - -export const fadeOut = trigger('fadeOut', [leaveTransition]); +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { DURATION } from './configs'; + +export function transitionAnimation(duration: DURATION): any { + return [ + trigger('collapse', [ + state( + 'off', + style({ transform: 'translateY(0%)', opacity: '0', visibility: 'hidden', height: '0' }) + ), + state( + 'on', + style({ transform: 'translateY(0%)', opacity: '1', visibility: 'visible', height: '100%' }) + ), + transition('on <=> off', [animate('420ms ease-in-out')]), + ]), + ]; +} + +export const enterTransition = transition(':enter', [ + style({ + opacity: 0, + }), + animate( + '240ms 200ms ease-out', + style({ + opacity: 1, + }) + ), +]); + +export const leaveTransition = transition(':leave', [ + style({ + opacity: 1, + }), + animate( + '180ms 120ms ease-out', + style({ + opacity: 0, + }) + ), +]); + +export const fadeIn = trigger('fadeIn', [enterTransition]); + +export const fadeOut = trigger('fadeOut', [leaveTransition]); diff --git a/libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss b/libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss index 112d91d..067e777 100644 --- a/libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss +++ b/libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss @@ -1,342 +1,342 @@ -// Primary -$pi-color-theme-primary: ( - 50: #f0f4ff, - 100: #d7e2fb, - 200: #c3d5ff, - 300: #a1bbf5, - 400: #8cacf2, - 500: #799ef0, - 600: #7196ee, - 700: #668cec, - 800: #5c82e9, - 900: #5772d4, - A100: #ffffff, - A200: #ffffff, - A400: #d6e0ff, - A700: #bdccff, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #000000, - 700: #000000, - 800: #000000, - 900: #000000, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000, - ), -); - -// Accent -$pi-color-theme-accent: ( - 50: #fdf5e5, - 100: #fce0ad, - 200: #f6d393, - 300: #f6bc63, - 400: #f0b54a, - 500: #eda82a, - 600: #eba025, - 700: #d78f0f, - 800: #e58d19, - 900: #e07d0f, - A100: #ffffff, - A200: #ffecda, - A400: #ffd2a7, - A700: #ffc48d, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #000000, - 700: #000000, - 800: #000000, - 900: #000000, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000, - ), -); - -// Warn -$pi-color-theme-warn: ( - 50: #fbe1e1, - 100: #f4b3b3, - 200: #ef8c8c, - 300: #e54e4e, - 400: #e02828, - 500: #da0202, - 600: #d60202, - 700: #d00101, - 800: #cb0101, - 900: #ba1a1a, - A100: #ffebeb, - A200: #ffb8b8, - A400: #ff8585, - A700: #ff6b6b, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000, - ), -); -// Highlighted -$pi-color-theme-highlighted: ( - 50: #e2e5ed, - 100: #b6bfd3, - 200: #8695b5, - 300: #566a97, - 400: #314a81, - 500: #0d2a6b, - 600: #0b2563, - 700: #091f58, - 800: #07194e, - 900: #030f3c, - A100: #7285ff, - A200: #3f59ff, - A400: #0c2dff, - A700: #0021f1, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #ffffff, - A400: #ffffff, - A700: #ffffff, - ), -); - -$md-mcgpalette0: ( - 50: #e1e8f5, - 100: #b5c6e6, - 200: #83a1d5, - 300: #517bc4, - 400: #2c5eb7, - 500: #0d2a6b, - 600: #0b2563, - 700: #091f58, - 800: #07194e, - 900: #030f3c, - A100: #7285ff, - A200: #3f59ff, - A400: #0c2dff, - A700: #0021f1, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #ffffff, - A400: #ffffff, - A700: #ffffff, - ), -); - -$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff -$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff -$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff -$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff -$pi-color-primary-100: rgba(215, 226, 251, 1); // #d7e2fb -$pi-color-primary-200-rgba: rgba(196, 213, 255, 0.15); //#c4d5ff -$pi-color-primary-200: rgba(195, 213, 255, 1); //#c3d5ff -$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF -$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2 -$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0 -$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4 -// Accent -$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9 -$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed -$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5 -$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf -$pi-color-accent-100: rgba(252, 224, 173, 1); // #fce0ad -$pi-color-accent-200-rgba: rgba(252, 224, 173, 0.15); // #FCE0AD -$pi-color-accent-200: rgba(246, 212, 149, 1); // #f6d495 -$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a -$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63 -$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a -$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f -// Highlighted -$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff -$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff -$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF -$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff -$pi-color-highlighted-100: rgba(188, 205, 250, 1); // #bccdfa -$pi-color-highlighted-200: rgba(100, 130, 215, 1); // #6482d7 -$pi-color-highlighted-200-rgba: rgba(168, 193, 255, 0.15); // #A8C1FF -$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1 -$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a -$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b -$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c -// Warn -$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa -$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0 -$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb -$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea -$pi-color-warn-100: rgba(247, 205, 205, 1); // #f7cdcd -$pi-color-warn-200: rgba(242, 172, 172, 1); // #f2acac -$pi-color-warn-200-rgba: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126 -$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b -$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272 -$pi-color-warn: rgba(228, 89, 89, 1); // #e45959 -$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737 -// Success -$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9 -$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed -$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8 -$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc -$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5 -$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6 -$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d -$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88 -$pi-color-success: rgba(28, 178, 115, 1); // #1cb273 -$pi-color-success-900: rgba(0, 151, 88, 1); // #009758 -// Grey -$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd -$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb -$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4 -$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3 -$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1 -$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da -$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8 -$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f -$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70 -$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d -// White -$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF -$pi-color-white-900: rgba(244, 244, 244, 1); // #f4f4f4 -$pi-color-white-rgba-03: rgba(255, 255, 255, 0.33); // #ffffff rgba -$pi-color-white-rgba-05: rgba(255, 255, 255, 0.5); // #ffffff rgba -$pi-color-white-rgba-06: rgba(255, 255, 255, 0.66); // #ffffff rgba -$pi-color-white-rgba-09: rgba(255, 255, 255, 0.88); // #ffffff rgba -// Black -$pi-color-black-200: rgba(50, 55, 72, 1); // #323748 -$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A -// Background -$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4 -$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC -$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7 - -// Root variables -:root { - // Brand colors - // Primary - --pi-color-primary-10: #{$pi-color-primary-10}; - --pi-color-primary-25: #{$pi-color-primary-25}; - --pi-color-primary-50: #{$pi-color-primary-50}; - --pi-color-primary-75: #{$pi-color-primary-75}; - --pi-color-primary-100: #{$pi-color-primary-100}; - --pi-color-primary-200: #{$pi-color-primary-200}; - --pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba}; - --pi-color-primary-300: #{$pi-color-primary-300}; - --pi-color-primary-400: #{$pi-color-primary-400}; - --pi-color-primary: #{$pi-color-primary}; - --pi-color-primary-900: #{$pi-color-primary-900}; - // Accent - --pi-color-accent-10: #{$pi-color-accent-10}; - --pi-color-accent-25: #{$pi-color-accent-25}; - --pi-color-accent-50: #{$pi-color-accent-50}; - --pi-color-accent-75: #{$pi-color-accent-75}; - --pi-color-accent-100: #{$pi-color-accent-100}; - --pi-color-accent-200: #{$pi-color-accent-200}; - --pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba}; - --pi-color-accent-300: #{$pi-color-accent-300}; - --pi-color-accent-400: #{$pi-color-accent-400}; - --pi-color-accent: #{$pi-color-accent}; - --pi-color-accent-900: #{$pi-color-accent-900}; - // Warn - --pi-color-highlighted-10: #{$pi-color-highlighted-10}; - --pi-color-highlighted-25: #{$pi-color-highlighted-25}; - --pi-color-highlighted-50: #{$pi-color-highlighted-50}; - --pi-color-highlighted-75: #{$pi-color-highlighted-75}; - --pi-color-highlighted-100: #{$pi-color-highlighted-100}; - --pi-color-highlighted-200: #{$pi-color-highlighted-200}; - --pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba}; - --pi-color-highlighted-300: #{$pi-color-highlighted-300}; - --pi-color-highlighted-400: #{$pi-color-highlighted-400}; - --pi-color-highlighted: #{$pi-color-highlighted}; - --pi-color-highlighted-900: #{$pi-color-highlighted-900}; - // Warn - --pi-color-warn-10: #{$pi-color-warn-10}; - --pi-color-warn-25: #{$pi-color-warn-25}; - --pi-color-warn-50: #{$pi-color-warn-50}; - --pi-color-warn-75: #{$pi-color-warn-75}; - --pi-color-warn-100: #{$pi-color-warn-100}; - --pi-color-warn-200: #{$pi-color-warn-200}; - --pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba}; - --pi-color-warn-300: #{$pi-color-warn-300}; - --pi-color-warn-400: #{$pi-color-warn-400}; - --pi-color-warn: #{$pi-color-warn}; - --pi-color-warn-900: #{$pi-color-warn-900}; - // Success - --pi-color-success-10: #{$pi-color-success-10}; - --pi-color-success-25: #{$pi-color-success-25}; - --pi-color-success-50: #{$pi-color-success-50}; - --pi-color-success-75: #{$pi-color-success-75}; - --pi-color-success-100: #{$pi-color-success-100}; - --pi-color-success-200: #{$pi-color-success-200}; - --pi-color-success-300: #{$pi-color-success-300}; - --pi-color-success-400: #{$pi-color-success-400}; - --pi-color-success: #{$pi-color-success}; - --pi-color-success-900: #{$pi-color-success-900}; - // White - --pi-color-white: #{$pi-color-white}; - --pi-color-white-900: #{$pi-color-white-900}; - --pi-color-white-rgba-03: #{$pi-color-white-rgba-03}; - --pi-color-white-rgba-05: #{$pi-color-white-rgba-05}; - --pi-color-white-rgba-06: #{$pi-color-white-rgba-06}; - --pi-color-white-rgba-09: #{$pi-color-white-rgba-09}; - // Grey - --pi-color-grey-10: #{$pi-color-grey-10}; - --pi-color-grey-25: #{$pi-color-grey-25}; - --pi-color-grey-50: #{$pi-color-grey-50}; - --pi-color-grey-75: #{$pi-color-grey-75}; - --pi-color-grey-100: #{$pi-color-grey-100}; - --pi-color-grey-200: #{$pi-color-grey-200}; - --pi-color-grey-200: #{$pi-color-grey-200}; - --pi-color-grey-300: #{$pi-color-grey-300}; - --pi-color-grey-400: #{$pi-color-grey-400}; - --pi-color-grey: #{$pi-color-grey}; - --pi-color-grey-900: #{$pi-color-grey-900}; - // Black - --pi-color-black-200: #{$pi-color-black-200}; - --pi-color-black: #{$pi-color-black}; - // Background - --pi-color-white: #{$pi-color-white}; - --pi-color-background-300: #{$pi-color-background-300}; - --pi-color-background-400: #{$pi-color-background-400}; - --pi-color-background-400: #{$pi-color-background-400}; -} +// Primary +$pi-color-theme-primary: ( + 50: #f0f4ff, + 100: #d7e2fb, + 200: #c3d5ff, + 300: #a1bbf5, + 400: #8cacf2, + 500: #799ef0, + 600: #7196ee, + 700: #668cec, + 800: #5c82e9, + 900: #5772d4, + A100: #ffffff, + A200: #ffffff, + A400: #d6e0ff, + A700: #bdccff, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #000000, + 400: #000000, + 500: #000000, + 600: #000000, + 700: #000000, + 800: #000000, + 900: #000000, + A100: #000000, + A200: #000000, + A400: #000000, + A700: #000000, + ), +); + +// Accent +$pi-color-theme-accent: ( + 50: #fdf5e5, + 100: #fce0ad, + 200: #f6d393, + 300: #f6bc63, + 400: #f0b54a, + 500: #eda82a, + 600: #eba025, + 700: #d78f0f, + 800: #e58d19, + 900: #e07d0f, + A100: #ffffff, + A200: #ffecda, + A400: #ffd2a7, + A700: #ffc48d, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #000000, + 400: #000000, + 500: #000000, + 600: #000000, + 700: #000000, + 800: #000000, + 900: #000000, + A100: #000000, + A200: #000000, + A400: #000000, + A700: #000000, + ), +); + +// Warn +$pi-color-theme-warn: ( + 50: #fbe1e1, + 100: #f4b3b3, + 200: #ef8c8c, + 300: #e54e4e, + 400: #e02828, + 500: #da0202, + 600: #d60202, + 700: #d00101, + 800: #cb0101, + 900: #ba1a1a, + A100: #ffebeb, + A200: #ffb8b8, + A400: #ff8585, + A700: #ff6b6b, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #ffffff, + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: #000000, + A200: #000000, + A400: #000000, + A700: #000000, + ), +); +// Highlighted +$pi-color-theme-highlighted: ( + 50: #e2e5ed, + 100: #b6bfd3, + 200: #8695b5, + 300: #566a97, + 400: #314a81, + 500: #0d2a6b, + 600: #0b2563, + 700: #091f58, + 800: #07194e, + 900: #030f3c, + A100: #7285ff, + A200: #3f59ff, + A400: #0c2dff, + A700: #0021f1, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #ffffff, + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: #000000, + A200: #ffffff, + A400: #ffffff, + A700: #ffffff, + ), +); + +$md-mcgpalette0: ( + 50: #e1e8f5, + 100: #b5c6e6, + 200: #83a1d5, + 300: #517bc4, + 400: #2c5eb7, + 500: #0d2a6b, + 600: #0b2563, + 700: #091f58, + 800: #07194e, + 900: #030f3c, + A100: #7285ff, + A200: #3f59ff, + A400: #0c2dff, + A700: #0021f1, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #ffffff, + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: #000000, + A200: #ffffff, + A400: #ffffff, + A700: #ffffff, + ), +); + +$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff +$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff +$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff +$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff +$pi-color-primary-100: rgba(215, 226, 251, 1); // #d7e2fb +$pi-color-primary-200-rgba: rgba(196, 213, 255, 0.15); //#c4d5ff +$pi-color-primary-200: rgba(195, 213, 255, 1); //#c3d5ff +$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF +$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2 +$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0 +$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4 +// Accent +$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9 +$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed +$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5 +$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf +$pi-color-accent-100: rgba(252, 224, 173, 1); // #fce0ad +$pi-color-accent-200-rgba: rgba(252, 224, 173, 0.15); // #FCE0AD +$pi-color-accent-200: rgba(246, 212, 149, 1); // #f6d495 +$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a +$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63 +$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a +$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f +// Highlighted +$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff +$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff +$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF +$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff +$pi-color-highlighted-100: rgba(188, 205, 250, 1); // #bccdfa +$pi-color-highlighted-200: rgba(100, 130, 215, 1); // #6482d7 +$pi-color-highlighted-200-rgba: rgba(168, 193, 255, 0.15); // #A8C1FF +$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1 +$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a +$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b +$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c +// Warn +$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa +$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0 +$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb +$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea +$pi-color-warn-100: rgba(247, 205, 205, 1); // #f7cdcd +$pi-color-warn-200: rgba(242, 172, 172, 1); // #f2acac +$pi-color-warn-200-rgba: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126 +$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b +$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272 +$pi-color-warn: rgba(228, 89, 89, 1); // #e45959 +$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737 +// Success +$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9 +$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed +$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8 +$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc +$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5 +$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6 +$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d +$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88 +$pi-color-success: rgba(28, 178, 115, 1); // #1cb273 +$pi-color-success-900: rgba(0, 151, 88, 1); // #009758 +// Grey +$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd +$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb +$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4 +$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3 +$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1 +$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da +$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8 +$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f +$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70 +$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d +// White +$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF +$pi-color-white-900: rgba(244, 244, 244, 1); // #f4f4f4 +$pi-color-white-rgba-03: rgba(255, 255, 255, 0.33); // #ffffff rgba +$pi-color-white-rgba-05: rgba(255, 255, 255, 0.5); // #ffffff rgba +$pi-color-white-rgba-06: rgba(255, 255, 255, 0.66); // #ffffff rgba +$pi-color-white-rgba-09: rgba(255, 255, 255, 0.88); // #ffffff rgba +// Black +$pi-color-black-200: rgba(50, 55, 72, 1); // #323748 +$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A +// Background +$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4 +$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC +$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7 + +// Root variables +:root { + // Brand colors + // Primary + --pi-color-primary-10: #{$pi-color-primary-10}; + --pi-color-primary-25: #{$pi-color-primary-25}; + --pi-color-primary-50: #{$pi-color-primary-50}; + --pi-color-primary-75: #{$pi-color-primary-75}; + --pi-color-primary-100: #{$pi-color-primary-100}; + --pi-color-primary-200: #{$pi-color-primary-200}; + --pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba}; + --pi-color-primary-300: #{$pi-color-primary-300}; + --pi-color-primary-400: #{$pi-color-primary-400}; + --pi-color-primary: #{$pi-color-primary}; + --pi-color-primary-900: #{$pi-color-primary-900}; + // Accent + --pi-color-accent-10: #{$pi-color-accent-10}; + --pi-color-accent-25: #{$pi-color-accent-25}; + --pi-color-accent-50: #{$pi-color-accent-50}; + --pi-color-accent-75: #{$pi-color-accent-75}; + --pi-color-accent-100: #{$pi-color-accent-100}; + --pi-color-accent-200: #{$pi-color-accent-200}; + --pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba}; + --pi-color-accent-300: #{$pi-color-accent-300}; + --pi-color-accent-400: #{$pi-color-accent-400}; + --pi-color-accent: #{$pi-color-accent}; + --pi-color-accent-900: #{$pi-color-accent-900}; + // Warn + --pi-color-highlighted-10: #{$pi-color-highlighted-10}; + --pi-color-highlighted-25: #{$pi-color-highlighted-25}; + --pi-color-highlighted-50: #{$pi-color-highlighted-50}; + --pi-color-highlighted-75: #{$pi-color-highlighted-75}; + --pi-color-highlighted-100: #{$pi-color-highlighted-100}; + --pi-color-highlighted-200: #{$pi-color-highlighted-200}; + --pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba}; + --pi-color-highlighted-300: #{$pi-color-highlighted-300}; + --pi-color-highlighted-400: #{$pi-color-highlighted-400}; + --pi-color-highlighted: #{$pi-color-highlighted}; + --pi-color-highlighted-900: #{$pi-color-highlighted-900}; + // Warn + --pi-color-warn-10: #{$pi-color-warn-10}; + --pi-color-warn-25: #{$pi-color-warn-25}; + --pi-color-warn-50: #{$pi-color-warn-50}; + --pi-color-warn-75: #{$pi-color-warn-75}; + --pi-color-warn-100: #{$pi-color-warn-100}; + --pi-color-warn-200: #{$pi-color-warn-200}; + --pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba}; + --pi-color-warn-300: #{$pi-color-warn-300}; + --pi-color-warn-400: #{$pi-color-warn-400}; + --pi-color-warn: #{$pi-color-warn}; + --pi-color-warn-900: #{$pi-color-warn-900}; + // Success + --pi-color-success-10: #{$pi-color-success-10}; + --pi-color-success-25: #{$pi-color-success-25}; + --pi-color-success-50: #{$pi-color-success-50}; + --pi-color-success-75: #{$pi-color-success-75}; + --pi-color-success-100: #{$pi-color-success-100}; + --pi-color-success-200: #{$pi-color-success-200}; + --pi-color-success-300: #{$pi-color-success-300}; + --pi-color-success-400: #{$pi-color-success-400}; + --pi-color-success: #{$pi-color-success}; + --pi-color-success-900: #{$pi-color-success-900}; + // White + --pi-color-white: #{$pi-color-white}; + --pi-color-white-900: #{$pi-color-white-900}; + --pi-color-white-rgba-03: #{$pi-color-white-rgba-03}; + --pi-color-white-rgba-05: #{$pi-color-white-rgba-05}; + --pi-color-white-rgba-06: #{$pi-color-white-rgba-06}; + --pi-color-white-rgba-09: #{$pi-color-white-rgba-09}; + // Grey + --pi-color-grey-10: #{$pi-color-grey-10}; + --pi-color-grey-25: #{$pi-color-grey-25}; + --pi-color-grey-50: #{$pi-color-grey-50}; + --pi-color-grey-75: #{$pi-color-grey-75}; + --pi-color-grey-100: #{$pi-color-grey-100}; + --pi-color-grey-200: #{$pi-color-grey-200}; + --pi-color-grey-200: #{$pi-color-grey-200}; + --pi-color-grey-300: #{$pi-color-grey-300}; + --pi-color-grey-400: #{$pi-color-grey-400}; + --pi-color-grey: #{$pi-color-grey}; + --pi-color-grey-900: #{$pi-color-grey-900}; + // Black + --pi-color-black-200: #{$pi-color-black-200}; + --pi-color-black: #{$pi-color-black}; + // Background + --pi-color-white: #{$pi-color-white}; + --pi-color-background-300: #{$pi-color-background-300}; + --pi-color-background-400: #{$pi-color-background-400}; + --pi-color-background-400: #{$pi-color-background-400}; +} diff --git a/libs/ui/src/lib/styles/common/abstracts/_pi-font-sizes-variables.scss b/libs/ui/src/lib/styles/common/abstracts/_pi-font-sizes-variables.scss index 5ab57da..ca47d54 100644 --- a/libs/ui/src/lib/styles/common/abstracts/_pi-font-sizes-variables.scss +++ b/libs/ui/src/lib/styles/common/abstracts/_pi-font-sizes-variables.scss @@ -1,24 +1,24 @@ -// Font sizes variables -$pi-font-size-xxx-large: 2.875rem; // 46px -$pi-font-size-xx-large: 2.375rem; // 38px -$pi-font-size-x-large: 1.6875rem; // 27px -$pi-font-size-large: 1.375rem; // 22px -$pi-font-size-medium: 1.125rem; // 18px -$pi-font-size-small: 0.9375rem; // 15px -$pi-font-size-x-small: 0.75rem; // 12px -$pi-font-size-xx-small: 0.625rem; // 10px -$pi-font-size-xxx-small: 0.5rem; // 8px - -// Root variables -:root { - // Font sizes - --pi-font-size-xxx-large: #{$pi-font-size-xxx-large}; // 46px - --pi-font-size-xx-large: #{$pi-font-size-xx-large}; // 38px - --pi-font-size-x-large: #{$pi-font-size-x-large}; // 27x - --pi-font-size-large: #{$pi-font-size-large}; // 22px - --pi-font-size-medium: #{$pi-font-size-medium}; // 18px - --pi-font-size-small: #{$pi-font-size-small}; // 15px - --pi-font-size-x-small: #{$pi-font-size-x-small}; // 12px - --pi-font-size-xx-small: #{$pi-font-size-xx-small}; // 10px - --pi-font-size-xxx-small: #{$pi-font-size-xxx-small}; // 8px -} +// Font sizes variables +$pi-font-size-xxx-large: 2.875rem; // 46px +$pi-font-size-xx-large: 2.375rem; // 38px +$pi-font-size-x-large: 1.6875rem; // 27px +$pi-font-size-large: 1.375rem; // 22px +$pi-font-size-medium: 1.125rem; // 18px +$pi-font-size-small: 0.9375rem; // 15px +$pi-font-size-x-small: 0.75rem; // 12px +$pi-font-size-xx-small: 0.625rem; // 10px +$pi-font-size-xxx-small: 0.5rem; // 8px + +// Root variables +:root { + // Font sizes + --pi-font-size-xxx-large: #{$pi-font-size-xxx-large}; // 46px + --pi-font-size-xx-large: #{$pi-font-size-xx-large}; // 38px + --pi-font-size-x-large: #{$pi-font-size-x-large}; // 27x + --pi-font-size-large: #{$pi-font-size-large}; // 22px + --pi-font-size-medium: #{$pi-font-size-medium}; // 18px + --pi-font-size-small: #{$pi-font-size-small}; // 15px + --pi-font-size-x-small: #{$pi-font-size-x-small}; // 12px + --pi-font-size-xx-small: #{$pi-font-size-xx-small}; // 10px + --pi-font-size-xxx-small: #{$pi-font-size-xxx-small}; // 8px +} diff --git a/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss b/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss index 777896e..6967821 100644 --- a/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss +++ b/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss @@ -1,120 +1,120 @@ -// Spacings -$pi-spacing-xxxx-large: 3rem; // 48px -$pi-spacing-xxx-large: 2.5rem; // 40px -$pi-spacing-xx-large: 2rem; // 32px -$pi-spacing-x-large: 1.5rem; // 24px -$pi-spacing-large: 1.25rem; // 20px -$pi-spacing-medium: 1rem; // 16px -$pi-spacing-small: 0.75rem; // 12px -$pi-spacing-x-small: 0.625rem; // 10px -$pi-spacing-xx-small: 0.5rem; // 8px -$pi-spacing-xxx-small: 0.25rem; // 4px -$pi-spacing-xxxx-small: 0.125rem; // 2px -$pi-spacing-xxxxx-small: 0.0625rem; // 1px -// Global sizes -$pi-height-layout-header: 4rem; // 64px -$pi-height-header: 5rem; // 80px -$pi-height-header-tablet: 5.25rem; // 84px -$pi-height-header-mobile: 5rem; // 80px -$pi-height-footer: 4.75rem; // 76px -$pi-height-action-bar: 8rem; // 128px -$pi-height-header-aside: 4.75rem; // 76px -$pi-height-footer-aside: 6.75rem; // 108px -$pi-height-button-large: 3rem; // 48px -$pi-size-menu-item-expanded: 3.75rem; // 60px -$pi-size-menu-item-collapsed: 4.75rem; // 76px -$pi-width-container-l: 75%; -$pi-width-container: 62rem; // 992px -$pi-width-container-s: 57.5rem; // 920px -$pi-width-navbar-collapsed: 7.4375rem; // 119px -$pi-width-navbar-expanded: 16rem; // 256px -$pi-width-children-menu-expanded: 17rem; // 272px -$pi-width-aside: 22.125rem; // 354px; -// Cards -$pi-height-card: 22rem; // 352px -$pi-height-card-s: 19.375rem; // 310px -$pi-width-card-xs: 17.125rem; // 274px -$pi-width-card-s: 18.25rem; // 292px -$pi-width-card: 21.5rem; // 344px -// Radius -$pi-border-radius-xx-small: 0.125rem; // 2px -$pi-border-radius-x-small: 0.3125rem; // 5px -$pi-border-radius-small: 0.625rem; // 10px -$pi-border-radius-medium: 1rem; // 16px -$pi-border-radius-large: 1.375rem; // 22px -$pi-border-radius-x-large: 1.375rem; // 22px -// Box shadow -$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px; -$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px; -$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, - -1px 4px 16px 2px rgba(197, 197, 206, 0.05); -$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12), - -7px 7px 12 0px rgba(#c5c5ce, 0.06); -$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02); -$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08); -$pi-box-shadow-panel-disabled: 7px 7px 12px 0px rgba(#c5c5ce, 0.04); -$pi-box-shadow-inset: 0 0 42px -5px rgba(#c3d5ff, 0.2) inset; -// Animation -$pi-animation: all 0.25s ease-out; -$pi-animation-fast: all 0.16s ease-out; -$pi-animation-slow: all 0.4s ease-out; - -// Root variables -:root { - // Spacings - --pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px - --pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px - --pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px - --pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px - --pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px - --pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px - --pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px - --pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px - --pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px - --pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px - --pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px - --pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px - // Global Sizes - --pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px - --pi-height-header: #{$pi-height-header}; // 5rem; // 80px - --pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px - --pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px - --pi-height-footer: #{$pi-height-footer}; // 4.75rem; // 76px - --pi-height-header-aside: #{$pi-height-header-aside}; // 4.75rem; // 76px - --pi-height-footer-aside: #{$pi-height-footer-aside}; // 6.75rem; // 108px - --pi-height-button-large: #{$pi-height-button-large}; // 3rem // 48px - --pi-size-menu-item-expanded: #{$pi-size-menu-item-expanded}; // 3.75rem; // 60px - --pi-size-menu-item-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px - --pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px - --pi-width-container: #{$pi-width-container}; // 62rem; // 992px - --pi-width-container-s: #{$pi-width-container-s}; // 57.5rem; // 920px - --pi-width-navbar-collapsed: #{$pi-width-navbar-collapsed}; // 7.4375rem; // 119px - --pi-width-navbar-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px - --pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px - --pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px; - // Cards - --pi-height-card: #{$pi-height-card}; // 22rem; // 352px - --pi-height-card-s: #{$pi-height-card-s}; // 19.375rem // 310px - --pi-width-card-xs: #{$pi-width-card-s}; // 17.125rem // 274px - --pi-width-card-s: #{$pi-width-card-xs}; // 18.25rem // 2274px - --pi-width-card: #{$pi-width-card}; // 21.5rem // 344px - // Radius - --pi-border-radius-xx-small: #{$pi-border-radius-xx-small}; // 2px; // 0.125rem - --pi-border-radius-x-small: #{$pi-border-radius-x-small}; // 6px; // .375rem; - --pi-border-radius-small: #{$pi-border-radius-small}; // 10px; // 3.125rem - --pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px - --pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px - // Box shadow - --pi-box-shadow: #{$pi-box-shadow}; // rgba(#030f3c, 0.03) 3px 6px 6px 0px; - --pi-box-shadow-hover: #{$pi-box-shadow-hover}; //rgba(#030f3c, 0.06) 2px 2px 4px 0px; - --pi-box-shadow-double: #{$pi-box-shadow-double}; // rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, -1px 4px 16px 2px rgba(197, 197, 206, 0.05); - --pi-box-shadow-panel-double: #{$pi-box-shadow-panel-double}; // 10px 10px 16px 0px rgba(#030f3c, 0.02), - // -10px 10px 16px 0px rgba(#030f3c, 0.02); - --pi-box-shadow-panel: #{$pi-box-shadow-panel}; // 10px 10px 16px 0px rgba(#030f3c, 0.08); - --pi-box-shadow-top: #{$pi-box-shadow-top}; // 0px -5px 5px 0px rgba(121, 158, 240, 0.02); - --pi-box-shadow-inset: #{$pi-box-shadow-inset}; // 0 0 42px -5px rgba(#c3d5ff, 0.14) inset; - // Animation - --pi-animation: #{$pi-animation}; // all 0.25s ease; - --pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease; - --pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease; -} +// Spacings +$pi-spacing-xxxx-large: 3rem; // 48px +$pi-spacing-xxx-large: 2.5rem; // 40px +$pi-spacing-xx-large: 2rem; // 32px +$pi-spacing-x-large: 1.5rem; // 24px +$pi-spacing-large: 1.25rem; // 20px +$pi-spacing-medium: 1rem; // 16px +$pi-spacing-small: 0.75rem; // 12px +$pi-spacing-x-small: 0.625rem; // 10px +$pi-spacing-xx-small: 0.5rem; // 8px +$pi-spacing-xxx-small: 0.25rem; // 4px +$pi-spacing-xxxx-small: 0.125rem; // 2px +$pi-spacing-xxxxx-small: 0.0625rem; // 1px +// Global sizes +$pi-height-layout-header: 4rem; // 64px +$pi-height-header: 5rem; // 80px +$pi-height-header-tablet: 5.25rem; // 84px +$pi-height-header-mobile: 5rem; // 80px +$pi-height-footer: 4.75rem; // 76px +$pi-height-action-bar: 8rem; // 128px +$pi-height-header-aside: 4.75rem; // 76px +$pi-height-footer-aside: 6.75rem; // 108px +$pi-height-button-large: 3rem; // 48px +$pi-size-menu-item-expanded: 3.75rem; // 60px +$pi-size-menu-item-collapsed: 4.75rem; // 76px +$pi-width-container-l: 75%; +$pi-width-container: 62rem; // 992px +$pi-width-container-s: 57.5rem; // 920px +$pi-width-navbar-collapsed: 7.4375rem; // 119px +$pi-width-navbar-expanded: 16rem; // 256px +$pi-width-children-menu-expanded: 17rem; // 272px +$pi-width-aside: 22.125rem; // 354px; +// Cards +$pi-height-card: 22rem; // 352px +$pi-height-card-s: 19.375rem; // 310px +$pi-width-card-xs: 17.125rem; // 274px +$pi-width-card-s: 18.25rem; // 292px +$pi-width-card: 21.5rem; // 344px +// Radius +$pi-border-radius-xx-small: 0.125rem; // 2px +$pi-border-radius-x-small: 0.3125rem; // 5px +$pi-border-radius-small: 0.625rem; // 10px +$pi-border-radius-medium: 1rem; // 16px +$pi-border-radius-large: 1.375rem; // 22px +$pi-border-radius-x-large: 1.375rem; // 22px +// Box shadow +$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px; +$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px; +$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, + -1px 4px 16px 2px rgba(197, 197, 206, 0.05); +$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12), + -7px 7px 12 0px rgba(#c5c5ce, 0.06); +$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02); +$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08); +$pi-box-shadow-panel-disabled: 7px 7px 12px 0px rgba(#c5c5ce, 0.04); +$pi-box-shadow-inset: 0 0 42px -5px rgba(#c3d5ff, 0.2) inset; +// Animation +$pi-animation: all 0.25s ease-out; +$pi-animation-fast: all 0.16s ease-out; +$pi-animation-slow: all 0.4s ease-out; + +// Root variables +:root { + // Spacings + --pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px + --pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px + --pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px + --pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px + --pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px + --pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px + --pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px + --pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px + --pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px + --pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px + --pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px + --pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px + // Global Sizes + --pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px + --pi-height-header: #{$pi-height-header}; // 5rem; // 80px + --pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px + --pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px + --pi-height-footer: #{$pi-height-footer}; // 4.75rem; // 76px + --pi-height-header-aside: #{$pi-height-header-aside}; // 4.75rem; // 76px + --pi-height-footer-aside: #{$pi-height-footer-aside}; // 6.75rem; // 108px + --pi-height-button-large: #{$pi-height-button-large}; // 3rem // 48px + --pi-size-menu-item-expanded: #{$pi-size-menu-item-expanded}; // 3.75rem; // 60px + --pi-size-menu-item-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px + --pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px + --pi-width-container: #{$pi-width-container}; // 62rem; // 992px + --pi-width-container-s: #{$pi-width-container-s}; // 57.5rem; // 920px + --pi-width-navbar-collapsed: #{$pi-width-navbar-collapsed}; // 7.4375rem; // 119px + --pi-width-navbar-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px + --pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px + --pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px; + // Cards + --pi-height-card: #{$pi-height-card}; // 22rem; // 352px + --pi-height-card-s: #{$pi-height-card-s}; // 19.375rem // 310px + --pi-width-card-xs: #{$pi-width-card-s}; // 17.125rem // 274px + --pi-width-card-s: #{$pi-width-card-xs}; // 18.25rem // 2274px + --pi-width-card: #{$pi-width-card}; // 21.5rem // 344px + // Radius + --pi-border-radius-xx-small: #{$pi-border-radius-xx-small}; // 2px; // 0.125rem + --pi-border-radius-x-small: #{$pi-border-radius-x-small}; // 6px; // .375rem; + --pi-border-radius-small: #{$pi-border-radius-small}; // 10px; // 3.125rem + --pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px + --pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px + // Box shadow + --pi-box-shadow: #{$pi-box-shadow}; // rgba(#030f3c, 0.03) 3px 6px 6px 0px; + --pi-box-shadow-hover: #{$pi-box-shadow-hover}; //rgba(#030f3c, 0.06) 2px 2px 4px 0px; + --pi-box-shadow-double: #{$pi-box-shadow-double}; // rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, -1px 4px 16px 2px rgba(197, 197, 206, 0.05); + --pi-box-shadow-panel-double: #{$pi-box-shadow-panel-double}; // 10px 10px 16px 0px rgba(#030f3c, 0.02), + // -10px 10px 16px 0px rgba(#030f3c, 0.02); + --pi-box-shadow-panel: #{$pi-box-shadow-panel}; // 10px 10px 16px 0px rgba(#030f3c, 0.08); + --pi-box-shadow-top: #{$pi-box-shadow-top}; // 0px -5px 5px 0px rgba(121, 158, 240, 0.02); + --pi-box-shadow-inset: #{$pi-box-shadow-inset}; // 0 0 42px -5px rgba(#c3d5ff, 0.14) inset; + // Animation + --pi-animation: #{$pi-animation}; // all 0.25s ease; + --pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease; + --pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease; +} diff --git a/libs/ui/src/lib/styles/common/abstracts/_pi-gradient-variables.scss b/libs/ui/src/lib/styles/common/abstracts/_pi-gradient-variables.scss index d7b2d9d..ce8c618 100644 --- a/libs/ui/src/lib/styles/common/abstracts/_pi-gradient-variables.scss +++ b/libs/ui/src/lib/styles/common/abstracts/_pi-gradient-variables.scss @@ -1,240 +1,240 @@ -// Gradients -// Primary -// Primary light -$pi-gradient-primary-light: linear-gradient( - 36.98deg, - var(--pi-color-primary-75) 0.75%, - var(--pi-color-primary-25) 99.2% -); - -$pi-gradient-primary-light-rgba: linear-gradient( - 131deg, - rgba(215, 226, 251, 0.33) 0%, - rgba(240, 244, 255, 0.125) 100% -); - -$pi-gradient-primary-light-rgba-hover: linear-gradient( - 131deg, - rgba(215, 226, 251, 0.66) 0%, - rgba(240, 244, 255, 0.33) 100% -); - -// Primary dark -$pi-gradient-primary-dark: linear-gradient( - 36.98deg, - var(--pi-color-primary-900) 0.75%, - var(--pi-color-primary-400) 99.2% -); - -$pi-gradient-primary-dark-rgba: linear-gradient( - 131deg, - rgba(121, 158, 240, 0.32) 0%, - rgba(0, 0, 0, 0.125) 100% -); - -$pi-gradient-primary-dark-rgba-hover: linear-gradient( - 131deg, - rgba(121, 158, 240, 0.42) 0%, - rgba(0, 0, 0, 0.25) 100% -); - -$pi-gradient-primary-dark-disabled: linear-gradient( - 36.98deg, - var(--pi-color-primary-900) 0.75%, - var(--pi-color-primary-400) 99.2% -); - -// Accent -// Accent light -$pi-gradient-accent-light: linear-gradient( - 36.98deg, - var(--pi-color-accent-75) 0.75%, - var(--pi-color-accent-25) 99.2% -); - -$pi-gradient-accent-light-rgba: linear-gradient( - 131deg, - rgba(253, 235, 202, 0.61) 0%, - rgba(253, 245, 229, 0.125) 100% -); - -$pi-gradient-accent-light-rgba-hover: linear-gradient( - 131deg, - rgba(253, 235, 202, 0.81) 0%, - rgba(253, 245, 229, 0.25) 100% -); - -// Accent dark -$pi-gradient-accent-dark: linear-gradient( - 36.98deg, - var(--pi-color-accent-900) 0.75%, - var(--pi-color-accent-400) 99.2% -); -$pi-gradient-accent-dark-rgba: linear-gradient( - 131deg, - rgba(253, 235, 202, 0.61) 0%, - rgba(0, 0, 0, 0.125) 100% -); - -$pi-gradient-accent-dark-rgba-hover: linear-gradient( - 131deg, - rgba(253, 235, 202, 0.81) 0%, - rgba(0, 0, 0, 0.25) 100% -); - -// Highlighted -// Highlighted light -$pi-gradient-highlighted-light: linear-gradient( - 36.98deg, - var(--pi-color-highlighted-75) 0.75%, - var(--pi-color-highlighted-25) 99.2% -); -$pi-gradient-highlighted-light-rgba: linear-gradient( - 131deg, - rgba(100, 130, 215, 0.24) 0%, - rgba(255, 255, 255, 0.125) 100% -); -$pi-gradient-highlighted-light-rgba-hover: linear-gradient( - 131deg, - rgba(100, 130, 215, 0.44) 0%, - rgba(255, 255, 255, 0.25) 100% -); - -// Highlighted dark -$pi-gradient-highlighted-dark: linear-gradient( - 36.98deg, - var(--pi-color-highlighted-900) 0.89%, - var(--pi-color-highlighted) 99.2% -); -$pi-gradient-highlighted-dark-rgba: linear-gradient( - 131deg, - rgba(100, 130, 215, 0.24) 0%, - rgba(0, 0, 0, 0.125) 100% -); -$pi-gradient-highlighted-dark-rgba-hover: linear-gradient( - 131deg, - rgba(100, 130, 215, 0.44) 0%, - rgba(0, 0, 0, 0.25) 100% -); -// Grey -// Grey light -$pi-gradient-grey-light: linear-gradient( - 36.98deg, - var(--pi-color-grey-75) 0.75%, - var(--pi-color-grey-25) 99.2% -); - -$pi-gradient-grey-light-rgba: linear-gradient( - 131deg, - rgba(233, 235, 241, 0.25) 0%, - rgba(243, 244, 244, 0.125) 100% -); - -$pi-gradient-grey-light-rgba-hover: linear-gradient( - 131deg, - rgba(233, 235, 241, 0.5) 0%, - rgba(243, 244, 244, 0.25) 100% -); -// Grey dark -$pi-gradient-grey-dark: linear-gradient( - 36.98deg, - var(--pi-color-grey-900) 0.89%, - var(--pi-color-grey) 99.2% -); - -$pi-gradient-grey-dark-rgba: linear-gradient( - 131deg, - rgba(61, 61, 61, 0.61) 0%, - rgba(0, 0, 0, 0.125) 100% -); - -$pi-gradient-grey-dark-rgba-hover: linear-gradient( - 131deg, - rgba(61, 61, 61, 0.81) 0%, - rgba(0, 0, 0, 0.25) 100% -); - -// White -$pi-gradient-white: linear-gradient( - 36.98deg, - var(--pi-color-white-900) 0.89%, - var(--pi-color-white) 99.2% -); -$pi-gradient-white-rgba-disabled: linear-gradient( - 131deg, - rgba(255, 255, 255, 0.25) 0%, - rgba(255, 255, 255, 0.33) 100% -); -$pi-gradient-white-rgba: linear-gradient( - 131deg, - rgba(255, 255, 255, 0.33) 0%, - rgba(255, 255, 255, 0.44) 100% -); - -$pi-gradient-white-rgba-hover: linear-gradient( - 131deg, - rgba(255, 255, 255, 0.5) 0%, - rgba(255, 255, 255, 0.7) 100% -); -// Disabled -// Light -$pi-gradient-light-disabled: linear-gradient( - 36.98deg, - rgba(192, 192, 192, 1) 0.75%, - rgba(242, 242, 242, 1) 99.2% -); -// Dark -$pi-gradient-dark-disabled: linear-gradient( - 36.98deg, - rgba(138, 138, 138, 1) 0.89%, - rgba(182, 182, 182, 1) 99.2% -); -:root { - // Gradient - // Primary - // Primary & Light - --pi-gradient-primary-light: #{$pi-gradient-primary-light}; - - --pi-gradient-primary-light-rgba: #{$pi-gradient-primary-light-rgba}; - --pi-gradient-primary-light-rgba-hover: #{$pi-gradient-primary-light-rgba-hover}; - // Primary & Dark - --pi-gradient-primary-dark: #{$pi-gradient-primary-dark}; - - --pi-gradient-primary-dark-rgba: #{$pi-gradient-primary-dark-rgba}; - --pi-gradient-primary-dark-rgba-hover: #{$pi-gradient-primary-dark-rgba-hover}; - // Accent - // Accent & Light - --pi-gradient-accent-light: #{$pi-gradient-accent-light}; - --pi-gradient-accent-light-rgba: #{$pi-gradient-accent-light-rgba}; - --pi-gradient-accent-light-rgba-hover: #{$pi-gradient-accent-light-rgba-hover}; - // Accent & Dark - --pi-gradient-accent-dark: #{$pi-gradient-accent-dark}; - --pi-gradient-accent-dark-rgba: #{$pi-gradient-accent-dark-rgba}; - --pi-gradient-accent-dark-rgba-hover: #{$pi-gradient-accent-dark-rgba-hover}; - // Highlighted - // Highlighted & Light - --pi-gradient-highlighted-light: #{$pi-gradient-highlighted-light}; - --pi-gradient-highlighted-light-rgba: #{$pi-gradient-highlighted-light-rgba}; - --pi-gradient-highlighted-light-rgba-hover: #{$pi-gradient-highlighted-light-rgba-hover}; - // Highlighted & Dark - --pi-gradient-highlighted-dark: #{$pi-gradient-highlighted-dark}; - --pi-gradient-highlighted-dark-rgba: #{$pi-gradient-highlighted-dark-rgba}; - --pi-gradient-highlighted-dark-rgba-hover: #{$pi-gradient-highlighted-dark-rgba-hover}; - // Grey - // Grey & Light - --pi-gradient-grey-light: #{$pi-gradient-grey-light}; - --pi-gradient-grey-light-rgba: #{$pi-gradient-grey-light-rgba}; - --pi-gradient-grey-light-rgba-hover: #{$pi-gradient-grey-light-rgba-hover}; - // Grey & Dark - --pi-gradient-grey-dark: #{$pi-gradient-grey-dark}; - --pi-gradient-grey-dark-rgba: #{$pi-gradient-grey-dark-rgba}; - --pi-gradient-grey-dark-rgba-hover: #{$pi-gradient-grey-dark-rgba-hover}; - // White - --pi-gradient-white: #{$pi-gradient-white}; - --pi-gradient-white-rgba: #{$pi-gradient-white-rgba}; - --pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover}; - --pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled}; - // Disabled - --pi-gradient-light-disabled: #{$pi-gradient-light-disabled}; - --pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled}; -} +// Gradients +// Primary +// Primary light +$pi-gradient-primary-light: linear-gradient( + 36.98deg, + var(--pi-color-primary-75) 0.75%, + var(--pi-color-primary-25) 99.2% +); + +$pi-gradient-primary-light-rgba: linear-gradient( + 131deg, + rgba(215, 226, 251, 0.33) 0%, + rgba(240, 244, 255, 0.125) 100% +); + +$pi-gradient-primary-light-rgba-hover: linear-gradient( + 131deg, + rgba(215, 226, 251, 0.66) 0%, + rgba(240, 244, 255, 0.33) 100% +); + +// Primary dark +$pi-gradient-primary-dark: linear-gradient( + 36.98deg, + var(--pi-color-primary-900) 0.75%, + var(--pi-color-primary-400) 99.2% +); + +$pi-gradient-primary-dark-rgba: linear-gradient( + 131deg, + rgba(121, 158, 240, 0.32) 0%, + rgba(0, 0, 0, 0.125) 100% +); + +$pi-gradient-primary-dark-rgba-hover: linear-gradient( + 131deg, + rgba(121, 158, 240, 0.42) 0%, + rgba(0, 0, 0, 0.25) 100% +); + +$pi-gradient-primary-dark-disabled: linear-gradient( + 36.98deg, + var(--pi-color-primary-900) 0.75%, + var(--pi-color-primary-400) 99.2% +); + +// Accent +// Accent light +$pi-gradient-accent-light: linear-gradient( + 36.98deg, + var(--pi-color-accent-75) 0.75%, + var(--pi-color-accent-25) 99.2% +); + +$pi-gradient-accent-light-rgba: linear-gradient( + 131deg, + rgba(253, 235, 202, 0.61) 0%, + rgba(253, 245, 229, 0.125) 100% +); + +$pi-gradient-accent-light-rgba-hover: linear-gradient( + 131deg, + rgba(253, 235, 202, 0.81) 0%, + rgba(253, 245, 229, 0.25) 100% +); + +// Accent dark +$pi-gradient-accent-dark: linear-gradient( + 36.98deg, + var(--pi-color-accent-900) 0.75%, + var(--pi-color-accent-400) 99.2% +); +$pi-gradient-accent-dark-rgba: linear-gradient( + 131deg, + rgba(253, 235, 202, 0.61) 0%, + rgba(0, 0, 0, 0.125) 100% +); + +$pi-gradient-accent-dark-rgba-hover: linear-gradient( + 131deg, + rgba(253, 235, 202, 0.81) 0%, + rgba(0, 0, 0, 0.25) 100% +); + +// Highlighted +// Highlighted light +$pi-gradient-highlighted-light: linear-gradient( + 36.98deg, + var(--pi-color-highlighted-75) 0.75%, + var(--pi-color-highlighted-25) 99.2% +); +$pi-gradient-highlighted-light-rgba: linear-gradient( + 131deg, + rgba(100, 130, 215, 0.24) 0%, + rgba(255, 255, 255, 0.125) 100% +); +$pi-gradient-highlighted-light-rgba-hover: linear-gradient( + 131deg, + rgba(100, 130, 215, 0.44) 0%, + rgba(255, 255, 255, 0.25) 100% +); + +// Highlighted dark +$pi-gradient-highlighted-dark: linear-gradient( + 36.98deg, + var(--pi-color-highlighted-900) 0.89%, + var(--pi-color-highlighted) 99.2% +); +$pi-gradient-highlighted-dark-rgba: linear-gradient( + 131deg, + rgba(100, 130, 215, 0.24) 0%, + rgba(0, 0, 0, 0.125) 100% +); +$pi-gradient-highlighted-dark-rgba-hover: linear-gradient( + 131deg, + rgba(100, 130, 215, 0.44) 0%, + rgba(0, 0, 0, 0.25) 100% +); +// Grey +// Grey light +$pi-gradient-grey-light: linear-gradient( + 36.98deg, + var(--pi-color-grey-75) 0.75%, + var(--pi-color-grey-25) 99.2% +); + +$pi-gradient-grey-light-rgba: linear-gradient( + 131deg, + rgba(233, 235, 241, 0.25) 0%, + rgba(243, 244, 244, 0.125) 100% +); + +$pi-gradient-grey-light-rgba-hover: linear-gradient( + 131deg, + rgba(233, 235, 241, 0.5) 0%, + rgba(243, 244, 244, 0.25) 100% +); +// Grey dark +$pi-gradient-grey-dark: linear-gradient( + 36.98deg, + var(--pi-color-grey-900) 0.89%, + var(--pi-color-grey) 99.2% +); + +$pi-gradient-grey-dark-rgba: linear-gradient( + 131deg, + rgba(61, 61, 61, 0.61) 0%, + rgba(0, 0, 0, 0.125) 100% +); + +$pi-gradient-grey-dark-rgba-hover: linear-gradient( + 131deg, + rgba(61, 61, 61, 0.81) 0%, + rgba(0, 0, 0, 0.25) 100% +); + +// White +$pi-gradient-white: linear-gradient( + 36.98deg, + var(--pi-color-white-900) 0.89%, + var(--pi-color-white) 99.2% +); +$pi-gradient-white-rgba-disabled: linear-gradient( + 131deg, + rgba(255, 255, 255, 0.25) 0%, + rgba(255, 255, 255, 0.33) 100% +); +$pi-gradient-white-rgba: linear-gradient( + 131deg, + rgba(255, 255, 255, 0.33) 0%, + rgba(255, 255, 255, 0.44) 100% +); + +$pi-gradient-white-rgba-hover: linear-gradient( + 131deg, + rgba(255, 255, 255, 0.5) 0%, + rgba(255, 255, 255, 0.7) 100% +); +// Disabled +// Light +$pi-gradient-light-disabled: linear-gradient( + 36.98deg, + rgba(192, 192, 192, 1) 0.75%, + rgba(242, 242, 242, 1) 99.2% +); +// Dark +$pi-gradient-dark-disabled: linear-gradient( + 36.98deg, + rgba(138, 138, 138, 1) 0.89%, + rgba(182, 182, 182, 1) 99.2% +); +:root { + // Gradient + // Primary + // Primary & Light + --pi-gradient-primary-light: #{$pi-gradient-primary-light}; + + --pi-gradient-primary-light-rgba: #{$pi-gradient-primary-light-rgba}; + --pi-gradient-primary-light-rgba-hover: #{$pi-gradient-primary-light-rgba-hover}; + // Primary & Dark + --pi-gradient-primary-dark: #{$pi-gradient-primary-dark}; + + --pi-gradient-primary-dark-rgba: #{$pi-gradient-primary-dark-rgba}; + --pi-gradient-primary-dark-rgba-hover: #{$pi-gradient-primary-dark-rgba-hover}; + // Accent + // Accent & Light + --pi-gradient-accent-light: #{$pi-gradient-accent-light}; + --pi-gradient-accent-light-rgba: #{$pi-gradient-accent-light-rgba}; + --pi-gradient-accent-light-rgba-hover: #{$pi-gradient-accent-light-rgba-hover}; + // Accent & Dark + --pi-gradient-accent-dark: #{$pi-gradient-accent-dark}; + --pi-gradient-accent-dark-rgba: #{$pi-gradient-accent-dark-rgba}; + --pi-gradient-accent-dark-rgba-hover: #{$pi-gradient-accent-dark-rgba-hover}; + // Highlighted + // Highlighted & Light + --pi-gradient-highlighted-light: #{$pi-gradient-highlighted-light}; + --pi-gradient-highlighted-light-rgba: #{$pi-gradient-highlighted-light-rgba}; + --pi-gradient-highlighted-light-rgba-hover: #{$pi-gradient-highlighted-light-rgba-hover}; + // Highlighted & Dark + --pi-gradient-highlighted-dark: #{$pi-gradient-highlighted-dark}; + --pi-gradient-highlighted-dark-rgba: #{$pi-gradient-highlighted-dark-rgba}; + --pi-gradient-highlighted-dark-rgba-hover: #{$pi-gradient-highlighted-dark-rgba-hover}; + // Grey + // Grey & Light + --pi-gradient-grey-light: #{$pi-gradient-grey-light}; + --pi-gradient-grey-light-rgba: #{$pi-gradient-grey-light-rgba}; + --pi-gradient-grey-light-rgba-hover: #{$pi-gradient-grey-light-rgba-hover}; + // Grey & Dark + --pi-gradient-grey-dark: #{$pi-gradient-grey-dark}; + --pi-gradient-grey-dark-rgba: #{$pi-gradient-grey-dark-rgba}; + --pi-gradient-grey-dark-rgba-hover: #{$pi-gradient-grey-dark-rgba-hover}; + // White + --pi-gradient-white: #{$pi-gradient-white}; + --pi-gradient-white-rgba: #{$pi-gradient-white-rgba}; + --pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover}; + --pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled}; + // Disabled + --pi-gradient-light-disabled: #{$pi-gradient-light-disabled}; + --pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled}; +} diff --git a/libs/ui/src/lib/styles/common/abstracts/_pi-public-variables.scss b/libs/ui/src/lib/styles/common/abstracts/_pi-public-variables.scss index b08320c..42f49dc 100644 --- a/libs/ui/src/lib/styles/common/abstracts/_pi-public-variables.scss +++ b/libs/ui/src/lib/styles/common/abstracts/_pi-public-variables.scss @@ -1,22 +1,22 @@ -// Font sizes variables -$pi-public-font-size-xxx-large: 4.25rem; // 68px -$pi-public-font-size-xx-large: 3.875rem; // 62px - -// Global sizes -$pi-public-height-header-desktop: 4.5rem; // 72px -$pi-public-height-header-mobile: 4.25rem; // 68px -$pi-public-width-container: 72rem; // 1152px -$pi-public-width-container-l: 90rem; // 1440px - -// Root variables -:root { - // Font sizes - --pi-public-font-size-xxx-large: #{$pi-public-font-size-xxx-large}; // 4.5rem; // 72px - --pi-public-font-size-xx-large: #{$pi-public-font-size-xx-large}; // 3.875rem; // 62px - - // Global sizes - --pi-public-height-header-desktop: #{$pi-public-height-header-desktop}; // 5.25rem; // 84px - --pi-public-height-header-mobile: #{$pi-public-height-header-mobile}; // 4.125rem; // 66px - --pi-public-width-container: #{$pi-public-width-container}; // 72rem; // 1152px - --pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px -} +// Font sizes variables +$pi-public-font-size-xxx-large: 4.25rem; // 68px +$pi-public-font-size-xx-large: 3.875rem; // 62px + +// Global sizes +$pi-public-height-header-desktop: 4.5rem; // 72px +$pi-public-height-header-mobile: 4.25rem; // 68px +$pi-public-width-container: 72rem; // 1152px +$pi-public-width-container-l: 90rem; // 1440px + +// Root variables +:root { + // Font sizes + --pi-public-font-size-xxx-large: #{$pi-public-font-size-xxx-large}; // 4.5rem; // 72px + --pi-public-font-size-xx-large: #{$pi-public-font-size-xx-large}; // 3.875rem; // 62px + + // Global sizes + --pi-public-height-header-desktop: #{$pi-public-height-header-desktop}; // 5.25rem; // 84px + --pi-public-height-header-mobile: #{$pi-public-height-header-mobile}; // 4.125rem; // 66px + --pi-public-width-container: #{$pi-public-width-container}; // 72rem; // 1152px + --pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px +} diff --git a/libs/ui/src/lib/styles/common/abstracts/index.scss b/libs/ui/src/lib/styles/common/abstracts/index.scss index e91205a..cad1528 100644 --- a/libs/ui/src/lib/styles/common/abstracts/index.scss +++ b/libs/ui/src/lib/styles/common/abstracts/index.scss @@ -1,5 +1,5 @@ -@forward 'pi-color-variables'; -@forward 'pi-font-sizes-variables'; -@forward 'pi-gradient-variables'; -@forward 'pi-public-variables'; -@forward 'pi-global-variables'; +@forward 'pi-color-variables'; +@forward 'pi-font-sizes-variables'; +@forward 'pi-gradient-variables'; +@forward 'pi-public-variables'; +@forward 'pi-global-variables'; diff --git a/libs/ui/src/lib/styles/common/base/_pi-reset.scss b/libs/ui/src/lib/styles/common/base/_pi-reset.scss index 71370a6..c57641a 100644 --- a/libs/ui/src/lib/styles/common/base/_pi-reset.scss +++ b/libs/ui/src/lib/styles/common/base/_pi-reset.scss @@ -1,594 +1,594 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - font-size: 1rem; - scroll-behavior: smooth; -} - -article, -aside, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section { - display: block; -} - -// Body -body { - margin: 0; - -ms-overflow-style: none; - line-height: 1.4; - -webkit-font-smoothing: antialiased; - color: var(--pi-color-grey-900); - scrollbar-width: none; - color: var(--pi-color-grey-900); - scroll-behavior: smooth; - overflow-x: hidden; - &::-webkit-scrollbar { - display: none; - } - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - size: 0.9375rem; - weight: 300; - } -} - -// EN -html[dir='ltr'] { - body { - text-align: left; - } -} - -// AR -html[dir='rtl'] { - body { - text-align: right; - } -} - -[tabindex='-1']:focus { - outline: 0 !important; -} - -// Content grouping -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -// Typography -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: 0; - font-size: inherit; - font-weight: inherit; - line-height: 133.33%; -} - -a { - color: var(--pi-color-primary); -} - -.pi-inner-blog { - & > div { - & > *:nth-child(n + 2):not(h1) { - display: block; - margin-top: var(--pi-spacing-x-large); - } - & > h1 { - margin-top: var(--pi-spacing-xxxx-large); - } - } - h1 { - & > span { - font: { - size: var(--pi-font-size-xx-large); - weight: 700; - } - } - } - ul { - li { - h3 { - & > span { - font: { - size: var(--pi-font-size-x-large); - } - } - } - } - } -} -// Fonts -.pi-layout, -.cdk-overlay-container { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - &::-webkit-scrollbar { - display: none; - } -} - -.pi-domain-component { - &.pi-component { - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-x-large); - } - } -} - -p { - margin-top: 0; - margin-bottom: 0; - line-height: normal; -} - -p + p { - margin-top: var(--pi-spacing-medium); -} - -address { - margin-bottom: 0; - font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 0; -} - -ul { - padding: 0; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -li { - list-style-position: inside; -} - -li + li { - margin-top: var(--pi-spacing-medium); -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; -} - -// EN -html[dir='ltr'] { - dd { - margin-left: 0; - } -} - -// AR -html[dir='rtl'] { - dd { - margin-right: 0; - } -} - -blockquote { - margin: 0; -} - -b, -strong { - font-weight: 700; -} - -small { - font-size: 80%; -} - -// all browsers. -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -// Hr -hr { - height: var(--pi-spacing-xxx-small); - max-width: 4.5rem; - border-radius: 0.25rem; - border: unset; - &.pi-color__primary { - background-color: var(--pi-color-primary); - } - &.pi-color__accent { - background-color: var(--pi-color-accent); - } - &.pi-color__warn { - background-color: var(--pi-color-warn); - } -} - -// Links -a { - text-decoration: none; - background-color: transparent; - - &:hover { - text-decoration: underline; - } -} - -a:not([href]):not([tabindex]) { - text-decoration: none; - - &:hover, - &:focus { - color: inherit; - text-decoration: none; - } - - &:focus { - &:not(button) { - outline: 0; - } - } -} - -// Code -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - font-size: 1em; -} - -// Figures -figure { - margin: 0; -} - -// Images and content -img { - vertical-align: middle; - border-style: none; -} - -svg { - overflow: hidden; - vertical-align: middle; -} - -// Tables -table { - border-collapse: collapse; -} - -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - caption-side: bottom; -} - -// EN -html[dir='ltr'] { - caption { - text-align: left; - } -} - -// AR -html[dir='rtl'] { - caption { - text-align: right; - } -} - -th { - text-align: inherit; -} - -// Forms -label { - display: inline-block; -} - -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -button, -input { - overflow: visible; -} - -:focus-visible, -:focus { - &:not(.pi-button__appearance--outline) { - outline: none !important; - } -} - -button, -select { - text-transform: none; -} - -select { - word-wrap: normal; -} - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type='radio'], -input[type='checkbox'] { - box-sizing: border-box; - padding: 0; -} - -input[type='date'], -input[type='time'], -input[type='datetime-local'], -input[type='month'] { - -webkit-appearance: listbox; -} - -input[type='search']::-webkit-search-decoration, -input[type='search']::-webkit-search-cancel-button, -input[type='search']::-webkit-search-results-button, -input[type='search']::-webkit-search-results-decoration { - display: none; -} - -textarea { - overflow: auto; - resize: vertical; -} - -input, -select, -textarea { - &:-webkit-autofill { - border: none; - -webkit-text-fill-color: var(--pi-color-grey); - box-shadow: none; - -webkit-box-shadow: none; - transition: background-color 5000s ease-in-out 0s; - background-color: white; - .mat-icon { - color: var(--pi-color-grey-200); - } - - &:hover, - &:focus { - border: none; - -webkit-text-fill-color: var(--pi-color-grey); - box-shadow: 0 0 0 62.5rem transparent inset; - -webkit-box-shadow: 0 0 0 62.5rem transparent inset; - transition: background-color 5000s ease-in-out 0s; - background-color: white; - .mat-icon { - color: var(--pi-color-grey); - } - } - } -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - -webkit-text-fill-color: var(--pi-color-grey); - box-shadow: 0 0 0 62.5rem white inset; - -webkit-box-shadow: 0 0 0 62.5rem white inset; - -webkit-transition: background-color 5000s ease-in-out 0s; - transition: background-color 5000s ease-in-out 0s; - background-color: white !important; -} - -fieldset { - all: unset; - width: -webkit-fill-available; -} - -progress { - vertical-align: baseline; -} - -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -[type='search'] { - outline-offset: -0.125rem; - -webkit-appearance: none; -} - -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; -} - -template { - display: none; -} - -[hidden] { - display: none !important; -} - -// Wrapper common -.pi-wrapper { - display: block; -} -.pi-shell { - & > div { - &:not(.is-fullscreen) { - // Generic Scroll - &::-webkit-scrollbar { - width: var(--pi-spacing-xxx-small); - } - - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba($color: #8695b5, $alpha: 0.4); - border-radius: var(--pi-border-radius-small); - - &:hover { - transition: var(--pi-animation); - background-color: rgba($color: #8695b5, $alpha: 0.6); - } - } - } - } -} - -// Generic Scroll -::-webkit-scrollbar { - width: var(--pi-spacing-xxx-small); -} - -::-webkit-scrollbar-track { - box-shadow: none; -} - -::-webkit-scrollbar-thumb { - background-color: rgba($color: #8695b5, $alpha: 0.3); - border-radius: var(--pi-border-radius-small); - - &:hover { - transition: var(--pi-animation); - background-color: rgba($color: #8695b5, $alpha: 0.5); - } -} - -button, -.pi-input, -[class*='mat-'] { - display: block; -} - -html { - .intercom-lightweight-app-launcher { - background: var(--pi-color-accent-300); - } - // Mobile - &.is-mobile { - .intercom-lightweight-app-launcher { - transform: scale(0.9); - } - } - // Small device - &:not(.is-desktop) { - @media screen and (max-width: 62rem) { - .intercom-lightweight-app-launcher { - bottom: 5.75rem; - left: 1rem; - } - } - } - &:not(.is-mobile) { - @media screen and (min-width: 62rem) { - &.is-tablet__large { - .intercom-lightweight-app-launcher { - left: 3.75rem; - bottom: 5.625rem; - } - } - &.is-desktop { - .is-fullscreen { - .intercom-lightweight-app-launcher { - left: 1.5rem; - bottom: 1.5rem; - } - } - :not(.is-fullscreen) { - .intercom-lightweight-app-launcher { - right: 1.5rem; - bottom: 1.5rem; - } - } - } - } - } -} - -@media screen and (max-width: 62rem) { - #hubspot-messages-iframe-container { - &.widget-align-right { - display: none !important; - } - } -} +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + font-size: 1rem; + scroll-behavior: smooth; +} + +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; +} + +// Body +body { + margin: 0; + -ms-overflow-style: none; + line-height: 1.4; + -webkit-font-smoothing: antialiased; + color: var(--pi-color-grey-900); + scrollbar-width: none; + color: var(--pi-color-grey-900); + scroll-behavior: smooth; + overflow-x: hidden; + &::-webkit-scrollbar { + display: none; + } + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + size: 0.9375rem; + weight: 300; + } +} + +// EN +html[dir='ltr'] { + body { + text-align: left; + } +} + +// AR +html[dir='rtl'] { + body { + text-align: right; + } +} + +[tabindex='-1']:focus { + outline: 0 !important; +} + +// Content grouping +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +// Typography +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0; + font-size: inherit; + font-weight: inherit; + line-height: 133.33%; +} + +a { + color: var(--pi-color-primary); +} + +.pi-inner-blog { + & > div { + & > *:nth-child(n + 2):not(h1) { + display: block; + margin-top: var(--pi-spacing-x-large); + } + & > h1 { + margin-top: var(--pi-spacing-xxxx-large); + } + } + h1 { + & > span { + font: { + size: var(--pi-font-size-xx-large); + weight: 700; + } + } + } + ul { + li { + h3 { + & > span { + font: { + size: var(--pi-font-size-x-large); + } + } + } + } + } +} +// Fonts +.pi-layout, +.cdk-overlay-container { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + &::-webkit-scrollbar { + display: none; + } +} + +.pi-domain-component { + &.pi-component { + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-x-large); + } + } +} + +p { + margin-top: 0; + margin-bottom: 0; + line-height: normal; +} + +p + p { + margin-top: var(--pi-spacing-medium); +} + +address { + margin-bottom: 0; + font-style: normal; + line-height: inherit; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 0; +} + +ul { + padding: 0; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +li { + list-style-position: inside; +} + +li + li { + margin-top: var(--pi-spacing-medium); +} + +dt { + font-weight: 700; +} + +dd { + margin-bottom: 0.5rem; +} + +// EN +html[dir='ltr'] { + dd { + margin-left: 0; + } +} + +// AR +html[dir='rtl'] { + dd { + margin-right: 0; + } +} + +blockquote { + margin: 0; +} + +b, +strong { + font-weight: 700; +} + +small { + font-size: 80%; +} + +// all browsers. +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +// Hr +hr { + height: var(--pi-spacing-xxx-small); + max-width: 4.5rem; + border-radius: 0.25rem; + border: unset; + &.pi-color__primary { + background-color: var(--pi-color-primary); + } + &.pi-color__accent { + background-color: var(--pi-color-accent); + } + &.pi-color__warn { + background-color: var(--pi-color-warn); + } +} + +// Links +a { + text-decoration: none; + background-color: transparent; + + &:hover { + text-decoration: underline; + } +} + +a:not([href]):not([tabindex]) { + text-decoration: none; + + &:hover, + &:focus { + color: inherit; + text-decoration: none; + } + + &:focus { + &:not(button) { + outline: 0; + } + } +} + +// Code +code, +kbd, +samp { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + font-size: 1em; +} + +// Figures +figure { + margin: 0; +} + +// Images and content +img { + vertical-align: middle; + border-style: none; +} + +svg { + overflow: hidden; + vertical-align: middle; +} + +// Tables +table { + border-collapse: collapse; +} + +caption { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + caption-side: bottom; +} + +// EN +html[dir='ltr'] { + caption { + text-align: left; + } +} + +// AR +html[dir='rtl'] { + caption { + text-align: right; + } +} + +th { + text-align: inherit; +} + +// Forms +label { + display: inline-block; +} + +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +button, +input { + overflow: visible; +} + +:focus-visible, +:focus { + &:not(.pi-button__appearance--outline) { + outline: none !important; + } +} + +button, +select { + text-transform: none; +} + +select { + word-wrap: normal; +} + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type='radio'], +input[type='checkbox'] { + box-sizing: border-box; + padding: 0; +} + +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { + -webkit-appearance: listbox; +} + +input[type='search']::-webkit-search-decoration, +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-results-button, +input[type='search']::-webkit-search-results-decoration { + display: none; +} + +textarea { + overflow: auto; + resize: vertical; +} + +input, +select, +textarea { + &:-webkit-autofill { + border: none; + -webkit-text-fill-color: var(--pi-color-grey); + box-shadow: none; + -webkit-box-shadow: none; + transition: background-color 5000s ease-in-out 0s; + background-color: white; + .mat-icon { + color: var(--pi-color-grey-200); + } + + &:hover, + &:focus { + border: none; + -webkit-text-fill-color: var(--pi-color-grey); + box-shadow: 0 0 0 62.5rem transparent inset; + -webkit-box-shadow: 0 0 0 62.5rem transparent inset; + transition: background-color 5000s ease-in-out 0s; + background-color: white; + .mat-icon { + color: var(--pi-color-grey); + } + } + } +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + -webkit-text-fill-color: var(--pi-color-grey); + box-shadow: 0 0 0 62.5rem white inset; + -webkit-box-shadow: 0 0 0 62.5rem white inset; + -webkit-transition: background-color 5000s ease-in-out 0s; + transition: background-color 5000s ease-in-out 0s; + background-color: white !important; +} + +fieldset { + all: unset; + width: -webkit-fill-available; +} + +progress { + vertical-align: baseline; +} + +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +[type='search'] { + outline-offset: -0.125rem; + -webkit-appearance: none; +} + +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + +template { + display: none; +} + +[hidden] { + display: none !important; +} + +// Wrapper common +.pi-wrapper { + display: block; +} +.pi-shell { + & > div { + &:not(.is-fullscreen) { + // Generic Scroll + &::-webkit-scrollbar { + width: var(--pi-spacing-xxx-small); + } + + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba($color: #8695b5, $alpha: 0.4); + border-radius: var(--pi-border-radius-small); + + &:hover { + transition: var(--pi-animation); + background-color: rgba($color: #8695b5, $alpha: 0.6); + } + } + } + } +} + +// Generic Scroll +::-webkit-scrollbar { + width: var(--pi-spacing-xxx-small); +} + +::-webkit-scrollbar-track { + box-shadow: none; +} + +::-webkit-scrollbar-thumb { + background-color: rgba($color: #8695b5, $alpha: 0.3); + border-radius: var(--pi-border-radius-small); + + &:hover { + transition: var(--pi-animation); + background-color: rgba($color: #8695b5, $alpha: 0.5); + } +} + +button, +.pi-input, +[class*='mat-'] { + display: block; +} + +html { + .intercom-lightweight-app-launcher { + background: var(--pi-color-accent-300); + } + // Mobile + &.is-mobile { + .intercom-lightweight-app-launcher { + transform: scale(0.9); + } + } + // Small device + &:not(.is-desktop) { + @media screen and (max-width: 62rem) { + .intercom-lightweight-app-launcher { + bottom: 5.75rem; + left: 1rem; + } + } + } + &:not(.is-mobile) { + @media screen and (min-width: 62rem) { + &.is-tablet__large { + .intercom-lightweight-app-launcher { + left: 3.75rem; + bottom: 5.625rem; + } + } + &.is-desktop { + .is-fullscreen { + .intercom-lightweight-app-launcher { + left: 1.5rem; + bottom: 1.5rem; + } + } + :not(.is-fullscreen) { + .intercom-lightweight-app-launcher { + right: 1.5rem; + bottom: 1.5rem; + } + } + } + } + } +} + +@media screen and (max-width: 62rem) { + #hubspot-messages-iframe-container { + &.widget-align-right { + display: none !important; + } + } +} diff --git a/libs/ui/src/lib/styles/common/base/_pi-tipography.scss b/libs/ui/src/lib/styles/common/base/_pi-tipography.scss index 3825019..a29de24 100644 --- a/libs/ui/src/lib/styles/common/base/_pi-tipography.scss +++ b/libs/ui/src/lib/styles/common/base/_pi-tipography.scss @@ -1,119 +1,119 @@ -// Light - 300 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht') - format('svg'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -// Light italic - 300 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2') - format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff') - format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf') - format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv') - format('svg'); - font-weight: 300; - font-style: italic; - font-display: swap; -} - -// Regular - 400 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch') - format('svg'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -// Regular italic - 400 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2') - format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf') - format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv') - format('svg'); - font-weight: 400; - font-style: italic; - font-display: swap; -} - -// Medium - 600 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig') - format('svg'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -// Bold - 700 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett') - format('svg'); - font-weight: 700; - font-style: normal; - font-display: swap; -} - -// Black - 800 -@font-face { - font-family: 'Soehne'; - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot'); - src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix') - format('embedded-opentype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2') - format('woff2'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff') - format('woff'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf') - format('truetype'), - url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett') - format('svg'); - font-weight: 800; - font-style: normal; - font-display: swap; -} +// Light - 300 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht') + format('svg'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +// Light italic - 300 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2') + format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff') + format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf') + format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv') + format('svg'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +// Regular - 400 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch') + format('svg'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +// Regular italic - 400 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2') + format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf') + format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv') + format('svg'); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +// Medium - 600 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig') + format('svg'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +// Bold - 700 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett') + format('svg'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +// Black - 800 +@font-face { + font-family: 'Soehne'; + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot'); + src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix') + format('embedded-opentype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2') + format('woff2'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff') + format('woff'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf') + format('truetype'), + url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett') + format('svg'); + font-weight: 800; + font-style: normal; + font-display: swap; +} diff --git a/libs/ui/src/lib/styles/common/base/index.scss b/libs/ui/src/lib/styles/common/base/index.scss index 35d8740..d69ea58 100644 --- a/libs/ui/src/lib/styles/common/base/index.scss +++ b/libs/ui/src/lib/styles/common/base/index.scss @@ -1,2 +1,2 @@ -@forward 'pi-reset'; -@forward 'pi-tipography'; +@forward 'pi-reset'; +@forward 'pi-tipography'; diff --git a/libs/ui/src/lib/styles/common/components/_pi-accordion.scss b/libs/ui/src/lib/styles/common/components/_pi-accordion.scss index 335fa6f..c61e17d 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-accordion.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-accordion.scss @@ -1,116 +1,116 @@ -@mixin accordionHeaderDescription($white-space: wrap) { - .pi-layout { - &.pi-layout__02-full-width { - .pi-accordion { - & > .pi-accordion-item { - & > .pi-accordion-item-content { - &.pi-accordion-item-content__header { - & > .pi-text-viewer { - & > article { - & > span { - white-space: $white-space; - } - } - } - } - } - } - } - } - } - .pi-accordion { - & > .pi-accordion-item { - & > .pi-accordion-item-content { - &.pi-accordion-item-content__header { - & > .pi-text-viewer { - overflow: hidden; - & > article { - overflow: hidden; - & > span { - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - } - } - } -} - -.pi-accordion { - .pi-note-content__label { - font: { - size: var(--pi-font-size-x-small); - } - } - - // Horizontal - &.pi-accordion__direction--horizontal { - & > * { - & > .pi-accordion-item-content { - &.pi-accordion-item-content__header { - &.is-expanded { - .pi-list-item-content { - &.pi-list-item-content__left { - font: { - weight: 600; - } - } - } - } - &:not(.is-disabled) { - &:hover { - * { - cursor: pointer; - } - } - } - } - } - } - } - // Type - // Default - &:not(.pi-accordion__appearance--outline) { - // Footer - & > .pi-accordion-footer { - padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium); - } - } -} - -html { - &.is-mobile { - @include accordionHeaderDescription; - .pi-layout { - &.pi-layout__main { - .pi-accordion { - // Default (Vertical) - &:not(.pi-accordion__direction--horizontal) { - // Accordion item - & > .pi-accordion-item { - & > .pi-accordion-item-content__header { - &.has-status { - flex-direction: column-reverse; - align-items: flex-start; - gap: var(--pi-spacing-x-large); - & > aside { - width: 100%; - justify-content: space-between; - & > span { - display: none; - } - } - } - } - } - } - } - } - } - } - &:not(.is-mobile) { - @include accordionHeaderDescription(nowrap); - } -} +@mixin accordionHeaderDescription($white-space: wrap) { + .pi-layout { + &.pi-layout__02-full-width { + .pi-accordion { + & > .pi-accordion-item { + & > .pi-accordion-item-content { + &.pi-accordion-item-content__header { + & > .pi-text-viewer { + & > article { + & > span { + white-space: $white-space; + } + } + } + } + } + } + } + } + } + .pi-accordion { + & > .pi-accordion-item { + & > .pi-accordion-item-content { + &.pi-accordion-item-content__header { + & > .pi-text-viewer { + overflow: hidden; + & > article { + overflow: hidden; + & > span { + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + } + } + } +} + +.pi-accordion { + .pi-note-content__label { + font: { + size: var(--pi-font-size-x-small); + } + } + + // Horizontal + &.pi-accordion__direction--horizontal { + & > * { + & > .pi-accordion-item-content { + &.pi-accordion-item-content__header { + &.is-expanded { + .pi-list-item-content { + &.pi-list-item-content__left { + font: { + weight: 600; + } + } + } + } + &:not(.is-disabled) { + &:hover { + * { + cursor: pointer; + } + } + } + } + } + } + } + // Type + // Default + &:not(.pi-accordion__appearance--outline) { + // Footer + & > .pi-accordion-footer { + padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium); + } + } +} + +html { + &.is-mobile { + @include accordionHeaderDescription; + .pi-layout { + &.pi-layout__main { + .pi-accordion { + // Default (Vertical) + &:not(.pi-accordion__direction--horizontal) { + // Accordion item + & > .pi-accordion-item { + & > .pi-accordion-item-content__header { + &.has-status { + flex-direction: column-reverse; + align-items: flex-start; + gap: var(--pi-spacing-x-large); + & > aside { + width: 100%; + justify-content: space-between; + & > span { + display: none; + } + } + } + } + } + } + } + } + } + } + &:not(.is-mobile) { + @include accordionHeaderDescription(nowrap); + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-card.scss b/libs/ui/src/lib/styles/common/components/_pi-card.scss index b10f07f..54b40a2 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-card.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-card.scss @@ -1,545 +1,545 @@ -// Block conmtents -// Top -@mixin cardContentTop { - &.pi-card-content__top { - display: flex; - } -} -// Center -@mixin cardContentCenter { - &.pi-card-content__center { - display: flex; - flex-direction: column; - } -} -// Bottom -@mixin cardContentBottom { - &.pi-card-content__bottom { - display: flex; - flex-direction: column; - justify-content: space-between; - } -} - -// Flex -// Align items -@mixin cardAlignment($aligment: flex-start) { - align-items: $aligment; - .pi-card-content { - justify-content: $aligment; - } -} -// Gap -@mixin cardGap($gap) { - gap: var(--pi-spacing-#{$gap}); -} - -// Spacings -// Pading -@mixin cardPadding($padding) { - padding: var(--pi-spacing-#{$padding}); -} -// Inner Pading -@mixin cardInnerPadding($large-padding: unset, $small-padding) { - padding: unset; - - &:not(.has-equal-inner-padding) { - & > *:first-child { - padding-top: var(--pi-spacing-#{$large-padding}); - padding-left: var(--pi-spacing-#{$large-padding}); - padding-bottom: var(--pi-spacing-#{$large-padding}); - padding-right: var(--pi-spacing-#{$large-padding}); - border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; - } - - & > *:nth-child(2) { - &:not(:last-child) { - padding-top: var(--pi-spacing-#{$small-padding}); - padding-left: var(--pi-spacing-#{$large-padding}); - padding-bottom: 0; - padding-right: var(--pi-spacing-#{$large-padding}); - } - } - - & > *:last-child { - padding-top: var(--pi-spacing-#{$small-padding}); - padding-bottom: var(--pi-spacing-#{$small-padding}); - border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); - } - - & > * { - padding: 0 var(--pi-spacing-#{$large-padding}) var(--pi-spacing-#{$small-padding}); - } - } - &.has-equal-inner-padding { - & > *:first-child { - padding-left: var(--pi-spacing-#{$large-padding}); - padding-top: var(--pi-spacing-#{$large-padding}); - padding-bottom: var(--pi-spacing-#{$small-padding}); - padding-right: var(--pi-spacing-#{$large-padding}); - border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; - } - - & > *:last-child { - padding-top: var(--pi-spacing-#{$large-padding}); - padding-bottom: var(--pi-spacing-#{$large-padding}); - border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); - } - - & > * { - &:not(:first-child) { - padding: var(--pi-spacing-#{$small-padding}) var(--pi-spacing-#{$large-padding}) - var(--pi-spacing-#{$small-padding}); - } - } - } -} - -// Card -@mixin cardColor($color) { - // Mode Light - &.pi-color__mode--light { - // Light Translucent - &[class*='pi-color__opacity'] { - // Light Glass gradient - background-image: var(--pi-gradient-#{$color}-light-rgba); - &.is-clickable { - &:hover { - // Light Glass gradient hover - background-image: var(--pi-gradient-#{$color}-light-rgba-hover); - } - } - } - - // Light & Is stroked - &.is-stroked { - border-color: var(--pi-color-#{$color}-75); - &.is-clickable { - &:hover { - border-color: var(--pi-color-#{$color}-200); - } - } - } - } - - // Mode Dark - &.pi-color__mode--dark { - // Dark Translucent - &[class*='pi-color__opacity'] { - // Glass gradient - background-image: var(--pi-gradient-#{$color}-dark-rgba); - // Dark Translucent Gradient & Is Stroked - &.is-stroked { - border-color: var(--pi-color-#{$color}); - } - &.is-clickable { - &:hover { - // Light Glass gradient hover - background-image: var(--pi-gradient-#{$color}-dark-rgba-hover); - // Dark Translucent Gradient & Is Stroked Hover - &.is-stroked { - border-color: var(--pi-color-#{$color}-900); - } - } - } - } - } -} - -@mixin privateOpaqueCardColor($color) { - // Mode light - &.pi-color__mode--light { - // Light Opaque - &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { - // Solid light color - background-color: var(--pi-color-#{$color}-25); - } - } - // Mode dark - &.pi-color__mode--dark { - // Dark Opaque - &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { - background-color: var(--pi-color-#{$color}); - // Solid Dark Color & Is Stroked - &.is-stroked { - border-color: var(--pi-color-#{$color}-900); - } - } - } - // Density - // 10 - &.pi-color__density--10 { - // Solid light color 10 - background-color: var(--pi-color-#{$color}-10); - } - // 50 - &.pi-color__density--50 { - // Solid light color 50 - background-color: var(--pi-color-#{$color}-50); - } - // 75 - &.pi-color__density--75 { - // Solid light color 75 - background-color: var(--pi-color-#{$color}-75); - } - // 100 - &.pi-color__density--100 { - // Solid light color 100 - background-color: var(--pi-color-#{$color}-100); - } - // 200 - &.pi-color__density--200 { - // Solid light color 200 - background-color: var(--pi-color-#{$color}-200); - } - // 300 - &.pi-color__density--300 { - // Solid light color 300 - background-color: var(--pi-color-#{$color}-300); - } - // 400 - &.pi-color__density--400 { - // Solid light color 400 - background-color: var(--pi-color-#{$color}-400); - } - // 900 - &.pi-color__density--900 { - // Solid light color 900 - background-color: var(--pi-color-#{$color}-900); - } -} - -@mixin publicOpaqueCardColor($color) { - // Mode light - &.pi-color__mode--light { - // Light Opaque - &:not([class*='pi-color__opacity']) { - // Opaque light gradient - background-image: var(--pi-gradient-#{$color}-light); - } - } - // Mode dark - &.pi-color__mode--dark { - &:not([class*='pi-color__opacity']) { - // Opaque Light Gradient - background-image: var(--pi-gradient-#{$color}-dark); - // Dark Opaque Gradient & Is Stroked - &.is-stroked { - border-color: var(--pi-color-#{$color}); - } - } - } -} - -@mixin cardColorWhite { - // Light Translucent - &[class*='pi-color__opacity'] { - // Light Glass color - background-color: var(--pi-color-white-rgba-03); - &.is-clickable { - &:hover { - // Light Glass color hover - background-color: var(--pi-color-white-rgba-06); - } - } - } - // Light Opaque - &:not([class*='pi-color__opacity']) { - background-color: var(--pi-color-white); - } - // Light & Is stroked - &.is-stroked { - border-color: var(--pi-color-white-900); - } -} - -// Card contents -@mixin cardContentColor($background-color) { - &:not([class*='pi-color__density']) { - background-color: var(--pi-color-#{$background-color}); - } - - &[class*='pi-color__density'] { - &.pi-card-content__top { - border-bottom: 1px solid; - border-bottom-color: var(--pi-color-white); - } - &:not(.pi-color__density--10):not(.pi-color__density--25) { - background-color: var(--pi-color-#{$background-color}-50); - } - &.pi-color__density--10 { - background-color: var(--pi-color-#{$background-color}-10); - } - &.pi-color__density--25 { - background-color: var(--pi-color-#{$background-color}-25); - } - } -} - -// Card -.pi-card { - &:not(.pi-grid-item) { - display: flex; - flex-direction: column; - justify-content: space-between; - width: -webkit-fill-available; - padding: var(--pi-spacing-xx-large); - border-radius: var(--pi-border-radius-large); - transition: var(--pi-animation); - - &:hover { - transition: var(--pi-animation); - } - &:not(:hover) { - transition: var(--pi-animation); - } - - // Is Stroked - &.is-stroked { - border: 1px solid; - } - - // Is Clickable - &.is-clickable { - cursor: pointer; - } - - // Glass - &[class*='pi-color__opacity'] { - -webkit-backdrop-filter: blur(0.75rem); - backdrop-filter: blur(0.75rem); - } - - // Has Shadow - &.has-shadow { - box-shadow: var(--pi-box-shadow-panel); - } - &:not(.has-shadow) { - box-shadow: none; - } - - // Alignment - // Flex-start - &.pi-card__align-items--flex-start { - @include cardAlignment; - } - // Center - &.pi-card__align-items--center { - @include cardAlignment(center); - } - // Flex-end - &.pi-card__align-items--flex-end { - @include cardAlignment(flex-end); - } - - // Gap - // S - &.pi-card__gap--s { - @include cardGap(small); - } - // M - &.pi-card__gap--m { - @include cardGap(medium); - } - // L - &.pi-card__gap--l { - @include cardGap(large); - } - // XL - &.pi-card__gap--xl { - @include cardGap(x-large); - } - // XXL - &.pi-card__gap--xxl { - @include cardGap(xx-large); - } - // XXXL - &.pi-card__gap--xxxl { - @include cardGap(xxx-large); - } - // Padding - // XS - &.pi-card__padding--xxs { - @include cardPadding(xx-small); - } - // XS - &.pi-card__padding--xs { - @include cardPadding(x-small); - } - // S - &.pi-card__padding--s { - @include cardPadding(small); - } - // M - &.pi-card__padding--m { - @include cardPadding(medium); - } - // L - &.pi-card__padding--l { - @include cardPadding(large); - } - // XL - &.pi-card__padding--xl { - @include cardPadding(x-large); - } - // XXL - &.pi-card__padding--xxl { - @include cardPadding(xx-large); - } - - // Inner padding - // XS - &.pi-card__inner-padding--xxs { - @include cardInnerPadding(xx-small, xxxx-small); - } - // XS - &.pi-card__inner-padding--xs { - @include cardInnerPadding(x-small, xxx-small); - } - // S - &.pi-card__inner-padding--s { - @include cardInnerPadding(small, xx-small); - } - // M - &.pi-card__inner-padding--m { - @include cardInnerPadding(medium, x-small); - } - // L - &.pi-card__inner-padding--l { - @include cardInnerPadding(large, small); - } - // XL - &.pi-card__inner-padding--xl { - @include cardInnerPadding(x-large, medium); - } - // XXL - &.pi-card__inner-padding--xxl { - @include cardInnerPadding(xx-large, x-large); - } - - // Color - // Primary - &.pi-color__primary { - @include cardColor(primary); - } - // Accent - &.pi-color__accent { - @include cardColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include cardColor(highlighted); - } - // Grey - &.pi-color__grey { - @include cardColor(grey); - } - // White - &.pi-color__white { - @include cardColorWhite; - } - } - - &.is-public { - // Color - // Primary - &.pi-color__primary { - @include publicOpaqueCardColor(primary); - } - // Accent - &.pi-color__accent { - @include publicOpaqueCardColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include publicOpaqueCardColor(highlighted); - } - // Grey - &.pi-color__grey { - @include publicOpaqueCardColor(grey); - } - } - - &.is-private, - &:not(.is-public) { - // Color - // Primary - &.pi-color__primary { - @include privateOpaqueCardColor(primary); - } - // Accent - &.pi-color__accent { - @include privateOpaqueCardColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include privateOpaqueCardColor(highlighted); - } - // Grey - &.pi-color__grey { - @include privateOpaqueCardColor(grey); - } - } - & > .pi-card-content { - &.pi-color__primary { - @include cardContentColor(primary); - } - // Accent - &.pi-color__accent { - @include cardContentColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include cardContentColor(highlighted); - } - // Grey - &.pi-color__grey { - @include cardContentColor(grey); - } - } -} - -.pi-shell__deale-website, -.is-public { - .pi-card { - // Color - // Primary - &.pi-color__primary { - @include publicOpaqueCardColor(primary); - } - // Accent - &.pi-color__accent { - @include publicOpaqueCardColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include publicOpaqueCardColor(highlighted); - } - // Grey - &.pi-color__grey { - @include publicOpaqueCardColor(grey); - } - } -} - -.is-private { - .pi-card { - // Color - // Primary - &.pi-color__primary { - @include privateOpaqueCardColor(primary); - } - // Accent - &.pi-color__accent { - @include privateOpaqueCardColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include privateOpaqueCardColor(highlighted); - } - // Grey - &.pi-color__grey { - @include privateOpaqueCardColor(grey); - } - } -} +// Block conmtents +// Top +@mixin cardContentTop { + &.pi-card-content__top { + display: flex; + } +} +// Center +@mixin cardContentCenter { + &.pi-card-content__center { + display: flex; + flex-direction: column; + } +} +// Bottom +@mixin cardContentBottom { + &.pi-card-content__bottom { + display: flex; + flex-direction: column; + justify-content: space-between; + } +} + +// Flex +// Align items +@mixin cardAlignment($aligment: flex-start) { + align-items: $aligment; + .pi-card-content { + justify-content: $aligment; + } +} +// Gap +@mixin cardGap($gap) { + gap: var(--pi-spacing-#{$gap}); +} + +// Spacings +// Pading +@mixin cardPadding($padding) { + padding: var(--pi-spacing-#{$padding}); +} +// Inner Pading +@mixin cardInnerPadding($large-padding: unset, $small-padding) { + padding: unset; + + &:not(.has-equal-inner-padding) { + & > *:first-child { + padding-top: var(--pi-spacing-#{$large-padding}); + padding-left: var(--pi-spacing-#{$large-padding}); + padding-bottom: var(--pi-spacing-#{$large-padding}); + padding-right: var(--pi-spacing-#{$large-padding}); + border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; + } + + & > *:nth-child(2) { + &:not(:last-child) { + padding-top: var(--pi-spacing-#{$small-padding}); + padding-left: var(--pi-spacing-#{$large-padding}); + padding-bottom: 0; + padding-right: var(--pi-spacing-#{$large-padding}); + } + } + + & > *:last-child { + padding-top: var(--pi-spacing-#{$small-padding}); + padding-bottom: var(--pi-spacing-#{$small-padding}); + border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); + } + + & > * { + padding: 0 var(--pi-spacing-#{$large-padding}) var(--pi-spacing-#{$small-padding}); + } + } + &.has-equal-inner-padding { + & > *:first-child { + padding-left: var(--pi-spacing-#{$large-padding}); + padding-top: var(--pi-spacing-#{$large-padding}); + padding-bottom: var(--pi-spacing-#{$small-padding}); + padding-right: var(--pi-spacing-#{$large-padding}); + border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; + } + + & > *:last-child { + padding-top: var(--pi-spacing-#{$large-padding}); + padding-bottom: var(--pi-spacing-#{$large-padding}); + border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); + } + + & > * { + &:not(:first-child) { + padding: var(--pi-spacing-#{$small-padding}) var(--pi-spacing-#{$large-padding}) + var(--pi-spacing-#{$small-padding}); + } + } + } +} + +// Card +@mixin cardColor($color) { + // Mode Light + &.pi-color__mode--light { + // Light Translucent + &[class*='pi-color__opacity'] { + // Light Glass gradient + background-image: var(--pi-gradient-#{$color}-light-rgba); + &.is-clickable { + &:hover { + // Light Glass gradient hover + background-image: var(--pi-gradient-#{$color}-light-rgba-hover); + } + } + } + + // Light & Is stroked + &.is-stroked { + border-color: var(--pi-color-#{$color}-75); + &.is-clickable { + &:hover { + border-color: var(--pi-color-#{$color}-200); + } + } + } + } + + // Mode Dark + &.pi-color__mode--dark { + // Dark Translucent + &[class*='pi-color__opacity'] { + // Glass gradient + background-image: var(--pi-gradient-#{$color}-dark-rgba); + // Dark Translucent Gradient & Is Stroked + &.is-stroked { + border-color: var(--pi-color-#{$color}); + } + &.is-clickable { + &:hover { + // Light Glass gradient hover + background-image: var(--pi-gradient-#{$color}-dark-rgba-hover); + // Dark Translucent Gradient & Is Stroked Hover + &.is-stroked { + border-color: var(--pi-color-#{$color}-900); + } + } + } + } + } +} + +@mixin privateOpaqueCardColor($color) { + // Mode light + &.pi-color__mode--light { + // Light Opaque + &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { + // Solid light color + background-color: var(--pi-color-#{$color}-25); + } + } + // Mode dark + &.pi-color__mode--dark { + // Dark Opaque + &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { + background-color: var(--pi-color-#{$color}); + // Solid Dark Color & Is Stroked + &.is-stroked { + border-color: var(--pi-color-#{$color}-900); + } + } + } + // Density + // 10 + &.pi-color__density--10 { + // Solid light color 10 + background-color: var(--pi-color-#{$color}-10); + } + // 50 + &.pi-color__density--50 { + // Solid light color 50 + background-color: var(--pi-color-#{$color}-50); + } + // 75 + &.pi-color__density--75 { + // Solid light color 75 + background-color: var(--pi-color-#{$color}-75); + } + // 100 + &.pi-color__density--100 { + // Solid light color 100 + background-color: var(--pi-color-#{$color}-100); + } + // 200 + &.pi-color__density--200 { + // Solid light color 200 + background-color: var(--pi-color-#{$color}-200); + } + // 300 + &.pi-color__density--300 { + // Solid light color 300 + background-color: var(--pi-color-#{$color}-300); + } + // 400 + &.pi-color__density--400 { + // Solid light color 400 + background-color: var(--pi-color-#{$color}-400); + } + // 900 + &.pi-color__density--900 { + // Solid light color 900 + background-color: var(--pi-color-#{$color}-900); + } +} + +@mixin publicOpaqueCardColor($color) { + // Mode light + &.pi-color__mode--light { + // Light Opaque + &:not([class*='pi-color__opacity']) { + // Opaque light gradient + background-image: var(--pi-gradient-#{$color}-light); + } + } + // Mode dark + &.pi-color__mode--dark { + &:not([class*='pi-color__opacity']) { + // Opaque Light Gradient + background-image: var(--pi-gradient-#{$color}-dark); + // Dark Opaque Gradient & Is Stroked + &.is-stroked { + border-color: var(--pi-color-#{$color}); + } + } + } +} + +@mixin cardColorWhite { + // Light Translucent + &[class*='pi-color__opacity'] { + // Light Glass color + background-color: var(--pi-color-white-rgba-03); + &.is-clickable { + &:hover { + // Light Glass color hover + background-color: var(--pi-color-white-rgba-06); + } + } + } + // Light Opaque + &:not([class*='pi-color__opacity']) { + background-color: var(--pi-color-white); + } + // Light & Is stroked + &.is-stroked { + border-color: var(--pi-color-white-900); + } +} + +// Card contents +@mixin cardContentColor($background-color) { + &:not([class*='pi-color__density']) { + background-color: var(--pi-color-#{$background-color}); + } + + &[class*='pi-color__density'] { + &.pi-card-content__top { + border-bottom: 1px solid; + border-bottom-color: var(--pi-color-white); + } + &:not(.pi-color__density--10):not(.pi-color__density--25) { + background-color: var(--pi-color-#{$background-color}-50); + } + &.pi-color__density--10 { + background-color: var(--pi-color-#{$background-color}-10); + } + &.pi-color__density--25 { + background-color: var(--pi-color-#{$background-color}-25); + } + } +} + +// Card +.pi-card { + &:not(.pi-grid-item) { + display: flex; + flex-direction: column; + justify-content: space-between; + width: -webkit-fill-available; + padding: var(--pi-spacing-xx-large); + border-radius: var(--pi-border-radius-large); + transition: var(--pi-animation); + + &:hover { + transition: var(--pi-animation); + } + &:not(:hover) { + transition: var(--pi-animation); + } + + // Is Stroked + &.is-stroked { + border: 1px solid; + } + + // Is Clickable + &.is-clickable { + cursor: pointer; + } + + // Glass + &[class*='pi-color__opacity'] { + -webkit-backdrop-filter: blur(0.75rem); + backdrop-filter: blur(0.75rem); + } + + // Has Shadow + &.has-shadow { + box-shadow: var(--pi-box-shadow-panel); + } + &:not(.has-shadow) { + box-shadow: none; + } + + // Alignment + // Flex-start + &.pi-card__align-items--flex-start { + @include cardAlignment; + } + // Center + &.pi-card__align-items--center { + @include cardAlignment(center); + } + // Flex-end + &.pi-card__align-items--flex-end { + @include cardAlignment(flex-end); + } + + // Gap + // S + &.pi-card__gap--s { + @include cardGap(small); + } + // M + &.pi-card__gap--m { + @include cardGap(medium); + } + // L + &.pi-card__gap--l { + @include cardGap(large); + } + // XL + &.pi-card__gap--xl { + @include cardGap(x-large); + } + // XXL + &.pi-card__gap--xxl { + @include cardGap(xx-large); + } + // XXXL + &.pi-card__gap--xxxl { + @include cardGap(xxx-large); + } + // Padding + // XS + &.pi-card__padding--xxs { + @include cardPadding(xx-small); + } + // XS + &.pi-card__padding--xs { + @include cardPadding(x-small); + } + // S + &.pi-card__padding--s { + @include cardPadding(small); + } + // M + &.pi-card__padding--m { + @include cardPadding(medium); + } + // L + &.pi-card__padding--l { + @include cardPadding(large); + } + // XL + &.pi-card__padding--xl { + @include cardPadding(x-large); + } + // XXL + &.pi-card__padding--xxl { + @include cardPadding(xx-large); + } + + // Inner padding + // XS + &.pi-card__inner-padding--xxs { + @include cardInnerPadding(xx-small, xxxx-small); + } + // XS + &.pi-card__inner-padding--xs { + @include cardInnerPadding(x-small, xxx-small); + } + // S + &.pi-card__inner-padding--s { + @include cardInnerPadding(small, xx-small); + } + // M + &.pi-card__inner-padding--m { + @include cardInnerPadding(medium, x-small); + } + // L + &.pi-card__inner-padding--l { + @include cardInnerPadding(large, small); + } + // XL + &.pi-card__inner-padding--xl { + @include cardInnerPadding(x-large, medium); + } + // XXL + &.pi-card__inner-padding--xxl { + @include cardInnerPadding(xx-large, x-large); + } + + // Color + // Primary + &.pi-color__primary { + @include cardColor(primary); + } + // Accent + &.pi-color__accent { + @include cardColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include cardColor(highlighted); + } + // Grey + &.pi-color__grey { + @include cardColor(grey); + } + // White + &.pi-color__white { + @include cardColorWhite; + } + } + + &.is-public { + // Color + // Primary + &.pi-color__primary { + @include publicOpaqueCardColor(primary); + } + // Accent + &.pi-color__accent { + @include publicOpaqueCardColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include publicOpaqueCardColor(highlighted); + } + // Grey + &.pi-color__grey { + @include publicOpaqueCardColor(grey); + } + } + + &.is-private, + &:not(.is-public) { + // Color + // Primary + &.pi-color__primary { + @include privateOpaqueCardColor(primary); + } + // Accent + &.pi-color__accent { + @include privateOpaqueCardColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include privateOpaqueCardColor(highlighted); + } + // Grey + &.pi-color__grey { + @include privateOpaqueCardColor(grey); + } + } + & > .pi-card-content { + &.pi-color__primary { + @include cardContentColor(primary); + } + // Accent + &.pi-color__accent { + @include cardContentColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include cardContentColor(highlighted); + } + // Grey + &.pi-color__grey { + @include cardContentColor(grey); + } + } +} + +.pi-shell__deale-website, +.is-public { + .pi-card { + // Color + // Primary + &.pi-color__primary { + @include publicOpaqueCardColor(primary); + } + // Accent + &.pi-color__accent { + @include publicOpaqueCardColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include publicOpaqueCardColor(highlighted); + } + // Grey + &.pi-color__grey { + @include publicOpaqueCardColor(grey); + } + } +} + +.is-private { + .pi-card { + // Color + // Primary + &.pi-color__primary { + @include privateOpaqueCardColor(primary); + } + // Accent + &.pi-color__accent { + @include privateOpaqueCardColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include privateOpaqueCardColor(highlighted); + } + // Grey + &.pi-color__grey { + @include privateOpaqueCardColor(grey); + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-divider.scss b/libs/ui/src/lib/styles/common/components/_pi-divider.scss index 1026d16..5e88b4b 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-divider.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-divider.scss @@ -1,105 +1,105 @@ -@mixin dividerIconSize($size) { - .pi-icon { - .mat-icon { - height: var(--pi-spacing-#{$size}) !important; - width: var(--pi-spacing-#{$size}) !important; - } - } -} - -@mixin dividerIconColor($icon-color) { - .pi-icon { - &:not(.pi-icon__appearance--fill) { - .mat-icon { - color: var(--pi-color-#{$icon-color}); - } - } - &.pi-icon__appearance--fill { - .mat-icon { - color: var(--pi-color-#{$icon-color}); - } - &.is-stroked { - border-color: var(--pi-color-#{$icon-color}); - } - } - } -} - -.pi-divider { - // Icon Color - &.pi-color__primary { - @include dividerIconColor(primary); - } - &.pi-color__accent { - @include dividerIconColor(accent); - } - &.pi-color__warn { - @include dividerIconColor(warn); - } - &.pi-color__success { - @include dividerIconColor(success); - } - &.pi-color__white { - @include dividerIconColor(white); - } - &.pi-color__black { - @include dividerIconColor(black); - } - &.pi-color__grey { - @include dividerIconColor(grey-100); - } - &.pi-color__highlighted { - @include dividerIconColor(highlighted); - } - &.pi-color__black-primary { - @include dividerIconColor(primary); - } - &.pi-color__primary-black { - @include dividerIconColor(black); - } - &.pi-color__black-accent { - @include dividerIconColor(accent); - } - &.pi-color__accent-black { - @include dividerIconColor(black); - } - &.pi-color__dark-black { - @include dividerIconColor(black); - } - &.pi-color__black-dark { - @include dividerIconColor(grey-400); - } - &.pi-color__grey-black { - @include dividerIconColor(black); - } - &.pi-color__black-grey { - @include dividerIconColor(grey-200); - } - &.pi-color__highlighted-grey { - @include dividerIconColor(grey-200); - } - &.pi-color__grey-highlighted { - @include dividerIconColor(highlighted); - } - // Icon size - // X small - &.pi-divider__icon-size--x-small { - @include dividerIconSize(large); - } - // small - &.pi-divider__icon-size--small { - @include dividerIconSize(x-large); - } - // medium - &.pi-divider__icon-size--medium { - @include dividerIconSize(xx-large); - } - // large - &.pi-divider__icon-size--large { - @include dividerIconSize(xxx-large); - } - // X large - &.pi-divider__icon-size--x-large { - @include dividerIconSize(xxxx-large); - } -} +@mixin dividerIconSize($size) { + .pi-icon { + .mat-icon { + height: var(--pi-spacing-#{$size}) !important; + width: var(--pi-spacing-#{$size}) !important; + } + } +} + +@mixin dividerIconColor($icon-color) { + .pi-icon { + &:not(.pi-icon__appearance--fill) { + .mat-icon { + color: var(--pi-color-#{$icon-color}); + } + } + &.pi-icon__appearance--fill { + .mat-icon { + color: var(--pi-color-#{$icon-color}); + } + &.is-stroked { + border-color: var(--pi-color-#{$icon-color}); + } + } + } +} + +.pi-divider { + // Icon Color + &.pi-color__primary { + @include dividerIconColor(primary); + } + &.pi-color__accent { + @include dividerIconColor(accent); + } + &.pi-color__warn { + @include dividerIconColor(warn); + } + &.pi-color__success { + @include dividerIconColor(success); + } + &.pi-color__white { + @include dividerIconColor(white); + } + &.pi-color__black { + @include dividerIconColor(black); + } + &.pi-color__grey { + @include dividerIconColor(grey-100); + } + &.pi-color__highlighted { + @include dividerIconColor(highlighted); + } + &.pi-color__black-primary { + @include dividerIconColor(primary); + } + &.pi-color__primary-black { + @include dividerIconColor(black); + } + &.pi-color__black-accent { + @include dividerIconColor(accent); + } + &.pi-color__accent-black { + @include dividerIconColor(black); + } + &.pi-color__dark-black { + @include dividerIconColor(black); + } + &.pi-color__black-dark { + @include dividerIconColor(grey-400); + } + &.pi-color__grey-black { + @include dividerIconColor(black); + } + &.pi-color__black-grey { + @include dividerIconColor(grey-200); + } + &.pi-color__highlighted-grey { + @include dividerIconColor(grey-200); + } + &.pi-color__grey-highlighted { + @include dividerIconColor(highlighted); + } + // Icon size + // X small + &.pi-divider__icon-size--x-small { + @include dividerIconSize(large); + } + // small + &.pi-divider__icon-size--small { + @include dividerIconSize(x-large); + } + // medium + &.pi-divider__icon-size--medium { + @include dividerIconSize(xx-large); + } + // large + &.pi-divider__icon-size--large { + @include dividerIconSize(xxx-large); + } + // X large + &.pi-divider__icon-size--x-large { + @include dividerIconSize(xxxx-large); + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-headline.scss b/libs/ui/src/lib/styles/common/components/_pi-headline.scss index 3d3107b..9475201 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-headline.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-headline.scss @@ -1,71 +1,71 @@ -// Column -.pi-headline { - &.pi-headline__flex--column { - flex-direction: column; - &.pi-headline__align--center { - align-items: center; - text-align: center; - aside { - button { - margin: 1.75rem auto 0; - } - } - .pi-headline-content { - & > *:is(h1, h2, h3, h4, h5, p, span, strong, i) { - text-align: center; - } - } - } - } - figure { - width: 100%; - } -} - -// Headline Content Directives -.pi-headline-content { - h1 { - font: { - weight: unset; - } - } - &.pi-headline-content__description { - display: block; - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-large); - } - } -} -.pi-headline-content + .pi-headline-content { - margin-top: var(--pi-spacing-x-large); -} - -.pi-background-image__animation--infinite { - animation: opacityAnimation 2.5s infinite; -} - -.pi-layout { - &.pi-layout__02-full-width { - .pi-background-image__animation--infinite { - min-height: 20rem; - } - } -} - -@keyframes opacityAnimation { - 0% { - opacity: 1; - } - 25% { - opacity: 0.7; - } - 50% { - opacity: 0.8; - } - 75% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} +// Column +.pi-headline { + &.pi-headline__flex--column { + flex-direction: column; + &.pi-headline__align--center { + align-items: center; + text-align: center; + aside { + button { + margin: 1.75rem auto 0; + } + } + .pi-headline-content { + & > *:is(h1, h2, h3, h4, h5, p, span, strong, i) { + text-align: center; + } + } + } + } + figure { + width: 100%; + } +} + +// Headline Content Directives +.pi-headline-content { + h1 { + font: { + weight: unset; + } + } + &.pi-headline-content__description { + display: block; + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-large); + } + } +} +.pi-headline-content + .pi-headline-content { + margin-top: var(--pi-spacing-x-large); +} + +.pi-background-image__animation--infinite { + animation: opacityAnimation 2.5s infinite; +} + +.pi-layout { + &.pi-layout__02-full-width { + .pi-background-image__animation--infinite { + min-height: 20rem; + } + } +} + +@keyframes opacityAnimation { + 0% { + opacity: 1; + } + 25% { + opacity: 0.7; + } + 50% { + opacity: 0.8; + } + 75% { + opacity: 0.7; + } + 100% { + opacity: 1; + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-list-item.scss b/libs/ui/src/lib/styles/common/components/_pi-list-item.scss index 386a05b..1ff6a06 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-list-item.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-list-item.scss @@ -1,177 +1,177 @@ -.pi-list-item { - gap: var(--pi-spacing-medium); - // Content - .pi-list-item-content { - flex: 1 1 auto; - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-xxx-small); - &:not(.pi-chip) { - display: block; - width: 100%; - } - } - & > .pi-slider { - &.pi-slider__flex-direction--column-reverse { - margin-top: var(--pi-spacing-x-large); - } - } - } - // Is Disabled - &.is-disabled { - .pi-list-item-content { - &:not(.pi-list-item-icon__right) { - opacity: 0.5; - } - } - } - - // Border - &.pi-list-item__border--middle { - .pi-list-item-content__left { - padding-right: var(--pi-spacing-medium); - border-right: 1px solid var(--pi-color-primary-50); - } - } - - // Icon - .pi-list-item-icon { - flex: 0 0 auto; - &.pi-list-item-icon__left { - text-align: left; - } - &.pi-list-item-icon__right { - text-align: right; - } - } -} - -html { - // Mobile - &.is-mobile { - .pi-list-item { - // Is Responsive - &.is-responsive { - flex-direction: column; - align-items: flex-start; - // Content - .pi-list-item-content { - &.pi-wrapper__flex { - flex-direction: column; - align-items: flex-start; - } - } - // Icon - .pi-list-item-icon { - &.pi-list-item-icon__right { - display: flex; - justify-content: center; - align-items: center; - min-height: 3.375rem; - width: -webkit-fill-available; - text-align: unset; - } - } - } - } - .pi-panel { - .pi-list-item { - // Is Responsive - &.is-responsive { - align-items: center; - // Type Action - &.is-stroked { - border: 1px solid; - border-color: var(--pi-color-grey-75); - border-radius: var(--pi-border-radius-large); - padding: unset; - // Content - .pi-list-item-content { - padding: var(--pi-spacing-large); - } - // Icon - .pi-list-item-icon { - &.pi-list-item-icon__right { - background-color: var(--pi-color-primary-25); - border-top: 1px solid var(--pi-color-primary-50); - border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px); - border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px); - } - } - } - } - } - } - } - // Tablet - &.is-tablet { - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - } - } - // Tablet & Desktop - &:not(.is-mobile) { - .pi-panel { - .pi-list-item { - // Responsive - &.is-responsive { - // Icon - .pi-list-item-icon { - &.pi-list-item-icon__right { - & > :not(.pi-icon-button) { - display: flex; - align-items: center; - justify-content: center; - height: 3.4375rem; - width: 3.4375rem; - margin-left: var(--pi-spacing-xxxx-large); - border: 1px solid var(--pi-color-primary-50); - border-radius: var(--pi-border-radius-large); - transition: var(--pi-animation); - &:hover { - cursor: pointer; - background-color: var(--pi-color-primary-25); - } - } - } - } - } - // Max width - // Half - &.pi-list-item__max-width--half { - .pi-list-item-content { - &.pi-list-item-content__left { - max-width: calc(50% - var(--pi-spacing-xxx-large)); - } - } - } - // Third - &.pi-list-item__max-width--third { - .pi-list-item-content { - &.pi-list-item-content__left { - max-width: calc(33.3% - var(--pi-spacing-xxx-large)); - } - } - } - } - } - // Large device - @media screen and (min-width: 62rem) { - .pi-panel__expansion { - .pi-list-item { - gap: var(--pi-spacing-x-large); - } - } - } - } - .pi-text-viewer { - article { - label, - span { - line-height: 1; - } - } - } -} +.pi-list-item { + gap: var(--pi-spacing-medium); + // Content + .pi-list-item-content { + flex: 1 1 auto; + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-xxx-small); + &:not(.pi-chip) { + display: block; + width: 100%; + } + } + & > .pi-slider { + &.pi-slider__flex-direction--column-reverse { + margin-top: var(--pi-spacing-x-large); + } + } + } + // Is Disabled + &.is-disabled { + .pi-list-item-content { + &:not(.pi-list-item-icon__right) { + opacity: 0.5; + } + } + } + + // Border + &.pi-list-item__border--middle { + .pi-list-item-content__left { + padding-right: var(--pi-spacing-medium); + border-right: 1px solid var(--pi-color-primary-50); + } + } + + // Icon + .pi-list-item-icon { + flex: 0 0 auto; + &.pi-list-item-icon__left { + text-align: left; + } + &.pi-list-item-icon__right { + text-align: right; + } + } +} + +html { + // Mobile + &.is-mobile { + .pi-list-item { + // Is Responsive + &.is-responsive { + flex-direction: column; + align-items: flex-start; + // Content + .pi-list-item-content { + &.pi-wrapper__flex { + flex-direction: column; + align-items: flex-start; + } + } + // Icon + .pi-list-item-icon { + &.pi-list-item-icon__right { + display: flex; + justify-content: center; + align-items: center; + min-height: 3.375rem; + width: -webkit-fill-available; + text-align: unset; + } + } + } + } + .pi-panel { + .pi-list-item { + // Is Responsive + &.is-responsive { + align-items: center; + // Type Action + &.is-stroked { + border: 1px solid; + border-color: var(--pi-color-grey-75); + border-radius: var(--pi-border-radius-large); + padding: unset; + // Content + .pi-list-item-content { + padding: var(--pi-spacing-large); + } + // Icon + .pi-list-item-icon { + &.pi-list-item-icon__right { + background-color: var(--pi-color-primary-25); + border-top: 1px solid var(--pi-color-primary-50); + border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px); + border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px); + } + } + } + } + } + } + } + // Tablet + &.is-tablet { + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + } + } + // Tablet & Desktop + &:not(.is-mobile) { + .pi-panel { + .pi-list-item { + // Responsive + &.is-responsive { + // Icon + .pi-list-item-icon { + &.pi-list-item-icon__right { + & > :not(.pi-icon-button) { + display: flex; + align-items: center; + justify-content: center; + height: 3.4375rem; + width: 3.4375rem; + margin-left: var(--pi-spacing-xxxx-large); + border: 1px solid var(--pi-color-primary-50); + border-radius: var(--pi-border-radius-large); + transition: var(--pi-animation); + &:hover { + cursor: pointer; + background-color: var(--pi-color-primary-25); + } + } + } + } + } + // Max width + // Half + &.pi-list-item__max-width--half { + .pi-list-item-content { + &.pi-list-item-content__left { + max-width: calc(50% - var(--pi-spacing-xxx-large)); + } + } + } + // Third + &.pi-list-item__max-width--third { + .pi-list-item-content { + &.pi-list-item-content__left { + max-width: calc(33.3% - var(--pi-spacing-xxx-large)); + } + } + } + } + } + // Large device + @media screen and (min-width: 62rem) { + .pi-panel__expansion { + .pi-list-item { + gap: var(--pi-spacing-x-large); + } + } + } + } + .pi-text-viewer { + article { + label, + span { + line-height: 1; + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-note.scss b/libs/ui/src/lib/styles/common/components/_pi-note.scss index f4f29b8..30248cc 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-note.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-note.scss @@ -1,116 +1,116 @@ -@mixin fixedBottomNote( - $left: 0, - $bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)), - $width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)), - $min-width: auto -) { - .pi-shell { - &.pi-shell__deale-saas { - & > div { - &.has-bottom-sticky-note { - & > section { - & > main { - & > footer { - position: fixed; - left: $left; - bottom: $bottom; - z-index: 9999; - width: 100%; - display: flex; - justify-content: center; - - .pi-note { - &.is-sticky { - &.pi-note__position--bottom { - width: $width; - min-width: $min-width; - } - } - } - } - } - } - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include fixedBottomNote; - .pi-note-content__action { - button { - &.pi-button__icon--single { - height: 1.75rem; - width: 1.75rem; - } - } - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not( - .pi-button__xx-small - ):not(.pi-button__x-large):not(.pi-button__toggle) { - height: var(--pi-spacing-xx-large); - padding-top: unset; - padding-bottom: unset; - } - } - } - // Note in panel - .pi-panel { - &.pi-panel__expansion--type-form { - .pi-note { - &.pi-note__status--error { - justify-content: center; - } - - .mat-icon { - height: var(--pi-spacing-xx-large); - width: 3.2rem; - } - } - } - } - } - // Tablet - &.is-tablet { - &.is-tablet__small { - @include fixedBottomNote( - 0, - calc(env(safe-area-inset-bottom) + var(--pi-height-footer) - var(--pi-spacing-x-large)), - calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) - ); - } - &.is-tablet__large { - @include fixedBottomNote(0, var(--pi-spacing-x-large), auto); - } - } - // Tablet & Desktop - &:not(.is-mobile) { - .pi-note-content__action { - button { - &.pi-button__icon--single { - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - } - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( - .pi-button__xx-small - ):not(.pi-button__trimmed):not(.pi-button__toggle) { - min-width: unset; - padding-left: var(--pi-spacing-small); - padding-right: var(--pi-spacing-small); - } - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not( - .pi-button__xx-small - ):not(.pi-button__x-large):not(.pi-button__toggle) { - height: var(--pi-spacing-xx-large); - } - } - } - } - - &.is-desktop { - @include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%); - } -} +@mixin fixedBottomNote( + $left: 0, + $bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)), + $width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)), + $min-width: auto +) { + .pi-shell { + &.pi-shell__deale-saas { + & > div { + &.has-bottom-sticky-note { + & > section { + & > main { + & > footer { + position: fixed; + left: $left; + bottom: $bottom; + z-index: 9999; + width: 100%; + display: flex; + justify-content: center; + + .pi-note { + &.is-sticky { + &.pi-note__position--bottom { + width: $width; + min-width: $min-width; + } + } + } + } + } + } + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include fixedBottomNote; + .pi-note-content__action { + button { + &.pi-button__icon--single { + height: 1.75rem; + width: 1.75rem; + } + } + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not( + .pi-button__xx-small + ):not(.pi-button__x-large):not(.pi-button__toggle) { + height: var(--pi-spacing-xx-large); + padding-top: unset; + padding-bottom: unset; + } + } + } + // Note in panel + .pi-panel { + &.pi-panel__expansion--type-form { + .pi-note { + &.pi-note__status--error { + justify-content: center; + } + + .mat-icon { + height: var(--pi-spacing-xx-large); + width: 3.2rem; + } + } + } + } + } + // Tablet + &.is-tablet { + &.is-tablet__small { + @include fixedBottomNote( + 0, + calc(env(safe-area-inset-bottom) + var(--pi-height-footer) - var(--pi-spacing-x-large)), + calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) + ); + } + &.is-tablet__large { + @include fixedBottomNote(0, var(--pi-spacing-x-large), auto); + } + } + // Tablet & Desktop + &:not(.is-mobile) { + .pi-note-content__action { + button { + &.pi-button__icon--single { + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + } + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( + .pi-button__xx-small + ):not(.pi-button__trimmed):not(.pi-button__toggle) { + min-width: unset; + padding-left: var(--pi-spacing-small); + padding-right: var(--pi-spacing-small); + } + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not( + .pi-button__xx-small + ):not(.pi-button__x-large):not(.pi-button__toggle) { + height: var(--pi-spacing-xx-large); + } + } + } + } + + &.is-desktop { + @include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%); + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-panel.scss b/libs/ui/src/lib/styles/common/components/_pi-panel.scss index ae2cdad..f2046da 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-panel.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-panel.scss @@ -1,465 +1,465 @@ -@mixin panelInnerPadding($padding: unset) { - &.pi-panel__inner-padding { - padding: unset; - - &.pi-panel__flex-direction--row { - & > section { - & > * { - padding-top: var(--pi-spacing-#{$padding}); - padding-bottom: var(--pi-spacing-#{$padding}); - padding-left: var(--pi-spacing-#{$padding}); - padding-right: var(--pi-spacing-#{$padding}); - &:first-child { - border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large); - } - - &:last-child { - border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0; - } - } - } - } - - &.pi-panel__flex-direction--column { - & > section { - & > * { - padding-left: var(--pi-spacing-#{$padding}); - padding-right: var(--pi-spacing-#{$padding}); - - &:first-child { - padding-top: var(--pi-spacing-#{$padding}); - border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; - } - &:last-child { - padding-bottom: var(--pi-spacing-#{$padding}); - border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); - } - } - } - } - } -} - -@mixin panelContentInnerPadding($padding) { - & > *:nth-child(n + 1) { - padding: var(--pi-spacing-#{$padding}); - } -} - -@mixin panelContentColor($color) { - // Mode light - &.pi-color__mode--light { - // Light Opaque - &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { - // Solid light color - background-color: var(--pi-color-#{$color}-25); - } - } - // Mode dark - &.pi-color__mode--dark { - // Dark Opaque - &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { - background-color: var(--pi-color-#{$color}); - // Solid Dark Color & Is Stroked - &.is-stroked { - border-color: var(--pi-color-#{$color}-900); - } - } - } - // Density - // 10 - &.pi-color__density--10 { - // Solid light color 10 - background-color: var(--pi-color-#{$color}-10); - } - // 50 - &.pi-color__density--50 { - // Solid light color 50 - background-color: var(--pi-color-#{$color}-50); - } - // 75 - &.pi-color__density--75 { - // Solid light color 75 - background-color: var(--pi-color-#{$color}-75); - } - // 100 - &.pi-color__density--100 { - // Solid light color 100 - background-color: var(--pi-color-#{$color}-100); - } - // 200 - &.pi-color__density--200 { - // Solid light color 200 - background-color: var(--pi-color-#{$color}-200); - } - // 300 - &.pi-color__density--300 { - // Solid light color 300 - background-color: var(--pi-color-#{$color}-300); - } - // 400 - &.pi-color__density--400 { - // Solid light color 400 - background-color: var(--pi-color-#{$color}-400); - } - // 900 - &.pi-color__density--900 { - // Solid light color 900 - background-color: var(--pi-color-#{$color}-900); - } -} - -// Panel -.pi-panel { - & > section { - & > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) { - &:nth-child(n + 2) { - width: 100%; - & > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row { - margin-top: var(--pi-spacing-xx-small); - } - } - } - .pi-panel-content__left, - .pi-panel-content__right { - flex: 1 1 auto; - height: 100%; - } - } - &.is-disabled { - & > *:nth-child(n + 1) { - opacity: 0.33; - .pi-icon__animation--clickable { - &:hover { - cursor: unset; - .mat-icon { - transform: unset; - } - } - } - } - } - // Glass - &[class*='pi-color__opacity'] { - -webkit-backdrop-filter: blur(0.75rem); - backdrop-filter: blur(0.75rem); - } - // Expansion - &.pi-panel__expansion { - .pi-panel-content { - &.pi-panel-content__top { - margin-top: -0.2rem; - } - // Center - &.pi-panel-content__center, - &.pi-panel-content__expandable { - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-x-large); - } - .pi-note + .pi-note { - margin-top: var(--pi-spacing-medium); - } - } - } - } - // NOT Expansion - &:not(.pi-panel__expansion) { - // Panel flex direction column - &.pi-panel__flex-direction--column { - & > section { - & > header { - width: -webkit-fill-available; - } - } - // Panel space between - &.pi-panel__justify--space-between { - & > section { - display: flex; - flex-direction: column; - justify-content: space-between; - } - .pi-panel-content { - // Center - &.pi-panel-content__center { - display: flex; - & > *:nth-child(n + 1) { - margin-top: unset; - } - } - } - } - } - } - // Inner padding - // XS - &.pi-panel__inner-padding--xxs { - @include panelInnerPadding(xx-small); - } - // XS - &.pi-panel__inner-padding--xs { - @include panelInnerPadding(x-small); - } - // S - &.pi-panel__inner-padding--s { - @include panelInnerPadding(small); - } - // M - &.pi-panel__inner-padding--m { - @include panelInnerPadding(medium); - } - // L - &.pi-panel__inner-padding--l { - @include panelInnerPadding(large); - } - // XL - &.pi-panel__inner-padding--xl { - @include panelInnerPadding(x-large); - } - // XXL - &.pi-panel__inner-padding--xxl { - @include panelInnerPadding(xx-large); - } - // XXXL - &.pi-panel__inner-padding--xxxl { - @include panelInnerPadding(xxx-large); - } - // XXXXL - &.pi-panel__inner-padding--xxxxl { - @include panelInnerPadding(xxxx-large); - } -} - -// Content -.pi-panel-content { - display: block; - width: -webkit-fill-available; - - & > .pi-wrapper { - width: -webkit-fill-available; - } - - // Top - &.pi-panel-content__top { - .pi-list-item { - .pi-list-item-icon__left { - .pi-chip { - &:not(.pi-chip__single-icon) { - width: var(--pi-spacing-xxxx-large); - min-width: unset; - max-width: unset; - padding: unset; - } - } - } - } - } - - // Content Color - // Primary - &.pi-color__primary { - @include panelContentColor(primary); - } - // Accent - &.pi-color__accent { - @include panelContentColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include panelContentColor(highlighted); - } - // Grey - &.pi-color__grey { - @include panelContentColor(grey); - } - - // Content Padding - &.pi-panel-content__inner-padding--xxxs { - @include panelContentInnerPadding(xxx-small); - } - &.pi-panel-content__inner-padding--xxs { - @include panelContentInnerPadding(xx-small); - } - &.pi-panel-content__inner-padding--xs { - @include panelContentInnerPadding(x-small); - } - - &.pi-panel-content__inner-padding--s { - @include panelContentInnerPadding(small); - } - - &.pi-panel-content__inner-padding--m { - @include panelContentInnerPadding(medium); - } - - &.pi-panel-content__inner-padding--l { - @include panelContentInnerPadding(large); - } - - &.pi-panel-content__inner-padding--xl { - @include panelContentInnerPadding(x-large); - } - - &.pi-panel-content__inner-padding--xxl { - @include panelContentInnerPadding(xx-large); - } - - &.pi-panel-content__inner-padding--xxxl { - @include panelContentInnerPadding(xxxl-large); - } - - &.pi-panel-content__inner-padding--xxxxl { - @include panelContentInnerPadding(xxxx-large); - } -} - -.pi-layout__05-splitted { - // Not paywall - &:not(.pi-05a-splitted-paywall-layout) { - .pi-panel { - &.pi-panel__is-clickable { - &.is-active, - &:hover { - outline: 1px solid var(--pi-color-primary); - } - } - // Padding - &.has-padding { - padding: var(--pi-spacing-x-large); - } - } - } - // Grid - // Half - &.pi-panel__grid--half { - .pi-panel-content { - width: 50%; - } - } - // Quarter - &.pi-panel__grid--quarter { - .pi-panel-content__left { - width: 25%; - } - .pi-panel-content__right { - width: 75%; - } - } - // Quarter reverse - &.pi-panel__grid--quarter-reverse { - .pi-panel-content__left { - width: 75%; - } - .pi-panel-content__right { - width: 25%; - } - } -} - -.pi-layout__main { - .pi-panel { - &:not(.is-disabled) { - box-shadow: var(--pi-box-shadow-panel); - } - &.is-disabled { - box-shadow: var(--pi-box-shadow-panel-disabled); - } - .pi-panel { - box-shadow: unset; - } - } -} - -html { - // Mobile - &.is-mobile { - // Panel - .pi-panel { - &.pi-panel__expansion { - .pi-panel-content__expandable { - button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( - .pi-button__xx-small - ):not(.pi-button__trimmed):not(.pi-button__toggle) { - min-width: 100%; - } - } - } - .pi-saas-panel-subtitle { - .pi-panel-subtitle-content { - width: 100%; - } - } - } - } - // Small device - @media screen and (max-width: 62rem) { - // Panel - .pi-panel { - &.pi-panel__expansion { - .pi-panel-content__center, - .pi-panel-content__expandable { - margin-top: var(--pi-spacing-medium); - } - .pi-panel-content__top { - .pi-list-item { - flex-direction: column; - align-items: flex-start; - gap: var(--pi-spacing-xx-small); - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Panel - .pi-panel { - &.pi-panel__expansion { - .pi-panel-content__expandable { - button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( - .pi-button__xx-small - ):not(.pi-button__trimmed):not(.pi-button__toggle) { - min-width: 9.25rem; - } - } - } - } - // Large device - @media screen and (min-width: 62rem) { - // Panel - .pi-panel { - &.pi-panel__expansion { - .pi-panel-content__center, - .pi-panel-content__expandable { - margin-top: var(--pi-spacing-xx-large); - } - // Data grid in expansion panels - .pi-data-grid { - &.pi-data-grid__data-direction--column { - padding-left: var(--pi-spacing-xx-small); - padding-right: var(--pi-spacing-xx-small); - } - } - } - .pi-panel-content { - // Top - &.pi-panel-content__top { - .pi-list-item { - .pi-list-item-icon__left { - padding-right: var(--pi-spacing-medium); - border-right: 1px solid var(--pi-color-primary-50); - } - } - } - // Expandable - &.pi-panel-content__expandable { - .pi-list-item { - &.pi-list-item__indent { - padding-left: calc(5rem + 1px); - } - } - } - } - } - } - } -} +@mixin panelInnerPadding($padding: unset) { + &.pi-panel__inner-padding { + padding: unset; + + &.pi-panel__flex-direction--row { + & > section { + & > * { + padding-top: var(--pi-spacing-#{$padding}); + padding-bottom: var(--pi-spacing-#{$padding}); + padding-left: var(--pi-spacing-#{$padding}); + padding-right: var(--pi-spacing-#{$padding}); + &:first-child { + border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large); + } + + &:last-child { + border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0; + } + } + } + } + + &.pi-panel__flex-direction--column { + & > section { + & > * { + padding-left: var(--pi-spacing-#{$padding}); + padding-right: var(--pi-spacing-#{$padding}); + + &:first-child { + padding-top: var(--pi-spacing-#{$padding}); + border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; + } + &:last-child { + padding-bottom: var(--pi-spacing-#{$padding}); + border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); + } + } + } + } + } +} + +@mixin panelContentInnerPadding($padding) { + & > *:nth-child(n + 1) { + padding: var(--pi-spacing-#{$padding}); + } +} + +@mixin panelContentColor($color) { + // Mode light + &.pi-color__mode--light { + // Light Opaque + &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { + // Solid light color + background-color: var(--pi-color-#{$color}-25); + } + } + // Mode dark + &.pi-color__mode--dark { + // Dark Opaque + &:not([class*='pi-color__opacity']):not([class*='pi-color__density']) { + background-color: var(--pi-color-#{$color}); + // Solid Dark Color & Is Stroked + &.is-stroked { + border-color: var(--pi-color-#{$color}-900); + } + } + } + // Density + // 10 + &.pi-color__density--10 { + // Solid light color 10 + background-color: var(--pi-color-#{$color}-10); + } + // 50 + &.pi-color__density--50 { + // Solid light color 50 + background-color: var(--pi-color-#{$color}-50); + } + // 75 + &.pi-color__density--75 { + // Solid light color 75 + background-color: var(--pi-color-#{$color}-75); + } + // 100 + &.pi-color__density--100 { + // Solid light color 100 + background-color: var(--pi-color-#{$color}-100); + } + // 200 + &.pi-color__density--200 { + // Solid light color 200 + background-color: var(--pi-color-#{$color}-200); + } + // 300 + &.pi-color__density--300 { + // Solid light color 300 + background-color: var(--pi-color-#{$color}-300); + } + // 400 + &.pi-color__density--400 { + // Solid light color 400 + background-color: var(--pi-color-#{$color}-400); + } + // 900 + &.pi-color__density--900 { + // Solid light color 900 + background-color: var(--pi-color-#{$color}-900); + } +} + +// Panel +.pi-panel { + & > section { + & > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) { + &:nth-child(n + 2) { + width: 100%; + & > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row { + margin-top: var(--pi-spacing-xx-small); + } + } + } + .pi-panel-content__left, + .pi-panel-content__right { + flex: 1 1 auto; + height: 100%; + } + } + &.is-disabled { + & > *:nth-child(n + 1) { + opacity: 0.33; + .pi-icon__animation--clickable { + &:hover { + cursor: unset; + .mat-icon { + transform: unset; + } + } + } + } + } + // Glass + &[class*='pi-color__opacity'] { + -webkit-backdrop-filter: blur(0.75rem); + backdrop-filter: blur(0.75rem); + } + // Expansion + &.pi-panel__expansion { + .pi-panel-content { + &.pi-panel-content__top { + margin-top: -0.2rem; + } + // Center + &.pi-panel-content__center, + &.pi-panel-content__expandable { + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-x-large); + } + .pi-note + .pi-note { + margin-top: var(--pi-spacing-medium); + } + } + } + } + // NOT Expansion + &:not(.pi-panel__expansion) { + // Panel flex direction column + &.pi-panel__flex-direction--column { + & > section { + & > header { + width: -webkit-fill-available; + } + } + // Panel space between + &.pi-panel__justify--space-between { + & > section { + display: flex; + flex-direction: column; + justify-content: space-between; + } + .pi-panel-content { + // Center + &.pi-panel-content__center { + display: flex; + & > *:nth-child(n + 1) { + margin-top: unset; + } + } + } + } + } + } + // Inner padding + // XS + &.pi-panel__inner-padding--xxs { + @include panelInnerPadding(xx-small); + } + // XS + &.pi-panel__inner-padding--xs { + @include panelInnerPadding(x-small); + } + // S + &.pi-panel__inner-padding--s { + @include panelInnerPadding(small); + } + // M + &.pi-panel__inner-padding--m { + @include panelInnerPadding(medium); + } + // L + &.pi-panel__inner-padding--l { + @include panelInnerPadding(large); + } + // XL + &.pi-panel__inner-padding--xl { + @include panelInnerPadding(x-large); + } + // XXL + &.pi-panel__inner-padding--xxl { + @include panelInnerPadding(xx-large); + } + // XXXL + &.pi-panel__inner-padding--xxxl { + @include panelInnerPadding(xxx-large); + } + // XXXXL + &.pi-panel__inner-padding--xxxxl { + @include panelInnerPadding(xxxx-large); + } +} + +// Content +.pi-panel-content { + display: block; + width: -webkit-fill-available; + + & > .pi-wrapper { + width: -webkit-fill-available; + } + + // Top + &.pi-panel-content__top { + .pi-list-item { + .pi-list-item-icon__left { + .pi-chip { + &:not(.pi-chip__single-icon) { + width: var(--pi-spacing-xxxx-large); + min-width: unset; + max-width: unset; + padding: unset; + } + } + } + } + } + + // Content Color + // Primary + &.pi-color__primary { + @include panelContentColor(primary); + } + // Accent + &.pi-color__accent { + @include panelContentColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include panelContentColor(highlighted); + } + // Grey + &.pi-color__grey { + @include panelContentColor(grey); + } + + // Content Padding + &.pi-panel-content__inner-padding--xxxs { + @include panelContentInnerPadding(xxx-small); + } + &.pi-panel-content__inner-padding--xxs { + @include panelContentInnerPadding(xx-small); + } + &.pi-panel-content__inner-padding--xs { + @include panelContentInnerPadding(x-small); + } + + &.pi-panel-content__inner-padding--s { + @include panelContentInnerPadding(small); + } + + &.pi-panel-content__inner-padding--m { + @include panelContentInnerPadding(medium); + } + + &.pi-panel-content__inner-padding--l { + @include panelContentInnerPadding(large); + } + + &.pi-panel-content__inner-padding--xl { + @include panelContentInnerPadding(x-large); + } + + &.pi-panel-content__inner-padding--xxl { + @include panelContentInnerPadding(xx-large); + } + + &.pi-panel-content__inner-padding--xxxl { + @include panelContentInnerPadding(xxxl-large); + } + + &.pi-panel-content__inner-padding--xxxxl { + @include panelContentInnerPadding(xxxx-large); + } +} + +.pi-layout__05-splitted { + // Not paywall + &:not(.pi-05a-splitted-paywall-layout) { + .pi-panel { + &.pi-panel__is-clickable { + &.is-active, + &:hover { + outline: 1px solid var(--pi-color-primary); + } + } + // Padding + &.has-padding { + padding: var(--pi-spacing-x-large); + } + } + } + // Grid + // Half + &.pi-panel__grid--half { + .pi-panel-content { + width: 50%; + } + } + // Quarter + &.pi-panel__grid--quarter { + .pi-panel-content__left { + width: 25%; + } + .pi-panel-content__right { + width: 75%; + } + } + // Quarter reverse + &.pi-panel__grid--quarter-reverse { + .pi-panel-content__left { + width: 75%; + } + .pi-panel-content__right { + width: 25%; + } + } +} + +.pi-layout__main { + .pi-panel { + &:not(.is-disabled) { + box-shadow: var(--pi-box-shadow-panel); + } + &.is-disabled { + box-shadow: var(--pi-box-shadow-panel-disabled); + } + .pi-panel { + box-shadow: unset; + } + } +} + +html { + // Mobile + &.is-mobile { + // Panel + .pi-panel { + &.pi-panel__expansion { + .pi-panel-content__expandable { + button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( + .pi-button__xx-small + ):not(.pi-button__trimmed):not(.pi-button__toggle) { + min-width: 100%; + } + } + } + .pi-saas-panel-subtitle { + .pi-panel-subtitle-content { + width: 100%; + } + } + } + } + // Small device + @media screen and (max-width: 62rem) { + // Panel + .pi-panel { + &.pi-panel__expansion { + .pi-panel-content__center, + .pi-panel-content__expandable { + margin-top: var(--pi-spacing-medium); + } + .pi-panel-content__top { + .pi-list-item { + flex-direction: column; + align-items: flex-start; + gap: var(--pi-spacing-xx-small); + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Panel + .pi-panel { + &.pi-panel__expansion { + .pi-panel-content__expandable { + button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( + .pi-button__xx-small + ):not(.pi-button__trimmed):not(.pi-button__toggle) { + min-width: 9.25rem; + } + } + } + } + // Large device + @media screen and (min-width: 62rem) { + // Panel + .pi-panel { + &.pi-panel__expansion { + .pi-panel-content__center, + .pi-panel-content__expandable { + margin-top: var(--pi-spacing-xx-large); + } + // Data grid in expansion panels + .pi-data-grid { + &.pi-data-grid__data-direction--column { + padding-left: var(--pi-spacing-xx-small); + padding-right: var(--pi-spacing-xx-small); + } + } + } + .pi-panel-content { + // Top + &.pi-panel-content__top { + .pi-list-item { + .pi-list-item-icon__left { + padding-right: var(--pi-spacing-medium); + border-right: 1px solid var(--pi-color-primary-50); + } + } + } + // Expandable + &.pi-panel-content__expandable { + .pi-list-item { + &.pi-list-item__indent { + padding-left: calc(5rem + 1px); + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-spinner.scss b/libs/ui/src/lib/styles/common/components/_pi-spinner.scss index cce36b7..c496c1d 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-spinner.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-spinner.scss @@ -1,22 +1,22 @@ -.pi-spinner { - // Type - // Loader - &.pi-spinner__loader { - display: flex !important; - justify-content: center; - align-items: center; - flex-direction: column; - gap: var(--pi-spacing-large); - margin-top: unset !important; - - &.pi-spinner__loader--fullscreen { - position: fixed; - z-index: 9999; - left: 0; - top: 0; - height: 100vh; - width: 100%; - background-color: var(--pi-color-primary-200-rgba); - } - } -} +.pi-spinner { + // Type + // Loader + &.pi-spinner__loader { + display: flex !important; + justify-content: center; + align-items: center; + flex-direction: column; + gap: var(--pi-spacing-large); + margin-top: unset !important; + + &.pi-spinner__loader--fullscreen { + position: fixed; + z-index: 9999; + left: 0; + top: 0; + height: 100vh; + width: 100%; + background-color: var(--pi-color-primary-200-rgba); + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-text-viewer.scss b/libs/ui/src/lib/styles/common/components/_pi-text-viewer.scss index 9c4b22c..50b57b7 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-text-viewer.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-text-viewer.scss @@ -1,35 +1,35 @@ -// Text group -// colors -$color1: #799ef0; -$color2: #99b3ec; -$color3: #afc1ea; -$color4: #b9c8e9; -$color5: #dbdfe7; -$colors: $color1, $color2, $color3, $color4, $color5; -.pi-text-group { - &.pi-text-group__value-indicator { - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - @for $i from 1 through length($colors) { - .pi-text-viewer { - display: flex; - gap: var(--pi-spacing-xx-small); - &:nth-child(#{length($colors)}n + #{$i}) { - &::before { - content: ''; - margin-bottom: var(--pi-spacing-xxxx-small); - width: var(--pi-spacing-small); - height: var(--pi-spacing-small); - background-color: nth($colors, $i); - border-radius: 50%; - } - } - } - } - .pi-text-viewer + .pi-text-viewer { - margin-top: var(--pi-spacing-small); - } - } -} +// Text group +// colors +$color1: #799ef0; +$color2: #99b3ec; +$color3: #afc1ea; +$color4: #b9c8e9; +$color5: #dbdfe7; +$colors: $color1, $color2, $color3, $color4, $color5; +.pi-text-group { + &.pi-text-group__value-indicator { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + @for $i from 1 through length($colors) { + .pi-text-viewer { + display: flex; + gap: var(--pi-spacing-xx-small); + &:nth-child(#{length($colors)}n + #{$i}) { + &::before { + content: ''; + margin-bottom: var(--pi-spacing-xxxx-small); + width: var(--pi-spacing-small); + height: var(--pi-spacing-small); + background-color: nth($colors, $i); + border-radius: 50%; + } + } + } + } + .pi-text-viewer + .pi-text-viewer { + margin-top: var(--pi-spacing-small); + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/_pi-text.scss b/libs/ui/src/lib/styles/common/components/_pi-text.scss index 1ed03b4..d6f6849 100644 --- a/libs/ui/src/lib/styles/common/components/_pi-text.scss +++ b/libs/ui/src/lib/styles/common/components/_pi-text.scss @@ -1,517 +1,517 @@ -@mixin fontSize($font-size) { - font: { - size: var(--pi-font-size-#{$font-size}); - } -} - -.pi-text__centered { - &:is(h1, h2, h3, h4, h5, span, p, i, figcaption, label, small, legend) { - display: block; - width: 100%; - text-align: center; - } - & > *:nth-child(n + 1) { - &:is(h1, h2, h3, h4, h5, p, i, figcaption, label, small, legend) { - display: block; - text-align: center; - } - } -} - -* { - &:is(h1) { - line-height: 116.5%; - font: { - weight: 700; - } - } - &:is(h2) { - line-height: 125%; - } - &:is(h3, h4, h5) { - line-height: 130%; - } - & > *:nth-child(n + 1) { - &:is(h1) { - line-height: 116.5%; - } - &:is(h2) { - line-height: 125%; - } - } - & > *:nth-child(n + 1) { - &:is(h3, h4, h5) { - line-height: 130%; - } - } -} - -.pi-text__is-covered { - &:is(h1, h2, h3, h4, h5, span, p, i, figcaption, label, small, legend) { - position: relative; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - &::before { - content: ''; - display: block; - width: 100%; - height: 100%; - background: var(--pi-color-grey-75); - position: absolute; - top: 0; - border-radius: var(--pi-border-radius-xx-small); - } - } -} - -.pi-text__group { - & > * + * { - margin-left: var(--pi-spacing-xxx-small); - } -} - -.pi-shell__deale-saas { - h3 { - font: { - size: var(--pi-font-size-medium); - } - } - h4 { - font: { - size: var(--pi-font-size-small); - } - } - h5 { - font: { - size: var(--pi-font-size-small); - } - } - p { - font: { - size: var(--pi-font-size-small); - } - } - figcaption { - font: { - size: var(--pi-font-size-small); - } - } - strong { - font-family: 'Soehne', Helvetica, Arial, sans-serif; - font-weight: 700; - } - i { - font: { - size: var(--pi-font-size-small); - } - } - label { - font: { - size: var(--pi-font-size-small); - } - } - - small { - font: { - size: var(--pi-font-size-xx-small); - } - } - - // Mobile - @media screen and (max-width: 40rem) { - h1 { - font: { - size: var(--pi-font-size-x-large); - } - } - h2 { - font: { - size: var(--pi-font-size-large); - } - } - } - // Tablet & Desktop - @media screen and (min-width: 40rem) { - h1 { - font: { - size: var(--pi-font-size-x-large); - } - } - h2 { - font: { - size: var(--pi-font-size-large); - } - } - } -} - -mark { - all: unset; - text-decoration: none; - position: relative; - &:after { - content: ''; - position: absolute; - top: 100%; - left: 0; - height: 0.2rem; - width: 100%; - border-radius: 0.2rem; - } - &.pi-color__primary { - &:after { - background: var(--pi-color-primary); - } - } - &.pi-color__accent, - &:not(.pi-color__primary):not(.pi-color__warn) { - &:after { - background: var(--pi-color-accent); - } - } - &.pi-color__warn { - &:after { - background: var(--pi-color-warn); - } - } -} - -@mixin textColor($color) { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}); - } - // (50) - &.pi-color__density--50 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-50); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-50); - } - } - // (100) - &.pi-color__density--100 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-100); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-100); - } - } - // (200) - &.pi-color__density--200 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-200); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-200); - } - } - // (300) - &.pi-color__density--300 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-300); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-300); - } - } - // (400) - &.pi-color__density--400 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-400); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-400); - } - } - // (900) - &.pi-color__density--900 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-900); - } - &:not(button):not([class*='content']) - > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-#{$color}-900); - } - } -} - -// Primary -.pi-color__primary { - @include textColor(primary); -} - -// Accent -.pi-color__accent { - @include textColor(accent); -} - -// Warn -.pi-color__warn { - @include textColor(warn); -} - -// Success -.pi-color__success { - @include textColor(success); -} - -// Highlighted -.pi-color__highlighted { - @include textColor(highlighted); -} - -// Grey -.pi-color__grey { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey); - } - // Grey (50) - &.pi-color__density--50 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-75); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-75); - } - } - // Grey (100) - &.pi-color__density--100 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-100); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-100); - } - } - // Grey (200) - &.pi-color__density--200 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-200); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-200); - } - } - // Grey (300) - &.pi-color__density--300 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-300); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-300); - } - } - // Grey (400) - &.pi-color__density--400 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-300); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-300); - } - } - // Grey (900) - &.pi-color__density--900 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - } -} - -// White -.pi-color__white { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-white); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-white); - } - // White (200) - &.pi-color__density--200 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-white-rgba-06); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-white-rgba-06); - } - } - // White (900) - &.pi-color__density--900 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-white); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-white); - } - } -} - -// Black -.pi-color__black { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - // Black (200) - &.pi-color__density--200 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - } - // Black (900) - &.pi-color__density--900 { - &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { - color: var(--pi-color-grey-900); - } - } -} - -// Blockquote -blockquote { - display: flex; - // Mobile - @media screen and (max-width: 40rem) { - gap: var(--pi-spacing-xx-small); - } - // Tablet & Desktop - @media screen and (min-width: 40rem) { - gap: var(--pi-spacing-x-large); - } - &::before { - content: open-quote; - } - - &::after { - content: close-quote; - } - &::before, - &::after { - position: relative; - margin-top: -1rem; - font: { - size: 300%; - } - } - // Primary - &.pi-color__primary { - &::before, - &::after { - color: var(--pi-color-primary); - } - } - // Accent - &.pi-color__accent { - &::before, - &::after { - color: var(--pi-color-accent); - } - } - // Warn - &.pi-color-warn { - &::before, - &::after { - color: var(--pi-color-warn); - } - } -} - -.pi-text { - // xxs - 0.625rem - 10px - &.pi-text__size--xx-small { - @include fontSize(xx-small); - } - // xs - 0.75rem - 12px - &.pi-text__size--x-small { - @include fontSize(x-small); - } - // s - 0.9375rem - 15px - &.pi-text__size--small { - @include fontSize(small); - } - // m - 1.125rem - 18px - &.pi-text__size--medium { - @include fontSize(medium); - } - // l - 1.375rem - 22px - &.pi-text__size--large { - @include fontSize(large); - } - // xl - 1.6875rem - 27px - &.pi-text__size--x-large { - @include fontSize(x-large); - } - // xxl - 2.375rem - 38px - &.pi-text__size--xx-large { - @include fontSize(xx-large); - } - // xxxl - 2.875rem - 46px - &.pi-text__size--xxx-large { - @include fontSize(xxx-large); - } -} - -// Form field labels -.pi-label { - display: flex; - align-items: center; - gap: var(--pi-spacing-xxx-small); -} - -@mixin textCenteredMaxWidth($max-width) { - .pi-domain-component { - .pi-text__centered { - &:not(.pi-text__size--x-small) { - max-width: $max-width; - } - } - } -} - -html { - &.is-desktop { - .pi-domain-component { - .pi-text__centered { - margin: 0 auto; - } - } - } - &.is-desktop__small { - @include textCenteredMaxWidth(80%); - } - &.is-desktop__medium { - @include textCenteredMaxWidth(75%); - } - &.is-desktop__large { - @include textCenteredMaxWidth(66.66%); - } -} - -.pi-text__letter-spacing { - letter-spacing: var(--pi-spacing-xx-small); -} +@mixin fontSize($font-size) { + font: { + size: var(--pi-font-size-#{$font-size}); + } +} + +.pi-text__centered { + &:is(h1, h2, h3, h4, h5, span, p, i, figcaption, label, small, legend) { + display: block; + width: 100%; + text-align: center; + } + & > *:nth-child(n + 1) { + &:is(h1, h2, h3, h4, h5, p, i, figcaption, label, small, legend) { + display: block; + text-align: center; + } + } +} + +* { + &:is(h1) { + line-height: 116.5%; + font: { + weight: 700; + } + } + &:is(h2) { + line-height: 125%; + } + &:is(h3, h4, h5) { + line-height: 130%; + } + & > *:nth-child(n + 1) { + &:is(h1) { + line-height: 116.5%; + } + &:is(h2) { + line-height: 125%; + } + } + & > *:nth-child(n + 1) { + &:is(h3, h4, h5) { + line-height: 130%; + } + } +} + +.pi-text__is-covered { + &:is(h1, h2, h3, h4, h5, span, p, i, figcaption, label, small, legend) { + position: relative; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + &::before { + content: ''; + display: block; + width: 100%; + height: 100%; + background: var(--pi-color-grey-75); + position: absolute; + top: 0; + border-radius: var(--pi-border-radius-xx-small); + } + } +} + +.pi-text__group { + & > * + * { + margin-left: var(--pi-spacing-xxx-small); + } +} + +.pi-shell__deale-saas { + h3 { + font: { + size: var(--pi-font-size-medium); + } + } + h4 { + font: { + size: var(--pi-font-size-small); + } + } + h5 { + font: { + size: var(--pi-font-size-small); + } + } + p { + font: { + size: var(--pi-font-size-small); + } + } + figcaption { + font: { + size: var(--pi-font-size-small); + } + } + strong { + font-family: 'Soehne', Helvetica, Arial, sans-serif; + font-weight: 700; + } + i { + font: { + size: var(--pi-font-size-small); + } + } + label { + font: { + size: var(--pi-font-size-small); + } + } + + small { + font: { + size: var(--pi-font-size-xx-small); + } + } + + // Mobile + @media screen and (max-width: 40rem) { + h1 { + font: { + size: var(--pi-font-size-x-large); + } + } + h2 { + font: { + size: var(--pi-font-size-large); + } + } + } + // Tablet & Desktop + @media screen and (min-width: 40rem) { + h1 { + font: { + size: var(--pi-font-size-x-large); + } + } + h2 { + font: { + size: var(--pi-font-size-large); + } + } + } +} + +mark { + all: unset; + text-decoration: none; + position: relative; + &:after { + content: ''; + position: absolute; + top: 100%; + left: 0; + height: 0.2rem; + width: 100%; + border-radius: 0.2rem; + } + &.pi-color__primary { + &:after { + background: var(--pi-color-primary); + } + } + &.pi-color__accent, + &:not(.pi-color__primary):not(.pi-color__warn) { + &:after { + background: var(--pi-color-accent); + } + } + &.pi-color__warn { + &:after { + background: var(--pi-color-warn); + } + } +} + +@mixin textColor($color) { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}); + } + // (50) + &.pi-color__density--50 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-50); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-50); + } + } + // (100) + &.pi-color__density--100 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-100); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-100); + } + } + // (200) + &.pi-color__density--200 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-200); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-200); + } + } + // (300) + &.pi-color__density--300 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-300); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-300); + } + } + // (400) + &.pi-color__density--400 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-400); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-400); + } + } + // (900) + &.pi-color__density--900 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-900); + } + &:not(button):not([class*='content']) + > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-#{$color}-900); + } + } +} + +// Primary +.pi-color__primary { + @include textColor(primary); +} + +// Accent +.pi-color__accent { + @include textColor(accent); +} + +// Warn +.pi-color__warn { + @include textColor(warn); +} + +// Success +.pi-color__success { + @include textColor(success); +} + +// Highlighted +.pi-color__highlighted { + @include textColor(highlighted); +} + +// Grey +.pi-color__grey { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey); + } + // Grey (50) + &.pi-color__density--50 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-75); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-75); + } + } + // Grey (100) + &.pi-color__density--100 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-100); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-100); + } + } + // Grey (200) + &.pi-color__density--200 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-200); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-200); + } + } + // Grey (300) + &.pi-color__density--300 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-300); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-300); + } + } + // Grey (400) + &.pi-color__density--400 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-300); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-300); + } + } + // Grey (900) + &.pi-color__density--900 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + } +} + +// White +.pi-color__white { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-white); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-white); + } + // White (200) + &.pi-color__density--200 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-white-rgba-06); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-white-rgba-06); + } + } + // White (900) + &.pi-color__density--900 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-white); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-white); + } + } +} + +// Black +.pi-color__black { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + // Black (200) + &.pi-color__density--200 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + } + // Black (900) + &.pi-color__density--900 { + &:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + &:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) { + color: var(--pi-color-grey-900); + } + } +} + +// Blockquote +blockquote { + display: flex; + // Mobile + @media screen and (max-width: 40rem) { + gap: var(--pi-spacing-xx-small); + } + // Tablet & Desktop + @media screen and (min-width: 40rem) { + gap: var(--pi-spacing-x-large); + } + &::before { + content: open-quote; + } + + &::after { + content: close-quote; + } + &::before, + &::after { + position: relative; + margin-top: -1rem; + font: { + size: 300%; + } + } + // Primary + &.pi-color__primary { + &::before, + &::after { + color: var(--pi-color-primary); + } + } + // Accent + &.pi-color__accent { + &::before, + &::after { + color: var(--pi-color-accent); + } + } + // Warn + &.pi-color-warn { + &::before, + &::after { + color: var(--pi-color-warn); + } + } +} + +.pi-text { + // xxs - 0.625rem - 10px + &.pi-text__size--xx-small { + @include fontSize(xx-small); + } + // xs - 0.75rem - 12px + &.pi-text__size--x-small { + @include fontSize(x-small); + } + // s - 0.9375rem - 15px + &.pi-text__size--small { + @include fontSize(small); + } + // m - 1.125rem - 18px + &.pi-text__size--medium { + @include fontSize(medium); + } + // l - 1.375rem - 22px + &.pi-text__size--large { + @include fontSize(large); + } + // xl - 1.6875rem - 27px + &.pi-text__size--x-large { + @include fontSize(x-large); + } + // xxl - 2.375rem - 38px + &.pi-text__size--xx-large { + @include fontSize(xx-large); + } + // xxxl - 2.875rem - 46px + &.pi-text__size--xxx-large { + @include fontSize(xxx-large); + } +} + +// Form field labels +.pi-label { + display: flex; + align-items: center; + gap: var(--pi-spacing-xxx-small); +} + +@mixin textCenteredMaxWidth($max-width) { + .pi-domain-component { + .pi-text__centered { + &:not(.pi-text__size--x-small) { + max-width: $max-width; + } + } + } +} + +html { + &.is-desktop { + .pi-domain-component { + .pi-text__centered { + margin: 0 auto; + } + } + } + &.is-desktop__small { + @include textCenteredMaxWidth(80%); + } + &.is-desktop__medium { + @include textCenteredMaxWidth(75%); + } + &.is-desktop__large { + @include textCenteredMaxWidth(66.66%); + } +} + +.pi-text__letter-spacing { + letter-spacing: var(--pi-spacing-xx-small); +} diff --git a/libs/ui/src/lib/styles/common/components/index.scss b/libs/ui/src/lib/styles/common/components/index.scss index 6129ced..4aaf36d 100644 --- a/libs/ui/src/lib/styles/common/components/index.scss +++ b/libs/ui/src/lib/styles/common/components/index.scss @@ -1,15 +1,15 @@ -@forward 'pi-accordion'; -@forward 'pi-card'; -@forward 'pi-divider'; -@forward 'pi-headline'; -@forward 'pi-list-item'; -@forward 'pi-note'; -@forward 'pi-panel'; -@forward 'pi-spinner'; -@forward 'pi-tab'; -@forward 'pi-text-viewer'; -@forward 'pi-text'; - -@use 'pi-button'; -@use 'pi-data-grid'; -@use 'pi-field'; +@forward 'pi-accordion'; +@forward 'pi-card'; +@forward 'pi-divider'; +@forward 'pi-headline'; +@forward 'pi-list-item'; +@forward 'pi-note'; +@forward 'pi-panel'; +@forward 'pi-spinner'; +@forward 'pi-tab'; +@forward 'pi-text-viewer'; +@forward 'pi-text'; + +@use 'pi-button'; +@use 'pi-data-grid'; +@use 'pi-field'; diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss index 37103c0..b1ad104 100644 --- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss +++ b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss @@ -1,284 +1,284 @@ -@mixin privateButtonsSizes { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not( - .pi-button__toggle - ):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) { - &:not(.pi-button__x-small):not(.pi-button__xx-small) { - height: var(--pi-spacing-xxx-large); - } - } - - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not( - .ch2-btn - ):not(.pi-button__icon--single) { - &.pi-button__x-small { - height: var(--pi-spacing-xx-large); - } - } - - // Default - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ) { - // Sizes - // X small - &.pi-button { - &:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not( - .pi-button__large - ):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not( - .pi-button__trimmed - ) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); - } - } - } -} - -// Fill -@mixin privateButtonFillColor($color) { - // Default color - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) { - background-color: var(--pi-color-#{$color}); - color: var(--pi-color-white); - &:disabled { - background-color: var(--pi-color-#{$color}-200); - } - &:hover { - &:enabled { - background-color: var(--pi-color-#{$color}-900); - } - } - } - // Default color & White - &.pi-button__white { - color: var(--pi-color-#{$color}); - &:hover { - &:enabled { - background-color: var(--pi-color-#{$color}); - } - } - } -} - -// Ghost -@mixin privateButtonGhostColor($color) { - color: var(--pi-color-#{$color}); - &:hover { - &:enabled { - color: var(--pi-color-#{$color}-900); - } - } - &:disabled { - color: var(--pi-color-#{$color}-200); - } -} - -// Outline -@mixin privateButtonOutlineColor($color) { - background-color: transparent; - box-sizing: border-box; - transition: all 0.16s ease-in; - border: 1px solid; - color: var(--pi-color-#{$color}); - &:hover { - &:enabled { - color: var(--pi-color-white); - border-color: var(--pi-color-#{$color}); - background-color: var(--pi-color-#{$color}); - } - } - &:disabled { - color: var(--pi-color-#{$color}-200); - } - // Is Active - &.is-active { - color: var(--pi-color-white); - border-color: var(--pi-color-#{$color}); - background-color: var(--pi-color-#{$color}); - } -} - -@mixin privateButtonsColors { - // Default - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ) { - // Color - // White - &.pi-color__white { - background-color: var(--pi-color-white); - &:disabled { - background-color: rgba($color: white, $alpha: 0.6); - } - &:hover { - color: var(--pi-color-white); - background-color: transparent; - border: 2px solid var(--pi-color-white); - &:enabled { - background-color: transparent; - } - } - // White default - &.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__highlighted - ):not(.pi-color__white) { - &:not(:hover) { - color: var(--pi-color-primary); - } - } - } - - // Fill - // Primary - &.pi-color__primary { - @include privateButtonFillColor(primary); - } - // Accent - &.pi-color__accent { - @include privateButtonFillColor(accent); - } - // Warn - &.pi-color__warn { - @include privateButtonFillColor(warn); - } - - // Highlighted - &.pi-color__highlighted { - @include privateButtonFillColor(highlighted); - } - - // Ghost - &.pi-button__appearance--ghost { - background-color: transparent; - text-decoration: underline; - // Ghost & Primary - &.pi-color__primary, - &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__white - ):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) { - @include privateButtonGhostColor(primary); - } - // Ghost & Accent - &.pi-color__accent { - @include privateButtonGhostColor(accent); - } - // Ghost & Warn - &.pi-color__warn { - @include privateButtonGhostColor(warn); - } - // Ghost & Highlighted - &.pi-color__highlighted { - @include privateButtonGhostColor(Highlighted); - } - // Ghost & White - &.pi-color__white { - color: var(--pi-color-white); - &:hover { - border: unset; - &:enabled { - color: var(--pi-color-white); - text-decoration: underline; - } - } - &:disabled { - color: rgba($color: white, $alpha: 0.6); - } - } - // Ghost & Black - &.pi-color__black { - color: var(--pi-color-grey-900); - &:hover { - &:enabled { - color: var(--pi-color-grey-900); - text-decoration: underline; - } - } - &:disabled { - color: rgba($color: #3d3d3d, $alpha: 0.6); - } - } - // Ghost & Grey - &.pi-color__grey { - color: var(--pi-color-grey-300); - &:hover { - &:enabled { - color: var(--pi-color-grey-400); - text-decoration: underline; - } - } - &:disabled { - color: var(--pi-color-grey-100); - } - } - } - - // Outline - &.pi-button__appearance--outline { - // Outline & Primary - &.pi-color__primary, - &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__white - ):not(.pi-color__highlighted):not(.pi-color__black) { - @include privateButtonOutlineColor(primary); - } - // Outline & Accent - &.pi-color__accent { - @include privateButtonOutlineColor(accent); - } - // Outline & Warn - &.pi-color__warn { - @include privateButtonOutlineColor(warn); - } - - // Outline & Highlighted - &.pi-color__highlighted { - @include privateButtonOutlineColor(highlighted); - } - - &.pi-color__black { - @include privateButtonOutlineColor(grey); - } - // Outline & White - &.pi-color__white { - color: var(--pi-color-white); - &:hover { - &:enabled { - color: var(--pi-color-primary); - background-color: var(--pi-color-white); - border-color: var(--pi-color-white); - } - } - &:disabled { - color: rgba($color: #ffffff, $alpha: 0.6); - } - // Is Active - &.is-active { - color: var(--pi-color-primary); - background-color: var(--pi-color-white); - border-color: var(--pi-color-white); - } - } - } - } -} - -.pi-shell { - &.pi-shell__deale-saas { - .is-private { - button { - // Colors - @include privateButtonsColors; - // Sizes - @include privateButtonsSizes; - } - } - } -} - -.cdk-overlay-container { - button { - // Colors - @include privateButtonsColors; - // Sizes - @include privateButtonsSizes; - } -} +@mixin privateButtonsSizes { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not( + .pi-button__toggle + ):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) { + &:not(.pi-button__x-small):not(.pi-button__xx-small) { + height: var(--pi-spacing-xxx-large); + } + } + + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not( + .ch2-btn + ):not(.pi-button__icon--single) { + &.pi-button__x-small { + height: var(--pi-spacing-xx-large); + } + } + + // Default + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ) { + // Sizes + // X small + &.pi-button { + &:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not( + .pi-button__large + ):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not( + .pi-button__trimmed + ) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); + } + } + } +} + +// Fill +@mixin privateButtonFillColor($color) { + // Default color + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) { + background-color: var(--pi-color-#{$color}); + color: var(--pi-color-white); + &:disabled { + background-color: var(--pi-color-#{$color}-200); + } + &:hover { + &:enabled { + background-color: var(--pi-color-#{$color}-900); + } + } + } + // Default color & White + &.pi-button__white { + color: var(--pi-color-#{$color}); + &:hover { + &:enabled { + background-color: var(--pi-color-#{$color}); + } + } + } +} + +// Ghost +@mixin privateButtonGhostColor($color) { + color: var(--pi-color-#{$color}); + &:hover { + &:enabled { + color: var(--pi-color-#{$color}-900); + } + } + &:disabled { + color: var(--pi-color-#{$color}-200); + } +} + +// Outline +@mixin privateButtonOutlineColor($color) { + background-color: transparent; + box-sizing: border-box; + transition: all 0.16s ease-in; + border: 1px solid; + color: var(--pi-color-#{$color}); + &:hover { + &:enabled { + color: var(--pi-color-white); + border-color: var(--pi-color-#{$color}); + background-color: var(--pi-color-#{$color}); + } + } + &:disabled { + color: var(--pi-color-#{$color}-200); + } + // Is Active + &.is-active { + color: var(--pi-color-white); + border-color: var(--pi-color-#{$color}); + background-color: var(--pi-color-#{$color}); + } +} + +@mixin privateButtonsColors { + // Default + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ) { + // Color + // White + &.pi-color__white { + background-color: var(--pi-color-white); + &:disabled { + background-color: rgba($color: white, $alpha: 0.6); + } + &:hover { + color: var(--pi-color-white); + background-color: transparent; + border: 2px solid var(--pi-color-white); + &:enabled { + background-color: transparent; + } + } + // White default + &.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__highlighted + ):not(.pi-color__white) { + &:not(:hover) { + color: var(--pi-color-primary); + } + } + } + + // Fill + // Primary + &.pi-color__primary { + @include privateButtonFillColor(primary); + } + // Accent + &.pi-color__accent { + @include privateButtonFillColor(accent); + } + // Warn + &.pi-color__warn { + @include privateButtonFillColor(warn); + } + + // Highlighted + &.pi-color__highlighted { + @include privateButtonFillColor(highlighted); + } + + // Ghost + &.pi-button__appearance--ghost { + background-color: transparent; + text-decoration: underline; + // Ghost & Primary + &.pi-color__primary, + &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__white + ):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) { + @include privateButtonGhostColor(primary); + } + // Ghost & Accent + &.pi-color__accent { + @include privateButtonGhostColor(accent); + } + // Ghost & Warn + &.pi-color__warn { + @include privateButtonGhostColor(warn); + } + // Ghost & Highlighted + &.pi-color__highlighted { + @include privateButtonGhostColor(Highlighted); + } + // Ghost & White + &.pi-color__white { + color: var(--pi-color-white); + &:hover { + border: unset; + &:enabled { + color: var(--pi-color-white); + text-decoration: underline; + } + } + &:disabled { + color: rgba($color: white, $alpha: 0.6); + } + } + // Ghost & Black + &.pi-color__black { + color: var(--pi-color-grey-900); + &:hover { + &:enabled { + color: var(--pi-color-grey-900); + text-decoration: underline; + } + } + &:disabled { + color: rgba($color: #3d3d3d, $alpha: 0.6); + } + } + // Ghost & Grey + &.pi-color__grey { + color: var(--pi-color-grey-300); + &:hover { + &:enabled { + color: var(--pi-color-grey-400); + text-decoration: underline; + } + } + &:disabled { + color: var(--pi-color-grey-100); + } + } + } + + // Outline + &.pi-button__appearance--outline { + // Outline & Primary + &.pi-color__primary, + &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__white + ):not(.pi-color__highlighted):not(.pi-color__black) { + @include privateButtonOutlineColor(primary); + } + // Outline & Accent + &.pi-color__accent { + @include privateButtonOutlineColor(accent); + } + // Outline & Warn + &.pi-color__warn { + @include privateButtonOutlineColor(warn); + } + + // Outline & Highlighted + &.pi-color__highlighted { + @include privateButtonOutlineColor(highlighted); + } + + &.pi-color__black { + @include privateButtonOutlineColor(grey); + } + // Outline & White + &.pi-color__white { + color: var(--pi-color-white); + &:hover { + &:enabled { + color: var(--pi-color-primary); + background-color: var(--pi-color-white); + border-color: var(--pi-color-white); + } + } + &:disabled { + color: rgba($color: #ffffff, $alpha: 0.6); + } + // Is Active + &.is-active { + color: var(--pi-color-primary); + background-color: var(--pi-color-white); + border-color: var(--pi-color-white); + } + } + } + } +} + +.pi-shell { + &.pi-shell__deale-saas { + .is-private { + button { + // Colors + @include privateButtonsColors; + // Sizes + @include privateButtonsSizes; + } + } + } +} + +.cdk-overlay-container { + button { + // Colors + @include privateButtonsColors; + // Sizes + @include privateButtonsSizes; + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss index a0d99f0..c0c3942 100644 --- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss +++ b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss @@ -1,737 +1,737 @@ -@mixin publicGhostButtonsColors( - $background-image: linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)), - $color: primary -) { - color: var(--pi-color-#{$color}); - background-image: $background-image; - &:hover { - &:enabled { - text-decoration: underline; - } - } -} - -@mixin publicButtonsBackgroundColors( - $color-disabled: var(--pi-color-primary-200), - $color-enabled: var(--pi-color-primary-900) -) { - background-size: 100%; - background-repeat: repeat; - color: var(--pi-color-white); - &:disabled { - background-color: $color-disabled; - } - &:hover { - &:enabled { - background-color: $color-enabled; - } - } -} - -@mixin publicFillButtonsGradients($color) { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) { - background-size: 100%; - background-repeat: repeat; - color: var(--pi-color-white); - // Light - &.pi-color__mode--light { - &:not(:disabled) { - background-image: var(--pi-gradient-#{$color}-light); - } - &:disabled { - color: var(--pi-color-grey-200); - background-image: var(--pi-gradient-light-disabled); - } - } - // Dark - &:not(.pi-color__mode--light) { - &:not(:disabled) { - background-image: var(--pi-gradient-#{$color}-dark); - } - &:disabled { - background-image: var(--pi-gradient-dark-disabled); - } - } - } - // Primary & White - &.pi-button__white { - color: var(--pi-color-#{$color}); - &:hover { - &:enabled { - background-color: var(--pi-color-#{$color}); - } - } - } -} - -// Sizes -@mixin publicButtonsSizes { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not( - .pi-button__toggle - ):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single):not( - .pi-button__type--menu-item - ) { - height: 2.875rem; - &.pi-button__icon--single { - width: var(--pi-spacing-xxxx-large); - } - } - - &:not(.pi-button__toggle):not(.pi-button__x-large):not(.pi-button__trimmed):not( - .pi-button__type--menu-item - ) { - height: 2.875rem; - &.pi-button__icon--single { - width: var(--pi-spacing-xxxx-large); - } - } - // Default - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ) { - // Sizes - // X small - &.pi-button { - &:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not( - .pi-button__large - ):not(.pi-button__trimed):not(.pi-button__xx-small):not(.pi-button__trimmed) { - min-height: 2.875rem; - } - &:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not( - .pi-button__large - ):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not( - .pi-button__trimmed - ) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); - } - } - } -} - -// Shine hover effect -@mixin publicButtonsShineHoverEffect { - // Hover shine effect - &:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(.pi-color__black) { - position: relative; - overflow: hidden; - &::after { - content: ''; - position: absolute; - top: -50%; - right: 0; - bottom: -50%; - left: -50%; - transform: rotateZ(75deg) translate(-5rem, 7.5rem); - &:hover { - cursor: pointer; - } - } - &:hover, - &:focus { - &::after { - animation: sheen 0.75s forwards; - } - } - - &:active { - transform: translate(0, -0.125rem); - } - - // Mode Light - &.pi-color__mode--light { - &::after { - background: linear-gradient( - to bottom, - rgba(229, 172, 142, 0), - rgba(255, 255, 255, 0.25) 50%, - rgba(229, 172, 142, 0) - ); - } - &:active { - box-shadow: 0px 0px 0px white; - -webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); - box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); - } - } - // Mode Dark - &.pi-color__mode--dark { - &::after { - background: linear-gradient( - to bottom, - rgba(229, 172, 142, 0), - rgba(255, 255, 255, 0.125) 50%, - rgba(229, 172, 142, 0) - ); - } - &:active { - box-shadow: 0px 0px 0px white; - -webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125); - -moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125); - box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125); - } - } - &:focus { - outline: 0; - } - - @keyframes sheen { - 100% { - transform: rotateZ(30deg) translate(1rem, -9rem); - } - } - } -} - -// Colors -@mixin publicButtonsColors { - position: relative; - overflow: hidden; - - // Shine hover effect - &:not(:disabled) { - @include publicButtonsShineHoverEffect; - } - // Default - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ) { - font: { - weight: 600; - } - // Color - // White - // TODO: Add customized white 25 density color gradient for backgrounds - // TODO: Add text color gradients - &.pi-color__white { - background-image: var(--pi-gradient-white-rgba); - &:disabled { - background-color: rgba($color: white, $alpha: 0.6); - } - &:hover { - color: var(--pi-color-primary-900); - background-color: transparent; - border: 1px solid var(--pi-color-primary-100); - &:enabled { - background-color: transparent; - } - } - // White default - &.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__highlighted - ) { - &:not(:hover) { - color: var(--pi-color-primary); - } - } - } - // Primary - &.pi-color__primary { - @include publicFillButtonsGradients(primary); - } - // Accent - &.pi-color__accent { - @include publicFillButtonsGradients(accent); - } - // Highlighted - &.pi-color__highlighted { - @include publicFillButtonsGradients(highlighted); - } - - // Black - &.pi-color__black { - background-image: linear-gradient( - 300deg, - hsl(0deg 0% 62%) 0%, - hsl(344deg 0% 57%) 21%, - hsl(344deg 0% 53%) 30%, - hsl(344deg 0% 49%) 39%, - hsl(344deg 0% 44%) 46%, - hsl(344deg 0% 40%) 54%, - hsl(344deg 0% 36%) 61%, - hsl(344deg 0% 32%) 69%, - hsl(344deg 0% 28%) 79%, - hsl(0deg 0% 24%) 100% - ); - color: var(--pi-color-white); - &:disabled { - background-color: rgba($color: #3d3d3d, $alpha: 0.6); - } - &:hover { - &:enabled { - background-color: var(--pi-color-black); - } - } - // White default - &.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__highlighted - ) { - &:not(:hover) { - color: var(--pi-color-black); - } - } - } - - // Warn - &.pi-color__warn { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-color__white - ) { - @include publicButtonsBackgroundColors(var(--pi-color-warn-200), var(--pi-color-warn-900)); - } - // Mode - // Default - &:not(.pi-color__mode--light) { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-color__white - ) { - background-image: linear-gradient( - 300deg, - hsl(0deg 74% 71%) 0%, - hsl(0deg 71% 69%) 21%, - hsl(0deg 68% 66%) 30%, - hsl(1deg 65% 64%) 39%, - hsl(1deg 62% 61%) 46%, - hsl(1deg 60% 59%) 54%, - hsl(1deg 58% 56%) 61%, - hsl(1deg 56% 54%) 69%, - hsl(0deg 54% 51%) 79%, - hsl(0deg 56% 49%) 100% - ); - } - } - // Light - &.pi-color__mode--light { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-color__white - ) { - background-image: linear-gradient( - 300deg, - hsl(350deg 100% 93%) 0%, - hsl(351deg 95% 91%) 21%, - hsl(352deg 92% 89%) 30%, - hsl(353deg 89% 86%) 39%, - hsl(354deg 87% 84%) 46%, - hsl(356deg 84% 82%) 54%, - hsl(357deg 81% 79%) 61%, - hsl(358deg 79% 77%) 69%, - hsl(359deg 76% 74%) 79%, - hsl(0deg 74% 71%) 100% - ); - } - } - // Warn & White - &.pi-color__white { - &:not(:hover) { - color: var(--pi-color-warn); - } - } - } - - // Success - &.pi-color__success { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-color__white - ) { - @include publicButtonsBackgroundColors( - var(--pi-color-success-200), - var(--pi-color-success-900) - ); - } - // Mode - // Default - &:not(.pi-color__mode--light) { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-color__white - ) { - background-image: linear-gradient( - 300deg, - hsl(155deg 48% 79%) 0%, - hsl(154deg 45% 74%) 21%, - hsl(153deg 43% 69%) 30%, - hsl(152deg 42% 64%) 39%, - hsl(151deg 40% 60%) 46%, - hsl(151deg 39% 55%) 54%, - hsl(150deg 39% 50%) 61%, - hsl(150deg 48% 45%) 69%, - hsl(151deg 61% 39%) 79%, - hsl(155deg 100% 30%) 100% - ); - } - } - // Light - &.pi-color__mode--light { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-color__white - ) { - background-image: linear-gradient( - 300deg, - hsl(155deg 62% 91%) 0%, - hsl(155deg 60% 88%) 21%, - hsl(155deg 59% 84%) 30%, - hsl(155deg 58% 81%) 39%, - hsl(155deg 57% 78%) 46%, - hsl(155deg 57% 75%) 54%, - hsl(155deg 56% 72%) 61%, - hsl(155deg 56% 68%) 69%, - hsl(155deg 56% 65%) 79%, - hsl(155deg 56% 61%) 100% - ); - } - } - // Highlighted & White - &.pi-color__white { - &:not(:hover) { - color: var(--pi-color-success); - } - } - } - - // Ghost - &.pi-button__appearance--ghost { - background-color: transparent; - text-decoration: underline; - background-size: 100%; - background-repeat: repeat; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-background-clip: text; - -moz-text-fill-color: transparent; - - // Ghost & Primary - &.pi-color__primary, - &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__white - ):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey):not( - .pi-color__success - ) { - @include publicGhostButtonsColors; - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-primary-100), var(--pi-color-primary-200)), - primary-200 - ); - } - } - // Ghost & Accent - &.pi-color__accent { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)), - accent - ); - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-accent-100), var(--pi-color-accent-100)), - accent-200 - ); - } - } - // Ghost & Warn - &.pi-color__warn { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-warn), var(--pi-color-warn-900)), - warn - ); - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-warn-100), var(--pi-color-warn-200)), - warn-200 - ); - } - } - // Ghost & White - &.pi-color__white { - @include publicGhostButtonsColors; - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-white), rgba($color: white, $alpha: 0.6)), - white - ); - } - } - // Ghost & Black - &.pi-color__black { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-black), var(--pi-color-grey-900)), - grey - ); - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-black), rgba($color: #3d3d3d, $alpha: 0.6)), - grey-200 - ); - } - } - // Ghost & Highlighted - &.pi-color__highlighted { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)), - highlighted - ); - &:disabled { - @include publicGhostButtonsColors( - linear-gradient( - 30deg, - var(--pi-color-highlighted-100), - var(--pi-color-highlighted-200) - ), - highlighted-200 - ); - } - } - // Ghost & Grey - &.pi-color__grey { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-grey-100), var(--pi-color-grey-400)), - grey-400 - ); - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-grey-25), var(--pi-color-grey-75)), - grey-50 - ); - } - } - // Ghost & Success - &.pi-color__success { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-success), var(--pi-color-success-900)), - success - ); - &:disabled { - @include publicGhostButtonsColors( - linear-gradient(30deg, var(--pi-color-success-100), var(--pi-color-success-200)), - success-200 - ); - } - } - } - - // Outline - &.pi-button__appearance--outline { - background-color: transparent; - box-sizing: border-box; - transition: all 0.16s ease-in; - border: 1px solid; - - // Outline & Primary - &.pi-color__primary, - &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__white - ):not(.pi-color__highlighted) { - color: var(--pi-color-primary); - &:hover { - &:enabled { - color: var(--pi-color-white); - border-color: var(--pi-color-primary); - background-color: var(--pi-color-primary); - } - } - &:disabled { - color: var(--pi-color-primary-200); - } - // Is Active - &.is-active { - color: var(--pi-color-white); - border-color: var(--pi-color-primary); - background-color: var(--pi-color-primary); - } - } - // Outline & Accent - &.pi-color__accent { - color: var(--pi-color-accent); - &:hover { - &:enabled { - color: var(--pi-color-white); - border-color: var(--pi-color-accent); - background-color: var(--pi-color-accent); - } - } - &:disabled { - color: var(--pi-color-accent-200); - border-color: var(--pi-color-accent-200); - } - // Is Active - &.is-active { - color: var(--pi-color-white); - background-color: var(--pi-color-accent); - border-color: var(--pi-color-accent); - } - } - // Outline & Warn - &.pi-color__warn { - color: var(--pi-color-warn); - &:hover { - &:enabled { - color: var(--pi-color-white); - background-color: var(--pi-color-warn); - border-color: var(--pi-color-warn); - } - } - &:disabled { - color: var(--pi-color-warn-200); - } - // Is Active - &.is-active { - color: var(--pi-color-white); - background-color: var(--pi-color-warn); - border-color: var(--pi-color-warn); - } - } - - // Outline & Highlighted - &.pi-color__highlighted { - color: var(--pi-color-highlighted); - &:hover { - &:enabled { - color: var(--pi-color-white); - background-color: var(--pi-color-highlighted); - border-color: var(--pi-color-highlighted); - } - } - &:disabled { - color: var(--pi-color-highlighted-200); - } - // Is Active - &.is-active { - color: var(--pi-color-white); - background-color: var(--pi-color-highlighted); - border-color: var(--pi-color-highlighted); - } - } - - // Outline & White - &.pi-color__white { - color: var(--pi-color-white); - &:hover { - &:enabled { - color: var(--pi-color-primary); - background-color: var(--pi-color-white); - border-color: var(--pi-color-white); - } - } - &:disabled { - color: rgba($color: #ffffff, $alpha: 0.6); - } - // Is Active - &.is-active { - color: var(--pi-color-primary); - background-color: var(--pi-color-white); - border-color: var(--pi-color-white); - } - } - } - } -} - -@mixin publicFixedButtonSideSpacing( - $top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)), - $side-spacing: var(--pi-spacing-medium), - $bottom-left-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)), - $bottom-right-spacing: calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) -) { - .pi-shell { - &.pi-shell__deale-website, - &.is-public { - // Fixed - button, - .pi-icon-button, - .pi-action-button { - &.is-fixed { - position: fixed; - z-index: 999; - &.is-fixed--top-left, - &.is-fixed--top-right { - top: $top-spacing; - right: $side-spacing; - } - &.is-fixed--bottom-left { - bottom: $bottom-left-spacing; - left: $side-spacing; - } - &.is-fixed--bottom-right { - bottom: $bottom-right-spacing; - right: $side-spacing; - } - } - } - } - } -} - -.pi-shell { - &.pi-shell__deale-website, - .is-public { - button { - // Colors - @include publicButtonsColors; - // Sizes - @include publicButtonsSizes; - } - // Common - button { - &.pi-button { - // X Large - &.pi-button__x-large { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); - border-radius: 1.4rem; - // Mobile - @media screen and (max-width: 40rem) { - height: 3.125rem; - min-width: 10.6875rem; - font: { - size: var(--pi-font-size-small); - } - } - // Tablet & Desktop - @media screen and (min-width: 40rem) { - height: 3.75rem; - min-width: 11.25rem; - font: { - size: var(--pi-font-size-medium); - } - } - } - } - } - } -} -html, -.cdk-overlay-container { - // Mobile - &.is-mobile { - @include publicFixedButtonSideSpacing( - calc(var(--pi-spacing-medium) + env(safe-area-inset-top)), - var(--pi-spacing-medium), - calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)), - calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) - ); - } - &.is-tablet { - &.is-tablet__small { - @include publicFixedButtonSideSpacing( - calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)), - var(--pi-spacing-x-large), - calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)), - calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) - ); - } - &.is-tablet__large { - @include publicFixedButtonSideSpacing( - calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)), - var(--pi-spacing-x-large), - calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)), - calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) - ); - } - } - // Tablet & Desktop - &.is-desktop { - @include publicFixedButtonSideSpacing( - calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)), - var(--pi-spacing-x-large), - calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)), - calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) - ); - } -} +@mixin publicGhostButtonsColors( + $background-image: linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)), + $color: primary +) { + color: var(--pi-color-#{$color}); + background-image: $background-image; + &:hover { + &:enabled { + text-decoration: underline; + } + } +} + +@mixin publicButtonsBackgroundColors( + $color-disabled: var(--pi-color-primary-200), + $color-enabled: var(--pi-color-primary-900) +) { + background-size: 100%; + background-repeat: repeat; + color: var(--pi-color-white); + &:disabled { + background-color: $color-disabled; + } + &:hover { + &:enabled { + background-color: $color-enabled; + } + } +} + +@mixin publicFillButtonsGradients($color) { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) { + background-size: 100%; + background-repeat: repeat; + color: var(--pi-color-white); + // Light + &.pi-color__mode--light { + &:not(:disabled) { + background-image: var(--pi-gradient-#{$color}-light); + } + &:disabled { + color: var(--pi-color-grey-200); + background-image: var(--pi-gradient-light-disabled); + } + } + // Dark + &:not(.pi-color__mode--light) { + &:not(:disabled) { + background-image: var(--pi-gradient-#{$color}-dark); + } + &:disabled { + background-image: var(--pi-gradient-dark-disabled); + } + } + } + // Primary & White + &.pi-button__white { + color: var(--pi-color-#{$color}); + &:hover { + &:enabled { + background-color: var(--pi-color-#{$color}); + } + } + } +} + +// Sizes +@mixin publicButtonsSizes { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not( + .pi-button__toggle + ):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single):not( + .pi-button__type--menu-item + ) { + height: 2.875rem; + &.pi-button__icon--single { + width: var(--pi-spacing-xxxx-large); + } + } + + &:not(.pi-button__toggle):not(.pi-button__x-large):not(.pi-button__trimmed):not( + .pi-button__type--menu-item + ) { + height: 2.875rem; + &.pi-button__icon--single { + width: var(--pi-spacing-xxxx-large); + } + } + // Default + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ) { + // Sizes + // X small + &.pi-button { + &:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not( + .pi-button__large + ):not(.pi-button__trimed):not(.pi-button__xx-small):not(.pi-button__trimmed) { + min-height: 2.875rem; + } + &:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not( + .pi-button__large + ):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not( + .pi-button__trimmed + ) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); + } + } + } +} + +// Shine hover effect +@mixin publicButtonsShineHoverEffect { + // Hover shine effect + &:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(.pi-color__black) { + position: relative; + overflow: hidden; + &::after { + content: ''; + position: absolute; + top: -50%; + right: 0; + bottom: -50%; + left: -50%; + transform: rotateZ(75deg) translate(-5rem, 7.5rem); + &:hover { + cursor: pointer; + } + } + &:hover, + &:focus { + &::after { + animation: sheen 0.75s forwards; + } + } + + &:active { + transform: translate(0, -0.125rem); + } + + // Mode Light + &.pi-color__mode--light { + &::after { + background: linear-gradient( + to bottom, + rgba(229, 172, 142, 0), + rgba(255, 255, 255, 0.25) 50%, + rgba(229, 172, 142, 0) + ); + } + &:active { + box-shadow: 0px 0px 0px white; + -webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); + -moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); + box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); + } + } + // Mode Dark + &.pi-color__mode--dark { + &::after { + background: linear-gradient( + to bottom, + rgba(229, 172, 142, 0), + rgba(255, 255, 255, 0.125) 50%, + rgba(229, 172, 142, 0) + ); + } + &:active { + box-shadow: 0px 0px 0px white; + -webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125); + -moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125); + box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125); + } + } + &:focus { + outline: 0; + } + + @keyframes sheen { + 100% { + transform: rotateZ(30deg) translate(1rem, -9rem); + } + } + } +} + +// Colors +@mixin publicButtonsColors { + position: relative; + overflow: hidden; + + // Shine hover effect + &:not(:disabled) { + @include publicButtonsShineHoverEffect; + } + // Default + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ) { + font: { + weight: 600; + } + // Color + // White + // TODO: Add customized white 25 density color gradient for backgrounds + // TODO: Add text color gradients + &.pi-color__white { + background-image: var(--pi-gradient-white-rgba); + &:disabled { + background-color: rgba($color: white, $alpha: 0.6); + } + &:hover { + color: var(--pi-color-primary-900); + background-color: transparent; + border: 1px solid var(--pi-color-primary-100); + &:enabled { + background-color: transparent; + } + } + // White default + &.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__highlighted + ) { + &:not(:hover) { + color: var(--pi-color-primary); + } + } + } + // Primary + &.pi-color__primary { + @include publicFillButtonsGradients(primary); + } + // Accent + &.pi-color__accent { + @include publicFillButtonsGradients(accent); + } + // Highlighted + &.pi-color__highlighted { + @include publicFillButtonsGradients(highlighted); + } + + // Black + &.pi-color__black { + background-image: linear-gradient( + 300deg, + hsl(0deg 0% 62%) 0%, + hsl(344deg 0% 57%) 21%, + hsl(344deg 0% 53%) 30%, + hsl(344deg 0% 49%) 39%, + hsl(344deg 0% 44%) 46%, + hsl(344deg 0% 40%) 54%, + hsl(344deg 0% 36%) 61%, + hsl(344deg 0% 32%) 69%, + hsl(344deg 0% 28%) 79%, + hsl(0deg 0% 24%) 100% + ); + color: var(--pi-color-white); + &:disabled { + background-color: rgba($color: #3d3d3d, $alpha: 0.6); + } + &:hover { + &:enabled { + background-color: var(--pi-color-black); + } + } + // White default + &.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__highlighted + ) { + &:not(:hover) { + color: var(--pi-color-black); + } + } + } + + // Warn + &.pi-color__warn { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-color__white + ) { + @include publicButtonsBackgroundColors(var(--pi-color-warn-200), var(--pi-color-warn-900)); + } + // Mode + // Default + &:not(.pi-color__mode--light) { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-color__white + ) { + background-image: linear-gradient( + 300deg, + hsl(0deg 74% 71%) 0%, + hsl(0deg 71% 69%) 21%, + hsl(0deg 68% 66%) 30%, + hsl(1deg 65% 64%) 39%, + hsl(1deg 62% 61%) 46%, + hsl(1deg 60% 59%) 54%, + hsl(1deg 58% 56%) 61%, + hsl(1deg 56% 54%) 69%, + hsl(0deg 54% 51%) 79%, + hsl(0deg 56% 49%) 100% + ); + } + } + // Light + &.pi-color__mode--light { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-color__white + ) { + background-image: linear-gradient( + 300deg, + hsl(350deg 100% 93%) 0%, + hsl(351deg 95% 91%) 21%, + hsl(352deg 92% 89%) 30%, + hsl(353deg 89% 86%) 39%, + hsl(354deg 87% 84%) 46%, + hsl(356deg 84% 82%) 54%, + hsl(357deg 81% 79%) 61%, + hsl(358deg 79% 77%) 69%, + hsl(359deg 76% 74%) 79%, + hsl(0deg 74% 71%) 100% + ); + } + } + // Warn & White + &.pi-color__white { + &:not(:hover) { + color: var(--pi-color-warn); + } + } + } + + // Success + &.pi-color__success { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-color__white + ) { + @include publicButtonsBackgroundColors( + var(--pi-color-success-200), + var(--pi-color-success-900) + ); + } + // Mode + // Default + &:not(.pi-color__mode--light) { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-color__white + ) { + background-image: linear-gradient( + 300deg, + hsl(155deg 48% 79%) 0%, + hsl(154deg 45% 74%) 21%, + hsl(153deg 43% 69%) 30%, + hsl(152deg 42% 64%) 39%, + hsl(151deg 40% 60%) 46%, + hsl(151deg 39% 55%) 54%, + hsl(150deg 39% 50%) 61%, + hsl(150deg 48% 45%) 69%, + hsl(151deg 61% 39%) 79%, + hsl(155deg 100% 30%) 100% + ); + } + } + // Light + &.pi-color__mode--light { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-color__white + ) { + background-image: linear-gradient( + 300deg, + hsl(155deg 62% 91%) 0%, + hsl(155deg 60% 88%) 21%, + hsl(155deg 59% 84%) 30%, + hsl(155deg 58% 81%) 39%, + hsl(155deg 57% 78%) 46%, + hsl(155deg 57% 75%) 54%, + hsl(155deg 56% 72%) 61%, + hsl(155deg 56% 68%) 69%, + hsl(155deg 56% 65%) 79%, + hsl(155deg 56% 61%) 100% + ); + } + } + // Highlighted & White + &.pi-color__white { + &:not(:hover) { + color: var(--pi-color-success); + } + } + } + + // Ghost + &.pi-button__appearance--ghost { + background-color: transparent; + text-decoration: underline; + background-size: 100%; + background-repeat: repeat; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-background-clip: text; + -moz-text-fill-color: transparent; + + // Ghost & Primary + &.pi-color__primary, + &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__white + ):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey):not( + .pi-color__success + ) { + @include publicGhostButtonsColors; + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-primary-100), var(--pi-color-primary-200)), + primary-200 + ); + } + } + // Ghost & Accent + &.pi-color__accent { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)), + accent + ); + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-accent-100), var(--pi-color-accent-100)), + accent-200 + ); + } + } + // Ghost & Warn + &.pi-color__warn { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-warn), var(--pi-color-warn-900)), + warn + ); + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-warn-100), var(--pi-color-warn-200)), + warn-200 + ); + } + } + // Ghost & White + &.pi-color__white { + @include publicGhostButtonsColors; + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-white), rgba($color: white, $alpha: 0.6)), + white + ); + } + } + // Ghost & Black + &.pi-color__black { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-black), var(--pi-color-grey-900)), + grey + ); + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-black), rgba($color: #3d3d3d, $alpha: 0.6)), + grey-200 + ); + } + } + // Ghost & Highlighted + &.pi-color__highlighted { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)), + highlighted + ); + &:disabled { + @include publicGhostButtonsColors( + linear-gradient( + 30deg, + var(--pi-color-highlighted-100), + var(--pi-color-highlighted-200) + ), + highlighted-200 + ); + } + } + // Ghost & Grey + &.pi-color__grey { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-grey-100), var(--pi-color-grey-400)), + grey-400 + ); + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-grey-25), var(--pi-color-grey-75)), + grey-50 + ); + } + } + // Ghost & Success + &.pi-color__success { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-success), var(--pi-color-success-900)), + success + ); + &:disabled { + @include publicGhostButtonsColors( + linear-gradient(30deg, var(--pi-color-success-100), var(--pi-color-success-200)), + success-200 + ); + } + } + } + + // Outline + &.pi-button__appearance--outline { + background-color: transparent; + box-sizing: border-box; + transition: all 0.16s ease-in; + border: 1px solid; + + // Outline & Primary + &.pi-color__primary, + &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__white + ):not(.pi-color__highlighted) { + color: var(--pi-color-primary); + &:hover { + &:enabled { + color: var(--pi-color-white); + border-color: var(--pi-color-primary); + background-color: var(--pi-color-primary); + } + } + &:disabled { + color: var(--pi-color-primary-200); + } + // Is Active + &.is-active { + color: var(--pi-color-white); + border-color: var(--pi-color-primary); + background-color: var(--pi-color-primary); + } + } + // Outline & Accent + &.pi-color__accent { + color: var(--pi-color-accent); + &:hover { + &:enabled { + color: var(--pi-color-white); + border-color: var(--pi-color-accent); + background-color: var(--pi-color-accent); + } + } + &:disabled { + color: var(--pi-color-accent-200); + border-color: var(--pi-color-accent-200); + } + // Is Active + &.is-active { + color: var(--pi-color-white); + background-color: var(--pi-color-accent); + border-color: var(--pi-color-accent); + } + } + // Outline & Warn + &.pi-color__warn { + color: var(--pi-color-warn); + &:hover { + &:enabled { + color: var(--pi-color-white); + background-color: var(--pi-color-warn); + border-color: var(--pi-color-warn); + } + } + &:disabled { + color: var(--pi-color-warn-200); + } + // Is Active + &.is-active { + color: var(--pi-color-white); + background-color: var(--pi-color-warn); + border-color: var(--pi-color-warn); + } + } + + // Outline & Highlighted + &.pi-color__highlighted { + color: var(--pi-color-highlighted); + &:hover { + &:enabled { + color: var(--pi-color-white); + background-color: var(--pi-color-highlighted); + border-color: var(--pi-color-highlighted); + } + } + &:disabled { + color: var(--pi-color-highlighted-200); + } + // Is Active + &.is-active { + color: var(--pi-color-white); + background-color: var(--pi-color-highlighted); + border-color: var(--pi-color-highlighted); + } + } + + // Outline & White + &.pi-color__white { + color: var(--pi-color-white); + &:hover { + &:enabled { + color: var(--pi-color-primary); + background-color: var(--pi-color-white); + border-color: var(--pi-color-white); + } + } + &:disabled { + color: rgba($color: #ffffff, $alpha: 0.6); + } + // Is Active + &.is-active { + color: var(--pi-color-primary); + background-color: var(--pi-color-white); + border-color: var(--pi-color-white); + } + } + } + } +} + +@mixin publicFixedButtonSideSpacing( + $top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)), + $side-spacing: var(--pi-spacing-medium), + $bottom-left-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)), + $bottom-right-spacing: calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) +) { + .pi-shell { + &.pi-shell__deale-website, + &.is-public { + // Fixed + button, + .pi-icon-button, + .pi-action-button { + &.is-fixed { + position: fixed; + z-index: 999; + &.is-fixed--top-left, + &.is-fixed--top-right { + top: $top-spacing; + right: $side-spacing; + } + &.is-fixed--bottom-left { + bottom: $bottom-left-spacing; + left: $side-spacing; + } + &.is-fixed--bottom-right { + bottom: $bottom-right-spacing; + right: $side-spacing; + } + } + } + } + } +} + +.pi-shell { + &.pi-shell__deale-website, + .is-public { + button { + // Colors + @include publicButtonsColors; + // Sizes + @include publicButtonsSizes; + } + // Common + button { + &.pi-button { + // X Large + &.pi-button__x-large { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); + border-radius: 1.4rem; + // Mobile + @media screen and (max-width: 40rem) { + height: 3.125rem; + min-width: 10.6875rem; + font: { + size: var(--pi-font-size-small); + } + } + // Tablet & Desktop + @media screen and (min-width: 40rem) { + height: 3.75rem; + min-width: 11.25rem; + font: { + size: var(--pi-font-size-medium); + } + } + } + } + } + } +} +html, +.cdk-overlay-container { + // Mobile + &.is-mobile { + @include publicFixedButtonSideSpacing( + calc(var(--pi-spacing-medium) + env(safe-area-inset-top)), + var(--pi-spacing-medium), + calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)), + calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) + ); + } + &.is-tablet { + &.is-tablet__small { + @include publicFixedButtonSideSpacing( + calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)), + var(--pi-spacing-x-large), + calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)), + calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) + ); + } + &.is-tablet__large { + @include publicFixedButtonSideSpacing( + calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)), + var(--pi-spacing-x-large), + calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)), + calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) + ); + } + } + // Tablet & Desktop + &.is-desktop { + @include publicFixedButtonSideSpacing( + calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)), + var(--pi-spacing-x-large), + calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)), + calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)) + ); + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss index e3f8c46..561a902 100644 --- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss +++ b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss @@ -1,204 +1,204 @@ -@mixin defaultButtonsProperties { - line-height: 100%; - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - } - &:hover { - &:not(:disabled):not(.pi-button__toggle) { - cursor: pointer; - } - } - &.is-active { - cursor: default; - } - - // Default - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ) { - border: none; - - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not( - .pi-button__x-large - ):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not( - .pi-button__icon--single - ):not(.pi-button__x-small) { - padding-top: var(--pi-spacing-xx-small); - padding-bottom: var(--pi-spacing-xx-small); - } - &:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) { - &:not(.pi-button__x-small) { - border-radius: var(--pi-border-radius-medium); - -webkit-border-radius: var(--pi-border-radius-medium); - -moz-border-radius: var(--pi-border-radius-medium); - } - &.pi-button__x-small { - border-radius: 0.75rem; - -webkit-border-radius: 0.75rem; - -moz-border-radius: 0.75rem; - } - } - - &:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not( - .pi-button__toggle - ):not(.ch2-btn) { - &:not(.pi-button__x-small) { - min-width: 5.5rem; - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - } - &.pi-button__x-small { - min-width: 4.5rem; - padding-left: var(--pi-spacing-xx-small); - padding-right: var(--pi-spacing-xx-small); - } - } - - &:not(.pi-button__appearance--outline) { - transition: all 0.25s ease-in-out; - } - } -} - -@mixin buttonsSizes { - // Default - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ) { - &.pi-button__x-small { - font: { - size: 0.8125rem; - } - &:not(.pi-button__trimmed) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium); - } - } - &.pi-button__trimmed { - padding: 0; - } - &.pi-button__xx-small { - display: flex; - justify-content: center; - align-items: center; - gap: var(--pi-spacing-x-small); - height: 1.375rem; - line-height: 100%; - width: -moz-fit-content; - width: fit-content; - min-width: 4.5rem; - max-width: 12.5rem; - padding: 0 var(--pi-spacing-small); - -webkit-border-radius: var(--pi-border-radius-small); - -moz-border-radius: var(--pi-border-radius-small); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font: { - size: 0.75rem; - } - - font: { - size: 0.8125rem; - } - } - &.pi-button__trimed { - min-width: unset; - padding: var(--pi-spacing-xxxx-small) 0; - } - &:not(.pi-button__trimmed):not(.pi-button__icon--single) { - // Small - &.pi-button__small { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small); - } - // Medium - &.pi-button__medium { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); - } - // Large - &.pi-button__large { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - min-width: 10.6875rem; - } - // Tablet L & Desktop - @media screen and (min-width: 62rem) { - min-width: 11.25rem; - } - } - } - - // W 100 - &.pi-button__w100 { - width: 100%; - } - } -} -html, -.cdk-overlay-container { - button { - // Default properties - @include defaultButtonsProperties; - - // Sizes - @include buttonsSizes; - } -} - -.pi-filter-button, -.pi-expand-button { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - &.is-open { - .pi-big-icon, - figure { - transform: rotate(180deg); - } - } - } -} - -// Close button in modals -.pi-modal { - .pi-close-button { - &::after, - &::before { - width: var(--pi-spacing-x-large); - } - } -} - -.pi-layout { - &.pi-layout__05-splitted { - .pi-wrapper__action { - &.pi-wrapper__flex-direction--column { - .pi-button { - display: flex; - align-items: center; - justify-content: center; - margin: auto; - } - } - } - } -} -.cdk-overlay-container, -html { - &.is-mobile { - .pi-icon-button { - &.is-responsive { - & > button { - // Text - &.has-text { - padding: unset; - min-width: unset; - width: var(--pi-spacing-xxx-large); - & > span { - display: none; - } - } - } - } - } - } -} +@mixin defaultButtonsProperties { + line-height: 100%; + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + } + &:hover { + &:not(:disabled):not(.pi-button__toggle) { + cursor: pointer; + } + } + &.is-active { + cursor: default; + } + + // Default + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ) { + border: none; + + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not( + .pi-button__x-large + ):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not( + .pi-button__icon--single + ):not(.pi-button__x-small) { + padding-top: var(--pi-spacing-xx-small); + padding-bottom: var(--pi-spacing-xx-small); + } + &:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) { + &:not(.pi-button__x-small) { + border-radius: var(--pi-border-radius-medium); + -webkit-border-radius: var(--pi-border-radius-medium); + -moz-border-radius: var(--pi-border-radius-medium); + } + &.pi-button__x-small { + border-radius: 0.75rem; + -webkit-border-radius: 0.75rem; + -moz-border-radius: 0.75rem; + } + } + + &:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not( + .pi-button__toggle + ):not(.ch2-btn) { + &:not(.pi-button__x-small) { + min-width: 5.5rem; + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + } + &.pi-button__x-small { + min-width: 4.5rem; + padding-left: var(--pi-spacing-xx-small); + padding-right: var(--pi-spacing-xx-small); + } + } + + &:not(.pi-button__appearance--outline) { + transition: all 0.25s ease-in-out; + } + } +} + +@mixin buttonsSizes { + // Default + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ) { + &.pi-button__x-small { + font: { + size: 0.8125rem; + } + &:not(.pi-button__trimmed) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium); + } + } + &.pi-button__trimmed { + padding: 0; + } + &.pi-button__xx-small { + display: flex; + justify-content: center; + align-items: center; + gap: var(--pi-spacing-x-small); + height: 1.375rem; + line-height: 100%; + width: -moz-fit-content; + width: fit-content; + min-width: 4.5rem; + max-width: 12.5rem; + padding: 0 var(--pi-spacing-small); + -webkit-border-radius: var(--pi-border-radius-small); + -moz-border-radius: var(--pi-border-radius-small); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font: { + size: 0.75rem; + } + + font: { + size: 0.8125rem; + } + } + &.pi-button__trimed { + min-width: unset; + padding: var(--pi-spacing-xxxx-small) 0; + } + &:not(.pi-button__trimmed):not(.pi-button__icon--single) { + // Small + &.pi-button__small { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small); + } + // Medium + &.pi-button__medium { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); + } + // Large + &.pi-button__large { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large); + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + min-width: 10.6875rem; + } + // Tablet L & Desktop + @media screen and (min-width: 62rem) { + min-width: 11.25rem; + } + } + } + + // W 100 + &.pi-button__w100 { + width: 100%; + } + } +} +html, +.cdk-overlay-container { + button { + // Default properties + @include defaultButtonsProperties; + + // Sizes + @include buttonsSizes; + } +} + +.pi-filter-button, +.pi-expand-button { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + &.is-open { + .pi-big-icon, + figure { + transform: rotate(180deg); + } + } + } +} + +// Close button in modals +.pi-modal { + .pi-close-button { + &::after, + &::before { + width: var(--pi-spacing-x-large); + } + } +} + +.pi-layout { + &.pi-layout__05-splitted { + .pi-wrapper__action { + &.pi-wrapper__flex-direction--column { + .pi-button { + display: flex; + align-items: center; + justify-content: center; + margin: auto; + } + } + } + } +} +.cdk-overlay-container, +html { + &.is-mobile { + .pi-icon-button { + &.is-responsive { + & > button { + // Text + &.has-text { + padding: unset; + min-width: unset; + width: var(--pi-spacing-xxx-large); + & > span { + display: none; + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-button/index.scss b/libs/ui/src/lib/styles/common/components/pi-button/index.scss index cb9779c..72cd489 100644 --- a/libs/ui/src/lib/styles/common/components/pi-button/index.scss +++ b/libs/ui/src/lib/styles/common/components/pi-button/index.scss @@ -1,3 +1,3 @@ -@forward 'pi-button-private'; -@forward 'pi-button-public'; -@forward 'pi-button'; +@forward 'pi-button-private'; +@forward 'pi-button-public'; +@forward 'pi-button'; diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_appearance.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_appearance.scss index 10e7b5c..f3aa0f4 100644 --- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_appearance.scss +++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_appearance.scss @@ -1,75 +1,75 @@ -/** -* APPEARANCE: -* -* 1. Fill: -* -* Similar look and feel to the Form Fields Fill Appearance. -* Data Grid with inner stroke between each grid item. -* -**/ -@mixin dataGridAppearanceFill() { -} - -/** -* -* 2. Outline: -* -* A Data Grid with outer border and a inner stroke between each grid item appart from the last one. -* -**/ - -@mixin dataGridAppearanceOutline() { - background-color: var(--pi-color-white); - - &.pi-data-grid__appearance--outline { - // Inner Stroke between grid items - // Data Direction: - // Row - &.pi-data-grid__data-direction--row { - .pi-grid-item { - &:not(:last-of-type) { - border-bottom: 1px solid; - border-color: var(--pi-color-grey-50); - } - } - } - - // Column - &.pi-data-grid__data-direction--column { - .pi-grid-item { - .pi-cell { - &:not(.pi-cell__type--sum) { - border-bottom: 1px solid; - border-color: var(--pi-color-grey-50); - } - } - } - } - - // Outline Appearance in mode === Grid - // Card Type: List - &.pi-data-grid__card-type--list { - .pi-cell { - &:not(.pi-cell__type--sum) { - border-bottom: 1px solid; - border-color: var(--pi-color-grey-50); - } - } - } - } -} - -/** -* -* 3. Ghost: -* -* A Data Grid without outer and inner strokes between the grid items. -* -**/ -@mixin dataGridAppearanceGhost() { -} - -// Data grid -.pi-data-grid { - @include dataGridAppearanceOutline; -} +/** +* APPEARANCE: +* +* 1. Fill: +* +* Similar look and feel to the Form Fields Fill Appearance. +* Data Grid with inner stroke between each grid item. +* +**/ +@mixin dataGridAppearanceFill() { +} + +/** +* +* 2. Outline: +* +* A Data Grid with outer border and a inner stroke between each grid item appart from the last one. +* +**/ + +@mixin dataGridAppearanceOutline() { + background-color: var(--pi-color-white); + + &.pi-data-grid__appearance--outline { + // Inner Stroke between grid items + // Data Direction: + // Row + &.pi-data-grid__data-direction--row { + .pi-grid-item { + &:not(:last-of-type) { + border-bottom: 1px solid; + border-color: var(--pi-color-grey-50); + } + } + } + + // Column + &.pi-data-grid__data-direction--column { + .pi-grid-item { + .pi-cell { + &:not(.pi-cell__type--sum) { + border-bottom: 1px solid; + border-color: var(--pi-color-grey-50); + } + } + } + } + + // Outline Appearance in mode === Grid + // Card Type: List + &.pi-data-grid__card-type--list { + .pi-cell { + &:not(.pi-cell__type--sum) { + border-bottom: 1px solid; + border-color: var(--pi-color-grey-50); + } + } + } + } +} + +/** +* +* 3. Ghost: +* +* A Data Grid without outer and inner strokes between the grid items. +* +**/ +@mixin dataGridAppearanceGhost() { +} + +// Data grid +.pi-data-grid { + @include dataGridAppearanceOutline; +} diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss index ea21762..935875a 100644 --- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss +++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss @@ -1,261 +1,261 @@ -@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) { - .pi-cell { - display: flex; - // Cell type default - &:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not( - .pi-cell__type--date - ):not(.pi-cell__type--description) { - width: $default-width; - flex-grow: 1; - } - &.pi-cell__type--action, - &.pi-cell__type--date { - width: $action-width; - } - &.pi-cell__type--checkbox, - &.pi-cell__type--icon { - width: $icon-width; - } - &.pi-cell__type--description { - width: $description-width; - } - } -} - -@mixin dataGridHasBoxShadow() { - // MODE List (Table) - .is-mode-list { - // Data grid - .pi-data-grid { - &.has-box-shadow { - box-shadow: var(--pi-box-shadow-panel); - } - } - } -} - -// MODE List (Table) -.is-mode-list { - // Data grid - .pi-data-grid { - background-color: var(--pi-color-white); - - // Grid item (*Row with data direction === column | *Column with data direction === row) - .pi-grid-item { - display: flex; - - & > .pi-grid-item__content { - display: flex; - align-items: center; - gap: var(--pi-spacing-x-small); - min-height: 3.25rem; - width: 100%; - } - & > aside { - min-height: 3.25rem; - } - } - - // Data direction column (1 grid item = 1 column) - &.pi-data-grid__data-direction--row { - display: flex; - flex-direction: column; - - .pi-grid-item { - align-items: center; - gap: var(--pi-spacing-medium); - min-height: var(--pi-spacing-xxxx-large); - width: 100%; - } - // Appearacne Outline - - &:not(.pi-data-grid__appearance--ghost) { - .pi-grid-item { - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - } - } - - // Cell - .pi-cell { - align-items: center; - gap: var(--pi-spacing-xx-small); - - &.pi-cell__type--action, - &.pi-cell__type--icon { - justify-content: flex-end; - .pi-text-viewer { - article { - display: none; - } - } - } - } - // 3 Columns - &.pi-data-grid__columns--3 { - @include cellWidth(35%, 30%, 25%, 45%); - } - - // 4 Columns - &.pi-data-grid__columns--4 { - @include cellWidth(40%, 35%, 30%, 50%); - } - // 5 Columns - &.pi-data-grid__columns--5 { - @include cellWidth(20%, 15%, 10%, 30%); - } - // 6 Columns - &.pi-data-grid__columns--6 { - @include cellWidth(18.66%, 13%, 10%, 28%); - } - // 7 Columns - &.pi-data-grid__columns--7 { - @include cellWidth(20.28%, 6.5%, 10%, 33%); - } - // 8 Columns - &.pi-data-grid__columns--8 { - @include cellWidth(12.5%, 12.5%, 10%, 22%); - } - // 9 Columns - &.pi-data-grid__columns--9 { - @include cellWidth(11.11%, 11.11%, 10%, 18%); - } - // 10 Columns - &.pi-data-grid__columns--10 { - @include cellWidth(10%, 10%, 10%, 15%); - } - // 11 Columns - &.pi-data-grid__columns--11 { - @include cellWidth(9%, 9%, 9%, 12%); - } - // 12 Columns - &.pi-data-grid__columns--12 { - @include cellWidth(8.33%, 8.33%, 8.33%, 11%); - } - } - } -} - -// MODE Grid (Card) (*infinite scroll) -.is-mode-grid { - .pi-data-grid { - display: grid; - gap: var(--pi-spacing-medium); - } -} - -html { - // Mobile - &.is-mobile { - .is-mode-grid { - .pi-data-grid { - &.pi-data-grid__data-direction--column { - .pi-grid-item { - flex-direction: column; - .pi-cell { - &.pi-text-viewer, - & > .pi-text-viewer { - &.pi-text-viewer__font-size--s { - label { - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small Device - @media screen and (max-width: 62rem) { - // MODE List (Table) - - .is-mode-list { - // Data grid - .pi-data-grid { - // Data direction column (1 grid item = 1 column) - - &.pi-data-grid__data-direction--column { - .pi-grid-item { - &.pi-grid-item__context--keys { - .pi-cell { - min-width: 20rem; - &.pi-text-viewer { - &.pi-text-viewer__align--center { - article { - margin-top: var(--pi-spacing-medium); - } - } - } - } - } - &:not(.is-active) { - display: none; - } - } - .pi-cell { - &.is-active { - display: flex; - } - &:not(.is-active) { - display: none; - } - } - } - } - } - .is-mode-grid { - .pi-data-grid { - &.pi-data-grid__data-direction--column { - .pi-grid-item { - &:not(.is-active) { - display: none; - } - } - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large Device - @media screen and (min-width: 62rem) { - // MODE List (Table) - .is-mode-list { - // Data grid - .pi-data-grid { - // Data direction column (1 grid item = 1 column) - &.pi-data-grid__data-direction--column { - .pi-grid-item { - .pi-cell { - .pi-text-viewer { - &.pi-text-viewer__justify--flex-end { - height: 100%; - } - } - &:not(.pi-cell__type--sum) + .pi-cell__type--sum { - &:not(:last-of-type) { - margin-bottom: var(--pi-spacing-medium); - } - } - } - } - // 4 rows - &.pi-data-grid__rows--4 { - .pi-grid-item { - width: 25%; - } - } - } - } - } - } - } -} +@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) { + .pi-cell { + display: flex; + // Cell type default + &:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not( + .pi-cell__type--date + ):not(.pi-cell__type--description) { + width: $default-width; + flex-grow: 1; + } + &.pi-cell__type--action, + &.pi-cell__type--date { + width: $action-width; + } + &.pi-cell__type--checkbox, + &.pi-cell__type--icon { + width: $icon-width; + } + &.pi-cell__type--description { + width: $description-width; + } + } +} + +@mixin dataGridHasBoxShadow() { + // MODE List (Table) + .is-mode-list { + // Data grid + .pi-data-grid { + &.has-box-shadow { + box-shadow: var(--pi-box-shadow-panel); + } + } + } +} + +// MODE List (Table) +.is-mode-list { + // Data grid + .pi-data-grid { + background-color: var(--pi-color-white); + + // Grid item (*Row with data direction === column | *Column with data direction === row) + .pi-grid-item { + display: flex; + + & > .pi-grid-item__content { + display: flex; + align-items: center; + gap: var(--pi-spacing-x-small); + min-height: 3.25rem; + width: 100%; + } + & > aside { + min-height: 3.25rem; + } + } + + // Data direction column (1 grid item = 1 column) + &.pi-data-grid__data-direction--row { + display: flex; + flex-direction: column; + + .pi-grid-item { + align-items: center; + gap: var(--pi-spacing-medium); + min-height: var(--pi-spacing-xxxx-large); + width: 100%; + } + // Appearacne Outline + + &:not(.pi-data-grid__appearance--ghost) { + .pi-grid-item { + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + } + } + + // Cell + .pi-cell { + align-items: center; + gap: var(--pi-spacing-xx-small); + + &.pi-cell__type--action, + &.pi-cell__type--icon { + justify-content: flex-end; + .pi-text-viewer { + article { + display: none; + } + } + } + } + // 3 Columns + &.pi-data-grid__columns--3 { + @include cellWidth(35%, 30%, 25%, 45%); + } + + // 4 Columns + &.pi-data-grid__columns--4 { + @include cellWidth(40%, 35%, 30%, 50%); + } + // 5 Columns + &.pi-data-grid__columns--5 { + @include cellWidth(20%, 15%, 10%, 30%); + } + // 6 Columns + &.pi-data-grid__columns--6 { + @include cellWidth(18.66%, 13%, 10%, 28%); + } + // 7 Columns + &.pi-data-grid__columns--7 { + @include cellWidth(20.28%, 6.5%, 10%, 33%); + } + // 8 Columns + &.pi-data-grid__columns--8 { + @include cellWidth(12.5%, 12.5%, 10%, 22%); + } + // 9 Columns + &.pi-data-grid__columns--9 { + @include cellWidth(11.11%, 11.11%, 10%, 18%); + } + // 10 Columns + &.pi-data-grid__columns--10 { + @include cellWidth(10%, 10%, 10%, 15%); + } + // 11 Columns + &.pi-data-grid__columns--11 { + @include cellWidth(9%, 9%, 9%, 12%); + } + // 12 Columns + &.pi-data-grid__columns--12 { + @include cellWidth(8.33%, 8.33%, 8.33%, 11%); + } + } + } +} + +// MODE Grid (Card) (*infinite scroll) +.is-mode-grid { + .pi-data-grid { + display: grid; + gap: var(--pi-spacing-medium); + } +} + +html { + // Mobile + &.is-mobile { + .is-mode-grid { + .pi-data-grid { + &.pi-data-grid__data-direction--column { + .pi-grid-item { + flex-direction: column; + .pi-cell { + &.pi-text-viewer, + & > .pi-text-viewer { + &.pi-text-viewer__font-size--s { + label { + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small Device + @media screen and (max-width: 62rem) { + // MODE List (Table) + + .is-mode-list { + // Data grid + .pi-data-grid { + // Data direction column (1 grid item = 1 column) + + &.pi-data-grid__data-direction--column { + .pi-grid-item { + &.pi-grid-item__context--keys { + .pi-cell { + min-width: 20rem; + &.pi-text-viewer { + &.pi-text-viewer__align--center { + article { + margin-top: var(--pi-spacing-medium); + } + } + } + } + } + &:not(.is-active) { + display: none; + } + } + .pi-cell { + &.is-active { + display: flex; + } + &:not(.is-active) { + display: none; + } + } + } + } + } + .is-mode-grid { + .pi-data-grid { + &.pi-data-grid__data-direction--column { + .pi-grid-item { + &:not(.is-active) { + display: none; + } + } + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large Device + @media screen and (min-width: 62rem) { + // MODE List (Table) + .is-mode-list { + // Data grid + .pi-data-grid { + // Data direction column (1 grid item = 1 column) + &.pi-data-grid__data-direction--column { + .pi-grid-item { + .pi-cell { + .pi-text-viewer { + &.pi-text-viewer__justify--flex-end { + height: 100%; + } + } + &:not(.pi-cell__type--sum) + .pi-cell__type--sum { + &:not(:last-of-type) { + margin-bottom: var(--pi-spacing-medium); + } + } + } + } + // 4 rows + &.pi-data-grid__rows--4 { + .pi-grid-item { + width: 25%; + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss index dd8aa4a..73fe2ff 100644 --- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss +++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss @@ -1,154 +1,154 @@ -/** -* -* Card Type -* -**/ - -/** -* -* Card Type: LIST -* -**/ -@mixin dataGridCardTypeList { - &.pi-data-grid__card-type--list { - // Data Grid Columns: - // 7 - @include dataGridCardTypeList7; - // 11 - @include dataGridCardTypeList11; - - .pi-grid-item { - &.pi-card { - display: grid; - .pi-cell { - min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem); - margin-top: var(--pi-spacing-xx-small); - - & > .pi-text-viewer, - &.pi-text-viewer { - article { - transform: translateY(var(--pi-spacing-xx-small)); - } - label { - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } - } -} - -/** -* -* Card Type: LIST -* -* Columns: 7 -* -**/ -@mixin dataGridCardTypeList7() { - &.pi-data-grid__columns--7 { - .pi-grid-item { - &.pi-card { - @for $i from 1 through 14 { - & > *:nth-child(#{$i}) { - grid-area: item#{$i}; - align-self: center; - } - } - - .pi-cell { - width: -webkit-fill-available; - } - - @for $i from 8 through 14 { - & > *:nth-child(#{$i}) { - justify-content: flex-end; - } - } - - grid-template-rows: repeat(7, 1fr); - grid-template-areas: - 'item1 item8' - 'item2 item9' - 'item3 item10' - 'item4 item11' - 'item5 item12' - 'item6 item13' - 'item7 item14'; - } - } - } -} - -/** -* -* Card Type: LIST -* -* Columns: 11 -* -**/ -@mixin dataGridCardTypeList11() { - &.pi-data-grid__columns--11 { - .pi-grid-item { - &.pi-card { - @for $i from 1 through 22 { - & > *:nth-child(#{$i}) { - grid-area: item#{$i}; - align-self: center; - } - } - - @for $i from 12 through 22 { - & > *:nth-child(#{$i}) { - justify-content: flex-end; - } - } - - grid-template-rows: repeat(11, 1fr); - grid-template-areas: - 'item1 item12' - 'item2 item13' - 'item3 item14' - 'item4 item15' - 'item5 item16' - 'item6 item17' - 'item7 item18' - 'item8 item19' - 'item9 item20' - 'item10 item21' - 'item11 item22'; - } - } - } -} - -/** -* -* Card Type: HORIZONTAL -* -**/ -@mixin dataGridCardTypeHorizontal() { -} - -/** -* -* Card Type: SQUARED -* -**/ -@mixin dataGridCardTypeSquared() { -} - -/** -* -* Card Type: VERTICAL -* -**/ -@mixin dataGridCardTypeVertical() { -} - -.pi-data-grid { - @include dataGridCardTypeList; -} +/** +* +* Card Type +* +**/ + +/** +* +* Card Type: LIST +* +**/ +@mixin dataGridCardTypeList { + &.pi-data-grid__card-type--list { + // Data Grid Columns: + // 7 + @include dataGridCardTypeList7; + // 11 + @include dataGridCardTypeList11; + + .pi-grid-item { + &.pi-card { + display: grid; + .pi-cell { + min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem); + margin-top: var(--pi-spacing-xx-small); + + & > .pi-text-viewer, + &.pi-text-viewer { + article { + transform: translateY(var(--pi-spacing-xx-small)); + } + label { + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } + } +} + +/** +* +* Card Type: LIST +* +* Columns: 7 +* +**/ +@mixin dataGridCardTypeList7() { + &.pi-data-grid__columns--7 { + .pi-grid-item { + &.pi-card { + @for $i from 1 through 14 { + & > *:nth-child(#{$i}) { + grid-area: item#{$i}; + align-self: center; + } + } + + .pi-cell { + width: -webkit-fill-available; + } + + @for $i from 8 through 14 { + & > *:nth-child(#{$i}) { + justify-content: flex-end; + } + } + + grid-template-rows: repeat(7, 1fr); + grid-template-areas: + 'item1 item8' + 'item2 item9' + 'item3 item10' + 'item4 item11' + 'item5 item12' + 'item6 item13' + 'item7 item14'; + } + } + } +} + +/** +* +* Card Type: LIST +* +* Columns: 11 +* +**/ +@mixin dataGridCardTypeList11() { + &.pi-data-grid__columns--11 { + .pi-grid-item { + &.pi-card { + @for $i from 1 through 22 { + & > *:nth-child(#{$i}) { + grid-area: item#{$i}; + align-self: center; + } + } + + @for $i from 12 through 22 { + & > *:nth-child(#{$i}) { + justify-content: flex-end; + } + } + + grid-template-rows: repeat(11, 1fr); + grid-template-areas: + 'item1 item12' + 'item2 item13' + 'item3 item14' + 'item4 item15' + 'item5 item16' + 'item6 item17' + 'item7 item18' + 'item8 item19' + 'item9 item20' + 'item10 item21' + 'item11 item22'; + } + } + } +} + +/** +* +* Card Type: HORIZONTAL +* +**/ +@mixin dataGridCardTypeHorizontal() { +} + +/** +* +* Card Type: SQUARED +* +**/ +@mixin dataGridCardTypeSquared() { +} + +/** +* +* Card Type: VERTICAL +* +**/ +@mixin dataGridCardTypeVertical() { +} + +.pi-data-grid { + @include dataGridCardTypeList; +} diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss index 2f2c1b0..d78cb28 100644 --- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss +++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss @@ -1,152 +1,152 @@ -/** -* DATA DIRECTION: -* -* Data Grid Mode: LIST. -* This will be the case when the data grid's mode is set to List which means that the data Grid emulates a Data Table. -* -* 1. Column: -* -* Any grid item is a column. The data projection will be horizontal. -* -**/ - -@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) { - // MODE List (Table) - - .pi-data-grid { - // Data direction: - // Column (1 grid item = 1 column) - &.pi-data-grid__data-direction--column { - display: flex; - - .pi-grid-item { - flex-direction: column; - - // Cell - .pi-cell { - min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem); - margin-top: var(--pi-spacing-xx-small); - // Vertival align - &.pi-cell__vertical-align--center { - display: flex; - align-items: center; - } - // Override the Vertical Align Center visualize cells (text viewers) - // with the editable ones (text fields) in form data grids - &.pi-text-viewer, - & > .pi-text-viewer { - & > * { - transform: translateY(var(--pi-spacing-x-small)); - } - } - } - // Content Type: - // Keys (HEADINGS) - &.pi-grid-item__context--keys { - min-width: $key-cell-width; - - // Cell in Keys context - .pi-cell { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - - & > *:nth-child(1) { - margin-left: var(--pi-spacing-medium); - } - - & > *:nth-child(n + 2) { - justify-content: center; - } - } - } - // Values - &:not(.pi-grid-item__context--keys) { - min-width: $value-cell-width; - width: -webkit-fill-available; - } - } - - // Justify Content: - // Space Between - &.pi-data-grid__justify-content--space-between { - justify-content: space-between; - } - // Flex Start - &.pi-data-grid__justify-content--flex-start { - justify-content: flex-start; - } - } - } -} - -/** -* -* 2. Row: -* -* Any grid item is a row. The data projection will be vertical. -* -**/ -@mixin dataGridDataDirectionRow() { - // MODE List (Table) - .is-mode-list { - .pi-data-grid { - // Data direction row (1 grid item = 1 row) - &.pi-data-grid__data-direction--column { - // Scrollable area - .pi-data-grid__content { - margin: 0 auto; - width: -webkit-fill-available; - overflow-y: auto; - overflow-x: hidden; - - // Generic Scroll - &::-webkit-scrollbar { - width: 0.1875rem; - } - - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-grey-25); - border-radius: var(--pi-border-radius-x-small); - - &:hover { - transition: var(--pi-animation); - background-color: var(--pi-color-grey-50); - } - } - } - } - } - } -} - -html { - // Tablet - &.is-tablet { - // Tablet L - &.is-tablet__large { - @include dataGridDataDirectionColumn; - } - } - - // Desktop - &.is-desktop { - // Desktop S - &.is-desktop__small { - @include dataGridDataDirectionColumn(13.5rem, 8rem); - } - // Desktop M - &.is-desktop__medium { - @include dataGridDataDirectionColumn(15rem, 9.125rem); - } - // Desktop L - &.is-desktop__large { - @include dataGridDataDirectionColumn(18rem, 8.5rem); - } - } -} +/** +* DATA DIRECTION: +* +* Data Grid Mode: LIST. +* This will be the case when the data grid's mode is set to List which means that the data Grid emulates a Data Table. +* +* 1. Column: +* +* Any grid item is a column. The data projection will be horizontal. +* +**/ + +@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) { + // MODE List (Table) + + .pi-data-grid { + // Data direction: + // Column (1 grid item = 1 column) + &.pi-data-grid__data-direction--column { + display: flex; + + .pi-grid-item { + flex-direction: column; + + // Cell + .pi-cell { + min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem); + margin-top: var(--pi-spacing-xx-small); + // Vertival align + &.pi-cell__vertical-align--center { + display: flex; + align-items: center; + } + // Override the Vertical Align Center visualize cells (text viewers) + // with the editable ones (text fields) in form data grids + &.pi-text-viewer, + & > .pi-text-viewer { + & > * { + transform: translateY(var(--pi-spacing-x-small)); + } + } + } + // Content Type: + // Keys (HEADINGS) + &.pi-grid-item__context--keys { + min-width: $key-cell-width; + + // Cell in Keys context + .pi-cell { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + & > *:nth-child(1) { + margin-left: var(--pi-spacing-medium); + } + + & > *:nth-child(n + 2) { + justify-content: center; + } + } + } + // Values + &:not(.pi-grid-item__context--keys) { + min-width: $value-cell-width; + width: -webkit-fill-available; + } + } + + // Justify Content: + // Space Between + &.pi-data-grid__justify-content--space-between { + justify-content: space-between; + } + // Flex Start + &.pi-data-grid__justify-content--flex-start { + justify-content: flex-start; + } + } + } +} + +/** +* +* 2. Row: +* +* Any grid item is a row. The data projection will be vertical. +* +**/ +@mixin dataGridDataDirectionRow() { + // MODE List (Table) + .is-mode-list { + .pi-data-grid { + // Data direction row (1 grid item = 1 row) + &.pi-data-grid__data-direction--column { + // Scrollable area + .pi-data-grid__content { + margin: 0 auto; + width: -webkit-fill-available; + overflow-y: auto; + overflow-x: hidden; + + // Generic Scroll + &::-webkit-scrollbar { + width: 0.1875rem; + } + + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-grey-25); + border-radius: var(--pi-border-radius-x-small); + + &:hover { + transition: var(--pi-animation); + background-color: var(--pi-color-grey-50); + } + } + } + } + } + } +} + +html { + // Tablet + &.is-tablet { + // Tablet L + &.is-tablet__large { + @include dataGridDataDirectionColumn; + } + } + + // Desktop + &.is-desktop { + // Desktop S + &.is-desktop__small { + @include dataGridDataDirectionColumn(13.5rem, 8rem); + } + // Desktop M + &.is-desktop__medium { + @include dataGridDataDirectionColumn(15rem, 9.125rem); + } + // Desktop L + &.is-desktop__large { + @include dataGridDataDirectionColumn(18rem, 8.5rem); + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_mode.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_mode.scss index d9b8cfb..b40f9c2 100644 --- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_mode.scss +++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_mode.scss @@ -1,23 +1,23 @@ -/** -* MODE: -* The following properties defines when the Data Grid Component emulates a Data Table or a Cards Lidst, -* depending on Mode binded by the List Configs. -* Note that in small devices, the Mode will be always set as Grid. -* -* 1. Grid: -* -* A cards list in a grid. -* -**/ -@mixin dataGridModeGrid() { -} - -/** -* -* 2. List: -* -* A cards list in a grid. -* -**/ -@mixin dataGridModeList() { -} +/** +* MODE: +* The following properties defines when the Data Grid Component emulates a Data Table or a Cards Lidst, +* depending on Mode binded by the List Configs. +* Note that in small devices, the Mode will be always set as Grid. +* +* 1. Grid: +* +* A cards list in a grid. +* +**/ +@mixin dataGridModeGrid() { +} + +/** +* +* 2. List: +* +* A cards list in a grid. +* +**/ +@mixin dataGridModeList() { +} diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/index.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/index.scss index b937db0..945536c 100644 --- a/libs/ui/src/lib/styles/common/components/pi-data-grid/index.scss +++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/index.scss @@ -1,5 +1,5 @@ -@forward 'appearance'; -@forward 'card-type'; -@forward 'base-data-grid'; -@forward 'data-direction'; -@forward 'mode'; +@forward 'appearance'; +@forward 'card-type'; +@forward 'base-data-grid'; +@forward 'data-direction'; +@forward 'mode'; diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss index 049152d..a083723 100644 --- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss +++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss @@ -1,285 +1,285 @@ -@mixin incrementalCellField( - $max-width: calc(100% - var(--pi-spacing-x-large)), - $margin-left: var(--pi-spacing-x-large) -) { - .pi-shell, - .cdk-overlay-container { - .pi-cell { - .pi-field { - // Incremental field - &.pi-form-field__incremental { - &:not(.pi-form-field__incremental--range) { - .mat-mdc-form-field { - // Fill - &.mat-form-field-appearance-fill { - .mat-mdc-text-field-wrapper { - max-width: $max-width; - margin-left: $margin-left; - } - } - } - } - } - } - } - } -} - -.pi-shell, -.cdk-overlay-container { - .pi-field { - // Incremental field - &.pi-form-field__incremental { - .mat-mdc-form-field { - width: -webkit-fill-available; - &.mat-focused { - .mat-mdc-form-field-placeholder { - color: var(--pi-color-primary); - } - } - - .mat-mdc-text-field-wrapper { - .mat-mdc-form-field-underline { - display: none; - } - } - .mat-mdc-form-field-flex { - justify-content: space-between; - align-items: center; - height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small)); - .mat-mdc-form-field-infix { - text-align: center; - } - .mat-mdc-form-field-suffix { - padding-right: var(--pi-spacing-medium); - } - .pi-affix { - display: flex; - align-items: center; - gap: var(--pi-spacing-xx-small); - - &.pi-affix__suffix { - flex-direction: row-reverse; - } - } - } - input { - &.mat-mdc-input-element { - text-align: right !important; - } - } - // Add & Substract icons - .pi-icon { - &:not(.pi-icon__appearance--fill), - &.pi-icon__small { - border: 1px solid var(--pi-color-primary); - border-radius: var(--pi-border-radius-x-small); - } - } - } - - // NOT Has error - &:not(.has-error) { - &:not(.mat-focused) { - .mdc-text-field { - .mdc-text-field__input { - color: var(--pi-color-black); - } - &:not(.mdc-text-field--disabled) { - .mdc-text-field__input { - color: var(--pi-color-black); - } - } - } - } - - &.mat-focused { - .mdc-text-field { - .mdc-text-field__input { - color: var(--pi-color-primary); - } - &:not(.mdc-text-field--disabled) { - .mdc-text-field__input { - color: var(--pi-color-primary); - } - } - } - } - } - - // has error - &.has-error { - .mdc-text-field { - .mdc-text-field__input { - color: var(--pi-color-warn); - } - &:not(.mdc-text-field--disabled) { - .mdc-text-field__input { - color: var(--pi-color-warn); - } - } - } - } - - // Disabled - &.is-disabled { - color: var(--pi-color-grey-200); - } - - // Incremental range - &.pi-form-field__incremental--range { - & > form { - display: flex; - gap: var(--pi-spacing-medium); - - & > div { - width: -webkit-fill-available; - } - - .pi-label { - span { - color: var(--pi-color-primary); - font: { - size: var(--pi-font-size-x-small); - } - } - } - - .pi-form-field__incremental { - width: 50%; - } - } - .mat-mdc-form-field-flex { - width: 99%; - } - } - } - } - - .pi-dynamic-menu, - .pi-card { - .mat-mdc-text-field-wrapper { - .mat-mdc-form-field-input-control { - height: 3.45rem; - } - } - } - - // Cells with incrementals inputs: suffix light weight - .pi-cell { - .mat-mdc-text-field-wrapper { - .mat-mdc-form-field-icon-suffix { - .pi-affix__suffix { - & > span { - font-weight: 300; - } - } - } - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-shell, - .cdk-overlay-container { - .pi-field { - // Incremental field - &.pi-form-field__incremental { - // Add & Substract icons - .pi-icon { - &:not(.pi-icon__appearance--fill), - &.pi-icon__small { - height: var(--pi-spacing-large); - width: var(--pi-spacing-large); - border-radius: 42%; - .mat-icon { - height: var(--pi-spacing-medium); - width: var(--pi-spacing-medium); - } - } - } - // Incremental range - &.pi-form-field__incremental--range { - .mat-mdc-text-field-wrapper { - .mat-mdc-form-field-input-control { - width: calc(50vw - 9rem); - } - } - } - } - } - } - @include incrementalCellField; - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .pi-shell, - .cdk-overlay-container { - .pi-field { - // Incremental field - &.pi-form-field__incremental { - // Add & Substract icons - .pi-icon { - &:not(.pi-icon__appearance--fill), - &.pi-icon__small { - height: var(--pi-spacing-medium); - width: var(--pi-spacing-medium); - border-radius: 42%; - .mat-icon { - height: var(--pi-spacing-small); - width: var(--pi-spacing-small); - } - } - } - } - } - } - } - } - - &.is-tablet { - &.is-tablet__small { - @include incrementalCellField( - calc(100% - var(--pi-spacing-xx-large) - 25%), - calc(var(--pi-spacing-xx-large) + 25%) - ); - } - &.is-tablet__large { - @include incrementalCellField( - calc(100% - var(--pi-spacing-xx-large) - 12.5%), - calc(var(--pi-spacing-xx-large) + 12.5%) - ); - } - } - // Desktop - &.is-desktop { - // Desktop S - &.is-desktop__small { - @include incrementalCellField( - calc(100% - var(--pi-spacing-xx-large)), - calc(var(--pi-spacing-xx-large)) - ); - } - // Desktop M - &.is-desktop__medium { - @include incrementalCellField( - calc(100% - var(--pi-spacing-xx-large) - 33.33%), - calc(var(--pi-spacing-xx-large) + 33.33%) - ); - } - // Desktop L - &.is-desktop__large { - @include incrementalCellField( - calc(100% - var(--pi-spacing-xx-large) - 40%), - calc(var(--pi-spacing-xx-large) + 40%) - ); - } - } -} +@mixin incrementalCellField( + $max-width: calc(100% - var(--pi-spacing-x-large)), + $margin-left: var(--pi-spacing-x-large) +) { + .pi-shell, + .cdk-overlay-container { + .pi-cell { + .pi-field { + // Incremental field + &.pi-form-field__incremental { + &:not(.pi-form-field__incremental--range) { + .mat-mdc-form-field { + // Fill + &.mat-form-field-appearance-fill { + .mat-mdc-text-field-wrapper { + max-width: $max-width; + margin-left: $margin-left; + } + } + } + } + } + } + } + } +} + +.pi-shell, +.cdk-overlay-container { + .pi-field { + // Incremental field + &.pi-form-field__incremental { + .mat-mdc-form-field { + width: -webkit-fill-available; + &.mat-focused { + .mat-mdc-form-field-placeholder { + color: var(--pi-color-primary); + } + } + + .mat-mdc-text-field-wrapper { + .mat-mdc-form-field-underline { + display: none; + } + } + .mat-mdc-form-field-flex { + justify-content: space-between; + align-items: center; + height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small)); + .mat-mdc-form-field-infix { + text-align: center; + } + .mat-mdc-form-field-suffix { + padding-right: var(--pi-spacing-medium); + } + .pi-affix { + display: flex; + align-items: center; + gap: var(--pi-spacing-xx-small); + + &.pi-affix__suffix { + flex-direction: row-reverse; + } + } + } + input { + &.mat-mdc-input-element { + text-align: right !important; + } + } + // Add & Substract icons + .pi-icon { + &:not(.pi-icon__appearance--fill), + &.pi-icon__small { + border: 1px solid var(--pi-color-primary); + border-radius: var(--pi-border-radius-x-small); + } + } + } + + // NOT Has error + &:not(.has-error) { + &:not(.mat-focused) { + .mdc-text-field { + .mdc-text-field__input { + color: var(--pi-color-black); + } + &:not(.mdc-text-field--disabled) { + .mdc-text-field__input { + color: var(--pi-color-black); + } + } + } + } + + &.mat-focused { + .mdc-text-field { + .mdc-text-field__input { + color: var(--pi-color-primary); + } + &:not(.mdc-text-field--disabled) { + .mdc-text-field__input { + color: var(--pi-color-primary); + } + } + } + } + } + + // has error + &.has-error { + .mdc-text-field { + .mdc-text-field__input { + color: var(--pi-color-warn); + } + &:not(.mdc-text-field--disabled) { + .mdc-text-field__input { + color: var(--pi-color-warn); + } + } + } + } + + // Disabled + &.is-disabled { + color: var(--pi-color-grey-200); + } + + // Incremental range + &.pi-form-field__incremental--range { + & > form { + display: flex; + gap: var(--pi-spacing-medium); + + & > div { + width: -webkit-fill-available; + } + + .pi-label { + span { + color: var(--pi-color-primary); + font: { + size: var(--pi-font-size-x-small); + } + } + } + + .pi-form-field__incremental { + width: 50%; + } + } + .mat-mdc-form-field-flex { + width: 99%; + } + } + } + } + + .pi-dynamic-menu, + .pi-card { + .mat-mdc-text-field-wrapper { + .mat-mdc-form-field-input-control { + height: 3.45rem; + } + } + } + + // Cells with incrementals inputs: suffix light weight + .pi-cell { + .mat-mdc-text-field-wrapper { + .mat-mdc-form-field-icon-suffix { + .pi-affix__suffix { + & > span { + font-weight: 300; + } + } + } + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-shell, + .cdk-overlay-container { + .pi-field { + // Incremental field + &.pi-form-field__incremental { + // Add & Substract icons + .pi-icon { + &:not(.pi-icon__appearance--fill), + &.pi-icon__small { + height: var(--pi-spacing-large); + width: var(--pi-spacing-large); + border-radius: 42%; + .mat-icon { + height: var(--pi-spacing-medium); + width: var(--pi-spacing-medium); + } + } + } + // Incremental range + &.pi-form-field__incremental--range { + .mat-mdc-text-field-wrapper { + .mat-mdc-form-field-input-control { + width: calc(50vw - 9rem); + } + } + } + } + } + } + @include incrementalCellField; + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .pi-shell, + .cdk-overlay-container { + .pi-field { + // Incremental field + &.pi-form-field__incremental { + // Add & Substract icons + .pi-icon { + &:not(.pi-icon__appearance--fill), + &.pi-icon__small { + height: var(--pi-spacing-medium); + width: var(--pi-spacing-medium); + border-radius: 42%; + .mat-icon { + height: var(--pi-spacing-small); + width: var(--pi-spacing-small); + } + } + } + } + } + } + } + } + + &.is-tablet { + &.is-tablet__small { + @include incrementalCellField( + calc(100% - var(--pi-spacing-xx-large) - 25%), + calc(var(--pi-spacing-xx-large) + 25%) + ); + } + &.is-tablet__large { + @include incrementalCellField( + calc(100% - var(--pi-spacing-xx-large) - 12.5%), + calc(var(--pi-spacing-xx-large) + 12.5%) + ); + } + } + // Desktop + &.is-desktop { + // Desktop S + &.is-desktop__small { + @include incrementalCellField( + calc(100% - var(--pi-spacing-xx-large)), + calc(var(--pi-spacing-xx-large)) + ); + } + // Desktop M + &.is-desktop__medium { + @include incrementalCellField( + calc(100% - var(--pi-spacing-xx-large) - 33.33%), + calc(var(--pi-spacing-xx-large) + 33.33%) + ); + } + // Desktop L + &.is-desktop__large { + @include incrementalCellField( + calc(100% - var(--pi-spacing-xx-large) - 40%), + calc(var(--pi-spacing-xx-large) + 40%) + ); + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-password.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-password.scss index 2de2f29..2c57a58 100644 --- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-password.scss +++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-password.scss @@ -1,19 +1,19 @@ -.pi-shell, -.cdk-overlay-container { - .pi-field { - // Password - &.pi-form-field__password { - button { - &.pi-button__icon { - color: var(--pi-color-grey-200); - &:hover { - &:enabled { - color: var(--pi-color-grey-200); - text-decoration: underline; - } - } - } - } - } - } -} +.pi-shell, +.cdk-overlay-container { + .pi-field { + // Password + &.pi-form-field__password { + button { + &.pi-button__icon { + color: var(--pi-color-grey-200); + &:hover { + &:enabled { + color: var(--pi-color-grey-200); + text-decoration: underline; + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss index e148abf..e790d41 100644 --- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss +++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss @@ -1,82 +1,82 @@ -.pi-shell, -.cdk-overlay-container { - .pi-field { - // Textarea - &.pi-form-field__textarea { - .mat-mdc-text-field-wrapper { - min-height: 7rem; - &.mdc-text-field--outlined { - .mdc-text-field__input { - padding: var(--pi-spacing-xx-small) 0; - } - } - } - - .mat-mdc-form-field { - height: unset; - textarea { - &.mat-mdc-input-element { - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - size: var(--pi-font-size-small); - weight: 300; - } - } - } - // Outline - &.mat-mdc-form-field-appearance-outline { - [class*='mat-form-field-outline-'] { - height: auto; - } - .mat-mdc-form-field-infix { - padding: var(--pi-spacing-small) 0; - textarea { - &.mat-mdc-input-element { - padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0; - } - } - } - } - // fill - &.mat-form-field-appearance-fill { - textarea { - &.mat-mdc-input-element { - // max-width: calc(100% - var(--pi-spacing-medium)); - margin-top: var(--pi-spacing-x-small); - background-color: var(--pi-color-background-400); - transition: var(--pi-animation-fast); - } - } - - &.mat-form-field-disabled { - textarea { - &.mat-mdc-input-element { - background-color: var(--pi-color-white); - } - } - & + span { - display: none; - } - } - &:not(.mat-form-field-disabled) { - textarea { - &.mat-mdc-input-element { - padding: var(--pi-spacing-x-small); - background-color: var(--pi-color-background-400); - } - } - } - & + span { - display: flex; - justify-content: flex-end; - width: 100%; - margin-top: var(--pi-spacing-xx-small); - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } -} +.pi-shell, +.cdk-overlay-container { + .pi-field { + // Textarea + &.pi-form-field__textarea { + .mat-mdc-text-field-wrapper { + min-height: 7rem; + &.mdc-text-field--outlined { + .mdc-text-field__input { + padding: var(--pi-spacing-xx-small) 0; + } + } + } + + .mat-mdc-form-field { + height: unset; + textarea { + &.mat-mdc-input-element { + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + size: var(--pi-font-size-small); + weight: 300; + } + } + } + // Outline + &.mat-mdc-form-field-appearance-outline { + [class*='mat-form-field-outline-'] { + height: auto; + } + .mat-mdc-form-field-infix { + padding: var(--pi-spacing-small) 0; + textarea { + &.mat-mdc-input-element { + padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0; + } + } + } + } + // fill + &.mat-form-field-appearance-fill { + textarea { + &.mat-mdc-input-element { + // max-width: calc(100% - var(--pi-spacing-medium)); + margin-top: var(--pi-spacing-x-small); + background-color: var(--pi-color-background-400); + transition: var(--pi-animation-fast); + } + } + + &.mat-form-field-disabled { + textarea { + &.mat-mdc-input-element { + background-color: var(--pi-color-white); + } + } + & + span { + display: none; + } + } + &:not(.mat-form-field-disabled) { + textarea { + &.mat-mdc-input-element { + padding: var(--pi-spacing-x-small); + background-color: var(--pi-color-background-400); + } + } + } + & + span { + display: flex; + justify-content: flex-end; + width: 100%; + margin-top: var(--pi-spacing-xx-small); + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss index 31a30e8..1cfaab9 100644 --- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss +++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss @@ -1,181 +1,181 @@ -.pi-shell, -.cdk-overlay-container { - .pi-field { - &:not(.pi-form-field__incremental) { - // Icon colors - .mat-mdc-form-field { - &:not(.mat-form-field-invalid) { - &.mat-focused { - .mat-icon { - color: var(--pi-color-primary); - } - } - } - &:not(.mat-form-field-invalid):not(.mat-focused) { - .mat-icon { - color: var(--pi-color-grey-300); - } - } - &.mat-form-field-invalid { - .mat-icon { - color: var(--pi-color-warn); - } - } - } - } - .mat-mdc-form-field-input-control { - font: { - family: 'Soehne', Helvetica, Arial, sans-serif !important; - weight: 300; - } - } - .mdc-text-field { - .mdc-floating-label { - font: { - family: 'Soehne', Helvetica, Arial, sans-serif !important; - weight: 300; - } - } - } - .mdc-text-field--disabled { - .mdc-floating-label { - color: var(--pi-color-grey-300); - } - } - } -} - -.pi-shell, -.cdk-overlay-container { - // Cell Fields - .pi-grid-item { - .pi-cell { - .pi-field { - width: 100%; - .mat-mdc-form-field { - // Fill - &.mat-form-field-appearance-fill { - .mat-mdc-form-field-underline { - transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))); - } - - input { - &.mat-mdc-input-element { - height: var(--pi-spacing-xxx-large); - margin-top: unset; - text-align: right !important; - } - } - .mat-mdc-form-field-icon-prefix, - .mat-mdc-form-field-icon-suffix { - transform: translateY(var(--pi-spacing-xx-small)); - } - } - } - &:not(.pi-form-field__incremental) { - input { - &.mat-mdc-input-element { - transform: translateY(var(--pi-spacing-medium)); - } - } - } - &.pi-form-field__incremental { - .mat-mdc-form-field { - // Fill - &.mat-form-field-appearance-fill { - .mat-mdc-form-field-infix { - min-height: unset; - } - input { - &.mat-mdc-input-element { - transform: translateY(var(--pi-spacing-xx-small)); - } - } - } - } - } - } - .pi-text-viewer__font-weight--600 { - height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem); - } - } - } -} - -.cdk-overlay-container, -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-shell, - .cdk-overlay-container { - // Cell Fields - .pi-grid-item { - .pi-cell { - .pi-field { - .mat-mdc-form-field { - .mat-mdc-form-field-flex { - min-height: 3.25rem; - } - // Fill - &.mat-form-field-appearance-fill { - .mat-mdc-form-field-underline { - transform: translateY( - calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)) - ); - } - - input { - &.mat-mdc-input-element { - height: var(--pi-spacing-xxx-large); - margin-top: unset; - text-align: right !important; - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } - } - } - } - } - } - - &:not(.is-mobile) { - .pi-shell, - .cdk-overlay-container { - // Cell Fields - .pi-grid-item { - .pi-cell { - .pi-field { - .mat-mdc-form-field { - // Fill - &.mat-form-field-appearance-fill { - .mat-mdc-text-field-wrapper { - margin-left: var(--pi-spacing-xx-large); - } - } - } - &:not(.pi-form-field__incremental) { - .mat-mdc-form-field { - // Fill - &.mat-form-field-appearance-fill { - .mat-mdc-text-field-wrapper { - max-width: calc(100% - var(--pi-spacing-xx-large)); - } - } - } - } - } - .pi-text-viewer__font-weight--600 { - padding-left: var(--pi-spacing-x-large); - } - } - } - } - } -} +.pi-shell, +.cdk-overlay-container { + .pi-field { + &:not(.pi-form-field__incremental) { + // Icon colors + .mat-mdc-form-field { + &:not(.mat-form-field-invalid) { + &.mat-focused { + .mat-icon { + color: var(--pi-color-primary); + } + } + } + &:not(.mat-form-field-invalid):not(.mat-focused) { + .mat-icon { + color: var(--pi-color-grey-300); + } + } + &.mat-form-field-invalid { + .mat-icon { + color: var(--pi-color-warn); + } + } + } + } + .mat-mdc-form-field-input-control { + font: { + family: 'Soehne', Helvetica, Arial, sans-serif !important; + weight: 300; + } + } + .mdc-text-field { + .mdc-floating-label { + font: { + family: 'Soehne', Helvetica, Arial, sans-serif !important; + weight: 300; + } + } + } + .mdc-text-field--disabled { + .mdc-floating-label { + color: var(--pi-color-grey-300); + } + } + } +} + +.pi-shell, +.cdk-overlay-container { + // Cell Fields + .pi-grid-item { + .pi-cell { + .pi-field { + width: 100%; + .mat-mdc-form-field { + // Fill + &.mat-form-field-appearance-fill { + .mat-mdc-form-field-underline { + transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))); + } + + input { + &.mat-mdc-input-element { + height: var(--pi-spacing-xxx-large); + margin-top: unset; + text-align: right !important; + } + } + .mat-mdc-form-field-icon-prefix, + .mat-mdc-form-field-icon-suffix { + transform: translateY(var(--pi-spacing-xx-small)); + } + } + } + &:not(.pi-form-field__incremental) { + input { + &.mat-mdc-input-element { + transform: translateY(var(--pi-spacing-medium)); + } + } + } + &.pi-form-field__incremental { + .mat-mdc-form-field { + // Fill + &.mat-form-field-appearance-fill { + .mat-mdc-form-field-infix { + min-height: unset; + } + input { + &.mat-mdc-input-element { + transform: translateY(var(--pi-spacing-xx-small)); + } + } + } + } + } + } + .pi-text-viewer__font-weight--600 { + height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem); + } + } + } +} + +.cdk-overlay-container, +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-shell, + .cdk-overlay-container { + // Cell Fields + .pi-grid-item { + .pi-cell { + .pi-field { + .mat-mdc-form-field { + .mat-mdc-form-field-flex { + min-height: 3.25rem; + } + // Fill + &.mat-form-field-appearance-fill { + .mat-mdc-form-field-underline { + transform: translateY( + calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)) + ); + } + + input { + &.mat-mdc-input-element { + height: var(--pi-spacing-xxx-large); + margin-top: unset; + text-align: right !important; + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } + } + } + } + } + } + + &:not(.is-mobile) { + .pi-shell, + .cdk-overlay-container { + // Cell Fields + .pi-grid-item { + .pi-cell { + .pi-field { + .mat-mdc-form-field { + // Fill + &.mat-form-field-appearance-fill { + .mat-mdc-text-field-wrapper { + margin-left: var(--pi-spacing-xx-large); + } + } + } + &:not(.pi-form-field__incremental) { + .mat-mdc-form-field { + // Fill + &.mat-form-field-appearance-fill { + .mat-mdc-text-field-wrapper { + max-width: calc(100% - var(--pi-spacing-xx-large)); + } + } + } + } + } + .pi-text-viewer__font-weight--600 { + padding-left: var(--pi-spacing-x-large); + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/components/pi-field/index.scss b/libs/ui/src/lib/styles/common/components/pi-field/index.scss index 63aa0a9..b9c2420 100644 --- a/libs/ui/src/lib/styles/common/components/pi-field/index.scss +++ b/libs/ui/src/lib/styles/common/components/pi-field/index.scss @@ -1,4 +1,4 @@ -@forward 'pi-field-incremental'; -@forward 'pi-field-password'; -@forward 'pi-field-textarea'; -@forward 'pi-field'; +@forward 'pi-field-incremental'; +@forward 'pi-field-password'; +@forward 'pi-field-textarea'; +@forward 'pi-field'; diff --git a/libs/ui/src/lib/styles/common/index.scss b/libs/ui/src/lib/styles/common/index.scss index 0f4523b..631ad97 100644 --- a/libs/ui/src/lib/styles/common/index.scss +++ b/libs/ui/src/lib/styles/common/index.scss @@ -1,32 +1,32 @@ -@use 'abstracts' as *; -@use 'base' as *; -@use 'components' as *; -@use 'layouts' as *; -@use 'vendors' as *; -@use 'wrappers' as *; - -@use '@angular/material' as mat; -@include mat.checkbox-density(0); - -// TODO: Change import file after checking with Daniel -@import '@typeform/embed/build/css/widget.css'; -@import '@typeform/embed/build/css/popup.css'; - -@include mat.core(); - -// Palette -$pi-palette-accent: mat.define-palette($pi-color-theme-accent); -$pi-palette-primary: mat.define-palette($pi-color-theme-primary); -$pi-palette-warn: mat.define-palette($pi-color-theme-warn); -// Theme -$pi-theme: mat.define-light-theme( - ( - color: ( - accent: $pi-palette-accent, - primary: $pi-palette-primary, - warn: $pi-palette-warn, - ), - density: 0, - ) -); -@include mat.all-component-themes($pi-theme); +@use 'abstracts' as *; +@use 'base' as *; +@use 'components' as *; +@use 'layouts' as *; +@use 'vendors' as *; +@use 'wrappers' as *; + +@use '@angular/material' as mat; +@include mat.checkbox-density(0); + +// TODO: Change import file after checking with Daniel +@import '@typeform/embed/build/css/widget.css'; +@import '@typeform/embed/build/css/popup.css'; + +@include mat.core(); + +// Palette +$pi-palette-accent: mat.define-palette($pi-color-theme-accent); +$pi-palette-primary: mat.define-palette($pi-color-theme-primary); +$pi-palette-warn: mat.define-palette($pi-color-theme-warn); +// Theme +$pi-theme: mat.define-light-theme( + ( + color: ( + accent: $pi-palette-accent, + primary: $pi-palette-primary, + warn: $pi-palette-warn, + ), + density: 0, + ) +); +@include mat.all-component-themes($pi-theme); diff --git a/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss b/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss index b06282b..0c4dee5 100644 --- a/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss +++ b/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss @@ -1,921 +1,921 @@ -// Shine hover effect -@mixin layoutPricingButtonsShineHoverEffect { - // Hover shine effect - &:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item) { - position: relative; - overflow: hidden; - &::after { - content: ''; - position: absolute; - top: -50%; - right: 0; - bottom: -50%; - left: -50%; - transform: rotateZ(75deg) translate(-5rem, 7.5rem); - background: linear-gradient( - to bottom, - rgba(229, 172, 142, 0), - rgba(255, 255, 255, 0.25) 50%, - rgba(229, 172, 142, 0) - ); - &:hover { - cursor: pointer; - } - } - &:hover, - &:focus { - &::after { - animation: sheen 0.75s forwards; - } - } - - &:active { - transform: translate(0, -0.125rem); - box-shadow: 0px 0px 0px white; - -webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); - box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); - } - } - - &:focus { - outline: 0; - } - - @keyframes sheen { - 100% { - transform: rotateZ(30deg) translate(1rem, -9rem); - } - } -} - -@mixin billingCycleContentColor($text-color, $theming-color-light, $theming-color) { - color: var(--pi-color-#{$text-color}); - background-color: var(--pi-color-#{$theming-color}); - border-color: var(--pi-color-#{$theming-color}); - &:hover { - background-image: unset; - } -} - -@mixin pricingLayoutDiscountChip( - $border-color: var(--pi-color-grey-50), - $label-color: var(--pi-color-grey-900), - $background-color: var(--pi-gradient-grey-light) -) { - & > span { - & > label { - color: $label-color; - } - } - border: 1px solid; - border-color: $border-color; - background: $background-color; -} - -@mixin pricingLayoutGrid( - $grid-template-columns--regular-cards: repeat(3, 1fr), - $grid-template-columns--sticky-cards: 1fr 3fr -) { - .pi-layout { - &.pi-layout__09-pricing { - // Pricing cards section - & > *:nth-child(2) { - display: grid; - grid-template-columns: $grid-template-columns--regular-cards; - } - // Feature cards section - & > *:nth-child(4) { - // Sticky pricing card headers - & > div { - &:first-child { - & > *:nth-child(1) { - display: grid; - grid-template-columns: $grid-template-columns--sticky-cards; - align-items: end; - grid-gap: var(--pi-spacing-medium); - - & > *:nth-child(2) { - display: grid; - grid-template-columns: $grid-template-columns--regular-cards; - gap: var(--pi-spacing-small); - } - } - } - } - // Feature card wrapper - & > div { - &:last-child { - display: grid; - grid-template-columns: $grid-template-columns--regular-cards; - } - } - } - } - } -} - -@mixin checkIconBackgroundColor($background-color: var(--pi-color-grey-50)) { - .pi-icon { - &.pi-icon__border-radius--large { - &.pi-icon__appearance--fill { - background-color: $background-color; - } - } - } -} - -@mixin cardInternalBorders($border-color: var(--pi-color-grey-50)) { - .pi-card-content__bottom { - border-top: 1px solid; - border-color: $border-color; - } - .pi-list-item { - &.pi-list-item__border--footer { - border-color: $border-color; - } - } -} - -@mixin pricingCardContentColor($color, $button-text-color, $button-gradient) { - color: var(--pi-color-#{$color}); - border: 1px solid; - border-color: var(--pi-color-#{$color}-75); - // Card content - .pi-card-content { - // Content Center - &.pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-#{$color}); - } - } - } - // Content Bottom - &.pi-card-content__bottom { - button { - color: var(--pi-color-#{$button-text-color}); - background-image: var(--pi-gradient-#{$button-gradient}); - @include layoutPricingButtonsShineHoverEffect; - } - } - } -} - -@mixin companyPricing { - .pi-layout { - &.pi-layout__09-pricing { - fieldset { - .pi-list-item { - &.is-active { - @include billingCycleContentColor(primary-900, primary, primary-100); - } - &:hover { - &:not(.is-active) { - @include billingCycleContentColor(primary, primary, primary-50); - } - } - } - } - .pi-card { - &.pi-color__primary { - &.pi-color__mode--light { - @include checkIconBackgroundColor(var(--pi-color-primary-50)); - @include cardInternalBorders(var(--pi-color-primary-200)); - @include pricingCardContentColor(primary, white, primary-dark); - } - &.pi-color__mode--dark { - @include checkIconBackgroundColor(var(--pi-color-primary-400)); - @include cardInternalBorders(var(--pi-color-white)); - @include pricingCardContentColor(white, primary, primary-light); - } - } - } - } - } -} - -@mixin investorPricing { - .pi-layout { - &.pi-layout__09-pricing { - fieldset { - .pi-list-item { - &.is-active { - @include billingCycleContentColor(accent-900, accent, accent-100); - } - &:hover { - &:not(.is-active) { - @include billingCycleContentColor(accent, accent, accent-50); - } - } - } - } - .pi-card { - &.pi-color__accent { - &.pi-color__mode--light { - @include checkIconBackgroundColor(var(--pi-color-accent-50)); - @include cardInternalBorders(var(--pi-color-accent-200)); - @include pricingCardContentColor(accent, white, accent-dark); - } - &.pi-color__mode--dark { - @include checkIconBackgroundColor(var(--pi-color-accent-300)); - @include cardInternalBorders(var(--pi-color-white)); - @include pricingCardContentColor(white, accent-900, accent-light); - // Bottom - .pi-card-content__bottom { - & > div { - & > span { - color: var(--pi-color-white); - } - } - } - } - } - } - } - } -} - -@mixin pricingLayoutSpacings($bottom-blocks-top-spacing, $bottom-blocks-height) { - .pi-layout { - &.pi-layout__09-pricing { - & > *:nth-child(4) { - // Feature card wrapper - & > div { - &:last-child { - .pi-card { - margin: #{$bottom-blocks-top-spacing} auto auto auto; - } - } - } - .pi-card { - .pi-card-content__center { - & > article { - &:nth-child(n + 2) { - margin-top: calc(#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large)); - } - & > .pi-list-item { - height: calc(#{$bottom-blocks-height} + 2 * var(--pi-spacing-small)); - } - } - } - } - } - } - } -} -@mixin advisorPricing { - .pi-layout { - &.pi-layout__09-pricing { - fieldset { - .pi-list-item { - &.is-active { - @include billingCycleContentColor(highlighted-900, highlighted, highlighted-100); - } - &:hover { - &:not(.is-active) { - @include billingCycleContentColor(highlighted, highlighted, highlighted-50); - } - } - } - } - .pi-card { - &.pi-color__highlighted { - &.pi-color__mode--light { - @include checkIconBackgroundColor(var(--pi-color-highlighted-50)); - @include cardInternalBorders(var(--pi-color-highlighted-100)); - @include pricingCardContentColor(highlighted, white, highlighted-dark); - } - } - } - } - } -} - -@mixin pricingLayoutWidth($container-width: calc(100% - var(--pi-spacing-xx-large))) { - .pi-layout { - &.pi-layout__09-pricing { - max-width: $container-width; - margin: auto; - & > *:nth-child(4) { - & > *:nth-child(1) { - & > header { - max-width: $container-width; - margin: auto; - } - } - } - } - } -} - -.pi-layout { - &.pi-layout__09-pricing { - // Billing cycle selector - & > *:nth-child(1) { - & > *:nth-child(2) { - margin-top: var(--pi-spacing-xx-large); - & > * { - &:last-child { - margin-top: var(--pi-spacing-x-small); - } - } - } - } - - fieldset { - .pi-list-item { - &:not(.is-active) { - &:hover { - cursor: pointer; - } - } - .pi-list-item-content__right { - flex: unset; - .pi-chip { - min-width: unset; - &.pi-chip__appearance--fill { - max-height: 1.8125rem; - height: unset; - padding: var(--pi-spacing-x-small) var(--pi-spacing-xx-small); - &.pi-color__grey { - @include pricingLayoutDiscountChip; - } - &.pi-color__accent { - @include pricingLayoutDiscountChip( - var(--pi-color-accent-200), - var(--pi-color-white), - var(--pi-gradient-accent-dark) - ); - } - } - } - } - } - } - - // Pricing cards section - & > *:nth-child(2) { - .pi-card { - // Center - .pi-card-content__center { - min-height: 6rem; - margin-top: var(--pi-spacing-x-large); - padding: 0 var(--pi-spacing-xx-small); - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-small); - } - } - // Bottom - .pi-card-content__bottom { - margin-top: var(--pi-spacing-x-large); - padding-top: var(--pi-spacing-x-large); - text-align: center; - & > div { - & > span { - color: var(--pi-color-accent); - } - } - button { - margin-top: var(--pi-spacing-x-large); - } - } - // Card grey - &.pi-color__grey { - // Mode Light - &.pi-color__mode--light { - // Footer - .pi-card-content__bottom { - border-color: var(--pi-color-grey-100); - } - } - } - } - } - & > *:nth-child(4) { - // Feature card wrapper - & > div { - &:last-child { - width: 100%; - gap: var(--pi-spacing-small); - } - } - } - // Default mode card - .pi-card { - &.pi-color__grey { - &.pi-color__mode--light { - @include checkIconBackgroundColor; - @include cardInternalBorders(var(--pi-color-grey-100)); - @include pricingCardContentColor(grey, white, grey-dark); - } - } - } - } -} - -.is-company { - @include companyPricing; -} - -.is-investor { - @include investorPricing; -} -.is-advisor { - @include advisorPricing; -} - -html { - // Mobile - &.is-mobile { - @include pricingLayoutWidth; - .pi-layout { - &.pi-layout__09-pricing { - max-width: calc(100% - var(--pi-spacing-xx-large)); - margin: auto; - & > *:nth-child(1) { - fieldset + fieldset { - margin-top: var(--pi-spacing-medium); - } - } - } - } - } - - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__09-pricing { - & > *:nth-child(1) { - .pi-text-viewer { - margin: auto; - } - } - & > *:nth-child(2) { - margin-top: var(--pi-spacing-xx-large); - } - // Features - & > *:nth-child(3), - & > *:nth-child(4) { - display: none; - } - .pi-main-wrapper-content.is-sticky { - width: calc(100% + 3rem); - margin-left: -1.5rem; - padding: var(--pi-spacing-x-large); - } - } - } - - // Small device - @media screen and (max-width: 62rem) { - .pi-layout { - &.pi-layout__09-pricing { - // Pricing cards section - & > *:nth-child(2) { - display: flex; - flex-direction: column-reverse; - align-items: center; - gap: var(--pi-spacing-xx-large); - } - } - } - } - } - - // Tablet - &.is-tablet { - @include pricingLayoutWidth(calc(100% - 3rem)); - .pi-layout { - &.pi-layout__09-pricing { - & > *:nth-child(1) { - & > *:nth-child(2) { - display: flex; - gap: var(--pi-spacing-medium); - align-items: center; - justify-content: center; - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - fieldset { - max-width: 16rem; - - .pi-list-item { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-areas: - 'item1 item2' - 'item3 .'; - height: 6.6rem; - box-shadow: var(--pi-box-shadow-panel); - .pi-list-item-icon__left { - grid-area: item1; - .pi-icon { - justify-content: flex-start; - } - } - .pi-list-item-content__left { - grid-area: item3; - } - .pi-list-item-content__right { - grid-area: item2; - text-align: -webkit-right; - } - } - } - } - } - & > *:nth-child(2) { - gap: var(--pi-spacing-medium); - max-width: calc(100% - 3rem); - margin: var(--pi-spacing-xx-large) auto; - } - } - } - // Tablet S - &.is-tablet__small { - .pi-layout { - &.pi-layout__09-pricing { - // Pricing cards section - & > *:nth-child(2) { - .pi-card { - width: 30.125rem; - max-width: 30.125rem; - } - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .is-company { - @include pricingLayoutGrid; - } - .is-investor { - @include pricingLayoutGrid; - } - .is-advisor { - @include pricingLayoutGrid(repeat(2, 1fr), repeat(1, 1fr 3fr)); - } - .pi-layout { - &.pi-layout__09-pricing { - // Pricing cards section - & > *:nth-child(2) { - .pi-card { - height: 100%; - margin: auto; - } - } - } - } - } - } - - // Desktop - &.is-desktop { - // Desktop S & M - &:not(.is-desktop__large) { - @include pricingLayoutWidth(var(--pi-public-width-container)); - } - // Desktop L - &.is-desktop__large { - @include pricingLayoutWidth(var(--pi-public-width-container-l)); - } - .pi-layout { - &.pi-layout__09-pricing { - display: grid; - grid-template-columns: 1fr 3fr; - grid-column-gap: var(--pi-spacing-medium); - grid-row-gap: var(--pi-spacing-xx-large); - margin: 0 auto; - // Billing cycle selector - & > *:nth-child(1) { - & > *:nth-child(2) { - fieldset + fieldset { - margin-top: var(--pi-spacing-medium); - } - } - } - // Pricing cards section - & > *:nth-child(2) { - gap: var(--pi-spacing-small); - } - // Features per phase - & > *:nth-child(3) { - // List of features inside each phase - article { - & > .pi-list-item { - height: calc(4.65rem + 2 * var(--pi-spacing-small)); - } - } - } - & > *:nth-child(4) { - // Sticky pricing card headers - & > div { - &:first-child { - gap: var(--pi-spacing-small); - transition: var(--pi-animation); - position: fixed; - left: 0; - top: 0; - z-index: 99; - width: 100%; - &.is-visible { - opacity: 1; - visibility: visible; - background-color: rgba($color: white, $alpha: 0.66); - @include cardInternalBorders(transparent); - .pi-card { - gap: var(--pi-spacing-x-small); - .pi-card-content__top { - header { - display: flex; - justify-content: space-between; - gap: var(--pi-spacing-xx-small); - align-items: baseline; - width: -webkit-fill-available; - padding-left: var(--pi-spacing-x-small); - padding-right: var(--pi-spacing-x-small); - .pi-text-viewer { - article { - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: flex-end; - } - } - } - } - } - } - &:not(.is-visible) { - opacity: 0; - visibility: hidden; - height: 0; - } - - fieldset { - padding-bottom: var(--pi-spacing-xx-large); - } - } - } - // Feature card wrapper - & > div { - &:last-child { - width: 100%; - gap: var(--pi-spacing-small); - .pi-card { - border: none; - } - } - } - .pi-card { - min-height: unset; - .pi-card-content__center { - margin-top: 0; - & > article { - & > .pi-list-item { - justify-content: center; - } - } - } - - // Top - .pi-card-content__top { - align-items: flex-start; - justify-content: flex-start; - gap: var(--pi-spacing-small); - .pi-icon { - &.pi-icon__type--custom { - padding: var(--pi-spacing-xx-small); - } - } - h3 { - font: { - size: var(--pi-font-size-x-large); - weight: 700; - } - } - h4 { - font: { - size: var(--pi-font-size-small); - weight: 300; - } - } - } - // Center - .pi-card-content__center { - padding: 0 var(--pi-spacing-xx-small); - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-small); - } - - // Footer - .pi-card-content__footer { - button { - width: 100%; - font-weight: 300; - &:not(.mdc-switch):not(.pi-button__toggle) { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not( - .pi-button__x-large - ):not(.pi-button__toggle):not(.pi-button__trimmed) { - height: var(--pi-spacing-xxxx-large); - } - } - } - } - - // Demo - &.pi-color__grey { - // Mode Light - &.pi-color__mode--light { - // Top - .pi-card-content__top { - h4 { - color: var(--pi-color-grey-300); - } - } - // Center - .pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-grey-900); - } - } - } - - // Footer - .pi-card-content__footer { - border-color: var(--pi-color-grey-100); - } - - button { - color: var(--pi-color-white); - background-color: var(--pi-color-grey-900); - } - } - } - // Company pricing - &.pi-color__primary { - // Basic plan - &.pi-color__mode--light { - color: var(--pi-color-primary); - // Header - .pi-card-content__header { - h4 { - color: var(--pi-color-primary-300); - } - } - // Center - .pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-primary); - } - } - } - - button { - color: var(--pi-color-white); - background: var(--pi-gradient-primary-500-900); - } - } - // Premium plan - &.pi-color__mode--dark { - color: var(--pi-color-white); - // Center - .pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-white); - } - } - } - - button { - color: var(--pi-color-primary-1000); - background-color: var(--pi-color-white); - } - } - } - // Investor pricing - &.pi-color__accent { - // Basic plan - &.pi-color__mode--light { - color: var(--pi-color-accent); - // Top - .pi-card-content__top { - h4 { - color: var(--pi-color-accent-300); - } - } - // Center - .pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-accent); - } - } - } - .pi-card-content__bottom { - button { - color: var(--pi-color-white); - background-image: var(--pi-gradient-accent-200-300); - } - } - } - // Premium plan - &.pi-color__mode--dark { - color: var(--pi-color-white); - // Center - .pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-white); - } - } - } - - button { - color: var(--pi-color-accent); - background: var(--pi-color-white); - } - } - } - // Advisor pricing - &.pi-color__highlighted { - // Basic plan - &.pi-color__mode--light { - color: var(--pi-color-highlighted); - // Top - .pi-card-content__top { - h4 { - color: var(--pi-color-highlighted-300); - } - } - // Center - .pi-card-content__center { - .pi-text-viewer { - label, - span { - color: var(--pi-color-highlighted); - } - } - } - - button { - color: var(--pi-color-white); - background: var(--pi-gradient-highlighted-300-500); - } - } - } - } - - &.pi-color__grey { - .pi-card-content__center { - .pi-list-item { - .pi-icon { - .mat-icon { - color: var(--pi-color-grey-400); - } - } - border-color: var(--pi-color-grey-100); - } - } - } - &.pi-color__mode--dark { - .pi-card-content__center { - .pi-list-item { - .pi-icon { - .mat-icon { - color: var(--pi-color-white); - } - } - } - } - } - } - } - } - } - - // Advisor - .is-advisor { - @include pricingLayoutSpacings(3.25rem, 4.65rem); - } - // Investor & Company - .is-investor, - .is-company { - @include pricingLayoutSpacings(4.0125rem, 4.65rem); - } - } -} +// Shine hover effect +@mixin layoutPricingButtonsShineHoverEffect { + // Hover shine effect + &:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item) { + position: relative; + overflow: hidden; + &::after { + content: ''; + position: absolute; + top: -50%; + right: 0; + bottom: -50%; + left: -50%; + transform: rotateZ(75deg) translate(-5rem, 7.5rem); + background: linear-gradient( + to bottom, + rgba(229, 172, 142, 0), + rgba(255, 255, 255, 0.25) 50%, + rgba(229, 172, 142, 0) + ); + &:hover { + cursor: pointer; + } + } + &:hover, + &:focus { + &::after { + animation: sheen 0.75s forwards; + } + } + + &:active { + transform: translate(0, -0.125rem); + box-shadow: 0px 0px 0px white; + -webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); + -moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); + box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25); + } + } + + &:focus { + outline: 0; + } + + @keyframes sheen { + 100% { + transform: rotateZ(30deg) translate(1rem, -9rem); + } + } +} + +@mixin billingCycleContentColor($text-color, $theming-color-light, $theming-color) { + color: var(--pi-color-#{$text-color}); + background-color: var(--pi-color-#{$theming-color}); + border-color: var(--pi-color-#{$theming-color}); + &:hover { + background-image: unset; + } +} + +@mixin pricingLayoutDiscountChip( + $border-color: var(--pi-color-grey-50), + $label-color: var(--pi-color-grey-900), + $background-color: var(--pi-gradient-grey-light) +) { + & > span { + & > label { + color: $label-color; + } + } + border: 1px solid; + border-color: $border-color; + background: $background-color; +} + +@mixin pricingLayoutGrid( + $grid-template-columns--regular-cards: repeat(3, 1fr), + $grid-template-columns--sticky-cards: 1fr 3fr +) { + .pi-layout { + &.pi-layout__09-pricing { + // Pricing cards section + & > *:nth-child(2) { + display: grid; + grid-template-columns: $grid-template-columns--regular-cards; + } + // Feature cards section + & > *:nth-child(4) { + // Sticky pricing card headers + & > div { + &:first-child { + & > *:nth-child(1) { + display: grid; + grid-template-columns: $grid-template-columns--sticky-cards; + align-items: end; + grid-gap: var(--pi-spacing-medium); + + & > *:nth-child(2) { + display: grid; + grid-template-columns: $grid-template-columns--regular-cards; + gap: var(--pi-spacing-small); + } + } + } + } + // Feature card wrapper + & > div { + &:last-child { + display: grid; + grid-template-columns: $grid-template-columns--regular-cards; + } + } + } + } + } +} + +@mixin checkIconBackgroundColor($background-color: var(--pi-color-grey-50)) { + .pi-icon { + &.pi-icon__border-radius--large { + &.pi-icon__appearance--fill { + background-color: $background-color; + } + } + } +} + +@mixin cardInternalBorders($border-color: var(--pi-color-grey-50)) { + .pi-card-content__bottom { + border-top: 1px solid; + border-color: $border-color; + } + .pi-list-item { + &.pi-list-item__border--footer { + border-color: $border-color; + } + } +} + +@mixin pricingCardContentColor($color, $button-text-color, $button-gradient) { + color: var(--pi-color-#{$color}); + border: 1px solid; + border-color: var(--pi-color-#{$color}-75); + // Card content + .pi-card-content { + // Content Center + &.pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-#{$color}); + } + } + } + // Content Bottom + &.pi-card-content__bottom { + button { + color: var(--pi-color-#{$button-text-color}); + background-image: var(--pi-gradient-#{$button-gradient}); + @include layoutPricingButtonsShineHoverEffect; + } + } + } +} + +@mixin companyPricing { + .pi-layout { + &.pi-layout__09-pricing { + fieldset { + .pi-list-item { + &.is-active { + @include billingCycleContentColor(primary-900, primary, primary-100); + } + &:hover { + &:not(.is-active) { + @include billingCycleContentColor(primary, primary, primary-50); + } + } + } + } + .pi-card { + &.pi-color__primary { + &.pi-color__mode--light { + @include checkIconBackgroundColor(var(--pi-color-primary-50)); + @include cardInternalBorders(var(--pi-color-primary-200)); + @include pricingCardContentColor(primary, white, primary-dark); + } + &.pi-color__mode--dark { + @include checkIconBackgroundColor(var(--pi-color-primary-400)); + @include cardInternalBorders(var(--pi-color-white)); + @include pricingCardContentColor(white, primary, primary-light); + } + } + } + } + } +} + +@mixin investorPricing { + .pi-layout { + &.pi-layout__09-pricing { + fieldset { + .pi-list-item { + &.is-active { + @include billingCycleContentColor(accent-900, accent, accent-100); + } + &:hover { + &:not(.is-active) { + @include billingCycleContentColor(accent, accent, accent-50); + } + } + } + } + .pi-card { + &.pi-color__accent { + &.pi-color__mode--light { + @include checkIconBackgroundColor(var(--pi-color-accent-50)); + @include cardInternalBorders(var(--pi-color-accent-200)); + @include pricingCardContentColor(accent, white, accent-dark); + } + &.pi-color__mode--dark { + @include checkIconBackgroundColor(var(--pi-color-accent-300)); + @include cardInternalBorders(var(--pi-color-white)); + @include pricingCardContentColor(white, accent-900, accent-light); + // Bottom + .pi-card-content__bottom { + & > div { + & > span { + color: var(--pi-color-white); + } + } + } + } + } + } + } + } +} + +@mixin pricingLayoutSpacings($bottom-blocks-top-spacing, $bottom-blocks-height) { + .pi-layout { + &.pi-layout__09-pricing { + & > *:nth-child(4) { + // Feature card wrapper + & > div { + &:last-child { + .pi-card { + margin: #{$bottom-blocks-top-spacing} auto auto auto; + } + } + } + .pi-card { + .pi-card-content__center { + & > article { + &:nth-child(n + 2) { + margin-top: calc(#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large)); + } + & > .pi-list-item { + height: calc(#{$bottom-blocks-height} + 2 * var(--pi-spacing-small)); + } + } + } + } + } + } + } +} +@mixin advisorPricing { + .pi-layout { + &.pi-layout__09-pricing { + fieldset { + .pi-list-item { + &.is-active { + @include billingCycleContentColor(highlighted-900, highlighted, highlighted-100); + } + &:hover { + &:not(.is-active) { + @include billingCycleContentColor(highlighted, highlighted, highlighted-50); + } + } + } + } + .pi-card { + &.pi-color__highlighted { + &.pi-color__mode--light { + @include checkIconBackgroundColor(var(--pi-color-highlighted-50)); + @include cardInternalBorders(var(--pi-color-highlighted-100)); + @include pricingCardContentColor(highlighted, white, highlighted-dark); + } + } + } + } + } +} + +@mixin pricingLayoutWidth($container-width: calc(100% - var(--pi-spacing-xx-large))) { + .pi-layout { + &.pi-layout__09-pricing { + max-width: $container-width; + margin: auto; + & > *:nth-child(4) { + & > *:nth-child(1) { + & > header { + max-width: $container-width; + margin: auto; + } + } + } + } + } +} + +.pi-layout { + &.pi-layout__09-pricing { + // Billing cycle selector + & > *:nth-child(1) { + & > *:nth-child(2) { + margin-top: var(--pi-spacing-xx-large); + & > * { + &:last-child { + margin-top: var(--pi-spacing-x-small); + } + } + } + } + + fieldset { + .pi-list-item { + &:not(.is-active) { + &:hover { + cursor: pointer; + } + } + .pi-list-item-content__right { + flex: unset; + .pi-chip { + min-width: unset; + &.pi-chip__appearance--fill { + max-height: 1.8125rem; + height: unset; + padding: var(--pi-spacing-x-small) var(--pi-spacing-xx-small); + &.pi-color__grey { + @include pricingLayoutDiscountChip; + } + &.pi-color__accent { + @include pricingLayoutDiscountChip( + var(--pi-color-accent-200), + var(--pi-color-white), + var(--pi-gradient-accent-dark) + ); + } + } + } + } + } + } + + // Pricing cards section + & > *:nth-child(2) { + .pi-card { + // Center + .pi-card-content__center { + min-height: 6rem; + margin-top: var(--pi-spacing-x-large); + padding: 0 var(--pi-spacing-xx-small); + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-small); + } + } + // Bottom + .pi-card-content__bottom { + margin-top: var(--pi-spacing-x-large); + padding-top: var(--pi-spacing-x-large); + text-align: center; + & > div { + & > span { + color: var(--pi-color-accent); + } + } + button { + margin-top: var(--pi-spacing-x-large); + } + } + // Card grey + &.pi-color__grey { + // Mode Light + &.pi-color__mode--light { + // Footer + .pi-card-content__bottom { + border-color: var(--pi-color-grey-100); + } + } + } + } + } + & > *:nth-child(4) { + // Feature card wrapper + & > div { + &:last-child { + width: 100%; + gap: var(--pi-spacing-small); + } + } + } + // Default mode card + .pi-card { + &.pi-color__grey { + &.pi-color__mode--light { + @include checkIconBackgroundColor; + @include cardInternalBorders(var(--pi-color-grey-100)); + @include pricingCardContentColor(grey, white, grey-dark); + } + } + } + } +} + +.is-company { + @include companyPricing; +} + +.is-investor { + @include investorPricing; +} +.is-advisor { + @include advisorPricing; +} + +html { + // Mobile + &.is-mobile { + @include pricingLayoutWidth; + .pi-layout { + &.pi-layout__09-pricing { + max-width: calc(100% - var(--pi-spacing-xx-large)); + margin: auto; + & > *:nth-child(1) { + fieldset + fieldset { + margin-top: var(--pi-spacing-medium); + } + } + } + } + } + + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__09-pricing { + & > *:nth-child(1) { + .pi-text-viewer { + margin: auto; + } + } + & > *:nth-child(2) { + margin-top: var(--pi-spacing-xx-large); + } + // Features + & > *:nth-child(3), + & > *:nth-child(4) { + display: none; + } + .pi-main-wrapper-content.is-sticky { + width: calc(100% + 3rem); + margin-left: -1.5rem; + padding: var(--pi-spacing-x-large); + } + } + } + + // Small device + @media screen and (max-width: 62rem) { + .pi-layout { + &.pi-layout__09-pricing { + // Pricing cards section + & > *:nth-child(2) { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: var(--pi-spacing-xx-large); + } + } + } + } + } + + // Tablet + &.is-tablet { + @include pricingLayoutWidth(calc(100% - 3rem)); + .pi-layout { + &.pi-layout__09-pricing { + & > *:nth-child(1) { + & > *:nth-child(2) { + display: flex; + gap: var(--pi-spacing-medium); + align-items: center; + justify-content: center; + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + fieldset { + max-width: 16rem; + + .pi-list-item { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: + 'item1 item2' + 'item3 .'; + height: 6.6rem; + box-shadow: var(--pi-box-shadow-panel); + .pi-list-item-icon__left { + grid-area: item1; + .pi-icon { + justify-content: flex-start; + } + } + .pi-list-item-content__left { + grid-area: item3; + } + .pi-list-item-content__right { + grid-area: item2; + text-align: -webkit-right; + } + } + } + } + } + & > *:nth-child(2) { + gap: var(--pi-spacing-medium); + max-width: calc(100% - 3rem); + margin: var(--pi-spacing-xx-large) auto; + } + } + } + // Tablet S + &.is-tablet__small { + .pi-layout { + &.pi-layout__09-pricing { + // Pricing cards section + & > *:nth-child(2) { + .pi-card { + width: 30.125rem; + max-width: 30.125rem; + } + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .is-company { + @include pricingLayoutGrid; + } + .is-investor { + @include pricingLayoutGrid; + } + .is-advisor { + @include pricingLayoutGrid(repeat(2, 1fr), repeat(1, 1fr 3fr)); + } + .pi-layout { + &.pi-layout__09-pricing { + // Pricing cards section + & > *:nth-child(2) { + .pi-card { + height: 100%; + margin: auto; + } + } + } + } + } + } + + // Desktop + &.is-desktop { + // Desktop S & M + &:not(.is-desktop__large) { + @include pricingLayoutWidth(var(--pi-public-width-container)); + } + // Desktop L + &.is-desktop__large { + @include pricingLayoutWidth(var(--pi-public-width-container-l)); + } + .pi-layout { + &.pi-layout__09-pricing { + display: grid; + grid-template-columns: 1fr 3fr; + grid-column-gap: var(--pi-spacing-medium); + grid-row-gap: var(--pi-spacing-xx-large); + margin: 0 auto; + // Billing cycle selector + & > *:nth-child(1) { + & > *:nth-child(2) { + fieldset + fieldset { + margin-top: var(--pi-spacing-medium); + } + } + } + // Pricing cards section + & > *:nth-child(2) { + gap: var(--pi-spacing-small); + } + // Features per phase + & > *:nth-child(3) { + // List of features inside each phase + article { + & > .pi-list-item { + height: calc(4.65rem + 2 * var(--pi-spacing-small)); + } + } + } + & > *:nth-child(4) { + // Sticky pricing card headers + & > div { + &:first-child { + gap: var(--pi-spacing-small); + transition: var(--pi-animation); + position: fixed; + left: 0; + top: 0; + z-index: 99; + width: 100%; + &.is-visible { + opacity: 1; + visibility: visible; + background-color: rgba($color: white, $alpha: 0.66); + @include cardInternalBorders(transparent); + .pi-card { + gap: var(--pi-spacing-x-small); + .pi-card-content__top { + header { + display: flex; + justify-content: space-between; + gap: var(--pi-spacing-xx-small); + align-items: baseline; + width: -webkit-fill-available; + padding-left: var(--pi-spacing-x-small); + padding-right: var(--pi-spacing-x-small); + .pi-text-viewer { + article { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + } + } + } + } + } + } + &:not(.is-visible) { + opacity: 0; + visibility: hidden; + height: 0; + } + + fieldset { + padding-bottom: var(--pi-spacing-xx-large); + } + } + } + // Feature card wrapper + & > div { + &:last-child { + width: 100%; + gap: var(--pi-spacing-small); + .pi-card { + border: none; + } + } + } + .pi-card { + min-height: unset; + .pi-card-content__center { + margin-top: 0; + & > article { + & > .pi-list-item { + justify-content: center; + } + } + } + + // Top + .pi-card-content__top { + align-items: flex-start; + justify-content: flex-start; + gap: var(--pi-spacing-small); + .pi-icon { + &.pi-icon__type--custom { + padding: var(--pi-spacing-xx-small); + } + } + h3 { + font: { + size: var(--pi-font-size-x-large); + weight: 700; + } + } + h4 { + font: { + size: var(--pi-font-size-small); + weight: 300; + } + } + } + // Center + .pi-card-content__center { + padding: 0 var(--pi-spacing-xx-small); + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-small); + } + + // Footer + .pi-card-content__footer { + button { + width: 100%; + font-weight: 300; + &:not(.mdc-switch):not(.pi-button__toggle) { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not( + .pi-button__x-large + ):not(.pi-button__toggle):not(.pi-button__trimmed) { + height: var(--pi-spacing-xxxx-large); + } + } + } + } + + // Demo + &.pi-color__grey { + // Mode Light + &.pi-color__mode--light { + // Top + .pi-card-content__top { + h4 { + color: var(--pi-color-grey-300); + } + } + // Center + .pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-grey-900); + } + } + } + + // Footer + .pi-card-content__footer { + border-color: var(--pi-color-grey-100); + } + + button { + color: var(--pi-color-white); + background-color: var(--pi-color-grey-900); + } + } + } + // Company pricing + &.pi-color__primary { + // Basic plan + &.pi-color__mode--light { + color: var(--pi-color-primary); + // Header + .pi-card-content__header { + h4 { + color: var(--pi-color-primary-300); + } + } + // Center + .pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-primary); + } + } + } + + button { + color: var(--pi-color-white); + background: var(--pi-gradient-primary-500-900); + } + } + // Premium plan + &.pi-color__mode--dark { + color: var(--pi-color-white); + // Center + .pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-white); + } + } + } + + button { + color: var(--pi-color-primary-1000); + background-color: var(--pi-color-white); + } + } + } + // Investor pricing + &.pi-color__accent { + // Basic plan + &.pi-color__mode--light { + color: var(--pi-color-accent); + // Top + .pi-card-content__top { + h4 { + color: var(--pi-color-accent-300); + } + } + // Center + .pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-accent); + } + } + } + .pi-card-content__bottom { + button { + color: var(--pi-color-white); + background-image: var(--pi-gradient-accent-200-300); + } + } + } + // Premium plan + &.pi-color__mode--dark { + color: var(--pi-color-white); + // Center + .pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-white); + } + } + } + + button { + color: var(--pi-color-accent); + background: var(--pi-color-white); + } + } + } + // Advisor pricing + &.pi-color__highlighted { + // Basic plan + &.pi-color__mode--light { + color: var(--pi-color-highlighted); + // Top + .pi-card-content__top { + h4 { + color: var(--pi-color-highlighted-300); + } + } + // Center + .pi-card-content__center { + .pi-text-viewer { + label, + span { + color: var(--pi-color-highlighted); + } + } + } + + button { + color: var(--pi-color-white); + background: var(--pi-gradient-highlighted-300-500); + } + } + } + } + + &.pi-color__grey { + .pi-card-content__center { + .pi-list-item { + .pi-icon { + .mat-icon { + color: var(--pi-color-grey-400); + } + } + border-color: var(--pi-color-grey-100); + } + } + } + &.pi-color__mode--dark { + .pi-card-content__center { + .pi-list-item { + .pi-icon { + .mat-icon { + color: var(--pi-color-white); + } + } + } + } + } + } + } + } + } + + // Advisor + .is-advisor { + @include pricingLayoutSpacings(3.25rem, 4.65rem); + } + // Investor & Company + .is-investor, + .is-company { + @include pricingLayoutSpacings(4.0125rem, 4.65rem); + } + } +} diff --git a/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss b/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss index 6ca77ee..d698bf1 100644 --- a/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss +++ b/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss @@ -1,64 +1,64 @@ -@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) { - .pi-shell { - &.pi-shell__deale-website { - .pi-container-layout { - .pi-layout { - &:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) { - & > *:nth-child(n + 1) { - width: $width; - max-width: $width; - margin: 0 auto; - } - } - &.pi-layout__06-edge-to-edge { - max-width: -webkit-fill-available; - } - &.pi-layout__09-pricing + .pi-layout, - &.pi-layout + .pi-layout__09-pricing { - & > *:nth-child(n + 1) { - max-width: $no-padding-width; - } - } - } - } - } - } -} - -.pi-container-layout { - display: block; -} - -html { - // Mobile - &.is-mobile { - @include containerWidth; - } - - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include containerWidth(calc(100% - 3rem), 100%); - } - // Tablet L - &.is-tablet__large { - @include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%); - } - } - - // Desktop - &.is-desktop { - // Desktop S & M - &:not(.is-desktop__large) { - @include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container)); - } - // Desktop L - &.is-desktop__large { - @include containerWidth( - var(--pi-public-width-container-l), - var(--pi-public-width-container-l) - ); - } - } -} +@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) { + .pi-shell { + &.pi-shell__deale-website { + .pi-container-layout { + .pi-layout { + &:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) { + & > *:nth-child(n + 1) { + width: $width; + max-width: $width; + margin: 0 auto; + } + } + &.pi-layout__06-edge-to-edge { + max-width: -webkit-fill-available; + } + &.pi-layout__09-pricing + .pi-layout, + &.pi-layout + .pi-layout__09-pricing { + & > *:nth-child(n + 1) { + max-width: $no-padding-width; + } + } + } + } + } + } +} + +.pi-container-layout { + display: block; +} + +html { + // Mobile + &.is-mobile { + @include containerWidth; + } + + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include containerWidth(calc(100% - 3rem), 100%); + } + // Tablet L + &.is-tablet__large { + @include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%); + } + } + + // Desktop + &.is-desktop { + // Desktop S & M + &:not(.is-desktop__large) { + @include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container)); + } + // Desktop L + &.is-desktop__large { + @include containerWidth( + var(--pi-public-width-container-l), + var(--pi-public-width-container-l) + ); + } + } +} diff --git a/libs/ui/src/lib/styles/common/layouts/_pi-layout.scss b/libs/ui/src/lib/styles/common/layouts/_pi-layout.scss index d95f74b..c8555eb 100644 --- a/libs/ui/src/lib/styles/common/layouts/_pi-layout.scss +++ b/libs/ui/src/lib/styles/common/layouts/_pi-layout.scss @@ -1,65 +1,65 @@ -@mixin layoutHeights( - $small-height: 33.33vh, - $medium-height: 40vh, - $large-height: 75vh, - $full-height: 100vh -) { - .pi-container-layout { - .pi-layout { - // 33.33vh - &.pi-layout__small { - min-height: $small-height; - } - // 33.33vh - &.pi-layout__medium { - min-height: $medium-height; - } - // 75vh - &.pi-layout__large { - min-height: $large-height; - } - // 100vh - &.pi-layout__full { - min-height: $full-height; - } - } - } -} - -.pi-container-layout { - .pi-layout { - display: block; - background-size: cover; - - & > .pi-background-image { - width: 100%; - } - - & > *:nth-child(-2n + 2) { - margin-top: var(--pi-spacing-xx-large); - } - - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-large); - } - - &.pi-layout__no-padding { - padding: 0; - } - } -} - -html { - // Mobile - &.is-mobile { - @include layoutHeights; - } - // Tablet - &.is-tablet { - @include layoutHeights(30vh, 40vh, 66.66vh, 100vh); - } - // Desktop - &.is-desktop { - @include layoutHeights(33.33vh, 50vh, 62vh, 100vh); - } -} +@mixin layoutHeights( + $small-height: 33.33vh, + $medium-height: 40vh, + $large-height: 75vh, + $full-height: 100vh +) { + .pi-container-layout { + .pi-layout { + // 33.33vh + &.pi-layout__small { + min-height: $small-height; + } + // 33.33vh + &.pi-layout__medium { + min-height: $medium-height; + } + // 75vh + &.pi-layout__large { + min-height: $large-height; + } + // 100vh + &.pi-layout__full { + min-height: $full-height; + } + } + } +} + +.pi-container-layout { + .pi-layout { + display: block; + background-size: cover; + + & > .pi-background-image { + width: 100%; + } + + & > *:nth-child(-2n + 2) { + margin-top: var(--pi-spacing-xx-large); + } + + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-large); + } + + &.pi-layout__no-padding { + padding: 0; + } + } +} + +html { + // Mobile + &.is-mobile { + @include layoutHeights; + } + // Tablet + &.is-tablet { + @include layoutHeights(30vh, 40vh, 66.66vh, 100vh); + } + // Desktop + &.is-desktop { + @include layoutHeights(33.33vh, 50vh, 62vh, 100vh); + } +} diff --git a/libs/ui/src/lib/styles/common/layouts/index.scss b/libs/ui/src/lib/styles/common/layouts/index.scss index 9279604..b078729 100644 --- a/libs/ui/src/lib/styles/common/layouts/index.scss +++ b/libs/ui/src/lib/styles/common/layouts/index.scss @@ -1,3 +1,3 @@ -@forward 'pi-09-pricing-layout'; -@forward 'pi-container-layout'; -@forward 'pi-layout'; +@forward 'pi-09-pricing-layout'; +@forward 'pi-container-layout'; +@forward 'pi-layout'; diff --git a/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss b/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss index 3fd72e8..199c928 100644 --- a/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss +++ b/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss @@ -1,271 +1,271 @@ -.ch2 { - .ch2-settings-scan { - .ch2-settings-tabs { - height: 3.3125rem; - } - } - - .ch2-theme-bar { - .ch2-dialog { - overflow-x: hidden; - padding: var(--pi-spacing-x-large); - } - } - // Override wrong primary - .ch2-style-light, - .ch2-style-dark { - .ch2-btn-primary { - all: unset; - min-width: 4.125rem; - text-align: center; - &:hover { - background: unset; - box-shadow: unset; - } - } - } - button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) { - &.ch2-btn { - min-height: var(--pi-spacing-xxx-large) !important; - &:not(.ch2-btn-primary) { - padding: var(--pi-spacing-xxxx-small) 0; - } - &.ch2-btn-primary { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small); - } - } - } - - .ch2-btn { - border: 0; - padding: var(--pi-spacing-xxxx-small) 0; - font-size: 15px; - letter-spacing: unset; - text-transform: unset; - min-height: unset !important; - box-shadow: unset; - &:hover { - box-shadow: unset; - } - &.ch2-btn-secondary { - &.ch2-allow-all-btn { - background-color: var(--pi-color-primary); - &:hover { - background-color: var(--pi-color-primary-900); - } - } - &.ch2-deny-all-btn { - background-color: var(--pi-color-warn); - &:hover { - background-color: var(--pi-color-warn-900); - } - } - } - } - .ch2-btn + .ch2-btn { - margin-left: var(--pi-spacing-x-small); - } - - .ch2-btn-primary { - &.ch2-deny-all-btn { - color: var(--pi-color-warn); - background-color: transparent; - text-decoration: underline; - &:hover { - &:enabled { - color: var(--pi-color-warn-900); - text-decoration: underline; - } - } - } - &.ch2-allow-all-btn { - width: 9rem; - color: var(--pi-color-white); - background-color: var(--pi-color-primary); - &:hover { - &:enabled { - background-color: var(--pi-color-primary-900); - } - } - } - } - .ch2-style-light { - .ch2-btn-secondary { - &:hover { - background: unset; - } - } - } - .ch2-btn-text { - color: var(--pi-color-black); - background-color: transparent; - text-decoration: underline; - &:hover { - &:enabled { - color: var(--pi-color-black); - text-decoration: underline; - } - } - &:disabled { - color: rgba($color: #3d3d3d, $alpha: 0.6); - } - } - .ch2-icon { - display: none; - position: fixed; - bottom: 2.5rem; - left: 2.5rem; - z-index: 9999; - } - .ch2-btn { - .ch2-open-settings-btn { - .ch2-btn-text { - color: var(--pi-color-warn-900); - } - } - } - .ch2-theme-bar { - .ch2-dialog-actions { - @media screen and (min-width: 30rem) { - gap: var(--pi-spacing-small); - } - - button { - &:first-child { - margin-right: unset; - } - &.ch2-btn-text-xxs { - font: { - size: var(--pi-font-size-small); - } - } - } - } - .ch2-dialog-actions-vertical { - div { - gap: var(--pi-spacing-small); - &:last-child { - button { - margin-bottom: unset !important; - margin-left: unset; - padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large); - } - } - } - } - } - .ch2-settings-content { - .ch2-settings-tab-container { - & > button { - margin-right: unset; - } - } - } - .ch2-theme-bar { - .ch2-dialog { - p { - strong { - color: var(--pi-color-grey); - font: { - size: var(--pi-font-size-small); - weight: 700; - } - } - } - } - } - .ch2-style-light { - &.ch2-icon { - a { - color: var(--pi-color-primary); - svg { - border: 0.125rem solid var(--pi-color-primary); - fill: var(--pi-color-primary); - background: var(--pi-color-white); - } - } - } - .ch2-btn-text { - color: var(--pi-color-grey); - } - .ch2-dialog-description { - margin-top: var(--pi-spacing-xxx-small); - } - .ch2-dialog-content { - p { - color: var(--pi-color-grey); - line-height: 150%; - } - } - } - .ch2-icon { - bottom: 0.375rem; - left: 0.375rem; - a { - font: { - size: var(--pi-font-size-small); - weight: unset; - } - text-transform: unset; - } - } - - @media screen and (max-width: 700px) { - .ch2-theme-bar { - .ch2-dialog-content { - text-align: center; - } - .ch2-dialog-actions { - button { - margin-top: unset; - } - } - .ch2-dialog-actions { - button { - margin-top: unset; - } - } - .ch2-dialog-actions-vertical { - display: flex; - @media (max-width: 30rem) { - flex-direction: column; - } - & > div { - display: flex; - justify-content: center; - align-items: center; - margin-top: var(--pi-spacing-large); - - &:nth-child(1) { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) { - min-width: unset; - width: 50%; - } - } - } - } - } - } - } - @media (max-width: 700px) { - .ch2-theme-bar { - .ch2-dialog-actions { - margin-top: var(--pi-spacing-xxx-small); - } - } - } - - @media screen and (min-width: 700px) { - .ch2-theme-bar { - .ch2-dialog-actions-vertical { - & > div { - &:nth-child(2) { - justify-content: flex-end; - width: -webkit-fill-available; - } - } - } - } - } -} +.ch2 { + .ch2-settings-scan { + .ch2-settings-tabs { + height: 3.3125rem; + } + } + + .ch2-theme-bar { + .ch2-dialog { + overflow-x: hidden; + padding: var(--pi-spacing-x-large); + } + } + // Override wrong primary + .ch2-style-light, + .ch2-style-dark { + .ch2-btn-primary { + all: unset; + min-width: 4.125rem; + text-align: center; + &:hover { + background: unset; + box-shadow: unset; + } + } + } + button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) { + &.ch2-btn { + min-height: var(--pi-spacing-xxx-large) !important; + &:not(.ch2-btn-primary) { + padding: var(--pi-spacing-xxxx-small) 0; + } + &.ch2-btn-primary { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small); + } + } + } + + .ch2-btn { + border: 0; + padding: var(--pi-spacing-xxxx-small) 0; + font-size: 15px; + letter-spacing: unset; + text-transform: unset; + min-height: unset !important; + box-shadow: unset; + &:hover { + box-shadow: unset; + } + &.ch2-btn-secondary { + &.ch2-allow-all-btn { + background-color: var(--pi-color-primary); + &:hover { + background-color: var(--pi-color-primary-900); + } + } + &.ch2-deny-all-btn { + background-color: var(--pi-color-warn); + &:hover { + background-color: var(--pi-color-warn-900); + } + } + } + } + .ch2-btn + .ch2-btn { + margin-left: var(--pi-spacing-x-small); + } + + .ch2-btn-primary { + &.ch2-deny-all-btn { + color: var(--pi-color-warn); + background-color: transparent; + text-decoration: underline; + &:hover { + &:enabled { + color: var(--pi-color-warn-900); + text-decoration: underline; + } + } + } + &.ch2-allow-all-btn { + width: 9rem; + color: var(--pi-color-white); + background-color: var(--pi-color-primary); + &:hover { + &:enabled { + background-color: var(--pi-color-primary-900); + } + } + } + } + .ch2-style-light { + .ch2-btn-secondary { + &:hover { + background: unset; + } + } + } + .ch2-btn-text { + color: var(--pi-color-black); + background-color: transparent; + text-decoration: underline; + &:hover { + &:enabled { + color: var(--pi-color-black); + text-decoration: underline; + } + } + &:disabled { + color: rgba($color: #3d3d3d, $alpha: 0.6); + } + } + .ch2-icon { + display: none; + position: fixed; + bottom: 2.5rem; + left: 2.5rem; + z-index: 9999; + } + .ch2-btn { + .ch2-open-settings-btn { + .ch2-btn-text { + color: var(--pi-color-warn-900); + } + } + } + .ch2-theme-bar { + .ch2-dialog-actions { + @media screen and (min-width: 30rem) { + gap: var(--pi-spacing-small); + } + + button { + &:first-child { + margin-right: unset; + } + &.ch2-btn-text-xxs { + font: { + size: var(--pi-font-size-small); + } + } + } + } + .ch2-dialog-actions-vertical { + div { + gap: var(--pi-spacing-small); + &:last-child { + button { + margin-bottom: unset !important; + margin-left: unset; + padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large); + } + } + } + } + } + .ch2-settings-content { + .ch2-settings-tab-container { + & > button { + margin-right: unset; + } + } + } + .ch2-theme-bar { + .ch2-dialog { + p { + strong { + color: var(--pi-color-grey); + font: { + size: var(--pi-font-size-small); + weight: 700; + } + } + } + } + } + .ch2-style-light { + &.ch2-icon { + a { + color: var(--pi-color-primary); + svg { + border: 0.125rem solid var(--pi-color-primary); + fill: var(--pi-color-primary); + background: var(--pi-color-white); + } + } + } + .ch2-btn-text { + color: var(--pi-color-grey); + } + .ch2-dialog-description { + margin-top: var(--pi-spacing-xxx-small); + } + .ch2-dialog-content { + p { + color: var(--pi-color-grey); + line-height: 150%; + } + } + } + .ch2-icon { + bottom: 0.375rem; + left: 0.375rem; + a { + font: { + size: var(--pi-font-size-small); + weight: unset; + } + text-transform: unset; + } + } + + @media screen and (max-width: 700px) { + .ch2-theme-bar { + .ch2-dialog-content { + text-align: center; + } + .ch2-dialog-actions { + button { + margin-top: unset; + } + } + .ch2-dialog-actions { + button { + margin-top: unset; + } + } + .ch2-dialog-actions-vertical { + display: flex; + @media (max-width: 30rem) { + flex-direction: column; + } + & > div { + display: flex; + justify-content: center; + align-items: center; + margin-top: var(--pi-spacing-large); + + &:nth-child(1) { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) { + min-width: unset; + width: 50%; + } + } + } + } + } + } + } + @media (max-width: 700px) { + .ch2-theme-bar { + .ch2-dialog-actions { + margin-top: var(--pi-spacing-xxx-small); + } + } + } + + @media screen and (min-width: 700px) { + .ch2-theme-bar { + .ch2-dialog-actions-vertical { + & > div { + &:nth-child(2) { + justify-content: flex-end; + width: -webkit-fill-available; + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss b/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss index ad2ccd3..bd52d5e 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss @@ -1,177 +1,177 @@ -@mixin checkboxColor($color) { - .mat-mdc-checkbox { - .mdc-checkbox__native-control { - // Colors by state - &:enabled { - &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { - & ~ .mdc-checkbox__background { - border-color: var(--pi-color-#{$color}) !important; - } - } - } - } - } -} - -.pi-shell, -.cdk-overlay-container { - .pi-select-option { - @include checkboxColor(primary-200); - } - @include checkboxColor(grey-100); - - // Checkbox - .mdc-checkbox__background { - border-radius: var(--pi-border-radius-x-small); - } - .mdc-checkbox__background { - border: 1px solid; - } - - .mat-mdc-checkbox { - &.mat-accent { - --mdc-checkbox-selected-checkmark-color: #3d3d3d; - --mdc-checkbox-selected-focus-icon-color: #799ef0; - --mdc-checkbox-selected-hover-icon-color: #799ef0; - --mdc-checkbox-selected-icon-color: #799ef0; - --mdc-checkbox-selected-pressed-icon-color: #799ef0; - --mdc-checkbox-unselected-focus-icon-color: #3d3d3d; - --mdc-checkbox-unselected-hover-icon-color: #3d3d3d; - --mdc-checkbox-disabled-selected-icon-color: rgba(196, 213, 255, 0.15); - --mdc-checkbox-disabled-unselected-icon-color: rgba(196, 213, 255, 0.15); - --mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0); - --mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15); - --mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1); - } - .mdc-checkbox__ripple { - background: var(--pi-color-primary-200-rgba); - } - .mdc-form-field { - gap: var(--pi-spacing-xx-small); - color: var(--pi-color-black); - } - .mdc-checkbox { - padding: calc( - (var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2 - ); - margin: calc( - ( - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - ) / 2 - ); - .mdc-checkbox__background { - top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2); - left: calc( - (var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2 - ); - } - .mdc-checkbox__native-control { - top: calc( - ( - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - ) / 2 - ); - right: calc( - ( - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - ) / 2 - ); - left: calc( - ( - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - - var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - ) / 2 - ); - width: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)); - height: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)); - - // Colors by state - &:enabled { - &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { - & ~ .mdc-checkbox__background { - border: 1px solid; - } - } - &:checked { - & ~ .mdc-checkbox__background { - border-color: var(--pi-color-primary); - background-color: var(--pi-color-white); - } - } - & ~ .mdc-checkbox__background { - .mdc-checkbox__checkmark { - color: var(--pi-color-primary); - transform: scale(0.7); - .mdc-checkbox__checkmark-path { - stroke-width: 0.3125rem; - } - } - } - } - } - &:hover { - .mdc-checkbox__native-control { - &:enabled { - &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { - & ~ .mdc-checkbox__background { - border-color: var(--pi-color-primary); - } - } - &:checked { - & ~ .mdc-checkbox__background { - border-color: var(--pi-color-primary); - background-color: var(--pi-color-white); - } - } - } - } - } - } - // Checked - &.mat-mdc-checkbox-checked { - .mdc-checkbox { - background-color: var(--pi-color-primary-50); - border-radius: 0.4375rem; - } - } - } - - // Pseudo checkbox - .mat-pseudo-checkbox { - border-radius: var(--pi-border-radius-x-small); - } - .mat-pseudo-checkbox-full { - border: 0.0625rem solid; - } - .mat-pseudo-checkbox-full { - &.mat-pseudo-checkbox-checked { - &::after { - content: ''; - top: -2px; - height: 0.2188rem; - width: 0.4rem; - } - &::before { - content: ''; - position: absolute; - top: -0.25rem; - left: -0.25rem; - z-index: -1; - height: var(--pi-spacing-x-large); - width: var(--pi-spacing-x-large); - padding: var(--pi-spacing-xxx-small); - border-radius: 0.4375rem; - border-color: var(--pi-color-primary); - background-color: var(--pi-color-primary-50); - } - } - } - - .mat-mdc-checkbox-ripple, - .mdc-checkbox__ripple { - display: none; - } -} +@mixin checkboxColor($color) { + .mat-mdc-checkbox { + .mdc-checkbox__native-control { + // Colors by state + &:enabled { + &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { + & ~ .mdc-checkbox__background { + border-color: var(--pi-color-#{$color}) !important; + } + } + } + } + } +} + +.pi-shell, +.cdk-overlay-container { + .pi-select-option { + @include checkboxColor(primary-200); + } + @include checkboxColor(grey-100); + + // Checkbox + .mdc-checkbox__background { + border-radius: var(--pi-border-radius-x-small); + } + .mdc-checkbox__background { + border: 1px solid; + } + + .mat-mdc-checkbox { + &.mat-accent { + --mdc-checkbox-selected-checkmark-color: #3d3d3d; + --mdc-checkbox-selected-focus-icon-color: #799ef0; + --mdc-checkbox-selected-hover-icon-color: #799ef0; + --mdc-checkbox-selected-icon-color: #799ef0; + --mdc-checkbox-selected-pressed-icon-color: #799ef0; + --mdc-checkbox-unselected-focus-icon-color: #3d3d3d; + --mdc-checkbox-unselected-hover-icon-color: #3d3d3d; + --mdc-checkbox-disabled-selected-icon-color: rgba(196, 213, 255, 0.15); + --mdc-checkbox-disabled-unselected-icon-color: rgba(196, 213, 255, 0.15); + --mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0); + --mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15); + --mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1); + } + .mdc-checkbox__ripple { + background: var(--pi-color-primary-200-rgba); + } + .mdc-form-field { + gap: var(--pi-spacing-xx-small); + color: var(--pi-color-black); + } + .mdc-checkbox { + padding: calc( + (var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2 + ); + margin: calc( + ( + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) + ) / 2 + ); + .mdc-checkbox__background { + top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2); + left: calc( + (var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2 + ); + } + .mdc-checkbox__native-control { + top: calc( + ( + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) + ) / 2 + ); + right: calc( + ( + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) + ) / 2 + ); + left: calc( + ( + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - + var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) + ) / 2 + ); + width: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)); + height: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)); + + // Colors by state + &:enabled { + &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { + & ~ .mdc-checkbox__background { + border: 1px solid; + } + } + &:checked { + & ~ .mdc-checkbox__background { + border-color: var(--pi-color-primary); + background-color: var(--pi-color-white); + } + } + & ~ .mdc-checkbox__background { + .mdc-checkbox__checkmark { + color: var(--pi-color-primary); + transform: scale(0.7); + .mdc-checkbox__checkmark-path { + stroke-width: 0.3125rem; + } + } + } + } + } + &:hover { + .mdc-checkbox__native-control { + &:enabled { + &:not(:checked):not(:indeterminate):not([data-indeterminate='true']) { + & ~ .mdc-checkbox__background { + border-color: var(--pi-color-primary); + } + } + &:checked { + & ~ .mdc-checkbox__background { + border-color: var(--pi-color-primary); + background-color: var(--pi-color-white); + } + } + } + } + } + } + // Checked + &.mat-mdc-checkbox-checked { + .mdc-checkbox { + background-color: var(--pi-color-primary-50); + border-radius: 0.4375rem; + } + } + } + + // Pseudo checkbox + .mat-pseudo-checkbox { + border-radius: var(--pi-border-radius-x-small); + } + .mat-pseudo-checkbox-full { + border: 0.0625rem solid; + } + .mat-pseudo-checkbox-full { + &.mat-pseudo-checkbox-checked { + &::after { + content: ''; + top: -2px; + height: 0.2188rem; + width: 0.4rem; + } + &::before { + content: ''; + position: absolute; + top: -0.25rem; + left: -0.25rem; + z-index: -1; + height: var(--pi-spacing-x-large); + width: var(--pi-spacing-x-large); + padding: var(--pi-spacing-xxx-small); + border-radius: 0.4375rem; + border-color: var(--pi-color-primary); + background-color: var(--pi-color-primary-50); + } + } + } + + .mat-mdc-checkbox-ripple, + .mdc-checkbox__ripple { + display: none; + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss b/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss index 6efb17e..3df53ea 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss @@ -1,49 +1,49 @@ -.pi-layout { - .mat-mdc-chip { - &.mat-mdc-standard-chip { - color: var(--pi-color-primary); - padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small) - var(--pi-spacing-medium); - gap: var(--pi-spacing-xxxx-small); - background-color: transparent; - border: 1px solid; - border-color: var(--pi-color-primary); - .pi-button__icon { - max-height: 0.3125rem; - figure { - width: var(--pi-spacing-small); - transition: all 0.2s ease-in-out; - } - } - &:hover { - cursor: pointer; - &::after { - opacity: 0; - } - .pi-button__icon { - figure { - transform: rotate(90deg); - } - } - } - } - - button { - &.pi-button { - &.pi-button__primary { - &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( - .pi-button__white - ) { - background-color: transparent; - } - } - } - } - } - .mat-mdc-chip-ripple { - font: { - size: var(--pi-font-size-medium); - weight: 300; - } - } -} +.pi-layout { + .mat-mdc-chip { + &.mat-mdc-standard-chip { + color: var(--pi-color-primary); + padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small) + var(--pi-spacing-medium); + gap: var(--pi-spacing-xxxx-small); + background-color: transparent; + border: 1px solid; + border-color: var(--pi-color-primary); + .pi-button__icon { + max-height: 0.3125rem; + figure { + width: var(--pi-spacing-small); + transition: all 0.2s ease-in-out; + } + } + &:hover { + cursor: pointer; + &::after { + opacity: 0; + } + .pi-button__icon { + figure { + transform: rotate(90deg); + } + } + } + } + + button { + &.pi-button { + &.pi-button__primary { + &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not( + .pi-button__white + ) { + background-color: transparent; + } + } + } + } + } + .mat-mdc-chip-ripple { + font: { + size: var(--pi-font-size-medium); + weight: 300; + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss b/libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss index 1f15cb7..3733549 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss @@ -1,292 +1,292 @@ -@mixin mainContentHeight { - .pi-modal__main-content { - display: block; - & > *:first-child { - display: flex; - flex-direction: column; - justify-content: space-between; - overflow: hidden; - padding: 0; - } - // Custom - &.pi-modal__main-content--custom-template { - & > *:first-child { - min-height: 60vh; - } - } - // Dialog - &.pi-modal__main-content--dialog-template { - } - } -} - -@mixin modalScrollBar { - &::-webkit-scrollbar { - width: var(--pi-spacing-xxxx-small); - } - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba($color: #aeaeb6, $alpha: 0.3); - border-radius: var(--pi-border-radius-small); - &:hover { - background-color: darken($color: #aeaeb6, $amount: 0.5); - } - } -} -.cdk-overlay-container, -.pi-shell { - .mdc-dialog__container { - display: flex; - align-items: stretch; - justify-content: center; - padding: 0; - border-radius: var(--pi-border-radius-medium); - box-shadow: unset; - overflow: hidden; - overflow-y: auto; - .mdc-dialog__surface { - display: flex; - flex-direction: column; - flex-grow: 1; - height: 100%; - box-shadow: unset; - } - } -} -.pi-modal__panel { - .pi-modal { - &:not(.pi-modal__custom) { - .pi-headline { - figure { - max-width: 10rem; - } - } - } - &.pi-modal__dialog { - .pi-panel__grey { - max-width: 75%; - margin: 0 auto; - } - } - - .pi-modal__main-content { - // Main DIALOG content - &.pi-modal__main-content--dialog-template { - & > .pi-modal__custom-template { - display: flex; - flex-direction: column; - height: 100%; - & > *:nth-child(1) { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-x-large); - flex-grow: 1; - overflow-y: auto; - @include modalScrollBar; - } - & > *:nth-child(2) { - height: var(--pi-height-footer); - } - } - } - - // Main CUSTOM content - &.pi-modal__main-content--custom-template { - & > .pi-modal__custom-template { - display: flex; - flex-direction: column; - height: 100%; - & > *:nth-child(1) { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-x-large); - flex-grow: 1; - overflow-y: auto; - - @include modalScrollBar; - - & > *:nth-child(n + 1) { - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - } - } - & > *:nth-child(2) { - height: 5.5rem; - } - } - } - } - } - - .mat-mdc-checkbox-layout { - white-space: unset; - } - // Full - &.pi-modal__panel--full { - width: 90vw; - height: 90vh; - .mat-mdc-dialog-container { - border-radius: var(--pi-border-radius-large); - } - } -} - -// Backdrop -.pi-backdrop { - background: rgba(0, 0, 0, 0.4); -} - -html { - // Mobile - &.is-mobile { - .pi-modal { - & > .pi-headline { - gap: var(--pi-spacing-medium); - } - @include mainContentHeight; - } - // Panel - .pi-modal__panel { - // Small | Medium - &.pi-modal__panel--small, - &.pi-modal__panel--medium { - width: 83vw; - - .pi-modal__main-content { - // Main CUSTOM content - &.pi-modal__main-content--custom-template { - & > .pi-modal__custom-template { - & > *:nth-child(1) { - max-height: calc(85vh - var(--pi-height-footer) - 5rem); - } - } - } - } - } - // Action wrapper - .pi-wrapper { - &.pi-wrapper__action { - background-color: rgba(255, 255, 255, 0.8); - box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4); - } - } - } - .pi-modal__main-content { - &.pi-modal__main-content--custom-template { - video { - max-width: 85%; - margin: auto; - } - } - } - } - - // Tablet - &.is-tablet { - .pi-modal__panel { - @include mainContentHeight; - // Small - &.pi-modal__panel--small { - width: 50vw; - } - - // Medium - &.pi-modal__panel--medium { - width: 70vw; - } - } - - &.is-tablet__small { - .pi-modal__main-content { - &.pi-modal__main-content--custom-template { - video { - max-width: 75%; - margin: auto; - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - .pi-modal { - // Type Custom - &.pi-modal__custom { - // Is Closable - &.pi-modal__is-closable { - } - - // Is Not Closable - &:not(.pi-modal__is-closable) { - .pi-modal__custom--inner { - main { - & > *:nth-child(2) { - display: flex; - flex-direction: column; - justify-content: center; - } - } - } - } - } - // Type Dialog - &.pi-modal__dialog { - // Is Closable - &.pi-modal__is-closable { - } - // Is Not Closable - &:not(.pi-modal__is-closable) { - & > main { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - } - } - } - } - // Large device - @media screen and (min-width: 62rem) { - .pi-modal__main-content { - &.pi-modal__main-content--custom-template { - height: 100%; - - video { - max-width: 66.66%; - margin: auto; - } - } - } - } - } - - // Desktop - &.is-desktop { - .pi-modal { - // Type Dialog - &.pi-modal__dialog { - & > main { - & > .pi-headline + section { - margin-top: var(--pi-spacing-x-large); - } - } - } - @include mainContentHeight; - } - .pi-modal__panel { - // Small - &.pi-modal__panel--small { - width: 28vw; - } - - // Medium - &.pi-modal__panel--medium { - width: 37vw; - } - } - } -} +@mixin mainContentHeight { + .pi-modal__main-content { + display: block; + & > *:first-child { + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; + padding: 0; + } + // Custom + &.pi-modal__main-content--custom-template { + & > *:first-child { + min-height: 60vh; + } + } + // Dialog + &.pi-modal__main-content--dialog-template { + } + } +} + +@mixin modalScrollBar { + &::-webkit-scrollbar { + width: var(--pi-spacing-xxxx-small); + } + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba($color: #aeaeb6, $alpha: 0.3); + border-radius: var(--pi-border-radius-small); + &:hover { + background-color: darken($color: #aeaeb6, $amount: 0.5); + } + } +} +.cdk-overlay-container, +.pi-shell { + .mdc-dialog__container { + display: flex; + align-items: stretch; + justify-content: center; + padding: 0; + border-radius: var(--pi-border-radius-medium); + box-shadow: unset; + overflow: hidden; + overflow-y: auto; + .mdc-dialog__surface { + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + box-shadow: unset; + } + } +} +.pi-modal__panel { + .pi-modal { + &:not(.pi-modal__custom) { + .pi-headline { + figure { + max-width: 10rem; + } + } + } + &.pi-modal__dialog { + .pi-panel__grey { + max-width: 75%; + margin: 0 auto; + } + } + + .pi-modal__main-content { + // Main DIALOG content + &.pi-modal__main-content--dialog-template { + & > .pi-modal__custom-template { + display: flex; + flex-direction: column; + height: 100%; + & > *:nth-child(1) { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-x-large); + flex-grow: 1; + overflow-y: auto; + @include modalScrollBar; + } + & > *:nth-child(2) { + height: var(--pi-height-footer); + } + } + } + + // Main CUSTOM content + &.pi-modal__main-content--custom-template { + & > .pi-modal__custom-template { + display: flex; + flex-direction: column; + height: 100%; + & > *:nth-child(1) { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-x-large); + flex-grow: 1; + overflow-y: auto; + + @include modalScrollBar; + + & > *:nth-child(n + 1) { + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + } + } + & > *:nth-child(2) { + height: 5.5rem; + } + } + } + } + } + + .mat-mdc-checkbox-layout { + white-space: unset; + } + // Full + &.pi-modal__panel--full { + width: 90vw; + height: 90vh; + .mat-mdc-dialog-container { + border-radius: var(--pi-border-radius-large); + } + } +} + +// Backdrop +.pi-backdrop { + background: rgba(0, 0, 0, 0.4); +} + +html { + // Mobile + &.is-mobile { + .pi-modal { + & > .pi-headline { + gap: var(--pi-spacing-medium); + } + @include mainContentHeight; + } + // Panel + .pi-modal__panel { + // Small | Medium + &.pi-modal__panel--small, + &.pi-modal__panel--medium { + width: 83vw; + + .pi-modal__main-content { + // Main CUSTOM content + &.pi-modal__main-content--custom-template { + & > .pi-modal__custom-template { + & > *:nth-child(1) { + max-height: calc(85vh - var(--pi-height-footer) - 5rem); + } + } + } + } + } + // Action wrapper + .pi-wrapper { + &.pi-wrapper__action { + background-color: rgba(255, 255, 255, 0.8); + box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4); + } + } + } + .pi-modal__main-content { + &.pi-modal__main-content--custom-template { + video { + max-width: 85%; + margin: auto; + } + } + } + } + + // Tablet + &.is-tablet { + .pi-modal__panel { + @include mainContentHeight; + // Small + &.pi-modal__panel--small { + width: 50vw; + } + + // Medium + &.pi-modal__panel--medium { + width: 70vw; + } + } + + &.is-tablet__small { + .pi-modal__main-content { + &.pi-modal__main-content--custom-template { + video { + max-width: 75%; + margin: auto; + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + .pi-modal { + // Type Custom + &.pi-modal__custom { + // Is Closable + &.pi-modal__is-closable { + } + + // Is Not Closable + &:not(.pi-modal__is-closable) { + .pi-modal__custom--inner { + main { + & > *:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + } + } + } + } + } + // Type Dialog + &.pi-modal__dialog { + // Is Closable + &.pi-modal__is-closable { + } + // Is Not Closable + &:not(.pi-modal__is-closable) { + & > main { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } + } + } + } + // Large device + @media screen and (min-width: 62rem) { + .pi-modal__main-content { + &.pi-modal__main-content--custom-template { + height: 100%; + + video { + max-width: 66.66%; + margin: auto; + } + } + } + } + } + + // Desktop + &.is-desktop { + .pi-modal { + // Type Dialog + &.pi-modal__dialog { + & > main { + & > .pi-headline + section { + margin-top: var(--pi-spacing-x-large); + } + } + } + @include mainContentHeight; + } + .pi-modal__panel { + // Small + &.pi-modal__panel--small { + width: 28vw; + } + + // Medium + &.pi-modal__panel--medium { + width: 37vw; + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss b/libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss index 7f14a24..157cab2 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss @@ -1,13 +1,13 @@ -.pi-shell__deale-saas { - .mat-mdc-expansion-panel { - &:not([class*='mat-elevation-z']) { - box-shadow: unset; - } - } - .mat-mdc-expansion-panel-header { - border-bottom: 1px solid var(--pi-color-background-400); - } - .mat-mdc-expansion-panel-body { - padding: var(--pi-spacing-xx-large); - } -} +.pi-shell__deale-saas { + .mat-mdc-expansion-panel { + &:not([class*='mat-elevation-z']) { + box-shadow: unset; + } + } + .mat-mdc-expansion-panel-header { + border-bottom: 1px solid var(--pi-color-background-400); + } + .mat-mdc-expansion-panel-body { + padding: var(--pi-spacing-xx-large); + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss b/libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss index 3b03a1e..48151d4 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss @@ -1,428 +1,428 @@ -// Appearance outline -@mixin matFormFieldOutline() { - // Appearance Outline - .mat-form-field-appearance-outline { - .mat-mdc-form-field-infix { - transform: translateX(-0.75rem); - } - .mat-mdc-form-field-infix { - min-height: unset; - } - // Focused - &.mat-focused { - [class*='mdc-notched-outline__'] { - max-width: unset; - width: var(--pi-spacing-small); - border-width: 1px; - } - } - - // NOT Invalid - &:not(.mat-form-field-invalid) { - &:not(.mat-focused) { - .mat-mdc-form-field-icon-suffix, - .mat-mdc-form-field-icon-prefix { - color: var(--pi-color-grey-300); - } - } - } - - .mdc-notched-outline { - .mdc-floating-label { - height: var(--pi-spacing-xxxx-large); - } - } - .mdc-text-field { - &:not(.mat-form-field-no-animations) { - .mdc-floating-label { - transform: translate(0, -3rem) scale(1); - } - } - } - - .mat-mdc-form-field-flex { - padding: 0 var(--pi-spacing-small); - } - - .mdc-notched-outline__leading { - border-radius: 0.875rem 0 0 0.875rem; - } - .mdc-notched-outline__trailing { - border-radius: 0 0.875rem 0.875rem 0; - } - - .mat-mdc-form-field-label { - margin-left: var(--pi-spacing-xxxx-small); - margin-right: var(--pi-spacing-xxxx-small); - } - - .mat-mdc-form-field-prefix, - .mat-mdc-form-field-suffix { - top: unset; - height: 100%; - .pi-icon__small { - .mat-icon { - height: var(--pi-spacing-x-large); - } - } - } - - .mat-mdc-form-field-infix { - flex: auto; - min-width: 0; - width: 11.25rem; - position: relative; - box-sizing: border-box; - height: var(--pi-spacing-xxxx-large); - } - - input { - &.mat-mdc-input-element { - height: calc(var(--pi-spacing-xxxx-large) - 0.125rem); - margin-top: 0.0625rem; - } - } - - &.mdc-text-field--disabled { - .mat-mdc-input-element, - .mdc-notched-outline, - .mat-icon { - color: var(--pi-color-grey-300); - } - } - - // Invalid - &.mat-form-field-invalid { - .mat-mdc-form-field-subscript-wrapper { - height: var(--pi-spacing-x-large); - } - } - // NOT Invalid - &:not(.mat-form-field-invalid) { - .mat-mdc-form-field-subscript-wrapper { - height: var(--pi-spacing-x-small); - } - } - - // Outline & default - &:not(.mat-focused):not(.mat-form-field-invalid) { - &:not(.mdc-text-field--disabled) { - [class*='mdc-notched-outline__'] { - border-color: var(--pi-color-grey-200); - } - } - &:hover { - &:not(.mdc-text-field--disabled) { - [class*='mdc-notched-outline__'] { - border-color: var(--pi-color-grey-300); - } - } - } - } - // Outline & Invalid - &.mat-focused { - &:not(.mdc-text-field--disabled) { - [class*='mdc-notched-outline__'] { - border-color: var(--pi-color-primary); - } - } - } - // Outline & Invalid - &.mat-form-field-invalid { - &:not(.mdc-text-field--disabled) { - [class*='mdc-notched-outline__'] { - border-color: var(--pi-color-warn); - } - } - } - } -} - -// Appearance fill -@mixin matFormFieldFill() { - .mat-form-field-appearance-fill { - .mat-mdc-text-field-wrapper { - height: unset; - flex: unset; - &:not(.mdc-text-field--outlined) { - .mat-mdc-form-field-infix { - padding-top: unset; - padding-bottom: unset; - } - } - } - // NOT Invalid - &:not(.mat-form-field-invalid) { - &:not(.mat-focused) { - .mat-mdc-form-field-icon-suffix, - .mat-mdc-form-field-icon-prefix { - color: var(--pi-color-grey-900); - } - } - } - .mdc-text-field { - padding: unset; - } - .mat-mdc-form-field-infix { - width: 100%; - } - .mdc-text-field--filled { - .mdc-line-ripple { - &::after { - border-bottom-width: 1px; - } - } - - &.mdc-text-field--disabled { - .mdc-line-ripple { - &::before { - border-bottom-color: transparent; - } - } - } - .mdc-floating-label--float-above { - transform: translateY(-100%) scale(1); - } - } - - .mdc-text-field--filled { - background-color: var(--pi-color-white); - &:not(.mdc-text-field--disabled) { - background-color: transparent; - } - } - - &.mdc-text-field--disable { - .mdc-line-ripple { - background-image: unset; - background-size: unset; - background-repeat: unset; - } - } - .mat-mdc-floating-label { - font: { - size: var(--pi-font-size-x-small); - } - } - - .mat-mdc-form-field-subscript-wrapper { - display: none; - } - } -} - -// State colors -@mixin matFormFieldStateColors { - .mdc-text-field { - &:not(.mdc-text-field--disabled) { - .mdc-text-field__input { - color: var(--pi-color-black); - } - } - &:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { - .mdc-floating-label { - color: var(--pi-color-grey-300); - } - } - &.mdc-text-field--invalid { - &:not(.mdc-text-field--disabled) { - .mdc-floating-label { - color: var(--pi-color-warn); - } - } - } - } - - // Invalid - &.mat-form-field-invalid { - .mat-mdc-form-field-icon-suffix, - .mat-mdc-form-field-icon-prefix, - .mat-mdc-form-field-infix { - color: var(--pi-color-warn); - } - // Focused - &.mat-focused { - .mat-mdc-form-field-icon-suffix, - .mat-mdc-form-field-icon-prefix, - .mat-mdc-form-field-infix { - color: var(--pi-color-warn); - } - } - } - // NOT Invalid - &:not(.mat-form-field-invalid) { - // Focused - &.mat-focused { - .mat-mdc-form-field-icon-suffix, - .mat-mdc-form-field-icon-prefix, - .mat-mdc-form-field-infix { - color: var(--pi-color-primary); - } - } - } - - .mat-mdc-form-field-error { - color: var(--pi-color-warn); - } - // NOT Has Error - &:not(.has-error) { - // Type Fill - .mat-form-field-appearance-fill { - .mdc-text-field--filled { - &:not(.mdc-text-field--disabled) { - .mdc-line-ripple { - &::before { - border-bottom-color: var(--pi-color-grey-100); - } - } - &:hover { - .mdc-line-ripple { - &::before { - border-bottom-color: var(--pi-color-grey-200); - } - } - } - } - } - } - } - // Has Error - &.has-error { - // Type Fill - .mat-form-field-appearance-fill { - .mdc-text-field--filled { - &:not(.mdc-text-field--disabled) { - .mdc-line-ripple { - &::before { - border-bottom-color: var(--pi-color-warn-200); - } - } - &:hover { - .mdc-line-ripple { - &::before { - border-bottom-color: var(--pi-color-warn); - } - } - } - } - } - } - } - // Placeholder - .mat-mdc-form-field-infix { - .mat-mdc-input-element { - &::placeholder { - color: var(--pi-color-grey-300); - -webkit-text-fill-color: var(--pi-color-grey-300); - } - } - } -} - -.pi-shell, -.cdk-overlay-container { - .pi-field { - // Common - .mat-mdc-form-field { - width: 100%; - line-height: 1.65; - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - } - &:focus, - &:hover { - background: none; - } - - [class*='mdc-notched-outline__'] { - background-color: var(--pi-color-white); - z-index: -99; - } - - .mat-mdc-form-field-focus-overlay { - background-color: unset; - } - - // Outlined - .mdc-text-field--outlined { - .mdc-notched-outline { - z-index: -99; - } - .mdc-notched-outline--upgraded { - .mdc-floating-label--float-above { - font : { - size: var(--pi-font-size-x-small); - } - } - } - } - - .mdc-notched-outline--notched { - margin-left: unset; - -webkit-clip-path: unset; - clip-path: unset; - .mdc-notched-outline__notch { - border-top: 1px solid; - } - } - - .mat-mdc-form-field-subscript-wrapper { - display: flex; - } - - .mat-mdc-text-field-wrapper { - &.mdc-text-field--outlined { - .mat-mdc-form-field-infix { - padding-top: 0; - padding-bottom: 0; - } - } - } - } - - // Appearance - // Outline - @include matFormFieldOutline; - - // Fill - @include matFormFieldFill; - - // State colors - @include matFormFieldStateColors; - - // Affix - .mat-mdc-form-field-prefix, - .mat-mdc-form-field-suffix { - .mat-icon { - line-height: 100%; - } - } - - // Error - .mat-mdc-form-field-error { - font : { - size: var(--pi-font-size-x-small); - } - } - - // Hint & Error - .mat-mdc-form-field-hint-wrapper, - .mat-mdc-form-field-error-wrapper { - padding: 0 var(--pi-spacing-xx-small); - } - // Exclude incremental - &:not(.pi-form-field__incremental) { - // Type Fill - .mat-form-field-appearance-fill { - input { - &.mat-mdc-input-element { - all: unset; - height: unset; - width: -webkit-fill-available; - margin-top: 1.875rem; - } - } - } - } - } -} +// Appearance outline +@mixin matFormFieldOutline() { + // Appearance Outline + .mat-form-field-appearance-outline { + .mat-mdc-form-field-infix { + transform: translateX(-0.75rem); + } + .mat-mdc-form-field-infix { + min-height: unset; + } + // Focused + &.mat-focused { + [class*='mdc-notched-outline__'] { + max-width: unset; + width: var(--pi-spacing-small); + border-width: 1px; + } + } + + // NOT Invalid + &:not(.mat-form-field-invalid) { + &:not(.mat-focused) { + .mat-mdc-form-field-icon-suffix, + .mat-mdc-form-field-icon-prefix { + color: var(--pi-color-grey-300); + } + } + } + + .mdc-notched-outline { + .mdc-floating-label { + height: var(--pi-spacing-xxxx-large); + } + } + .mdc-text-field { + &:not(.mat-form-field-no-animations) { + .mdc-floating-label { + transform: translate(0, -3rem) scale(1); + } + } + } + + .mat-mdc-form-field-flex { + padding: 0 var(--pi-spacing-small); + } + + .mdc-notched-outline__leading { + border-radius: 0.875rem 0 0 0.875rem; + } + .mdc-notched-outline__trailing { + border-radius: 0 0.875rem 0.875rem 0; + } + + .mat-mdc-form-field-label { + margin-left: var(--pi-spacing-xxxx-small); + margin-right: var(--pi-spacing-xxxx-small); + } + + .mat-mdc-form-field-prefix, + .mat-mdc-form-field-suffix { + top: unset; + height: 100%; + .pi-icon__small { + .mat-icon { + height: var(--pi-spacing-x-large); + } + } + } + + .mat-mdc-form-field-infix { + flex: auto; + min-width: 0; + width: 11.25rem; + position: relative; + box-sizing: border-box; + height: var(--pi-spacing-xxxx-large); + } + + input { + &.mat-mdc-input-element { + height: calc(var(--pi-spacing-xxxx-large) - 0.125rem); + margin-top: 0.0625rem; + } + } + + &.mdc-text-field--disabled { + .mat-mdc-input-element, + .mdc-notched-outline, + .mat-icon { + color: var(--pi-color-grey-300); + } + } + + // Invalid + &.mat-form-field-invalid { + .mat-mdc-form-field-subscript-wrapper { + height: var(--pi-spacing-x-large); + } + } + // NOT Invalid + &:not(.mat-form-field-invalid) { + .mat-mdc-form-field-subscript-wrapper { + height: var(--pi-spacing-x-small); + } + } + + // Outline & default + &:not(.mat-focused):not(.mat-form-field-invalid) { + &:not(.mdc-text-field--disabled) { + [class*='mdc-notched-outline__'] { + border-color: var(--pi-color-grey-200); + } + } + &:hover { + &:not(.mdc-text-field--disabled) { + [class*='mdc-notched-outline__'] { + border-color: var(--pi-color-grey-300); + } + } + } + } + // Outline & Invalid + &.mat-focused { + &:not(.mdc-text-field--disabled) { + [class*='mdc-notched-outline__'] { + border-color: var(--pi-color-primary); + } + } + } + // Outline & Invalid + &.mat-form-field-invalid { + &:not(.mdc-text-field--disabled) { + [class*='mdc-notched-outline__'] { + border-color: var(--pi-color-warn); + } + } + } + } +} + +// Appearance fill +@mixin matFormFieldFill() { + .mat-form-field-appearance-fill { + .mat-mdc-text-field-wrapper { + height: unset; + flex: unset; + &:not(.mdc-text-field--outlined) { + .mat-mdc-form-field-infix { + padding-top: unset; + padding-bottom: unset; + } + } + } + // NOT Invalid + &:not(.mat-form-field-invalid) { + &:not(.mat-focused) { + .mat-mdc-form-field-icon-suffix, + .mat-mdc-form-field-icon-prefix { + color: var(--pi-color-grey-900); + } + } + } + .mdc-text-field { + padding: unset; + } + .mat-mdc-form-field-infix { + width: 100%; + } + .mdc-text-field--filled { + .mdc-line-ripple { + &::after { + border-bottom-width: 1px; + } + } + + &.mdc-text-field--disabled { + .mdc-line-ripple { + &::before { + border-bottom-color: transparent; + } + } + } + .mdc-floating-label--float-above { + transform: translateY(-100%) scale(1); + } + } + + .mdc-text-field--filled { + background-color: var(--pi-color-white); + &:not(.mdc-text-field--disabled) { + background-color: transparent; + } + } + + &.mdc-text-field--disable { + .mdc-line-ripple { + background-image: unset; + background-size: unset; + background-repeat: unset; + } + } + .mat-mdc-floating-label { + font: { + size: var(--pi-font-size-x-small); + } + } + + .mat-mdc-form-field-subscript-wrapper { + display: none; + } + } +} + +// State colors +@mixin matFormFieldStateColors { + .mdc-text-field { + &:not(.mdc-text-field--disabled) { + .mdc-text-field__input { + color: var(--pi-color-black); + } + } + &:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { + .mdc-floating-label { + color: var(--pi-color-grey-300); + } + } + &.mdc-text-field--invalid { + &:not(.mdc-text-field--disabled) { + .mdc-floating-label { + color: var(--pi-color-warn); + } + } + } + } + + // Invalid + &.mat-form-field-invalid { + .mat-mdc-form-field-icon-suffix, + .mat-mdc-form-field-icon-prefix, + .mat-mdc-form-field-infix { + color: var(--pi-color-warn); + } + // Focused + &.mat-focused { + .mat-mdc-form-field-icon-suffix, + .mat-mdc-form-field-icon-prefix, + .mat-mdc-form-field-infix { + color: var(--pi-color-warn); + } + } + } + // NOT Invalid + &:not(.mat-form-field-invalid) { + // Focused + &.mat-focused { + .mat-mdc-form-field-icon-suffix, + .mat-mdc-form-field-icon-prefix, + .mat-mdc-form-field-infix { + color: var(--pi-color-primary); + } + } + } + + .mat-mdc-form-field-error { + color: var(--pi-color-warn); + } + // NOT Has Error + &:not(.has-error) { + // Type Fill + .mat-form-field-appearance-fill { + .mdc-text-field--filled { + &:not(.mdc-text-field--disabled) { + .mdc-line-ripple { + &::before { + border-bottom-color: var(--pi-color-grey-100); + } + } + &:hover { + .mdc-line-ripple { + &::before { + border-bottom-color: var(--pi-color-grey-200); + } + } + } + } + } + } + } + // Has Error + &.has-error { + // Type Fill + .mat-form-field-appearance-fill { + .mdc-text-field--filled { + &:not(.mdc-text-field--disabled) { + .mdc-line-ripple { + &::before { + border-bottom-color: var(--pi-color-warn-200); + } + } + &:hover { + .mdc-line-ripple { + &::before { + border-bottom-color: var(--pi-color-warn); + } + } + } + } + } + } + } + // Placeholder + .mat-mdc-form-field-infix { + .mat-mdc-input-element { + &::placeholder { + color: var(--pi-color-grey-300); + -webkit-text-fill-color: var(--pi-color-grey-300); + } + } + } +} + +.pi-shell, +.cdk-overlay-container { + .pi-field { + // Common + .mat-mdc-form-field { + width: 100%; + line-height: 1.65; + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + } + &:focus, + &:hover { + background: none; + } + + [class*='mdc-notched-outline__'] { + background-color: var(--pi-color-white); + z-index: -99; + } + + .mat-mdc-form-field-focus-overlay { + background-color: unset; + } + + // Outlined + .mdc-text-field--outlined { + .mdc-notched-outline { + z-index: -99; + } + .mdc-notched-outline--upgraded { + .mdc-floating-label--float-above { + font : { + size: var(--pi-font-size-x-small); + } + } + } + } + + .mdc-notched-outline--notched { + margin-left: unset; + -webkit-clip-path: unset; + clip-path: unset; + .mdc-notched-outline__notch { + border-top: 1px solid; + } + } + + .mat-mdc-form-field-subscript-wrapper { + display: flex; + } + + .mat-mdc-text-field-wrapper { + &.mdc-text-field--outlined { + .mat-mdc-form-field-infix { + padding-top: 0; + padding-bottom: 0; + } + } + } + } + + // Appearance + // Outline + @include matFormFieldOutline; + + // Fill + @include matFormFieldFill; + + // State colors + @include matFormFieldStateColors; + + // Affix + .mat-mdc-form-field-prefix, + .mat-mdc-form-field-suffix { + .mat-icon { + line-height: 100%; + } + } + + // Error + .mat-mdc-form-field-error { + font : { + size: var(--pi-font-size-x-small); + } + } + + // Hint & Error + .mat-mdc-form-field-hint-wrapper, + .mat-mdc-form-field-error-wrapper { + padding: 0 var(--pi-spacing-xx-small); + } + // Exclude incremental + &:not(.pi-form-field__incremental) { + // Type Fill + .mat-form-field-appearance-fill { + input { + &.mat-mdc-input-element { + all: unset; + height: unset; + width: -webkit-fill-available; + margin-top: 1.875rem; + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-menu.scss b/libs/ui/src/lib/styles/common/vendors/_mat-menu.scss index e68bde4..07eeaea 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-menu.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-menu.scss @@ -1,52 +1,52 @@ -.pi-shell, -.cdk-overlay-container { - .mat-mdc-menu-panel { - border-radius: var(--pi-border-radius-large); - background-color: rgba($color: white, $alpha: 0.96); - box-shadow: var(--pi-box-shadow-panel); - transition: var(--pi-animation); - transition-duration: 0.15s; - } - .mat-mdc-menu-item { - line-height: 3.4375rem; - height: 3.4375rem; - padding: 0 var(--pi-spacing-x-large); - color: var(--pi-color-highlighted); - transition: var(--pi-animation); - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - size: var(--pi-font-size-small); - } - &:hover:not([disabled]), - &.cdk-program-focused, - &.cdk-keyboard-focused, - .mat-mdc-menu-item-highlighted { - &:not([disabled]) { - color: var(--pi-color-primary); - background: var(--pi-color-primary-50); - } - } - } - .mat-mdc-menu-panel { - min-height: unset; - } - .mat-mdc-menu-content { - &:not(:empty) { - padding-top: unset; - padding-bottom: unset; - } - } -} - -html { - &.is-mobile { - .mat-mdc-menu-item { - width: 10rem; - } - } - &:not(.is-mobile) { - .mat-mdc-menu-item { - width: 12rem; - } - } -} +.pi-shell, +.cdk-overlay-container { + .mat-mdc-menu-panel { + border-radius: var(--pi-border-radius-large); + background-color: rgba($color: white, $alpha: 0.96); + box-shadow: var(--pi-box-shadow-panel); + transition: var(--pi-animation); + transition-duration: 0.15s; + } + .mat-mdc-menu-item { + line-height: 3.4375rem; + height: 3.4375rem; + padding: 0 var(--pi-spacing-x-large); + color: var(--pi-color-highlighted); + transition: var(--pi-animation); + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + size: var(--pi-font-size-small); + } + &:hover:not([disabled]), + &.cdk-program-focused, + &.cdk-keyboard-focused, + .mat-mdc-menu-item-highlighted { + &:not([disabled]) { + color: var(--pi-color-primary); + background: var(--pi-color-primary-50); + } + } + } + .mat-mdc-menu-panel { + min-height: unset; + } + .mat-mdc-menu-content { + &:not(:empty) { + padding-top: unset; + padding-bottom: unset; + } + } +} + +html { + &.is-mobile { + .mat-mdc-menu-item { + width: 10rem; + } + } + &:not(.is-mobile) { + .mat-mdc-menu-item { + width: 12rem; + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss b/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss index 6d08cb7..b192c84 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss @@ -1,26 +1,26 @@ -.pi-shell { - // Common - .mat-mdc-progress-bar { - height: 0.1875rem; - border-radius: 0.0938rem; - // Type - // Fill - &.mat-mdc-progress-bar-fill { - &::after { - background: var(--pi-color-primary); - } - } - } - // Progress bar in dynamic menu - .pi-dynamic-menu { - .mat-mdc-progress-bar { - height: 0.375rem; - border-radius: 0.125rem; - } - .mdc-linear-progress__bar-inner { - border-style: solid; - border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1; - border-top-width: var(--mdc-linear-progress-track-height, .375rem); - } - } -} +.pi-shell { + // Common + .mat-mdc-progress-bar { + height: 0.1875rem; + border-radius: 0.0938rem; + // Type + // Fill + &.mat-mdc-progress-bar-fill { + &::after { + background: var(--pi-color-primary); + } + } + } + // Progress bar in dynamic menu + .pi-dynamic-menu { + .mat-mdc-progress-bar { + height: 0.375rem; + border-radius: 0.125rem; + } + .mdc-linear-progress__bar-inner { + border-style: solid; + border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1; + border-top-width: var(--mdc-linear-progress-track-height, .375rem); + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-progress-spinner.scss b/libs/ui/src/lib/styles/common/vendors/_mat-progress-spinner.scss index c3b446e..67ad3c6 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-progress-spinner.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-progress-spinner.scss @@ -1,5 +1,5 @@ -.pi-shell { - .mat-mdc-progress-spinner { - --mdc-circular-progress-active-indicator-color: #799ef0; - } -} +.pi-shell { + .mat-mdc-progress-spinner { + --mdc-circular-progress-active-indicator-color: #799ef0; + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss b/libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss index 08f4f09..4f9a0a3 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss @@ -1,239 +1,239 @@ -.pi-layout { - .mat-mdc-radio-group { - display: flex; - gap: var(--pi-spacing-x-large); - & > * { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--pi-spacing-xxx-small); - } - .mat-mdc-radio-button { - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - } - } - } - - .mdc-radio__outer-circle { - border-width: 0.0625rem; - } - - .mat-mdc-radio-button { - &.mat-mdc-radio-checked { - .mat-ripple-element { - background-color: var(--pi-color-primary); - } - } - .mdc-radio { - // Default - .mdc-radio__native-control { - &:enabled { - &:not(:checked) { - & + .mdc-radio__background { - .mdc-radio__outer-circle { - border-color: var(--pi-color-grey-100); - } - } - } - &:checked { - & + .mdc-radio__background { - .mdc-radio__outer-circle, - .mdc-radio__inner-circle { - border-color: var(--pi-color-primary); - } - } - } - } - } - // Hover - &:hover { - .mdc-radio__native-control { - &:enabled { - &:checked { - & + .mdc-radio__background { - .mdc-radio__outer-circle { - border-color: var(--pi-color-primary); - } - } - } - &:not(:checked) { - & + .mdc-radio__background { - .mdc-radio__outer-circle { - border-color: var(--pi-color-grey-200); - } - } - } - } - } - } - // Not disabled - &:not(:disabled) { - &:active { - .mdc-radio__native-control { - &:enabled { - &:checked { - & + .mdc-radio__background { - .mdc-radio__outer-circle, - .mdc-radio__inner-circle { - border-color: var(--pi-color-primary-900); - } - } - } - } - } - } - } - } - &.mat-accent { - --mdc-radio-disabled-selected-icon-color: #3d3d3d; - --mdc-radio-disabled-unselected-icon-color: #3d3d3d; - --mdc-radio-unselected-focus-icon-color: #799ef0; - --mdc-radio-unselected-hover-icon-color: #799ef0; - --mdc-radio-unselected-icon-color: rgba(196, 213, 255, 0.15); - --mdc-radio-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15); - --mdc-radio-selected-focus-icon-color: #799ef0; - --mdc-radio-selected-hover-icon-color: #799ef0; - --mdc-radio-selected-icon-color: #799ef0; - --mdc-radio-selected-pressed-icon-color: #799ef0; - --mat-mdc-radio-ripple-color: #3d3d3d; - --mat-mdc-radio-checked-ripple-color: #799ef0; - } - &.mat-mdc-accent { - &.mat-mdc-radio-checked { - .mdc-radio__outer-circle { - border-color: var(--pi-color-primary); - } - } - } - &.mat-mdc-radio-checked { - .mdc-form-field { - font: { - weight: 700; - } - } - } - } -} - -.pi-wrapper__form { - .mat-mdc-radio-group { - .pi-list-item { - .mat-mdc-radio-button { - label { - white-space: normal; - } - } - } - } - // Mat Radio Group in Flex Direction Column Wrapper - .pi-wrapper__flex-direction--column { - .mat-mdc-radio-group { - flex-direction: column; - } - } -} - -.pi-wrapper__grid--two { - .mat-mdc-radio-label { - min-width: 9rem; - } -} - -.mat-mdc-radio-label-content { - white-space: pre-wrap; - word-break: break-word; -} - -html { - // Mobile - &.is-mobile { - .pi-layout { - .mat-mdc-radio-group { - flex-direction: column; - gap: var(--pi-spacing-small); - & > * { - display: flex; - flex-direction: column; - align-items: flex-start; - } - } - } - - .pi-wrapper__form { - .mat-mdc-radio-group { - margin: var(--pi-spacing-xx-large) auto; - gap: var(--pi-spacing-xx-large); - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - } - } - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - .pi-layout { - .mat-mdc-radio-group { - gap: var(--pi-spacing-medium); - [class*='pi-panel__width--'] { - margin: auto; - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .mat-mdc-radio-group { - &.pi-wrapper__grid--two { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: var(--pi-spacing-x-large); - - & > *:nth-child(n + 1) { - & > *:nth-child(n + 1) { - max-width: 70%; - &:not(.mat-mdc-radio-label) { - display: block; - margin-top: var(--pi-spacing-xxx-small); - } - } - } - } - } - } - // Tablet L & Desktop S & M - @media screen and (min-width: 62rem) and (max-width: 120rem) { - .pi-layout { - .mat-mdc-radio-group { - gap: var(--pi-spacing-large); - } - } - } - } - // Desktop - &.is-desktop { - // Common - // Desktop S - @media screen and (max-width: 90rem) { - } - // Desktop M - @media screen and (min-width: 90rem) and (max-width: 120rem) { - } - // Desktop L - @media screen and (min-width: 120rem) { - .pi-layout { - .mat-mdc-radio-group { - gap: var(--pi-spacing-x-large); - } - } - } - } -} +.pi-layout { + .mat-mdc-radio-group { + display: flex; + gap: var(--pi-spacing-x-large); + & > * { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--pi-spacing-xxx-small); + } + .mat-mdc-radio-button { + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + } + } + } + + .mdc-radio__outer-circle { + border-width: 0.0625rem; + } + + .mat-mdc-radio-button { + &.mat-mdc-radio-checked { + .mat-ripple-element { + background-color: var(--pi-color-primary); + } + } + .mdc-radio { + // Default + .mdc-radio__native-control { + &:enabled { + &:not(:checked) { + & + .mdc-radio__background { + .mdc-radio__outer-circle { + border-color: var(--pi-color-grey-100); + } + } + } + &:checked { + & + .mdc-radio__background { + .mdc-radio__outer-circle, + .mdc-radio__inner-circle { + border-color: var(--pi-color-primary); + } + } + } + } + } + // Hover + &:hover { + .mdc-radio__native-control { + &:enabled { + &:checked { + & + .mdc-radio__background { + .mdc-radio__outer-circle { + border-color: var(--pi-color-primary); + } + } + } + &:not(:checked) { + & + .mdc-radio__background { + .mdc-radio__outer-circle { + border-color: var(--pi-color-grey-200); + } + } + } + } + } + } + // Not disabled + &:not(:disabled) { + &:active { + .mdc-radio__native-control { + &:enabled { + &:checked { + & + .mdc-radio__background { + .mdc-radio__outer-circle, + .mdc-radio__inner-circle { + border-color: var(--pi-color-primary-900); + } + } + } + } + } + } + } + } + &.mat-accent { + --mdc-radio-disabled-selected-icon-color: #3d3d3d; + --mdc-radio-disabled-unselected-icon-color: #3d3d3d; + --mdc-radio-unselected-focus-icon-color: #799ef0; + --mdc-radio-unselected-hover-icon-color: #799ef0; + --mdc-radio-unselected-icon-color: rgba(196, 213, 255, 0.15); + --mdc-radio-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15); + --mdc-radio-selected-focus-icon-color: #799ef0; + --mdc-radio-selected-hover-icon-color: #799ef0; + --mdc-radio-selected-icon-color: #799ef0; + --mdc-radio-selected-pressed-icon-color: #799ef0; + --mat-mdc-radio-ripple-color: #3d3d3d; + --mat-mdc-radio-checked-ripple-color: #799ef0; + } + &.mat-mdc-accent { + &.mat-mdc-radio-checked { + .mdc-radio__outer-circle { + border-color: var(--pi-color-primary); + } + } + } + &.mat-mdc-radio-checked { + .mdc-form-field { + font: { + weight: 700; + } + } + } + } +} + +.pi-wrapper__form { + .mat-mdc-radio-group { + .pi-list-item { + .mat-mdc-radio-button { + label { + white-space: normal; + } + } + } + } + // Mat Radio Group in Flex Direction Column Wrapper + .pi-wrapper__flex-direction--column { + .mat-mdc-radio-group { + flex-direction: column; + } + } +} + +.pi-wrapper__grid--two { + .mat-mdc-radio-label { + min-width: 9rem; + } +} + +.mat-mdc-radio-label-content { + white-space: pre-wrap; + word-break: break-word; +} + +html { + // Mobile + &.is-mobile { + .pi-layout { + .mat-mdc-radio-group { + flex-direction: column; + gap: var(--pi-spacing-small); + & > * { + display: flex; + flex-direction: column; + align-items: flex-start; + } + } + } + + .pi-wrapper__form { + .mat-mdc-radio-group { + margin: var(--pi-spacing-xx-large) auto; + gap: var(--pi-spacing-xx-large); + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + } + } + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + .pi-layout { + .mat-mdc-radio-group { + gap: var(--pi-spacing-medium); + [class*='pi-panel__width--'] { + margin: auto; + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .mat-mdc-radio-group { + &.pi-wrapper__grid--two { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: var(--pi-spacing-x-large); + + & > *:nth-child(n + 1) { + & > *:nth-child(n + 1) { + max-width: 70%; + &:not(.mat-mdc-radio-label) { + display: block; + margin-top: var(--pi-spacing-xxx-small); + } + } + } + } + } + } + // Tablet L & Desktop S & M + @media screen and (min-width: 62rem) and (max-width: 120rem) { + .pi-layout { + .mat-mdc-radio-group { + gap: var(--pi-spacing-large); + } + } + } + } + // Desktop + &.is-desktop { + // Common + // Desktop S + @media screen and (max-width: 90rem) { + } + // Desktop M + @media screen and (min-width: 90rem) and (max-width: 120rem) { + } + // Desktop L + @media screen and (min-width: 120rem) { + .pi-layout { + .mat-mdc-radio-group { + gap: var(--pi-spacing-x-large); + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss b/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss index cf0deaa..815bf55 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss @@ -1,149 +1,149 @@ -@mixin sliderChevron($bottom: 1.975rem) { - .pi-slider { - // Flex direction - &.pi-slider__flex-direction--column-reverse { - .mdc-slider { - .mdc-slider__value-indicator-container { - bottom: -1.875rem; - .mdc-slider__value-indicator { - &::before { - bottom: $bottom; - } - } - } - } - } - } -} - -.pi-slider { - .mat-mdc-slider { - display: flex; - width: -webkit-fill-availabe; - - .mdc-slider__thumb { - .mdc-slider__value-indicator-container { - border-radius: 50% 50% 0; - .mdc-slider__value-indicator { - border-radius: var(--pi-border-radius-small); - transform: scale(1); - background-color: var(--pi-color-primary); - opacity: 1; - &::before { - border-top-color: var(--pi-color-primary); - } - .mdc-slider__value-indicator-text { - white-space: nowrap; - } - } - } - } - } - // Type - // Default - &:not(.pi-slider__range) { - .mat-mdc-slider { - .mat-mdc-slider { - margin-left: var(--pi-spacing-medium); - margin-right: var(--pi-spacing-medium); - } - } - } - - // Range - &.pi-slider__range { - .mat-mdc-slider { - margin-left: var(--pi-spacing-xx-large); - margin-right: var(--pi-spacing-xx-large); - } - } - - // Flex direction - &.pi-slider__flex-direction--column-reverse { - .mdc-slider { - .mdc-slider__value-indicator-container { - .mdc-slider__value-indicator { - &::before { - border-top: unset; - border-bottom: 0.375rem solid var(--pi-color-primary); - } - } - } - } - } - // Disabled - &.is-disabled { - .mat-mdc-slider { - &.mdc-slider--disabled { - .mdc-slider__track--active_fill { - border-color: var(--pi-color-primary-200); - } - .mdc-slider__thumb-knob { - background-color: var(--pi-color-primary-200); - border-color: var(--pi-color-primary-200); - } - } - .mdc-slider__input { - pointer-events: none; - } - } - .mdc-slider { - .mdc-slider__value-indicator-container { - display: none; - } - } - } -} - -.pi-card { - .pi-slider { - // Range - &.pi-slider__range { - .mat-mdc-slider { - margin-bottom: unset; - } - } - } -} - -// Slider in dynamic menu -.pi-dynamic-menu { - .pi-slider { - .mat-mdc-slider { - margin-top: var(--pi-spacing-xx-large); - margin-left: var(--pi-spacing-x-large); - margin-right: var(--pi-spacing-xx-large); - } - } -} - -html { - // Mobile - &.is-mobile { - @include sliderChevron; - .pi-slider { - // Default - &:not(.pi-slider__range) { - .mat-mdc-slider { - width: calc( - 100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) - - var(--pi-spacing-xx-large) - ); - } - } - } - .pi-list-item { - &.is-stroked { - .pi-slider { - .mat-mdc-slider { - width: calc( - 100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) - - var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) - - var(--pi-spacing-medium) - ); - } - } - } - } - } -} +@mixin sliderChevron($bottom: 1.975rem) { + .pi-slider { + // Flex direction + &.pi-slider__flex-direction--column-reverse { + .mdc-slider { + .mdc-slider__value-indicator-container { + bottom: -1.875rem; + .mdc-slider__value-indicator { + &::before { + bottom: $bottom; + } + } + } + } + } + } +} + +.pi-slider { + .mat-mdc-slider { + display: flex; + width: -webkit-fill-availabe; + + .mdc-slider__thumb { + .mdc-slider__value-indicator-container { + border-radius: 50% 50% 0; + .mdc-slider__value-indicator { + border-radius: var(--pi-border-radius-small); + transform: scale(1); + background-color: var(--pi-color-primary); + opacity: 1; + &::before { + border-top-color: var(--pi-color-primary); + } + .mdc-slider__value-indicator-text { + white-space: nowrap; + } + } + } + } + } + // Type + // Default + &:not(.pi-slider__range) { + .mat-mdc-slider { + .mat-mdc-slider { + margin-left: var(--pi-spacing-medium); + margin-right: var(--pi-spacing-medium); + } + } + } + + // Range + &.pi-slider__range { + .mat-mdc-slider { + margin-left: var(--pi-spacing-xx-large); + margin-right: var(--pi-spacing-xx-large); + } + } + + // Flex direction + &.pi-slider__flex-direction--column-reverse { + .mdc-slider { + .mdc-slider__value-indicator-container { + .mdc-slider__value-indicator { + &::before { + border-top: unset; + border-bottom: 0.375rem solid var(--pi-color-primary); + } + } + } + } + } + // Disabled + &.is-disabled { + .mat-mdc-slider { + &.mdc-slider--disabled { + .mdc-slider__track--active_fill { + border-color: var(--pi-color-primary-200); + } + .mdc-slider__thumb-knob { + background-color: var(--pi-color-primary-200); + border-color: var(--pi-color-primary-200); + } + } + .mdc-slider__input { + pointer-events: none; + } + } + .mdc-slider { + .mdc-slider__value-indicator-container { + display: none; + } + } + } +} + +.pi-card { + .pi-slider { + // Range + &.pi-slider__range { + .mat-mdc-slider { + margin-bottom: unset; + } + } + } +} + +// Slider in dynamic menu +.pi-dynamic-menu { + .pi-slider { + .mat-mdc-slider { + margin-top: var(--pi-spacing-xx-large); + margin-left: var(--pi-spacing-x-large); + margin-right: var(--pi-spacing-xx-large); + } + } +} + +html { + // Mobile + &.is-mobile { + @include sliderChevron; + .pi-slider { + // Default + &:not(.pi-slider__range) { + .mat-mdc-slider { + width: calc( + 100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) - + var(--pi-spacing-xx-large) + ); + } + } + } + .pi-list-item { + &.is-stroked { + .pi-slider { + .mat-mdc-slider { + width: calc( + 100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) - + var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) - + var(--pi-spacing-medium) + ); + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss b/libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss index c7363d1..b5255a2 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss @@ -1,101 +1,101 @@ -@mixin snackbarWidth($width: 80vw) { - .cdk-overlay-container { - .mat-mdc-snack-bar-container { - &.pi-snackbar { - width: $width; - max-width: $width; - } - } - } - .pi-layout { - .pi-snackbar { - width: $width; - max-width: $width; - } - } -} - -.cdk-overlay-container { - .mat-mdc-snack-bar-container { - background: unset; - margin: var(--pi-spacing-x-large); - &.pi-snackbar { - padding: var(--pi-spacing-large) var(--pi-spacing-x-large); - border-radius: var(--pi-border-radius-large); - box-shadow: var(--pi-box-shadow); - border: 1px solid; - &.pi-snackbar__info { - color: var(--pi-color-primary); - background-color: var(--pi-color-primary-25); - border-color: var(--pi-color-primary-50); - } - &.pi-snackbar__error { - color: var(--pi-color-warn); - background-color: var(--pi-color-warn-25); - border-color: var(--pi-color-warn-50); - } - &.pi-snackbar__success { - color: var(--pi-color-success); - background-color: var(--pi-color-success-25); - border-color: var(--pi-color-success-50); - } - } - .mdc-snackbar__surface { - background-color: transparent; - box-shadow: unset; - } - .mdc-snackbar__label { - padding-left: unset; - padding-right: unset; - padding-top: unset; - padding-bottom: unset; - span { - text-align: left; - line-height: 130%; - } - } - } -} - -.pi-layout { - .pi-snackbar { - padding: var(--pi-spacing-medium) var(--pi-spacing-x-large); - border-radius: var(--pi-border-radius-large); - border: 1px solid; - } -} - -// Mobile -@media screen and (max-width: 40rem) { - @include snackbarWidth; - .cdk-overlay-container { - .mat-mdc-snack-bar-handset { - .mat-mdc-snack-bar-container { - &.pi-snackbar { - margin: var(--pi-spacing-x-small) auto; - } - } - } - } -} - -// Tablet -@media screen and (min-width: 40rem) and (max-width: 77.5rem) { - @include snackbarWidth(66.66vw); -} - -// Desktop -// Desktop S -@media screen and (min-width: 77.5rem) and (max-width: 90rem) { - @include snackbarWidth(33.33vw); -} - -// Desktop M -@media screen and (min-width: 90rem) and (max-width: 120rem) { - @include snackbarWidth(33.33vw); -} - -// Desktop L -@media screen and (min-width: 120rem) { - @include snackbarWidth(25vw); -} +@mixin snackbarWidth($width: 80vw) { + .cdk-overlay-container { + .mat-mdc-snack-bar-container { + &.pi-snackbar { + width: $width; + max-width: $width; + } + } + } + .pi-layout { + .pi-snackbar { + width: $width; + max-width: $width; + } + } +} + +.cdk-overlay-container { + .mat-mdc-snack-bar-container { + background: unset; + margin: var(--pi-spacing-x-large); + &.pi-snackbar { + padding: var(--pi-spacing-large) var(--pi-spacing-x-large); + border-radius: var(--pi-border-radius-large); + box-shadow: var(--pi-box-shadow); + border: 1px solid; + &.pi-snackbar__info { + color: var(--pi-color-primary); + background-color: var(--pi-color-primary-25); + border-color: var(--pi-color-primary-50); + } + &.pi-snackbar__error { + color: var(--pi-color-warn); + background-color: var(--pi-color-warn-25); + border-color: var(--pi-color-warn-50); + } + &.pi-snackbar__success { + color: var(--pi-color-success); + background-color: var(--pi-color-success-25); + border-color: var(--pi-color-success-50); + } + } + .mdc-snackbar__surface { + background-color: transparent; + box-shadow: unset; + } + .mdc-snackbar__label { + padding-left: unset; + padding-right: unset; + padding-top: unset; + padding-bottom: unset; + span { + text-align: left; + line-height: 130%; + } + } + } +} + +.pi-layout { + .pi-snackbar { + padding: var(--pi-spacing-medium) var(--pi-spacing-x-large); + border-radius: var(--pi-border-radius-large); + border: 1px solid; + } +} + +// Mobile +@media screen and (max-width: 40rem) { + @include snackbarWidth; + .cdk-overlay-container { + .mat-mdc-snack-bar-handset { + .mat-mdc-snack-bar-container { + &.pi-snackbar { + margin: var(--pi-spacing-x-small) auto; + } + } + } + } +} + +// Tablet +@media screen and (min-width: 40rem) and (max-width: 77.5rem) { + @include snackbarWidth(66.66vw); +} + +// Desktop +// Desktop S +@media screen and (min-width: 77.5rem) and (max-width: 90rem) { + @include snackbarWidth(33.33vw); +} + +// Desktop M +@media screen and (min-width: 90rem) and (max-width: 120rem) { + @include snackbarWidth(33.33vw); +} + +// Desktop L +@media screen and (min-width: 120rem) { + @include snackbarWidth(25vw); +} diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-tooltip.scss b/libs/ui/src/lib/styles/common/vendors/_mat-tooltip.scss index 4c2a27f..e23064a 100644 --- a/libs/ui/src/lib/styles/common/vendors/_mat-tooltip.scss +++ b/libs/ui/src/lib/styles/common/vendors/_mat-tooltip.scss @@ -1,81 +1,81 @@ -.cdk-overlay-container { - .mat-mdc-tooltip { - margin: var(--pi-spacing-xxx-small); - padding: var(--pi-spacing-xx-small) var(--pi-spacing-small); - box-shadow: var(--pi-box-shadow-panel-double); - border-radius: var(--pi-border-radius-medium); - .mdc-tooltip__surface { - text-align: center; - } - } -} - -.pi-tooltip { - &::after { - content: ''; - position: absolute; - left: calc(50% - 0.5625rem); - top: -0.5rem; - width: 0; - height: 0; - border-left: 0.5625rem solid transparent; - border-right: 0.5625rem solid transparent; - transform: rotate(180deg); - clear: both; - } - - font: { - family: 'Soehne', Helvetica, Arial, sans-serif; - size: var(--pi-font-size-x-small); - weight: 300; - } - // Color - &.pi-tooltip__white { - background-color: var(--pi-color-background-400); - - &::after { - border-top: 0.5rem solid var(--pi-color-background-400); - } - - .mdc-tooltip__surface { - color: var(--pi-color-highlighted); - background-color: var(--pi-color-background-400); - } - } - &.pi-tooltip__grey { - background-color: var(--pi-color-grey-200); - - &::after { - border-top: 0.5rem solid var(--pi-color-grey-200); - } - - .mdc-tooltip__surface { - color: var(--pi-color-background-400); - background-color: var(--pi-color-grey-200); - } - } - &.pi-tooltip__dark { - background-color: var(--pi-color-grey); - - &::after { - border-top: 0.5rem solid var(--pi-color-grey); - } - .mdc-tooltip__surface { - color: var(--pi-color-background-400); - background-color: var(--pi-color-grey); - } - } - // Type - &.pi-tooltip__type--error { - background-color: var(--pi-color-background-400); - - &::after { - border-top: 0.5rem solid var(--pi-color-background-400); - } - - .mdc-tooltip__surface { - color: var(--pi-color-warn); - background-color: var(--pi-color-background-400); - } - } -} +.cdk-overlay-container { + .mat-mdc-tooltip { + margin: var(--pi-spacing-xxx-small); + padding: var(--pi-spacing-xx-small) var(--pi-spacing-small); + box-shadow: var(--pi-box-shadow-panel-double); + border-radius: var(--pi-border-radius-medium); + .mdc-tooltip__surface { + text-align: center; + } + } +} + +.pi-tooltip { + &::after { + content: ''; + position: absolute; + left: calc(50% - 0.5625rem); + top: -0.5rem; + width: 0; + height: 0; + border-left: 0.5625rem solid transparent; + border-right: 0.5625rem solid transparent; + transform: rotate(180deg); + clear: both; + } + + font: { + family: 'Soehne', Helvetica, Arial, sans-serif; + size: var(--pi-font-size-x-small); + weight: 300; + } + // Color + &.pi-tooltip__white { + background-color: var(--pi-color-background-400); + + &::after { + border-top: 0.5rem solid var(--pi-color-background-400); + } + + .mdc-tooltip__surface { + color: var(--pi-color-highlighted); + background-color: var(--pi-color-background-400); + } + } + &.pi-tooltip__grey { + background-color: var(--pi-color-grey-200); + + &::after { + border-top: 0.5rem solid var(--pi-color-grey-200); + } + + .mdc-tooltip__surface { + color: var(--pi-color-background-400); + background-color: var(--pi-color-grey-200); + } + } + &.pi-tooltip__dark { + background-color: var(--pi-color-grey); + + &::after { + border-top: 0.5rem solid var(--pi-color-grey); + } + .mdc-tooltip__surface { + color: var(--pi-color-background-400); + background-color: var(--pi-color-grey); + } + } + // Type + &.pi-tooltip__type--error { + background-color: var(--pi-color-background-400); + + &::after { + border-top: 0.5rem solid var(--pi-color-background-400); + } + + .mdc-tooltip__surface { + color: var(--pi-color-warn); + background-color: var(--pi-color-background-400); + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss b/libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss index 2a0ee8c..7dd257e 100644 --- a/libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss +++ b/libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss @@ -1,56 +1,56 @@ -.pi-shell__deale-saas, -.pi-shell__deale-website { - .ngx-slider { - & > .ngx-slider-pointer { - background-color: var(--pi-color-primary); - width: 13px; - height: 13px; - top: -5px; - &::after { - display: none; - } - } - - & > .ngx-slider-span { - & > .ngx-slider-selection { - background: var(--pi-color-primary); - } - &.ngx-slider-bubble { - &.ngx-slider-model-high, - &.ngx-slider-model-value { - background: var(--pi-color-primary); - border-radius: var(--pi-border-radius-x-small); - padding: var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small); - bottom: 14px; - color: white; - } - } - } - - &[disabled] { - & > .ngx-slider-span { - & > .ngx-slider-selection { - background: #d8e0f3; - } - &.ngx-slider-pointer { - background: #d8e0f3; - } - } - } - - &.animate { - .ngx-slider-bubble { - &.ngx-slider-limit { - visibility: hidden; - } - } - } - - // .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit { - // display: none; - // } - .ngx-slider .ngx-slider-selection { - background-color: var(--pi-color-primary); - } - } -} +.pi-shell__deale-saas, +.pi-shell__deale-website { + .ngx-slider { + & > .ngx-slider-pointer { + background-color: var(--pi-color-primary); + width: 13px; + height: 13px; + top: -5px; + &::after { + display: none; + } + } + + & > .ngx-slider-span { + & > .ngx-slider-selection { + background: var(--pi-color-primary); + } + &.ngx-slider-bubble { + &.ngx-slider-model-high, + &.ngx-slider-model-value { + background: var(--pi-color-primary); + border-radius: var(--pi-border-radius-x-small); + padding: var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small); + bottom: 14px; + color: white; + } + } + } + + &[disabled] { + & > .ngx-slider-span { + & > .ngx-slider-selection { + background: #d8e0f3; + } + &.ngx-slider-pointer { + background: #d8e0f3; + } + } + } + + &.animate { + .ngx-slider-bubble { + &.ngx-slider-limit { + visibility: hidden; + } + } + } + + // .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit { + // display: none; + // } + .ngx-slider .ngx-slider-selection { + background-color: var(--pi-color-primary); + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/_typeform.scss b/libs/ui/src/lib/styles/common/vendors/_typeform.scss index a3639fa..99c0e85 100644 --- a/libs/ui/src/lib/styles/common/vendors/_typeform.scss +++ b/libs/ui/src/lib/styles/common/vendors/_typeform.scss @@ -1,8 +1,8 @@ -@media screen and (max-width: 77.5rem) { - .tf-v1-popup { - .tf-v1-close { - transform: translateX(2rem); - transform: translateY(-2rem); - } - } -} +@media screen and (max-width: 77.5rem) { + .tf-v1-popup { + .tf-v1-close { + transform: translateX(2rem); + transform: translateY(-2rem); + } + } +} diff --git a/libs/ui/src/lib/styles/common/vendors/index.scss b/libs/ui/src/lib/styles/common/vendors/index.scss index 79c9dca..f3ce430 100644 --- a/libs/ui/src/lib/styles/common/vendors/index.scss +++ b/libs/ui/src/lib/styles/common/vendors/index.scss @@ -1,15 +1,15 @@ -@forward 'ch2-button'; -@forward 'mat-checkbox'; -@forward 'mat-chip'; -@forward 'mat-dialog'; -@forward 'mat-expansion-panel'; -@forward 'mat-form-field'; -@forward 'mat-menu'; -@forward 'mat-progress-bar'; -@forward 'mat-progress-spinner'; -@forward 'mat-radio-button'; -@forward 'mat-slider'; -@forward 'mat-snackbar'; -@forward 'mat-tooltip'; -@forward 'ngx-slider'; -@forward 'typeform'; +@forward 'ch2-button'; +@forward 'mat-checkbox'; +@forward 'mat-chip'; +@forward 'mat-dialog'; +@forward 'mat-expansion-panel'; +@forward 'mat-form-field'; +@forward 'mat-menu'; +@forward 'mat-progress-bar'; +@forward 'mat-progress-spinner'; +@forward 'mat-radio-button'; +@forward 'mat-slider'; +@forward 'mat-snackbar'; +@forward 'mat-tooltip'; +@forward 'ngx-slider'; +@forward 'typeform'; diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss index 5a18a28..06654d4 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss @@ -1,396 +1,396 @@ -@mixin fixedActionWrapperMain( - $left: var(--pi-spacing-medium), - $width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)) -) { - .pi-layout { - &.pi-layout__main { - .pi-wrapper { - &.pi-wrapper__action { - &.pi-wrapper__action--position-fixed { - z-index: 999; - left: $left; - width: $width; - transition: var(--pi-animation); - & > button { - &:not(.pi-button__appearance--ghost) { - box-shadow: var(--pi-box-shadow); - } - } - } - } - } - } - } -} - -@mixin fixedMobileActionWrapperHorizontalBehavior($side-spacing: medium) { - .pi-wrapper__action { - &.pi-wrapper__action--position-fixed-mobile { - left: var(--pi-spacing-#{$side-spacing}); - width: calc(100% - var(--pi-spacing-#{$side-spacing}) - var(--pi-spacing-#{$side-spacing})); - } - } -} - -@mixin fixedActionWrapperMainBottom( - $position: fixed, - $bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large)) -) { - .pi-layout { - &.pi-layout__main { - .pi-wrapper { - &.pi-wrapper__action { - &.pi-wrapper__action--position-fixed { - position: $position; - bottom: $bottom; - } - } - } - } - } -} - -@mixin fixedActionWrapperFullscreen( - $bottom: env(safe-area-inset-bottom), - $padding: var(--pi-spacing-x-large) -) { - .pi-layout { - &:not(.pi-layout__main) { - .pi-wrapper { - &.pi-wrapper__action { - &.pi-wrapper__action--position-fixed { - position: fixed; - z-index: 99; - left: 0; - bottom: $bottom; - width: 100%; - padding: $padding; - background-color: rgba($color: white, $alpha: 0.96); - box-shadow: var(--pi-box-shadow); - } - } - } - } - // Action wrapper in dealbox - .pi-layout__06-edge-to-edge { - .pi-wrapper { - &.pi-wrapper__action { - &.pi-wrapper__action--position-fixed { - background-color: unset; - box-shadow: unset; - } - } - } - } - } -} - -.pi-wrapper { - // Action Wrapper - &.pi-wrapper__action { - display: flex; - } - &.pi-wrapper__justify--center { - justify-content: center; - } -} - -html { - // Mobile - &.is-mobile { - @include fixedMobileActionWrapperHorizontalBehavior; - } - // Mobile & Tablet - &:not(.is-desktop) { - @include fixedActionWrapperFullscreen; - // Small Device - @media screen and (max-width: 62rem) { - // Navbar layouts - &.pi-layout__02-full-width, - &.pi-layout__07-list { - // Action wrapper // Only fixed in small devices - .pi-wrapper__action { - &.pi-wrapper__action--position-fixed-mobile { - bottom: calc( - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) + - var(--pi-spacing-x-large) + env(safe-area-inset-bottom) - ); - } - } - } - // Fixed Action Wrapper Main Bottom - .pi-shell { - & > div { - // Has Not Sticky Note - &:not(.has-bottom-sticky-note) { - @include fixedActionWrapperMainBottom; - } - // Sticky Note - &.has-bottom-sticky-note { - @include fixedActionWrapperMainBottom( - unset, - calc( - var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large) - ) - ); - } - } - } - .pi-layout { - .pi-wrapper__action { - button { - &:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not( - .pi-button__x-small - ):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not( - .pi-button__xx-small - ), - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( - .pi-button__xx-small - ) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small); - padding-left: var(--pi-spacing-small); - padding-right: var(--pi-spacing-small); - } - } - // Fixed mobile - &.pi-wrapper__action--position-fixed-mobile { - position: fixed; - z-index: 99; - button { - box-shadow: var(--pi-box-shadow); - } - } - } - - // Full screen layouts - &:not(.pi-layout__07-list):not(.pi-layout__02-full-width) { - // Action wrapper - .pi-wrapper__action { - // Only fixed in small devices - &.pi-wrapper__action--position-fixed-mobile { - left: 0; - bottom: calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)); - width: 100%; - } - } - } - // Navbar layouts - &.pi-layout__02-full-width, - &.pi-layout__07-list { - // Action wrapper - .pi-wrapper__action { - // Only fixed in small devices - &.pi-wrapper__action--position-fixed-mobile { - bottom: calc( - var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom) - ); - } - } - } - } - } - } - // Tablet - &.is-tablet { - &.is-tablet__small { - @include fixedMobileActionWrapperHorizontalBehavior(x-large); - @include fixedActionWrapperMain( - var(--pi-spacing-x-large), - calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) - ); - .pi-wrapper__action { - &.pi-wrapper__action--position-fixed-mobile { - left: var(--pi-spacing-x-large); - } - } - } - &.is-tablet__large { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc( - 100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) - ) - ); - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - // Fixed Action Wrapper Main Bottom - .pi-shell { - & > div { - // Has Not Sticky Note - &:not(.has-bottom-sticky-note) { - @include fixedActionWrapperMainBottom(fixed, var(--pi-spacing-x-large)); - } - // Sticky Note - &.has-bottom-sticky-note { - @include fixedActionWrapperMainBottom(unset, unset); - } - } - } - } - } - // Desktop - &.is-desktop { - &.is-desktop__small { - // Navbar collapsed - .navbar-is-collapsed { - &.aside-is-open { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem) - ); - } - &.aside-is-closed { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc( - 90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - - var(--pi-spacing-xxx-small) - ) - ); - } - } - // Navbar expanded - .navbar-is-expanded { - // Aside is open - &.aside-is-open { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem) - ); - } - // Aside is closed - &.aside-is-closed { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc( - 90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) - - var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem - ) - ); - } - } - @include fixedActionWrapperFullscreen(0, var(--pi-spacing-xx-large)); - } - - &.is-desktop__medium { - // Navbar collapsed - .navbar-is-collapsed { - // Aside is open - &.aside-is-open { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem) - ); - } - // Aside is closed - &.aside-is-closed { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - var(--pi-width-container) - ); - } - } - // Navbar expanded - .navbar-is-expanded { - // Aside is open - &.aside-is-open { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem) - ); - } - // Aside is closed - &.aside-is-closed { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - var(--pi-width-container) - ); - } - } - - @include fixedActionWrapperFullscreen( - 0, - var(--pi-spacing-xx-large) var(--pi-spacing-xxx-large) - ); - } - &.is-desktop__large { - // Desktop L - @media screen and (max-width: 140rem) { - // Navbar collapsed - .navbar-is-collapsed { - @include fixedActionWrapperMain( - calc(var(--pi-width-navbar-collapsed) - 4.65rem), - var(--pi-width-container-l) - ); - } - // Navbar expanded - .navbar-is-expanded { - @include fixedActionWrapperMain( - calc(var(--pi-width-navbar-expanded) - 12rem), - var(--pi-width-container-l) - ); - } - } - - // Desktop XL - @media screen and (min-width: 140rem) { - // Navbar collapsed - .navbar-is-collapsed { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc(66.66% - var(--pi-width-navbar-collapsed) - 1.6rem) - ); - } - // Navbar expanded - .navbar-is-expanded { - @include fixedActionWrapperMain( - calc( - var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) - ), - calc(66.66% - var(--pi-width-navbar-expanded) + 1.2rem) - ); - } - } - - @include fixedActionWrapperFullscreen( - 0, - var(--pi-spacing-xx-large) var(--pi-spacing-xxxx-large) - ); - } - } -} +@mixin fixedActionWrapperMain( + $left: var(--pi-spacing-medium), + $width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)) +) { + .pi-layout { + &.pi-layout__main { + .pi-wrapper { + &.pi-wrapper__action { + &.pi-wrapper__action--position-fixed { + z-index: 999; + left: $left; + width: $width; + transition: var(--pi-animation); + & > button { + &:not(.pi-button__appearance--ghost) { + box-shadow: var(--pi-box-shadow); + } + } + } + } + } + } + } +} + +@mixin fixedMobileActionWrapperHorizontalBehavior($side-spacing: medium) { + .pi-wrapper__action { + &.pi-wrapper__action--position-fixed-mobile { + left: var(--pi-spacing-#{$side-spacing}); + width: calc(100% - var(--pi-spacing-#{$side-spacing}) - var(--pi-spacing-#{$side-spacing})); + } + } +} + +@mixin fixedActionWrapperMainBottom( + $position: fixed, + $bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large)) +) { + .pi-layout { + &.pi-layout__main { + .pi-wrapper { + &.pi-wrapper__action { + &.pi-wrapper__action--position-fixed { + position: $position; + bottom: $bottom; + } + } + } + } + } +} + +@mixin fixedActionWrapperFullscreen( + $bottom: env(safe-area-inset-bottom), + $padding: var(--pi-spacing-x-large) +) { + .pi-layout { + &:not(.pi-layout__main) { + .pi-wrapper { + &.pi-wrapper__action { + &.pi-wrapper__action--position-fixed { + position: fixed; + z-index: 99; + left: 0; + bottom: $bottom; + width: 100%; + padding: $padding; + background-color: rgba($color: white, $alpha: 0.96); + box-shadow: var(--pi-box-shadow); + } + } + } + } + // Action wrapper in dealbox + .pi-layout__06-edge-to-edge { + .pi-wrapper { + &.pi-wrapper__action { + &.pi-wrapper__action--position-fixed { + background-color: unset; + box-shadow: unset; + } + } + } + } + } +} + +.pi-wrapper { + // Action Wrapper + &.pi-wrapper__action { + display: flex; + } + &.pi-wrapper__justify--center { + justify-content: center; + } +} + +html { + // Mobile + &.is-mobile { + @include fixedMobileActionWrapperHorizontalBehavior; + } + // Mobile & Tablet + &:not(.is-desktop) { + @include fixedActionWrapperFullscreen; + // Small Device + @media screen and (max-width: 62rem) { + // Navbar layouts + &.pi-layout__02-full-width, + &.pi-layout__07-list { + // Action wrapper // Only fixed in small devices + .pi-wrapper__action { + &.pi-wrapper__action--position-fixed-mobile { + bottom: calc( + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) + + var(--pi-spacing-x-large) + env(safe-area-inset-bottom) + ); + } + } + } + // Fixed Action Wrapper Main Bottom + .pi-shell { + & > div { + // Has Not Sticky Note + &:not(.has-bottom-sticky-note) { + @include fixedActionWrapperMainBottom; + } + // Sticky Note + &.has-bottom-sticky-note { + @include fixedActionWrapperMainBottom( + unset, + calc( + var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large) + ) + ); + } + } + } + .pi-layout { + .pi-wrapper__action { + button { + &:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not( + .pi-button__x-small + ):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not( + .pi-button__xx-small + ), + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not( + .pi-button__xx-small + ) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small); + padding-left: var(--pi-spacing-small); + padding-right: var(--pi-spacing-small); + } + } + // Fixed mobile + &.pi-wrapper__action--position-fixed-mobile { + position: fixed; + z-index: 99; + button { + box-shadow: var(--pi-box-shadow); + } + } + } + + // Full screen layouts + &:not(.pi-layout__07-list):not(.pi-layout__02-full-width) { + // Action wrapper + .pi-wrapper__action { + // Only fixed in small devices + &.pi-wrapper__action--position-fixed-mobile { + left: 0; + bottom: calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)); + width: 100%; + } + } + } + // Navbar layouts + &.pi-layout__02-full-width, + &.pi-layout__07-list { + // Action wrapper + .pi-wrapper__action { + // Only fixed in small devices + &.pi-wrapper__action--position-fixed-mobile { + bottom: calc( + var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom) + ); + } + } + } + } + } + } + // Tablet + &.is-tablet { + &.is-tablet__small { + @include fixedMobileActionWrapperHorizontalBehavior(x-large); + @include fixedActionWrapperMain( + var(--pi-spacing-x-large), + calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) + ); + .pi-wrapper__action { + &.pi-wrapper__action--position-fixed-mobile { + left: var(--pi-spacing-x-large); + } + } + } + &.is-tablet__large { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc( + 100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - + var(--pi-spacing-x-large) - var(--pi-spacing-x-large) + ) + ); + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + // Fixed Action Wrapper Main Bottom + .pi-shell { + & > div { + // Has Not Sticky Note + &:not(.has-bottom-sticky-note) { + @include fixedActionWrapperMainBottom(fixed, var(--pi-spacing-x-large)); + } + // Sticky Note + &.has-bottom-sticky-note { + @include fixedActionWrapperMainBottom(unset, unset); + } + } + } + } + } + // Desktop + &.is-desktop { + &.is-desktop__small { + // Navbar collapsed + .navbar-is-collapsed { + &.aside-is-open { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem) + ); + } + &.aside-is-closed { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc( + 90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - + var(--pi-spacing-xxx-small) + ) + ); + } + } + // Navbar expanded + .navbar-is-expanded { + // Aside is open + &.aside-is-open { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem) + ); + } + // Aside is closed + &.aside-is-closed { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc( + 90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) - + var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem + ) + ); + } + } + @include fixedActionWrapperFullscreen(0, var(--pi-spacing-xx-large)); + } + + &.is-desktop__medium { + // Navbar collapsed + .navbar-is-collapsed { + // Aside is open + &.aside-is-open { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem) + ); + } + // Aside is closed + &.aside-is-closed { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + var(--pi-width-container) + ); + } + } + // Navbar expanded + .navbar-is-expanded { + // Aside is open + &.aside-is-open { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem) + ); + } + // Aside is closed + &.aside-is-closed { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + var(--pi-width-container) + ); + } + } + + @include fixedActionWrapperFullscreen( + 0, + var(--pi-spacing-xx-large) var(--pi-spacing-xxx-large) + ); + } + &.is-desktop__large { + // Desktop L + @media screen and (max-width: 140rem) { + // Navbar collapsed + .navbar-is-collapsed { + @include fixedActionWrapperMain( + calc(var(--pi-width-navbar-collapsed) - 4.65rem), + var(--pi-width-container-l) + ); + } + // Navbar expanded + .navbar-is-expanded { + @include fixedActionWrapperMain( + calc(var(--pi-width-navbar-expanded) - 12rem), + var(--pi-width-container-l) + ); + } + } + + // Desktop XL + @media screen and (min-width: 140rem) { + // Navbar collapsed + .navbar-is-collapsed { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc(66.66% - var(--pi-width-navbar-collapsed) - 1.6rem) + ); + } + // Navbar expanded + .navbar-is-expanded { + @include fixedActionWrapperMain( + calc( + var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + ), + calc(66.66% - var(--pi-width-navbar-expanded) + 1.2rem) + ); + } + } + + @include fixedActionWrapperFullscreen( + 0, + var(--pi-spacing-xx-large) var(--pi-spacing-xxxx-large) + ); + } + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-form-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-form-wrapper.scss index 9e868e6..94c5be6 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-form-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-form-wrapper.scss @@ -1,128 +1,128 @@ -@mixin formWrapperSpacings($spacing: large) { - .pi-wrapper { - &.pi-wrapper__form { - // Vertically behavior - & > form { - & > *:nth-child(n + 2) { - &:not(.pi-text-viewer-link) { - margin-top: var(--pi-spacing-#{$spacing}); - } - } - } - } - } -} - -.pi-wrapper { - &.pi-wrapper__form { - display: block; - margin-top: var(--pi-spacing-xxxx-small); - - & > form { - & > .pi-field { - display: block; - } - & > fieldset { - & > div { - &.pi-wrapper__flex { - & > .pi-form-field__text { - flex: 1; - } - } - } - } - } - h4 { - color: var(--pi-color-primary); - margin-bottom: var(--pi-spacing-x-large); - font: { - size: var(--pi-font-size-small); - } - } - &.pi-wrapper__grid--two { - & > form { - display: grid; - grid-gap: var(--pi-spacing-x-large); - } - } - - .pi-wrapper__grid { - fieldset + fieldset { - margin-top: unset; - } - } - - .pi-list-item + .pi-list-item { - margin-top: var(--pi-spacing-xxx-small); - } - } -} - -@mixin fillFormFieldMinWidth($min-width: calc(100vw - 10rem)) { - .pi-wrapper { - &.pi-wrapper__form { - & > form { - & > .pi-field { - .mat-mdc-form-field-flex { - min-width: $min-width; - } - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include fillFormFieldMinWidth; - @include formWrapperSpacings; - .pi-wrapper { - &.pi-wrapper__form { - // Horizontally behavior - &.pi-wrapper__grid--half { - & > form { - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - @include formWrapperSpacings(x-large); - - // Large device - @media screen and (min-width: 62rem) { - .pi-wrapper { - &.pi-wrapper_form { - // Horizontally behavior - &.pi-wrapper__grid--half { - & > form { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: var(--pi-spacing-x-large); - } - } - } - } - } - } - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include fillFormFieldMinWidth(calc(100vw - 11rem)); - } - // Tablet L - &.is-tablet__large { - @include fillFormFieldMinWidth(16rem); - } - } - // Desktop - &.is-desktop { - @include fillFormFieldMinWidth(18.5rem); - } -} +@mixin formWrapperSpacings($spacing: large) { + .pi-wrapper { + &.pi-wrapper__form { + // Vertically behavior + & > form { + & > *:nth-child(n + 2) { + &:not(.pi-text-viewer-link) { + margin-top: var(--pi-spacing-#{$spacing}); + } + } + } + } + } +} + +.pi-wrapper { + &.pi-wrapper__form { + display: block; + margin-top: var(--pi-spacing-xxxx-small); + + & > form { + & > .pi-field { + display: block; + } + & > fieldset { + & > div { + &.pi-wrapper__flex { + & > .pi-form-field__text { + flex: 1; + } + } + } + } + } + h4 { + color: var(--pi-color-primary); + margin-bottom: var(--pi-spacing-x-large); + font: { + size: var(--pi-font-size-small); + } + } + &.pi-wrapper__grid--two { + & > form { + display: grid; + grid-gap: var(--pi-spacing-x-large); + } + } + + .pi-wrapper__grid { + fieldset + fieldset { + margin-top: unset; + } + } + + .pi-list-item + .pi-list-item { + margin-top: var(--pi-spacing-xxx-small); + } + } +} + +@mixin fillFormFieldMinWidth($min-width: calc(100vw - 10rem)) { + .pi-wrapper { + &.pi-wrapper__form { + & > form { + & > .pi-field { + .mat-mdc-form-field-flex { + min-width: $min-width; + } + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include fillFormFieldMinWidth; + @include formWrapperSpacings; + .pi-wrapper { + &.pi-wrapper__form { + // Horizontally behavior + &.pi-wrapper__grid--half { + & > form { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + @include formWrapperSpacings(x-large); + + // Large device + @media screen and (min-width: 62rem) { + .pi-wrapper { + &.pi-wrapper_form { + // Horizontally behavior + &.pi-wrapper__grid--half { + & > form { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: var(--pi-spacing-x-large); + } + } + } + } + } + } + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include fillFormFieldMinWidth(calc(100vw - 11rem)); + } + // Tablet L + &.is-tablet__large { + @include fillFormFieldMinWidth(16rem); + } + } + // Desktop + &.is-desktop { + @include fillFormFieldMinWidth(18.5rem); + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss index 80e7239..7ab427b 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss @@ -1,516 +1,516 @@ -// 2 cols -@mixin gridWrapper2Columns($columns: 1) { - .pi-wrapper { - &.pi-wrapper__grid { - // 3 - &.pi-wrapper__grid--columns-2 { - grid-template-columns: repeat(#{$columns}, 1fr); - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(2, 1fr); - } - } - } - } -} - -@mixin gridWrapperColmnsWidths { - .pi-wrapper { - &.pi-wrapper__grid { - &.pi-wrapper__grid--columns-2 { - // 2 / 3 - &.pi-wrapper__grid--two-thirds { - grid-template-columns: 2fr 1fr; - } - // 1 / 2 - &.pi-wrapper__grid--half { - grid-template-columns: repeat(1, 1fr); - } - // 1 / 3 - &.pi-wrapper__grid--third { - grid-template-columns: 1fr 2fr; - } - // 1 / 4 - &.pi-wrapper__grid--quarter { - grid-template-columns: 1fr 3fr; - } - // 1 / 5 - &.pi-wrapper__grid--fifth { - grid-template-columns: 1fr 4fr; - } - // 1 / 6 - &.pi-wrapper__grid--sixth { - grid-template-columns: 1fr 5fr; - } - } - } - } -} - -.pi-wrapper { - // Grid directive - &.pi-wrapper__grid { - display: grid; - // Align items - &.pi-wrapper__align-items--start { - align-items: start; - } - &.pi-wrapper__align-items--center { - align-items: center; - } - &.pi-wrapper__align-items--end { - align-items: end; - } - // Align self - &.pi-wrapper__align-self--start { - align-self: start; - } - &.pi-wrapper__align-self--center { - align-self: center; - } - &.pi-wrapper__align-self--end { - align-self: end; - } - // Grid Half - &.pi-wrapper__grid--half { - grid-gap: var(--pi-spacing-x-large); - // Fill - &.pi-wrapper__fill--fit-content { - width: fit-content; - } - &.pi-wrapper__fill--fill-available { - width: -webkit-fill-available; - } - - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - } - // Tablet & Dektop - @media screen and (min-width: 40rem) { - grid-template-columns: repeat(2, 1fr); - } - } - // Grid Four - &.pi-wrapper__grid--four { - justify-items: center; - &.pi-wrapper__fill--fill-available { - width: -webkit-fill-available; - & > *:nth-child(n + 1) { - width: -webkit-fill-available; - } - } - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - } - &:not(.is-responsive) { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - grid-template-columns: repeat(2, 1fr); - } - } - - &.is-responsive { - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-columns: repeat(2, 1fr); - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-columns: repeat(4, 1fr); - } - } - // Gap - &.pi-wrapper__gap-l { - grid-gap: var(--pi-spacing-large); - } - &.pi-wrapper__gap-x-l { - grid-gap: var(--pi-spacing-x-large); - } - &.pi-wrapper__gap-xx-l { - grid-gap: var(--pi-spacing-xx-large); - } - &.pi-wrapper__gap-xxx-l { - grid-gap: var(--pi-spacing-xxx-large); - } - &.pi-wrapper__gap-xxxx-l { - grid-gap: var(--pi-spacing-xxxx-large); - } - - & > *:nth-child(1) { - grid-area: item1; - } - & > *:nth-child(2) { - grid-area: item2; - } - & > *:nth-child(3) { - grid-area: item3; - } - & > *:nth-child(4) { - grid-area: item4; - } - - // 1fr 1fr - // 1fr 1fr - &.pi-wrapper__grid--four-1-1-1-1 { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-areas: - 'item1' - 'item2' - 'item3' - 'item4'; - } - - &:not(.is-responsive) { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - grid-template-areas: - 'item1 item2' - 'item3 item4'; - } - } - &.is-responsive { - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-areas: - 'item1 item2' - 'item3 item4'; - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-areas: 'item1 item2 item3 item4'; - } - } - } - // . 1fr - // 1fr 1fr - &.pi-wrapper__grid--four-0-1-1-1 { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-areas: - '.' - 'item1' - 'item2' - 'item3'; - } - - &:not(.is-responsive) { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - grid-template-areas: - '. item1' - 'item2 item3'; - } - } - &.is-responsive { - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-areas: - '. item1' - 'item2 item3'; - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-areas: '. item1 item2 item3'; - } - } - } - // 1fr . - // 1fr 1fr - &.pi-wrapper__grid--four-1-0-1-1 { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-areas: - 'item1' - '.' - 'item2' - 'item3'; - } - - &:not(.is-responsive) { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - grid-template-areas: - 'item1 .' - 'item2 item3'; - } - } - &.is-responsive { - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-areas: - 'item1 .' - 'item2 item3'; - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-areas: 'item1 . item2 item3'; - } - } - } - // 1fr 1fr - // . 1fr - &.pi-wrapper__grid--four-1-1-0-1 { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-areas: - 'item1' - 'item2' - '.' - 'item3'; - } - - &:not(.is-responsive) { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - grid-template-areas: - 'item1 item2' - '. item3'; - } - } - &.is-responsive { - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-areas: - 'item1 item2' - '. item3'; - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-areas: 'item1 item2 . item3'; - } - } - } - // 1fr 1fr - // 1fr . - &.pi-wrapper__grid--four-1-1-1-0 { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-areas: - 'item1' - 'item2' - 'item3' - '.'; - } - - &:not(.is-responsive) { - // Tablet & Desktop - @media screen and (min-width: 40rem) { - grid-template-areas: - 'item1 item2' - 'item3 .'; - } - } - &.is-responsive { - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-areas: - 'item1 item2' - 'item3 .'; - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-areas: 'item1 item2 item3 .'; - } - } - } - } - &.pi-wrapper__max-width--full-width { - // Desktop S - @media screen and (min-width: 77.5rem) and (max-width: 90rem) { - max-width: var(--pi-website-width-container-s); - } - // Desktop M - @media screen and (min-width: 90rem) and (max-width: 120rem) { - max-width: var(--pi-website-width-container); - } - // Desktop L - @media screen and (min-width: 120rem) { - max-width: var(--pi-website-width-container-l); - } - } - - &.pi-wrapper__fill--fill-available { - width: -webkit-fill-available; - } - - // 3 - &.pi-wrapper__grid--columns-3 { - // Is Responsive - &.is-responsive { - // Mobile S - @media screen and (max-width: 62rem) { - grid-template-columns: repeat(1, 1fr); - } - // Tablet & Desktop S - @media screen and (min-width: 62rem) and (max-width: 77.5rem) { - grid-template-columns: repeat(2, 1fr); - } - // Tablet & Desktop - @media screen and (min-width: 77.5rem) { - grid-template-columns: repeat(3, 1fr); - } - } - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(3, 1fr); - } - } - // 4 - &.pi-wrapper__grid--columns-4 { - // Is Responsive - &.is-responsive { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: repeat(1, 1fr); - } - // Tablet S - @media screen and (min-width: 40rem) and (max-width: 62rem) { - grid-template-columns: repeat(2, 1fr); - } - // Tablet L - @media screen and (min-width: 62rem) and (min-width: 77.5rem) { - grid-template-columns: repeat(4, 1fr); - } - // Desktop - @media screen and (min-width: 77.5rem) { - width: 25%; - } - } - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(4, 1fr); - } - } - // 5 - &.pi-wrapper__grid--columns-5 { - // Is Responsive - &.is-responsive { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: repeat(2, 1fr); - } - // Tablet S - @media screen and (min-width: 40rem) and (max-width: 62rem) { - grid-template-columns: repeat(3, 1fr); - } - // Tablet L & Desktop - @media screen and (min-width: 62rem) { - grid-template-columns: repeat(5, 1fr); - } - } - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(5, 1fr); - } - } - // 6 - &.pi-wrapper__grid--columns-6 { - // Is Responsive - &.is-responsive { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: repeat(2, 1fr); - } - // Tablet - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - grid-template-columns: repeat(3, 1fr); - } - // Desktop - @media screen and (min-width: 77.5rem) { - grid-template-columns: repeat(6, 1fr); - } - } - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(6, 1fr); - } - } - // 7 - &.pi-wrapper__grid--columns-7 { - // Is Responsive - &.is-responsive { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: repeat(2, 1fr); - } - // Tablet S - @media screen and (min-width: 40rem) and (max-width: 62rem) { - grid-template-columns: repeat(3, 1fr); - } - // Tablet L & Desktop - @media screen and (min-width: 62rem) and (max-width: 77.5rem) { - grid-template-columns: repeat(4, 1fr); - } - // Tablet L & Desktop - @media screen and (min-width: 77.5rem) { - grid-template-columns: repeat(7, 1fr); - } - } - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(7, 1fr); - } - } - // 8 - &.pi-wrapper__grid--columns-8 { - // Is Responsive - &.is-responsive { - // Mobile - @media screen and (max-width: 40rem) { - grid-template-columns: repeat(2, 1fr); - } - // Tablet S - @media screen and (min-width: 40rem) and (max-width: 62rem) { - grid-template-columns: repeat(4, 1fr); - } - // Tablet L & Desktop - @media screen and (min-width: 62rem) and (max-width: 77.5rem) { - grid-template-columns: repeat(6, 1fr); - } - // Tablet L & Desktop - @media screen and (min-width: 77.5rem) { - grid-template-columns: repeat(8, 1fr); - } - } - // NOT Is Responsive - &:not(.is-responsive) { - grid-template-columns: repeat(8, 1fr); - } - } - // Justify - // Center - &.pi-wrapper__justify-items--center { - justify-items: center; - } - // End - &.pi-wrapper__justify-items--end { - justify-items: end; - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - // 2 cols - @include gridWrapper2Columns; - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - // 2 cols - @include gridWrapper2Columns(2); - @include gridWrapperColmnsWidths; - } - } -} +// 2 cols +@mixin gridWrapper2Columns($columns: 1) { + .pi-wrapper { + &.pi-wrapper__grid { + // 3 + &.pi-wrapper__grid--columns-2 { + grid-template-columns: repeat(#{$columns}, 1fr); + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(2, 1fr); + } + } + } + } +} + +@mixin gridWrapperColmnsWidths { + .pi-wrapper { + &.pi-wrapper__grid { + &.pi-wrapper__grid--columns-2 { + // 2 / 3 + &.pi-wrapper__grid--two-thirds { + grid-template-columns: 2fr 1fr; + } + // 1 / 2 + &.pi-wrapper__grid--half { + grid-template-columns: repeat(1, 1fr); + } + // 1 / 3 + &.pi-wrapper__grid--third { + grid-template-columns: 1fr 2fr; + } + // 1 / 4 + &.pi-wrapper__grid--quarter { + grid-template-columns: 1fr 3fr; + } + // 1 / 5 + &.pi-wrapper__grid--fifth { + grid-template-columns: 1fr 4fr; + } + // 1 / 6 + &.pi-wrapper__grid--sixth { + grid-template-columns: 1fr 5fr; + } + } + } + } +} + +.pi-wrapper { + // Grid directive + &.pi-wrapper__grid { + display: grid; + // Align items + &.pi-wrapper__align-items--start { + align-items: start; + } + &.pi-wrapper__align-items--center { + align-items: center; + } + &.pi-wrapper__align-items--end { + align-items: end; + } + // Align self + &.pi-wrapper__align-self--start { + align-self: start; + } + &.pi-wrapper__align-self--center { + align-self: center; + } + &.pi-wrapper__align-self--end { + align-self: end; + } + // Grid Half + &.pi-wrapper__grid--half { + grid-gap: var(--pi-spacing-x-large); + // Fill + &.pi-wrapper__fill--fit-content { + width: fit-content; + } + &.pi-wrapper__fill--fill-available { + width: -webkit-fill-available; + } + + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: 1fr; + grid-template-rows: repeat(2, 1fr); + } + // Tablet & Dektop + @media screen and (min-width: 40rem) { + grid-template-columns: repeat(2, 1fr); + } + } + // Grid Four + &.pi-wrapper__grid--four { + justify-items: center; + &.pi-wrapper__fill--fill-available { + width: -webkit-fill-available; + & > *:nth-child(n + 1) { + width: -webkit-fill-available; + } + } + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: 1fr; + grid-template-rows: repeat(2, 1fr); + } + &:not(.is-responsive) { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + grid-template-columns: repeat(2, 1fr); + } + } + + &.is-responsive { + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-columns: repeat(2, 1fr); + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-columns: repeat(4, 1fr); + } + } + // Gap + &.pi-wrapper__gap-l { + grid-gap: var(--pi-spacing-large); + } + &.pi-wrapper__gap-x-l { + grid-gap: var(--pi-spacing-x-large); + } + &.pi-wrapper__gap-xx-l { + grid-gap: var(--pi-spacing-xx-large); + } + &.pi-wrapper__gap-xxx-l { + grid-gap: var(--pi-spacing-xxx-large); + } + &.pi-wrapper__gap-xxxx-l { + grid-gap: var(--pi-spacing-xxxx-large); + } + + & > *:nth-child(1) { + grid-area: item1; + } + & > *:nth-child(2) { + grid-area: item2; + } + & > *:nth-child(3) { + grid-area: item3; + } + & > *:nth-child(4) { + grid-area: item4; + } + + // 1fr 1fr + // 1fr 1fr + &.pi-wrapper__grid--four-1-1-1-1 { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-areas: + 'item1' + 'item2' + 'item3' + 'item4'; + } + + &:not(.is-responsive) { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + grid-template-areas: + 'item1 item2' + 'item3 item4'; + } + } + &.is-responsive { + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-areas: + 'item1 item2' + 'item3 item4'; + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-areas: 'item1 item2 item3 item4'; + } + } + } + // . 1fr + // 1fr 1fr + &.pi-wrapper__grid--four-0-1-1-1 { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-areas: + '.' + 'item1' + 'item2' + 'item3'; + } + + &:not(.is-responsive) { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + grid-template-areas: + '. item1' + 'item2 item3'; + } + } + &.is-responsive { + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-areas: + '. item1' + 'item2 item3'; + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-areas: '. item1 item2 item3'; + } + } + } + // 1fr . + // 1fr 1fr + &.pi-wrapper__grid--four-1-0-1-1 { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-areas: + 'item1' + '.' + 'item2' + 'item3'; + } + + &:not(.is-responsive) { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + grid-template-areas: + 'item1 .' + 'item2 item3'; + } + } + &.is-responsive { + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-areas: + 'item1 .' + 'item2 item3'; + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-areas: 'item1 . item2 item3'; + } + } + } + // 1fr 1fr + // . 1fr + &.pi-wrapper__grid--four-1-1-0-1 { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-areas: + 'item1' + 'item2' + '.' + 'item3'; + } + + &:not(.is-responsive) { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + grid-template-areas: + 'item1 item2' + '. item3'; + } + } + &.is-responsive { + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-areas: + 'item1 item2' + '. item3'; + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-areas: 'item1 item2 . item3'; + } + } + } + // 1fr 1fr + // 1fr . + &.pi-wrapper__grid--four-1-1-1-0 { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-areas: + 'item1' + 'item2' + 'item3' + '.'; + } + + &:not(.is-responsive) { + // Tablet & Desktop + @media screen and (min-width: 40rem) { + grid-template-areas: + 'item1 item2' + 'item3 .'; + } + } + &.is-responsive { + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-areas: + 'item1 item2' + 'item3 .'; + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-areas: 'item1 item2 item3 .'; + } + } + } + } + &.pi-wrapper__max-width--full-width { + // Desktop S + @media screen and (min-width: 77.5rem) and (max-width: 90rem) { + max-width: var(--pi-website-width-container-s); + } + // Desktop M + @media screen and (min-width: 90rem) and (max-width: 120rem) { + max-width: var(--pi-website-width-container); + } + // Desktop L + @media screen and (min-width: 120rem) { + max-width: var(--pi-website-width-container-l); + } + } + + &.pi-wrapper__fill--fill-available { + width: -webkit-fill-available; + } + + // 3 + &.pi-wrapper__grid--columns-3 { + // Is Responsive + &.is-responsive { + // Mobile S + @media screen and (max-width: 62rem) { + grid-template-columns: repeat(1, 1fr); + } + // Tablet & Desktop S + @media screen and (min-width: 62rem) and (max-width: 77.5rem) { + grid-template-columns: repeat(2, 1fr); + } + // Tablet & Desktop + @media screen and (min-width: 77.5rem) { + grid-template-columns: repeat(3, 1fr); + } + } + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(3, 1fr); + } + } + // 4 + &.pi-wrapper__grid--columns-4 { + // Is Responsive + &.is-responsive { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: repeat(1, 1fr); + } + // Tablet S + @media screen and (min-width: 40rem) and (max-width: 62rem) { + grid-template-columns: repeat(2, 1fr); + } + // Tablet L + @media screen and (min-width: 62rem) and (min-width: 77.5rem) { + grid-template-columns: repeat(4, 1fr); + } + // Desktop + @media screen and (min-width: 77.5rem) { + width: 25%; + } + } + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(4, 1fr); + } + } + // 5 + &.pi-wrapper__grid--columns-5 { + // Is Responsive + &.is-responsive { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: repeat(2, 1fr); + } + // Tablet S + @media screen and (min-width: 40rem) and (max-width: 62rem) { + grid-template-columns: repeat(3, 1fr); + } + // Tablet L & Desktop + @media screen and (min-width: 62rem) { + grid-template-columns: repeat(5, 1fr); + } + } + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(5, 1fr); + } + } + // 6 + &.pi-wrapper__grid--columns-6 { + // Is Responsive + &.is-responsive { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: repeat(2, 1fr); + } + // Tablet + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + grid-template-columns: repeat(3, 1fr); + } + // Desktop + @media screen and (min-width: 77.5rem) { + grid-template-columns: repeat(6, 1fr); + } + } + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(6, 1fr); + } + } + // 7 + &.pi-wrapper__grid--columns-7 { + // Is Responsive + &.is-responsive { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: repeat(2, 1fr); + } + // Tablet S + @media screen and (min-width: 40rem) and (max-width: 62rem) { + grid-template-columns: repeat(3, 1fr); + } + // Tablet L & Desktop + @media screen and (min-width: 62rem) and (max-width: 77.5rem) { + grid-template-columns: repeat(4, 1fr); + } + // Tablet L & Desktop + @media screen and (min-width: 77.5rem) { + grid-template-columns: repeat(7, 1fr); + } + } + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(7, 1fr); + } + } + // 8 + &.pi-wrapper__grid--columns-8 { + // Is Responsive + &.is-responsive { + // Mobile + @media screen and (max-width: 40rem) { + grid-template-columns: repeat(2, 1fr); + } + // Tablet S + @media screen and (min-width: 40rem) and (max-width: 62rem) { + grid-template-columns: repeat(4, 1fr); + } + // Tablet L & Desktop + @media screen and (min-width: 62rem) and (max-width: 77.5rem) { + grid-template-columns: repeat(6, 1fr); + } + // Tablet L & Desktop + @media screen and (min-width: 77.5rem) { + grid-template-columns: repeat(8, 1fr); + } + } + // NOT Is Responsive + &:not(.is-responsive) { + grid-template-columns: repeat(8, 1fr); + } + } + // Justify + // Center + &.pi-wrapper__justify-items--center { + justify-items: center; + } + // End + &.pi-wrapper__justify-items--end { + justify-items: end; + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + // 2 cols + @include gridWrapper2Columns; + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + // 2 cols + @include gridWrapper2Columns(2); + @include gridWrapperColmnsWidths; + } + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss index 2f4ec42..55afdd8 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss @@ -1,288 +1,288 @@ -@mixin headerWrapperHeight($height: 2.75rem) { - .pi-wrapper { - &.pi-wrapper__header { - &:not(.pi-wrapper__full-grid) { - & > header, - & > .pi-header-wrapper-content__right { - height: $height; - } - } - } - } -} - -.pi-wrapper { - // Header Wrapper - &.pi-wrapper__header { - display: flex; - justify-content: space-between; - - & > header { - & > .pi-text-viewer { - &:nth-of-type(1) { - &:hover { - cursor: pointer; - & > * { - cursor: pointer; - & > * { - cursor: pointer; - } - } - } - .mat-icon { - transition: all 0.2s ease; - } - &:hover { - .mat-icon { - transform: translateX(-0.25rem); - } - } - } - } - - & > span { - color: var(--pi-color-primary); - font: { - size: var(--pi-font-size-medium); - weight: 300; - style: italic; - } - } - - & > a { - color: var(--pi-color-grey); - display: flex; - align-items: center; - column-gap: var(--pi-spacing-xx-small); - } - } - // Justify - &.pi-wrapper__justify--center { - margin: auto; - } - // Align items - // End - &.pi-wrapper__align-items--flex-end { - & > header { - display: flex; - align-items: flex-end; - } - .pi-header-wrapper-content { - display: flex; - align-items: flex-end; - height: 100%; - } - } - // Center - &.pi-wrapper__align-items--center { - .pi-header-wrapper-content { - display: flex; - height: 100%; - } - } - - // Flex direction - &.pi-wrapper__flex-direction--column { - justify-content: flex-end; - - .pi-header-wrapper-content { - flex-direction: column; - gap: var(--pi-spacing-xxx-small); - &.pi-header-wrapper-content__left { - align-items: flex-start; - justify-content: center; - } - } - } - // Full grid - &.pi-wrapper__full-grid { - & > header { - margin-top: var(--pi-spacing-x-small); - width: 100%; - } - } - .pi-form-field__search, - .pi-button__toggle { - &:not(:hover) { - box-shadow: var(--pi-box-shadow); - } - } - } -} - -html { - &.is-mobile { - .pi-shell { - &.pi-shell__deale-saas { - @include headerWrapperHeight; - } - } - .pi-layout__main { - .pi-wrapper { - &.pi-wrapper__header { - // Flex direction - &.pi-wrapper__flex-direction--column { - flex-direction: column; - align-items: flex-start; - gap: var(--pi-spacing-medium); - .pi-header-wrapper-content { - &.pi-header-wrapper-content__right { - align-items: flex-start; - } - } - } - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-header-wrapper-content { - &.pi-header-wrapper-content__center { - width: 100%; - } - - &.pi-header-wrapper-content__right { - & > aside { - .pi-form-field__search { - // Is expanded - &.is-expanded { - position: absolute; - left: var(--pi-spacing-medium); - width: calc(100% - var(--pi-spacing-xx-large)); - margin-top: -1.5rem; - } - } - .pi-toggle-button { - span { - display: none; - } - } - } - } - } - } - } - // Tablet - &.is-tablet { - .pi-shell { - &.pi-shell__deale-saas { - @include headerWrapperHeight(var(--pi-height-layout-header)); - } - } - - // Tablet S - &.is-tablet__small { - } - // Tablet L - &.is-tablet__large { - } - } - - &:not(.is-mobile) { - .pi-layout__main { - .pi-wrapper { - &.pi-wrapper__header { - // Flex direction - &.pi-wrapper__flex-direction--column { - flex-direction: row; - justify-content: space-between; - .pi-header-wrapper-content { - &.pi-header-wrapper-content__center { - width: 66.66%; - } - &.pi-header-wrapper-content__right { - align-items: flex-end; - } - } - } - } - } - } - } - // Desktop - &.is-desktop { - .pi-header-wrapper-content { - &:not(.pi-header-wrapper-content__center) { - width: 50%; - } - } - - .pi-shell { - &.pi-shell__deale-saas { - @include headerWrapperHeight(var(--pi-height-layout-header)); - } - } - - .pi-wrapper { - &.pi-wrapper__header { - // 1/4 - 3/4 - &.pi-wrapper__grid--quarter { - & > header { - width: 25%; - } - .pi-header-wrapper-content__right { - width: 75%; - } - } - // 1/3 - 2/3 - &.pi-wrapper__grid--third { - & > header { - width: 33.33%; - } - .pi-header-wrapper-content__right { - width: 66.66%; - } - } - // 1/2 - 1/2 - &.pi-wrapper__grid--half { - & > header { - width: 50%; - } - .pi-header-wrapper-content__right { - width: 50%; - } - } - // 2/5 - 3/5 - &.pi-wrapper__grid--fifth { - & > header { - width: 40%; - } - .pi-header-wrapper-content__right { - width: 60%; - } - } - - // Reverse - &.pi-wrapper__grid--reverse-quarter { - & > header { - width: 75%; - } - .pi-header-wrapper-content__right { - width: 25%; - } - } - // 1/3 - 2/3 - &.pi-wrapper__grid--reverse-third { - & > header { - width: 66.66%; - } - .pi-header-wrapper-content__right { - width: 33.33%; - } - } - // 3/5 - 2/5 - &.pi-wrapper__grid--reverse-fifth { - & > header { - width: 60%; - } - .pi-header-wrapper-content__right { - width: 40%; - } - } - } - } - } -} +@mixin headerWrapperHeight($height: 2.75rem) { + .pi-wrapper { + &.pi-wrapper__header { + &:not(.pi-wrapper__full-grid) { + & > header, + & > .pi-header-wrapper-content__right { + height: $height; + } + } + } + } +} + +.pi-wrapper { + // Header Wrapper + &.pi-wrapper__header { + display: flex; + justify-content: space-between; + + & > header { + & > .pi-text-viewer { + &:nth-of-type(1) { + &:hover { + cursor: pointer; + & > * { + cursor: pointer; + & > * { + cursor: pointer; + } + } + } + .mat-icon { + transition: all 0.2s ease; + } + &:hover { + .mat-icon { + transform: translateX(-0.25rem); + } + } + } + } + + & > span { + color: var(--pi-color-primary); + font: { + size: var(--pi-font-size-medium); + weight: 300; + style: italic; + } + } + + & > a { + color: var(--pi-color-grey); + display: flex; + align-items: center; + column-gap: var(--pi-spacing-xx-small); + } + } + // Justify + &.pi-wrapper__justify--center { + margin: auto; + } + // Align items + // End + &.pi-wrapper__align-items--flex-end { + & > header { + display: flex; + align-items: flex-end; + } + .pi-header-wrapper-content { + display: flex; + align-items: flex-end; + height: 100%; + } + } + // Center + &.pi-wrapper__align-items--center { + .pi-header-wrapper-content { + display: flex; + height: 100%; + } + } + + // Flex direction + &.pi-wrapper__flex-direction--column { + justify-content: flex-end; + + .pi-header-wrapper-content { + flex-direction: column; + gap: var(--pi-spacing-xxx-small); + &.pi-header-wrapper-content__left { + align-items: flex-start; + justify-content: center; + } + } + } + // Full grid + &.pi-wrapper__full-grid { + & > header { + margin-top: var(--pi-spacing-x-small); + width: 100%; + } + } + .pi-form-field__search, + .pi-button__toggle { + &:not(:hover) { + box-shadow: var(--pi-box-shadow); + } + } + } +} + +html { + &.is-mobile { + .pi-shell { + &.pi-shell__deale-saas { + @include headerWrapperHeight; + } + } + .pi-layout__main { + .pi-wrapper { + &.pi-wrapper__header { + // Flex direction + &.pi-wrapper__flex-direction--column { + flex-direction: column; + align-items: flex-start; + gap: var(--pi-spacing-medium); + .pi-header-wrapper-content { + &.pi-header-wrapper-content__right { + align-items: flex-start; + } + } + } + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-header-wrapper-content { + &.pi-header-wrapper-content__center { + width: 100%; + } + + &.pi-header-wrapper-content__right { + & > aside { + .pi-form-field__search { + // Is expanded + &.is-expanded { + position: absolute; + left: var(--pi-spacing-medium); + width: calc(100% - var(--pi-spacing-xx-large)); + margin-top: -1.5rem; + } + } + .pi-toggle-button { + span { + display: none; + } + } + } + } + } + } + } + // Tablet + &.is-tablet { + .pi-shell { + &.pi-shell__deale-saas { + @include headerWrapperHeight(var(--pi-height-layout-header)); + } + } + + // Tablet S + &.is-tablet__small { + } + // Tablet L + &.is-tablet__large { + } + } + + &:not(.is-mobile) { + .pi-layout__main { + .pi-wrapper { + &.pi-wrapper__header { + // Flex direction + &.pi-wrapper__flex-direction--column { + flex-direction: row; + justify-content: space-between; + .pi-header-wrapper-content { + &.pi-header-wrapper-content__center { + width: 66.66%; + } + &.pi-header-wrapper-content__right { + align-items: flex-end; + } + } + } + } + } + } + } + // Desktop + &.is-desktop { + .pi-header-wrapper-content { + &:not(.pi-header-wrapper-content__center) { + width: 50%; + } + } + + .pi-shell { + &.pi-shell__deale-saas { + @include headerWrapperHeight(var(--pi-height-layout-header)); + } + } + + .pi-wrapper { + &.pi-wrapper__header { + // 1/4 - 3/4 + &.pi-wrapper__grid--quarter { + & > header { + width: 25%; + } + .pi-header-wrapper-content__right { + width: 75%; + } + } + // 1/3 - 2/3 + &.pi-wrapper__grid--third { + & > header { + width: 33.33%; + } + .pi-header-wrapper-content__right { + width: 66.66%; + } + } + // 1/2 - 1/2 + &.pi-wrapper__grid--half { + & > header { + width: 50%; + } + .pi-header-wrapper-content__right { + width: 50%; + } + } + // 2/5 - 3/5 + &.pi-wrapper__grid--fifth { + & > header { + width: 40%; + } + .pi-header-wrapper-content__right { + width: 60%; + } + } + + // Reverse + &.pi-wrapper__grid--reverse-quarter { + & > header { + width: 75%; + } + .pi-header-wrapper-content__right { + width: 25%; + } + } + // 1/3 - 2/3 + &.pi-wrapper__grid--reverse-third { + & > header { + width: 66.66%; + } + .pi-header-wrapper-content__right { + width: 33.33%; + } + } + // 3/5 - 2/5 + &.pi-wrapper__grid--reverse-fifth { + & > header { + width: 60%; + } + .pi-header-wrapper-content__right { + width: 40%; + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss index b086505..8e12b8d 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss @@ -1,154 +1,154 @@ -@mixin listWrapperHeight($device: mobile, $extra-height: 5.2) { - .pi-layout__07-list { - .pi-wrapper { - &.pi-wrapper__list { - // Has Scroll - &.pi-wrapper__list--has-scroll { - & > section { - overflow-y: scroll; - height: calc( - 100vh - var(--pi-height-header-#{$device}) - var(--pi-height-layout-header) - #{$extra-height}rem - ); - &::-webkit-scrollbar { - display: none; - } - } - } - } - } - } -} - -@mixin listWrapperWidth($width: calc(100% - var(--pi-spacing-xxx-small))) { - .pi-wrapper { - // List Wrapper - &.pi-wrapper__list { - & > section { - max-width: $width; - } - } - } -} - -@mixin listWrapperNoResultsTemplate($min-height, $padding) { - .pi-wrapper { - // List Wrapper - &.pi-wrapper__list { - & > section { - .pi-wrapper { - &.pi-wrapper__flex-direction--column { - &.pi-wrapper__justify--center { - min-height: $min-height; - padding-top: $padding; - padding-bottom: $padding; - } - } - } - } - } - } -} - -// Common -.pi-wrapper { - // List Wrapper - &.pi-wrapper__list { - header { - &.pi-wrapper__justify--space-between { - & > *:nth-child(n + 1) { - width: -webkit-fill-available; - } - } - } - // Has Scroll - &.pi-wrapper__list--has-scroll { - & > section { - border: 1px solid transparent; - overflow-y: auto; - overflow-x: hidden; - - .pi-data-grid__mode--grid { - overflow-y: auto; - overflow-x: hidden; - &::-webkit-scrollbar { - display: none; - } - } - } - } - } -} - -// Mode Grid -.is-mode-grid { - @include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large)); - .pi-wrapper { - &.pi-wrapper__list { - & > section { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-xxx-small); - .pi-data-grid__mode--grid { - display: flex; - flex-wrap: wrap; - flex-grow: 0; - flex-shrink: 0; - gap: var(--pi-spacing-x-large); - padding-bottom: var(--pi-spacing-medium); - } - } - } - } -} - -.is-mode-list { - @include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large)); -} - -html { - // Mobile - &.is-mobile { - @include listWrapperHeight; - @include listWrapperWidth; - } - - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include listWrapperHeight(tablet, 5.7); - @include listWrapperWidth; - } - // Tablet L - &.is-tablet__large { - @include listWrapperHeight(tablet, 3); - @include listWrapperWidth(100%); - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - // Mode List - - .is-mode-list { - .pi-wrapper { - &.pi-wrapper__list { - border-radius: var(--pi-border-radius-large); - background-color: var(--pi-color-white); - box-shadow: var(--pi-box-shadow-panel); - } - } - } - } - } - - // Desktop - &.is-desktop { - @include listWrapperWidth(100%); - .pi-layout__07-list { - @include listWrapperHeight(desktop, 7.8); - } - } -} +@mixin listWrapperHeight($device: mobile, $extra-height: 5.2) { + .pi-layout__07-list { + .pi-wrapper { + &.pi-wrapper__list { + // Has Scroll + &.pi-wrapper__list--has-scroll { + & > section { + overflow-y: scroll; + height: calc( + 100vh - var(--pi-height-header-#{$device}) - var(--pi-height-layout-header) - #{$extra-height}rem + ); + &::-webkit-scrollbar { + display: none; + } + } + } + } + } + } +} + +@mixin listWrapperWidth($width: calc(100% - var(--pi-spacing-xxx-small))) { + .pi-wrapper { + // List Wrapper + &.pi-wrapper__list { + & > section { + max-width: $width; + } + } + } +} + +@mixin listWrapperNoResultsTemplate($min-height, $padding) { + .pi-wrapper { + // List Wrapper + &.pi-wrapper__list { + & > section { + .pi-wrapper { + &.pi-wrapper__flex-direction--column { + &.pi-wrapper__justify--center { + min-height: $min-height; + padding-top: $padding; + padding-bottom: $padding; + } + } + } + } + } + } +} + +// Common +.pi-wrapper { + // List Wrapper + &.pi-wrapper__list { + header { + &.pi-wrapper__justify--space-between { + & > *:nth-child(n + 1) { + width: -webkit-fill-available; + } + } + } + // Has Scroll + &.pi-wrapper__list--has-scroll { + & > section { + border: 1px solid transparent; + overflow-y: auto; + overflow-x: hidden; + + .pi-data-grid__mode--grid { + overflow-y: auto; + overflow-x: hidden; + &::-webkit-scrollbar { + display: none; + } + } + } + } + } +} + +// Mode Grid +.is-mode-grid { + @include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large)); + .pi-wrapper { + &.pi-wrapper__list { + & > section { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-xxx-small); + .pi-data-grid__mode--grid { + display: flex; + flex-wrap: wrap; + flex-grow: 0; + flex-shrink: 0; + gap: var(--pi-spacing-x-large); + padding-bottom: var(--pi-spacing-medium); + } + } + } + } +} + +.is-mode-list { + @include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large)); +} + +html { + // Mobile + &.is-mobile { + @include listWrapperHeight; + @include listWrapperWidth; + } + + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include listWrapperHeight(tablet, 5.7); + @include listWrapperWidth; + } + // Tablet L + &.is-tablet__large { + @include listWrapperHeight(tablet, 3); + @include listWrapperWidth(100%); + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + // Mode List + + .is-mode-list { + .pi-wrapper { + &.pi-wrapper__list { + border-radius: var(--pi-border-radius-large); + background-color: var(--pi-color-white); + box-shadow: var(--pi-box-shadow-panel); + } + } + } + } + } + + // Desktop + &.is-desktop { + @include listWrapperWidth(100%); + .pi-layout__07-list { + @include listWrapperHeight(desktop, 7.8); + } + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss index aaaf257..321d991 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss @@ -1,164 +1,164 @@ -@mixin mainWrapperCentered($height: calc(100% - var(--pi-height-header-mobile))) { - .pi-shell__deale-saas { - & > div { - // NOT Is fullscreen - &:not(.is-fullscreen) { - .pi-layout { - // Main layouts - &.pi-layout__main { - // Center - .pi-wrapper { - &.pi-wrapper__main { - // Center - &.is-centered { - height: $height; - & > section { - height: $height; - } - } - } - } - } - } - } - // Is fullscreen - &.is-fullscreen { - .pi-wrapper { - &.pi-wrapper__main { - // Center - &.is-centered { - height: 100%; - & > section { - height: 100%; - } - } - } - } - } - } - } -} - -.pi-wrapper { - &.pi-wrapper__main { - // Main wrapper - & > section { - display: flex; - width: 100%; - } - // Flex direction - &.pi-wrapper__flex-direction--column { - & > section { - flex-direction: column; - } - } - // Type document - &.pi-wrapper__main--type-document { - padding-bottom: calc(var(--pi-height-action-bar) + var(--pi-spacing-x-large)); - h1 { - text-align: center; - } - } - // Justify content - &.pi-wrapper__justify--center { - & > section { - justify-content: center; - } - } - // Align items - // Center - &.pi-wrapper__align-items--center { - & > section { - align-items: center; - } - } - // Flex end - &.pi-wrapper__align-items--flex-end { - & > section { - align-items: flex-end; - } - } - // Gap - // 0.75rem - 12px - &.pi-wrapper__gap--s { - & > section { - gap: var(--pi-spacing-small); - } - } - // 1rem - 16px - &.pi-wrapper__gap--m { - & > section { - gap: var(--pi-spacing-medium); - } - } - // 1.25rem - 20px - &.pi-wrapper__gap--l { - & > section { - gap: var(--pi-spacing-large); - } - } - // 1.5rem - 24px - &.pi-wrapper__gap--xl { - & > section { - gap: var(--pi-spacing-x-large); - } - } - // 2rem - 32px - &.pi-wrapper__gap--xxl { - & > section { - gap: var(--pi-spacing-xx-large); - } - } - // 2.5rem - 40px - &.pi-wrapper__gap--xxxl { - gap: var(--pi-spacing-xxx-large); - } - } -} -.pi-main-wrapper-content { - flex: 1 1 auto; - display: block; - & > * + * { - display: block; - margin-top: var(--pi-spacing-x-large); - } - .pi-list-item { - display: flex; - } - &.is-sticky { - height: fit-content; - position: sticky; - top: 0; - z-index: 9; - padding-top: var(--pi-spacing-small); - background-color: var(--pi-color-white); - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - .pi-wrapper { - &.pi-wrapper__main { - & > section { - flex-direction: column; - } - } - } - } - - // Mobile & Tablet S - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - @include mainWrapperCentered; - } - } - // Tablet L & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - @include mainWrapperCentered(calc(100% - var(--pi-height-header))); - } - } -} +@mixin mainWrapperCentered($height: calc(100% - var(--pi-height-header-mobile))) { + .pi-shell__deale-saas { + & > div { + // NOT Is fullscreen + &:not(.is-fullscreen) { + .pi-layout { + // Main layouts + &.pi-layout__main { + // Center + .pi-wrapper { + &.pi-wrapper__main { + // Center + &.is-centered { + height: $height; + & > section { + height: $height; + } + } + } + } + } + } + } + // Is fullscreen + &.is-fullscreen { + .pi-wrapper { + &.pi-wrapper__main { + // Center + &.is-centered { + height: 100%; + & > section { + height: 100%; + } + } + } + } + } + } + } +} + +.pi-wrapper { + &.pi-wrapper__main { + // Main wrapper + & > section { + display: flex; + width: 100%; + } + // Flex direction + &.pi-wrapper__flex-direction--column { + & > section { + flex-direction: column; + } + } + // Type document + &.pi-wrapper__main--type-document { + padding-bottom: calc(var(--pi-height-action-bar) + var(--pi-spacing-x-large)); + h1 { + text-align: center; + } + } + // Justify content + &.pi-wrapper__justify--center { + & > section { + justify-content: center; + } + } + // Align items + // Center + &.pi-wrapper__align-items--center { + & > section { + align-items: center; + } + } + // Flex end + &.pi-wrapper__align-items--flex-end { + & > section { + align-items: flex-end; + } + } + // Gap + // 0.75rem - 12px + &.pi-wrapper__gap--s { + & > section { + gap: var(--pi-spacing-small); + } + } + // 1rem - 16px + &.pi-wrapper__gap--m { + & > section { + gap: var(--pi-spacing-medium); + } + } + // 1.25rem - 20px + &.pi-wrapper__gap--l { + & > section { + gap: var(--pi-spacing-large); + } + } + // 1.5rem - 24px + &.pi-wrapper__gap--xl { + & > section { + gap: var(--pi-spacing-x-large); + } + } + // 2rem - 32px + &.pi-wrapper__gap--xxl { + & > section { + gap: var(--pi-spacing-xx-large); + } + } + // 2.5rem - 40px + &.pi-wrapper__gap--xxxl { + gap: var(--pi-spacing-xxx-large); + } + } +} +.pi-main-wrapper-content { + flex: 1 1 auto; + display: block; + & > * + * { + display: block; + margin-top: var(--pi-spacing-x-large); + } + .pi-list-item { + display: flex; + } + &.is-sticky { + height: fit-content; + position: sticky; + top: 0; + z-index: 9; + padding-top: var(--pi-spacing-small); + background-color: var(--pi-color-white); + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + .pi-wrapper { + &.pi-wrapper__main { + & > section { + flex-direction: column; + } + } + } + } + + // Mobile & Tablet S + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + @include mainWrapperCentered; + } + } + // Tablet L & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + @include mainWrapperCentered(calc(100% - var(--pi-height-header))); + } + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-wrapper.scss index baf367e..461f984 100644 --- a/libs/ui/src/lib/styles/common/wrappers/_pi-wrapper.scss +++ b/libs/ui/src/lib/styles/common/wrappers/_pi-wrapper.scss @@ -1,297 +1,297 @@ -.pi-wrapper { - // Align items - &.pi-wrapper__align-items--center { - align-items: center; - } - &.pi-wrapper__align-items--flex-end { - align-items: flex-end; - } - &.pi-wrapper__align-items--stretch { - align-items: stretch; - } - // Flex direction - &.pi-wrapper__flex-direction--column { - flex-direction: column; - } - &.pi-wrapper__flex-direction--column-reverse { - flex-direction: column-reverse; - } - &.pi-wrapper__flex-direction--row-reverse { - flex-direction: row-reverse; - } - &.pi-wrapper__full-width-auto { - margin: auto; - } - &.pi-wrapper__fit-content { - max-width: fit-content; - } - // Justify - &.pi-wrapper__justify--center { - justify-content: center; - } - &.pi-wrapper__justify--flex-end { - justify-content: flex-end; - } - &.pi-wrapper__justify--space-between { - justify-content: space-between; - } - &.pi-wrapper__justify--space-evenly { - justify-content: space-evenly; - } - // Gap - &.pi-wrapper__gap--xxxs { - gap: var(--pi-spacing-xxx-small); - } - // 0.5rem - 8px - &.pi-wrapper__gap--xxs { - gap: var(--pi-spacing-xx-small); - } - // 0.625rem - 10px - &.pi-wrapper__gap--xs { - gap: var(--pi-spacing-x-small); - } - // 0.75rem - 12px - &.pi-wrapper__gap--s { - gap: var(--pi-spacing-small); - } - // 1rem - 16px - &.pi-wrapper__gap--m { - gap: var(--pi-spacing-medium); - } - // 1.25rem - 20px - &.pi-wrapper__gap--l { - gap: var(--pi-spacing-large); - } - // 1.5rem - 24px - &.pi-wrapper__gap--xl { - gap: var(--pi-spacing-x-large); - } - // 2rem - 32px - &.pi-wrapper__gap--xxl { - gap: var(--pi-spacing-xx-large); - } - // 2.5rem - 40px - &.pi-wrapper__gap--xxxl { - gap: var(--pi-spacing-xxx-large); - } - // 3.375rem - 54px - &.pi-wrapper__gap--xxxxl { - gap: var(--pi-spacing-xxxx-large); - } - - // Flex directive - &.pi-wrapper__flex { - display: flex; - width: 100%; - // Wrap - &.pi-wrapper__flex-direction--wrap { - flex-wrap: wrap; - gap: var(--pi-spacing-xx-small); - } - // Flex horizontally - // Space between - &.pi-wrapper__justify--space-between { - justify-content: space-between; - } - // Space evenly - &.pi-wrapper__justify--space-around { - justify-content: space-around; - } - // Center - &.pi-wrapper__justify--center { - justify-content: center; - } - // Alignment - // Flex start - &.pi-wrapper__align-items--flex-start { - align-items: flex-start; - } - // Items width - // 25% - &.pi-wrapper__items-width--quarter { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - flex-direction: column; - } - & > *:nth-child(n + 1) { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - width: 100%; - } - // Tablet L - @media screen and (min-width: 62rem) and (min-width: 77.5rem) { - width: 33.33%; - } - // Desktop - @media screen and (min-width: 77.5rem) { - width: 25%; - } - } - } - // 33.33% - &.pi-wrapper__items-width--third { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - flex-direction: column; - } - - & > *:nth-child(n + 1) { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - width: 100%; - } - // Tablet L - @media screen and (min-width: 62rem) and (min-width: 77.5rem) { - width: 50%; - } - // Desktop - @media screen and (min-width: 77.5rem) { - width: 33.33%; - } - } - } - // 50% - &.pi-wrapper__items-width--half { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - flex-direction: column; - } - & > *:nth-child(n + 1) { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - width: 100%; - } - // Tablet L & Desktop - @media screen and (min-width: 62rem) { - width: 50%; - } - } - } - // 100% - &.pi-wrapper__items-width--full { - & > *:nth-child(n + 1) { - width: 100%; - } - } - } - // Padding - &.pi-wrapper__padding--xs { - padding: var(--pi-spacing-x-small); - } - - // Border - // Top - &.pi-wrapper__border--top { - border-top: 1px solid var(--pi-color-grey-25); - } - // Bottom - &.pi-wrapper__border--bottom { - border-bottom: 1px solid var(--pi-color-grey-25); - } -} - -// Responsive -html { - // Mobile - &.is-mobile { - .pi-wrapper { - // Padding - &.pi-wrapper__has-padding { - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - } - - // Grid - &.pi-wrapper__grid { - // Grid half - &.pi-wrapper__grid--half { - grid-template-columns: unset; - } - } - } - } - // Tablet - &.is-tablet { - .pi-wrapper { - // Padding - &.pi-wrapper__has-padding { - padding-left: var(--pi-spacing-xxx-large); - padding-right: var(--pi-spacing-xxx-large); - } - } - } - // Desktop - &.is-desktop { - .pi-wrapper { - // Grid - // 1/4 - 3/4 - &.pi-wrapper__grid--quarter { - .pi-main-wrapper-content__left { - width: 25%; - } - .pi-main-wrapper-content__right { - width: 75%; - } - } - // 1/3 - 2/3 - &.pi-wrapper__grid--third { - .pi-main-wrapper-content__left { - width: 33.33%; - } - .pi-main-wrapper-content__right { - width: 66.66%; - } - } - // 1/2 - 1/2 - &.pi-wrapper__grid--half { - .pi-main-wrapper-content__left { - width: 50%; - } - .pi-main-wrapper-content__right { - width: 50%; - } - } - // 2/5 - 3/5 - &.pi-wrapper__grid--fifth { - .pi-main-wrapper-content__left { - width: 40%; - } - .pi-main-wrapper-content__right { - width: 60%; - } - } - - // Reverse - &.pi-wrapper__grid--reverse-quarter { - .pi-main-wrapper-content__left { - width: 75%; - } - .pi-main-wrapper-content__right { - width: 25%; - } - } - // 1/3 - 2/3 - &.pi-wrapper__grid--reverse-third { - .pi-main-wrapper-content__left { - width: 66.66%; - } - .pi-main-wrapper-content__right { - width: 33.33%; - } - } - // 3/5 - 2/5 - &.pi-wrapper__grid--reverse-fifth { - .pi-main-wrapper-content__left { - width: 60%; - } - .pi-main-wrapper-content__right { - width: 40%; - } - } - &.pi-wrapper__has-padding { - padding-left: var(--pi-spacing-xxxx-large); - padding-right: var(--pi-spacing-xxxx-large); - } - } - } -} +.pi-wrapper { + // Align items + &.pi-wrapper__align-items--center { + align-items: center; + } + &.pi-wrapper__align-items--flex-end { + align-items: flex-end; + } + &.pi-wrapper__align-items--stretch { + align-items: stretch; + } + // Flex direction + &.pi-wrapper__flex-direction--column { + flex-direction: column; + } + &.pi-wrapper__flex-direction--column-reverse { + flex-direction: column-reverse; + } + &.pi-wrapper__flex-direction--row-reverse { + flex-direction: row-reverse; + } + &.pi-wrapper__full-width-auto { + margin: auto; + } + &.pi-wrapper__fit-content { + max-width: fit-content; + } + // Justify + &.pi-wrapper__justify--center { + justify-content: center; + } + &.pi-wrapper__justify--flex-end { + justify-content: flex-end; + } + &.pi-wrapper__justify--space-between { + justify-content: space-between; + } + &.pi-wrapper__justify--space-evenly { + justify-content: space-evenly; + } + // Gap + &.pi-wrapper__gap--xxxs { + gap: var(--pi-spacing-xxx-small); + } + // 0.5rem - 8px + &.pi-wrapper__gap--xxs { + gap: var(--pi-spacing-xx-small); + } + // 0.625rem - 10px + &.pi-wrapper__gap--xs { + gap: var(--pi-spacing-x-small); + } + // 0.75rem - 12px + &.pi-wrapper__gap--s { + gap: var(--pi-spacing-small); + } + // 1rem - 16px + &.pi-wrapper__gap--m { + gap: var(--pi-spacing-medium); + } + // 1.25rem - 20px + &.pi-wrapper__gap--l { + gap: var(--pi-spacing-large); + } + // 1.5rem - 24px + &.pi-wrapper__gap--xl { + gap: var(--pi-spacing-x-large); + } + // 2rem - 32px + &.pi-wrapper__gap--xxl { + gap: var(--pi-spacing-xx-large); + } + // 2.5rem - 40px + &.pi-wrapper__gap--xxxl { + gap: var(--pi-spacing-xxx-large); + } + // 3.375rem - 54px + &.pi-wrapper__gap--xxxxl { + gap: var(--pi-spacing-xxxx-large); + } + + // Flex directive + &.pi-wrapper__flex { + display: flex; + width: 100%; + // Wrap + &.pi-wrapper__flex-direction--wrap { + flex-wrap: wrap; + gap: var(--pi-spacing-xx-small); + } + // Flex horizontally + // Space between + &.pi-wrapper__justify--space-between { + justify-content: space-between; + } + // Space evenly + &.pi-wrapper__justify--space-around { + justify-content: space-around; + } + // Center + &.pi-wrapper__justify--center { + justify-content: center; + } + // Alignment + // Flex start + &.pi-wrapper__align-items--flex-start { + align-items: flex-start; + } + // Items width + // 25% + &.pi-wrapper__items-width--quarter { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + flex-direction: column; + } + & > *:nth-child(n + 1) { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + width: 100%; + } + // Tablet L + @media screen and (min-width: 62rem) and (min-width: 77.5rem) { + width: 33.33%; + } + // Desktop + @media screen and (min-width: 77.5rem) { + width: 25%; + } + } + } + // 33.33% + &.pi-wrapper__items-width--third { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + flex-direction: column; + } + + & > *:nth-child(n + 1) { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + width: 100%; + } + // Tablet L + @media screen and (min-width: 62rem) and (min-width: 77.5rem) { + width: 50%; + } + // Desktop + @media screen and (min-width: 77.5rem) { + width: 33.33%; + } + } + } + // 50% + &.pi-wrapper__items-width--half { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + flex-direction: column; + } + & > *:nth-child(n + 1) { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + width: 100%; + } + // Tablet L & Desktop + @media screen and (min-width: 62rem) { + width: 50%; + } + } + } + // 100% + &.pi-wrapper__items-width--full { + & > *:nth-child(n + 1) { + width: 100%; + } + } + } + // Padding + &.pi-wrapper__padding--xs { + padding: var(--pi-spacing-x-small); + } + + // Border + // Top + &.pi-wrapper__border--top { + border-top: 1px solid var(--pi-color-grey-25); + } + // Bottom + &.pi-wrapper__border--bottom { + border-bottom: 1px solid var(--pi-color-grey-25); + } +} + +// Responsive +html { + // Mobile + &.is-mobile { + .pi-wrapper { + // Padding + &.pi-wrapper__has-padding { + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + } + + // Grid + &.pi-wrapper__grid { + // Grid half + &.pi-wrapper__grid--half { + grid-template-columns: unset; + } + } + } + } + // Tablet + &.is-tablet { + .pi-wrapper { + // Padding + &.pi-wrapper__has-padding { + padding-left: var(--pi-spacing-xxx-large); + padding-right: var(--pi-spacing-xxx-large); + } + } + } + // Desktop + &.is-desktop { + .pi-wrapper { + // Grid + // 1/4 - 3/4 + &.pi-wrapper__grid--quarter { + .pi-main-wrapper-content__left { + width: 25%; + } + .pi-main-wrapper-content__right { + width: 75%; + } + } + // 1/3 - 2/3 + &.pi-wrapper__grid--third { + .pi-main-wrapper-content__left { + width: 33.33%; + } + .pi-main-wrapper-content__right { + width: 66.66%; + } + } + // 1/2 - 1/2 + &.pi-wrapper__grid--half { + .pi-main-wrapper-content__left { + width: 50%; + } + .pi-main-wrapper-content__right { + width: 50%; + } + } + // 2/5 - 3/5 + &.pi-wrapper__grid--fifth { + .pi-main-wrapper-content__left { + width: 40%; + } + .pi-main-wrapper-content__right { + width: 60%; + } + } + + // Reverse + &.pi-wrapper__grid--reverse-quarter { + .pi-main-wrapper-content__left { + width: 75%; + } + .pi-main-wrapper-content__right { + width: 25%; + } + } + // 1/3 - 2/3 + &.pi-wrapper__grid--reverse-third { + .pi-main-wrapper-content__left { + width: 66.66%; + } + .pi-main-wrapper-content__right { + width: 33.33%; + } + } + // 3/5 - 2/5 + &.pi-wrapper__grid--reverse-fifth { + .pi-main-wrapper-content__left { + width: 60%; + } + .pi-main-wrapper-content__right { + width: 40%; + } + } + &.pi-wrapper__has-padding { + padding-left: var(--pi-spacing-xxxx-large); + padding-right: var(--pi-spacing-xxxx-large); + } + } + } +} diff --git a/libs/ui/src/lib/styles/common/wrappers/index.scss b/libs/ui/src/lib/styles/common/wrappers/index.scss index 57d083c..a76331a 100644 --- a/libs/ui/src/lib/styles/common/wrappers/index.scss +++ b/libs/ui/src/lib/styles/common/wrappers/index.scss @@ -1,7 +1,7 @@ -@forward 'pi-action-wrapper'; -@forward 'pi-form-wrapper'; -@forward 'pi-grid-wrapper'; -@forward 'pi-header-wrapper'; -@forward 'pi-list-wrapper'; -@forward 'pi-main-wrapper'; -@forward 'pi-wrapper'; +@forward 'pi-action-wrapper'; +@forward 'pi-form-wrapper'; +@forward 'pi-grid-wrapper'; +@forward 'pi-header-wrapper'; +@forward 'pi-list-wrapper'; +@forward 'pi-main-wrapper'; +@forward 'pi-wrapper'; diff --git a/libs/ui/src/lib/styles/configs.ts b/libs/ui/src/lib/styles/configs.ts index 3d9e9a3..3b7f5e9 100644 --- a/libs/ui/src/lib/styles/configs.ts +++ b/libs/ui/src/lib/styles/configs.ts @@ -1,181 +1,181 @@ -// Shell level -export const shellTheming = (ShellClass: string) => `pi-shell pi-shell__${ShellClass}`; - -export const ShellClass = { - // Deale Landings (Public) - DealeLandings: shellTheming('deale-landings'), - // Deale SaaS (Private) - DealeSaaS: shellTheming('deale-saas'), - // Deale Website (Public) - DealeWebsite: shellTheming('deale-website'), -}; - -// View component level -// Container Layout ~ Landings -export const ContainerLayout = 'pi-container-layout'; - -// Layouts -// Heights -export const enum Height { - Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25 - Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50 - Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75 - Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100 -} - -export const height = (height: Height): string => `pi-layout__${height}`; - -// Responsive -export const heights = ( - mobileHeight: Height, - tabletHeight: Height, - desktopHeight: Height -): string => - `pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`; - -// Not Responsive -export const LayoutHeight = { - Small: height(Height.Small), // 25 - Medium: height(Height.Medium), // 50 - Large: height(Height.Large), // 75 - Full: height(Height.Full), // 100 -}; - -// HostBinding layout class with or without background image ~ Landings -export const layoutBackground = (imageName: string) => - `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`; - -export const backgroundWaveClass = (waveRef: string) => - `pi-background-wave pi-background-wave__${waveRef}`; - -// Not Responsive -export const LayoutWave = { - // Grey - Grey1: backgroundWaveClass('01-grey'), - Grey1RGBA: backgroundWaveClass('01-grey-rgba'), - Grey2: backgroundWaveClass('02-grey'), - Grey2RGBA: backgroundWaveClass('02-grey-rgba'), - // Highlighted - Highlighted1: backgroundWaveClass('01-highlighted'), - Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'), - Highlighted2: backgroundWaveClass('02-highlighted'), - Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'), - // Primary - Primary1: backgroundWaveClass('01-primary'), - Primary1RGBA: backgroundWaveClass('01-primary-rgba'), - Primary2: backgroundWaveClass('02-primary'), - Primary2RGBA: backgroundWaveClass('02-primary-rgba'), - // PrimaryWhite - PrimaryWhite1: backgroundWaveClass('01-primary-white'), - PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'), - PrimaryWhite2: backgroundWaveClass('02-primary-white'), - PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'), - // Primary50 - PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'), - Primary501: backgroundWaveClass('01-primary-50'), - PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'), - PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'), - Primary502: backgroundWaveClass('02-primary-50'), - PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'), - // White - White1: backgroundWaveClass('01-white'), - White1RGBA: backgroundWaveClass('01-white-rgba'), - White2: backgroundWaveClass('02-white'), - White2RGBA: backgroundWaveClass('02-white-rgba'), -}; - -// Layouts ~ SaaS & Landings -export const LayoutNoPadding = 'pi-layout__no-padding'; - -export const LayoutCollapsable = 'pi-layout__collapsable'; - -export const userType = (userType: string) => `is-${userType}`; - -// User type class -export const UserTypeClass = { - // Company - Company: userType('company'), - // Investor - Investor: userType('investor'), - // Advisor - Advisor: userType('advisor'), -}; - -// Layouts (Add to any view) -export const LayoutTypeClass = { - // Specifics - Authentication: 'pi-layout pi-layout__00-authentication', - Dashboard: 'pi-layout pi-layout__01-dashboard', - // TODO: Delete old dashboard layout when ready other users - DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old', - // Main Horizontally - // Full Width - FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width', - // Full Width Centered - FullWidthAuto: - 'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto', - // Main Vertically Centered - VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered', - // Main Space Between - SpaceBetween: 'pi-layout pi-layout__04-space-between', - // Splitted - Splitted: 'pi-layout pi-layout__05-splitted', - // SplittedPaywall - SplittedPaywall: 'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout', - // Edge to Edge - EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge', - // List Left - List: 'pi-layout pi-layout__07-list', - // Infinite Scroll - ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto', - // List Left - PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated', - // Form Layout - Form: 'pi-layout pi-layout__08-form', - // Pricing Layout - Pricing: 'pi-layout pi-layout__09-pricing', -}; - -export const WebsiteScreenTypeClass = { - ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you', -}; - -// Wrappers -export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`; - -export const WrapperTypeClass = { - Action: wrapperType('action'), - Form: wrapperType('form'), - Header: wrapperType('header'), - List: wrapperType('list'), - Main: wrapperType('main'), - Steps: wrapperType('steps'), -}; - -// Components -export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`; - -export const ComponentFamilyClass = { - Button: componentFamily('button'), - Card: componentFamily('card'), - Carousel: componentFamily('carousel'), - DomainComponent: componentFamily('domain-component'), - Chip: componentFamily('chip'), - DynamicMenu: componentFamily('dynamic-menu'), - FileUpload: componentFamily('file-upload'), - Field: componentFamily('field'), - Icon: componentFamily('icon'), - Image: componentFamily('image'), - List: componentFamily('list'), - CustomModal: componentFamily('modal pi-modal__custom-template'), - Panel: componentFamily('panel'), - Table: componentFamily('table'), - Text: componentFamily('text'), -}; - -// Transition durations -export const enum DURATION { - Slow = 300, - Medium = 200, - Fast = 100, -} +// Shell level +export const shellTheming = (ShellClass: string) => `pi-shell pi-shell__${ShellClass}`; + +export const ShellClass = { + // Deale Landings (Public) + DealeLandings: shellTheming('deale-landings'), + // Deale SaaS (Private) + DealeSaaS: shellTheming('deale-saas'), + // Deale Website (Public) + DealeWebsite: shellTheming('deale-website'), +}; + +// View component level +// Container Layout ~ Landings +export const ContainerLayout = 'pi-container-layout'; + +// Layouts +// Heights +export const enum Height { + Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25 + Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50 + Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75 + Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100 +} + +export const height = (height: Height): string => `pi-layout__${height}`; + +// Responsive +export const heights = ( + mobileHeight: Height, + tabletHeight: Height, + desktopHeight: Height +): string => + `pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`; + +// Not Responsive +export const LayoutHeight = { + Small: height(Height.Small), // 25 + Medium: height(Height.Medium), // 50 + Large: height(Height.Large), // 75 + Full: height(Height.Full), // 100 +}; + +// HostBinding layout class with or without background image ~ Landings +export const layoutBackground = (imageName: string) => + `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`; + +export const backgroundWaveClass = (waveRef: string) => + `pi-background-wave pi-background-wave__${waveRef}`; + +// Not Responsive +export const LayoutWave = { + // Grey + Grey1: backgroundWaveClass('01-grey'), + Grey1RGBA: backgroundWaveClass('01-grey-rgba'), + Grey2: backgroundWaveClass('02-grey'), + Grey2RGBA: backgroundWaveClass('02-grey-rgba'), + // Highlighted + Highlighted1: backgroundWaveClass('01-highlighted'), + Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'), + Highlighted2: backgroundWaveClass('02-highlighted'), + Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'), + // Primary + Primary1: backgroundWaveClass('01-primary'), + Primary1RGBA: backgroundWaveClass('01-primary-rgba'), + Primary2: backgroundWaveClass('02-primary'), + Primary2RGBA: backgroundWaveClass('02-primary-rgba'), + // PrimaryWhite + PrimaryWhite1: backgroundWaveClass('01-primary-white'), + PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'), + PrimaryWhite2: backgroundWaveClass('02-primary-white'), + PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'), + // Primary50 + PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'), + Primary501: backgroundWaveClass('01-primary-50'), + PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'), + PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'), + Primary502: backgroundWaveClass('02-primary-50'), + PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'), + // White + White1: backgroundWaveClass('01-white'), + White1RGBA: backgroundWaveClass('01-white-rgba'), + White2: backgroundWaveClass('02-white'), + White2RGBA: backgroundWaveClass('02-white-rgba'), +}; + +// Layouts ~ SaaS & Landings +export const LayoutNoPadding = 'pi-layout__no-padding'; + +export const LayoutCollapsable = 'pi-layout__collapsable'; + +export const userType = (userType: string) => `is-${userType}`; + +// User type class +export const UserTypeClass = { + // Company + Company: userType('company'), + // Investor + Investor: userType('investor'), + // Advisor + Advisor: userType('advisor'), +}; + +// Layouts (Add to any view) +export const LayoutTypeClass = { + // Specifics + Authentication: 'pi-layout pi-layout__00-authentication', + Dashboard: 'pi-layout pi-layout__01-dashboard', + // TODO: Delete old dashboard layout when ready other users + DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old', + // Main Horizontally + // Full Width + FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width', + // Full Width Centered + FullWidthAuto: + 'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto', + // Main Vertically Centered + VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered', + // Main Space Between + SpaceBetween: 'pi-layout pi-layout__04-space-between', + // Splitted + Splitted: 'pi-layout pi-layout__05-splitted', + // SplittedPaywall + SplittedPaywall: 'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout', + // Edge to Edge + EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge', + // List Left + List: 'pi-layout pi-layout__07-list', + // Infinite Scroll + ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto', + // List Left + PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated', + // Form Layout + Form: 'pi-layout pi-layout__08-form', + // Pricing Layout + Pricing: 'pi-layout pi-layout__09-pricing', +}; + +export const WebsiteScreenTypeClass = { + ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you', +}; + +// Wrappers +export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`; + +export const WrapperTypeClass = { + Action: wrapperType('action'), + Form: wrapperType('form'), + Header: wrapperType('header'), + List: wrapperType('list'), + Main: wrapperType('main'), + Steps: wrapperType('steps'), +}; + +// Components +export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`; + +export const ComponentFamilyClass = { + Button: componentFamily('button'), + Card: componentFamily('card'), + Carousel: componentFamily('carousel'), + DomainComponent: componentFamily('domain-component'), + Chip: componentFamily('chip'), + DynamicMenu: componentFamily('dynamic-menu'), + FileUpload: componentFamily('file-upload'), + Field: componentFamily('field'), + Icon: componentFamily('icon'), + Image: componentFamily('image'), + List: componentFamily('list'), + CustomModal: componentFamily('modal pi-modal__custom-template'), + Panel: componentFamily('panel'), + Table: componentFamily('table'), + Text: componentFamily('text'), +}; + +// Transition durations +export const enum DURATION { + Slow = 300, + Medium = 200, + Fast = 100, +} diff --git a/libs/ui/src/lib/styles/deale-saas/index.scss b/libs/ui/src/lib/styles/deale-saas/index.scss index 11065c5..3d67819 100644 --- a/libs/ui/src/lib/styles/deale-saas/index.scss +++ b/libs/ui/src/lib/styles/deale-saas/index.scss @@ -1,4 +1,4 @@ -@use 'layouts' as *; -@use 'theming' as *; -@use 'shell' as *; -@use 'wrappers' as *; +@use 'layouts' as *; +@use 'theming' as *; +@use 'shell' as *; +@use 'wrappers' as *; diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss index bf3a8d2..bda79fa 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss @@ -1,330 +1,330 @@ -@use 'pi-00a-authentication-layout-auth'; -@use 'pi-00b-authentication-layout-recover-password'; -@use 'pi-00c-authentication-layout-user-profile'; -@use 'pi-00d-authentication-layout-default-space'; -@use 'pi-00e-authentication-layout-impersonation'; - -@mixin authenticationLayoutSizes( - $width: calc(100% - var(--pi-spacing-xx-large)), - $max-width: calc(100% - var(--pi-spacing-xx-large)), - $height: 90vh -) { - & > .pi-component { - width: $width; - max-width: $max-width; - & > .pi-panel { - width: -webkit-fill-available; - & > section { - height: $height; - } - } - } -} - -@mixin authenticationLayoutsButtonSize() { -} - -@mixin authenticationLayoutSpacings($spacing, $gap) { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth):not(.pi-layout__00-authentication--default-space) { - .pi-panel { - .pi-panel-content__top, - .pi-panel-content__bottom { - gap: var(--pi-spacing-#{$gap}); - } - &.pi-panel__inner-padding--xxxxl { - &.pi-panel__inner-padding { - &.pi-panel__flex-direction--column { - & > section { - & > * { - padding-left: $spacing; - padding-right: $spacing; - } - } - } - } - } - } - } - } -} - -@mixin authenticationLayoutMobileSmall { - // Mobile S - @media screen and (max-height: 41.6875rem) { - .pi-wrapper { - .pi-wrapper__gap--l { - gap: var(--pi-spacing-small); - } - } - .pi-panel { - &.pi-panel__inner-padding--xxxl { - &.pi-panel__inner-padding { - &.pi-panel__flex-direction--column { - & > section { - & > * { - padding-top: var(--pi-spacing-x-large); - padding-bottom: var(--pi-spacing-x-large); - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - } - } - } - } - } - } - } -} -.pi-layout__00-authentication { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - width: 100%; - - & > .pi-component { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - & > .pi-panel { - background: linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box, - linear-gradient(to right, var(--pi-color-primary-50), var(--pi-color-primary-25)) border-box; - background-color: rgba(255, 255, 255, 0.66); - animation: gradient 0.5s linear infinite; - animation-direction: alternate-reverse; - background-size: 150% 300%; - border: 0.0625rem solid transparent; - box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125); - .pi-panel-content__right { - & > * { - max-width: 21.25rem; - height: fit-content; - } - } - .pi-list-item { - .pi-text-viewer { - article { - label, - span { - line-height: 105%; - } - } - } - } - } - .pi-wrapper__form + .pi-wrapper__action { - margin-top: var(--pi-spacing-xxxx-large); - } - .pi-wrapper__action { - .pi-text-centered { - margin-top: var(--pi-spacing-x-large); - } - } - } - &:not(.pi-layout__00-authentication--auth) { - // Panel in other authentication layouts - .pi-panel { - .pi-panel-content__bottom { - position: sticky; - bottom: 0; - } - - .pi-panel-content__top, - .pi-panel-content__bottom { - display: flex; - gap: var(--pi-spacing-x-small); - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small); - .pi-layout__00-authentication { - @include authenticationLayoutSizes; - // Mobile S - @include authenticationLayoutMobileSmall; - } - } - // Tablet - &.is-tablet { - &.is-tablet__small { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth) { - @include authenticationLayoutSizes(80%, 80%, 80vh); - } - &.pi-layout__00-authentication--auth { - @include authenticationLayoutSizes(80%, 80%, 85vh); - } - } - } - &.is-tablet__large { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth) { - @include authenticationLayoutSizes(calc(100% - 4rem), calc(100% - 4rem), 70vh); - } - &.pi-layout__00-authentication--auth { - @include authenticationLayoutSizes( - calc(100% - 4rem), - calc(100% - 4rem), - calc(100vh - 4rem) - ); - } - } - } - } - - // Tablet & Mobile - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-layout__00-authentication { - & > .pi-component { - // Panel in authentication layout - & > .pi-panel { - .pi-panel-content__bottom { - // Action wrapper in panel bottom content - .pi-wrapper { - &.pi-wrapper__action { - width: -webkit-fill-available; - // Hide 'Press enter' text viewer on mobile and tablet - & > *:last-child { - display: none; - } - } - } - } - } - } - // Not Auth Layout - &:not(.pi-layout__00-authentication--auth) { - // Panel in other authentication layouts - & > .pi-component { - .pi-panel { - & > section { - overflow: hidden; - - .pi-panel-content__center { - flex-grow: 1; - overflow-y: auto; - // Generic Scroll - &::-webkit-scrollbar { - width: var(--pi-spacing-xxx-small); - } - - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-primary-50); - border-radius: var(--pi-border-radius-small); - - &:hover { - transition: var(--pi-animation); - background-color: var(--pi-color-primary-100); - } - } - } - } - } - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth) { - .pi-panel { - position: relative; - // Add logo to bottom right corner of panel - &::after { - content: ''; - position: absolute; - height: 100%; - width: 4.375rem; - right: var(--pi-spacing-xxx-large); - bottom: var(--pi-spacing-xxx-large); - background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg'); - background-repeat: no-repeat; - background-position: bottom right; - } - } - } - } - } - .pi-shell { - .is-public { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth):not( - .pi-layout__00-authentication--recover-password - ):not(.pi-layout__00-authentication--impersonation) { - .pi-panel { - & > section { - .pi-panel-content__top, - .pi-panel-content__bottom { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( - .pi-button__toggle - ):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not( - .pi-button__xx-small - ):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) { - min-width: 9.5rem; - } - } - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( - .pi-button__toggle - ):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not( - .pi-button__x-small - ):not(.pi-button__small):not(.pi-button__large):not(.pi-button__large):not( - .pi-button__trimed - ):not(.pi-button__xx-small):not(.pi-button__trimmed) { - min-width: 11.5rem; - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large); - } - } - } - } - } - } - } - } - } - } - - &.is-desktop { - @include authenticationLayoutSpacings(4rem, x-large); - // Desktop S - &.is-desktop__small { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth) { - @include authenticationLayoutSizes(75%, var(--pi-public-width-container), 70vh); - } - &.pi-layout__00-authentication--auth { - @include authenticationLayoutSizes(72%, var(--pi-public-width-container), 76vh); - } - } - } - // Desktop M & L - &.is-desktop__medium, - &.is-desktop__large { - .pi-layout__00-authentication { - &:not(.pi-layout__00-authentication--auth) { - @include authenticationLayoutSizes(72%, var(--pi-public-width-container), 78vh); - } - &.pi-layout__00-authentication--auth { - @include authenticationLayoutSizes(66.66%, var(--pi-public-width-container), 78vh); - } - } - } - } -} +@use 'pi-00a-authentication-layout-auth'; +@use 'pi-00b-authentication-layout-recover-password'; +@use 'pi-00c-authentication-layout-user-profile'; +@use 'pi-00d-authentication-layout-default-space'; +@use 'pi-00e-authentication-layout-impersonation'; + +@mixin authenticationLayoutSizes( + $width: calc(100% - var(--pi-spacing-xx-large)), + $max-width: calc(100% - var(--pi-spacing-xx-large)), + $height: 90vh +) { + & > .pi-component { + width: $width; + max-width: $max-width; + & > .pi-panel { + width: -webkit-fill-available; + & > section { + height: $height; + } + } + } +} + +@mixin authenticationLayoutsButtonSize() { +} + +@mixin authenticationLayoutSpacings($spacing, $gap) { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth):not(.pi-layout__00-authentication--default-space) { + .pi-panel { + .pi-panel-content__top, + .pi-panel-content__bottom { + gap: var(--pi-spacing-#{$gap}); + } + &.pi-panel__inner-padding--xxxxl { + &.pi-panel__inner-padding { + &.pi-panel__flex-direction--column { + & > section { + & > * { + padding-left: $spacing; + padding-right: $spacing; + } + } + } + } + } + } + } + } +} + +@mixin authenticationLayoutMobileSmall { + // Mobile S + @media screen and (max-height: 41.6875rem) { + .pi-wrapper { + .pi-wrapper__gap--l { + gap: var(--pi-spacing-small); + } + } + .pi-panel { + &.pi-panel__inner-padding--xxxl { + &.pi-panel__inner-padding { + &.pi-panel__flex-direction--column { + & > section { + & > * { + padding-top: var(--pi-spacing-x-large); + padding-bottom: var(--pi-spacing-x-large); + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + } + } + } + } + } + } + } +} +.pi-layout__00-authentication { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + width: 100%; + + & > .pi-component { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + & > .pi-panel { + background: linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box, + linear-gradient(to right, var(--pi-color-primary-50), var(--pi-color-primary-25)) border-box; + background-color: rgba(255, 255, 255, 0.66); + animation: gradient 0.5s linear infinite; + animation-direction: alternate-reverse; + background-size: 150% 300%; + border: 0.0625rem solid transparent; + box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125); + .pi-panel-content__right { + & > * { + max-width: 21.25rem; + height: fit-content; + } + } + .pi-list-item { + .pi-text-viewer { + article { + label, + span { + line-height: 105%; + } + } + } + } + } + .pi-wrapper__form + .pi-wrapper__action { + margin-top: var(--pi-spacing-xxxx-large); + } + .pi-wrapper__action { + .pi-text-centered { + margin-top: var(--pi-spacing-x-large); + } + } + } + &:not(.pi-layout__00-authentication--auth) { + // Panel in other authentication layouts + .pi-panel { + .pi-panel-content__bottom { + position: sticky; + bottom: 0; + } + + .pi-panel-content__top, + .pi-panel-content__bottom { + display: flex; + gap: var(--pi-spacing-x-small); + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small); + .pi-layout__00-authentication { + @include authenticationLayoutSizes; + // Mobile S + @include authenticationLayoutMobileSmall; + } + } + // Tablet + &.is-tablet { + &.is-tablet__small { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth) { + @include authenticationLayoutSizes(80%, 80%, 80vh); + } + &.pi-layout__00-authentication--auth { + @include authenticationLayoutSizes(80%, 80%, 85vh); + } + } + } + &.is-tablet__large { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth) { + @include authenticationLayoutSizes(calc(100% - 4rem), calc(100% - 4rem), 70vh); + } + &.pi-layout__00-authentication--auth { + @include authenticationLayoutSizes( + calc(100% - 4rem), + calc(100% - 4rem), + calc(100vh - 4rem) + ); + } + } + } + } + + // Tablet & Mobile + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-layout__00-authentication { + & > .pi-component { + // Panel in authentication layout + & > .pi-panel { + .pi-panel-content__bottom { + // Action wrapper in panel bottom content + .pi-wrapper { + &.pi-wrapper__action { + width: -webkit-fill-available; + // Hide 'Press enter' text viewer on mobile and tablet + & > *:last-child { + display: none; + } + } + } + } + } + } + // Not Auth Layout + &:not(.pi-layout__00-authentication--auth) { + // Panel in other authentication layouts + & > .pi-component { + .pi-panel { + & > section { + overflow: hidden; + + .pi-panel-content__center { + flex-grow: 1; + overflow-y: auto; + // Generic Scroll + &::-webkit-scrollbar { + width: var(--pi-spacing-xxx-small); + } + + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-primary-50); + border-radius: var(--pi-border-radius-small); + + &:hover { + transition: var(--pi-animation); + background-color: var(--pi-color-primary-100); + } + } + } + } + } + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth) { + .pi-panel { + position: relative; + // Add logo to bottom right corner of panel + &::after { + content: ''; + position: absolute; + height: 100%; + width: 4.375rem; + right: var(--pi-spacing-xxx-large); + bottom: var(--pi-spacing-xxx-large); + background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg'); + background-repeat: no-repeat; + background-position: bottom right; + } + } + } + } + } + .pi-shell { + .is-public { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth):not( + .pi-layout__00-authentication--recover-password + ):not(.pi-layout__00-authentication--impersonation) { + .pi-panel { + & > section { + .pi-panel-content__top, + .pi-panel-content__bottom { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( + .pi-button__toggle + ):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not( + .pi-button__xx-small + ):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) { + min-width: 9.5rem; + } + } + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( + .pi-button__toggle + ):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not( + .pi-button__x-small + ):not(.pi-button__small):not(.pi-button__large):not(.pi-button__large):not( + .pi-button__trimed + ):not(.pi-button__xx-small):not(.pi-button__trimmed) { + min-width: 11.5rem; + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large); + } + } + } + } + } + } + } + } + } + } + + &.is-desktop { + @include authenticationLayoutSpacings(4rem, x-large); + // Desktop S + &.is-desktop__small { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth) { + @include authenticationLayoutSizes(75%, var(--pi-public-width-container), 70vh); + } + &.pi-layout__00-authentication--auth { + @include authenticationLayoutSizes(72%, var(--pi-public-width-container), 76vh); + } + } + } + // Desktop M & L + &.is-desktop__medium, + &.is-desktop__large { + .pi-layout__00-authentication { + &:not(.pi-layout__00-authentication--auth) { + @include authenticationLayoutSizes(72%, var(--pi-public-width-container), 78vh); + } + &.pi-layout__00-authentication--auth { + @include authenticationLayoutSizes(66.66%, var(--pi-public-width-container), 78vh); + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss index 03d6bb0..66f723c 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss @@ -1,83 +1,83 @@ -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small Device - @media screen and (max-width: 62rem) { - .pi-layout { - &.pi-layout__00-authentication { - &.pi-layout__00-authentication--auth { - // Panel in authentication layout - .pi-panel { - .pi-panel-content__left { - display: none; - } - .pi-panel-content__right { - padding-top: var(--pi-spacing-xxx-large); - @media screen and (max-height: 41.6875rem) { - transform: scale(0.95); - &.pi-wrapper { - &.pi-wrapper__gap--xl { - gap: unset; - } - } - } - } - } - // Headline in authentication layout - .pi-headline { - &.pi-headline__type--logo { - & > figure { - max-width: 5.75rem; - } - } - } - } - - // Panel in Root auth form - &.pi-layout__00-authentication--root-org { - // Panel in authentication layout - .pi-panel { - .pi-panel-content__center { - .pi-wrapper { - &:first-child { - margin-top: var(--pi-spacing-medium); - } - } - } - } - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large Device - @media screen and (min-width: 62rem) { - .pi-layout { - &.pi-layout__00-authentication { - &.pi-layout__00-authentication--auth { - // Panel in authentication layout - .pi-panel { - .pi-panel-content__left { - display: grid; - grid-template-rows: repeat(2, 1fr); - & > *:nth-child(n + 1) { - align-self: end; - } - } - } - // Headline in authentication layout - .pi-headline { - &.pi-headline__type--logo { - & > figure { - max-width: 4.6875rem; - } - } - } - } - } - } - } - } -} +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small Device + @media screen and (max-width: 62rem) { + .pi-layout { + &.pi-layout__00-authentication { + &.pi-layout__00-authentication--auth { + // Panel in authentication layout + .pi-panel { + .pi-panel-content__left { + display: none; + } + .pi-panel-content__right { + padding-top: var(--pi-spacing-xxx-large); + @media screen and (max-height: 41.6875rem) { + transform: scale(0.95); + &.pi-wrapper { + &.pi-wrapper__gap--xl { + gap: unset; + } + } + } + } + } + // Headline in authentication layout + .pi-headline { + &.pi-headline__type--logo { + & > figure { + max-width: 5.75rem; + } + } + } + } + + // Panel in Root auth form + &.pi-layout__00-authentication--root-org { + // Panel in authentication layout + .pi-panel { + .pi-panel-content__center { + .pi-wrapper { + &:first-child { + margin-top: var(--pi-spacing-medium); + } + } + } + } + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large Device + @media screen and (min-width: 62rem) { + .pi-layout { + &.pi-layout__00-authentication { + &.pi-layout__00-authentication--auth { + // Panel in authentication layout + .pi-panel { + .pi-panel-content__left { + display: grid; + grid-template-rows: repeat(2, 1fr); + & > *:nth-child(n + 1) { + align-self: end; + } + } + } + // Headline in authentication layout + .pi-headline { + &.pi-headline__type--logo { + & > figure { + max-width: 4.6875rem; + } + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss index d6e4289..b21f302 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss @@ -1,28 +1,28 @@ -html { - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .pi-layout__00-authentication { - &.pi-layout__00-authentication--recover-password { - .pi-panel { - & > section { - .pi-panel-content__top, - .pi-panel-content__bottom { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( - .pi-button__toggle - ):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not( - .pi-button__xx-small - ):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) { - min-width: 13.5rem; - } - } - } - } - } - } - } - } - } -} +html { + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .pi-layout__00-authentication { + &.pi-layout__00-authentication--recover-password { + .pi-panel { + & > section { + .pi-panel-content__top, + .pi-panel-content__bottom { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( + .pi-button__toggle + ):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not( + .pi-button__xx-small + ):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) { + min-width: 13.5rem; + } + } + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss index 05ceb02..447f354 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss @@ -1,109 +1,109 @@ -@mixin authenticationLayoutSelectMenuTypeCustom($columnsNum: 1, $card-height: unset) { - .pi-layout__00-authentication { - &.pi-layout__00-authentication--user-profile { - .pi-select { - .pi-select-options-menu { - padding: unset; - background-color: transparent; - } - &.pi-select__menu-type--custom-grid { - .pi-select-options-menu { - & > div { - display: grid; - grid-template-columns: repeat(#{$columnsNum}, 1fr); - grid-gap: var(--pi-spacing-large); - .pi-card { - min-height: $card-height; - } - } - } - } - } - // Grid wrapper 3 cols in Authentiocation User Type layout - .pi-wrapper { - &.pi-wrapper__grid { - &.pi-wrapper__grid--columns-3 { - &.is-responsive { - grid-template-columns: repeat(#{$columnsNum}, 1fr); - } - } - } - } - } - } -} - -@mixin authenticationLayoutMobile { - .pi-layout__00-authentication { - &.pi-layout__00-authentication--user-profile { - .pi-select-option__large { - width: -webkit-fill-available; - } - .pi-card { - .pi-card-content__bottom { - display: none; - } - } - .pi-panel__gap--xxxl { - & > section { - gap: var(--pi-spacing-x-small); - } - } - } - } -} - -.pi-layout__00-authentication { - &.pi-layout__00-authentication--user-profile { - .pi-card { - &.is-active { - .pi-card-content__bottom { - & > span { - font: { - weight: 400; - } - } - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include authenticationLayoutSelectMenuTypeCustom; - @include authenticationLayoutMobile; - } - &:not(.is-desktop) { - @media screen and (max-width: 62rem) { - .pi-layout__00-authentication { - &.pi-layout__00-authentication--user-profile { - .pi-panel-content__center { - padding-top: var(--pi-spacing-medium); - } - } - } - } - } - // Tablet - &.is-tablet { - // Tablet Small - &.is-tablet__small { - @include authenticationLayoutSelectMenuTypeCustom; - } - // Tablet L - &.is-tablet__large { - @include authenticationLayoutSelectMenuTypeCustom(3, 9rem); - } - } - // Desktop - &.is-desktop { - &.is-desktop__small { - @include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem); - } - &:not(.is-desktop__small) { - @include authenticationLayoutSelectMenuTypeCustom(3); - } - } -} +@mixin authenticationLayoutSelectMenuTypeCustom($columnsNum: 1, $card-height: unset) { + .pi-layout__00-authentication { + &.pi-layout__00-authentication--user-profile { + .pi-select { + .pi-select-options-menu { + padding: unset; + background-color: transparent; + } + &.pi-select__menu-type--custom-grid { + .pi-select-options-menu { + & > div { + display: grid; + grid-template-columns: repeat(#{$columnsNum}, 1fr); + grid-gap: var(--pi-spacing-large); + .pi-card { + min-height: $card-height; + } + } + } + } + } + // Grid wrapper 3 cols in Authentiocation User Type layout + .pi-wrapper { + &.pi-wrapper__grid { + &.pi-wrapper__grid--columns-3 { + &.is-responsive { + grid-template-columns: repeat(#{$columnsNum}, 1fr); + } + } + } + } + } + } +} + +@mixin authenticationLayoutMobile { + .pi-layout__00-authentication { + &.pi-layout__00-authentication--user-profile { + .pi-select-option__large { + width: -webkit-fill-available; + } + .pi-card { + .pi-card-content__bottom { + display: none; + } + } + .pi-panel__gap--xxxl { + & > section { + gap: var(--pi-spacing-x-small); + } + } + } + } +} + +.pi-layout__00-authentication { + &.pi-layout__00-authentication--user-profile { + .pi-card { + &.is-active { + .pi-card-content__bottom { + & > span { + font: { + weight: 400; + } + } + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include authenticationLayoutSelectMenuTypeCustom; + @include authenticationLayoutMobile; + } + &:not(.is-desktop) { + @media screen and (max-width: 62rem) { + .pi-layout__00-authentication { + &.pi-layout__00-authentication--user-profile { + .pi-panel-content__center { + padding-top: var(--pi-spacing-medium); + } + } + } + } + } + // Tablet + &.is-tablet { + // Tablet Small + &.is-tablet__small { + @include authenticationLayoutSelectMenuTypeCustom; + } + // Tablet L + &.is-tablet__large { + @include authenticationLayoutSelectMenuTypeCustom(3, 9rem); + } + } + // Desktop + &.is-desktop { + &.is-desktop__small { + @include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem); + } + &:not(.is-desktop__small) { + @include authenticationLayoutSelectMenuTypeCustom(3); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss index bd18b06..1b04be4 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss @@ -1,41 +1,41 @@ -@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) { - .pi-layout__00-authentication { - &.pi-layout__00-authentication--default-space { - .pi-panel { - .pi-panel-content__top, - .pi-panel-content__bottom { - gap: var(--pi-spacing-#{$gap}); - } - &.pi-panel__inner-padding--xxxxl { - &.pi-panel__inner-padding { - &.pi-panel__flex-direction--column { - & > section { - & > * { - padding-left: $spacing; - padding-right: $spacing; - } - } - } - } - } - } - } - } -} - -html { - &.is-mobile { - @include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small); - } - &.is-tablet { - &.is-tablet__small { - @include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small); - } - &.is-tablet__large { - @include authenticationDefaultSpaceLayoutSpacings(8rem, x-large); - } - } - &.is-desktop { - @include authenticationDefaultSpaceLayoutSpacings(11rem, x-large); - } -} +@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) { + .pi-layout__00-authentication { + &.pi-layout__00-authentication--default-space { + .pi-panel { + .pi-panel-content__top, + .pi-panel-content__bottom { + gap: var(--pi-spacing-#{$gap}); + } + &.pi-panel__inner-padding--xxxxl { + &.pi-panel__inner-padding { + &.pi-panel__flex-direction--column { + & > section { + & > * { + padding-left: $spacing; + padding-right: $spacing; + } + } + } + } + } + } + } + } +} + +html { + &.is-mobile { + @include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small); + } + &.is-tablet { + &.is-tablet__small { + @include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small); + } + &.is-tablet__large { + @include authenticationDefaultSpaceLayoutSpacings(8rem, x-large); + } + } + &.is-desktop { + @include authenticationDefaultSpaceLayoutSpacings(11rem, x-large); + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss index 013b453..1027078 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss @@ -1,28 +1,28 @@ -html { - &:not(.is-mobile) { - .pi-shell { - .is-public { - .pi-layout__00-authentication { - &.pi-layout__00-authentication--impersonation { - .pi-panel { - & > section { - .pi-panel-content__top, - .pi-panel-content__bottom { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( - .pi-button__toggle - ):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not( - .pi-button__xx-small - ):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) { - min-width: 13.5rem; - } - } - } - } - } - } - } - } - } - } -} +html { + &:not(.is-mobile) { + .pi-shell { + .is-public { + .pi-layout__00-authentication { + &.pi-layout__00-authentication--impersonation { + .pi-panel { + & > section { + .pi-panel-content__top, + .pi-panel-content__bottom { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( + .pi-button__toggle + ):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not( + .pi-button__xx-small + ):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) { + min-width: 13.5rem; + } + } + } + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss index 460424d..01e4125 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss @@ -1,239 +1,239 @@ -.pi-layout { - &.pi-layout__01-dashboard-old { - .pi-panel__primary { - border: none; - background-color: var(--pi-color-primary); - } - } -} - -.is-advisor { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } -} - -.pi-layout { - &.pi-layout__01-dashboard-old { - &.is-company { - .pi-wrapper { - &.pi-wrapper__main { - & > section { - align-items: stretch; - .pi-panel { - height: 100%; - & > section { - height: 100%; - } - } - } - } - } - } - } -} - -.pi-layout { - &.pi-layout__01-dashboard-old { - &.is-investor { - & > div { - & > div { - & > * { - display: block; - .pi-panel { - height: 100%; - } - } - } - } - .pi-panel { - & > section { - height: 100%; - // Press component - & > div { - a { - & > .pi-headline { - & > figure { - width: unset; - img { - height: 1.75rem; - width: 1.75rem; - } - } - } - } - } - } - } - } - } -} -html { - // Mobile - &.is-mobile { - .is-advisor { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } - } - .is-company { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } - } - - .pi-layout { - &.pi-layout__01-dashboard-old { - &.is-investor { - .pi-panel { - & > section { - // Deal manager component - & > .pi-headline { - flex-direction: row; - } - } - } - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } - } - } - // Tablet - &.is-tablet { - .is-advisor { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } - } - .is-company { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } - } - .is-investor { - .pi-layout { - &.pi-layout__01-dashboard-old { - } - } - } - // Tablet S - &.is-tablet__small { - .is-advisor { - } - .is-company { - } - .is-investor { - } - } - // Tablet L - &.is-tablet__large { - .is-advisor { - } - .is-company { - } - .is-investor { - } - } - } - // Large device - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .is-mode-list { - .pi-layout { - &.pi-layout__01-dashboard-old { - .pi-data-grid { - &.pi-data-grid__data-direction--row { - height: calc(100% - 2.6563rem); - .pi-data-grid__content { - display: flex; - flex-direction: column; - justify-content: space-between; - height: calc(100% - 4.6563rem); - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not( - .pi-hamburger - ):not(.pi-button__xx-small) { - height: 2.4rem; - min-height: unset; - padding-left: var(--pi-spacing-medium); - padding-right: var(--pi-spacing-medium); - } - } - .pi-chip-label { - max-width: 15ch; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - } - } - } - } - } - } - } - // Desktop - &.is-desktop { - .is-advisor { - } - .is-company { - } - .is-investor { - } - // Desktop S - &.is-desktop__small { - .pi-layout__01-dashboard-old { - width: 90%; - } - .is-advisor { - } - .is-company { - } - .is-investor { - } - } - - // Desktop M - &.is-desktop__medium { - .pi-layout__01-dashboard-old { - width: 85%; - } - .is-advisor { - } - .is-company { - } - .is-investor { - } - } - - // Desktop L - &.is-desktop__large { - .pi-layout__01-dashboard-old { - width: 75%; - } - .is-advisor { - } - .is-company { - } - .is-investor { - } - } - } -} +.pi-layout { + &.pi-layout__01-dashboard-old { + .pi-panel__primary { + border: none; + background-color: var(--pi-color-primary); + } + } +} + +.is-advisor { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } +} + +.pi-layout { + &.pi-layout__01-dashboard-old { + &.is-company { + .pi-wrapper { + &.pi-wrapper__main { + & > section { + align-items: stretch; + .pi-panel { + height: 100%; + & > section { + height: 100%; + } + } + } + } + } + } + } +} + +.pi-layout { + &.pi-layout__01-dashboard-old { + &.is-investor { + & > div { + & > div { + & > * { + display: block; + .pi-panel { + height: 100%; + } + } + } + } + .pi-panel { + & > section { + height: 100%; + // Press component + & > div { + a { + & > .pi-headline { + & > figure { + width: unset; + img { + height: 1.75rem; + width: 1.75rem; + } + } + } + } + } + } + } + } + } +} +html { + // Mobile + &.is-mobile { + .is-advisor { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } + } + .is-company { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } + } + + .pi-layout { + &.pi-layout__01-dashboard-old { + &.is-investor { + .pi-panel { + & > section { + // Deal manager component + & > .pi-headline { + flex-direction: row; + } + } + } + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } + } + } + // Tablet + &.is-tablet { + .is-advisor { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } + } + .is-company { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } + } + .is-investor { + .pi-layout { + &.pi-layout__01-dashboard-old { + } + } + } + // Tablet S + &.is-tablet__small { + .is-advisor { + } + .is-company { + } + .is-investor { + } + } + // Tablet L + &.is-tablet__large { + .is-advisor { + } + .is-company { + } + .is-investor { + } + } + } + // Large device + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .is-mode-list { + .pi-layout { + &.pi-layout__01-dashboard-old { + .pi-data-grid { + &.pi-data-grid__data-direction--row { + height: calc(100% - 2.6563rem); + .pi-data-grid__content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: calc(100% - 4.6563rem); + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not( + .pi-hamburger + ):not(.pi-button__xx-small) { + height: 2.4rem; + min-height: unset; + padding-left: var(--pi-spacing-medium); + padding-right: var(--pi-spacing-medium); + } + } + .pi-chip-label { + max-width: 15ch; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + } + } + } + } + } + // Desktop + &.is-desktop { + .is-advisor { + } + .is-company { + } + .is-investor { + } + // Desktop S + &.is-desktop__small { + .pi-layout__01-dashboard-old { + width: 90%; + } + .is-advisor { + } + .is-company { + } + .is-investor { + } + } + + // Desktop M + &.is-desktop__medium { + .pi-layout__01-dashboard-old { + width: 85%; + } + .is-advisor { + } + .is-company { + } + .is-investor { + } + } + + // Desktop L + &.is-desktop__large { + .pi-layout__01-dashboard-old { + width: 75%; + } + .is-advisor { + } + .is-company { + } + .is-investor { + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss index e333683..23d650b 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss @@ -1,47 +1,47 @@ -@mixin dashboardLayoutWidth( - $width: calc(100% - var(--pi-spacing-x-large)), - $max-width: calc(100% - var(--pi-spacing-x-large)), - $margin: var(--pi-height-header-mobile) auto 0 -) { - .pi-layout { - &.pi-layout__01-dashboard { - width: $width; - max-width: $max-width; - margin: $margin; - } - } -} - -.pi-layout { - &.pi-layout__01-dashboard { - display: grid; - align-items: center; - } -} - -html { - // Maobile & Tablet - &:not(.is-desktop) { - // Small devices - @include dashboardLayoutWidth; - } - // Large device - &:not(.is-mobile) { - // Tablet L & Desktop S, M & L > 2400px - @media screen and (min-width: 62rem) and (max-width: 140rem) { - @include dashboardLayoutWidth( - calc(100% - var(--pi-spacing-x-large)), - calc(100% - var(--pi-spacing-x-large)), - unset - ); - } - // X Large device - @media screen and (min-width: 140rem) { - @include dashboardLayoutWidth( - calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)), - calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)), - unset - ); - } - } -} +@mixin dashboardLayoutWidth( + $width: calc(100% - var(--pi-spacing-x-large)), + $max-width: calc(100% - var(--pi-spacing-x-large)), + $margin: var(--pi-height-header-mobile) auto 0 +) { + .pi-layout { + &.pi-layout__01-dashboard { + width: $width; + max-width: $max-width; + margin: $margin; + } + } +} + +.pi-layout { + &.pi-layout__01-dashboard { + display: grid; + align-items: center; + } +} + +html { + // Maobile & Tablet + &:not(.is-desktop) { + // Small devices + @include dashboardLayoutWidth; + } + // Large device + &:not(.is-mobile) { + // Tablet L & Desktop S, M & L > 2400px + @media screen and (min-width: 62rem) and (max-width: 140rem) { + @include dashboardLayoutWidth( + calc(100% - var(--pi-spacing-x-large)), + calc(100% - var(--pi-spacing-x-large)), + unset + ); + } + // X Large device + @media screen and (min-width: 140rem) { + @include dashboardLayoutWidth( + calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)), + calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)), + unset + ); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss index e1f9f66..f19226f 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss @@ -1,323 +1,323 @@ -$pi-seller-dashboard-overviews-height: 7.5rem; // 120px - -:root { - // Company Dashboard Spacings - --pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px -} - -@mixin companyDashboardGridMobileAndTablet { - .pi-layout { - &.pi-layout__01-dashboard { - &.is-company { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-medium); - & > *:nth-child(n + 1) { - display: block; - width: -webkit-fill-available; - } - } - } - } -} - -@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) { - .pi-layout { - &.pi-layout__01-dashboard { - &.is-company { - & > *:nth-child(2) { - &.is-empty { - & > .pi-panel { - .pi-panel-content__center { - display: flex; - justify-content: center; - align-items: center; - min-height: calc( - 100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 23.65rem - ); - .pi-note { - width: $width; - } - } - } - } - } - } - } - } -} - -@mixin companyDashboardGridDesktopSmall { - .pi-layout { - &.pi-layout__01-dashboard { - &.is-company { - grid-template-columns: repeat(2, 1fr); - grid-template-areas: - 'item1 item1' - 'item2 item3' - 'item4 item5'; - & > *:nth-child(2), - & > *:nth-child(3) { - & > * { - max-width: 100%; - } - } - } - } - } -} - -@mixin companyDashboardGridDesktop { - .pi-layout { - &.pi-layout__01-dashboard { - &.is-company { - grid-template-columns: repeat(6, 1fr); - grid-template-areas: - 'item1 item1 item1 item1 item3 item3' - 'item2 item2 item2 item2 item3 item3' - 'item4 item4 item5 item5 item3 item3'; - - & > *:nth-child(3) { - & > * { - min-height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)); - } - .pi-panel-content { - // Center - &.pi-panel-content__center { - padding: unset; - - &:nth-child(2) { - & > *:nth-child(n + 1) { - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - & > article { - padding-left: var(--pi-spacing-x-small); - padding-right: var(--pi-spacing-x-small); - } - } - } - } - } - } - } - } - } -} - -// Accordion horizontal in Insights panel -@mixin companyDashboardHorizontalAccordionDesktop { - .pi-layout { - &.pi-layout__01-dashboard { - &.is-company { - .pi-accordion { - &.pi-accordion__direction--horizontal { - & > section { - &:nth-child(1) { - header { - .pi-list-item { - flex-direction: column; - gap: unset; - .pi-list-item-icon { - &.pi-list-item-icon__left { - max-width: 100%; - width: 100%; - // Insights chip - .pi-chip__large { - &:not(.pi-chip__single-icon) { - height: calc( - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxx-small) - ); - max-width: 100%; - width: 100%; - } - } - } - } - .pi-list-item-content { - &.pi-list-item-content__left { - display: flex; - align-items: flex-end; - text-align: center; - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } - } - } - } - } - } - } -} - -.pi-layout { - &.pi-layout__01-dashboard { - &.is-company { - @for $i from 1 through 5 { - & > *:nth-child(#{$i}) { - grid-area: item#{$i}; - align-self: flex-start; - } - } - grid-gap: var(--pi-spacing-medium); - // Overviews - & > *:nth-child(1) { - .pi-card { - min-height: var(--pi-seller-dashboard-overviews-height); - - .pi-card-content { - &.pi-card-content__top { - padding-left: var(--pi-spacing-large); - padding-top: var(--pi-spacing-medium); - padding-right: var(--pi-spacing-large); - } - &.pi-card-content__bottom { - flex-direction: row; - align-items: center; - min-height: var(--pi-spacing-xxxx-large); - } - } - &:hover { - border-color: var(--pi-color-primary-100); - } - } - } - // TO·DO List - & > *:nth-child(3) { - .pi-panel { - .pi-panel-content { - & > .pi-divider { - padding-top: var(--pi-spacing-xxx-small); - & + * { - padding-top: var(--pi-spacing-medium); - } - } - - & > .pi-text-viewer { - padding-left: var(--pi-spacing-x-small); - padding-right: var(--pi-spacing-x-small); - } - - // Top - &.pi-panel-content__top { - padding-left: var(--pi-spacing-xx-large); - padding-right: var(--pi-spacing-xx-large); - & > span { - line-height: 105%; - } - } - } - } - &:not(.is-empty) { - & > *:nth-child(3) { - .pi-panel { - .pi-panel-content { - // Center - &.pi-panel-content__center { - padding: unset; - - &:nth-child(2) { - .pi-icon__appearance--fill { - &.pi-color__primary { - background-color: var(--pi-color-primary-50); - } - } - & > *:nth-child(n + 1) { - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - & > article { - padding-left: var(--pi-spacing-x-small); - padding-right: var(--pi-spacing-x-small); - } - } - .pi-wrapper__flex-direction--column { - // Only scroll for desktop M & L - @media screen and (min-width: 90rem) { - max-height: calc( - 100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 24rem - ); - max-width: calc(100% - var(--pi-spacing-xxx-small)); - overflow-y: auto; - // Generic Scroll - &::-webkit-scrollbar { - width: var(--pi-spacing-xxxx-small); - } - - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-primary-100); - border-radius: var(--pi-border-radius-small); - - &:hover { - transition: var(--pi-animation); - background-color: var(--pi-color-primary-200); - } - } - } - } - } - } - } - } - } - } - } - // Deal manager CTA - & > *:nth-child(5) { - .pi-headline { - height: var(--pi-spacing-xxx-large); - width: var(--pi-spacing-xxx-large); - &::after { - content: ''; - position: relative; - z-index: 99; - height: var(--pi-spacing-xx-small); - width: var(--pi-spacing-xx-small); - margin-top: -4rem; - margin-left: 2.25rem; - border-radius: 50%; - background-color: var(--pi-color-success); - } - } - .pi-list-item-icon { - &.pi-list-item-icon__right { - display: flex; - align-items: center; - gap: var(--pi-spacing-xxx-small); - } - } - } - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - @include companyDashboardGridMobileAndTablet; - } - - &.is-desktop { - // Desktop S - &.is-desktop__small { - @include companyDashboardGridDesktopSmall; - @include companyDashboardInsightsPanelEmptyState; - } - // Desktop S & M - &:not(.is-desktop__large) { - @include companyDashboardHorizontalAccordionDesktop; - } - // Desktop M & L - &:not(.is-desktop__small) { - @include companyDashboardGridDesktop; - @include companyDashboardInsightsPanelEmptyState(50%); - } - } -} +$pi-seller-dashboard-overviews-height: 7.5rem; // 120px + +:root { + // Company Dashboard Spacings + --pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px +} + +@mixin companyDashboardGridMobileAndTablet { + .pi-layout { + &.pi-layout__01-dashboard { + &.is-company { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-medium); + & > *:nth-child(n + 1) { + display: block; + width: -webkit-fill-available; + } + } + } + } +} + +@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) { + .pi-layout { + &.pi-layout__01-dashboard { + &.is-company { + & > *:nth-child(2) { + &.is-empty { + & > .pi-panel { + .pi-panel-content__center { + display: flex; + justify-content: center; + align-items: center; + min-height: calc( + 100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 23.65rem + ); + .pi-note { + width: $width; + } + } + } + } + } + } + } + } +} + +@mixin companyDashboardGridDesktopSmall { + .pi-layout { + &.pi-layout__01-dashboard { + &.is-company { + grid-template-columns: repeat(2, 1fr); + grid-template-areas: + 'item1 item1' + 'item2 item3' + 'item4 item5'; + & > *:nth-child(2), + & > *:nth-child(3) { + & > * { + max-width: 100%; + } + } + } + } + } +} + +@mixin companyDashboardGridDesktop { + .pi-layout { + &.pi-layout__01-dashboard { + &.is-company { + grid-template-columns: repeat(6, 1fr); + grid-template-areas: + 'item1 item1 item1 item1 item3 item3' + 'item2 item2 item2 item2 item3 item3' + 'item4 item4 item5 item5 item3 item3'; + + & > *:nth-child(3) { + & > * { + min-height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)); + } + .pi-panel-content { + // Center + &.pi-panel-content__center { + padding: unset; + + &:nth-child(2) { + & > *:nth-child(n + 1) { + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + & > article { + padding-left: var(--pi-spacing-x-small); + padding-right: var(--pi-spacing-x-small); + } + } + } + } + } + } + } + } + } +} + +// Accordion horizontal in Insights panel +@mixin companyDashboardHorizontalAccordionDesktop { + .pi-layout { + &.pi-layout__01-dashboard { + &.is-company { + .pi-accordion { + &.pi-accordion__direction--horizontal { + & > section { + &:nth-child(1) { + header { + .pi-list-item { + flex-direction: column; + gap: unset; + .pi-list-item-icon { + &.pi-list-item-icon__left { + max-width: 100%; + width: 100%; + // Insights chip + .pi-chip__large { + &:not(.pi-chip__single-icon) { + height: calc( + var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxx-small) + ); + max-width: 100%; + width: 100%; + } + } + } + } + .pi-list-item-content { + &.pi-list-item-content__left { + display: flex; + align-items: flex-end; + text-align: center; + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } + } + } + } + } + } + } +} + +.pi-layout { + &.pi-layout__01-dashboard { + &.is-company { + @for $i from 1 through 5 { + & > *:nth-child(#{$i}) { + grid-area: item#{$i}; + align-self: flex-start; + } + } + grid-gap: var(--pi-spacing-medium); + // Overviews + & > *:nth-child(1) { + .pi-card { + min-height: var(--pi-seller-dashboard-overviews-height); + + .pi-card-content { + &.pi-card-content__top { + padding-left: var(--pi-spacing-large); + padding-top: var(--pi-spacing-medium); + padding-right: var(--pi-spacing-large); + } + &.pi-card-content__bottom { + flex-direction: row; + align-items: center; + min-height: var(--pi-spacing-xxxx-large); + } + } + &:hover { + border-color: var(--pi-color-primary-100); + } + } + } + // TO·DO List + & > *:nth-child(3) { + .pi-panel { + .pi-panel-content { + & > .pi-divider { + padding-top: var(--pi-spacing-xxx-small); + & + * { + padding-top: var(--pi-spacing-medium); + } + } + + & > .pi-text-viewer { + padding-left: var(--pi-spacing-x-small); + padding-right: var(--pi-spacing-x-small); + } + + // Top + &.pi-panel-content__top { + padding-left: var(--pi-spacing-xx-large); + padding-right: var(--pi-spacing-xx-large); + & > span { + line-height: 105%; + } + } + } + } + &:not(.is-empty) { + & > *:nth-child(3) { + .pi-panel { + .pi-panel-content { + // Center + &.pi-panel-content__center { + padding: unset; + + &:nth-child(2) { + .pi-icon__appearance--fill { + &.pi-color__primary { + background-color: var(--pi-color-primary-50); + } + } + & > *:nth-child(n + 1) { + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + & > article { + padding-left: var(--pi-spacing-x-small); + padding-right: var(--pi-spacing-x-small); + } + } + .pi-wrapper__flex-direction--column { + // Only scroll for desktop M & L + @media screen and (min-width: 90rem) { + max-height: calc( + 100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 24rem + ); + max-width: calc(100% - var(--pi-spacing-xxx-small)); + overflow-y: auto; + // Generic Scroll + &::-webkit-scrollbar { + width: var(--pi-spacing-xxxx-small); + } + + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-primary-100); + border-radius: var(--pi-border-radius-small); + + &:hover { + transition: var(--pi-animation); + background-color: var(--pi-color-primary-200); + } + } + } + } + } + } + } + } + } + } + } + // Deal manager CTA + & > *:nth-child(5) { + .pi-headline { + height: var(--pi-spacing-xxx-large); + width: var(--pi-spacing-xxx-large); + &::after { + content: ''; + position: relative; + z-index: 99; + height: var(--pi-spacing-xx-small); + width: var(--pi-spacing-xx-small); + margin-top: -4rem; + margin-left: 2.25rem; + border-radius: 50%; + background-color: var(--pi-color-success); + } + } + .pi-list-item-icon { + &.pi-list-item-icon__right { + display: flex; + align-items: center; + gap: var(--pi-spacing-xxx-small); + } + } + } + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + @include companyDashboardGridMobileAndTablet; + } + + &.is-desktop { + // Desktop S + &.is-desktop__small { + @include companyDashboardGridDesktopSmall; + @include companyDashboardInsightsPanelEmptyState; + } + // Desktop S & M + &:not(.is-desktop__large) { + @include companyDashboardHorizontalAccordionDesktop; + } + // Desktop M & L + &:not(.is-desktop__small) { + @include companyDashboardGridDesktop; + @include companyDashboardInsightsPanelEmptyState(50%); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss index d30d80e..f32c3c4 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss @@ -1,139 +1,139 @@ -@mixin fullWidthLayoutWidthLargeDevice( - $width: calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem), - $max-width-closed: var(--pi-width-container-s), - $max-width-open: - calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) -) { - .pi-shell__deale-saas { - & > div { - // Aside is open - &.aside-is-open { - // Layout full width - .pi-layout { - &.pi-layout__02-full-width { - &.pi-layout__collapsable { - transition: var(--pi-animation); - max-width: $max-width-open; - } - &:not(.pi-layout__collapsable) { - transition: var(--pi-animation); - max-width: $max-width-closed; - & > *:nth-child(n + 1) { - width: $width; - max-width: $max-width-closed; - } - } - } - } - } - // Aside is closed - &.aside-is-closed { - // Layout full width - .pi-layout { - &.pi-layout__02-full-width { - transition: var(--pi-animation); - & > *:nth-child(n + 1) { - width: $width; - max-width: $max-width-closed; - } - } - } - } - } - } -} -@mixin fullWidthLayoutGridWrapper3Columns($columns: 1) { - .pi-layout { - &.pi-layout__02-full-width { - .pi-wrapper { - &.pi-wrapper__grid { - // 3 - &.pi-wrapper__grid--columns-3 { - grid-template-columns: repeat(#{$columns}, 1fr); - } - } - } - } - } -} - -html { - &.is-mobile { - @include fullWidthLayoutGridWrapper3Columns; - } - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__02-full-width { - max-width: calc(100% - var(--pi-spacing-x-large)); - } - } - } - - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include fullWidthLayoutGridWrapper3Columns; - } - // Tablet L - &.is-tablet__large { - @include fullWidthLayoutGridWrapper3Columns(2); - } - .pi-layout { - &.pi-layout__02-full-width { - margin: auto; - } - } - } - // Desktop - &.is-desktop { - .pi-layout { - &.pi-layout__02-full-width { - padding: 0 0 calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer)); - } - } - - // Desktop S - &.is-desktop__small { - @include fullWidthLayoutWidthLargeDevice; - @include fullWidthLayoutGridWrapper3Columns(2); - } - &:not(.is-desktop__small) { - @include fullWidthLayoutGridWrapper3Columns(3); - } - // Desktop M - &.is-desktop__medium { - @include fullWidthLayoutWidthLargeDevice( - calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem), - var(--pi-width-container), - calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) - ); - } - // Desktop L - &.is-desktop__large { - // Desktop L - @media screen and (max-width: 140rem) { - .pi-layout { - &.pi-layout__02-full-width { - & > *:nth-child(n + 1) { - width: var(--pi-width-container-l); - max-width: var(--pi-width-container-l); - } - } - } - } - // Desktop XL - @media screen and (min-width: 140rem) { - .pi-layout { - &.pi-layout__02-full-width { - & > *:nth-child(n + 1) { - width: 66.66%; - max-width: 66.66%; - } - } - } - } - } - } -} +@mixin fullWidthLayoutWidthLargeDevice( + $width: calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem), + $max-width-closed: var(--pi-width-container-s), + $max-width-open: + calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) +) { + .pi-shell__deale-saas { + & > div { + // Aside is open + &.aside-is-open { + // Layout full width + .pi-layout { + &.pi-layout__02-full-width { + &.pi-layout__collapsable { + transition: var(--pi-animation); + max-width: $max-width-open; + } + &:not(.pi-layout__collapsable) { + transition: var(--pi-animation); + max-width: $max-width-closed; + & > *:nth-child(n + 1) { + width: $width; + max-width: $max-width-closed; + } + } + } + } + } + // Aside is closed + &.aside-is-closed { + // Layout full width + .pi-layout { + &.pi-layout__02-full-width { + transition: var(--pi-animation); + & > *:nth-child(n + 1) { + width: $width; + max-width: $max-width-closed; + } + } + } + } + } + } +} +@mixin fullWidthLayoutGridWrapper3Columns($columns: 1) { + .pi-layout { + &.pi-layout__02-full-width { + .pi-wrapper { + &.pi-wrapper__grid { + // 3 + &.pi-wrapper__grid--columns-3 { + grid-template-columns: repeat(#{$columns}, 1fr); + } + } + } + } + } +} + +html { + &.is-mobile { + @include fullWidthLayoutGridWrapper3Columns; + } + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__02-full-width { + max-width: calc(100% - var(--pi-spacing-x-large)); + } + } + } + + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include fullWidthLayoutGridWrapper3Columns; + } + // Tablet L + &.is-tablet__large { + @include fullWidthLayoutGridWrapper3Columns(2); + } + .pi-layout { + &.pi-layout__02-full-width { + margin: auto; + } + } + } + // Desktop + &.is-desktop { + .pi-layout { + &.pi-layout__02-full-width { + padding: 0 0 calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer)); + } + } + + // Desktop S + &.is-desktop__small { + @include fullWidthLayoutWidthLargeDevice; + @include fullWidthLayoutGridWrapper3Columns(2); + } + &:not(.is-desktop__small) { + @include fullWidthLayoutGridWrapper3Columns(3); + } + // Desktop M + &.is-desktop__medium { + @include fullWidthLayoutWidthLargeDevice( + calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem), + var(--pi-width-container), + calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)) + ); + } + // Desktop L + &.is-desktop__large { + // Desktop L + @media screen and (max-width: 140rem) { + .pi-layout { + &.pi-layout__02-full-width { + & > *:nth-child(n + 1) { + width: var(--pi-width-container-l); + max-width: var(--pi-width-container-l); + } + } + } + } + // Desktop XL + @media screen and (min-width: 140rem) { + .pi-layout { + &.pi-layout__02-full-width { + & > *:nth-child(n + 1) { + width: 66.66%; + max-width: 66.66%; + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02a-full-width-auto-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02a-full-width-auto-layout.scss index e2416ea..4683a87 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02a-full-width-auto-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02a-full-width-auto-layout.scss @@ -1,20 +1,20 @@ -.pi-layout { - &.pi-layout__02-full-width { - &.pi-layout__02-full-width--auto { - margin: auto; - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__02-full-width { - &.pi-layout__02-full-width--auto { - padding: var(--pi-spacing-x-large); - } - } - } - } -} +.pi-layout { + &.pi-layout__02-full-width { + &.pi-layout__02-full-width--auto { + margin: auto; + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__02-full-width { + &.pi-layout__02-full-width--auto { + padding: var(--pi-spacing-x-large); + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss index 57da7b1..db192e8 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss @@ -1,102 +1,102 @@ -@mixin layoutVerticallyCenteredSpacings($padding-top: var(--pi-public-height-header-mobile)) { - .pi-container-layout { - & > .pi-layout__06-edge-to-edge { - & > .pi-wrapper__header { - .pi-header-wrapper-content__center { - padding-top: $padding-top; - min-width: 75%; - } - } - } - } -} - -.pi-layout { - &.pi-layout__03-vertically-centered { - display: flex; - flex-direction: column; - justify-content: center; - - padding: var(--pi-spacing-xxxx-large); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - &:not(.pi-layout__small):not(.pi-layout__medium):not(.pi-layout__large) { - min-height: 100vh; - } - - // Main wrapper align center and justify center in VerticallyCentered layout - .pi-wrapper__main { - &.pi-wrapper__align-items--center { - &.pi-wrapper__justify--center { - display: flex; - align-items: center; - } - } - } - } -} - -.pi-shell { - .is-fullscreen { - .pi-layout { - &.pi-layout__03-vertically-centered { - // Main wrapper align center and justify center in VerticallyCentered layout - & > .pi-wrapper__main { - &.pi-wrapper__align-items--center { - &.pi-wrapper__justify--center { - height: 100vh; - & > section { - gap: var(--pi-spacing-xxxx-large); - } - - .pi-headline { - gap: var(--pi-spacing-xxxx-large); - .pi-headline-content { - & > *:nth-child(n + 1) { - padding-left: var(--pi-spacing-xx-large); - padding-right: var(--pi-spacing-xx-large); - margin-top: var(--pi-spacing-x-small); - } - } - & > figure { - width: 7.1875rem; - } - } - .pi-close-button { - position: absolute; - @media screen and (max-width: 40rem) { - top: var(--pi-spacing-large); - right: var(--pi-spacing-large); - } - @media screen and (min-width: 40rem) and (max-width: 77.5rem) { - top: var(--pi-spacing-xx-large); - right: var(--pi-spacing-xx-large); - } - @media screen and (min-width: 77.5rem) { - top: var(--pi-spacing-xxxx-large); - right: var(--pi-spacing-xxxx-large); - } - } - } - } - } - } - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - @media screen and (max-width: 62rem) { - @include layoutVerticallyCenteredSpacings; - } - } - // Tablet & Desktop - &:not(.is-mobile) { - @media screen and (min-width: 62rem) { - @include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop)); - } - } -} +@mixin layoutVerticallyCenteredSpacings($padding-top: var(--pi-public-height-header-mobile)) { + .pi-container-layout { + & > .pi-layout__06-edge-to-edge { + & > .pi-wrapper__header { + .pi-header-wrapper-content__center { + padding-top: $padding-top; + min-width: 75%; + } + } + } + } +} + +.pi-layout { + &.pi-layout__03-vertically-centered { + display: flex; + flex-direction: column; + justify-content: center; + + padding: var(--pi-spacing-xxxx-large); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + &:not(.pi-layout__small):not(.pi-layout__medium):not(.pi-layout__large) { + min-height: 100vh; + } + + // Main wrapper align center and justify center in VerticallyCentered layout + .pi-wrapper__main { + &.pi-wrapper__align-items--center { + &.pi-wrapper__justify--center { + display: flex; + align-items: center; + } + } + } + } +} + +.pi-shell { + .is-fullscreen { + .pi-layout { + &.pi-layout__03-vertically-centered { + // Main wrapper align center and justify center in VerticallyCentered layout + & > .pi-wrapper__main { + &.pi-wrapper__align-items--center { + &.pi-wrapper__justify--center { + height: 100vh; + & > section { + gap: var(--pi-spacing-xxxx-large); + } + + .pi-headline { + gap: var(--pi-spacing-xxxx-large); + .pi-headline-content { + & > *:nth-child(n + 1) { + padding-left: var(--pi-spacing-xx-large); + padding-right: var(--pi-spacing-xx-large); + margin-top: var(--pi-spacing-x-small); + } + } + & > figure { + width: 7.1875rem; + } + } + .pi-close-button { + position: absolute; + @media screen and (max-width: 40rem) { + top: var(--pi-spacing-large); + right: var(--pi-spacing-large); + } + @media screen and (min-width: 40rem) and (max-width: 77.5rem) { + top: var(--pi-spacing-xx-large); + right: var(--pi-spacing-xx-large); + } + @media screen and (min-width: 77.5rem) { + top: var(--pi-spacing-xxxx-large); + right: var(--pi-spacing-xxxx-large); + } + } + } + } + } + } + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + @media screen and (max-width: 62rem) { + @include layoutVerticallyCenteredSpacings; + } + } + // Tablet & Desktop + &:not(.is-mobile) { + @media screen and (min-width: 62rem) { + @include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop)); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss index c7c1a0f..bcc581c 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss @@ -1,8 +1,8 @@ -.pi-layout { - &.pi-layout__04-space-between { - display: flex; - flex-direction: column; - justify-content: space-between; - } -} - +.pi-layout { + &.pi-layout__04-space-between { + display: flex; + flex-direction: column; + justify-content: space-between; + } +} + diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05-splitted-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05-splitted-layout.scss index 6bc88b8..af4e4b1 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05-splitted-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05-splitted-layout.scss @@ -1,71 +1,71 @@ -.pi-layout { - &.pi-layout__05-splitted { - display: flex; - flex-direction: column; - justify-content: space-between; - - .pi-panel { - &.pi-panel__is-clickable { - // Is active - &.is-active { - background-color: var(--pi-color-primary-50); - } - &:hover { - cursor: pointer; - } - &.is-active, - &:hover { - box-sizing: border-box; - outline-offset: -1px; - } - } - } - &:not(.pi-05a-splitted-paywall-layout) { - .pi-wrapper__action { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon) { - min-width: 10rem; - } - } - } - } - } -} - -// Desktop -html { - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__05-splitted { - overflow-y: scroll; - } - } - } - &.is-desktop { - .pi-layout { - &.pi-layout__05-splitted { - .pi-main-wrapper-content__right { - .mat-mdc-radio-group { - &.pi-wrapper { - &.pi-wrapper__flex { - max-width: 50%; - } - } - } - } - - @media screen and (min-width: 90rem) { - overflow-y: hidden; - } - &:not(.pi-05a-splitted-paywall-layout) { - height: 100vh; - padding: 0; - .pi-main-wrapper-content { - min-height: 100vh; - } - } - } - } - } -} +.pi-layout { + &.pi-layout__05-splitted { + display: flex; + flex-direction: column; + justify-content: space-between; + + .pi-panel { + &.pi-panel__is-clickable { + // Is active + &.is-active { + background-color: var(--pi-color-primary-50); + } + &:hover { + cursor: pointer; + } + &.is-active, + &:hover { + box-sizing: border-box; + outline-offset: -1px; + } + } + } + &:not(.pi-05a-splitted-paywall-layout) { + .pi-wrapper__action { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon) { + min-width: 10rem; + } + } + } + } + } +} + +// Desktop +html { + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__05-splitted { + overflow-y: scroll; + } + } + } + &.is-desktop { + .pi-layout { + &.pi-layout__05-splitted { + .pi-main-wrapper-content__right { + .mat-mdc-radio-group { + &.pi-wrapper { + &.pi-wrapper__flex { + max-width: 50%; + } + } + } + } + + @media screen and (min-width: 90rem) { + overflow-y: hidden; + } + &:not(.pi-05a-splitted-paywall-layout) { + height: 100vh; + padding: 0; + .pi-main-wrapper-content { + min-height: 100vh; + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss index 90c5504..1ebebb8 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss @@ -1,413 +1,413 @@ -.pi-layout { - &.pi-05a-splitted-paywall-layout { - width: 100vw; - background-size: contain; - background-repeat: no-repeat; - background-position-x: right; - - .pi-main-wrapper-content { - min-height: unset; - // Left - &.pi-main-wrapper-content__left { - display: flex; - flex-direction: column; - header { - h1 + * { - margin-top: var(--pi-spacing-x-small); - } - } - } - // Right - &.pi-main-wrapper-content__right { - display: flex; - flex-direction: column; - } - } - - * + .mat-mdc-radio-group { - padding-top: var(--pi-spacing-x-large); - } - .mat-mdc-radio-group { - display: flex; - flex-direction: column; - label { - margin-bottom: unset; - } - } - .mat-mdc-radio-label-content { - padding-left: var(--pi-spacing-medium); - } - - .pi-panel { - box-shadow: var(--pi-box-shadow); - transition: var(--pi-animation); - width: 100%; - max-width: 30rem; - &.is-active { - border: 1px solid var(--pi-color-primary-100); - background-color: var(--pi-color-primary-50); - } - - &:hover { - cursor: pointer; - box-shadow: var(--pi-box-shadow-hover); - &:not(.is-active) { - border: 1px solid var(--pi-color-primary-200); - } - } - // Padding - &.has-padding { - width: 100%; - padding: var(--pi-spacing-large); - } - } - } -} - -html { - // Mobile - &.is-mobile { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem; - @media screen and (max-height: 46.25rem) { - min-height: calc(198vh + var(--pi-height-footer)); - } - .pi-main-wrapper-content { - // Right - &.pi-main-wrapper-content__right { - height: calc( - 100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) - - var(--pi-height-footer) - 8rem - ); - } - // Left - &.pi-main-wrapper-content__left { - // Header - & > header { - transform: scale(0.92); - .pi-color__black-primary { - & > article { - display: flex; - gap: var(--pi-spacing-xxx-small); - } - } - } - } - } - - // Radio panels - .mat-mdc-radio-group { - gap: var(--pi-spacing-small); - width: 100%; - transform: scale(0.92); - } - - .pi-button { - &:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not( - .pi-button__large - ) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large); - } - } - } - } - } - } - &.is-tablet { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem; - .pi-wrapper__main { - .pi-main-wrapper-content { - &.pi-main-wrapper-content__left { - & > header { - max-width: 66.66%; - margin: 0 auto; - } - } - &.pi-main-wrapper-content__right { - min-height: calc( - 100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) - - var(--pi-height-footer) - 20rem - ); - } - } - } - .pi-button { - &:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not( - .pi-button__large - ) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large); - min-width: 11rem; - } - } - } - } - } - // Tablet S - &.is-tablet__small { - .pi-wrapper__main { - .pi-main-wrapper-content { - & > * + *:not(:last-child) { - width: 66.66%; - margin: var(--pi-spacing-x-large) auto; - } - } - } - } - // Tablet L - &.is-tablet__large { - .pi-wrapper__main { - .pi-main-wrapper-content { - & > * + *:not(:last-child) { - width: 50%; - margin: var(--pi-spacing-x-large) auto; - } - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - // Main - .pi-wrapper { - &.pi-wrapper__main { - & > section { - padding-bottom: var(--pi-height-header); - } - .pi-main-wrapper-content { - width: 100%; - // Left - &.pi-main-wrapper-content__left { - & > header { - justify-content: center; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - h3 { - display: block; - } - } - form { - & > h4 { - text-align: center; - } - } - // Action wrapper - .pi-wrapper__action { - position: fixed; - bottom: 0; - left: 0; - z-index: 999; - height: var(--pi-height-footer); - width: 100%; - margin-top: unset; - background-color: var(--pi-color-white-rgba-06); - box-shadow: var(--pi-box--shadow-top); - } - } - // Right - &.pi-main-wrapper-content__right { - gap: var(--pi-spacing-xxxx-large); - padding-top: 6rem; - background-image: unset; - - & > form { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - width: 100%; - } - } - } - } - } - .mat-mdc-radio-group { - align-items: center; - } - .mat-mdc-radio-label-content { - h3 { - font: { - size: var(--pi-font-size-xx-large); - } - } - } - // Mobile and Tablet S - @media screen and (max-width: 62rem) { - .pi-main-wrapper-content { - &.pi-main-wrapper-content__left { - // Header - & > header { - h1 { - font: { - size: var(--pi-font-size-x-large); - } - } - } - } - } - } - // Action wrapper - .pi-wrapper__action { - justify-content: space-around; - } - } - } - } - // Small device - @media screen and (max-width: 62rem) { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - .mat-mdc-radio-group > * { - width: -webkit-fill-available; - } - } - } - } - } - } // Tablet & Desktop - &:not(.is-mobile) { - // Tablet L and Desktop - @media screen and (min-width: 62rem) { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - .pi-main-wrapper-content { - &.pi-main-wrapper-content__left { - // Header - & > header { - h1 { - font: { - size: var(--pi-font-size-xx-large); - } - } - } - } - } - - .mat-mdc-radio-label-content { - h3 { - font: { - size: 2.375rem; - } - } - } - } - } - } - } - } - // Desktop - &.is-desktop { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - height: 100vh; - overflow-y: hidden; - .pi-wrapper__main { - .pi-main-wrapper-content { - // Left - &.pi-main-wrapper-content__left { - justify-content: space-between; - max-width: 50%; - .pi-panel { - &.has-padding { - max-width: 32rem; - } - } - .pi-wrapper { - &.pi-wrapper__action { - gap: var(--pi-spacing-x-large); - } - } - } - // Right - &.pi-main-wrapper-content__right { - justify-content: center; - } - } - } - } - } - } - &.is-desktop__small { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - padding: var(--pi-spacing-xxx-large); - gap: var(--pi-spacing-xx-large); - .pi-main-wrapper-content { - height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large)); - // Left - &.pi-main-wrapper-content__left { - .mat-mdc-radio-group { - max-width: 70%; - } - } - - // Right - &.pi-main-wrapper-content__right { - gap: var(--pi-spacing-medium); - } - } - } - } - } - } - &.is-desktop__medium { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - padding: var(--pi-spacing-xxx-large); - gap: var(--pi-spacing-xxx-large); - .pi-main-wrapper-content { - // Left - &.pi-main-wrapper-content__left { - height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large)); - .mat-mdc-radio-group { - max-width: 66.66%; - } - } - // Right - &.pi-main-wrapper-content__right { - gap: var(--pi-spacing-x-large); - } - } - } - } - } - } - } - &.is-desktop__large { - .pi-layout { - &.pi-layout__05-splitted { - &.pi-05a-splitted-paywall-layout { - padding: var(--pi-spacing-xxxx-large); - gap: var(--pi-spacing-xxxx-large); - - .pi-main-wrapper-content { - height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxxx-large)); - // Left - &.pi-main-wrapper-content__left { - .mat-mdc-radio-group { - max-width: 50%; - } - .pi-wrapper__action { - margin-top: 5rem; - } - } - } - } - } - } - } -} +.pi-layout { + &.pi-05a-splitted-paywall-layout { + width: 100vw; + background-size: contain; + background-repeat: no-repeat; + background-position-x: right; + + .pi-main-wrapper-content { + min-height: unset; + // Left + &.pi-main-wrapper-content__left { + display: flex; + flex-direction: column; + header { + h1 + * { + margin-top: var(--pi-spacing-x-small); + } + } + } + // Right + &.pi-main-wrapper-content__right { + display: flex; + flex-direction: column; + } + } + + * + .mat-mdc-radio-group { + padding-top: var(--pi-spacing-x-large); + } + .mat-mdc-radio-group { + display: flex; + flex-direction: column; + label { + margin-bottom: unset; + } + } + .mat-mdc-radio-label-content { + padding-left: var(--pi-spacing-medium); + } + + .pi-panel { + box-shadow: var(--pi-box-shadow); + transition: var(--pi-animation); + width: 100%; + max-width: 30rem; + &.is-active { + border: 1px solid var(--pi-color-primary-100); + background-color: var(--pi-color-primary-50); + } + + &:hover { + cursor: pointer; + box-shadow: var(--pi-box-shadow-hover); + &:not(.is-active) { + border: 1px solid var(--pi-color-primary-200); + } + } + // Padding + &.has-padding { + width: 100%; + padding: var(--pi-spacing-large); + } + } + } +} + +html { + // Mobile + &.is-mobile { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem; + @media screen and (max-height: 46.25rem) { + min-height: calc(198vh + var(--pi-height-footer)); + } + .pi-main-wrapper-content { + // Right + &.pi-main-wrapper-content__right { + height: calc( + 100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) - + var(--pi-height-footer) - 8rem + ); + } + // Left + &.pi-main-wrapper-content__left { + // Header + & > header { + transform: scale(0.92); + .pi-color__black-primary { + & > article { + display: flex; + gap: var(--pi-spacing-xxx-small); + } + } + } + } + } + + // Radio panels + .mat-mdc-radio-group { + gap: var(--pi-spacing-small); + width: 100%; + transform: scale(0.92); + } + + .pi-button { + &:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not( + .pi-button__large + ) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large); + } + } + } + } + } + } + &.is-tablet { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem; + .pi-wrapper__main { + .pi-main-wrapper-content { + &.pi-main-wrapper-content__left { + & > header { + max-width: 66.66%; + margin: 0 auto; + } + } + &.pi-main-wrapper-content__right { + min-height: calc( + 100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) - + var(--pi-height-footer) - 20rem + ); + } + } + } + .pi-button { + &:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not( + .pi-button__large + ) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large); + min-width: 11rem; + } + } + } + } + } + // Tablet S + &.is-tablet__small { + .pi-wrapper__main { + .pi-main-wrapper-content { + & > * + *:not(:last-child) { + width: 66.66%; + margin: var(--pi-spacing-x-large) auto; + } + } + } + } + // Tablet L + &.is-tablet__large { + .pi-wrapper__main { + .pi-main-wrapper-content { + & > * + *:not(:last-child) { + width: 50%; + margin: var(--pi-spacing-x-large) auto; + } + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + // Main + .pi-wrapper { + &.pi-wrapper__main { + & > section { + padding-bottom: var(--pi-height-header); + } + .pi-main-wrapper-content { + width: 100%; + // Left + &.pi-main-wrapper-content__left { + & > header { + justify-content: center; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + h3 { + display: block; + } + } + form { + & > h4 { + text-align: center; + } + } + // Action wrapper + .pi-wrapper__action { + position: fixed; + bottom: 0; + left: 0; + z-index: 999; + height: var(--pi-height-footer); + width: 100%; + margin-top: unset; + background-color: var(--pi-color-white-rgba-06); + box-shadow: var(--pi-box--shadow-top); + } + } + // Right + &.pi-main-wrapper-content__right { + gap: var(--pi-spacing-xxxx-large); + padding-top: 6rem; + background-image: unset; + + & > form { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + width: 100%; + } + } + } + } + } + .mat-mdc-radio-group { + align-items: center; + } + .mat-mdc-radio-label-content { + h3 { + font: { + size: var(--pi-font-size-xx-large); + } + } + } + // Mobile and Tablet S + @media screen and (max-width: 62rem) { + .pi-main-wrapper-content { + &.pi-main-wrapper-content__left { + // Header + & > header { + h1 { + font: { + size: var(--pi-font-size-x-large); + } + } + } + } + } + } + // Action wrapper + .pi-wrapper__action { + justify-content: space-around; + } + } + } + } + // Small device + @media screen and (max-width: 62rem) { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + .mat-mdc-radio-group > * { + width: -webkit-fill-available; + } + } + } + } + } + } // Tablet & Desktop + &:not(.is-mobile) { + // Tablet L and Desktop + @media screen and (min-width: 62rem) { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + .pi-main-wrapper-content { + &.pi-main-wrapper-content__left { + // Header + & > header { + h1 { + font: { + size: var(--pi-font-size-xx-large); + } + } + } + } + } + + .mat-mdc-radio-label-content { + h3 { + font: { + size: 2.375rem; + } + } + } + } + } + } + } + } + // Desktop + &.is-desktop { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + height: 100vh; + overflow-y: hidden; + .pi-wrapper__main { + .pi-main-wrapper-content { + // Left + &.pi-main-wrapper-content__left { + justify-content: space-between; + max-width: 50%; + .pi-panel { + &.has-padding { + max-width: 32rem; + } + } + .pi-wrapper { + &.pi-wrapper__action { + gap: var(--pi-spacing-x-large); + } + } + } + // Right + &.pi-main-wrapper-content__right { + justify-content: center; + } + } + } + } + } + } + &.is-desktop__small { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + padding: var(--pi-spacing-xxx-large); + gap: var(--pi-spacing-xx-large); + .pi-main-wrapper-content { + height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large)); + // Left + &.pi-main-wrapper-content__left { + .mat-mdc-radio-group { + max-width: 70%; + } + } + + // Right + &.pi-main-wrapper-content__right { + gap: var(--pi-spacing-medium); + } + } + } + } + } + } + &.is-desktop__medium { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + padding: var(--pi-spacing-xxx-large); + gap: var(--pi-spacing-xxx-large); + .pi-main-wrapper-content { + // Left + &.pi-main-wrapper-content__left { + height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large)); + .mat-mdc-radio-group { + max-width: 66.66%; + } + } + // Right + &.pi-main-wrapper-content__right { + gap: var(--pi-spacing-x-large); + } + } + } + } + } + } + } + &.is-desktop__large { + .pi-layout { + &.pi-layout__05-splitted { + &.pi-05a-splitted-paywall-layout { + padding: var(--pi-spacing-xxxx-large); + gap: var(--pi-spacing-xxxx-large); + + .pi-main-wrapper-content { + height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxxx-large)); + // Left + &.pi-main-wrapper-content__left { + .mat-mdc-radio-group { + max-width: 50%; + } + .pi-wrapper__action { + margin-top: 5rem; + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss index 336ca0e..c6964a8 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss @@ -1,52 +1,52 @@ -@mixin saasContainerSpacings($padding-top: var(--pi-public-height-header-mobile)) { - .pi-container-layout { - padding-bottom: var(--pi-spacing-xxxx-large); - & > .pi-layout__06-edge-to-edge { - & > .pi-wrapper__header { - .pi-header-wrapper-content__center { - padding-top: $padding-top; - } - } - } - } -} - -.pi-layout { - &.pi-layout__06-edge-to-edge { - width: 100%; - & > *:nth-child(n + 2) { - &:not(.pi-wrapper__list) { - display: block; - margin-top: var(--pi-spacing-x-large); - } - } - } -} -html { - // Mobile - &.is-mobile { - .pi-layout { - &.pi-layout__06-edge-to-edge { - padding: var(--pi-spacing-x-large); - } - } - } - - // Tablet - &.is-tablet { - .pi-layout { - &.pi-layout__06-edge-to-edge { - padding: var(--pi-spacing-xxx-large); - } - } - } - - // Desktop - &.is-desktop { - .pi-layout { - &.pi-layout__06-edge-to-edge { - padding: var(--pi-spacing-xxxx-large); - } - } - } -} +@mixin saasContainerSpacings($padding-top: var(--pi-public-height-header-mobile)) { + .pi-container-layout { + padding-bottom: var(--pi-spacing-xxxx-large); + & > .pi-layout__06-edge-to-edge { + & > .pi-wrapper__header { + .pi-header-wrapper-content__center { + padding-top: $padding-top; + } + } + } + } +} + +.pi-layout { + &.pi-layout__06-edge-to-edge { + width: 100%; + & > *:nth-child(n + 2) { + &:not(.pi-wrapper__list) { + display: block; + margin-top: var(--pi-spacing-x-large); + } + } + } +} +html { + // Mobile + &.is-mobile { + .pi-layout { + &.pi-layout__06-edge-to-edge { + padding: var(--pi-spacing-x-large); + } + } + } + + // Tablet + &.is-tablet { + .pi-layout { + &.pi-layout__06-edge-to-edge { + padding: var(--pi-spacing-xxx-large); + } + } + } + + // Desktop + &.is-desktop { + .pi-layout { + &.pi-layout__06-edge-to-edge { + padding: var(--pi-spacing-xxxx-large); + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss index 0d48638..10e36bd 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss @@ -1,221 +1,221 @@ -@mixin wrappersWidth( - $width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), - $justify-content: center, - $margin: 0 auto, - $side-spacing: x-large -) { - .pi-layout { - &.pi-layout__07-list { - .pi-wrapper { - // Wrapper - &:not(.pi-wrapper__list):not(.pi-wrapper__flex) { - max-width: $width; - width: -webkit-fill-available; - } - // List Wrapper - &.pi-wrapper__list { - .pi-data-grid { - justify-content: $justify-content; - } - } - } - } - } - - .pi-layout { - &.pi-layout__07-list { - display: flex; - flex-direction: column; - justify-content: space-between; - // Mode Grid - .pi-wrapper { - // List Wrapper - &.pi-wrapper__list { - max-width: $width; - margin-top: var(--pi-spacing-xx-large); - } - } - // List Layout and edge to edge - &.pi-layout__05-edge-to-edge { - // Mode Grid - .pi-wrapper { - // List Wrapper - &.pi-wrapper__list { - .pi-data-grid { - .pi-grid-item { - // < Desktop L - @media screen and (max-width: 120rem) { - max-width: calc(100% - var(--pi-spacing-x-large)); - } - // >= Desktop L - @media screen and (min-width: 120rem) { - max-width: $width; - } - } - } - } - } - } - } - } -} - -@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) { - .pi-shell__deale-saas { - & > div { - .pi-layout { - &.pi-layout__07-list { - height: $height; - } - } - } - } -} - -@mixin paginatorWidth($width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))) { - .pi-shell__deale-saas { - & > div { - .pi-layout { - &.pi-layout__07-list { - .pi-paginator { - max-width: $width; - } - } - } - } - } -} - -.pi-shell__deale-saas { - & > div { - // Grid mode (Infinite scroll) - &.is-mode-grid { - .pi-layout { - &.pi-layout__07-list { - width: 100%; - overflow-y: hidden; - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include wrappersWidth; - @include listLayoutHeight; - @include paginatorWidth; - } - // Mobile & Tablet - &:not(.is-desktop) { - .pi-shell__deale-saas { - .pi-icon-button { - &.is-sticky { - position: absolute; - right: var(--pi-spacing-x-large); - bottom: calc( - var(--pi-height-footer) + env(safe-area-inset-bottom) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-small) - ); - z-index: 99; - } - } - } - // Small device - @media screen and (max-width: 62rem) { - .pi-shell__deale-saas { - & > div { - .pi-layout { - &.pi-layout__07-list { - .pi-wrapper__header { - .pi-switch-button { - display: none; - } - } - } - } - // List mode - &.is-mode-list { - .pi-layout { - &.pi-layout__07-list { - .pi-wrapper__header { - padding-top: var(--pi-height-header-tablet); - } - } - } - } - } - // Grid mode - &.is-mode-grid { - .pi-layout { - &.pi-layout__07-list { - // Wrapper - .pi-wrapper { - // Header wrapper - &.pi-wrapper__header { - min-height: var(--pi-height-layout-header); - margin: var(--pi-height-header-mobile) auto 0; - } - } - } - } - } - } - } - } - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include listLayoutHeight(calc(100vh - var(--pi-height-header-tablet))); - @include wrappersWidth; - @include paginatorWidth; - } - // Tablet L - &.is-tablet__large { - @include listLayoutHeight( - calc( - 100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) - - var(--pi-spacing-x-large) - var(--pi-spacing-xx-large) - ) - ); - @include wrappersWidth( - calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), - left, - unset, - unset - ); - @include paginatorWidth(calc(100%)); - } - } - - &.is-desktop { - @include listLayoutHeight( - calc( - 100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) - - var(--pi-spacing-x-large) - var(--pi-spacing-medium) - ) - ); - // Desktop S - &.is-desktop__small { - @include wrappersWidth( - calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), - left, - unset, - unset - ); - @include paginatorWidth(calc(100%)); - } - // Desktop M - &.is-desktop__medium { - @include wrappersWidth(calc(100% - var(--pi-spacing-x-large)), left, unset, unset); - @include paginatorWidth(calc(100% - var(--pi-spacing-x-large))); - } - // Desktop L - &.is-desktop__large { - @include wrappersWidth(var(--pi-width-container-l), left, unset, unset); - @include paginatorWidth(calc(var(--pi-width-container-l))); - } - } -} +@mixin wrappersWidth( + $width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), + $justify-content: center, + $margin: 0 auto, + $side-spacing: x-large +) { + .pi-layout { + &.pi-layout__07-list { + .pi-wrapper { + // Wrapper + &:not(.pi-wrapper__list):not(.pi-wrapper__flex) { + max-width: $width; + width: -webkit-fill-available; + } + // List Wrapper + &.pi-wrapper__list { + .pi-data-grid { + justify-content: $justify-content; + } + } + } + } + } + + .pi-layout { + &.pi-layout__07-list { + display: flex; + flex-direction: column; + justify-content: space-between; + // Mode Grid + .pi-wrapper { + // List Wrapper + &.pi-wrapper__list { + max-width: $width; + margin-top: var(--pi-spacing-xx-large); + } + } + // List Layout and edge to edge + &.pi-layout__05-edge-to-edge { + // Mode Grid + .pi-wrapper { + // List Wrapper + &.pi-wrapper__list { + .pi-data-grid { + .pi-grid-item { + // < Desktop L + @media screen and (max-width: 120rem) { + max-width: calc(100% - var(--pi-spacing-x-large)); + } + // >= Desktop L + @media screen and (min-width: 120rem) { + max-width: $width; + } + } + } + } + } + } + } + } +} + +@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) { + .pi-shell__deale-saas { + & > div { + .pi-layout { + &.pi-layout__07-list { + height: $height; + } + } + } + } +} + +@mixin paginatorWidth($width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))) { + .pi-shell__deale-saas { + & > div { + .pi-layout { + &.pi-layout__07-list { + .pi-paginator { + max-width: $width; + } + } + } + } + } +} + +.pi-shell__deale-saas { + & > div { + // Grid mode (Infinite scroll) + &.is-mode-grid { + .pi-layout { + &.pi-layout__07-list { + width: 100%; + overflow-y: hidden; + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include wrappersWidth; + @include listLayoutHeight; + @include paginatorWidth; + } + // Mobile & Tablet + &:not(.is-desktop) { + .pi-shell__deale-saas { + .pi-icon-button { + &.is-sticky { + position: absolute; + right: var(--pi-spacing-x-large); + bottom: calc( + var(--pi-height-footer) + env(safe-area-inset-bottom) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-small) + ); + z-index: 99; + } + } + } + // Small device + @media screen and (max-width: 62rem) { + .pi-shell__deale-saas { + & > div { + .pi-layout { + &.pi-layout__07-list { + .pi-wrapper__header { + .pi-switch-button { + display: none; + } + } + } + } + // List mode + &.is-mode-list { + .pi-layout { + &.pi-layout__07-list { + .pi-wrapper__header { + padding-top: var(--pi-height-header-tablet); + } + } + } + } + } + // Grid mode + &.is-mode-grid { + .pi-layout { + &.pi-layout__07-list { + // Wrapper + .pi-wrapper { + // Header wrapper + &.pi-wrapper__header { + min-height: var(--pi-height-layout-header); + margin: var(--pi-height-header-mobile) auto 0; + } + } + } + } + } + } + } + } + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include listLayoutHeight(calc(100vh - var(--pi-height-header-tablet))); + @include wrappersWidth; + @include paginatorWidth; + } + // Tablet L + &.is-tablet__large { + @include listLayoutHeight( + calc( + 100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) - + var(--pi-spacing-x-large) - var(--pi-spacing-xx-large) + ) + ); + @include wrappersWidth( + calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), + left, + unset, + unset + ); + @include paginatorWidth(calc(100%)); + } + } + + &.is-desktop { + @include listLayoutHeight( + calc( + 100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) - + var(--pi-spacing-x-large) - var(--pi-spacing-medium) + ) + ); + // Desktop S + &.is-desktop__small { + @include wrappersWidth( + calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), + left, + unset, + unset + ); + @include paginatorWidth(calc(100%)); + } + // Desktop M + &.is-desktop__medium { + @include wrappersWidth(calc(100% - var(--pi-spacing-x-large)), left, unset, unset); + @include paginatorWidth(calc(100% - var(--pi-spacing-x-large))); + } + // Desktop L + &.is-desktop__large { + @include wrappersWidth(var(--pi-width-container-l), left, unset, unset); + @include paginatorWidth(calc(var(--pi-width-container-l))); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07a-list-auto-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07a-list-auto-layout.scss index 2434860..b4e9ab7 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07a-list-auto-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07a-list-auto-layout.scss @@ -1,18 +1,18 @@ -.pi-layout { - &.pi-layout__07-list { - &.pi-layout__07a-list--auto { - // Mode Grid - .pi-wrapper { - margin: 0 auto var(--pi-spacing-x-large); - // List Wrapper - &.pi-wrapper__list { - & > section { - & > div { - margin: auto; - } - } - } - } - } - } -} +.pi-layout { + &.pi-layout__07-list { + &.pi-layout__07a-list--auto { + // Mode Grid + .pi-wrapper { + margin: 0 auto var(--pi-spacing-x-large); + // List Wrapper + &.pi-wrapper__list { + & > section { + & > div { + margin: auto; + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-08-form-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-08-form-layout.scss index 70eeb09..8934a84 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-08-form-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-08-form-layout.scss @@ -1,19 +1,19 @@ -.pi-layout { - &.pi-layout__05-splitted { - .pi-layout { - &.pi-layout__08-form { - padding-top: var(--pi-spacing-medium); - &::-webkit-scrollbar { - display: block; - width: var(--pi-spacing-xxx-small); - } - } - } - } - &.pi-layout__08-form { - .pi-filter-range { - display: block; - width: 100%; - } - } -} +.pi-layout { + &.pi-layout__05-splitted { + .pi-layout { + &.pi-layout__08-form { + padding-top: var(--pi-spacing-medium); + &::-webkit-scrollbar { + display: block; + width: var(--pi-spacing-xxx-small); + } + } + } + } + &.pi-layout__08-form { + .pi-filter-range { + display: block; + width: 100%; + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss index 3a65530..d24e93c 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss @@ -1,3 +1,3 @@ -.pi-container-layout { - padding-bottom: var(--pi-spacing-xxxx-large); -} +.pi-container-layout { + padding-bottom: var(--pi-spacing-xxxx-large); +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss index fe0b79f..c83dd19 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss @@ -1,203 +1,203 @@ -@mixin layoutHeight( - $height: - calc( - 100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) - - var(--pi-spacing-x-large) - ) -) { - .pi-layout { - &.pi-layout__main, - &.pi-layout__01-dashboard { - height: $height; - } - } -} - -@mixin layoutWidth( - $max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), - $margin: var(--pi-height-header-mobile) auto 0 -) { - .pi-layout { - // Default scroll - &.pi-layout__main { - max-width: $max-width; - margin: $margin; - } - } -} - -.pi-layout { - &:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) { - display: block; - } - - // Default scroll - &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(.pi-layout__05-splitted):not(.pi-layout__08-form - ) { - overflow-y: scroll; - overflow-x: hidden; - } - &.pi-layout__main { - & > *:nth-child(1) { - margin-top: var(--pi-spacing-xx-large); - } - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-x-large); - } - & > .pi-component { - display: block; - & > .pi-panel { - box-shadow: var(--pi-box-shadow); - } - } - } - - &.pi-layout__no-padding { - padding: 0; - } -} - -html { - // Mobile - &.is-mobile { - @include layoutHeight; - @include layoutWidth; - .has-bottom-sticky-note { - .pi-layout { - &.pi-layout__01-dashboard, - &.pi-layout__main { - padding-bottom: 11.5rem; - } - &.pi-layout__07-list { - & > .pi-wrapper__list { - & > section { - padding-bottom: 5rem; - } - } - } - } - } - .pi-layout { - // Default scroll - &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not( - .pi-layout__05-splitted - ):not(.pi-layout__08-form) { - max-width: calc(100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium)); - } - &.pi-layout__main { - padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer)); - & > *:nth-child(-n + 3) { - margin-top: var(--pi-spacing-medium); - } - } - } - } - - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - .has-bottom-sticky-note { - @include layoutHeight( - calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) - 2rem) - ); - .pi-layout { - &.pi-layout__main, - &.pi-layout__01-dashboard { - padding-bottom: 5rem; - } - &.pi-layout__07-list { - & > .pi-wrapper__list { - & > section { - padding-bottom: 5rem; - } - } - } - } - } - - @include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer))); - @include layoutWidth( - calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), - var(--pi-height-header-tablet) auto 0 - ); - .pi-layout { - // Default scroll - &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not( - .pi-layout__05-splitted - ):not(.pi-layout__08-form) { - max-width: calc(100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - } - &.pi-layout__main { - padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer)); - & > *:nth-child(-n + 3) { - margin-top: var(--pi-spacing-x-large); - } - } - } - } - // Tablet L - &.is-tablet__large { - .has-bottom-sticky-note { - .pi-layout { - &.pi-layout__main, - &.pi-layout__01-dashboard { - padding-bottom: 5rem; - } - &.pi-layout__07-list { - & > .pi-wrapper__list { - & > section { - padding-bottom: 5rem; - } - } - } - } - } - @include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - 3.25rem)); - @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset); - } - } - - // Tablet & Desktop - &:not(.is-desktop) { - // Large device - @media screen and (min-width: 62rem) { - .pi-layout { - &.pi-layout__main { - .pi-layout { - &.pi-layout__main { - & > *:nth-child(-n + 3) { - margin-top: var(--pi-spacing-xx-large); - } - } - } - } - } - } - } - - // Desktop - &.is-desktop { - .has-bottom-sticky-note { - .pi-layout { - &.pi-layout__main, - &.pi-layout__01-dashboard { - padding-bottom: 5rem; - } - &.pi-layout__07-list { - & > .pi-wrapper__list { - & > section { - padding-bottom: 5rem; - } - } - } - } - } - @include layoutHeight( - calc( - 100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) - var(--pi-spacing-large) - ) - ); - @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset); - } -} +@mixin layoutHeight( + $height: + calc( + 100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) - + var(--pi-spacing-x-large) + ) +) { + .pi-layout { + &.pi-layout__main, + &.pi-layout__01-dashboard { + height: $height; + } + } +} + +@mixin layoutWidth( + $max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), + $margin: var(--pi-height-header-mobile) auto 0 +) { + .pi-layout { + // Default scroll + &.pi-layout__main { + max-width: $max-width; + margin: $margin; + } + } +} + +.pi-layout { + &:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) { + display: block; + } + + // Default scroll + &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(.pi-layout__05-splitted):not(.pi-layout__08-form + ) { + overflow-y: scroll; + overflow-x: hidden; + } + &.pi-layout__main { + & > *:nth-child(1) { + margin-top: var(--pi-spacing-xx-large); + } + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-x-large); + } + & > .pi-component { + display: block; + & > .pi-panel { + box-shadow: var(--pi-box-shadow); + } + } + } + + &.pi-layout__no-padding { + padding: 0; + } +} + +html { + // Mobile + &.is-mobile { + @include layoutHeight; + @include layoutWidth; + .has-bottom-sticky-note { + .pi-layout { + &.pi-layout__01-dashboard, + &.pi-layout__main { + padding-bottom: 11.5rem; + } + &.pi-layout__07-list { + & > .pi-wrapper__list { + & > section { + padding-bottom: 5rem; + } + } + } + } + } + .pi-layout { + // Default scroll + &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not( + .pi-layout__05-splitted + ):not(.pi-layout__08-form) { + max-width: calc(100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium)); + } + &.pi-layout__main { + padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer)); + & > *:nth-child(-n + 3) { + margin-top: var(--pi-spacing-medium); + } + } + } + } + + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + .has-bottom-sticky-note { + @include layoutHeight( + calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) - 2rem) + ); + .pi-layout { + &.pi-layout__main, + &.pi-layout__01-dashboard { + padding-bottom: 5rem; + } + &.pi-layout__07-list { + & > .pi-wrapper__list { + & > section { + padding-bottom: 5rem; + } + } + } + } + } + + @include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer))); + @include layoutWidth( + calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)), + var(--pi-height-header-tablet) auto 0 + ); + .pi-layout { + // Default scroll + &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not( + .pi-layout__05-splitted + ):not(.pi-layout__08-form) { + max-width: calc(100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + } + &.pi-layout__main { + padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer)); + & > *:nth-child(-n + 3) { + margin-top: var(--pi-spacing-x-large); + } + } + } + } + // Tablet L + &.is-tablet__large { + .has-bottom-sticky-note { + .pi-layout { + &.pi-layout__main, + &.pi-layout__01-dashboard { + padding-bottom: 5rem; + } + &.pi-layout__07-list { + & > .pi-wrapper__list { + & > section { + padding-bottom: 5rem; + } + } + } + } + } + @include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - 3.25rem)); + @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset); + } + } + + // Tablet & Desktop + &:not(.is-desktop) { + // Large device + @media screen and (min-width: 62rem) { + .pi-layout { + &.pi-layout__main { + .pi-layout { + &.pi-layout__main { + & > *:nth-child(-n + 3) { + margin-top: var(--pi-spacing-xx-large); + } + } + } + } + } + } + } + + // Desktop + &.is-desktop { + .has-bottom-sticky-note { + .pi-layout { + &.pi-layout__main, + &.pi-layout__01-dashboard { + padding-bottom: 5rem; + } + &.pi-layout__07-list { + & > .pi-wrapper__list { + & > section { + padding-bottom: 5rem; + } + } + } + } + } + @include layoutHeight( + calc( + 100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) - var(--pi-spacing-large) + ) + ); + @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset); + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/index.scss b/libs/ui/src/lib/styles/deale-saas/layouts/index.scss index fcaae36..2f6d11e 100644 --- a/libs/ui/src/lib/styles/deale-saas/layouts/index.scss +++ b/libs/ui/src/lib/styles/deale-saas/layouts/index.scss @@ -1,18 +1,18 @@ -@forward 'pi-00-authentication-layout'; -@forward 'pi-01-dashboard-layout'; -@forward 'pi-01a-dashboard-layout-company'; -@forward 'pi-01b-dashboard-layout-investor'; -@forward 'pi-01c-dashboard-layout-advisor'; -@forward 'pi-01-dashboard-layout-old'; -@forward 'pi-02-full-width-layout'; -@forward 'pi-02a-full-width-auto-layout'; -@forward 'pi-03-vertically-centered-layout'; -@forward 'pi-04-space-between-layout'; -@forward 'pi-05-splitted-layout'; -@forward 'pi-05a-splitted-paywall-layout'; -@forward 'pi-06-edge-to-edge-layout'; -@forward 'pi-07-list-layout'; -@forward 'pi-07a-list-auto-layout'; -@forward 'pi-08-form-layout'; -@forward 'pi-container-layout'; -@forward 'pi-layout'; +@forward 'pi-00-authentication-layout'; +@forward 'pi-01-dashboard-layout'; +@forward 'pi-01a-dashboard-layout-company'; +@forward 'pi-01b-dashboard-layout-investor'; +@forward 'pi-01c-dashboard-layout-advisor'; +@forward 'pi-01-dashboard-layout-old'; +@forward 'pi-02-full-width-layout'; +@forward 'pi-02a-full-width-auto-layout'; +@forward 'pi-03-vertically-centered-layout'; +@forward 'pi-04-space-between-layout'; +@forward 'pi-05-splitted-layout'; +@forward 'pi-05a-splitted-paywall-layout'; +@forward 'pi-06-edge-to-edge-layout'; +@forward 'pi-07-list-layout'; +@forward 'pi-07a-list-auto-layout'; +@forward 'pi-08-form-layout'; +@forward 'pi-container-layout'; +@forward 'pi-layout'; diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss index 3db453e..b30aa88 100644 --- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss +++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss @@ -1,361 +1,361 @@ -@mixin asideActionWrapper() { - gap: var(--pi-spacing-medium); - & > *:nth-child(n + 1) { - display: flex; - justify-content: center; - align-items: center; - min-width: 50%; - width: -webkit-fill-available; - } - - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__icon--single - ):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) { - min-width: unset; - padding-left: unset; - padding-right: unset; - } - } - .pi-button__w100 { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__icon--single - ):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) { - min-width: 100%; - } - } - } -} -.pi-shell__deale-saas { - & > div { - .pi-saas-aside { - display: block; - position: fixed; - z-index: 99; - padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0 - calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)); - overflow: hidden; - transition: var(--pi-animation); - & > .pi-close-button { - position: absolute; - margin-top: -1rem; - } - & > .pi-icon { - position: absolute; - height: var(--pi-spacing-xxx-large); - width: var(--pi-spacing-xxx-large); - margin-left: var(--pi-spacing-x-small); - margin-top: -0.475rem; - transition: var(--pi-animation); - } - &.pi-saas-aside__white { - background-color: var(--pi-color-white); - border: 1px solid var(--pi-color-white-900); - .pi-buyer-companies-list-filters { - .pi-accordion + .pi-wrapper { - padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large); - } - } - } - .pi-accordion-item-content__header { - & > .pi-text-viewer { - &.pi-text-viewer__font-size--m-xs { - label { - font: { - size: var(--pi-font-size-small); - } - } - } - } - } - } - - // Aside is open - &.aside-is-open { - .pi-saas-aside { - opacity: 1; - } - } - - // Aside is closed - &.aside-is-closed { - .pi-saas-aside { - transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))); - } - } - // Aside is closable - &.aside-is-closable { - .pi-dynamic-menu { - & > *:nth-child(2) { - padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0; - - .pi-wrapper__action { - flex-direction: column; - @include asideActionWrapper; - } - } - - & > *:nth-child(3) { - @include asideActionWrapper; - } - } - } - - // Dynamic menu - .pi-dynamic-menu { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; - overflow-y: scroll; - - .pi-panel { - width: 100%; - } - - & > *:nth-child(1) { - flex-shrink: 0; - height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top)); - .pi-headline { - max-width: 50%; - margin: auto; - } - } - & > *:nth-child(2) { - &.pi-wrapper__flex { - overflow-y: auto; - height: 100%; - // Generic Scroll - &::-webkit-scrollbar { - width: 0.1875rem; - } - - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - border-radius: var(--pi-border-radius-small); - - &:hover { - transition: var(--pi-animation); - } - } - } - - & > .pi-list-item { - border-radius: var(--pi-border-radius-medium); - padding: var(--pi-spacing-medium); - } - } - & > *:nth-child(3) { - flex-shrink: 0; - width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - margin: 0 auto; - .pi-icon-button { - margin-bottom: var(--pi-spacing-x-large); - width: -webkit-fill-available; - } - } - &.pi-saas-admin-user-profile { - .pi-icon__x-large { - &.is-stroked { - &.pi-icon__appearance--fill { - height: 7rem; - width: 7rem; - border-radius: 50%; - .mat-icon { - height: 4rem; - width: 4rem; - } - } - } - } - } - } - } - - // Aside is NOT closable - &:not(.aside-is-closable) { - .pi-dynamic-menu { - & > *:nth-child(1) { - padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large) - calc(var(--pi-spacing-x-large) + var(--pi-spacing-large)); - } - } - } -} - -html { - // Mobile - &.is-mobile { - .pi-shell__deale-saas { - & > div { - .pi-saas-aside { - & > .pi-close-button { - margin-left: calc(100% - 0.9rem - var(--pi-spacing-large)); - } - } - // Aside is open - &.aside-is-open { - .pi-saas-aside { - transform: translateX(var(--pi-spacing-x-large)); - } - } - } - } - } - - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-shell__deale-saas { - & > div { - // Not fullscreen - &:not(.is-fullscreen) { - .pi-saas-aside { - top: 0; - height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)); - width: 100%; - & > .pi-close-button { - margin-left: calc(100% - 0.9rem - var(--pi-spacing-large)); - } - - & > *:nth-child(2) { - height: calc( - 100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - - var(--pi-height-header-aside) - var(--pi-height-footer-aside) - ); - } - } - // Aside is open - &.aside-is-open { - overflow: hidden; - .pi-saas-aside { - transform: translateX(0); - transition-duration: 0.4s; - } - - & > section, - & > .pi-saas-navbar { - position: fixed; - transform: translateX(calc(-100vw)); - transition-duration: 0.4s; - } - } - // Aside is closed - &.aside-is-closed { - overflow: unset; - .pi-saas-aside { - transition-duration: 0.4s; - } - & > section, - & > .pi-saas-navbar { - transform: translateX(calc(0)); - transition-duration: 0.5s; - } - } - - .pi-dynamic-menu { - & > *:nth-child(3) { - height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom)); - margin: 0 auto var(--pi-spacing-xxx-large); - } - & > *:nth-child(n + 2) { - padding: 0 var(--pi-spacing-x-large); - } - } - } - // Aside is closable - &.aside-is-closable { - .pi-dynamic-menu { - & > *:nth-child(1) { - padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large) - var(--pi-spacing-xxxx-large); - } - } - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .pi-shell__deale-saas { - & > div { - // Not fullscreen - &:not(.is-fullscreen) { - .pi-saas-aside { - top: var(--pi-spacing-x-large); - height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - width: var(--pi-width-aside); - border-radius: var(--pi-border-radius-large); - box-shadow: var(--pi-box-shadow-panel-double); - & > *:nth-child(2) { - flex-grow: 1; - height: 100%; - } - - & > .pi-close-button { - margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large)); - } - } - // Aside is open - &.aside-is-open { - .pi-saas-aside { - transform: translateX( - calc(100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)) - ); - } - } - // Aside is closed - &.aside-is-closed { - .pi-saas-aside { - opacity: 0; - transition-duration: 0.6s; - } - } - .pi-dynamic-menu { - & > *:nth-child(2) { - padding: var(--pi-spacing-x-large); - } - & > *:nth-child(3) { - height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom)); - margin: 0 auto; - padding: var(--pi-spacing-x-large) 0 0; - } - } - - // Back link is hidden - &.backlink-is-hidden { - .pi-dynamic-menu { - & > *:nth-child(1) { - padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large); - } - } - .pi-saas-aside { - & > .pi-icon { - display: none; - } - } - } - } - // Aside is closable - &.aside-is-closable { - .pi-dynamic-menu { - & > *:nth-child(1) { - padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large) - var(--pi-spacing-x-large); - } - } - } - } - } - } - } -} +@mixin asideActionWrapper() { + gap: var(--pi-spacing-medium); + & > *:nth-child(n + 1) { + display: flex; + justify-content: center; + align-items: center; + min-width: 50%; + width: -webkit-fill-available; + } + + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__icon--single + ):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) { + min-width: unset; + padding-left: unset; + padding-right: unset; + } + } + .pi-button__w100 { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__icon--single + ):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) { + min-width: 100%; + } + } + } +} +.pi-shell__deale-saas { + & > div { + .pi-saas-aside { + display: block; + position: fixed; + z-index: 99; + padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0 + calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)); + overflow: hidden; + transition: var(--pi-animation); + & > .pi-close-button { + position: absolute; + margin-top: -1rem; + } + & > .pi-icon { + position: absolute; + height: var(--pi-spacing-xxx-large); + width: var(--pi-spacing-xxx-large); + margin-left: var(--pi-spacing-x-small); + margin-top: -0.475rem; + transition: var(--pi-animation); + } + &.pi-saas-aside__white { + background-color: var(--pi-color-white); + border: 1px solid var(--pi-color-white-900); + .pi-buyer-companies-list-filters { + .pi-accordion + .pi-wrapper { + padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large); + } + } + } + .pi-accordion-item-content__header { + & > .pi-text-viewer { + &.pi-text-viewer__font-size--m-xs { + label { + font: { + size: var(--pi-font-size-small); + } + } + } + } + } + } + + // Aside is open + &.aside-is-open { + .pi-saas-aside { + opacity: 1; + } + } + + // Aside is closed + &.aside-is-closed { + .pi-saas-aside { + transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))); + } + } + // Aside is closable + &.aside-is-closable { + .pi-dynamic-menu { + & > *:nth-child(2) { + padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0; + + .pi-wrapper__action { + flex-direction: column; + @include asideActionWrapper; + } + } + + & > *:nth-child(3) { + @include asideActionWrapper; + } + } + } + + // Dynamic menu + .pi-dynamic-menu { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + overflow-y: scroll; + + .pi-panel { + width: 100%; + } + + & > *:nth-child(1) { + flex-shrink: 0; + height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top)); + .pi-headline { + max-width: 50%; + margin: auto; + } + } + & > *:nth-child(2) { + &.pi-wrapper__flex { + overflow-y: auto; + height: 100%; + // Generic Scroll + &::-webkit-scrollbar { + width: 0.1875rem; + } + + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + border-radius: var(--pi-border-radius-small); + + &:hover { + transition: var(--pi-animation); + } + } + } + + & > .pi-list-item { + border-radius: var(--pi-border-radius-medium); + padding: var(--pi-spacing-medium); + } + } + & > *:nth-child(3) { + flex-shrink: 0; + width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + margin: 0 auto; + .pi-icon-button { + margin-bottom: var(--pi-spacing-x-large); + width: -webkit-fill-available; + } + } + &.pi-saas-admin-user-profile { + .pi-icon__x-large { + &.is-stroked { + &.pi-icon__appearance--fill { + height: 7rem; + width: 7rem; + border-radius: 50%; + .mat-icon { + height: 4rem; + width: 4rem; + } + } + } + } + } + } + } + + // Aside is NOT closable + &:not(.aside-is-closable) { + .pi-dynamic-menu { + & > *:nth-child(1) { + padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large) + calc(var(--pi-spacing-x-large) + var(--pi-spacing-large)); + } + } + } +} + +html { + // Mobile + &.is-mobile { + .pi-shell__deale-saas { + & > div { + .pi-saas-aside { + & > .pi-close-button { + margin-left: calc(100% - 0.9rem - var(--pi-spacing-large)); + } + } + // Aside is open + &.aside-is-open { + .pi-saas-aside { + transform: translateX(var(--pi-spacing-x-large)); + } + } + } + } + } + + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-shell__deale-saas { + & > div { + // Not fullscreen + &:not(.is-fullscreen) { + .pi-saas-aside { + top: 0; + height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)); + width: 100%; + & > .pi-close-button { + margin-left: calc(100% - 0.9rem - var(--pi-spacing-large)); + } + + & > *:nth-child(2) { + height: calc( + 100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - + var(--pi-height-header-aside) - var(--pi-height-footer-aside) + ); + } + } + // Aside is open + &.aside-is-open { + overflow: hidden; + .pi-saas-aside { + transform: translateX(0); + transition-duration: 0.4s; + } + + & > section, + & > .pi-saas-navbar { + position: fixed; + transform: translateX(calc(-100vw)); + transition-duration: 0.4s; + } + } + // Aside is closed + &.aside-is-closed { + overflow: unset; + .pi-saas-aside { + transition-duration: 0.4s; + } + & > section, + & > .pi-saas-navbar { + transform: translateX(calc(0)); + transition-duration: 0.5s; + } + } + + .pi-dynamic-menu { + & > *:nth-child(3) { + height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom)); + margin: 0 auto var(--pi-spacing-xxx-large); + } + & > *:nth-child(n + 2) { + padding: 0 var(--pi-spacing-x-large); + } + } + } + // Aside is closable + &.aside-is-closable { + .pi-dynamic-menu { + & > *:nth-child(1) { + padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-large); + } + } + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .pi-shell__deale-saas { + & > div { + // Not fullscreen + &:not(.is-fullscreen) { + .pi-saas-aside { + top: var(--pi-spacing-x-large); + height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + width: var(--pi-width-aside); + border-radius: var(--pi-border-radius-large); + box-shadow: var(--pi-box-shadow-panel-double); + & > *:nth-child(2) { + flex-grow: 1; + height: 100%; + } + + & > .pi-close-button { + margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large)); + } + } + // Aside is open + &.aside-is-open { + .pi-saas-aside { + transform: translateX( + calc(100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)) + ); + } + } + // Aside is closed + &.aside-is-closed { + .pi-saas-aside { + opacity: 0; + transition-duration: 0.6s; + } + } + .pi-dynamic-menu { + & > *:nth-child(2) { + padding: var(--pi-spacing-x-large); + } + & > *:nth-child(3) { + height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom)); + margin: 0 auto; + padding: var(--pi-spacing-x-large) 0 0; + } + } + + // Back link is hidden + &.backlink-is-hidden { + .pi-dynamic-menu { + & > *:nth-child(1) { + padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large); + } + } + .pi-saas-aside { + & > .pi-icon { + display: none; + } + } + } + } + // Aside is closable + &.aside-is-closable { + .pi-dynamic-menu { + & > *:nth-child(1) { + padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large) + var(--pi-spacing-x-large); + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss index 5afe878..e325424 100644 --- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss +++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss @@ -1,369 +1,369 @@ -.pi-shell__deale-saas { - & > div { - .pi-saas-header { - // Private - display: flex; - border-radius: var(--pi-border-radius-large); - - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - display: flex; - flex-direction: column; - justify-content: center; - gap: var(--pi-spacing-xxxx-small); - } - // Right - &.pi-saas-header-content__right { - display: flex; - justify-content: flex-end; - align-items: center; - - & > *:nth-child(n + 1) { - display: flex; - align-items: center; - transition: var(--pi-animation); - &:hover { - cursor: pointer; - } - } - - .pi-icon-button { - &.is-active { - position: absolute; - transform: scale(0); - opacity: 0; - } - } - .pi-icon { - // Common - &:not(.is-stroked) { - &:hover { - img, - .mat-icon { - transition-duration: 0.15s; - transform: scale(1.15); - } - } - &:not(:hover):not(.is-active) { - img, - .mat-icon { - transition-duration: 0.15s; - transform: scale(1); - } - } - } - // Type stroke - &.is-stroked { - &:hover { - transition-duration: 0.15s; - transform: scale(1.1); - } - &:not(:hover):not(.is-active) { - transition-duration: 0.15s; - transform: scale(1); - } - } - // Active - &.is-active { - position: absolute; - transform: scale(0); - opacity: 0; - } - } - } - } - } - // Aside is open - &.aside-is-open { - .pi-saas-header-content { - // Right - &.pi-saas-header-content__right { - .pi-icon { - &.is-active { - background-color: var(--pi-color-primary-50); - border-radius: 50%; - } - } - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - .pi-saas-header { - left: var(--pi-spacing-medium); - width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)); - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - h2 { - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - // Right - &.pi-saas-header-content__right { - gap: var(--pi-spacing-medium); - } - } - } - } - - // Mobile & Tablet - &:not(.is-desktop) { - // Small Devices - @media screen and (max-width: 62rem) { - .pi-saas-header { - position: fixed; - - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - & > span { - display: flex; - gap: var(--pi-spacing-xx-small); - & > h1 { - font: { - size: var(--pi-font-size-medium); - } - } - } - } - // Mobile - @media screen and (max-width: 40rem) { - height: var(--pi-height-header-mobile); - - // Right - &.pi-saas-header-content__right { - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( - .pi-button__toggle - ):not(.pi-button__icon--single):not(.pi-button__xx-small):not( - .pi-button__trimmed - ):not(.pi-button__toggle) { - min-width: unset; - padding-left: var(--pi-spacing-medium); - padding-right: var(--pi-spacing-medium); - } - } - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) { - min-width: var(--pi-spacing-xx-large); - } - &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium { - padding: var(--pi-spacing-xxxx-small) unset; - } - &:not(.pi-close-button):not(.pi-hamburger).pi-button__appearance--outline { - background-color: var(--pi-color-accent-75); - transition: all 0.16s ease-in; - border: unset; - } - &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__x-large) { - border-radius: var(--pi-border-radius-medium); - -webkit-border-radius: var(--pi-border-radius-medium); - -moz-border-radius: var(--pi-border-radius-medium); - } - } - } - } - // Tablet S - @media screen and (min-width: 40rem) { - height: var(--pi-height-header-tablet); - // Right - &.pi-saas-header-content__right { - button { - &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small); - } - } - } - } - // Left - &.pi-saas-header-content__left { - width: 60%; - & > span { - & > h1 { - font: { - size: var(--pi-font-size-medium); - } - } - } - } - - // Right - &.pi-saas-header-content__right { - width: 40%; - display: flex; - align-items: center; - - .pi-avatar { - padding: var(--pi-spacing-xxx-small); - - &:hover, - &.is-active { - transform: scale(1.05); - } - } - } - } - } - } - } - - // Tablet - &.is-tablet { - .pi-avatar { - picture { - width: 3rem; - height: 3rem; - } - } - &.is-tablet__small { - .pi-saas-header { - left: var(--pi-spacing-x-large); - width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - } - } - // Tablet L - &.is-tablet__large { - .pi-saas-header { - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - height: var(--pi-height-header-tablet); - padding-top: var(--pi-spacing-large); - } - // Right - &.pi-saas-header-content__right { - height: var(--pi-height-header-tablet); - padding-top: var(--pi-spacing-xx-small); - } - } - } - } - } - - // Tablet L & Desktop - &:not(.is-mobile) { - .pi-saas-header { - .pi-saas-header-content { - // Right - &.pi-saas-header-content__right { - gap: var(--pi-spacing-medium); - - .pi-icon-button, - .pi-icon:nth-of-type(1) { - &.is-active { - position: absolute; - transform: scale(0); - opacity: 0; - } - &:not(.is-active) { - &::after { - content: '|'; - color: var(--pi-color-primary-200); - margin-left: var(--pi-spacing-medium); - font: { - size: var(--pi-font-size-small); - } - } - } - } - } - } - } - - // Large Devices - @media screen and (min-width: 62rem) { - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - & span { - & > h1 { - font: { - size: var(--pi-font-size-large); - } - } - } - } - // Right - &.pi-saas-header-content__right { - button { - &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium { - &.pi-button__appearance--ghost { - padding: var(--pi-spacing-xxxx-small) 0; - } - &:not(.pi-button__appearance--ghost) { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large); - } - } - } - } - } - } - @media screen and (min-width: 62rem) { - .pi-shell__deale-saas { - & > div { - .pi-saas-header { - transition: var(--pi-animation); - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - width: 45%; - } - // Right - &.pi-saas-header-content__right { - justify-content: flex-end; - width: 55%; - .pi-avatar { - padding: 0.375rem; - - &:hover, - &.is-active { - transform: scale(1.075); - } - } - } - } - } - // Aside is open - &.aside-is-open { - .pi-saas-header { - width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large)); - } - } - // Aside is closed - &.aside-is-closed { - .pi-saas-header { - width: 100%; - } - } - } - } - } - } - // Desktop - &.is-desktop { - .pi-saas-header { - .pi-saas-header-content { - // Left - &.pi-saas-header-content__left { - height: var(--pi-height-header); - padding-top: var(--pi-spacing-small); - } - // Right - &.pi-saas-header-content__right { - height: var(--pi-height-header); - padding-top: var(--pi-spacing-medium); - } - } - } - } -} +.pi-shell__deale-saas { + & > div { + .pi-saas-header { + // Private + display: flex; + border-radius: var(--pi-border-radius-large); + + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + display: flex; + flex-direction: column; + justify-content: center; + gap: var(--pi-spacing-xxxx-small); + } + // Right + &.pi-saas-header-content__right { + display: flex; + justify-content: flex-end; + align-items: center; + + & > *:nth-child(n + 1) { + display: flex; + align-items: center; + transition: var(--pi-animation); + &:hover { + cursor: pointer; + } + } + + .pi-icon-button { + &.is-active { + position: absolute; + transform: scale(0); + opacity: 0; + } + } + .pi-icon { + // Common + &:not(.is-stroked) { + &:hover { + img, + .mat-icon { + transition-duration: 0.15s; + transform: scale(1.15); + } + } + &:not(:hover):not(.is-active) { + img, + .mat-icon { + transition-duration: 0.15s; + transform: scale(1); + } + } + } + // Type stroke + &.is-stroked { + &:hover { + transition-duration: 0.15s; + transform: scale(1.1); + } + &:not(:hover):not(.is-active) { + transition-duration: 0.15s; + transform: scale(1); + } + } + // Active + &.is-active { + position: absolute; + transform: scale(0); + opacity: 0; + } + } + } + } + } + // Aside is open + &.aside-is-open { + .pi-saas-header-content { + // Right + &.pi-saas-header-content__right { + .pi-icon { + &.is-active { + background-color: var(--pi-color-primary-50); + border-radius: 50%; + } + } + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + .pi-saas-header { + left: var(--pi-spacing-medium); + width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)); + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + h2 { + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + // Right + &.pi-saas-header-content__right { + gap: var(--pi-spacing-medium); + } + } + } + } + + // Mobile & Tablet + &:not(.is-desktop) { + // Small Devices + @media screen and (max-width: 62rem) { + .pi-saas-header { + position: fixed; + + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + & > span { + display: flex; + gap: var(--pi-spacing-xx-small); + & > h1 { + font: { + size: var(--pi-font-size-medium); + } + } + } + } + // Mobile + @media screen and (max-width: 40rem) { + height: var(--pi-height-header-mobile); + + // Right + &.pi-saas-header-content__right { + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not( + .pi-button__toggle + ):not(.pi-button__icon--single):not(.pi-button__xx-small):not( + .pi-button__trimmed + ):not(.pi-button__toggle) { + min-width: unset; + padding-left: var(--pi-spacing-medium); + padding-right: var(--pi-spacing-medium); + } + } + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) { + min-width: var(--pi-spacing-xx-large); + } + &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium { + padding: var(--pi-spacing-xxxx-small) unset; + } + &:not(.pi-close-button):not(.pi-hamburger).pi-button__appearance--outline { + background-color: var(--pi-color-accent-75); + transition: all 0.16s ease-in; + border: unset; + } + &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__x-large) { + border-radius: var(--pi-border-radius-medium); + -webkit-border-radius: var(--pi-border-radius-medium); + -moz-border-radius: var(--pi-border-radius-medium); + } + } + } + } + // Tablet S + @media screen and (min-width: 40rem) { + height: var(--pi-height-header-tablet); + // Right + &.pi-saas-header-content__right { + button { + &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small); + } + } + } + } + // Left + &.pi-saas-header-content__left { + width: 60%; + & > span { + & > h1 { + font: { + size: var(--pi-font-size-medium); + } + } + } + } + + // Right + &.pi-saas-header-content__right { + width: 40%; + display: flex; + align-items: center; + + .pi-avatar { + padding: var(--pi-spacing-xxx-small); + + &:hover, + &.is-active { + transform: scale(1.05); + } + } + } + } + } + } + } + + // Tablet + &.is-tablet { + .pi-avatar { + picture { + width: 3rem; + height: 3rem; + } + } + &.is-tablet__small { + .pi-saas-header { + left: var(--pi-spacing-x-large); + width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + } + } + // Tablet L + &.is-tablet__large { + .pi-saas-header { + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + height: var(--pi-height-header-tablet); + padding-top: var(--pi-spacing-large); + } + // Right + &.pi-saas-header-content__right { + height: var(--pi-height-header-tablet); + padding-top: var(--pi-spacing-xx-small); + } + } + } + } + } + + // Tablet L & Desktop + &:not(.is-mobile) { + .pi-saas-header { + .pi-saas-header-content { + // Right + &.pi-saas-header-content__right { + gap: var(--pi-spacing-medium); + + .pi-icon-button, + .pi-icon:nth-of-type(1) { + &.is-active { + position: absolute; + transform: scale(0); + opacity: 0; + } + &:not(.is-active) { + &::after { + content: '|'; + color: var(--pi-color-primary-200); + margin-left: var(--pi-spacing-medium); + font: { + size: var(--pi-font-size-small); + } + } + } + } + } + } + } + + // Large Devices + @media screen and (min-width: 62rem) { + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + & span { + & > h1 { + font: { + size: var(--pi-font-size-large); + } + } + } + } + // Right + &.pi-saas-header-content__right { + button { + &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium { + &.pi-button__appearance--ghost { + padding: var(--pi-spacing-xxxx-small) 0; + } + &:not(.pi-button__appearance--ghost) { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large); + } + } + } + } + } + } + @media screen and (min-width: 62rem) { + .pi-shell__deale-saas { + & > div { + .pi-saas-header { + transition: var(--pi-animation); + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + width: 45%; + } + // Right + &.pi-saas-header-content__right { + justify-content: flex-end; + width: 55%; + .pi-avatar { + padding: 0.375rem; + + &:hover, + &.is-active { + transform: scale(1.075); + } + } + } + } + } + // Aside is open + &.aside-is-open { + .pi-saas-header { + width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large)); + } + } + // Aside is closed + &.aside-is-closed { + .pi-saas-header { + width: 100%; + } + } + } + } + } + } + // Desktop + &.is-desktop { + .pi-saas-header { + .pi-saas-header-content { + // Left + &.pi-saas-header-content__left { + height: var(--pi-height-header); + padding-top: var(--pi-spacing-small); + } + // Right + &.pi-saas-header-content__right { + height: var(--pi-height-header); + padding-top: var(--pi-spacing-medium); + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss index 0d00cd4..93ef2f7 100644 --- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss +++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss @@ -1,155 +1,155 @@ -.pi-shell__deale-saas { - & > div { - width: 100%; - - // NOT Is fullscreen - &:not(.is-fullscreen) { - & > section { - position: fixed; - } - } - // Is fullscreen - &.is-fullscreen { - & > section { - left: 0; - width: 100%; - } - .pi-saas-header, - .pi-saas-navbar { - display: none; - } - } - } -} - -html { - // Mobile & Tablet S - &:not(.is-desktop) { - // Tablet L - @media screen and (max-width: 62rem) { - .pi-shell__deale-saas { - & > div { - & > section { - width: 100%; - padding: 0; - } - // Footer logo - & > .pi-headline { - display: none; - } - } - } - } - } - - // Tablet - &.is-tablet { - // Tablet L - @media screen and (min-width: 62rem) { - .pi-shell__deale-saas { - & > div { - & > section { - height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - } - // Not is fullscreen - &:not(.is-fullscreen) { - & > section { - left: calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) - ); - width: calc( - 100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small) - ); - } - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Tablet L & Desktop - @media screen and (min-width: 62rem) { - .pi-shell__deale-saas { - & > div { - height: 100vh; - width: 100%; - overflow-x: hidden; - overflow-y: auto; - // Not is fullscreen - &:not(.is-fullscreen) { - // Layout container - & > section { - top: var(--pi-spacing-x-large); - & > *:nth-child(1) { - padding-right: var(--pi-spacing-x-large); - } - } - } - - // Aside is open - &.aside-is-open { - & > .pi-headline { - transform: var(--pi-animation); - transform: translateX(0); - } - } - // Aside is closed - &.aside-is-closed { - & > .pi-headline { - transform: var(--pi-animation); - transform: translateX(calc(var(--pi-width-aside) + var(--pi-spacing-x-large))); - } - } - } - } - } - } - // Desktop - &.is-desktop { - .pi-shell__deale-saas { - & > div { - // Not is fullscreen - &:not(.is-fullscreen) { - // Layout container - & > section { - height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - transition: var(--pi-animation); - & > *:nth-child(1) { - padding-right: var(--pi-spacing-x-large); - } - } - // Navbar is expanded - &.navbar-is-expanded { - & > section { - left: calc( - var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) + - var(--pi-spacing-x-large) - ); - - width: calc( - 100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) - - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small) - ); - } - } - // Navbar is collapsed - &.navbar-is-collapsed { - & > section { - left: calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) + - var(--pi-spacing-x-large) - ); - width: calc( - 100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small) - ); - } - } - } - } - } - } -} +.pi-shell__deale-saas { + & > div { + width: 100%; + + // NOT Is fullscreen + &:not(.is-fullscreen) { + & > section { + position: fixed; + } + } + // Is fullscreen + &.is-fullscreen { + & > section { + left: 0; + width: 100%; + } + .pi-saas-header, + .pi-saas-navbar { + display: none; + } + } + } +} + +html { + // Mobile & Tablet S + &:not(.is-desktop) { + // Tablet L + @media screen and (max-width: 62rem) { + .pi-shell__deale-saas { + & > div { + & > section { + width: 100%; + padding: 0; + } + // Footer logo + & > .pi-headline { + display: none; + } + } + } + } + } + + // Tablet + &.is-tablet { + // Tablet L + @media screen and (min-width: 62rem) { + .pi-shell__deale-saas { + & > div { + & > section { + height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + } + // Not is fullscreen + &:not(.is-fullscreen) { + & > section { + left: calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + ); + width: calc( + 100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - + var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small) + ); + } + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Tablet L & Desktop + @media screen and (min-width: 62rem) { + .pi-shell__deale-saas { + & > div { + height: 100vh; + width: 100%; + overflow-x: hidden; + overflow-y: auto; + // Not is fullscreen + &:not(.is-fullscreen) { + // Layout container + & > section { + top: var(--pi-spacing-x-large); + & > *:nth-child(1) { + padding-right: var(--pi-spacing-x-large); + } + } + } + + // Aside is open + &.aside-is-open { + & > .pi-headline { + transform: var(--pi-animation); + transform: translateX(0); + } + } + // Aside is closed + &.aside-is-closed { + & > .pi-headline { + transform: var(--pi-animation); + transform: translateX(calc(var(--pi-width-aside) + var(--pi-spacing-x-large))); + } + } + } + } + } + } + // Desktop + &.is-desktop { + .pi-shell__deale-saas { + & > div { + // Not is fullscreen + &:not(.is-fullscreen) { + // Layout container + & > section { + height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + transition: var(--pi-animation); + & > *:nth-child(1) { + padding-right: var(--pi-spacing-x-large); + } + } + // Navbar is expanded + &.navbar-is-expanded { + & > section { + left: calc( + var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) + + var(--pi-spacing-x-large) + ); + + width: calc( + 100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) - + var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small) + ); + } + } + // Navbar is collapsed + &.navbar-is-collapsed { + & > section { + left: calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) + + var(--pi-spacing-x-large) + ); + width: calc( + 100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) - + var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small) + ); + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss index c5014bf..a532e96 100644 --- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss +++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss @@ -1,615 +1,615 @@ -@mixin parentMenuEntryAppearance($justify-content, $height) { - .pi-saas-navbar { - .pi-menu-event-item { - display: flex; - align-items: center; - justify-content: $justify-content; - gap: var(--pi-spacing-medium); - width: -webkit-fill-available; - height: $height; - } - } -} - -@mixin parentMenuItemExpanded($height: var(--pi-size-menu-item-expanded)) { - .pi-shell__deale-saas { - & > div { - &.navbar-is-expanded { - // Navbar - .pi-saas-navbar { - .pi-menu { - & > nav { - & > .pi-menu-event-item { - .pi-menu-entry { - &.pi-menu-entry__context--parent-menu { - height: var(--pi-size-menu-item-expanded); - width: calc(100% - var(--pi-spacing-large) - var(--pi-spacing-large)); - margin-left: var(--pi-spacing-large); - padding: 0 var(--pi-spacing-large); - border-radius: var(--pi-border-radius-medium); - transition: var(--pi-animation); - article { - transition: var(--pi-animation); - transform: scale(1); - transition-delay: 0.1s; - visibility: visible; - opacity: 1; - } - label { - line-height: 1.25; - } - } - } - } - } - } - } - } - } - } -} - -@mixin parentMenuItemCollapsed($size: var(--pi-spacing-xxxx-large), $radius: medium, $scale: 1) { - .pi-saas-navbar { - .pi-menu { - .pi-menu-entry { - &.pi-menu-entry__context--parent-menu { - justify-content: center; - height: $size; - width: $size; - border-radius: var(--pi-border-radius-#{$radius}); - transition: var(--pi-animation); - - article { - position: absolute; - transform: scale(0.5); - visibility: hidden; - opacity: 0; - } - } - // Not disabled hover and active effects - &:not(.is-disabled) { - &.pi-menu-entry__context--parent-menu { - &:hover { - &:not(.is-active) { - .mat-icon { - transform: scale(#{$scale}); - } - } - } - &.is-active { - background-color: var(--pi-color-primary-50); - color: var(--pi-color-primary-900); - .mat-icon { - transform: scale(#{$scale}); - } - } - } - } - } - } - } -} - -@mixin parentMenuEntryColor { - .pi-menu-event-item { - &.is-selected { - .pi-menu-entry { - &:not(.is-disabled) { - &:not([class*='pi-menu-entry__context--aside-menu']):not([class*='children']) { - background-color: var(--pi-color-primary-25); - color: var(--pi-color-primary); - .mat-icon { - color: var(--pi-color-primary); - } - } - } - } - } - &.is-disabled { - opacity: 0.3; - } - &:not(.is-disabled) { - .pi-menu-entry { - &.pi-menu-entry__context--parent-menu, - &.pi-menu-entry__context--children-submenu { - &.pi-text-viewer { - &.pi-text-viewer__icon-color--black { - &:not(.pi-menu-entry__context--children-menu):not( - .pi-menu-entry__context--aside-menu - ) { - &:not(.is-active) { - color: var(--pi-color-grey); - .mat-icon { - color: var(--pi-color-grey); - } - } - &:hover { - &:not(.is-active):not(.is-disabled) { - background-color: var(--pi-color-primary-50); - - span, - label, - .mat-icon { - color: var(--pi-color-primary); - } - } - } - &:not(.is-disabled) { - &.is-active { - max-width: -webkit-fill-available; - background-color: var(--pi-color-primary-50); - color: var(--pi-color-primary-900); - .mat-icon { - color: var(--pi-color-primary-900); - } - } - } - - &:hover { - &:not(.is-active):not(.is-disabled) { - background-color: var(--pi-color-primary-50); - label, - .mat-icon { - color: var(--pi-color-primary); - } - } - } - } - } - } - &.is-disabled { - opacity: 0.3; - } - } - } - } - } -} - -@mixin childrenMenuEntryAppearance { - .pi-menu-entry { - &.pi-menu-entry__context--children-menu { - max-width: -webkit-fill-available; - padding-left: var(--pi-spacing-xx-small); - font: { - size: var(--pi-font-size-x-small); - } - } - &.pi-menu-entry__context--children-submenu { - height: var(--pi-size-menu-item-expanded); - padding: var(--pi-spacing-medium); - border-radius: var(--pi-border-radius-medium); - transition: var(--pi-animation); - article { - transition: var(--pi-animation); - transform: scale(1); - transition-delay: 0.1s; - visibility: visible; - opacity: 1; - } - label { - line-height: 1.25; - } - } - } -} - -@mixin childrenMenuCollapsed { - position: fixed; - display: none; - visibility: hidden; - opacity: 0; - transition: var(--pi-animation-slow); -} - -@mixin childrenMenuPosition($left) { - // Menu item - transform: translate($left, var(--pi-spacing-xxx-large)); -} - -@mixin childrenMenuAppearance($width: -webkit-fill-available) { - .pi-saas-navbar { - .pi-menu__children { - position: absolute; - flex-direction: column; - gap: var(--pi-spacing-x-small); - width: $width; - padding-top: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-xxxx-small); - padding-bottom: var(--pi-spacing-x-large); - border-radius: var(--pi-border-radius-large); - background-color: var(--pi-color-white); - border: 0.5px solid var(--pi-color-grey-50); - box-shadow: var(--pi-box-shadow-double); - - // Submenu entries - & > *:nth-child(n + 1) { - & > *:nth-child(n + 1) { - &:not(.pi-menu-entry__context--children-menu) { - padding-left: var(--pi-spacing-x-large); - padding-right: var(--pi-spacing-x-large); - } - } - } - - .pi-menu-event-children { - &.pi-menu-children__entries { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-xxx-small); - - & > section { - max-height: 25vh; - - overflow-y: auto; - &::-webkit-scrollbar { - width: 0.1875rem; - } - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-grey-50); - - &:hover { - background-color: var(--pi-color-grey-75); - } - } - } - } - } - .pi-submenu-children__aside-entries { - margin-top: var(--pi-spacing-x-small); - } - .pi-menu-entry { - width: -webkit-fill-available; - display: flex; - align-items: center; - justify-content: space-between; - transition: var(--pi-animation); - &:hover { - cursor: pointer; - } - &.pi-menu-entry__context--aside-menu { - button { - width: -webkit-fill-available; - } - } - &.pi-menu-entry__context--children-menu { - padding-bottom: var(--pi-spacing-xxx-small); - border-bottom: 1px solid; - margin-left: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)); - margin-right: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)); - - &:nth-of-type(1) { - border-color: var(--pi-color-grey-100); - } - &:nth-of-type(2) { - border-color: var(--pi-color-primary-75); - } - &:nth-of-type(3) { - border-color: var(--pi-color-accent-75); - } - &:nth-of-type(n + 2) { - margin-top: var(--pi-spacing-x-large); - } - } - } - } - } -} - -@mixin childrenMenuVisibility { - & > .pi-menu-event-item { - &.has-children { - &.is-selected { - // Child menu visible - .pi-menu__children { - &.is-visible { - opacity: 1; - visibility: visible; - } - - &:not(.is-visible) { - display: none; - } - } - } - &:not(.is-selected) { - // Child menu hidden - .pi-menu__children { - &:not(.is-visible) { - display: none; - opacity: 0; - visibility: hidden; - } - } - } - } - } -} - -@mixin smallDeviceChildrenMenuPosition { - .pi-saas-navbar { - .pi-menu { - &.pi-menu__children { - left: 0; - bottom: calc( - env(safe-area-inset-bottom) + var(--pi-spacing-medium) + var(--pi-height-footer) - ); - z-index: 99; - } - & > nav { - @include childrenMenuVisibility; - } - } - } -} - -@mixin largeDeviceChildrenMenuPosition { - .pi-shell__deale-saas { - & > div { - .pi-saas-navbar { - .pi-menu { - &.pi-menu__parent { - width: -webkit-fill-available; - } - & > nav { - display: flex; - flex-direction: column; - - // Hide - show child menu - @include childrenMenuVisibility; - } - } - } - } - } -} - -// Menu in navbar -.pi-saas-navbar { - @include parentMenuEntryColor; - @include childrenMenuAppearance; - @include childrenMenuEntryAppearance; -} - -html { - &.is-mobile { - @include smallDeviceChildrenMenuPosition; - .pi-shell__deale-saas { - & > div { - @include parentMenuItemCollapsed; - } - } - } - - &.is-tablet { - &.is-tablet__small { - @include smallDeviceChildrenMenuPosition; - .pi-shell__deale-saas { - & > div { - @include parentMenuItemCollapsed(3.375rem, medium, 1.1); - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small Device - @media screen and (max-width: 62rem) { - @include childrenMenuAppearance; - .pi-shell__deale-saas { - & > div { - @include parentMenuEntryAppearance(center, 3.25rem); - .pi-saas-navbar { - .pi-menu-entry { - &.pi-menu-entry__context--parent-menu { - gap: 0; - transition: var(--pi-animation-slow); - - &:not(.is-active) { - .mat-icon { - color: var(--pi-color-black); - } - } - article { - display: none; - } - } - } - - .pi-menu { - & > nav { - display: flex; - justify-content: space-between; - align-items: center; - height: var(--pi-height-footer); - padding-left: var(--pi-spacing-xx-small); - padding-right: var(--pi-spacing-xx-small); - } - } - .pi-chevron-button { - display: none; - } - } - } - } - // Menu in layout - } - } - // Tablet - &.is-tablet { - &.is-tablet__large { - .pi-shell__deale-saas { - & > div { - @include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed)); - @include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2); - .pi-saas-navbar { - // Tablet L - .pi-menu { - & > nav { - gap: var(--pi-spacing-xxx-small); - & > .pi-menu-event-item { - .pi-menu-entry { - & > span { - @include childrenMenuCollapsed; - } - } - // Child menu - &.has-children { - .pi-menu__children { - @include childrenMenuPosition( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + - var(--pi-spacing-x-large) + var(--pi-spacing-xxx-small) - ) - ); - } - // Is selected and children is visible - &.is-selected { - &:not(.is-disabled) { - .pi-menu-entry { - &:not(.is-active) { - .mat-icon { - color: var(--pi-color-primary); - } - } - } - } - } - } - } - } - } - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Tablet L & Desktop - @media screen and (min-width: 62rem) { - @include childrenMenuAppearance(var(--pi-width-children-menu-expanded)); - @include largeDeviceChildrenMenuPosition; - // Menu in layout - .pi-layout { - .pi-menu { - &.pi-menu__parent { - & > nav { - width: calc( - var(--pi-width-navbar-expanded) - var(--pi-spacing-xxxx-large) - - var(--pi-spacing-xxxx-small) - ); - } - .pi-menu-event-item { - & > *:nth-child(1) { - width: 100%; - } - &.has-children { - padding-left: var(--pi-spacing-large); - padding-right: var(--pi-spacing-large); - .pi-menu__children { - transform: translate(-1.25rem, -1rem); - } - } - } - } - } - } - } - } - - // Desktop - &.is-desktop { - @include parentMenuItemExpanded; - .pi-shell__deale-saas { - & > div { - // Cursor styles - .pi-menu-event-item { - &:not(.is-active) { - &:hover { - .pi-menu-entry { - &:not(.is-disabled) { - cursor: pointer; - label { - &:hover { - &:not(.is-disabled) { - cursor: pointer; - } - } - } - } - } - } - } - - .pi-menu-entry { - &.pi-menu-entry__context--children-submenu { - &:hover { - &:not(.is-active):not(.is-disabled) { - cursor: pointer; - } - } - article, - span, - label { - &:hover { - cursor: pointer; - } - } - } - } - } - // Expanded - &.navbar-is-expanded { - @include parentMenuEntryAppearance(flex-start, var(--pi-size-menu-item-expanded)); - // Navbar - .pi-saas-navbar { - .pi-menu { - & > nav { - gap: var(--pi-spacing-x-small); - & > .pi-menu-event-item { - // Child menu - &.has-children { - .pi-menu__children { - @include childrenMenuPosition( - calc(var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large)) - ); - } - } - } - } - } - } - } - // Collapsed - &.navbar-is-collapsed { - @include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed)); - @include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2); - .pi-saas-navbar { - .pi-menu { - & > nav { - gap: var(--pi-spacing-xxx-small); - & > .pi-menu-event-item { - // Child menu - &.has-children { - .pi-menu__children { - @include childrenMenuPosition( - calc( - var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) + - var(--pi-spacing-xx-large) + var(--pi-spacing-large) + - var(--pi-spacing-x-large) - ) - ); - } - } - } - } - } - } - } - } - } - } -} +@mixin parentMenuEntryAppearance($justify-content, $height) { + .pi-saas-navbar { + .pi-menu-event-item { + display: flex; + align-items: center; + justify-content: $justify-content; + gap: var(--pi-spacing-medium); + width: -webkit-fill-available; + height: $height; + } + } +} + +@mixin parentMenuItemExpanded($height: var(--pi-size-menu-item-expanded)) { + .pi-shell__deale-saas { + & > div { + &.navbar-is-expanded { + // Navbar + .pi-saas-navbar { + .pi-menu { + & > nav { + & > .pi-menu-event-item { + .pi-menu-entry { + &.pi-menu-entry__context--parent-menu { + height: var(--pi-size-menu-item-expanded); + width: calc(100% - var(--pi-spacing-large) - var(--pi-spacing-large)); + margin-left: var(--pi-spacing-large); + padding: 0 var(--pi-spacing-large); + border-radius: var(--pi-border-radius-medium); + transition: var(--pi-animation); + article { + transition: var(--pi-animation); + transform: scale(1); + transition-delay: 0.1s; + visibility: visible; + opacity: 1; + } + label { + line-height: 1.25; + } + } + } + } + } + } + } + } + } + } +} + +@mixin parentMenuItemCollapsed($size: var(--pi-spacing-xxxx-large), $radius: medium, $scale: 1) { + .pi-saas-navbar { + .pi-menu { + .pi-menu-entry { + &.pi-menu-entry__context--parent-menu { + justify-content: center; + height: $size; + width: $size; + border-radius: var(--pi-border-radius-#{$radius}); + transition: var(--pi-animation); + + article { + position: absolute; + transform: scale(0.5); + visibility: hidden; + opacity: 0; + } + } + // Not disabled hover and active effects + &:not(.is-disabled) { + &.pi-menu-entry__context--parent-menu { + &:hover { + &:not(.is-active) { + .mat-icon { + transform: scale(#{$scale}); + } + } + } + &.is-active { + background-color: var(--pi-color-primary-50); + color: var(--pi-color-primary-900); + .mat-icon { + transform: scale(#{$scale}); + } + } + } + } + } + } + } +} + +@mixin parentMenuEntryColor { + .pi-menu-event-item { + &.is-selected { + .pi-menu-entry { + &:not(.is-disabled) { + &:not([class*='pi-menu-entry__context--aside-menu']):not([class*='children']) { + background-color: var(--pi-color-primary-25); + color: var(--pi-color-primary); + .mat-icon { + color: var(--pi-color-primary); + } + } + } + } + } + &.is-disabled { + opacity: 0.3; + } + &:not(.is-disabled) { + .pi-menu-entry { + &.pi-menu-entry__context--parent-menu, + &.pi-menu-entry__context--children-submenu { + &.pi-text-viewer { + &.pi-text-viewer__icon-color--black { + &:not(.pi-menu-entry__context--children-menu):not( + .pi-menu-entry__context--aside-menu + ) { + &:not(.is-active) { + color: var(--pi-color-grey); + .mat-icon { + color: var(--pi-color-grey); + } + } + &:hover { + &:not(.is-active):not(.is-disabled) { + background-color: var(--pi-color-primary-50); + + span, + label, + .mat-icon { + color: var(--pi-color-primary); + } + } + } + &:not(.is-disabled) { + &.is-active { + max-width: -webkit-fill-available; + background-color: var(--pi-color-primary-50); + color: var(--pi-color-primary-900); + .mat-icon { + color: var(--pi-color-primary-900); + } + } + } + + &:hover { + &:not(.is-active):not(.is-disabled) { + background-color: var(--pi-color-primary-50); + label, + .mat-icon { + color: var(--pi-color-primary); + } + } + } + } + } + } + &.is-disabled { + opacity: 0.3; + } + } + } + } + } +} + +@mixin childrenMenuEntryAppearance { + .pi-menu-entry { + &.pi-menu-entry__context--children-menu { + max-width: -webkit-fill-available; + padding-left: var(--pi-spacing-xx-small); + font: { + size: var(--pi-font-size-x-small); + } + } + &.pi-menu-entry__context--children-submenu { + height: var(--pi-size-menu-item-expanded); + padding: var(--pi-spacing-medium); + border-radius: var(--pi-border-radius-medium); + transition: var(--pi-animation); + article { + transition: var(--pi-animation); + transform: scale(1); + transition-delay: 0.1s; + visibility: visible; + opacity: 1; + } + label { + line-height: 1.25; + } + } + } +} + +@mixin childrenMenuCollapsed { + position: fixed; + display: none; + visibility: hidden; + opacity: 0; + transition: var(--pi-animation-slow); +} + +@mixin childrenMenuPosition($left) { + // Menu item + transform: translate($left, var(--pi-spacing-xxx-large)); +} + +@mixin childrenMenuAppearance($width: -webkit-fill-available) { + .pi-saas-navbar { + .pi-menu__children { + position: absolute; + flex-direction: column; + gap: var(--pi-spacing-x-small); + width: $width; + padding-top: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-xxxx-small); + padding-bottom: var(--pi-spacing-x-large); + border-radius: var(--pi-border-radius-large); + background-color: var(--pi-color-white); + border: 0.5px solid var(--pi-color-grey-50); + box-shadow: var(--pi-box-shadow-double); + + // Submenu entries + & > *:nth-child(n + 1) { + & > *:nth-child(n + 1) { + &:not(.pi-menu-entry__context--children-menu) { + padding-left: var(--pi-spacing-x-large); + padding-right: var(--pi-spacing-x-large); + } + } + } + + .pi-menu-event-children { + &.pi-menu-children__entries { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-xxx-small); + + & > section { + max-height: 25vh; + + overflow-y: auto; + &::-webkit-scrollbar { + width: 0.1875rem; + } + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-grey-50); + + &:hover { + background-color: var(--pi-color-grey-75); + } + } + } + } + } + .pi-submenu-children__aside-entries { + margin-top: var(--pi-spacing-x-small); + } + .pi-menu-entry { + width: -webkit-fill-available; + display: flex; + align-items: center; + justify-content: space-between; + transition: var(--pi-animation); + &:hover { + cursor: pointer; + } + &.pi-menu-entry__context--aside-menu { + button { + width: -webkit-fill-available; + } + } + &.pi-menu-entry__context--children-menu { + padding-bottom: var(--pi-spacing-xxx-small); + border-bottom: 1px solid; + margin-left: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)); + margin-right: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)); + + &:nth-of-type(1) { + border-color: var(--pi-color-grey-100); + } + &:nth-of-type(2) { + border-color: var(--pi-color-primary-75); + } + &:nth-of-type(3) { + border-color: var(--pi-color-accent-75); + } + &:nth-of-type(n + 2) { + margin-top: var(--pi-spacing-x-large); + } + } + } + } + } +} + +@mixin childrenMenuVisibility { + & > .pi-menu-event-item { + &.has-children { + &.is-selected { + // Child menu visible + .pi-menu__children { + &.is-visible { + opacity: 1; + visibility: visible; + } + + &:not(.is-visible) { + display: none; + } + } + } + &:not(.is-selected) { + // Child menu hidden + .pi-menu__children { + &:not(.is-visible) { + display: none; + opacity: 0; + visibility: hidden; + } + } + } + } + } +} + +@mixin smallDeviceChildrenMenuPosition { + .pi-saas-navbar { + .pi-menu { + &.pi-menu__children { + left: 0; + bottom: calc( + env(safe-area-inset-bottom) + var(--pi-spacing-medium) + var(--pi-height-footer) + ); + z-index: 99; + } + & > nav { + @include childrenMenuVisibility; + } + } + } +} + +@mixin largeDeviceChildrenMenuPosition { + .pi-shell__deale-saas { + & > div { + .pi-saas-navbar { + .pi-menu { + &.pi-menu__parent { + width: -webkit-fill-available; + } + & > nav { + display: flex; + flex-direction: column; + + // Hide - show child menu + @include childrenMenuVisibility; + } + } + } + } + } +} + +// Menu in navbar +.pi-saas-navbar { + @include parentMenuEntryColor; + @include childrenMenuAppearance; + @include childrenMenuEntryAppearance; +} + +html { + &.is-mobile { + @include smallDeviceChildrenMenuPosition; + .pi-shell__deale-saas { + & > div { + @include parentMenuItemCollapsed; + } + } + } + + &.is-tablet { + &.is-tablet__small { + @include smallDeviceChildrenMenuPosition; + .pi-shell__deale-saas { + & > div { + @include parentMenuItemCollapsed(3.375rem, medium, 1.1); + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small Device + @media screen and (max-width: 62rem) { + @include childrenMenuAppearance; + .pi-shell__deale-saas { + & > div { + @include parentMenuEntryAppearance(center, 3.25rem); + .pi-saas-navbar { + .pi-menu-entry { + &.pi-menu-entry__context--parent-menu { + gap: 0; + transition: var(--pi-animation-slow); + + &:not(.is-active) { + .mat-icon { + color: var(--pi-color-black); + } + } + article { + display: none; + } + } + } + + .pi-menu { + & > nav { + display: flex; + justify-content: space-between; + align-items: center; + height: var(--pi-height-footer); + padding-left: var(--pi-spacing-xx-small); + padding-right: var(--pi-spacing-xx-small); + } + } + .pi-chevron-button { + display: none; + } + } + } + } + // Menu in layout + } + } + // Tablet + &.is-tablet { + &.is-tablet__large { + .pi-shell__deale-saas { + & > div { + @include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed)); + @include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2); + .pi-saas-navbar { + // Tablet L + .pi-menu { + & > nav { + gap: var(--pi-spacing-xxx-small); + & > .pi-menu-event-item { + .pi-menu-entry { + & > span { + @include childrenMenuCollapsed; + } + } + // Child menu + &.has-children { + .pi-menu__children { + @include childrenMenuPosition( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + + var(--pi-spacing-x-large) + var(--pi-spacing-xxx-small) + ) + ); + } + // Is selected and children is visible + &.is-selected { + &:not(.is-disabled) { + .pi-menu-entry { + &:not(.is-active) { + .mat-icon { + color: var(--pi-color-primary); + } + } + } + } + } + } + } + } + } + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Tablet L & Desktop + @media screen and (min-width: 62rem) { + @include childrenMenuAppearance(var(--pi-width-children-menu-expanded)); + @include largeDeviceChildrenMenuPosition; + // Menu in layout + .pi-layout { + .pi-menu { + &.pi-menu__parent { + & > nav { + width: calc( + var(--pi-width-navbar-expanded) - var(--pi-spacing-xxxx-large) - + var(--pi-spacing-xxxx-small) + ); + } + .pi-menu-event-item { + & > *:nth-child(1) { + width: 100%; + } + &.has-children { + padding-left: var(--pi-spacing-large); + padding-right: var(--pi-spacing-large); + .pi-menu__children { + transform: translate(-1.25rem, -1rem); + } + } + } + } + } + } + } + } + + // Desktop + &.is-desktop { + @include parentMenuItemExpanded; + .pi-shell__deale-saas { + & > div { + // Cursor styles + .pi-menu-event-item { + &:not(.is-active) { + &:hover { + .pi-menu-entry { + &:not(.is-disabled) { + cursor: pointer; + label { + &:hover { + &:not(.is-disabled) { + cursor: pointer; + } + } + } + } + } + } + } + + .pi-menu-entry { + &.pi-menu-entry__context--children-submenu { + &:hover { + &:not(.is-active):not(.is-disabled) { + cursor: pointer; + } + } + article, + span, + label { + &:hover { + cursor: pointer; + } + } + } + } + } + // Expanded + &.navbar-is-expanded { + @include parentMenuEntryAppearance(flex-start, var(--pi-size-menu-item-expanded)); + // Navbar + .pi-saas-navbar { + .pi-menu { + & > nav { + gap: var(--pi-spacing-x-small); + & > .pi-menu-event-item { + // Child menu + &.has-children { + .pi-menu__children { + @include childrenMenuPosition( + calc(var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large)) + ); + } + } + } + } + } + } + } + // Collapsed + &.navbar-is-collapsed { + @include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed)); + @include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2); + .pi-saas-navbar { + .pi-menu { + & > nav { + gap: var(--pi-spacing-xxx-small); + & > .pi-menu-event-item { + // Child menu + &.has-children { + .pi-menu__children { + @include childrenMenuPosition( + calc( + var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) + + var(--pi-spacing-xx-large) + var(--pi-spacing-large) + + var(--pi-spacing-x-large) + ) + ); + } + } + } + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss index e41716f..7ace306 100644 --- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss +++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss @@ -1,280 +1,280 @@ -.pi-saas-navbar { - position: fixed; - z-index: 99; - background-color: var(--pi-color-white); - border: 1px solid var(--pi-color-white-900); - border-radius: var(--pi-border-radius-large); - .pi-headline { - margin: auto; - } - .pi-saas-navbar-content { - &.pi-saas-navbar-content__top { - .pi-headline { - width: calc(100% - var(--pi-spacing-x-large)); - padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large); - } - .pi-chevron-button { - width: var(--pi-spacing-x-large); - margin-bottom: 1.125rem; - padding: 0.1375rem; - } - } - } - .pi-chevron-button { - position: relative; - left: var(--pi-spacing-small); - border-radius: 50%; - box-shadow: var(--pi-box-shadow); - } -} - -@mixin multispaceNavbarGridLargeDevice { - .pi-saas-navbar-content { - &.pi-saas-navbar-content__center { - display: flex; - flex-direction: column; - align-items: center; - gap: var(--pi-spacing-xxx-small); - - .pi-divider { - width: -webkit-fill-available; - max-width: calc(100% - var(--pi-spacing-xxxx-large)); - } - } - } -} - -@mixin multispaceNavbarGridSmallDevice { - // Advisor Profile Multispace - .is-advisor { - .pi-saas-navbar-content { - &.pi-saas-navbar-content__center { - display: flex; - flex-direction: row-reverse; - align-items: center; - .pi-menu { - &.pi-menu__parent { - &:first-of-type { - width: 20%; - & > nav { - padding-left: unset; - .pi-menu-event-item { - &.has-children { - border-left: 1px solid var(--pi-color-grey-75); - } - } - } - } - &:last-of-type { - width: 80%; - & > nav { - padding-right: unset; - } - } - } - } - } - } - } -} - -html { - // Mobile & Tablet - &.is-mobile { - @include multispaceNavbarGridSmallDevice; - .pi-shell__deale-saas { - & > div { - .pi-saas-navbar { - left: var(--pi-spacing-medium); - bottom: var(--pi-spacing-medium); - width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)); - } - } - } - } - - &:not(.is-desktop) { - .pi-shell__deale-saas { - & > div { - .pi-saas-navbar { - // Mobile & Tablet S - @media screen and (max-width: 62rem) { - position: fixed; - height: var(--pi-height-footer); - box-shadow: var(--pi-box-shadow-panel); - .pi-saas-navbar-content { - &.pi-saas-navbar-content__top, - &.pi-saas-navbar-content__bottom { - display: none; - } - } - } - } - } - } - } - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include multispaceNavbarGridSmallDevice; - .pi-shell__deale-saas { - & > div { - .pi-saas-navbar { - left: var(--pi-spacing-x-large); - bottom: var(--pi-spacing-x-large); - width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - } - } - } - } - // Tablet L - &.is-tablet__large { - .pi-shell__deale-saas { - & > div { - .pi-saas-navbar { - width: var(--pi-width-navbar-collapsed); - box-shadow: var(--pi-box-shadow-panel); - .pi-headline { - height: 5.25rem; - max-width: 3.35rem; - padding: 1.6rem var(--pi-spacing-small); - } - .pi-chevron-button { - display: none; - } - .pi-saas-navbar-content { - &.pi-saas-navbar-content__top { - & > .pi-chip { - transform: scale(0.8); - img { - transform: scale(0.8); - } - } - } - - &.pi-saas-navbar-content__bottom { - padding: var(--pi-spacing-x-large) 0; - margin: 0 auto; - } - } - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Tablet L & Desktop - @media screen and (min-width: 62rem) { - @include multispaceNavbarGridLargeDevice; - .pi-shell__deale-saas { - & > div { - &:not(.is-fullscreen) { - .pi-saas-navbar { - top: var(--pi-spacing-x-large); - left: var(--pi-spacing-x-large); - display: flex; - flex-direction: column; - justify-content: space-between; - height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); - .pi-chip { - margin: auto; - } - } - } - } - } - } - - // Desktop - &.is-desktop { - .pi-shell__deale-saas { - & > div { - .pi-saas-navbar { - width: var(--pi-width-navbar-expanded); - box-shadow: var(--pi-box-shadow-panel); - transition: var(--pi-animation); - .pi-saas-navbar-content { - &.pi-saas-navbar-content__top { - & > header { - display: flex; - align-items: flex-end; - } - & > .pi-chip { - margin: auto; - transform: scale(0.9); - img { - transform: scale(0.9); - } - } - } - &.pi-saas-navbar-content__bottom { - padding: var(--pi-spacing-x-large) 0; - text-align: center; - } - } - - .pi-headline { - transition: var(--pi-animation); - } - } - // Expanded - &.navbar-is-expanded { - .pi-saas-navbar { - width: var(--pi-width-navbar-expanded); - - .pi-headline { - max-width: 8rem; - height: 5rem; - opacity: 0; - &.pi-logo { - transition: var(--pi-animation); - transition-duration: 0.35s; - transition-delay: 0.15s; - opacity: 1; - } - & > .pi-chip { - transform: scale(0.9); - } - } - .pi-saas-navbar-content { - &.pi-saas-navbar-content__center { - padding: var(--pi-spacing-x-large) 0; - } - } - } - } - // Collapsed - &.navbar-is-collapsed { - .pi-saas-navbar { - width: var(--pi-width-navbar-collapsed); - .pi-headline { - max-width: 3.35rem; - height: 5.25rem; - padding: 1.25rem 0 0 var(--pi-spacing-x-large); - opacity: 0; - transition: var(--pi-animation); - - &.pi-logo-simple { - transition: var(--pi-animation); - transition-duration: 0.35s; - transition-delay: 0.15s; - opacity: 1; - } - } - .pi-saas-navbar-content { - &.pi-saas-navbar-content__top { - & > .pi-chip { - transform: scale(0.8); - } - } - } - } - } - } - } - } - } -} +.pi-saas-navbar { + position: fixed; + z-index: 99; + background-color: var(--pi-color-white); + border: 1px solid var(--pi-color-white-900); + border-radius: var(--pi-border-radius-large); + .pi-headline { + margin: auto; + } + .pi-saas-navbar-content { + &.pi-saas-navbar-content__top { + .pi-headline { + width: calc(100% - var(--pi-spacing-x-large)); + padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large); + } + .pi-chevron-button { + width: var(--pi-spacing-x-large); + margin-bottom: 1.125rem; + padding: 0.1375rem; + } + } + } + .pi-chevron-button { + position: relative; + left: var(--pi-spacing-small); + border-radius: 50%; + box-shadow: var(--pi-box-shadow); + } +} + +@mixin multispaceNavbarGridLargeDevice { + .pi-saas-navbar-content { + &.pi-saas-navbar-content__center { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--pi-spacing-xxx-small); + + .pi-divider { + width: -webkit-fill-available; + max-width: calc(100% - var(--pi-spacing-xxxx-large)); + } + } + } +} + +@mixin multispaceNavbarGridSmallDevice { + // Advisor Profile Multispace + .is-advisor { + .pi-saas-navbar-content { + &.pi-saas-navbar-content__center { + display: flex; + flex-direction: row-reverse; + align-items: center; + .pi-menu { + &.pi-menu__parent { + &:first-of-type { + width: 20%; + & > nav { + padding-left: unset; + .pi-menu-event-item { + &.has-children { + border-left: 1px solid var(--pi-color-grey-75); + } + } + } + } + &:last-of-type { + width: 80%; + & > nav { + padding-right: unset; + } + } + } + } + } + } + } +} + +html { + // Mobile & Tablet + &.is-mobile { + @include multispaceNavbarGridSmallDevice; + .pi-shell__deale-saas { + & > div { + .pi-saas-navbar { + left: var(--pi-spacing-medium); + bottom: var(--pi-spacing-medium); + width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)); + } + } + } + } + + &:not(.is-desktop) { + .pi-shell__deale-saas { + & > div { + .pi-saas-navbar { + // Mobile & Tablet S + @media screen and (max-width: 62rem) { + position: fixed; + height: var(--pi-height-footer); + box-shadow: var(--pi-box-shadow-panel); + .pi-saas-navbar-content { + &.pi-saas-navbar-content__top, + &.pi-saas-navbar-content__bottom { + display: none; + } + } + } + } + } + } + } + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include multispaceNavbarGridSmallDevice; + .pi-shell__deale-saas { + & > div { + .pi-saas-navbar { + left: var(--pi-spacing-x-large); + bottom: var(--pi-spacing-x-large); + width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + } + } + } + } + // Tablet L + &.is-tablet__large { + .pi-shell__deale-saas { + & > div { + .pi-saas-navbar { + width: var(--pi-width-navbar-collapsed); + box-shadow: var(--pi-box-shadow-panel); + .pi-headline { + height: 5.25rem; + max-width: 3.35rem; + padding: 1.6rem var(--pi-spacing-small); + } + .pi-chevron-button { + display: none; + } + .pi-saas-navbar-content { + &.pi-saas-navbar-content__top { + & > .pi-chip { + transform: scale(0.8); + img { + transform: scale(0.8); + } + } + } + + &.pi-saas-navbar-content__bottom { + padding: var(--pi-spacing-x-large) 0; + margin: 0 auto; + } + } + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Tablet L & Desktop + @media screen and (min-width: 62rem) { + @include multispaceNavbarGridLargeDevice; + .pi-shell__deale-saas { + & > div { + &:not(.is-fullscreen) { + .pi-saas-navbar { + top: var(--pi-spacing-x-large); + left: var(--pi-spacing-x-large); + display: flex; + flex-direction: column; + justify-content: space-between; + height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)); + .pi-chip { + margin: auto; + } + } + } + } + } + } + + // Desktop + &.is-desktop { + .pi-shell__deale-saas { + & > div { + .pi-saas-navbar { + width: var(--pi-width-navbar-expanded); + box-shadow: var(--pi-box-shadow-panel); + transition: var(--pi-animation); + .pi-saas-navbar-content { + &.pi-saas-navbar-content__top { + & > header { + display: flex; + align-items: flex-end; + } + & > .pi-chip { + margin: auto; + transform: scale(0.9); + img { + transform: scale(0.9); + } + } + } + &.pi-saas-navbar-content__bottom { + padding: var(--pi-spacing-x-large) 0; + text-align: center; + } + } + + .pi-headline { + transition: var(--pi-animation); + } + } + // Expanded + &.navbar-is-expanded { + .pi-saas-navbar { + width: var(--pi-width-navbar-expanded); + + .pi-headline { + max-width: 8rem; + height: 5rem; + opacity: 0; + &.pi-logo { + transition: var(--pi-animation); + transition-duration: 0.35s; + transition-delay: 0.15s; + opacity: 1; + } + & > .pi-chip { + transform: scale(0.9); + } + } + .pi-saas-navbar-content { + &.pi-saas-navbar-content__center { + padding: var(--pi-spacing-x-large) 0; + } + } + } + } + // Collapsed + &.navbar-is-collapsed { + .pi-saas-navbar { + width: var(--pi-width-navbar-collapsed); + .pi-headline { + max-width: 3.35rem; + height: 5.25rem; + padding: 1.25rem 0 0 var(--pi-spacing-x-large); + opacity: 0; + transition: var(--pi-animation); + + &.pi-logo-simple { + transition: var(--pi-animation); + transition-duration: 0.35s; + transition-delay: 0.15s; + opacity: 1; + } + } + .pi-saas-navbar-content { + &.pi-saas-navbar-content__top { + & > .pi-chip { + transform: scale(0.8); + } + } + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/shell/index.scss b/libs/ui/src/lib/styles/deale-saas/shell/index.scss index dea116e..b934401 100644 --- a/libs/ui/src/lib/styles/deale-saas/shell/index.scss +++ b/libs/ui/src/lib/styles/deale-saas/shell/index.scss @@ -1,5 +1,5 @@ -@forward 'pi-aside'; -@forward 'pi-header'; -@forward 'pi-main'; -@forward 'pi-menu'; -@forward 'pi-navbar'; +@forward 'pi-aside'; +@forward 'pi-header'; +@forward 'pi-main'; +@forward 'pi-menu'; +@forward 'pi-navbar'; diff --git a/libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss b/libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss index e25c02b..e8305a8 100644 --- a/libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss +++ b/libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss @@ -1,293 +1,293 @@ -@mixin asideColor($color) { - .pi-shell__deale-saas { - & > div { - .pi-saas-aside { - // Aside theme - &.pi-saas-aside__theme { - // Not custom - &:not(.is-custom) { - background-color: var(--pi-color-#{$color}-50); - .pi-close-button { - &:hover { - &::before, - &::after { - background-color: var(--pi-color-#{$color}); - } - } - } - // Dynamic menu - .pi-dynamic-menu { - & > *:nth-child(2) { - &.pi-wrapper__flex { - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-#{$color}-100); - - &:hover { - background-color: var(--pi-color-#{$color}-200); - } - } - } - } - & > *:nth-child(3) { - border-top-width: 1px; - border-top-style: solid; - border-top-color: var(--pi-color-#{$color}-100); - } - .pi-list-item { - transition: var(--pi-animation); - &.is-clickable { - &:hover { - &.pi-color__primary { - &:not(.is-disabled):not(.is-active) { - background-color: var(--pi-color-#{$color}-75); - } - } - } - } - &.pi-color__primary { - &.is-active { - background-color: var(--pi-color-#{$color}-75); - } - } - .pi-chip { - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--outline { - border-width: 1px; - border-style: solid; - border-color: var(--pi-color-#{$color}); - color: var(--pi-color-#{$color}); - - label { - color: var(--pi-color-#{$color}); - } - } - } - } - } - } - // User profile - &.pi-saas-admin-user-profile { - .pi-chip { - // Profile - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--fill { - &:not(.pi-chip__single-icon) { - background-color: var(--pi-color-#{$color}); - border-width: 1px; - border-style: solid; - border-color: var(--pi-color-#{$color}); - } - } - } - } - // Subscription - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--outline { - border-width: 1px; - border-style: solid; - border-color: var(--pi-color-#{$color}); - color: var(--pi-color-#{$color}); - } - } - } - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--outline { - label { - color: var(--pi-color-#{$color}); - } - } - } - } - } - .pi-icon { - &.is-stroked { - &.pi-icon__appearance--fill { - &.pi-icon__x-large { - border-color: var(--pi-color-#{$color}-200); - background-color: var(--pi-color-#{$color}-75); - .mat-icon { - color: var(--pi-color-#{$color}); - } - } - } - } - } - } - } - } - // Custom - &.is-custom { - background-color: var(--pi-color-primary-50); - .pi-close-button { - &:hover { - &::before, - &::after { - background-color: var(--pi-color-primary); - } - } - } - // Dynamic menu - .pi-dynamic-menu { - & > *:nth-child(2) { - &.pi-wrapper__flex { - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-primary-100); - - &:hover { - background-color: var(--pi-color-primary-200); - } - } - } - } - & > *:nth-child(3) { - border-top-width: 1px; - border-top-style: solid; - border-top-color: var(--pi-color-primary-100); - } - .pi-list-item { - transition: var(--pi-animation); - &.is-clickable { - &:hover { - &.pi-color__primary { - &:not(.is-disabled):not(.is-active) { - background-color: var(--pi-color-primary-100); - } - } - } - } - &.pi-color__primary { - &.is-active { - background-color: var(--pi-color-primary-100); - } - } - .pi-chip { - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--outline { - border-width: 1px; - border-style: solid; - border-color: var(--pi-color-primary); - color: var(--pi-color-primary); - - label { - color: var(--pi-color-primary); - } - } - } - } - } - } - // User profile - &.pi-saas-admin-user-profile { - .pi-chip { - // Profile - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--fill { - &:not(.pi-chip__single-icon) { - background-color: var(--pi-color-primary); - border-width: 1px; - border-style: solid; - border-color: var(--pi-color-primary); - } - } - } - } - // Subscription - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--outline { - border-width: 1px; - border-style: solid; - border-color: var(--pi-color-primary); - color: var(--pi-color-primary); - } - } - } - &:not(.pi-status) { - &.pi-color__primary { - &.pi-chip__appearance--outline { - label { - color: var(--pi-color-primary); - } - } - } - } - } - .pi-icon { - &.is-stroked { - &.pi-icon__appearance--fill { - &.pi-icon__x-large { - border-color: var(--pi-color-primary-200); - background-color: var(--pi-color-primary-200-rgba); - .mat-icon { - color: var(--pi-color-primary); - } - } - } - } - } - } - } - } - } - // Aside white - &.pi-saas-aside__white { - // Dynamic menu - .pi-dynamic-menu { - & > *:nth-child(2) { - &.pi-wrapper__flex { - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-grey-25); - - &:hover { - background-color: var(--pi-color-grey-75); - } - } - } - } - & > *:nth-child(3) { - border-top-width: 1px; - border-top-style: solid; - border-top-color: var(--pi-color-white-900); - } - } - } - } - - &:not(.is-fullscreen) { - // Large device - @media screen and (min-width: 62rem) { - .pi-saas-aside { - &.pi-saas-aside__theme { - border-width: 1px; - border-style: solid; - &:not(.is-custom) { - border-color: var(--pi-color-#{$color}-100); - } - &.is-custom { - border-color: var(--pi-color-primary-100); - } - } - } - } - } - } - } -} - -.is-company { - @include asideColor(primary); -} - -.is-investor { - @include asideColor(accent); -} - -.is-advisor { - @include asideColor(highlighted); -} +@mixin asideColor($color) { + .pi-shell__deale-saas { + & > div { + .pi-saas-aside { + // Aside theme + &.pi-saas-aside__theme { + // Not custom + &:not(.is-custom) { + background-color: var(--pi-color-#{$color}-50); + .pi-close-button { + &:hover { + &::before, + &::after { + background-color: var(--pi-color-#{$color}); + } + } + } + // Dynamic menu + .pi-dynamic-menu { + & > *:nth-child(2) { + &.pi-wrapper__flex { + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-#{$color}-100); + + &:hover { + background-color: var(--pi-color-#{$color}-200); + } + } + } + } + & > *:nth-child(3) { + border-top-width: 1px; + border-top-style: solid; + border-top-color: var(--pi-color-#{$color}-100); + } + .pi-list-item { + transition: var(--pi-animation); + &.is-clickable { + &:hover { + &.pi-color__primary { + &:not(.is-disabled):not(.is-active) { + background-color: var(--pi-color-#{$color}-75); + } + } + } + } + &.pi-color__primary { + &.is-active { + background-color: var(--pi-color-#{$color}-75); + } + } + .pi-chip { + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--outline { + border-width: 1px; + border-style: solid; + border-color: var(--pi-color-#{$color}); + color: var(--pi-color-#{$color}); + + label { + color: var(--pi-color-#{$color}); + } + } + } + } + } + } + // User profile + &.pi-saas-admin-user-profile { + .pi-chip { + // Profile + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--fill { + &:not(.pi-chip__single-icon) { + background-color: var(--pi-color-#{$color}); + border-width: 1px; + border-style: solid; + border-color: var(--pi-color-#{$color}); + } + } + } + } + // Subscription + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--outline { + border-width: 1px; + border-style: solid; + border-color: var(--pi-color-#{$color}); + color: var(--pi-color-#{$color}); + } + } + } + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--outline { + label { + color: var(--pi-color-#{$color}); + } + } + } + } + } + .pi-icon { + &.is-stroked { + &.pi-icon__appearance--fill { + &.pi-icon__x-large { + border-color: var(--pi-color-#{$color}-200); + background-color: var(--pi-color-#{$color}-75); + .mat-icon { + color: var(--pi-color-#{$color}); + } + } + } + } + } + } + } + } + // Custom + &.is-custom { + background-color: var(--pi-color-primary-50); + .pi-close-button { + &:hover { + &::before, + &::after { + background-color: var(--pi-color-primary); + } + } + } + // Dynamic menu + .pi-dynamic-menu { + & > *:nth-child(2) { + &.pi-wrapper__flex { + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-primary-100); + + &:hover { + background-color: var(--pi-color-primary-200); + } + } + } + } + & > *:nth-child(3) { + border-top-width: 1px; + border-top-style: solid; + border-top-color: var(--pi-color-primary-100); + } + .pi-list-item { + transition: var(--pi-animation); + &.is-clickable { + &:hover { + &.pi-color__primary { + &:not(.is-disabled):not(.is-active) { + background-color: var(--pi-color-primary-100); + } + } + } + } + &.pi-color__primary { + &.is-active { + background-color: var(--pi-color-primary-100); + } + } + .pi-chip { + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--outline { + border-width: 1px; + border-style: solid; + border-color: var(--pi-color-primary); + color: var(--pi-color-primary); + + label { + color: var(--pi-color-primary); + } + } + } + } + } + } + // User profile + &.pi-saas-admin-user-profile { + .pi-chip { + // Profile + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--fill { + &:not(.pi-chip__single-icon) { + background-color: var(--pi-color-primary); + border-width: 1px; + border-style: solid; + border-color: var(--pi-color-primary); + } + } + } + } + // Subscription + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--outline { + border-width: 1px; + border-style: solid; + border-color: var(--pi-color-primary); + color: var(--pi-color-primary); + } + } + } + &:not(.pi-status) { + &.pi-color__primary { + &.pi-chip__appearance--outline { + label { + color: var(--pi-color-primary); + } + } + } + } + } + .pi-icon { + &.is-stroked { + &.pi-icon__appearance--fill { + &.pi-icon__x-large { + border-color: var(--pi-color-primary-200); + background-color: var(--pi-color-primary-200-rgba); + .mat-icon { + color: var(--pi-color-primary); + } + } + } + } + } + } + } + } + } + // Aside white + &.pi-saas-aside__white { + // Dynamic menu + .pi-dynamic-menu { + & > *:nth-child(2) { + &.pi-wrapper__flex { + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-grey-25); + + &:hover { + background-color: var(--pi-color-grey-75); + } + } + } + } + & > *:nth-child(3) { + border-top-width: 1px; + border-top-style: solid; + border-top-color: var(--pi-color-white-900); + } + } + } + } + + &:not(.is-fullscreen) { + // Large device + @media screen and (min-width: 62rem) { + .pi-saas-aside { + &.pi-saas-aside__theme { + border-width: 1px; + border-style: solid; + &:not(.is-custom) { + border-color: var(--pi-color-#{$color}-100); + } + &.is-custom { + border-color: var(--pi-color-primary-100); + } + } + } + } + } + } + } +} + +.is-company { + @include asideColor(primary); +} + +.is-investor { + @include asideColor(accent); +} + +.is-advisor { + @include asideColor(highlighted); +} diff --git a/libs/ui/src/lib/styles/deale-saas/theming/index.scss b/libs/ui/src/lib/styles/deale-saas/theming/index.scss index 80197b6..345d0b2 100644 --- a/libs/ui/src/lib/styles/deale-saas/theming/index.scss +++ b/libs/ui/src/lib/styles/deale-saas/theming/index.scss @@ -1 +1 @@ -@forward 'pi-user-type-theming'; +@forward 'pi-user-type-theming'; diff --git a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss index 55ea273..513bbbe 100644 --- a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss +++ b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss @@ -1,47 +1,47 @@ -.pi-wrapper { - // Header Wrapper - &.pi-wrapper__header { - // Center - &.pi-wrapper__align-items--center { - .pi-header-wrapper-content { - align-items: center; - } - } - } -} - -.pi-layout__07-list { - .pi-header-wrapper-content { - &.pi-header-wrapper-content__left { - width: 100%; - } - &.pi-header-wrapper-content__right { - justify-content: flex-end; - display: flex; - & > aside { - display: flex; - align-items: center; - justify-content: flex-end; - gap: var(--pi-spacing-xx-small); - - .pi-select { - &.pi-select__picked-option-type--button { - .pi-select-picked-option { - background-color: var(--pi-color-white); - } - &:not(:hover) { - .pi-select-picked-option { - box-shadow: var(--pi-box-shadow); - } - } - } - } - .pi-toggle-button { - & > button { - border-radius: var(--pi-border-radius-large); - } - } - } - } - } +.pi-wrapper { + // Header Wrapper + &.pi-wrapper__header { + // Center + &.pi-wrapper__align-items--center { + .pi-header-wrapper-content { + align-items: center; + } + } + } +} + +.pi-layout__07-list { + .pi-header-wrapper-content { + &.pi-header-wrapper-content__left { + width: 100%; + } + &.pi-header-wrapper-content__right { + justify-content: flex-end; + display: flex; + & > aside { + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--pi-spacing-xx-small); + + .pi-select { + &.pi-select__picked-option-type--button { + .pi-select-picked-option { + background-color: var(--pi-color-white); + } + &:not(:hover) { + .pi-select-picked-option { + box-shadow: var(--pi-box-shadow); + } + } + } + } + .pi-toggle-button { + & > button { + border-radius: var(--pi-border-radius-large); + } + } + } + } + } } \ No newline at end of file diff --git a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss index d5ba1ca..2a19264 100644 --- a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss +++ b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss @@ -1,42 +1,42 @@ -@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) { - .pi-shell__deale-saas { - .pi-wrapper { - // Max width - &.pi-wrapper__full-width, - &.pi-wrapper__full-width-centered { - max-width: $max-width; - } - } - } -} - -html { - // Mobile - &.is-mobile { - .pi-wrapper { - div { - // Fixed wrapper - &.is-fixed { - position: fixed; - z-index: 99; - left: 0; - bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom)); - display: flex; - justify-content: flex-end; - align-items: center; - width: 100%; - padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large); - right: 0; - button { - min-width: 50%; - box-shadow: var(--pi-box-shadow); - } - } - } - } - } - // Desktop - &.is-desktop { - @include dealeSaaSWrapperMaxWidth; - } -} +@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) { + .pi-shell__deale-saas { + .pi-wrapper { + // Max width + &.pi-wrapper__full-width, + &.pi-wrapper__full-width-centered { + max-width: $max-width; + } + } + } +} + +html { + // Mobile + &.is-mobile { + .pi-wrapper { + div { + // Fixed wrapper + &.is-fixed { + position: fixed; + z-index: 99; + left: 0; + bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom)); + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large); + right: 0; + button { + min-width: 50%; + box-shadow: var(--pi-box-shadow); + } + } + } + } + } + // Desktop + &.is-desktop { + @include dealeSaaSWrapperMaxWidth; + } +} diff --git a/libs/ui/src/lib/styles/deale-saas/wrappers/index.scss b/libs/ui/src/lib/styles/deale-saas/wrappers/index.scss index cf35872..c94fae1 100644 --- a/libs/ui/src/lib/styles/deale-saas/wrappers/index.scss +++ b/libs/ui/src/lib/styles/deale-saas/wrappers/index.scss @@ -1,2 +1,2 @@ -@forward 'pi-header-wrapper'; -@forward 'pi-wrapper'; +@forward 'pi-header-wrapper'; +@forward 'pi-wrapper'; diff --git a/libs/ui/src/lib/styles/deale-website/components/_pi-text.scss b/libs/ui/src/lib/styles/deale-website/components/_pi-text.scss index 31fed15..9d45418 100644 --- a/libs/ui/src/lib/styles/deale-website/components/_pi-text.scss +++ b/libs/ui/src/lib/styles/deale-website/components/_pi-text.scss @@ -1,39 +1,39 @@ -h1 { - line-height: 110%; -} - -html { - // Mobile - &.is-mobile { - .pi-website-text { - // xxxxl - 2.875rem - 46px - &.pi-website-text__size--xxxxl { - font: { - size: 2.875rem; - } - } - } - } - // Tablet - &.is-tablet { - .pi-website-text { - // xxxxl - 62px - &.pi-website-text__size--xxxxl { - font: { - size: 3.875rem; - } - } - } - } - // Desktop - &.is-desktop { - .pi-website-text { - // xxxxl - 4.5rem - 72px - &.pi-website-text__size--xxxxl { - font: { - size: var(--pi-public-font-size-xxx-large); - } - } - } - } -} +h1 { + line-height: 110%; +} + +html { + // Mobile + &.is-mobile { + .pi-website-text { + // xxxxl - 2.875rem - 46px + &.pi-website-text__size--xxxxl { + font: { + size: 2.875rem; + } + } + } + } + // Tablet + &.is-tablet { + .pi-website-text { + // xxxxl - 62px + &.pi-website-text__size--xxxxl { + font: { + size: 3.875rem; + } + } + } + } + // Desktop + &.is-desktop { + .pi-website-text { + // xxxxl - 4.5rem - 72px + &.pi-website-text__size--xxxxl { + font: { + size: var(--pi-public-font-size-xxx-large); + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/components/index.scss b/libs/ui/src/lib/styles/deale-website/components/index.scss index 6bbdfe2..1ebc589 100644 --- a/libs/ui/src/lib/styles/deale-website/components/index.scss +++ b/libs/ui/src/lib/styles/deale-website/components/index.scss @@ -1 +1 @@ -@forward 'pi-text'; +@forward 'pi-text'; diff --git a/libs/ui/src/lib/styles/deale-website/index.scss b/libs/ui/src/lib/styles/deale-website/index.scss index 0055ca7..8e7b788 100644 --- a/libs/ui/src/lib/styles/deale-website/index.scss +++ b/libs/ui/src/lib/styles/deale-website/index.scss @@ -1,5 +1,5 @@ -@use 'components' as *; -@use 'layouts' as *; -@use 'screens' as *; -@use 'shell' as *; -@use 'wrappers' as *; +@use 'components' as *; +@use 'layouts' as *; +@use 'screens' as *; +@use 'shell' as *; +@use 'wrappers' as *; diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss index be56546..7ffd9cb 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss @@ -1,97 +1,97 @@ -.pi-layout { - &.pi-layout__02-full-width { - &:not(.pi-layout__02a-full-width--auto) { - & > *:nth-child(1) { - & > *:nth-child(n + 1):not(:is(h1, h2, h3, h4, h5, p, i, figcaption, small)) { - margin: 0 auto; - } - & > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) { - margin: var(--pi-spacing-medium) auto; - } - } - } - } -} -@mixin layoutBasicPages( - $padding-top-1: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)), - $padding-top-2: var(--pi-spacing-xxx-large) -) { - .pi-shell__deale-website { - .pi-container-layout { - &.pi-layout { - &.pi-layout__02-full-width { - & > *:nth-child(1) { - padding-top: $padding-top-1; - } - & > *:nth-child(2) { - padding-top: $padding-top-2; - padding-bottom: $padding-top-2; - } - } - } - } - } -} - -html { - &.is-mobile { - @include layoutBasicPages; - .pi-layout { - &.pi-layout__02-full-width { - padding: var(--pi-spacing-x-large); - } - } - } - &.is-tablet { - @include layoutBasicPages( - calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)), - var(--pi-spacing-xxxx-large) - ); - .pi-layout { - &.pi-layout__02-full-width { - padding: var(--pi-spacing-xx-large); - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__02-full-width { - max-width: 100%; - } - } - } - // Desktop - &.is-desktop { - @include layoutBasicPages( - calc(var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)), - var(--pi-spacing-xxxx-large) - ); - .pi-layout { - &.pi-layout__02-full-width { - padding: var(--pi-spacing-xxxx-large) var(--pi-spacing-xxxx-large); - - // Desktop M - @media screen and (min-width: 90rem) and (max-width: 120rem) { - & > *:nth-child(n + 1) { - max-width: var(--pi-public-width-container); - } - } - &:not(.pi-container-layout) { - // Desktop S - @media screen and (min-width: 77.5rem) and (max-width: 90rem) { - & > *:nth-child(n + 1) { - max-width: 100%; - } - } - // Desktop L - @media screen and (min-width: 120rem) { - & > *:nth-child(n + 1) { - max-width: var(--pi-public-width-container-l); - } - } - } - } - } - } -} +.pi-layout { + &.pi-layout__02-full-width { + &:not(.pi-layout__02a-full-width--auto) { + & > *:nth-child(1) { + & > *:nth-child(n + 1):not(:is(h1, h2, h3, h4, h5, p, i, figcaption, small)) { + margin: 0 auto; + } + & > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) { + margin: var(--pi-spacing-medium) auto; + } + } + } + } +} +@mixin layoutBasicPages( + $padding-top-1: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)), + $padding-top-2: var(--pi-spacing-xxx-large) +) { + .pi-shell__deale-website { + .pi-container-layout { + &.pi-layout { + &.pi-layout__02-full-width { + & > *:nth-child(1) { + padding-top: $padding-top-1; + } + & > *:nth-child(2) { + padding-top: $padding-top-2; + padding-bottom: $padding-top-2; + } + } + } + } + } +} + +html { + &.is-mobile { + @include layoutBasicPages; + .pi-layout { + &.pi-layout__02-full-width { + padding: var(--pi-spacing-x-large); + } + } + } + &.is-tablet { + @include layoutBasicPages( + calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)), + var(--pi-spacing-xxxx-large) + ); + .pi-layout { + &.pi-layout__02-full-width { + padding: var(--pi-spacing-xx-large); + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__02-full-width { + max-width: 100%; + } + } + } + // Desktop + &.is-desktop { + @include layoutBasicPages( + calc(var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)), + var(--pi-spacing-xxxx-large) + ); + .pi-layout { + &.pi-layout__02-full-width { + padding: var(--pi-spacing-xxxx-large) var(--pi-spacing-xxxx-large); + + // Desktop M + @media screen and (min-width: 90rem) and (max-width: 120rem) { + & > *:nth-child(n + 1) { + max-width: var(--pi-public-width-container); + } + } + &:not(.pi-container-layout) { + // Desktop S + @media screen and (min-width: 77.5rem) and (max-width: 90rem) { + & > *:nth-child(n + 1) { + max-width: 100%; + } + } + // Desktop L + @media screen and (min-width: 120rem) { + & > *:nth-child(n + 1) { + max-width: var(--pi-public-width-container-l); + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss index dafcfbb..59e5ec5 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss @@ -1,9 +1,9 @@ -.pi-layout { - &.pi-layout__02-full-width { - &.pi-layout__02a-full-width--auto { - & > *:nth-child(n + 1) { - margin: 0 auto; - } - } - } -} +.pi-layout { + &.pi-layout__02-full-width { + &.pi-layout__02a-full-width--auto { + & > *:nth-child(n + 1) { + margin: 0 auto; + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss index 3488df9..115a4aa 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss @@ -1,117 +1,117 @@ -@mixin headingsWidth($max-width: 100%) { - .pi-container-layout { - .pi-layout { - &.pi-layout__03-vertically-centered { - .pi-text__centered { - & > *:nth-child(n + 1) { - &:is(h2, h3, h4, h5) { - max-width: $max-width; - margin: auto; - } - } - } - } - } - } -} - -// - -@mixin thankYouPageHeaderHeight($device: mobile) { - .pi-layout { - &.pi-layout__03-vertically-centered { - &.pi-layout__full { - & > .pi-wrapper { - &.pi-background-image { - min-height: calc(100vh - var(--pi-public-height-header-#{$device})); - } - } - } - } - } -} - -.pi-container-layout { - .pi-layout { - &.pi-layout__03-vertically-centered { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-size: cover; - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - @include headingsWidth; - // Small device - @media screen and (max-width: 62rem) { - @include thankYouPageHeaderHeight; - } - &:not(.is-desktop__large) { - .pi-layout { - &.pi-layout__03-vertically-centered { - &.pi-layout__02-full-width { - &:not(.pi-layout__06-edge-to-edge) { - & > *:nth-child(1) { - max-width: 100%; - } - } - } - } - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - @include thankYouPageHeaderHeight(desktop); - } - } - // Desktop - &.is-desktop { - .pi-layout { - @include headingsWidth(75%); - &.pi-layout__03-vertically-centered { - &.pi-layout__02-full-width { - &:not(.pi-layout__06-edge-to-edge) { - max-width: var(--pi-public-width-container-l); - } - - &.pi-layout__02a-full-width--auto { - margin: auto; - } - } - } - } - &:not(.is-desktop__large) { - .pi-layout { - &.pi-layout__03-vertically-centered { - & > *:nth-child(1) { - max-width: 100%; - } - } - } - } - &.is-desktop__medium { - @include headingsWidth(70%); - } - &.is-desktop__large { - @include headingsWidth(66.66%); - .pi-layout { - &.pi-layout__03-vertically-centered { - &:not(.pi-layout__06-edge-to-edge) { - & > *:nth-child(1) { - max-width: var(--pi-public-width-container-l); - } - } - } - } - } - } -} +@mixin headingsWidth($max-width: 100%) { + .pi-container-layout { + .pi-layout { + &.pi-layout__03-vertically-centered { + .pi-text__centered { + & > *:nth-child(n + 1) { + &:is(h2, h3, h4, h5) { + max-width: $max-width; + margin: auto; + } + } + } + } + } + } +} + +// + +@mixin thankYouPageHeaderHeight($device: mobile) { + .pi-layout { + &.pi-layout__03-vertically-centered { + &.pi-layout__full { + & > .pi-wrapper { + &.pi-background-image { + min-height: calc(100vh - var(--pi-public-height-header-#{$device})); + } + } + } + } + } +} + +.pi-container-layout { + .pi-layout { + &.pi-layout__03-vertically-centered { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-size: cover; + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + @include headingsWidth; + // Small device + @media screen and (max-width: 62rem) { + @include thankYouPageHeaderHeight; + } + &:not(.is-desktop__large) { + .pi-layout { + &.pi-layout__03-vertically-centered { + &.pi-layout__02-full-width { + &:not(.pi-layout__06-edge-to-edge) { + & > *:nth-child(1) { + max-width: 100%; + } + } + } + } + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + @include thankYouPageHeaderHeight(desktop); + } + } + // Desktop + &.is-desktop { + .pi-layout { + @include headingsWidth(75%); + &.pi-layout__03-vertically-centered { + &.pi-layout__02-full-width { + &:not(.pi-layout__06-edge-to-edge) { + max-width: var(--pi-public-width-container-l); + } + + &.pi-layout__02a-full-width--auto { + margin: auto; + } + } + } + } + &:not(.is-desktop__large) { + .pi-layout { + &.pi-layout__03-vertically-centered { + & > *:nth-child(1) { + max-width: 100%; + } + } + } + } + &.is-desktop__medium { + @include headingsWidth(70%); + } + &.is-desktop__large { + @include headingsWidth(66.66%); + .pi-layout { + &.pi-layout__03-vertically-centered { + &:not(.pi-layout__06-edge-to-edge) { + & > *:nth-child(1) { + max-width: var(--pi-public-width-container-l); + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss index 5f5a9ac..8b6e933 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss @@ -1,9 +1,9 @@ -.pi-layout { - &.pi-layout__06-edge-to-edge { - width: 100%; - & > *:nth-child(n + 1) { - width: 100%; - margin: 0 auto; - } - } -} +.pi-layout { + &.pi-layout__06-edge-to-edge { + width: 100%; + & > *:nth-child(n + 1) { + width: 100%; + margin: 0 auto; + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss index 6c802ea..a25715e 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss @@ -1,57 +1,57 @@ -@mixin websiteHomeUserSpacings($max-width) { - .pi-layout { - &.pi-website-home-user { - .pi-list-item-content__left { - max-width: $max-width; - } - } - } -} -@mixin edgeToEdgeLayoutCarouselBehavior($max-width) { - .pi-layout { - &.pi-layout__06-edge-to-edge { - .pi-carousel { - & > main { - & > section { - max-width: $max-width; - } - } - } - } - } -} - -.pi-layout { - &.pi-website-home-user { - .pi-carousel { - display: block; - } - .pi-switch-button { - margin-top: var(--pi-spacing-xxx-large); - } - &:not(.pi-website-home-user__advisor) { - .pi-carousel { - margin-top: var(--pi-spacing-xxx-large); - } - } - } -} - -html { - // Desktop - &.is-desktop { - // Desktop S & M - &:not(.is-desktop__large) { - @include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container)); - } - // Desktop M - &.is-desktop__medium { - @include websiteHomeUserSpacings(80%); - } - // Desktop L - &.is-desktop__large { - @include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container-l)); - @include websiteHomeUserSpacings(66.66%); - } - } -} +@mixin websiteHomeUserSpacings($max-width) { + .pi-layout { + &.pi-website-home-user { + .pi-list-item-content__left { + max-width: $max-width; + } + } + } +} +@mixin edgeToEdgeLayoutCarouselBehavior($max-width) { + .pi-layout { + &.pi-layout__06-edge-to-edge { + .pi-carousel { + & > main { + & > section { + max-width: $max-width; + } + } + } + } + } +} + +.pi-layout { + &.pi-website-home-user { + .pi-carousel { + display: block; + } + .pi-switch-button { + margin-top: var(--pi-spacing-xxx-large); + } + &:not(.pi-website-home-user__advisor) { + .pi-carousel { + margin-top: var(--pi-spacing-xxx-large); + } + } + } +} + +html { + // Desktop + &.is-desktop { + // Desktop S & M + &:not(.is-desktop__large) { + @include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container)); + } + // Desktop M + &.is-desktop__medium { + @include websiteHomeUserSpacings(80%); + } + // Desktop L + &.is-desktop__large { + @include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container-l)); + @include websiteHomeUserSpacings(66.66%); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss index 6f62ccf..e3af087 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss @@ -1,164 +1,164 @@ -.pi-layout { - &.pi-layout__07-list { - padding: 0; - overflow-y: hidden; - & > header { - position: fixed; - z-index: 99; - display: flex; - align-items: flex-end; - width: 100%; - margin: auto; - background-color: rgba($color: white, $alpha: 0.6); - .pi-wrapper { - &.pi-wrapper__header { - margin: auto; - padding-bottom: var(--pi-spacing-xx-small); - } - } - } - & > section { - footer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: var(--pi-spacing-medium); - height: 7rem; - text-align: center; - background-color: var(--pi-color-white); - } - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - .pi-layout { - &.pi-layout__07-list { - & > header { - .pi-wrapper { - &.pi-wrapper__header { - min-height: var(--pi-height-layout-header); - width: 100%; - padding-right: var(--pi-spacing-x-large); - padding-left: var(--pi-spacing-x-large); - header { - display: flex; - align-items: center; - & > h1 { - margin-top: var(--pi-spacing-medium); - font: { - size: var(--pi-font-size-large); - } - } - } - } - } - } - & > section { - padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium)); - - .pi-wrapper { - &.pi-wrapper__list { - max-height: calc( - 100vh - var(--pi-public-height-header-mobile) - var(--pi-height-layout-header) - - 7.35rem - ); - .pi-data-grid__mode--grid { - justify-content: center; - } - } - } - } - } - } - } - - // Desktop - &.is-desktop { - .pi-layout { - &.pi-layout__07-list { - & > header { - .pi-wrapper { - &.pi-wrapper__header { - min-height: var(--pi-height-layout-header); - padding: var(--pi-spacing-xxx-large) var(--pi-spacing-x-large); - } - } - } - & > section { - padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium)); - - .pi-wrapper { - &.pi-wrapper__list { - max-height: calc( - 100vh - var(--pi-public-height-header-desktop) - var(--pi-height-layout-header) - - 7.35rem - ); - & > section { - .pi-data-grid__mode--grid { - justify-content: center; - max-width: var(--pi-width-container-l); - margin: auto; - padding-top: 3rem; - padding-bottom: var(--pi-spacing-xxxx-large); - } - } - } - } - } - } - } - - // Desktop medium & large - &:not(.is-desktop__large) { - .pi-layout { - &.pi-layout__07-list { - & > header { - .pi-wrapper { - &.pi-wrapper__header { - width: 100%; - padding-right: var(--pi-spacing-xxxx-large); - padding-left: var(--pi-spacing-xxxx-large); - header { - width: 80%; - } - } - } - } - } - } - } - // Desktop large - &.is-desktop__large { - .pi-layout { - &.pi-layout__07-list { - & > header { - .pi-wrapper { - &.pi-wrapper__header { - min-height: var(--pi-height-layout-header); - width: var(--pi-public-width-container-l); - padding-right: var(--pi-spacing-xxx-large); - padding-left: var(--pi-spacing-xxx-large); - } - } - } - & > section { - padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium)); - - .pi-wrapper { - &.pi-wrapper__list { - max-height: calc( - 100vh - var(--pi-public-height-header-desktop) - var(--pi-height-layout-header) - - 7.35rem - ); - } - } - } - } - } - } - } -} +.pi-layout { + &.pi-layout__07-list { + padding: 0; + overflow-y: hidden; + & > header { + position: fixed; + z-index: 99; + display: flex; + align-items: flex-end; + width: 100%; + margin: auto; + background-color: rgba($color: white, $alpha: 0.6); + .pi-wrapper { + &.pi-wrapper__header { + margin: auto; + padding-bottom: var(--pi-spacing-xx-small); + } + } + } + & > section { + footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: var(--pi-spacing-medium); + height: 7rem; + text-align: center; + background-color: var(--pi-color-white); + } + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + .pi-layout { + &.pi-layout__07-list { + & > header { + .pi-wrapper { + &.pi-wrapper__header { + min-height: var(--pi-height-layout-header); + width: 100%; + padding-right: var(--pi-spacing-x-large); + padding-left: var(--pi-spacing-x-large); + header { + display: flex; + align-items: center; + & > h1 { + margin-top: var(--pi-spacing-medium); + font: { + size: var(--pi-font-size-large); + } + } + } + } + } + } + & > section { + padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium)); + + .pi-wrapper { + &.pi-wrapper__list { + max-height: calc( + 100vh - var(--pi-public-height-header-mobile) - var(--pi-height-layout-header) - + 7.35rem + ); + .pi-data-grid__mode--grid { + justify-content: center; + } + } + } + } + } + } + } + + // Desktop + &.is-desktop { + .pi-layout { + &.pi-layout__07-list { + & > header { + .pi-wrapper { + &.pi-wrapper__header { + min-height: var(--pi-height-layout-header); + padding: var(--pi-spacing-xxx-large) var(--pi-spacing-x-large); + } + } + } + & > section { + padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium)); + + .pi-wrapper { + &.pi-wrapper__list { + max-height: calc( + 100vh - var(--pi-public-height-header-desktop) - var(--pi-height-layout-header) - + 7.35rem + ); + & > section { + .pi-data-grid__mode--grid { + justify-content: center; + max-width: var(--pi-width-container-l); + margin: auto; + padding-top: 3rem; + padding-bottom: var(--pi-spacing-xxxx-large); + } + } + } + } + } + } + } + + // Desktop medium & large + &:not(.is-desktop__large) { + .pi-layout { + &.pi-layout__07-list { + & > header { + .pi-wrapper { + &.pi-wrapper__header { + width: 100%; + padding-right: var(--pi-spacing-xxxx-large); + padding-left: var(--pi-spacing-xxxx-large); + header { + width: 80%; + } + } + } + } + } + } + } + // Desktop large + &.is-desktop__large { + .pi-layout { + &.pi-layout__07-list { + & > header { + .pi-wrapper { + &.pi-wrapper__header { + min-height: var(--pi-height-layout-header); + width: var(--pi-public-width-container-l); + padding-right: var(--pi-spacing-xxx-large); + padding-left: var(--pi-spacing-xxx-large); + } + } + } + & > section { + padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium)); + + .pi-wrapper { + &.pi-wrapper__list { + max-height: calc( + 100vh - var(--pi-public-height-header-desktop) - var(--pi-height-layout-header) - + 7.35rem + ); + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss index 67e2693..c8ad2dd 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss @@ -1,53 +1,53 @@ -@mixin containerSpacings( - $padding-top: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)), - $default-vertical-padding: calc(var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)), - $default-vertical-margin: var(--pi-spacing-xx-large) -) { - .pi-container-layout { - .pi-layout { - &:nth-child(1) { - &:not(.pi-layout__09-pricing):not(.pi-website-home-user):not( - .pi-layout__03-vertically-centered - ) { - & > *:nth-child(1) { - padding-top: $padding-top; - } - } - } - } - .pi-layout + .pi-layout__03-vertically-centered { - & > *:nth-child(1) { - padding-top: $default-vertical-padding; - padding-bottom: $default-vertical-padding; - } - } - .pi-layout + .pi-layout { - margin-top: $default-vertical-margin; - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - @include containerSpacings; - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - @include containerSpacings( - calc( - var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large) + - var(--pi-spacing-x-large) - ), - var(--pi-spacing-xxxx-large), - var(--pi-spacing-xx-large) - ); - } - } -} +@mixin containerSpacings( + $padding-top: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)), + $default-vertical-padding: calc(var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)), + $default-vertical-margin: var(--pi-spacing-xx-large) +) { + .pi-container-layout { + .pi-layout { + &:nth-child(1) { + &:not(.pi-layout__09-pricing):not(.pi-website-home-user):not( + .pi-layout__03-vertically-centered + ) { + & > *:nth-child(1) { + padding-top: $padding-top; + } + } + } + } + .pi-layout + .pi-layout__03-vertically-centered { + & > *:nth-child(1) { + padding-top: $default-vertical-padding; + padding-bottom: $default-vertical-padding; + } + } + .pi-layout + .pi-layout { + margin-top: $default-vertical-margin; + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + @include containerSpacings; + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + @include containerSpacings( + calc( + var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large) + + var(--pi-spacing-x-large) + ), + var(--pi-spacing-xxxx-large), + var(--pi-spacing-xx-large) + ); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss index c9f1d2f..a026a58 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss @@ -1,33 +1,33 @@ -@mixin layoutSpacings($padding: var(--pi-spacing-xx-large)) { - .pi-container-layout { - .pi-layout { - &:not(.pi-layout__03-vertically-centered) { - & > *:first-child { - padding-top: $padding; - } - & > *:last-child { - padding-bottom: $padding; - } - } - } - .pi-domain-component { - display: block; - width: -webkit-fill-available; - } - } -} - -html { - // Mobile - &.is-mobile { - @include layoutSpacings; - } - // Tablet - &.is-tablet { - @include layoutSpacings(var(--pi-spacing-xxx-large)); - } - // Desktop - &.is-desktop { - @include layoutSpacings(var(--pi-spacing-xxxx-large)); - } -} +@mixin layoutSpacings($padding: var(--pi-spacing-xx-large)) { + .pi-container-layout { + .pi-layout { + &:not(.pi-layout__03-vertically-centered) { + & > *:first-child { + padding-top: $padding; + } + & > *:last-child { + padding-bottom: $padding; + } + } + } + .pi-domain-component { + display: block; + width: -webkit-fill-available; + } + } +} + +html { + // Mobile + &.is-mobile { + @include layoutSpacings; + } + // Tablet + &.is-tablet { + @include layoutSpacings(var(--pi-spacing-xxx-large)); + } + // Desktop + &.is-desktop { + @include layoutSpacings(var(--pi-spacing-xxxx-large)); + } +} diff --git a/libs/ui/src/lib/styles/deale-website/layouts/index.scss b/libs/ui/src/lib/styles/deale-website/layouts/index.scss index b71dafa..e5143d6 100644 --- a/libs/ui/src/lib/styles/deale-website/layouts/index.scss +++ b/libs/ui/src/lib/styles/deale-website/layouts/index.scss @@ -1,8 +1,8 @@ -@forward 'pi-02-full-width-layout'; -@forward 'pi-02a-full-width-auto-layout'; -@forward 'pi-03-vertically-centered-layout'; -@forward 'pi-06-edge-to-edge-layout'; -@forward 'pi-06b-edge-to-edge-home-users-layout'; -@forward 'pi-07-list-layout'; -@forward 'pi-container-layout'; -@forward 'pi-layout'; +@forward 'pi-02-full-width-layout'; +@forward 'pi-02a-full-width-auto-layout'; +@forward 'pi-03-vertically-centered-layout'; +@forward 'pi-06-edge-to-edge-layout'; +@forward 'pi-06b-edge-to-edge-home-users-layout'; +@forward 'pi-07-list-layout'; +@forward 'pi-container-layout'; +@forward 'pi-layout'; diff --git a/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss b/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss index 647c33e..83d9d5e 100644 --- a/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss +++ b/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss @@ -1,99 +1,99 @@ -@mixin thankYouScreenHeader($device: mobile) { - .pi-website-screen { - &.pi-website-screen__00-type-thank-you { - & > header { - display: block; - width: -webkit-fill-available; - padding-top: calc(var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})); - } - } - } -} - -.pi-website-screen { - &.pi-website-screen__00-type-thank-you { - justify-content: space-evenly !important; - - & > *:nth-child(n + 1) { - text-align: center; - } - & > picture { - & > main { - display: grid; - height: 100%; - - @for $i from 1 through 2 { - & > *:nth-child(#{$i}) { - grid-area: item#{$i}; - align-self: center; - height: fit-content; - } - } - } - } - } -} -@mixin thankYouScreenMain( - $cols: 4, - $rows: 6, - $areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .' '. . item2 item2' - '. . item2 item2', - $min-height: 50 -) { - .pi-website-screen { - &.pi-website-screen__00-type-thank-you { - & > picture { - & > main { - grid-template-columns: repeat(#{$cols}, 1fr); - grid-template-rows: repeat(#{$rows}, 1fr); - grid-template-areas: $areas; - min-height: #{$min-height}vh; - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include thankYouScreenMain; - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small devices - @media screen and (max-width: 62rem) { - @include thankYouScreenHeader; - } - } - - // Tablet - &.is-tablet { - @include thankYouScreenMain( - 6, - 6, - '. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .' '. item1 item1 . item2 item2' - '. item1 item1 . item2 item2' '. . . . . .', - 50 - ); - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large devices - @media screen and (min-width: 62rem) { - @include thankYouScreenHeader(desktop); - } - } - - &.is-desktop { - @include thankYouScreenMain( - 12, - 6, - '. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .' - '. . item1 item1 item1 . . . . . . .' '. . item1 item1 item1 . . item2 item2 item2 . .' - '. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .', - 50 - ); - } -} +@mixin thankYouScreenHeader($device: mobile) { + .pi-website-screen { + &.pi-website-screen__00-type-thank-you { + & > header { + display: block; + width: -webkit-fill-available; + padding-top: calc(var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})); + } + } + } +} + +.pi-website-screen { + &.pi-website-screen__00-type-thank-you { + justify-content: space-evenly !important; + + & > *:nth-child(n + 1) { + text-align: center; + } + & > picture { + & > main { + display: grid; + height: 100%; + + @for $i from 1 through 2 { + & > *:nth-child(#{$i}) { + grid-area: item#{$i}; + align-self: center; + height: fit-content; + } + } + } + } + } +} +@mixin thankYouScreenMain( + $cols: 4, + $rows: 6, + $areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .' '. . item2 item2' + '. . item2 item2', + $min-height: 50 +) { + .pi-website-screen { + &.pi-website-screen__00-type-thank-you { + & > picture { + & > main { + grid-template-columns: repeat(#{$cols}, 1fr); + grid-template-rows: repeat(#{$rows}, 1fr); + grid-template-areas: $areas; + min-height: #{$min-height}vh; + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include thankYouScreenMain; + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small devices + @media screen and (max-width: 62rem) { + @include thankYouScreenHeader; + } + } + + // Tablet + &.is-tablet { + @include thankYouScreenMain( + 6, + 6, + '. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .' '. item1 item1 . item2 item2' + '. item1 item1 . item2 item2' '. . . . . .', + 50 + ); + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large devices + @media screen and (min-width: 62rem) { + @include thankYouScreenHeader(desktop); + } + } + + &.is-desktop { + @include thankYouScreenMain( + 12, + 6, + '. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .' + '. . item1 item1 item1 . . . . . . .' '. . item1 item1 item1 . . item2 item2 item2 . .' + '. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .', + 50 + ); + } +} diff --git a/libs/ui/src/lib/styles/deale-website/screens/index.scss b/libs/ui/src/lib/styles/deale-website/screens/index.scss index 48d9639..e00c08f 100644 --- a/libs/ui/src/lib/styles/deale-website/screens/index.scss +++ b/libs/ui/src/lib/styles/deale-website/screens/index.scss @@ -1 +1 @@ -@forward 'pi-00-thank-you-screen'; +@forward 'pi-00-thank-you-screen'; diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss index e2c1096..7097748 100644 --- a/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss +++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss @@ -1,193 +1,193 @@ -@mixin websiteFooterTop($flex-direction: column) { - .pi-website-footer { - & > footer { - flex-direction: $flex-direction; - } - } -} - -@mixin websiteFooterBottom($flex-direction: column-reverse) { - .pi-website-footer { - & > aside { - flex-direction: $flex-direction; - } - } -} - -@mixin websiteFooterTopLeft($flex-direction: column, $width: 100%, $justify-right: flex-start) { - .pi-website-footer-content__top-left { - flex-direction: $flex-direction; - width: $width; - & > section { - justify-content: $justify-right; - } - } -} - -@mixin websiteFooterTopRight($columns: 2, $width: 100%) { - .pi-website-footer-content__top-right { - grid-template-columns: repeat($columns, 1fr); - width: $width; - } -} - -@mixin websiteFooterBottomLeft($text-align: flex-start) { - .pi-website-footer-content__bottom-left { - text-align: $text-align; - } -} - -@mixin websiteFooterBottomRight() { - .pi-website-footer-content__bottom-right { - } -} - -@mixin websiteFooterGap($gap: var(--pi-spacing-x-large)) { - .pi-website-footer { - gap: $gap; - & > footer, - & > aside { - gap: $gap; - } - & > footer { - & > .pi-website-footer-content { - &.pi-website-footer-content__top-right { - gap: $gap; - } - } - } - } -} - -@mixin websiteFooterWidth($width: calc(100% - var(--pi-spacing-xx-large))) { - .pi-website-footer { - & > *:nth-child(n + 2) { - width: $width; - margin: 0 auto; - } - } -} - -.pi-website-footer { - display: flex; - flex-direction: column; - justify-content: space-evenly; - - width: -webkit-fill-available; - background-color: var(--pi-color-grey-25); - - // divider - & > span { - width: 100%; - height: 4.25rem; - left: 0px; - background: linear-gradient( - to right bottom, - var(--pi-color-white) 49%, - var(--pi-color-grey-25) 50% - ); - } - - & > footer, - & > aside { - display: flex; - padding: var(--pi-spacing-xx-large); - } - & > footer { - & > .pi-website-footer-content { - gap: var(--pi-spacing-small); - - &.pi-website-footer-content__top-left { - display: flex; - justify-content: space-between; - .pi-headline { - & > figure { - max-width: 5.625rem; - } - } - } - - &.pi-website-footer-content__top-right { - margin: 0 auto; - display: grid; - - .pi-menu { - & > nav { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-small); - - & > .pi-menu-event-item:first-child { - margin-bottom: var(--pi-spacing-small); - font: { - weight: 600; - } - } - & > :nth-child(n + 2) { - cursor: pointer; - } - } - } - } - } - } - & > aside { - align-items: center; - justify-content: space-between; - max-height: 12.5625rem; - border-top: 1px solid var(--pi-color-grey-100); - padding: var(--pi-spacing-x-large); - } -} - -html { - // Mobile - &.is-mobile { - @include websiteFooterBottom; - @include websiteFooterBottomLeft(center); - @include websiteFooterGap; - @include websiteFooterTopLeft; - @include websiteFooterTopRight; - @include websiteFooterWidth; - } - // Tablet - &.is-tablet { - @include websiteFooterWidth(calc(100% - 3rem)); - // Tablet S - @media screen and (max-width: 62rem) { - @include websiteFooterTopLeft(row, 100%, flex-end); - @include websiteFooterTopRight(3); - } - // Tablet L - @media screen and (min-width: 62rem) { - @include websiteFooterTopLeft(column, 25%); - @include websiteFooterTopRight(3, 75%); - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Large device - @media screen and (max-width: 62rem) { - @include websiteFooterTop; - } - } - // Tablet & Desktop - &:not(.is-mobile) { - @include websiteFooterBottom(row); - @include websiteFooterGap(var(--pi-spacing-xxxx-large)); - } - // Desktop - &.is-desktop { - @include websiteFooterTop(row); - @include websiteFooterTopLeft(column, 25%); - @include websiteFooterTopRight(3, 75%); - // Desktop S & M - &:not(.is-desktop__large) { - @include websiteFooterWidth(var(--pi-public-width-container)); - } - // Desktop L - &.is-desktop__large { - @include websiteFooterWidth(var(--pi-public-width-container-l)); - } - } -} +@mixin websiteFooterTop($flex-direction: column) { + .pi-website-footer { + & > footer { + flex-direction: $flex-direction; + } + } +} + +@mixin websiteFooterBottom($flex-direction: column-reverse) { + .pi-website-footer { + & > aside { + flex-direction: $flex-direction; + } + } +} + +@mixin websiteFooterTopLeft($flex-direction: column, $width: 100%, $justify-right: flex-start) { + .pi-website-footer-content__top-left { + flex-direction: $flex-direction; + width: $width; + & > section { + justify-content: $justify-right; + } + } +} + +@mixin websiteFooterTopRight($columns: 2, $width: 100%) { + .pi-website-footer-content__top-right { + grid-template-columns: repeat($columns, 1fr); + width: $width; + } +} + +@mixin websiteFooterBottomLeft($text-align: flex-start) { + .pi-website-footer-content__bottom-left { + text-align: $text-align; + } +} + +@mixin websiteFooterBottomRight() { + .pi-website-footer-content__bottom-right { + } +} + +@mixin websiteFooterGap($gap: var(--pi-spacing-x-large)) { + .pi-website-footer { + gap: $gap; + & > footer, + & > aside { + gap: $gap; + } + & > footer { + & > .pi-website-footer-content { + &.pi-website-footer-content__top-right { + gap: $gap; + } + } + } + } +} + +@mixin websiteFooterWidth($width: calc(100% - var(--pi-spacing-xx-large))) { + .pi-website-footer { + & > *:nth-child(n + 2) { + width: $width; + margin: 0 auto; + } + } +} + +.pi-website-footer { + display: flex; + flex-direction: column; + justify-content: space-evenly; + + width: -webkit-fill-available; + background-color: var(--pi-color-grey-25); + + // divider + & > span { + width: 100%; + height: 4.25rem; + left: 0px; + background: linear-gradient( + to right bottom, + var(--pi-color-white) 49%, + var(--pi-color-grey-25) 50% + ); + } + + & > footer, + & > aside { + display: flex; + padding: var(--pi-spacing-xx-large); + } + & > footer { + & > .pi-website-footer-content { + gap: var(--pi-spacing-small); + + &.pi-website-footer-content__top-left { + display: flex; + justify-content: space-between; + .pi-headline { + & > figure { + max-width: 5.625rem; + } + } + } + + &.pi-website-footer-content__top-right { + margin: 0 auto; + display: grid; + + .pi-menu { + & > nav { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-small); + + & > .pi-menu-event-item:first-child { + margin-bottom: var(--pi-spacing-small); + font: { + weight: 600; + } + } + & > :nth-child(n + 2) { + cursor: pointer; + } + } + } + } + } + } + & > aside { + align-items: center; + justify-content: space-between; + max-height: 12.5625rem; + border-top: 1px solid var(--pi-color-grey-100); + padding: var(--pi-spacing-x-large); + } +} + +html { + // Mobile + &.is-mobile { + @include websiteFooterBottom; + @include websiteFooterBottomLeft(center); + @include websiteFooterGap; + @include websiteFooterTopLeft; + @include websiteFooterTopRight; + @include websiteFooterWidth; + } + // Tablet + &.is-tablet { + @include websiteFooterWidth(calc(100% - 3rem)); + // Tablet S + @media screen and (max-width: 62rem) { + @include websiteFooterTopLeft(row, 100%, flex-end); + @include websiteFooterTopRight(3); + } + // Tablet L + @media screen and (min-width: 62rem) { + @include websiteFooterTopLeft(column, 25%); + @include websiteFooterTopRight(3, 75%); + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Large device + @media screen and (max-width: 62rem) { + @include websiteFooterTop; + } + } + // Tablet & Desktop + &:not(.is-mobile) { + @include websiteFooterBottom(row); + @include websiteFooterGap(var(--pi-spacing-xxxx-large)); + } + // Desktop + &.is-desktop { + @include websiteFooterTop(row); + @include websiteFooterTopLeft(column, 25%); + @include websiteFooterTopRight(3, 75%); + // Desktop S & M + &:not(.is-desktop__large) { + @include websiteFooterWidth(var(--pi-public-width-container)); + } + // Desktop L + &.is-desktop__large { + @include websiteFooterWidth(var(--pi-public-width-container-l)); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss index 2c97fb7..813e878 100644 --- a/libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss +++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss @@ -1,36 +1,36 @@ -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-shell { - &.pi-shell__deale-website { - display: block; - max-width: 100vw; - overflow-x: hidden; - & > div { - &.is-menu-open { - position: fixed; - - &::after { - content: ''; - position: fixed; - z-index: 9; - height: 100vh; - width: 100%; - top: 0; - left: 0; - background-color: rgba($color: #0d2a6b, $alpha: 0.5); - } - .pi-container-layout { - & > .is-fixed { - display: none; - } - } - } - } - } - } - } - } -} +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-shell { + &.pi-shell__deale-website { + display: block; + max-width: 100vw; + overflow-x: hidden; + & > div { + &.is-menu-open { + position: fixed; + + &::after { + content: ''; + position: fixed; + z-index: 9; + height: 100vh; + width: 100%; + top: 0; + left: 0; + background-color: rgba($color: #0d2a6b, $alpha: 0.5); + } + .pi-container-layout { + & > .is-fixed { + display: none; + } + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss index f9ee3af..90db182 100644 --- a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss +++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss @@ -1,432 +1,432 @@ -@keyframes gradient { - 0% { - background-position: 0%; - } - 25% { - background-position: 25%; - } - 50% { - background-position: 50%; - } - 75% { - background-position: 75%; - } - 100% { - background-position: 100%; - } -} - -@mixin parentMenuItemColorLargeDevice($color, $border-color, $text-gradient) { - &:hover { - color: $color; - background: $border-color; - background-color: rgba($color: white, $alpha: 0.33); - animation: gradient 1.5s linear infinite; - animation-direction: alternate-reverse; - background-size: 150% 300%; - border: 0.0625rem solid transparent; - - &::before { - background-color: rgba($color: white, $alpha: 0.0125); - } - & > span { - & > span { - background-image: $text-gradient; - } - } - } -} - -// Mode light -@mixin topbarActionButtonLargeDeviceModeLight { - .pi-website-topbar-content { - &.pi-website-topbar-content__right { - // Login - .pi-button__action { - &.pi-button__type--menu-item { - box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66); - & > span { - & > span { - background-color: var(--pi-color-white); - } - } - - &::before { - background-color: rgba($color: white, $alpha: 0.0125); - } - - background-color: var(--pi-color-white); - border-color: var(--pi-color-primary); - & > svg { - color: var(--pi-color-highlighted); - } - & > span { - background-image: linear-gradient( - 30deg, - var(--pi-color-highlighted), - var(--pi-color-highlighted-900) - ); - } - } - } - } - } -} -@mixin topbarParentMenuItemLargeDeviceModeLight { - .pi-menu { - .pi-menu-event-item { - box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66); - & > span { - & > span { - background-color: var(--pi-color-white); - } - } - } - } -} - -@mixin parentMenuItemNotHoverColorModeLight { - &:not(:hover) { - border-color: rgba($color: white, $alpha: 0.66); - background-color: rgba($color: white, $alpha: 0.15); - } -} - -@mixin parentMenuItemColorLargeDeviceModeLight { - .pi-website-topbar-content { - // Center - &.pi-website-topbar-content__center { - .pi-menu { - &.pi-menu__parent { - & > nav { - & > .pi-menu-event-item { - // Company - &:nth-child(1) { - @include parentMenuItemColorLargeDevice( - var(--pi-color-primary), - ( - linear-gradient( - rgba($color: white, $alpha: 0.125), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient(to right, var(--pi-color-primary-200), var(--pi-color-primary)) - border-box - ), - linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)) - ); - } - // Investor - &:nth-child(2) { - @include parentMenuItemColorLargeDevice( - var(--pi-color-accent), - ( - linear-gradient( - rgba($color: white, $alpha: 0.125), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient(to right, var(--pi-color-accent-200), var(--pi-color-accent)) - border-box - ), - linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)) - ); - } - // Advisor - &:nth-child(3) { - @include parentMenuItemColorLargeDevice( - var(--pi-color-highlighted), - ( - linear-gradient( - rgba($color: white, $alpha: 0.5), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient( - to right, - var(--pi-color-highlighted-200), - var(--pi-color-highlighted) - ) - border-box - ), - linear-gradient( - 30deg, - var(--pi-color-highlighted), - var(--pi-color-highlighted-900) - ) - ); - } - @include parentMenuItemNotHoverColorModeLight; - } - } - } - } - } - // Right - &.pi-website-topbar-content__right { - .pi-menu { - &:not(.pi-menu__children) { - & > nav { - & > .pi-menu-event-item { - // Prices - &:nth-of-type(1) { - @include parentMenuItemNotHoverColorModeLight; - @include parentMenuItemColorLargeDevice( - var(--pi-color-highlighted), - ( - linear-gradient( - rgba($color: white, $alpha: 0.95), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient( - to right, - var(--pi-color-highlighted-200), - var(--pi-color-highlighted) - ) - border-box - ), - linear-gradient( - 30deg, - var(--pi-color-highlighted), - var(--pi-color-highlighted-900) - ) - ); - } - } - } - } - } - // Login - .pi-button__action { - @include parentMenuItemColorLargeDevice( - var(--pi-color-highlighted), - ( - linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1)) - padding-box, - linear-gradient(to right, var(--pi-color-highlighted-200), var(--pi-color-highlighted)) - border-box - ), - linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)) - ); - } - } - } -} - -// Mode dark -@mixin topbarActionButtonLargeDeviceModeDark { - .pi-website-topbar-content { - &.pi-website-topbar-content__right { - // Login - .pi-button__action { - box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66); - & > span { - background-image: linear-gradient(30deg, var(--pi-color-white), var(--pi-color-white)); - & > span { - background-color: var(--pi-color-highlighted); - } - } - - &::before { - background-color: rgba($color: #0d2a6b, $alpha: 0.0125); - } - - background-color: var(--pi-color-highlighted); - border-color: var(--pi-color-highlighted); - & > svg { - color: var(--pi-color-white); - } - &:hover { - & > span { - background-image: linear-gradient( - 30deg, - var(--pi-color-highlighted), - var(--pi-color-highlighted) - ); - & > span { - background-color: var(--pi-color-highlighted-100); - } - } - & > svg { - color: var(--pi-color-highlighted); - } - } - } - } - } -} -@mixin topbarParentMenuItemLargeDeviceModeDark { - .pi-menu { - .pi-menu-event-item { - box-shadow: 0 0 0 0 rgba($color: #3d3d3d, $alpha: 0.26); - & > span { - & > span { - background-color: var(--pi-color-grey); - } - } - } - } -} - -@mixin parentMenuItemNotHoverColorModeDark { - &:not(:hover) { - border-color: rgba($color: #3d3d3d, $alpha: 0.36); - background-color: rgba($color: white, $alpha: 0.44); - } -} - -@mixin parentMenuItemColorLargeDeviceModeDark { - .pi-website-topbar-content { - // Center - &.pi-website-topbar-content__center { - .pi-menu { - &.pi-menu__parent { - & > nav { - & > .pi-menu-event-item { - // Company - &:nth-child(1) { - @include parentMenuItemColorLargeDevice( - var(--pi-color-primary), - ( - linear-gradient( - rgba($color: white, $alpha: 0.125), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient( - to right, - var(--pi-color-primary-75), - var(--pi-color-primary-200) - ) - border-box - ), - linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)) - ); - } - // Investor - &:nth-child(2) { - @include parentMenuItemColorLargeDevice( - var(--pi-color-accent), - ( - linear-gradient( - rgba($color: white, $alpha: 0.125), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient( - to right, - var(--pi-color-accent-100), - var(--pi-color-accent-200) - ) - border-box - ), - linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)) - ); - } - // Advisor - &:nth-child(3) { - @include parentMenuItemColorLargeDevice( - var(--pi-color-highlighted), - ( - linear-gradient( - rgba($color: white, $alpha: 0.5), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient( - to right, - var(--pi-color-highlighted-100), - var(--pi-color-highlighted-200) - ) - border-box - ), - linear-gradient( - 30deg, - var(--pi-color-highlighted), - var(--pi-color-highlighted-900) - ) - ); - } - @include parentMenuItemNotHoverColorModeDark; - } - } - } - } - } - // Right - &.pi-website-topbar-content__right { - .pi-menu { - &:not(.pi-menu__children) { - & > nav { - & > .pi-menu-event-item { - // Prices - &:nth-of-type(1) { - @include parentMenuItemNotHoverColorModeDark; - @include parentMenuItemColorLargeDevice( - var(--pi-color-highlighted), - ( - linear-gradient( - rgba($color: white, $alpha: 0.95), - rgba($color: white, $alpha: 1) - ) - padding-box, - linear-gradient( - to right, - var(--pi-color-highlighted-200), - var(--pi-color-highlighted) - ) - border-box - ), - linear-gradient( - 30deg, - var(--pi-color-highlighted), - var(--pi-color-highlighted-900) - ) - ); - } - } - } - } - } - // Login - .pi-button__action { - @include parentMenuItemColorLargeDevice( - var(--pi-color-highlighted), - ( - linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1)) - padding-box, - linear-gradient(to right, var(--pi-color-highlighted-200), var(--pi-color-highlighted)) - border-box - ), - linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)) - ); - } - } - } -} - -html { - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - // Topbar - .pi-website-topbar { - // Mode light (White menu) - &:not(.is-mode-dark) { - @include parentMenuItemColorLargeDeviceModeLight; - @include topbarParentMenuItemLargeDeviceModeLight; - @include topbarActionButtonLargeDeviceModeLight; - } - - // Mode dark - &.is-mode-dark { - @include parentMenuItemColorLargeDeviceModeDark; - @include topbarParentMenuItemLargeDeviceModeDark; - @include topbarActionButtonLargeDeviceModeDark; - } - } - } - } -} +@keyframes gradient { + 0% { + background-position: 0%; + } + 25% { + background-position: 25%; + } + 50% { + background-position: 50%; + } + 75% { + background-position: 75%; + } + 100% { + background-position: 100%; + } +} + +@mixin parentMenuItemColorLargeDevice($color, $border-color, $text-gradient) { + &:hover { + color: $color; + background: $border-color; + background-color: rgba($color: white, $alpha: 0.33); + animation: gradient 1.5s linear infinite; + animation-direction: alternate-reverse; + background-size: 150% 300%; + border: 0.0625rem solid transparent; + + &::before { + background-color: rgba($color: white, $alpha: 0.0125); + } + & > span { + & > span { + background-image: $text-gradient; + } + } + } +} + +// Mode light +@mixin topbarActionButtonLargeDeviceModeLight { + .pi-website-topbar-content { + &.pi-website-topbar-content__right { + // Login + .pi-button__action { + &.pi-button__type--menu-item { + box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66); + & > span { + & > span { + background-color: var(--pi-color-white); + } + } + + &::before { + background-color: rgba($color: white, $alpha: 0.0125); + } + + background-color: var(--pi-color-white); + border-color: var(--pi-color-primary); + & > svg { + color: var(--pi-color-highlighted); + } + & > span { + background-image: linear-gradient( + 30deg, + var(--pi-color-highlighted), + var(--pi-color-highlighted-900) + ); + } + } + } + } + } +} +@mixin topbarParentMenuItemLargeDeviceModeLight { + .pi-menu { + .pi-menu-event-item { + box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66); + & > span { + & > span { + background-color: var(--pi-color-white); + } + } + } + } +} + +@mixin parentMenuItemNotHoverColorModeLight { + &:not(:hover) { + border-color: rgba($color: white, $alpha: 0.66); + background-color: rgba($color: white, $alpha: 0.15); + } +} + +@mixin parentMenuItemColorLargeDeviceModeLight { + .pi-website-topbar-content { + // Center + &.pi-website-topbar-content__center { + .pi-menu { + &.pi-menu__parent { + & > nav { + & > .pi-menu-event-item { + // Company + &:nth-child(1) { + @include parentMenuItemColorLargeDevice( + var(--pi-color-primary), + ( + linear-gradient( + rgba($color: white, $alpha: 0.125), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient(to right, var(--pi-color-primary-200), var(--pi-color-primary)) + border-box + ), + linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)) + ); + } + // Investor + &:nth-child(2) { + @include parentMenuItemColorLargeDevice( + var(--pi-color-accent), + ( + linear-gradient( + rgba($color: white, $alpha: 0.125), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient(to right, var(--pi-color-accent-200), var(--pi-color-accent)) + border-box + ), + linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)) + ); + } + // Advisor + &:nth-child(3) { + @include parentMenuItemColorLargeDevice( + var(--pi-color-highlighted), + ( + linear-gradient( + rgba($color: white, $alpha: 0.5), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient( + to right, + var(--pi-color-highlighted-200), + var(--pi-color-highlighted) + ) + border-box + ), + linear-gradient( + 30deg, + var(--pi-color-highlighted), + var(--pi-color-highlighted-900) + ) + ); + } + @include parentMenuItemNotHoverColorModeLight; + } + } + } + } + } + // Right + &.pi-website-topbar-content__right { + .pi-menu { + &:not(.pi-menu__children) { + & > nav { + & > .pi-menu-event-item { + // Prices + &:nth-of-type(1) { + @include parentMenuItemNotHoverColorModeLight; + @include parentMenuItemColorLargeDevice( + var(--pi-color-highlighted), + ( + linear-gradient( + rgba($color: white, $alpha: 0.95), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient( + to right, + var(--pi-color-highlighted-200), + var(--pi-color-highlighted) + ) + border-box + ), + linear-gradient( + 30deg, + var(--pi-color-highlighted), + var(--pi-color-highlighted-900) + ) + ); + } + } + } + } + } + // Login + .pi-button__action { + @include parentMenuItemColorLargeDevice( + var(--pi-color-highlighted), + ( + linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1)) + padding-box, + linear-gradient(to right, var(--pi-color-highlighted-200), var(--pi-color-highlighted)) + border-box + ), + linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)) + ); + } + } + } +} + +// Mode dark +@mixin topbarActionButtonLargeDeviceModeDark { + .pi-website-topbar-content { + &.pi-website-topbar-content__right { + // Login + .pi-button__action { + box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66); + & > span { + background-image: linear-gradient(30deg, var(--pi-color-white), var(--pi-color-white)); + & > span { + background-color: var(--pi-color-highlighted); + } + } + + &::before { + background-color: rgba($color: #0d2a6b, $alpha: 0.0125); + } + + background-color: var(--pi-color-highlighted); + border-color: var(--pi-color-highlighted); + & > svg { + color: var(--pi-color-white); + } + &:hover { + & > span { + background-image: linear-gradient( + 30deg, + var(--pi-color-highlighted), + var(--pi-color-highlighted) + ); + & > span { + background-color: var(--pi-color-highlighted-100); + } + } + & > svg { + color: var(--pi-color-highlighted); + } + } + } + } + } +} +@mixin topbarParentMenuItemLargeDeviceModeDark { + .pi-menu { + .pi-menu-event-item { + box-shadow: 0 0 0 0 rgba($color: #3d3d3d, $alpha: 0.26); + & > span { + & > span { + background-color: var(--pi-color-grey); + } + } + } + } +} + +@mixin parentMenuItemNotHoverColorModeDark { + &:not(:hover) { + border-color: rgba($color: #3d3d3d, $alpha: 0.36); + background-color: rgba($color: white, $alpha: 0.44); + } +} + +@mixin parentMenuItemColorLargeDeviceModeDark { + .pi-website-topbar-content { + // Center + &.pi-website-topbar-content__center { + .pi-menu { + &.pi-menu__parent { + & > nav { + & > .pi-menu-event-item { + // Company + &:nth-child(1) { + @include parentMenuItemColorLargeDevice( + var(--pi-color-primary), + ( + linear-gradient( + rgba($color: white, $alpha: 0.125), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient( + to right, + var(--pi-color-primary-75), + var(--pi-color-primary-200) + ) + border-box + ), + linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)) + ); + } + // Investor + &:nth-child(2) { + @include parentMenuItemColorLargeDevice( + var(--pi-color-accent), + ( + linear-gradient( + rgba($color: white, $alpha: 0.125), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient( + to right, + var(--pi-color-accent-100), + var(--pi-color-accent-200) + ) + border-box + ), + linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)) + ); + } + // Advisor + &:nth-child(3) { + @include parentMenuItemColorLargeDevice( + var(--pi-color-highlighted), + ( + linear-gradient( + rgba($color: white, $alpha: 0.5), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient( + to right, + var(--pi-color-highlighted-100), + var(--pi-color-highlighted-200) + ) + border-box + ), + linear-gradient( + 30deg, + var(--pi-color-highlighted), + var(--pi-color-highlighted-900) + ) + ); + } + @include parentMenuItemNotHoverColorModeDark; + } + } + } + } + } + // Right + &.pi-website-topbar-content__right { + .pi-menu { + &:not(.pi-menu__children) { + & > nav { + & > .pi-menu-event-item { + // Prices + &:nth-of-type(1) { + @include parentMenuItemNotHoverColorModeDark; + @include parentMenuItemColorLargeDevice( + var(--pi-color-highlighted), + ( + linear-gradient( + rgba($color: white, $alpha: 0.95), + rgba($color: white, $alpha: 1) + ) + padding-box, + linear-gradient( + to right, + var(--pi-color-highlighted-200), + var(--pi-color-highlighted) + ) + border-box + ), + linear-gradient( + 30deg, + var(--pi-color-highlighted), + var(--pi-color-highlighted-900) + ) + ); + } + } + } + } + } + // Login + .pi-button__action { + @include parentMenuItemColorLargeDevice( + var(--pi-color-highlighted), + ( + linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1)) + padding-box, + linear-gradient(to right, var(--pi-color-highlighted-200), var(--pi-color-highlighted)) + border-box + ), + linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)) + ); + } + } + } +} + +html { + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + // Topbar + .pi-website-topbar { + // Mode light (White menu) + &:not(.is-mode-dark) { + @include parentMenuItemColorLargeDeviceModeLight; + @include topbarParentMenuItemLargeDeviceModeLight; + @include topbarActionButtonLargeDeviceModeLight; + } + + // Mode dark + &.is-mode-dark { + @include parentMenuItemColorLargeDeviceModeDark; + @include topbarParentMenuItemLargeDeviceModeDark; + @include topbarActionButtonLargeDeviceModeDark; + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss index e6a2c9b..16c3490 100644 --- a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss +++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss @@ -1,499 +1,499 @@ -@keyframes pulse { - to { - box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent; - } -} - -@keyframes gradient { - 0% { - background-position: 0%; - } - 25% { - background-position: 25%; - } - 50% { - background-position: 50%; - } - 75% { - background-position: 75%; - } - 100% { - background-position: 100%; - } -} - -@mixin topbarParentMenuItemLargeDevice { - border: 0.0625rem solid; - border-radius: var(--pi-border-radius-medium); - transition: 0.4s all ease-in-out; - animation: pulse 1.5s infinite 2s ease-in; - &:hover { - cursor: pointer; - animation: unset; - &::before { - height: 2.75rem; - width: 6rem; - margin-top: -0.125rem; - margin-left: -0.125rem; - opacity: 1; - filter: blur(0.1rem); - } - } - &::before { - content: ''; - position: absolute; - transition: all 0.3s ease; - border-radius: 0.75rem; - opacity: 0; - height: 0; - width: 0; - margin-top: 1.1875rem; - margin-left: 2.8125rem; - } - & > span { - & > span { - position: relative; - display: flex; - justify-content: center; - align-items: center; - height: 2.25rem; - width: 6rem; - padding-bottom: 0.05rem; - background-size: 100%; - background-repeat: repeat; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-background-clip: text; - -moz-text-fill-color: transparent; - transition: all 0.45s ease-Out; - - font: { - weight: 400; - } - } - } -} - -@mixin largeDeviceChildMenu( - $margin-left, - $background-color, - $grid-template-columns: repeat(2, 1fr) -) { - // Menu item - .pi-menu__children { - z-index: 99; - position: absolute; - margin-top: var(--pi-spacing-large); - margin-left: $margin-left; - border-radius: var(--pi-border-radius-large); - background-color: var(--pi-color-white); - box-shadow: var(--pi-box-shadow-double); - & > div { - display: grid; - grid-template-columns: $grid-template-columns; - gap: var(--pi-spacing-medium); - } - - & > aside { - background-color: $background-color; - } - - // Submenu entry - .pi-list-item { - min-width: 15.625rem; - &:not(:hover) { - .pi-list-item-content { - &.pi-list-item-content__left { - & > span { - // - &:nth-child(1) { - color: var(--pi-color-black); - } - &:nth-child(2) { - color: var(--pi-color-grey-300); - } - } - } - } - } - &:hover { - cursor: pointer; - } - } - } -} - -@mixin largeDeviceChildMenuItemColor($background-color) { - // Submenu entry - .pi-list-item { - &:hover { - background-color: $background-color; - } - } -} -// Small device -@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) { - .pi-website-topbar-content { - // Center - &.pi-website-topbar-content__center { - height: $topbar-center-content-height; - min-height: $topbar-center-content-height; - overflow: auto; - - // Generic Scroll - &::-webkit-scrollbar { - width: var(--pi-spacing-xxx-small); - } - - &::-webkit-scrollbar-track { - box-shadow: none; - } - - &::-webkit-scrollbar-thumb { - border-radius: var(--pi-border-radius-small); - background-color: var(--pi-color-grey-75); - - &:hover { - background-color: var(--pi-color-grey-100); - transition: var(--pi-animation); - } - } - } - } -} - -@mixin smallDeviceMenuColor($border-color, $color) { - & > span { - border-color: $border-color; - & > span { - color: $color; - } - } -} - -.pi-website-footer-content { - &.pi-website-footer-content__top-right { - .pi-menu-event-item { - &:nth-child(2) { - .pi-menu__children { - .pi-text { - color: var(--pi-color-primary); - } - } - } - &:nth-child(3) { - .pi-menu__children { - .pi-text { - color: var(--pi-color-accent); - } - } - } - &:nth-child(4) { - .pi-menu__children { - .pi-text { - color: var(--pi-color-highlighted); - } - } - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include smallDevieMenuSize; - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - .pi-website-topbar-content { - // Center - &.pi-website-topbar-content__center { - .pi-menu { - // Parent - &.pi-menu__parent { - & > nav { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-xx-large); - padding-bottom: var(--pi-spacing-xx-large); - .pi-menu-event-item { - &.has-children { - & > span { - display: flex; - width: -webkit-fill-available; - border-bottom: 1px solid; - padding-bottom: var(--pi-spacing-xxx-small); - - & > span { - padding-left: var(--pi-spacing-xx-small); - font: { - size: var(--pi-font-size-x-small); - } - } - } - // Company - &:nth-child(1) { - @include smallDeviceMenuColor( - var(--pi-color-primary-100), - var(--pi-color-primary) - ); - } - // Investor - &:nth-child(2) { - @include smallDeviceMenuColor( - var(--pi-color-accent-100), - var(--pi-color-accent) - ); - } - // Advisor - &:nth-child(3) { - @include smallDeviceMenuColor( - var(--pi-color-highlighted-100), - var(--pi-color-highlighted) - ); - } - } - } - } - } - - // Children - &.pi-menu__children { - .pi-list-item { - padding-top: var(--pi-spacing-small); - padding-bottom: var(--pi-spacing-small); - &:nth-child(n + 2) { - padding-left: var(--pi-spacing-x-large); - .pi-list-item-content { - &.pi-list-item-content__left { - & > span { - &:nth-child(1) { - color: var(--pi-color-grey); - font: { - weight: 600; - } - } - } - } - } - } - } - .pi-list-item-content { - &.pi-list-item-content__left { - & > span { - &:nth-child(2) { - color: var(--pi-color-grey-300); - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } - } - } - } - } - } - - // Tablet - &.is-tablet { - &.is-tablet__small { - @include smallDevieMenuSize(calc(100vh - 11.5rem)); - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - .pi-shell__deale-website { - // Topbar - .pi-website-topbar { - .pi-menu { - .pi-menu-event-item { - @include topbarParentMenuItemLargeDevice; - } - // Parent - &.pi-menu__parent { - & > nav { - display: flex; - gap: var(--pi-spacing-medium); - } - .pi-menu-event-item { - &.has-children { - &:not(.is-selected) { - .pi-menu__children { - opacity: 0; - transform: scale(0); - } - } - &.is-selected { - .pi-menu__children { - opacity: 1; - transform: scale(1); - } - } - } - } - } - - // Child - &.pi-menu__children { - & > div, - & > aside { - // Menu items - & > div { - & > span { - display: flex; - align-items: center; - gap: var(--pi-spacing-xxx-small); - } - } - } - // Child menu - & > div { - padding: var(--pi-spacing-medium); - border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; - // Child Menu items - & > div { - & > span { - display: flex; - align-items: center; - gap: var(--pi-spacing-xxx-small); - } - } - } - // Aside menu - & > aside { - display: flex; - justify-content: space-between; - - width: 100%; - padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large) - var(--pi-spacing-medium); - border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); - // Aside Menu items - & > div { - & > span { - display: flex; - align-items: center; - gap: var(--pi-spacing-xxx-small); - } - } - } - } - } - - .pi-website-topbar-content { - // Center - &.pi-website-topbar-content__center { - .pi-menu { - &.pi-menu__parent { - & > nav { - & > .pi-menu-event-item { - // Company - &:nth-child(1) { - @include largeDeviceChildMenu(-18.75rem, var(--pi-color-primary-25)); - @include largeDeviceChildMenuItemColor(var(--pi-color-primary-25)); - } - // Investor - &:nth-child(2) { - @include largeDeviceChildMenu(-14.125rem, var(--pi-color-accent-25)); - @include largeDeviceChildMenuItemColor(var(--pi-color-accent-25)); - } - // Advisor - &:nth-child(3) { - @include largeDeviceChildMenu(-14.625rem, var(--pi-color-highlighted-25)); - @include largeDeviceChildMenuItemColor(var(--pi-color-highlighted-25)); - } - } - } - } - } - } - // Right - &.pi-website-topbar-content__right { - display: flex; - justify-content: flex-end; - align-items: center; - gap: var(--pi-spacing-medium); - @include largeDeviceChildMenu(-100px, unset, 1fr); - .pi-menu { - &:not(.pi-menu__children) { - & > nav { - & > .pi-menu-event-item { - @include topbarParentMenuItemLargeDevice; - - // Prices - &:nth-of-type(1) { - .pi-menu__children { - & > div { - .pi-list-item { - &:hover { - // Company Pricing - &:nth-child(1) { - color: var(--pi-color-primary); - background-color: var(--pi-color-primary-25); - } - // Investor Pricing - &:nth-child(2) { - color: var(--pi-color-accent); - background-color: var(--pi-color-accent-25); - } - // Advisor Pricing - &:nth-child(3) { - color: var(--pi-color-highlighted); - background-color: var(--pi-color-highlighted-25); - } - } - } - } - } - } - } - } - } - } - - // Login - .pi-button__type--menu-item { - &.pi-button__action { - display: flex; - justify-content: center; - align-items: center; - height: 2.25rem; - width: 7rem; - border-radius: var(--pi-border-radius-medium); - - @include topbarParentMenuItemLargeDevice; - & > span { - padding-bottom: 0.1875rem; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-background-clip: text; - -moz-text-fill-color: transparent; - - font: { - weight: 400; - } - } - - position: relative; - transition: all 0.45s ease-Out; - } - } - } - } - } - } - } - } - // LargeDevice - &.is-desktop { - } -} +@keyframes pulse { + to { + box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent; + } +} + +@keyframes gradient { + 0% { + background-position: 0%; + } + 25% { + background-position: 25%; + } + 50% { + background-position: 50%; + } + 75% { + background-position: 75%; + } + 100% { + background-position: 100%; + } +} + +@mixin topbarParentMenuItemLargeDevice { + border: 0.0625rem solid; + border-radius: var(--pi-border-radius-medium); + transition: 0.4s all ease-in-out; + animation: pulse 1.5s infinite 2s ease-in; + &:hover { + cursor: pointer; + animation: unset; + &::before { + height: 2.75rem; + width: 6rem; + margin-top: -0.125rem; + margin-left: -0.125rem; + opacity: 1; + filter: blur(0.1rem); + } + } + &::before { + content: ''; + position: absolute; + transition: all 0.3s ease; + border-radius: 0.75rem; + opacity: 0; + height: 0; + width: 0; + margin-top: 1.1875rem; + margin-left: 2.8125rem; + } + & > span { + & > span { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 2.25rem; + width: 6rem; + padding-bottom: 0.05rem; + background-size: 100%; + background-repeat: repeat; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-background-clip: text; + -moz-text-fill-color: transparent; + transition: all 0.45s ease-Out; + + font: { + weight: 400; + } + } + } +} + +@mixin largeDeviceChildMenu( + $margin-left, + $background-color, + $grid-template-columns: repeat(2, 1fr) +) { + // Menu item + .pi-menu__children { + z-index: 99; + position: absolute; + margin-top: var(--pi-spacing-large); + margin-left: $margin-left; + border-radius: var(--pi-border-radius-large); + background-color: var(--pi-color-white); + box-shadow: var(--pi-box-shadow-double); + & > div { + display: grid; + grid-template-columns: $grid-template-columns; + gap: var(--pi-spacing-medium); + } + + & > aside { + background-color: $background-color; + } + + // Submenu entry + .pi-list-item { + min-width: 15.625rem; + &:not(:hover) { + .pi-list-item-content { + &.pi-list-item-content__left { + & > span { + // + &:nth-child(1) { + color: var(--pi-color-black); + } + &:nth-child(2) { + color: var(--pi-color-grey-300); + } + } + } + } + } + &:hover { + cursor: pointer; + } + } + } +} + +@mixin largeDeviceChildMenuItemColor($background-color) { + // Submenu entry + .pi-list-item { + &:hover { + background-color: $background-color; + } + } +} +// Small device +@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) { + .pi-website-topbar-content { + // Center + &.pi-website-topbar-content__center { + height: $topbar-center-content-height; + min-height: $topbar-center-content-height; + overflow: auto; + + // Generic Scroll + &::-webkit-scrollbar { + width: var(--pi-spacing-xxx-small); + } + + &::-webkit-scrollbar-track { + box-shadow: none; + } + + &::-webkit-scrollbar-thumb { + border-radius: var(--pi-border-radius-small); + background-color: var(--pi-color-grey-75); + + &:hover { + background-color: var(--pi-color-grey-100); + transition: var(--pi-animation); + } + } + } + } +} + +@mixin smallDeviceMenuColor($border-color, $color) { + & > span { + border-color: $border-color; + & > span { + color: $color; + } + } +} + +.pi-website-footer-content { + &.pi-website-footer-content__top-right { + .pi-menu-event-item { + &:nth-child(2) { + .pi-menu__children { + .pi-text { + color: var(--pi-color-primary); + } + } + } + &:nth-child(3) { + .pi-menu__children { + .pi-text { + color: var(--pi-color-accent); + } + } + } + &:nth-child(4) { + .pi-menu__children { + .pi-text { + color: var(--pi-color-highlighted); + } + } + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include smallDevieMenuSize; + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + .pi-website-topbar-content { + // Center + &.pi-website-topbar-content__center { + .pi-menu { + // Parent + &.pi-menu__parent { + & > nav { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-xx-large); + padding-bottom: var(--pi-spacing-xx-large); + .pi-menu-event-item { + &.has-children { + & > span { + display: flex; + width: -webkit-fill-available; + border-bottom: 1px solid; + padding-bottom: var(--pi-spacing-xxx-small); + + & > span { + padding-left: var(--pi-spacing-xx-small); + font: { + size: var(--pi-font-size-x-small); + } + } + } + // Company + &:nth-child(1) { + @include smallDeviceMenuColor( + var(--pi-color-primary-100), + var(--pi-color-primary) + ); + } + // Investor + &:nth-child(2) { + @include smallDeviceMenuColor( + var(--pi-color-accent-100), + var(--pi-color-accent) + ); + } + // Advisor + &:nth-child(3) { + @include smallDeviceMenuColor( + var(--pi-color-highlighted-100), + var(--pi-color-highlighted) + ); + } + } + } + } + } + + // Children + &.pi-menu__children { + .pi-list-item { + padding-top: var(--pi-spacing-small); + padding-bottom: var(--pi-spacing-small); + &:nth-child(n + 2) { + padding-left: var(--pi-spacing-x-large); + .pi-list-item-content { + &.pi-list-item-content__left { + & > span { + &:nth-child(1) { + color: var(--pi-color-grey); + font: { + weight: 600; + } + } + } + } + } + } + } + .pi-list-item-content { + &.pi-list-item-content__left { + & > span { + &:nth-child(2) { + color: var(--pi-color-grey-300); + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } + } + } + } + } + } + + // Tablet + &.is-tablet { + &.is-tablet__small { + @include smallDevieMenuSize(calc(100vh - 11.5rem)); + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + .pi-shell__deale-website { + // Topbar + .pi-website-topbar { + .pi-menu { + .pi-menu-event-item { + @include topbarParentMenuItemLargeDevice; + } + // Parent + &.pi-menu__parent { + & > nav { + display: flex; + gap: var(--pi-spacing-medium); + } + .pi-menu-event-item { + &.has-children { + &:not(.is-selected) { + .pi-menu__children { + opacity: 0; + transform: scale(0); + } + } + &.is-selected { + .pi-menu__children { + opacity: 1; + transform: scale(1); + } + } + } + } + } + + // Child + &.pi-menu__children { + & > div, + & > aside { + // Menu items + & > div { + & > span { + display: flex; + align-items: center; + gap: var(--pi-spacing-xxx-small); + } + } + } + // Child menu + & > div { + padding: var(--pi-spacing-medium); + border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0; + // Child Menu items + & > div { + & > span { + display: flex; + align-items: center; + gap: var(--pi-spacing-xxx-small); + } + } + } + // Aside menu + & > aside { + display: flex; + justify-content: space-between; + + width: 100%; + padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large) + var(--pi-spacing-medium); + border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large); + // Aside Menu items + & > div { + & > span { + display: flex; + align-items: center; + gap: var(--pi-spacing-xxx-small); + } + } + } + } + } + + .pi-website-topbar-content { + // Center + &.pi-website-topbar-content__center { + .pi-menu { + &.pi-menu__parent { + & > nav { + & > .pi-menu-event-item { + // Company + &:nth-child(1) { + @include largeDeviceChildMenu(-18.75rem, var(--pi-color-primary-25)); + @include largeDeviceChildMenuItemColor(var(--pi-color-primary-25)); + } + // Investor + &:nth-child(2) { + @include largeDeviceChildMenu(-14.125rem, var(--pi-color-accent-25)); + @include largeDeviceChildMenuItemColor(var(--pi-color-accent-25)); + } + // Advisor + &:nth-child(3) { + @include largeDeviceChildMenu(-14.625rem, var(--pi-color-highlighted-25)); + @include largeDeviceChildMenuItemColor(var(--pi-color-highlighted-25)); + } + } + } + } + } + } + // Right + &.pi-website-topbar-content__right { + display: flex; + justify-content: flex-end; + align-items: center; + gap: var(--pi-spacing-medium); + @include largeDeviceChildMenu(-100px, unset, 1fr); + .pi-menu { + &:not(.pi-menu__children) { + & > nav { + & > .pi-menu-event-item { + @include topbarParentMenuItemLargeDevice; + + // Prices + &:nth-of-type(1) { + .pi-menu__children { + & > div { + .pi-list-item { + &:hover { + // Company Pricing + &:nth-child(1) { + color: var(--pi-color-primary); + background-color: var(--pi-color-primary-25); + } + // Investor Pricing + &:nth-child(2) { + color: var(--pi-color-accent); + background-color: var(--pi-color-accent-25); + } + // Advisor Pricing + &:nth-child(3) { + color: var(--pi-color-highlighted); + background-color: var(--pi-color-highlighted-25); + } + } + } + } + } + } + } + } + } + } + + // Login + .pi-button__type--menu-item { + &.pi-button__action { + display: flex; + justify-content: center; + align-items: center; + height: 2.25rem; + width: 7rem; + border-radius: var(--pi-border-radius-medium); + + @include topbarParentMenuItemLargeDevice; + & > span { + padding-bottom: 0.1875rem; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-background-clip: text; + -moz-text-fill-color: transparent; + + font: { + weight: 400; + } + } + + position: relative; + transition: all 0.45s ease-Out; + } + } + } + } + } + } + } + } + // LargeDevice + &.is-desktop { + } +} diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss index 7bb76f8..169add4 100644 --- a/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss +++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss @@ -1,324 +1,324 @@ -@mixin topbarCommonSizes( - $height: var(--pi-public-height-header-mobile), - $max-width: calc(100% - var(--pi-spacing-xx-large)), - $small-size: -webkit-fill-available, - $large-size: calc(100% - var(--pi-spacing-xxx-small)) -) { - .pi-website-topbar { - & > header { - height: $height; - max-width: $max-width; - margin: 0 auto; - - .pi-website-topbar-content { - // Left - &.pi-website-topbar-content__left { - width: $small-size; - } - // Center - &.pi-website-topbar-content__center { - width: $large-size; - } - // Right - &.pi-website-topbar-content__right { - width: $small-size; - } - } - } - } -} - -@mixin logoSize($max-width: 7.125rem) { - .pi-website-topbar { - .pi-website-topbar-content { - &.pi-website-topbar-content__left { - & > .pi-headline { - max-width: $max-width; - &:hover { - cursor: pointer; - } - } - } - } - } -} -// Topbar menu is closed -@mixin smallDeviceTopbarMenuIsClosed { - .pi-shell { - &.pi-shell__deale-website { - & > div { - // Is Open - &:not(.is-menu-open) { - .pi-website-topbar { - top: 0; - left: 0; - height: var(--pi-public-height-header-mobile); - width: -webkit-fill-available; - padding: 0; - border-radius: var(--pi-border-radius-large); - .pi-website-topbar-content { - // Center - &.pi-website-topbar-content__center { - transform: scale(0); - opacity: 0; - } - // Right - &.pi-website-topbar-content__right { - display: flex; - flex-direction: row-reverse; - gap: var(--pi-spacing-x-small); - } - } - } - } - } - } - } -} - -// Ope topbar menu -@mixin smallDeviceTopbarMenuIsOpen( - $side-spacing: var(--pi-spacing-medium), - $height: calc(100vh - var(--pi-spacing-xx-large)), - $width: calc(100% - var(--pi-spacing-xx-large)) -) { - .pi-shell { - &.pi-shell__deale-website { - & > div { - // Is Open - &.is-menu-open { - .pi-website-topbar { - position: fixed; - top: $side-spacing; - left: $side-spacing; - z-index: 99; - height: $height; - width: $width; - border-radius: var(--pi-border-radius-large); - background-color: var(--pi-color-white); - box-shadow: var(--pi-box-shadow-double); - - .pi-close-button { - position: absolute; - top: var(--pi-spacing-large); - right: var(--pi-spacing-x-large); - } - & > header { - flex-direction: column; - gap: var(--pi-spacing-xxxx-small); - } - .pi-website-topbar-content { - padding-left: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)); - padding-right: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)); - // Left (=== top) - &.pi-website-topbar-content__left { - padding-top: var(--pi-spacing-large); - padding-bottom: var(--pi-spacing-large); - } - // Center - &.pi-website-topbar-content__center { - width: calc(100% - var(--pi-spacing-xx-small)); - margin: 0 auto; - transform: scale(1); - opacity: 1; - } - // Right (=== bottom) - &.pi-website-topbar-content__right { - padding-bottom: var(--pi-spacing-large); - .pi-button__action { - &.pi-button__type--menu-item { - height: var(--pi-spacing-xxx-large); - min-width: var(--pi-spacing-xxx-large); - width: -webkit-fill-available; - border-radius: var(--pi-border-radius-medium); - -webkit-border-radius: var(--pi-border-radius-medium); - -moz-border-radius: var(--pi-border-radius-medium); - color: var(--pi-color-white); - background-image: var(--pi-gradient-primary-dark); - font: { - weight: 400; - } - } - } - } - } - } - } - } - } - } -} - -.pi-website-topbar { - position: absolute; - z-index: 99; - width: -webkit-fill-available; - background-color: transparent; - & > header { - display: flex; - justify-content: space-between; - } -} - -.pi-shell { - &.pi-shell__deale-website { - & > div { - // Is Closed - &:not(.is-menu-open) { - width: -webkit-fill-available; - } - } - } -} - -html { - // Mobile - &.is-mobile { - @include smallDeviceTopbarMenuIsOpen; - .pi-shell { - &.pi-shell__deale-website { - & > div { - // Is Closed - &:not(.is-menu-open) { - @include logoSize; - @include topbarCommonSizes; - } - // Is Open - &.is-menu-open { - @include logoSize(6.625rem); - @include topbarCommonSizes( - var(--pi-public-height-header-mobile), - -webkit-fill-available - ); - } - } - } - } - } - // Tablet - &.is-tablet { - // Tablet S - &.is-tablet__small { - @include smallDeviceTopbarMenuIsOpen( - var(--pi-spacing-x-large), - calc(100vh - 3rem), - calc(100% - 3rem) - ); - .pi-shell { - &.pi-shell__deale-website { - & > div { - // Is Closed - &:not(.is-menu-open) { - @include logoSize(7.5rem); - @include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem)); - } - - // Is Open - &.is-menu-open { - @include logoSize(7.125rem); - @include topbarCommonSizes( - var(--pi-public-height-header-mobile), - -webkit-fill-available - ); - } - } - } - } - } - // Tablet L - &.is-tablet__large { - @include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem)); - @include logoSize(8.4375rem); - } - } - - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - // Closded menu has equal properties for Mobile & Tablet S - @include smallDeviceTopbarMenuIsClosed; - .pi-shell { - &.pi-shell__deale-website { - .pi-website-topbar { - & > header { - align-items: center; - } - } - - // Override right content buttons - button { - &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( - .pi-button__type--menu-item - ).pi-color__white { - border-color: var(--pi-color-primary-100); - background-color: rgba(255, 255, 255, 0.7); - background-image: unset; - &:hover { - border-color: var(--pi-color-primary-200); - background-color: rgba(255, 255, 255, 0.9); - .mat-icon { - color: var(--pi-color-primary); - } - } - } - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large Device - @media screen and (min-width: 62rem) { - .pi-website-topbar { - & > header { - align-items: flex-end; - } - } - } - } - // Desktop - &.is-desktop { - .pi-website-topbar-content { - display: flex; - // Center - &.pi-website-topbar-content__center { - justify-content: center; - } - // Right - &.pi-website-topbar-content__right { - justify-content: flex-end; - } - } - @include logoSize(8.75rem); - // Desktop S - &.is-desktop__small { - @include topbarCommonSizes( - var(--pi-public-height-header-desktop), - var(--pi-public-width-container), - 30%, - 40% - ); - } - - // Desktop S & M - &:not(.is-desktop__large) { - @include topbarCommonSizes( - var(--pi-public-height-header-desktop), - var(--pi-public-width-container), - 30%, - 40% - ); - } - // Desktop L - &.is-desktop__large { - @include topbarCommonSizes( - var(--pi-public-height-header-desktop), - var(--pi-public-width-container-l), - 30%, - 40% - ); - } - } -} +@mixin topbarCommonSizes( + $height: var(--pi-public-height-header-mobile), + $max-width: calc(100% - var(--pi-spacing-xx-large)), + $small-size: -webkit-fill-available, + $large-size: calc(100% - var(--pi-spacing-xxx-small)) +) { + .pi-website-topbar { + & > header { + height: $height; + max-width: $max-width; + margin: 0 auto; + + .pi-website-topbar-content { + // Left + &.pi-website-topbar-content__left { + width: $small-size; + } + // Center + &.pi-website-topbar-content__center { + width: $large-size; + } + // Right + &.pi-website-topbar-content__right { + width: $small-size; + } + } + } + } +} + +@mixin logoSize($max-width: 7.125rem) { + .pi-website-topbar { + .pi-website-topbar-content { + &.pi-website-topbar-content__left { + & > .pi-headline { + max-width: $max-width; + &:hover { + cursor: pointer; + } + } + } + } + } +} +// Topbar menu is closed +@mixin smallDeviceTopbarMenuIsClosed { + .pi-shell { + &.pi-shell__deale-website { + & > div { + // Is Open + &:not(.is-menu-open) { + .pi-website-topbar { + top: 0; + left: 0; + height: var(--pi-public-height-header-mobile); + width: -webkit-fill-available; + padding: 0; + border-radius: var(--pi-border-radius-large); + .pi-website-topbar-content { + // Center + &.pi-website-topbar-content__center { + transform: scale(0); + opacity: 0; + } + // Right + &.pi-website-topbar-content__right { + display: flex; + flex-direction: row-reverse; + gap: var(--pi-spacing-x-small); + } + } + } + } + } + } + } +} + +// Ope topbar menu +@mixin smallDeviceTopbarMenuIsOpen( + $side-spacing: var(--pi-spacing-medium), + $height: calc(100vh - var(--pi-spacing-xx-large)), + $width: calc(100% - var(--pi-spacing-xx-large)) +) { + .pi-shell { + &.pi-shell__deale-website { + & > div { + // Is Open + &.is-menu-open { + .pi-website-topbar { + position: fixed; + top: $side-spacing; + left: $side-spacing; + z-index: 99; + height: $height; + width: $width; + border-radius: var(--pi-border-radius-large); + background-color: var(--pi-color-white); + box-shadow: var(--pi-box-shadow-double); + + .pi-close-button { + position: absolute; + top: var(--pi-spacing-large); + right: var(--pi-spacing-x-large); + } + & > header { + flex-direction: column; + gap: var(--pi-spacing-xxxx-small); + } + .pi-website-topbar-content { + padding-left: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)); + padding-right: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)); + // Left (=== top) + &.pi-website-topbar-content__left { + padding-top: var(--pi-spacing-large); + padding-bottom: var(--pi-spacing-large); + } + // Center + &.pi-website-topbar-content__center { + width: calc(100% - var(--pi-spacing-xx-small)); + margin: 0 auto; + transform: scale(1); + opacity: 1; + } + // Right (=== bottom) + &.pi-website-topbar-content__right { + padding-bottom: var(--pi-spacing-large); + .pi-button__action { + &.pi-button__type--menu-item { + height: var(--pi-spacing-xxx-large); + min-width: var(--pi-spacing-xxx-large); + width: -webkit-fill-available; + border-radius: var(--pi-border-radius-medium); + -webkit-border-radius: var(--pi-border-radius-medium); + -moz-border-radius: var(--pi-border-radius-medium); + color: var(--pi-color-white); + background-image: var(--pi-gradient-primary-dark); + font: { + weight: 400; + } + } + } + } + } + } + } + } + } + } +} + +.pi-website-topbar { + position: absolute; + z-index: 99; + width: -webkit-fill-available; + background-color: transparent; + & > header { + display: flex; + justify-content: space-between; + } +} + +.pi-shell { + &.pi-shell__deale-website { + & > div { + // Is Closed + &:not(.is-menu-open) { + width: -webkit-fill-available; + } + } + } +} + +html { + // Mobile + &.is-mobile { + @include smallDeviceTopbarMenuIsOpen; + .pi-shell { + &.pi-shell__deale-website { + & > div { + // Is Closed + &:not(.is-menu-open) { + @include logoSize; + @include topbarCommonSizes; + } + // Is Open + &.is-menu-open { + @include logoSize(6.625rem); + @include topbarCommonSizes( + var(--pi-public-height-header-mobile), + -webkit-fill-available + ); + } + } + } + } + } + // Tablet + &.is-tablet { + // Tablet S + &.is-tablet__small { + @include smallDeviceTopbarMenuIsOpen( + var(--pi-spacing-x-large), + calc(100vh - 3rem), + calc(100% - 3rem) + ); + .pi-shell { + &.pi-shell__deale-website { + & > div { + // Is Closed + &:not(.is-menu-open) { + @include logoSize(7.5rem); + @include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem)); + } + + // Is Open + &.is-menu-open { + @include logoSize(7.125rem); + @include topbarCommonSizes( + var(--pi-public-height-header-mobile), + -webkit-fill-available + ); + } + } + } + } + } + // Tablet L + &.is-tablet__large { + @include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem)); + @include logoSize(8.4375rem); + } + } + + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + // Closded menu has equal properties for Mobile & Tablet S + @include smallDeviceTopbarMenuIsClosed; + .pi-shell { + &.pi-shell__deale-website { + .pi-website-topbar { + & > header { + align-items: center; + } + } + + // Override right content buttons + button { + &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not( + .pi-button__type--menu-item + ).pi-color__white { + border-color: var(--pi-color-primary-100); + background-color: rgba(255, 255, 255, 0.7); + background-image: unset; + &:hover { + border-color: var(--pi-color-primary-200); + background-color: rgba(255, 255, 255, 0.9); + .mat-icon { + color: var(--pi-color-primary); + } + } + } + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large Device + @media screen and (min-width: 62rem) { + .pi-website-topbar { + & > header { + align-items: flex-end; + } + } + } + } + // Desktop + &.is-desktop { + .pi-website-topbar-content { + display: flex; + // Center + &.pi-website-topbar-content__center { + justify-content: center; + } + // Right + &.pi-website-topbar-content__right { + justify-content: flex-end; + } + } + @include logoSize(8.75rem); + // Desktop S + &.is-desktop__small { + @include topbarCommonSizes( + var(--pi-public-height-header-desktop), + var(--pi-public-width-container), + 30%, + 40% + ); + } + + // Desktop S & M + &:not(.is-desktop__large) { + @include topbarCommonSizes( + var(--pi-public-height-header-desktop), + var(--pi-public-width-container), + 30%, + 40% + ); + } + // Desktop L + &.is-desktop__large { + @include topbarCommonSizes( + var(--pi-public-height-header-desktop), + var(--pi-public-width-container-l), + 30%, + 40% + ); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/shell/index.scss b/libs/ui/src/lib/styles/deale-website/shell/index.scss index 836cf84..074b770 100644 --- a/libs/ui/src/lib/styles/deale-website/shell/index.scss +++ b/libs/ui/src/lib/styles/deale-website/shell/index.scss @@ -1,5 +1,5 @@ -@forward 'pi-footer'; -@forward 'pi-main'; -@forward 'pi-menu'; -@forward 'pi-menu-theming'; -@forward 'pi-topbar'; +@forward 'pi-footer'; +@forward 'pi-main'; +@forward 'pi-menu'; +@forward 'pi-menu-theming'; +@forward 'pi-topbar'; diff --git a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss index f2f0b3b..434fc52 100644 --- a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss +++ b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss @@ -1,62 +1,62 @@ -.pi-shell__deale-website { - .pi-wrapper { - &.pi-wrapper__form { - // Vertically behavior - & > form { - & > fieldset { - & > label { - &.pi-text__size--x-small { - padding-left: var(--pi-spacing-x-small); - padding-bottom: var(--pi-spacing-xxx-small); - } - } - .pi-panel { - margin-bottom: var(--pi-spacing-x-small); - border: 1px solid var(--pi-color-grey-75); - } - } - } - .pi-list-item + .pi-list-item { - margin-top: unset; - } - } - } - .pi-website-contact-form { - .pi-panel__padding--m { - padding: var(--pi-spacing-xx-small) var(--pi-spacing-medium); - } - } -} - -html { - // Mobile - &.is-mobile { - .pi-shell__deale-website { - .pi-wrapper { - &.pi-wrapper__form { - // Vertically behavior - & > form { - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-large); - } - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - .pi-shell__deale-website { - .pi-wrapper { - &.pi-wrapper__form { - // Vertically behavior - & > form { - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-xxx-small); - } - } - } - } - } - } -} +.pi-shell__deale-website { + .pi-wrapper { + &.pi-wrapper__form { + // Vertically behavior + & > form { + & > fieldset { + & > label { + &.pi-text__size--x-small { + padding-left: var(--pi-spacing-x-small); + padding-bottom: var(--pi-spacing-xxx-small); + } + } + .pi-panel { + margin-bottom: var(--pi-spacing-x-small); + border: 1px solid var(--pi-color-grey-75); + } + } + } + .pi-list-item + .pi-list-item { + margin-top: unset; + } + } + } + .pi-website-contact-form { + .pi-panel__padding--m { + padding: var(--pi-spacing-xx-small) var(--pi-spacing-medium); + } + } +} + +html { + // Mobile + &.is-mobile { + .pi-shell__deale-website { + .pi-wrapper { + &.pi-wrapper__form { + // Vertically behavior + & > form { + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-large); + } + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + .pi-shell__deale-website { + .pi-wrapper { + &.pi-wrapper__form { + // Vertically behavior + & > form { + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-xxx-small); + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss index 53e3f17..40e4f09 100644 --- a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss +++ b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss @@ -1,11 +1,11 @@ -.pi-wrapper { - // Header Wrapper - &.pi-wrapper__header { - // Flex direction - &.pi-wrapper__flex-direction--column { - .pi-header-wrapper-content { - gap: var(--pi-spacing-medium); - } - } - } -} +.pi-wrapper { + // Header Wrapper + &.pi-wrapper__header { + // Flex direction + &.pi-wrapper__flex-direction--column { + .pi-header-wrapper-content { + gap: var(--pi-spacing-medium); + } + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss index d325ba2..3249eef 100644 --- a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss +++ b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss @@ -1,30 +1,30 @@ -@mixin dealeWebsiteWrapperMaxWidth($max-width: calc(100% - var(--pi-spacing-xx-large))) { - .pi-shell__deale-website { - .pi-wrapper { - // Max width - &.pi-wrapper__full-width, - &.pi-wrapper__full-width-centered { - max-width: $max-width; - } - } - } -} - -html { - &.is-mobile { - @include dealeWebsiteWrapperMaxWidth; - } - &.is-tablet { - @include dealeWebsiteWrapperMaxWidth(calc(100% - 3rem)); - } - &.is-desktop { - // Desktop S & M - &:not(.is-desktop__large) { - @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container)); - } - // Desktop L - &.is-desktop__large { - @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container-l)); - } - } -} +@mixin dealeWebsiteWrapperMaxWidth($max-width: calc(100% - var(--pi-spacing-xx-large))) { + .pi-shell__deale-website { + .pi-wrapper { + // Max width + &.pi-wrapper__full-width, + &.pi-wrapper__full-width-centered { + max-width: $max-width; + } + } + } +} + +html { + &.is-mobile { + @include dealeWebsiteWrapperMaxWidth; + } + &.is-tablet { + @include dealeWebsiteWrapperMaxWidth(calc(100% - 3rem)); + } + &.is-desktop { + // Desktop S & M + &:not(.is-desktop__large) { + @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container)); + } + // Desktop L + &.is-desktop__large { + @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container-l)); + } + } +} diff --git a/libs/ui/src/lib/styles/deale-website/wrappers/index.scss b/libs/ui/src/lib/styles/deale-website/wrappers/index.scss index 5257df3..41853e0 100644 --- a/libs/ui/src/lib/styles/deale-website/wrappers/index.scss +++ b/libs/ui/src/lib/styles/deale-website/wrappers/index.scss @@ -1,3 +1,3 @@ -@forward 'pi-form-wrapper'; -@forward 'pi-header-wrapper'; -@forward 'pi-wrapper'; +@forward 'pi-form-wrapper'; +@forward 'pi-header-wrapper'; +@forward 'pi-wrapper'; diff --git a/libs/ui/src/lib/styles/definitions.ts b/libs/ui/src/lib/styles/definitions.ts index 4d17b19..fdcc215 100644 --- a/libs/ui/src/lib/styles/definitions.ts +++ b/libs/ui/src/lib/styles/definitions.ts @@ -1,167 +1,167 @@ -// Types -export type justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'; -export type grid = - | 'quarter' - | 'third' - | 'half' - | 'fifth' - | 'reverse-quarter' - | 'reverse-third' - | 'reverse-fifth' - | 'none'; -export type flexDirection = 'column' | 'column-reverse' | 'row' | 'row-reverse'; -export type alignment = 'flex-start' | 'center' | 'flex-end' | 'stretch'; -export type gap = - | 'xxxs' - | 'xxs' - | 'xs' - | 's' - | 'm' - | 'l' - | 'xl' - | 'xxl' - | 'xxxl' - | 'xxxxl' - | 'none'; -export type borderType = 'top' | 'bottom' | 'middle'; -export type borderRadius = 'small' | 'medium' | 'large'; - -export type display = 'inline' | 'flex' | 'grid'; -export type padding = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'none'; - -export type maxWidth = 'full-width' | 'full-width-auto' | 'edge-to-edge' | 'fit-content'; -export type itemsWidth = 'quarter' | 'third' | 'half' | 'full'; -// Fonts -export type fontSize = - | 'xxs' - | 'xs' - | 's' - | 'm' - | 'l' - | 'xl' - | 'xxl' - | 'xxxl' - | 'xs-m' - | 'xs-l' - | 'xl-m' - | 'xl-s' - | 'xxl-m' - | 'xxl-s' - | 's-xxl' - | 'm-xxl' - | 'xl-xs' - | 'm-xs' - | 'm-xl' - | 's-l' - | 's-xl' - | 's-xs' - | 's-xxs' - | 'xs-s' - | 'xs-xxs' - | 'xxs-s' - | 'xxs-xs' - | 'xs-xl' - | 'l-xs' - | 'l-s' - | 'xxxl-xs' - | 'xs-xxxl' - | 'xxxl-s' - | 's-xxxl' - | 'xxxl-m' - | 'm-xxxl' - | 'xxxl-l' - | 'l-xxxl' - | 'xxxl-xl' - | 'xl-xxxl' - | 'xxxl-xxl' - | 'xxl-xxxl'; - -export type fontStyle = 'normal' | 'italic' | 'normal-italic' | 'italic-normal'; -export type fontWeight = - | '300' - | '400' - | '600' - | '700' - | '800' - | '300-400' - | '300-600' - | '300-700' - | '300-800' - | '400-300' - | '400-700' - | '400-800' - | '600-300' - | '700-300' - | '700-400' - | '800-400'; - -export type animation = 'horizontally' | 'vertically' | 'clickable'; - -// Wrappers - -// Data Table cell -export type textStyle = 'regular' | 'bold' | 'italic' | 'indent'; - -// Buttons -export type buttonStyle = 'fill' | 'ghost' | 'outline'; - -export type buttonSize = 'x-small' | 'small' | 'medium' | 'large' | 'w100'; - -// Icons -export type iconSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large'; - -// Color -export type styleType = - | 'primary' - | 'accent' - | 'warn' - | 'success' - | 'white' - | 'black' - | 'grey' - | 'highlighted'; - -export type theming = 'grey' | 'primary' | 'accent' | 'highlighted'; - -// Mode -export type mode = 'light' | 'dark'; - -// Opacity -export type opacity = '20' | '40' | '60' | '80' | '100'; - -// Density -export type density = - | '10' - | '25' - | '50' - | '75' - | '100' - | '200' - | '300' - | '400' - | '500' - | '900' - | ''; - -export type textColor = - | 'primary' - | 'accent' - | 'warn' - | 'success' - | 'white' - | 'black' - | 'dark' - | 'grey' - | 'highlighted' - | 'black-primary' - | 'primary-black' - | 'black-accent' - | 'accent-black' - | 'dark-black' - | 'black-dark' - | 'grey-black' - | 'black-grey' - | 'highlighted-grey' - | 'grey-highlighted'; -// Context -export type context = 'public' | 'private'; +// Types +export type justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'; +export type grid = + | 'quarter' + | 'third' + | 'half' + | 'fifth' + | 'reverse-quarter' + | 'reverse-third' + | 'reverse-fifth' + | 'none'; +export type flexDirection = 'column' | 'column-reverse' | 'row' | 'row-reverse'; +export type alignment = 'flex-start' | 'center' | 'flex-end' | 'stretch'; +export type gap = + | 'xxxs' + | 'xxs' + | 'xs' + | 's' + | 'm' + | 'l' + | 'xl' + | 'xxl' + | 'xxxl' + | 'xxxxl' + | 'none'; +export type borderType = 'top' | 'bottom' | 'middle'; +export type borderRadius = 'small' | 'medium' | 'large'; + +export type display = 'inline' | 'flex' | 'grid'; +export type padding = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'none'; + +export type maxWidth = 'full-width' | 'full-width-auto' | 'edge-to-edge' | 'fit-content'; +export type itemsWidth = 'quarter' | 'third' | 'half' | 'full'; +// Fonts +export type fontSize = + | 'xxs' + | 'xs' + | 's' + | 'm' + | 'l' + | 'xl' + | 'xxl' + | 'xxxl' + | 'xs-m' + | 'xs-l' + | 'xl-m' + | 'xl-s' + | 'xxl-m' + | 'xxl-s' + | 's-xxl' + | 'm-xxl' + | 'xl-xs' + | 'm-xs' + | 'm-xl' + | 's-l' + | 's-xl' + | 's-xs' + | 's-xxs' + | 'xs-s' + | 'xs-xxs' + | 'xxs-s' + | 'xxs-xs' + | 'xs-xl' + | 'l-xs' + | 'l-s' + | 'xxxl-xs' + | 'xs-xxxl' + | 'xxxl-s' + | 's-xxxl' + | 'xxxl-m' + | 'm-xxxl' + | 'xxxl-l' + | 'l-xxxl' + | 'xxxl-xl' + | 'xl-xxxl' + | 'xxxl-xxl' + | 'xxl-xxxl'; + +export type fontStyle = 'normal' | 'italic' | 'normal-italic' | 'italic-normal'; +export type fontWeight = + | '300' + | '400' + | '600' + | '700' + | '800' + | '300-400' + | '300-600' + | '300-700' + | '300-800' + | '400-300' + | '400-700' + | '400-800' + | '600-300' + | '700-300' + | '700-400' + | '800-400'; + +export type animation = 'horizontally' | 'vertically' | 'clickable'; + +// Wrappers + +// Data Table cell +export type textStyle = 'regular' | 'bold' | 'italic' | 'indent'; + +// Buttons +export type buttonStyle = 'fill' | 'ghost' | 'outline'; + +export type buttonSize = 'x-small' | 'small' | 'medium' | 'large' | 'w100'; + +// Icons +export type iconSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large'; + +// Color +export type styleType = + | 'primary' + | 'accent' + | 'warn' + | 'success' + | 'white' + | 'black' + | 'grey' + | 'highlighted'; + +export type theming = 'grey' | 'primary' | 'accent' | 'highlighted'; + +// Mode +export type mode = 'light' | 'dark'; + +// Opacity +export type opacity = '20' | '40' | '60' | '80' | '100'; + +// Density +export type density = + | '10' + | '25' + | '50' + | '75' + | '100' + | '200' + | '300' + | '400' + | '500' + | '900' + | ''; + +export type textColor = + | 'primary' + | 'accent' + | 'warn' + | 'success' + | 'white' + | 'black' + | 'dark' + | 'grey' + | 'highlighted' + | 'black-primary' + | 'primary-black' + | 'black-accent' + | 'accent-black' + | 'dark-black' + | 'black-dark' + | 'grey-black' + | 'black-grey' + | 'highlighted-grey' + | 'grey-highlighted'; +// Context +export type context = 'public' | 'private'; diff --git a/libs/ui/src/lib/styles/index.ts b/libs/ui/src/lib/styles/index.ts index d214c8e..356bd52 100644 --- a/libs/ui/src/lib/styles/index.ts +++ b/libs/ui/src/lib/styles/index.ts @@ -1,5 +1,5 @@ -export * from './animations'; - -export * from './configs'; - -export * from './definitions'; +export * from './animations'; + +export * from './configs'; + +export * from './definitions'; diff --git a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html index 3d3a92f..4f0dd92 100644 --- a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html +++ b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html @@ -1,156 +1,156 @@ - - - - -
- -
- -
- - -
- - -
- - -
- -
- - -
- -
-
- - - - - - - - - - -
- - -
- - -
- -
-
- -
- -
-
- + + + + +
+ +
+ +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+
+ + + + + + + + + + +
+ + +
+ + +
+ +
+
+ +
+ +
+
+ diff --git a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts index 9ffe8ad..861f942 100644 --- a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts +++ b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts @@ -1,99 +1,99 @@ -import { - ChangeDetectionStrategy, - Component, - HostBinding, - input, - model, - contentChildren -} from '@angular/core'; -import { padding, styleType, textColor } from '../../../styles'; -import { PiAccordionItemDirective } from '../directives/accordion-content.directive'; -import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; -import { PiDynamicColorDirective } from '../../../util/color/directives/colors.directive'; -import { PiTextViewerComponent } from '../../text/text-viewer/text-viewer.component'; -import { PiChipStatusComponent } from '../../chip/chip-status/chip-status.component'; -import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; -import { PiIconComponent } from '../../icon/icon/icon.component'; -import { TranslatePipe } from '@ngx-translate/core'; - -@Component({ - selector: 'pi-accordion', - templateUrl: './accordion.component.html', - styleUrls: ['../styles/accordion.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ - NgIf, - NgFor, - PiDynamicColorDirective, - PiTextViewerComponent, - NgTemplateOutlet, - PiChipStatusComponent, - PiIconButtonComponent, - PiIconComponent, - TranslatePipe, - ], -}) -export class PiAccordionComponent { - @HostBinding('class') get classes(): string { - const colorClass = `pi-accordion__${this.color()}`; - const appearance = this.appearance(); - const appearanceClass = - appearance !== 'default' && `pi-accordion__appearance--${appearance}`; - const direction = this.direction(); - const directionClass = - direction !== 'default' && `pi-accordion__direction--${direction}`; - const paddingClass = `pi-accordion__padding--${this.padding()}`; - return ['pi-accordion', colorClass, appearanceClass, directionClass, paddingClass].join(' '); - } - - /** - * `model` en vez de `input` + output manual: el componente escribe este valor - * al plegar/desplegar. El evento `expandedItemIndexChange` que antes se - * declaraba a mano lo genera `model()` automáticamente. - * - * El tipo incluye `null` porque `toggleState` lo asigna al colapsar; antes - * estaba declarado como `number` y esa asignación no compilaba. - */ - readonly expandedItemIndex = model(null); - readonly appearance = input<'default' | 'outline' | 'fill'>('default'); - readonly color = input('white'); - readonly direction = input<'default' | 'horizontal'>('default'); - readonly hasForm = input(false); - readonly padding = input('m'); - - readonly hasChevron = input(true); - - readonly items = contentChildren(PiAccordionItemDirective); - - // `items` es una signal query: Angular reevalúa la plantilla cuando cambia, - // así que el ngAfterContentInit que sólo hacía markForCheck() sobra. - - toggleState = (item: PiAccordionItemDirective, index: number) => { - if (this.direction() === 'horizontal' && this.isItemExpanded(index)) return; - if (item.status() === 'disabled') return; - this.expandedItemIndex.set(this.expandedItemIndex() === index ? null : index); - }; - - isItemExpanded = (index: number) => this.expandedItemIndex() === index; - - setAccordionItemClasses(item: PiAccordionItemDirective, index: number): string { - const expandedClass = this.isItemExpanded(index) ? 'is-expanded' : 'is-collapsed'; - const status = item.status(); - const statusClass = status && 'has-status' + ' ' + `is-${status}`; - const isConfidentialClass = item.isConfidential() ? 'is-confidential' : ''; - return [expandedClass, statusClass, isConfidentialClass].join(' '); - } - - getHeaderTextColor(): textColor { - switch (this.color()) { - case 'primary': - return 'primary'; - case 'accent': - return 'accent'; - case 'warn': - return 'warn'; - default: - return 'black-grey'; - } - } -} +import { + ChangeDetectionStrategy, + Component, + HostBinding, + input, + model, + contentChildren +} from '@angular/core'; +import { padding, styleType, textColor } from '../../../styles'; +import { PiAccordionItemDirective } from '../directives/accordion-content.directive'; +import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; +import { PiDynamicColorDirective } from '../../../util/color/directives/colors.directive'; +import { PiTextViewerComponent } from '../../text/text-viewer/text-viewer.component'; +import { PiChipStatusComponent } from '../../chip/chip-status/chip-status.component'; +import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; +import { PiIconComponent } from '../../icon/icon/icon.component'; +import { TranslatePipe } from '@ngx-translate/core'; + +@Component({ + selector: 'pi-accordion', + templateUrl: './accordion.component.html', + styleUrls: ['../styles/accordion.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + NgIf, + NgFor, + PiDynamicColorDirective, + PiTextViewerComponent, + NgTemplateOutlet, + PiChipStatusComponent, + PiIconButtonComponent, + PiIconComponent, + TranslatePipe, + ], +}) +export class PiAccordionComponent { + @HostBinding('class') get classes(): string { + const colorClass = `pi-accordion__${this.color()}`; + const appearance = this.appearance(); + const appearanceClass = + appearance !== 'default' && `pi-accordion__appearance--${appearance}`; + const direction = this.direction(); + const directionClass = + direction !== 'default' && `pi-accordion__direction--${direction}`; + const paddingClass = `pi-accordion__padding--${this.padding()}`; + return ['pi-accordion', colorClass, appearanceClass, directionClass, paddingClass].join(' '); + } + + /** + * `model` en vez de `input` + output manual: el componente escribe este valor + * al plegar/desplegar. El evento `expandedItemIndexChange` que antes se + * declaraba a mano lo genera `model()` automáticamente. + * + * El tipo incluye `null` porque `toggleState` lo asigna al colapsar; antes + * estaba declarado como `number` y esa asignación no compilaba. + */ + readonly expandedItemIndex = model(null); + readonly appearance = input<'default' | 'outline' | 'fill'>('default'); + readonly color = input('white'); + readonly direction = input<'default' | 'horizontal'>('default'); + readonly hasForm = input(false); + readonly padding = input('m'); + + readonly hasChevron = input(true); + + readonly items = contentChildren(PiAccordionItemDirective); + + // `items` es una signal query: Angular reevalúa la plantilla cuando cambia, + // así que el ngAfterContentInit que sólo hacía markForCheck() sobra. + + toggleState = (item: PiAccordionItemDirective, index: number) => { + if (this.direction() === 'horizontal' && this.isItemExpanded(index)) return; + if (item.status() === 'disabled') return; + this.expandedItemIndex.set(this.expandedItemIndex() === index ? null : index); + }; + + isItemExpanded = (index: number) => this.expandedItemIndex() === index; + + setAccordionItemClasses(item: PiAccordionItemDirective, index: number): string { + const expandedClass = this.isItemExpanded(index) ? 'is-expanded' : 'is-collapsed'; + const status = item.status(); + const statusClass = status && 'has-status' + ' ' + `is-${status}`; + const isConfidentialClass = item.isConfidential() ? 'is-confidential' : ''; + return [expandedClass, statusClass, isConfidentialClass].join(' '); + } + + getHeaderTextColor(): textColor { + switch (this.color()) { + case 'primary': + return 'primary'; + case 'accent': + return 'accent'; + case 'warn': + return 'warn'; + default: + return 'black-grey'; + } + } +} diff --git a/libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts b/libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts index 0f9c862..4ea52af 100644 --- a/libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts +++ b/libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts @@ -5,58 +5,58 @@ import { TemplateRef, input, contentChild -} from '@angular/core'; -import { status } from '../../../util/status'; - -/** - * The accordion header is a separated content of the accordion items group. - * If it is needed it must be used as a Header for the whole accordion. - */ - -@Directive({ selector: 'pi-accordion-header', }) -export class PiAccordionHeaderDirective { - @HostBinding('class') className = 'pi-accordion-header'; -} - -/** - * The accordion contents ar parts of each accordion item. - */ - -// Accordion Item Header Content -@Directive({ selector: '[pi-accordion-item-header-content]', }) -export class PiAccordionItemHeaderDirective { - constructor(public templateRef: TemplateRef) {} -} -// Accordion Item Summary Content -@Directive({ selector: '[pi-accordion-item-summary-content]', }) -export class PiAccordionSummaryContentDirective { - constructor(public templateRef: TemplateRef) {} -} - -// Accordion Item Expandable Content -@Directive({ selector: '[pi-accordion-item-expandable-content]', }) -export class PiAccordionItemContentDirective { - constructor(public templateRef: TemplateRef) {} -} - -/** - * The accordion footer is a separated content of the accordion items group. - * If it is needed it must be used as a Footer for the whole accordion. - */ -@Directive({ selector: 'pi-accordion-footer', }) -export class PiAccordionFooterDirective { - @HostBinding('class') className = 'pi-accordion-footer'; -} - -@Directive({ selector: 'pi-accordion-item', }) -export class PiAccordionItemDirective { - readonly title = input(''); - readonly subtitle = input(''); - readonly status = input.required(); - readonly statusLabel = input(); - readonly statusIcon = input(); - readonly isConfidential = input(false); - readonly content = contentChild(PiAccordionItemContentDirective); - readonly summaryContent = contentChild(PiAccordionSummaryContentDirective); - readonly customHeader = contentChild(PiAccordionItemHeaderDirective); -} +} from '@angular/core'; +import { status } from '../../../util/status'; + +/** + * The accordion header is a separated content of the accordion items group. + * If it is needed it must be used as a Header for the whole accordion. + */ + +@Directive({ selector: 'pi-accordion-header', }) +export class PiAccordionHeaderDirective { + @HostBinding('class') className = 'pi-accordion-header'; +} + +/** + * The accordion contents ar parts of each accordion item. + */ + +// Accordion Item Header Content +@Directive({ selector: '[pi-accordion-item-header-content]', }) +export class PiAccordionItemHeaderDirective { + constructor(public templateRef: TemplateRef) {} +} +// Accordion Item Summary Content +@Directive({ selector: '[pi-accordion-item-summary-content]', }) +export class PiAccordionSummaryContentDirective { + constructor(public templateRef: TemplateRef) {} +} + +// Accordion Item Expandable Content +@Directive({ selector: '[pi-accordion-item-expandable-content]', }) +export class PiAccordionItemContentDirective { + constructor(public templateRef: TemplateRef) {} +} + +/** + * The accordion footer is a separated content of the accordion items group. + * If it is needed it must be used as a Footer for the whole accordion. + */ +@Directive({ selector: 'pi-accordion-footer', }) +export class PiAccordionFooterDirective { + @HostBinding('class') className = 'pi-accordion-footer'; +} + +@Directive({ selector: 'pi-accordion-item', }) +export class PiAccordionItemDirective { + readonly title = input(''); + readonly subtitle = input(''); + readonly status = input.required(); + readonly statusLabel = input(); + readonly statusIcon = input(); + readonly isConfidential = input(false); + readonly content = contentChild(PiAccordionItemContentDirective); + readonly summaryContent = contentChild(PiAccordionSummaryContentDirective); + readonly customHeader = contentChild(PiAccordionItemHeaderDirective); +} diff --git a/libs/ui/src/lib/ui/accordion/index.ts b/libs/ui/src/lib/ui/accordion/index.ts index a0c6511..e03b48d 100644 --- a/libs/ui/src/lib/ui/accordion/index.ts +++ b/libs/ui/src/lib/ui/accordion/index.ts @@ -1,5 +1,5 @@ - - -export * from './accordion/accordion.component'; - + + +export * from './accordion/accordion.component'; + export * from './directives/accordion-content.directive'; \ No newline at end of file diff --git a/libs/ui/src/lib/ui/accordion/styles/_horizontal-accordion.scss b/libs/ui/src/lib/ui/accordion/styles/_horizontal-accordion.scss index f0705ca..7f1d292 100644 --- a/libs/ui/src/lib/ui/accordion/styles/_horizontal-accordion.scss +++ b/libs/ui/src/lib/ui/accordion/styles/_horizontal-accordion.scss @@ -1,137 +1,137 @@ -@mixin horizontalAccordionTypeOutlineColor($color) { - &.pi-accordion__appearance--outline { - & > section { - & > header { - border: 1px solid; - border-color: var(--pi-color-#{$color}-75); - background-color: var(--pi-color-#{$color}-25); - &.is-expanded { - background-color: var(--pi-color-grey-10); - border-color: var(--pi-color-grey-25); - } - } - } - } -} - -:host { - &.pi-accordion__direction--horizontal { - & > section { - & > header { - gap: var(--pi-spacing-large); - padding: var(--pi-spacing-x-small) var(--pi-spacing-small) var(--pi-spacing-x-small); - border-radius: var(--pi-border-radius-large); - &.is-expanded { - border: 1px solid; - } - &.is-disabled { - opacity: 0.3; - } - &:not(.is-disabled) { - &:hover { - cursor: pointer; - background-color: var(--pi-color-grey-10); - .pi-icon { - transform: scale(1.15); - } - } - .pi-icon { - &:hover { - cursor: pointer; - } - } - } - } - } - & > *:nth-child(1) { - justify-content: space-between; - gap: var(--pi-spacing-small); - } - main { - &.is-collapsed { - height: 0; - } - &.is-expanded { - height: 100%; - } - } - // Color - &.pi-accordion__primary { - @include horizontalAccordionTypeOutlineColor(primary); - } - &.pi-accordion__warn { - @include horizontalAccordionTypeOutlineColor(warn); - } - &.pi-accordion__accent { - @include horizontalAccordionTypeOutlineColor(accent); - } - // Horizontal, Outline & White - &.pi-accordion__white { - & > section { - & > header { - border: 1px solid; - border-color: var(--pi-color-grey-25); - &.is-expanded { - background-color: var(--pi-color-grey-10); - border: 1px solid; - border-color: var(--pi-color-grey-75); - } - } - } - } - } -} - -html { - // Desktop - &.is-desktop { - // Desktop S & M - &:not(.is-desktop__large) { - :host { - &.pi-accordion__direction--horizontal { - & > section { - &:nth-child(1) { - display: grid; - grid-template-columns: repeat(5, 1fr); - align-items: start; - header { - min-height: 6.5rem; - } - } - } - } - } - } - // Desktop L - &.is-desktop__large { - :host { - &.pi-accordion__direction--horizontal { - display: flex; - flex-direction: row; - gap: var(--pi-spacing-x-large); - & > section { - &:nth-child(1) { - display: flex; - flex-direction: column; - width: 25%; - } - &:nth-child(2) { - width: 75%; - } - & > header { - align-items: center; - } - } - - &.pi-accordion__white { - & > section { - & > header { - border-color: transparent; - } - } - } - } - } - } - } -} +@mixin horizontalAccordionTypeOutlineColor($color) { + &.pi-accordion__appearance--outline { + & > section { + & > header { + border: 1px solid; + border-color: var(--pi-color-#{$color}-75); + background-color: var(--pi-color-#{$color}-25); + &.is-expanded { + background-color: var(--pi-color-grey-10); + border-color: var(--pi-color-grey-25); + } + } + } + } +} + +:host { + &.pi-accordion__direction--horizontal { + & > section { + & > header { + gap: var(--pi-spacing-large); + padding: var(--pi-spacing-x-small) var(--pi-spacing-small) var(--pi-spacing-x-small); + border-radius: var(--pi-border-radius-large); + &.is-expanded { + border: 1px solid; + } + &.is-disabled { + opacity: 0.3; + } + &:not(.is-disabled) { + &:hover { + cursor: pointer; + background-color: var(--pi-color-grey-10); + .pi-icon { + transform: scale(1.15); + } + } + .pi-icon { + &:hover { + cursor: pointer; + } + } + } + } + } + & > *:nth-child(1) { + justify-content: space-between; + gap: var(--pi-spacing-small); + } + main { + &.is-collapsed { + height: 0; + } + &.is-expanded { + height: 100%; + } + } + // Color + &.pi-accordion__primary { + @include horizontalAccordionTypeOutlineColor(primary); + } + &.pi-accordion__warn { + @include horizontalAccordionTypeOutlineColor(warn); + } + &.pi-accordion__accent { + @include horizontalAccordionTypeOutlineColor(accent); + } + // Horizontal, Outline & White + &.pi-accordion__white { + & > section { + & > header { + border: 1px solid; + border-color: var(--pi-color-grey-25); + &.is-expanded { + background-color: var(--pi-color-grey-10); + border: 1px solid; + border-color: var(--pi-color-grey-75); + } + } + } + } + } +} + +html { + // Desktop + &.is-desktop { + // Desktop S & M + &:not(.is-desktop__large) { + :host { + &.pi-accordion__direction--horizontal { + & > section { + &:nth-child(1) { + display: grid; + grid-template-columns: repeat(5, 1fr); + align-items: start; + header { + min-height: 6.5rem; + } + } + } + } + } + } + // Desktop L + &.is-desktop__large { + :host { + &.pi-accordion__direction--horizontal { + display: flex; + flex-direction: row; + gap: var(--pi-spacing-x-large); + & > section { + &:nth-child(1) { + display: flex; + flex-direction: column; + width: 25%; + } + &:nth-child(2) { + width: 75%; + } + & > header { + align-items: center; + } + } + + &.pi-accordion__white { + & > section { + & > header { + border-color: transparent; + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/accordion/styles/_vertical-accordion.scss b/libs/ui/src/lib/ui/accordion/styles/_vertical-accordion.scss index c72f0c4..58c2bdc 100644 --- a/libs/ui/src/lib/ui/accordion/styles/_vertical-accordion.scss +++ b/libs/ui/src/lib/ui/accordion/styles/_vertical-accordion.scss @@ -1,236 +1,236 @@ -@mixin verticalAccordionPadding($large-spacing, $small-spacing) { - &:not(.pi-accordion__direction--horizontal) { - & > .pi-accordion-item { - .pi-accordion-item-content__header { - padding: var(--pi-spacing-#{$large-spacing}); - transform: var(--pi-animation); - } - .pi-accordion-item-content__header + .pi-accordion-item-content__summary { - padding: var(--pi-spacing-#{$small-spacing}) var(--pi-spacing-#{$large-spacing}) - var(--pi-spacing-#{$large-spacing}); - } - // Expanded [header + summary + main] - .pi-accordion-item-content__header.is-expanded - + .pi-accordion-item-content__summary - + .pi-accordion-item-content__expandable, - // Expanded [header + main] - .pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable { - padding: 0 var(--pi-spacing-#{$large-spacing}) var(--pi-spacing-#{$large-spacing}); - } - // Collapsed [header + summary + main] - .pi-accordion-item-content__header:not(.is-expanded) - + .pi-accordion-item-content__summary - + .pi-accordion-item-content__expandable, - // Collapsed [header + main] - .pi-accordion-item-content__header:not(.is-expanded) + .pi-accordion-item-content__expandable { - padding: 0 var(--pi-spacing-#{$large-spacing}); - } - } - } -} - -@mixin verticalAccordionAppearanceOutline { - &.pi-accordion__appearance--outline { - &:not(.pi-accordion__direction--horizontal) { - &:not(.is-disabled) { - & > .pi-accordion-item { - & > .pi-accordion-item-content__header { - &.is-expanded { - border-bottom: 1px solid; - border-top-left-radius: var(--pi-border-radius-large); - border-top-right-radius: var(--pi-border-radius-large); - } - &:not(.is-expanded) { - border-radius: var(--pi-border-radius-large); - } - } - & > .pi-accordion-item-content__expandable { - border-bottom-left-radius: var(--pi-border-radius-large); - border-bottom-right-radius: var(--pi-border-radius-large); - } - } - } - &.pi-accordion__white { - &:not(.is-disabled) { - & > .pi-accordion-item { - & > .pi-accordion-item-content__header { - &.is-expanded { - background-color: var(--pi-color-grey-10); - border-color: var(--pi-color-grey-75); - } - } - &:hover { - & > .pi-accordion-item-content__header { - &:not(.is-expanded) { - background-color: var(--pi-color-grey-10); - border-color: var(--pi-color-grey-75); - } - } - } - } - } - } - } - } -} - -@mixin verticalAccordionAppearanceOutlineAndFill { - &.pi-accordion__appearance--outline, - &.pi-accordion__appearance--fill { - &:not(.pi-accordion__direction--horizontal) { - & > section { - & > header { - transform: var(--pi-animation); - } - } - // TODO: any generic property should be previously agreed with the design Team. - // Accordion component will use just 2 spacing properties. - &.pi-accordion__padding--s { - @include verticalAccordionPadding(small, xx-small); - } - &.pi-accordion__padding--m { - @include verticalAccordionPadding(medium, x-small); - } - &.pi-accordion__padding--l { - @include verticalAccordionPadding(large, small); - } - &.pi-accordion__padding--xl { - @include verticalAccordionPadding(x-large, medium); - } - &.pi-accordion__padding--xxl { - @include verticalAccordionPadding(xx-large, large); - } - } - } -} - -@mixin verticalAccordionAppearanceOutlineColor($color) { - &.pi-accordion__appearance--outline { - &:not(.pi-accordion__direction--horizontal) { - &:not(.is-disabled) { - & > .pi-accordion-item { - & > .pi-accordion-item-content__header { - &.is-expanded { - background-color: var(--pi-color-#{$color}-50); - border-color: var(--pi-color-#{$color}-100); - } - } - &:hover { - & > .pi-accordion-item-content__header { - &:not(.is-expanded) { - background-color: var(--pi-color-#{$color}-50); - border-color: var(--pi-color-#{$color}-100); - } - } - } - } - } - } - } -} - -@mixin verticalAccordionTopbar() { - .pi-accordion-item-content { - &.pi-accordion-item-content__topbar { - display: flex; - justify-content: center; - align-items: center; - height: var(--pi-spacing-xx-large); - border-top-left-radius: calc(var(--pi-border-radius-large) - 0.0625rem); - border-top-right-radius: calc(var(--pi-border-radius-large) - 0.0625rem); - transition: var(--pi-animation); - &.pi-color__primary { - background-color: var(--pi-color-primary-50); - } - &.pi-color__highlighted { - background-color: var(--pi-color-highlighted-50); - } - &.pi-color__grey { - background-color: var(--pi-color-grey-50); - } - } - } -} - -:host { - // Appearance (Appearance) - @include verticalAccordionAppearanceOutline; - - @include verticalAccordionAppearanceOutlineAndFill; - - @include verticalAccordionTopbar; - - // Appearance (Appearance) + Color - &.pi-accordion__primary { - @include verticalAccordionAppearanceOutlineColor(primary); - } - &.pi-accordion__warn { - @include verticalAccordionAppearanceOutlineColor(warn); - } - &.pi-accordion__accent { - @include verticalAccordionAppearanceOutlineColor(accent); - } - - // Default (Vertical) - &:not(.pi-accordion__direction--horizontal) { - // Accordion item - & > .pi-accordion-item { - &:not(.is-disabled) { - & > .pi-accordion-item-content__header { - align-items: flex-start; - &:hover { - cursor: pointer; - } - .pi-icon { - &:hover { - cursor: pointer; - } - } - } - } - & > .pi-accordion-item-content__expandable { - transition: var(--pi-animation); - } - // Expanded - .pi-accordion-item-content__header { - &.is-expanded { - & > .pi-accordion-item-header-content__right { - .pi-icon { - transform: rotate(90deg); - } - } - } - } - .pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable, - .pi-accordion-item-content__header.is-expanded - + .pi-accordion-item-content__summary - + .pi-accordion-item-content__expandable { - height: 100%; - margin-top: var(--pi-spacing-medium); - opacity: 1; - visibility: visible; - } - - // Collapsed - .pi-accordion-item-content__header { - &.is-collapsed { - & > .pi-accordion-item-header-content__right { - .pi-icon { - transform: rotate(0); - } - } - } - } - .pi-accordion-item-content__header.is-collapsed + .pi-accordion-item-content__expandable, - .pi-accordion-item-content__header.is-collapsed - + .pi-accordion-item-content__summary - + .pi-accordion-item-content__expandable { - height: auto; - flex: 1; - max-height: 0; - opacity: 0; - visibility: hidden; - } - } - } -} +@mixin verticalAccordionPadding($large-spacing, $small-spacing) { + &:not(.pi-accordion__direction--horizontal) { + & > .pi-accordion-item { + .pi-accordion-item-content__header { + padding: var(--pi-spacing-#{$large-spacing}); + transform: var(--pi-animation); + } + .pi-accordion-item-content__header + .pi-accordion-item-content__summary { + padding: var(--pi-spacing-#{$small-spacing}) var(--pi-spacing-#{$large-spacing}) + var(--pi-spacing-#{$large-spacing}); + } + // Expanded [header + summary + main] + .pi-accordion-item-content__header.is-expanded + + .pi-accordion-item-content__summary + + .pi-accordion-item-content__expandable, + // Expanded [header + main] + .pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable { + padding: 0 var(--pi-spacing-#{$large-spacing}) var(--pi-spacing-#{$large-spacing}); + } + // Collapsed [header + summary + main] + .pi-accordion-item-content__header:not(.is-expanded) + + .pi-accordion-item-content__summary + + .pi-accordion-item-content__expandable, + // Collapsed [header + main] + .pi-accordion-item-content__header:not(.is-expanded) + .pi-accordion-item-content__expandable { + padding: 0 var(--pi-spacing-#{$large-spacing}); + } + } + } +} + +@mixin verticalAccordionAppearanceOutline { + &.pi-accordion__appearance--outline { + &:not(.pi-accordion__direction--horizontal) { + &:not(.is-disabled) { + & > .pi-accordion-item { + & > .pi-accordion-item-content__header { + &.is-expanded { + border-bottom: 1px solid; + border-top-left-radius: var(--pi-border-radius-large); + border-top-right-radius: var(--pi-border-radius-large); + } + &:not(.is-expanded) { + border-radius: var(--pi-border-radius-large); + } + } + & > .pi-accordion-item-content__expandable { + border-bottom-left-radius: var(--pi-border-radius-large); + border-bottom-right-radius: var(--pi-border-radius-large); + } + } + } + &.pi-accordion__white { + &:not(.is-disabled) { + & > .pi-accordion-item { + & > .pi-accordion-item-content__header { + &.is-expanded { + background-color: var(--pi-color-grey-10); + border-color: var(--pi-color-grey-75); + } + } + &:hover { + & > .pi-accordion-item-content__header { + &:not(.is-expanded) { + background-color: var(--pi-color-grey-10); + border-color: var(--pi-color-grey-75); + } + } + } + } + } + } + } + } +} + +@mixin verticalAccordionAppearanceOutlineAndFill { + &.pi-accordion__appearance--outline, + &.pi-accordion__appearance--fill { + &:not(.pi-accordion__direction--horizontal) { + & > section { + & > header { + transform: var(--pi-animation); + } + } + // TODO: any generic property should be previously agreed with the design Team. + // Accordion component will use just 2 spacing properties. + &.pi-accordion__padding--s { + @include verticalAccordionPadding(small, xx-small); + } + &.pi-accordion__padding--m { + @include verticalAccordionPadding(medium, x-small); + } + &.pi-accordion__padding--l { + @include verticalAccordionPadding(large, small); + } + &.pi-accordion__padding--xl { + @include verticalAccordionPadding(x-large, medium); + } + &.pi-accordion__padding--xxl { + @include verticalAccordionPadding(xx-large, large); + } + } + } +} + +@mixin verticalAccordionAppearanceOutlineColor($color) { + &.pi-accordion__appearance--outline { + &:not(.pi-accordion__direction--horizontal) { + &:not(.is-disabled) { + & > .pi-accordion-item { + & > .pi-accordion-item-content__header { + &.is-expanded { + background-color: var(--pi-color-#{$color}-50); + border-color: var(--pi-color-#{$color}-100); + } + } + &:hover { + & > .pi-accordion-item-content__header { + &:not(.is-expanded) { + background-color: var(--pi-color-#{$color}-50); + border-color: var(--pi-color-#{$color}-100); + } + } + } + } + } + } + } +} + +@mixin verticalAccordionTopbar() { + .pi-accordion-item-content { + &.pi-accordion-item-content__topbar { + display: flex; + justify-content: center; + align-items: center; + height: var(--pi-spacing-xx-large); + border-top-left-radius: calc(var(--pi-border-radius-large) - 0.0625rem); + border-top-right-radius: calc(var(--pi-border-radius-large) - 0.0625rem); + transition: var(--pi-animation); + &.pi-color__primary { + background-color: var(--pi-color-primary-50); + } + &.pi-color__highlighted { + background-color: var(--pi-color-highlighted-50); + } + &.pi-color__grey { + background-color: var(--pi-color-grey-50); + } + } + } +} + +:host { + // Appearance (Appearance) + @include verticalAccordionAppearanceOutline; + + @include verticalAccordionAppearanceOutlineAndFill; + + @include verticalAccordionTopbar; + + // Appearance (Appearance) + Color + &.pi-accordion__primary { + @include verticalAccordionAppearanceOutlineColor(primary); + } + &.pi-accordion__warn { + @include verticalAccordionAppearanceOutlineColor(warn); + } + &.pi-accordion__accent { + @include verticalAccordionAppearanceOutlineColor(accent); + } + + // Default (Vertical) + &:not(.pi-accordion__direction--horizontal) { + // Accordion item + & > .pi-accordion-item { + &:not(.is-disabled) { + & > .pi-accordion-item-content__header { + align-items: flex-start; + &:hover { + cursor: pointer; + } + .pi-icon { + &:hover { + cursor: pointer; + } + } + } + } + & > .pi-accordion-item-content__expandable { + transition: var(--pi-animation); + } + // Expanded + .pi-accordion-item-content__header { + &.is-expanded { + & > .pi-accordion-item-header-content__right { + .pi-icon { + transform: rotate(90deg); + } + } + } + } + .pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable, + .pi-accordion-item-content__header.is-expanded + + .pi-accordion-item-content__summary + + .pi-accordion-item-content__expandable { + height: 100%; + margin-top: var(--pi-spacing-medium); + opacity: 1; + visibility: visible; + } + + // Collapsed + .pi-accordion-item-content__header { + &.is-collapsed { + & > .pi-accordion-item-header-content__right { + .pi-icon { + transform: rotate(0); + } + } + } + } + .pi-accordion-item-content__header.is-collapsed + .pi-accordion-item-content__expandable, + .pi-accordion-item-content__header.is-collapsed + + .pi-accordion-item-content__summary + + .pi-accordion-item-content__expandable { + height: auto; + flex: 1; + max-height: 0; + opacity: 0; + visibility: hidden; + } + } + } +} diff --git a/libs/ui/src/lib/ui/accordion/styles/accordion.component.scss b/libs/ui/src/lib/ui/accordion/styles/accordion.component.scss index f6aec0d..1a6f51d 100644 --- a/libs/ui/src/lib/ui/accordion/styles/accordion.component.scss +++ b/libs/ui/src/lib/ui/accordion/styles/accordion.component.scss @@ -1,186 +1,186 @@ -@use 'horizontal-accordion'; -@use 'vertical-accordion'; - -// Appearance Default -@mixin accordionAppearanceDefault { - &:not(.pi-accordion__appearance--outline):not(.pi-accordion__appearance--fill) { - // Not horizontal - &:not(.pi-accordion__direction--horizontal) { - & > section { - border-bottom: 1px solid; - border-color: var(--pi-color-grey-25); - } - } - & > section { - padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium); - } - } -} - -// Appearance Outline -@mixin accordionAppearanceOutline { - &.pi-accordion__appearance--outline { - // Color - &.pi-accordion__primary { - @include accordionAppearanceOutlineColor(primary); - } - &.pi-accordion__warn { - @include accordionAppearanceOutlineColor(warn); - } - &.pi-accordion__accent { - @include accordionAppearanceOutlineColor(accent); - } - &.pi-accordion__white { - & > section { - border-color: var(--pi-color-white-900); - background-color: var(--pi-color-white); - } - } - } -} - -// Appearance Fill -@mixin accordionAppearanceFill { - &.pi-accordion__appearance--fill { - // Color - &.pi-accordion__primary { - @include accordionAppearanceFilleColor(primary); - } - &.pi-accordion__warn { - @include accordionAppearanceFilleColor(warn); - } - &.pi-accordion__accent { - @include accordionAppearanceFilleColor(accent); - } - - &.pi-accordion__white { - & > section { - background-color: var(--pi-color-white); - } - } - } -} - -// Fill & Outline spacings -@mixin accordionFillAndOutlineSpacings { - &.pi-accordion__appearance--outline, - &.pi-accordion__appearance--fill { - gap: var(--pi-spacing-large); - & > section { - border-radius: var(--pi-border-radius-large); - } - header { - aside { - & > .pi-icon { - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - border-radius: var(--pi-border-radius-small); - background-color: var(--pi-color-white); - } - } - } - } -} - -// Appearance Fill Color -@mixin accordionAppearanceFilleColor($color) { - & > section { - background-color: var(--pi-color-#{$color}-25); - } -} - -// Appearance Outline Color -@mixin accordionAppearanceOutlineColor($color) { - & > section { - border: 1px solid; - border-color: var(--pi-color-#{$color}-75); - background-color: var(--pi-color-#{$color}-25); - } -} - -// Common -:host { - max-width: 100%; - display: flex; - flex-direction: column; - - // Accordion item - & > section { - header { - display: flex; - justify-content: space-between; - - & > aside { - display: flex; - align-items: center; - gap: var(--pi-spacing-medium); - height: 1.875rem; - width: fit-content; - & > span { - &::after { - content: '|'; - color: var(--pi-color-grey-75); - font: { - size: var(--pi-font-size-small); - } - } - } - - .pi-icon { - transition: var(--pi-animation); - } - } - & > .pi-text-viewer { - & > article { - & > span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - - // Content - & > main { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-x-large); - height: auto; - overflow: hidden; - } - // State - &.is-disabled { - & > *:nth-child(n + 1) { - opacity: 0.33; - } - } - - // Is confidential - &.is-confidential { - &.is-expanded { - border: 1px solid; - border-color: var(--pi-color-primary-100); - } - &.is-collapsed { - border: 1px solid; - border-color: var(--pi-color-grey-100); - } - } - } - - // Direction - - // Appearance (Appearance) - // Default - @include accordionAppearanceDefault; - - // Outline - @include accordionAppearanceOutline; - - // Fill - @include accordionAppearanceFill; - - // Fill & Outline spacings - @include accordionFillAndOutlineSpacings; -} +@use 'horizontal-accordion'; +@use 'vertical-accordion'; + +// Appearance Default +@mixin accordionAppearanceDefault { + &:not(.pi-accordion__appearance--outline):not(.pi-accordion__appearance--fill) { + // Not horizontal + &:not(.pi-accordion__direction--horizontal) { + & > section { + border-bottom: 1px solid; + border-color: var(--pi-color-grey-25); + } + } + & > section { + padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium); + } + } +} + +// Appearance Outline +@mixin accordionAppearanceOutline { + &.pi-accordion__appearance--outline { + // Color + &.pi-accordion__primary { + @include accordionAppearanceOutlineColor(primary); + } + &.pi-accordion__warn { + @include accordionAppearanceOutlineColor(warn); + } + &.pi-accordion__accent { + @include accordionAppearanceOutlineColor(accent); + } + &.pi-accordion__white { + & > section { + border-color: var(--pi-color-white-900); + background-color: var(--pi-color-white); + } + } + } +} + +// Appearance Fill +@mixin accordionAppearanceFill { + &.pi-accordion__appearance--fill { + // Color + &.pi-accordion__primary { + @include accordionAppearanceFilleColor(primary); + } + &.pi-accordion__warn { + @include accordionAppearanceFilleColor(warn); + } + &.pi-accordion__accent { + @include accordionAppearanceFilleColor(accent); + } + + &.pi-accordion__white { + & > section { + background-color: var(--pi-color-white); + } + } + } +} + +// Fill & Outline spacings +@mixin accordionFillAndOutlineSpacings { + &.pi-accordion__appearance--outline, + &.pi-accordion__appearance--fill { + gap: var(--pi-spacing-large); + & > section { + border-radius: var(--pi-border-radius-large); + } + header { + aside { + & > .pi-icon { + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + border-radius: var(--pi-border-radius-small); + background-color: var(--pi-color-white); + } + } + } + } +} + +// Appearance Fill Color +@mixin accordionAppearanceFilleColor($color) { + & > section { + background-color: var(--pi-color-#{$color}-25); + } +} + +// Appearance Outline Color +@mixin accordionAppearanceOutlineColor($color) { + & > section { + border: 1px solid; + border-color: var(--pi-color-#{$color}-75); + background-color: var(--pi-color-#{$color}-25); + } +} + +// Common +:host { + max-width: 100%; + display: flex; + flex-direction: column; + + // Accordion item + & > section { + header { + display: flex; + justify-content: space-between; + + & > aside { + display: flex; + align-items: center; + gap: var(--pi-spacing-medium); + height: 1.875rem; + width: fit-content; + & > span { + &::after { + content: '|'; + color: var(--pi-color-grey-75); + font: { + size: var(--pi-font-size-small); + } + } + } + + .pi-icon { + transition: var(--pi-animation); + } + } + & > .pi-text-viewer { + & > article { + & > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + + // Content + & > main { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-x-large); + height: auto; + overflow: hidden; + } + // State + &.is-disabled { + & > *:nth-child(n + 1) { + opacity: 0.33; + } + } + + // Is confidential + &.is-confidential { + &.is-expanded { + border: 1px solid; + border-color: var(--pi-color-primary-100); + } + &.is-collapsed { + border: 1px solid; + border-color: var(--pi-color-grey-100); + } + } + } + + // Direction + + // Appearance (Appearance) + // Default + @include accordionAppearanceDefault; + + // Outline + @include accordionAppearanceOutline; + + // Fill + @include accordionAppearanceFill; + + // Fill & Outline spacings + @include accordionFillAndOutlineSpacings; +} diff --git a/libs/ui/src/lib/ui/banner/banner/banner.component.html b/libs/ui/src/lib/ui/banner/banner/banner.component.html index b4e5b9b..134d23b 100644 --- a/libs/ui/src/lib/ui/banner/banner/banner.component.html +++ b/libs/ui/src/lib/ui/banner/banner/banner.component.html @@ -1,27 +1,27 @@ -
-
-
-

{{ title() }}

- {{ message() }} -
- - {{ buttonText() }} -
-
+
+
+
+

{{ title() }}

+ {{ message() }} +
+ + {{ buttonText() }} +
+
diff --git a/libs/ui/src/lib/ui/banner/banner/banner.component.scss b/libs/ui/src/lib/ui/banner/banner/banner.component.scss index 5a6dd77..8177ecd 100644 --- a/libs/ui/src/lib/ui/banner/banner/banner.component.scss +++ b/libs/ui/src/lib/ui/banner/banner/banner.component.scss @@ -1,138 +1,138 @@ -:host { - display: block; - width: 100%; - border-radius: var(--pi-border-radius-large); - - & > main { - gap: var(--pi-spacing-xxx-small); - & > section { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-x-large); - padding: var(--pi-spacing-medium) var(--pi-spacing-x-large); - & > header { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-xxx-small); - } - } - } - &:hover { - cursor: pointer; - } - - // Type - &.pi-banner__mode--dark { - background: linear-gradient(60deg, var(--pi-color-highlighted), var(--pi-color-primary)); - & > main { - & > section { - h3 { - color: var(--pi-color-white); - } - span { - color: var(--pi-color-white); - } - } - } - } - &.pi-banner__mode--light { - background: linear-gradient(60deg, var(--pi-color-white), var(--pi-color-primary-100)); - & > main { - & > section { - h3 { - color: var(--pi-color-grey-500); - } - span { - color: var(--pi-color-grey-400); - } - } - } - } -} - -// Media queries -html { - // Mobile - &.is-mobile { - :host { - & > main { - height: 10rem; - - & > section { - width: 60%; - padding: var(--pi-spacing-medium); - & > header { - justify-content: space-between; - h3 { - font: { - size: var(--pi-font-size-medium); - } - } - span { - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - } - } - - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - :host { - .pi-icon-button { - display: none; - } - } - } - } - - &:not(.is-mobile) { - // large device - @media screen and (min-width: 62rem) { - :host { - & > main { - & > section { - & > header { - h3 { - font: { - size: var(--pi-font-size-large); - } - } - span { - font: { - size: var(--pi-font-size-small); - } - } - } - } - } - } - } - } - - // Tablet - &.is-tablet { - :host { - & > main { - height: 9.6875rem; - & > section { - width: 66.66%; - } - } - } - } - &.is-desktop { - :host { - & > main { - height: 9.375rem; - & > section { - width: 75%; - } - } - } - } -} +:host { + display: block; + width: 100%; + border-radius: var(--pi-border-radius-large); + + & > main { + gap: var(--pi-spacing-xxx-small); + & > section { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-x-large); + padding: var(--pi-spacing-medium) var(--pi-spacing-x-large); + & > header { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-xxx-small); + } + } + } + &:hover { + cursor: pointer; + } + + // Type + &.pi-banner__mode--dark { + background: linear-gradient(60deg, var(--pi-color-highlighted), var(--pi-color-primary)); + & > main { + & > section { + h3 { + color: var(--pi-color-white); + } + span { + color: var(--pi-color-white); + } + } + } + } + &.pi-banner__mode--light { + background: linear-gradient(60deg, var(--pi-color-white), var(--pi-color-primary-100)); + & > main { + & > section { + h3 { + color: var(--pi-color-grey-500); + } + span { + color: var(--pi-color-grey-400); + } + } + } + } +} + +// Media queries +html { + // Mobile + &.is-mobile { + :host { + & > main { + height: 10rem; + + & > section { + width: 60%; + padding: var(--pi-spacing-medium); + & > header { + justify-content: space-between; + h3 { + font: { + size: var(--pi-font-size-medium); + } + } + span { + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + } + } + + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + :host { + .pi-icon-button { + display: none; + } + } + } + } + + &:not(.is-mobile) { + // large device + @media screen and (min-width: 62rem) { + :host { + & > main { + & > section { + & > header { + h3 { + font: { + size: var(--pi-font-size-large); + } + } + span { + font: { + size: var(--pi-font-size-small); + } + } + } + } + } + } + } + } + + // Tablet + &.is-tablet { + :host { + & > main { + height: 9.6875rem; + & > section { + width: 66.66%; + } + } + } + } + &.is-desktop { + :host { + & > main { + height: 9.375rem; + & > section { + width: 75%; + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/banner/banner/banner.component.ts b/libs/ui/src/lib/ui/banner/banner/banner.component.ts index 2243a88..7d6963d 100644 --- a/libs/ui/src/lib/ui/banner/banner/banner.component.ts +++ b/libs/ui/src/lib/ui/banner/banner/banner.component.ts @@ -2,8 +2,8 @@ import { Component, HostBinding, input, output, ChangeDetectionStrategy } from ' import { PiBackgroundImageDirective } from '../../image/background-image.directive'; import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive'; import { NgIf } from '@angular/common'; -import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; - +import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; + @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'pi-banner', @@ -15,25 +15,25 @@ import { PiIconButtonComponent } from '../../button/icon-button/icon-button.comp NgIf, PiIconButtonComponent, ], -}) -export class PiBannerComponent { - @HostBinding('class') get classes(): string { - const modeClass = `pi-banner__mode--${this.mode()}`; - return ['pi-banner', modeClass].join(' '); - } - - // Skin - readonly mode = input<'dark' | 'light'>('dark'); - - // Text - readonly title = input(); - readonly message = input(); - readonly buttonText = input(); - - // Image - readonly pathImg = input(); - readonly isImgResponsive = input(true); - readonly extension = input<'jpg' | 'svg' | 'gif'>('gif'); - - readonly execute = output(); -} +}) +export class PiBannerComponent { + @HostBinding('class') get classes(): string { + const modeClass = `pi-banner__mode--${this.mode()}`; + return ['pi-banner', modeClass].join(' '); + } + + // Skin + readonly mode = input<'dark' | 'light'>('dark'); + + // Text + readonly title = input(); + readonly message = input(); + readonly buttonText = input(); + + // Image + readonly pathImg = input(); + readonly isImgResponsive = input(true); + readonly extension = input<'jpg' | 'svg' | 'gif'>('gif'); + + readonly execute = output(); +} diff --git a/libs/ui/src/lib/ui/banner/index.ts b/libs/ui/src/lib/ui/banner/index.ts index 9729b06..bc6b070 100644 --- a/libs/ui/src/lib/ui/banner/index.ts +++ b/libs/ui/src/lib/ui/banner/index.ts @@ -1,3 +1,3 @@ - - -export * from './banner/banner.component'; + + +export * from './banner/banner.component'; diff --git a/libs/ui/src/lib/ui/button/action-button/action-button.component.html b/libs/ui/src/lib/ui/button/action-button/action-button.component.html index 64af250..2057b0c 100644 --- a/libs/ui/src/lib/ui/button/action-button/action-button.component.html +++ b/libs/ui/src/lib/ui/button/action-button/action-button.component.html @@ -1,31 +1,31 @@ - + diff --git a/libs/ui/src/lib/ui/button/action-button/action-button.component.scss b/libs/ui/src/lib/ui/button/action-button/action-button.component.scss index 7c128a6..9fc64c1 100644 --- a/libs/ui/src/lib/ui/button/action-button/action-button.component.scss +++ b/libs/ui/src/lib/ui/button/action-button/action-button.component.scss @@ -1,140 +1,140 @@ -@mixin actionButtonChevronSize($icon-height, $icon-width, $head-size) { - svg { - height: $icon-height; - width: $icon-width; - - // Chevron head - & > g { - &:nth-child(1) { - height: $head-size; - width: $head-size; - } - } - } -} - -@mixin actionButtonFontWeight($weight) { - & > button { - & > span { - font: { - weight: $weight; - } - } - } -} - -:host { - display: block; - - & > button { - all: unset; - display: flex; - align-items: center; - justify-content: center; - // Size - // X Small - &.pi-button__x-small { - @include actionButtonChevronSize( - var(--pi-spacing-x-small), - var(--pi-spacing-small), - var(--pi-spacing-xx-small) - ); - gap: var(--pi-spacing-xxxx-small); - } - // Small - &.pi-button__small { - @include actionButtonChevronSize( - var(--pi-spacing-x-small), - var(--pi-spacing-small), - var(--pi-spacing-xx-small) - ); - gap: var(--pi-spacing-xxx-small); - } - // Medium - &.pi-button__medium { - @include actionButtonChevronSize( - var(--pi-spacing-small), - var(--pi-spacing-medium), - var(--pi-spacing-x-small) - ); - gap: var(--pi-spacing-xxx-small); - } - // Large & w100 - &.pi-button__large, - &.pi-button__w100 { - @include actionButtonChevronSize( - var(--pi-spacing-small), - var(--pi-spacing-medium), - var(--pi-spacing-x-small) - ); - gap: var(--pi-spacing-xx-small); - } - } - svg { - transition: all 100ms ease-in-out; - opacity: 1; - transform: scaleX(1); - transition: transform 100ms ease-in-out, opacity 100ms ease-in-out; - & > g { - // Head - &:nth-child(1) { - transform: translateX(0); - transition: transform 100ms ease-in-out; - } - // Body - &:nth-child(2) { - opacity: 0; - transform: scaleX(1); - transition: transform 100ms ease-in-out, opacity 100ms ease-in-out; - } - } - } - - &:hover { - // Icon - svg { - transition: all 100ms ease-in-out; - opacity: 1; - transform: scaleX(1); - transition: transform 100ms ease-in-out, opacity 100ms ease-in-out; - & > g { - // Head - &:nth-child(1) { - transform: translateX(3px); - } - // Body - &:nth-child(2) { - opacity: 1; - transform: scaleX(1.75); - } - } - } - & > button { - cursor: pointer; - background-color: var(--pi-color-white); - } - } - // Direction - // Back - &.pi-action-button__direction--back { - & > button { - flex-direction: row-reverse; - svg { - transform: rotate(-180deg); - } - } - } - // Font weight - // 300 - &.pi-action-button__font-weight--300 { - @include actionButtonFontWeight(300); - } - // 400 - &.pi-action-button__font-weight--400 { - @include actionButtonFontWeight(400); - } - // 600 - &.pi-action-button__font-weight--600 { - @include actionButtonFontWeight(600); - } -} +@mixin actionButtonChevronSize($icon-height, $icon-width, $head-size) { + svg { + height: $icon-height; + width: $icon-width; + + // Chevron head + & > g { + &:nth-child(1) { + height: $head-size; + width: $head-size; + } + } + } +} + +@mixin actionButtonFontWeight($weight) { + & > button { + & > span { + font: { + weight: $weight; + } + } + } +} + +:host { + display: block; + + & > button { + all: unset; + display: flex; + align-items: center; + justify-content: center; + // Size + // X Small + &.pi-button__x-small { + @include actionButtonChevronSize( + var(--pi-spacing-x-small), + var(--pi-spacing-small), + var(--pi-spacing-xx-small) + ); + gap: var(--pi-spacing-xxxx-small); + } + // Small + &.pi-button__small { + @include actionButtonChevronSize( + var(--pi-spacing-x-small), + var(--pi-spacing-small), + var(--pi-spacing-xx-small) + ); + gap: var(--pi-spacing-xxx-small); + } + // Medium + &.pi-button__medium { + @include actionButtonChevronSize( + var(--pi-spacing-small), + var(--pi-spacing-medium), + var(--pi-spacing-x-small) + ); + gap: var(--pi-spacing-xxx-small); + } + // Large & w100 + &.pi-button__large, + &.pi-button__w100 { + @include actionButtonChevronSize( + var(--pi-spacing-small), + var(--pi-spacing-medium), + var(--pi-spacing-x-small) + ); + gap: var(--pi-spacing-xx-small); + } + } + svg { + transition: all 100ms ease-in-out; + opacity: 1; + transform: scaleX(1); + transition: transform 100ms ease-in-out, opacity 100ms ease-in-out; + & > g { + // Head + &:nth-child(1) { + transform: translateX(0); + transition: transform 100ms ease-in-out; + } + // Body + &:nth-child(2) { + opacity: 0; + transform: scaleX(1); + transition: transform 100ms ease-in-out, opacity 100ms ease-in-out; + } + } + } + + &:hover { + // Icon + svg { + transition: all 100ms ease-in-out; + opacity: 1; + transform: scaleX(1); + transition: transform 100ms ease-in-out, opacity 100ms ease-in-out; + & > g { + // Head + &:nth-child(1) { + transform: translateX(3px); + } + // Body + &:nth-child(2) { + opacity: 1; + transform: scaleX(1.75); + } + } + } + & > button { + cursor: pointer; + background-color: var(--pi-color-white); + } + } + // Direction + // Back + &.pi-action-button__direction--back { + & > button { + flex-direction: row-reverse; + svg { + transform: rotate(-180deg); + } + } + } + // Font weight + // 300 + &.pi-action-button__font-weight--300 { + @include actionButtonFontWeight(300); + } + // 400 + &.pi-action-button__font-weight--400 { + @include actionButtonFontWeight(400); + } + // 600 + &.pi-action-button__font-weight--600 { + @include actionButtonFontWeight(600); + } +} diff --git a/libs/ui/src/lib/ui/button/action-button/action-button.component.ts b/libs/ui/src/lib/ui/button/action-button/action-button.component.ts index 121071b..2beb63a 100644 --- a/libs/ui/src/lib/ui/button/action-button/action-button.component.ts +++ b/libs/ui/src/lib/ui/button/action-button/action-button.component.ts @@ -1,77 +1,77 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { buttonSize, mode } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { buttonSize, mode } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; -import { NgIf } from '@angular/common'; - +import { NgIf } from '@angular/common'; + @Component({ selector: 'pi-action-button', templateUrl: './action-button.component.html', styleUrls: ['./action-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf], -}) -export class PiActionButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - return ['pi-action-button', this.sizeClass, this.directionClass, this.fontWeightClass].join( - ' ' - ); - } - - readonly previous = input(false); - override readonly size = input('medium'); - readonly text = input(); - readonly hasPadding = input(true); - readonly hasIcon = input(true); - readonly label = input(); - readonly buttonType = input<'default' | 'menu-item'>('default'); - readonly mode = input('dark'); - readonly direction = input<'back' | 'forward'>('forward'); - readonly fontWeight = input<'300' | '400' | '600'>('600'); - - get buttonColorClass(): string | null { +}) +export class PiActionButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + return ['pi-action-button', this.sizeClass, this.directionClass, this.fontWeightClass].join( + ' ' + ); + } + + readonly previous = input(false); + override readonly size = input('medium'); + readonly text = input(); + readonly hasPadding = input(true); + readonly hasIcon = input(true); + readonly label = input(); + readonly buttonType = input<'default' | 'menu-item'>('default'); + readonly mode = input('dark'); + readonly direction = input<'back' | 'forward'>('forward'); + readonly fontWeight = input<'300' | '400' | '600'>('600'); + + get buttonColorClass(): string | null { const color = this.color(); - return color ? `pi-color__${color}` : null; - } - - get directionClass(): string | null { + return color ? `pi-color__${color}` : null; + } + + get directionClass(): string | null { const direction = this.direction(); - return direction ? `pi-action-button__direction--${direction}` : null; - } - - override get sizeClass(): string | null { + return direction ? `pi-action-button__direction--${direction}` : null; + } + + override get sizeClass(): string | null { const size = this.size(); - return size ? `pi-button__${size}` : null; - } - - get textClass(): string | null { - return this.text() ? 'has-text' : null; - } - - get fontWeightClass(): string | null { + return size ? `pi-button__${size}` : null; + } + + get textClass(): string | null { + return this.text() ? 'has-text' : null; + } + + get fontWeightClass(): string | null { const fontWeight = this.fontWeight(); - return fontWeight ? `pi-action-button__font-weight--${fontWeight}` : ''; - } - - get hasPaddingClass(): string | null { - return this.hasPadding() ? null : 'pi-button__trimmed'; - } - - get hasIconClass(): string | null { - return this.hasIcon() ? null : 'has-icon'; - } - - override get appearanceClass(): string | null { + return fontWeight ? `pi-action-button__font-weight--${fontWeight}` : ''; + } + + get hasPaddingClass(): string | null { + return this.hasPadding() ? null : 'pi-button__trimmed'; + } + + get hasIconClass(): string | null { + return this.hasIcon() ? null : 'has-icon'; + } + + override get appearanceClass(): string | null { const appearance = this.appearance(); - return appearance !== 'fill' ? `pi-button__appearance--${appearance}` : null; - } - - get buttonTypeClass(): string | null { + return appearance !== 'fill' ? `pi-button__appearance--${appearance}` : null; + } + + get buttonTypeClass(): string | null { const buttonType = this.buttonType(); - return buttonType !== 'default' ? `pi-button__type--${buttonType}` : null; - } - - get modeClass(): string | null { + return buttonType !== 'default' ? `pi-button__type--${buttonType}` : null; + } + + get modeClass(): string | null { const modeValue = this.mode(); - return modeValue && `pi-color__mode--${modeValue}`; - } -} + return modeValue && `pi-color__mode--${modeValue}`; + } +} diff --git a/libs/ui/src/lib/ui/button/base-button.component.ts b/libs/ui/src/lib/ui/button/base-button.component.ts index 84d08c7..e6e7042 100644 --- a/libs/ui/src/lib/ui/button/base-button.component.ts +++ b/libs/ui/src/lib/ui/button/base-button.component.ts @@ -1,51 +1,51 @@ -// Angular -import { Directive, OnInit, input, output } from '@angular/core'; -import { buttonSize, styleType, buttonStyle, flexDirection } from '../../styles'; - -// Style definitions -@Directive() -export abstract class PiBaseButtonComponent implements OnInit { - readonly size = input('medium'); - readonly color = input('primary'); - readonly appearance = input('fill'); - readonly disabled = input(false); - readonly allowPropagation = input.required(); - readonly flexDirection = input.required(); - - readonly execute = output(); - - ngOnInit(): void { - this.sizeClass; - this.flexDirectionClass; - } - - protected get colorClass(): string { - return `pi-color__${this.color()}`; - } - - protected get sizeClass(): string | null { - return `pi-button__${this.size()}`; - } - - protected get appearanceClass(): string | null { - return `pi-button__appearance--${this.appearance()}`; - } - - protected get flexDirectionClass(): string { - return `pi-button__flex-direction--${this.flexDirection()}`; - } - - protected get disabledClass(): string { - return 'is-disabled'; - } - - onClickHandler(event: any): void { - if (!this.disabled()) { - if (!this.allowPropagation()) { - event.preventDefault(); - event.stopPropagation(); - } - this.execute.emit(event); - } - } -} +// Angular +import { Directive, OnInit, input, output } from '@angular/core'; +import { buttonSize, styleType, buttonStyle, flexDirection } from '../../styles'; + +// Style definitions +@Directive() +export abstract class PiBaseButtonComponent implements OnInit { + readonly size = input('medium'); + readonly color = input('primary'); + readonly appearance = input('fill'); + readonly disabled = input(false); + readonly allowPropagation = input.required(); + readonly flexDirection = input.required(); + + readonly execute = output(); + + ngOnInit(): void { + this.sizeClass; + this.flexDirectionClass; + } + + protected get colorClass(): string { + return `pi-color__${this.color()}`; + } + + protected get sizeClass(): string | null { + return `pi-button__${this.size()}`; + } + + protected get appearanceClass(): string | null { + return `pi-button__appearance--${this.appearance()}`; + } + + protected get flexDirectionClass(): string { + return `pi-button__flex-direction--${this.flexDirection()}`; + } + + protected get disabledClass(): string { + return 'is-disabled'; + } + + onClickHandler(event: any): void { + if (!this.disabled()) { + if (!this.allowPropagation()) { + event.preventDefault(); + event.stopPropagation(); + } + this.execute.emit(event); + } + } +} diff --git a/libs/ui/src/lib/ui/button/button.directive.ts b/libs/ui/src/lib/ui/button/button.directive.ts index a0edf63..32eadba 100644 --- a/libs/ui/src/lib/ui/button/button.directive.ts +++ b/libs/ui/src/lib/ui/button/button.directive.ts @@ -1,77 +1,77 @@ -import { Directive, HostBinding, input } from '@angular/core'; -import { buttonSize } from '../../styles'; - -// Style -@Directive({ selector: '[pi-ghost]', }) -export class PiGhostButtonDirective { - @HostBinding('class') get classes(): string { - const hasPaddingClass = this.hasPadding() ? '' : 'pi-button__trimmed'; - return ['pi-button', 'pi-button__appearance--ghost', hasPaddingClass].join(' '); - } - readonly hasPadding = input(true); -} - -@Directive({ selector: '[pi-outline]', }) -export class PiOutlineButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__appearance--outline'; - } -} - -@Directive({ selector: '[pi-button-size]', }) -export class PiButtonSizeDirective { - @HostBinding('class') get classes(): string { - return this.sizeClass; - } - - readonly size = input.required(); - - protected get sizeClass(): string { +import { Directive, HostBinding, input } from '@angular/core'; +import { buttonSize } from '../../styles'; + +// Style +@Directive({ selector: '[pi-ghost]', }) +export class PiGhostButtonDirective { + @HostBinding('class') get classes(): string { + const hasPaddingClass = this.hasPadding() ? '' : 'pi-button__trimmed'; + return ['pi-button', 'pi-button__appearance--ghost', hasPaddingClass].join(' '); + } + readonly hasPadding = input(true); +} + +@Directive({ selector: '[pi-outline]', }) +export class PiOutlineButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__appearance--outline'; + } +} + +@Directive({ selector: '[pi-button-size]', }) +export class PiButtonSizeDirective { + @HostBinding('class') get classes(): string { + return this.sizeClass; + } + + readonly size = input.required(); + + protected get sizeClass(): string { const size = this.size(); - return !!size && `pi-button__${size}`; - } -} - -// Size -@Directive({ selector: '[xx-small]', }) -export class PiXXSmallButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__xx-small'; - } -} - -// Size -@Directive({ selector: '[x-small]', }) -export class PiXSmallButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__x-small'; - } -} - -@Directive({ selector: '[small]', }) -export class PiSmallButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__small'; - } -} - -@Directive({ selector: '[medium]', }) -export class PiMediumButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__medium'; - } -} - -@Directive({ selector: '[large]', }) -export class PiLargeButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__large'; - } -} - -@Directive({ selector: '[w100]', }) -export class PiW100ButtonDirective { - @HostBinding('class') get classes(): string { - return 'pi-button pi-button__w100'; - } -} + return !!size && `pi-button__${size}`; + } +} + +// Size +@Directive({ selector: '[xx-small]', }) +export class PiXXSmallButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__xx-small'; + } +} + +// Size +@Directive({ selector: '[x-small]', }) +export class PiXSmallButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__x-small'; + } +} + +@Directive({ selector: '[small]', }) +export class PiSmallButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__small'; + } +} + +@Directive({ selector: '[medium]', }) +export class PiMediumButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__medium'; + } +} + +@Directive({ selector: '[large]', }) +export class PiLargeButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__large'; + } +} + +@Directive({ selector: '[w100]', }) +export class PiW100ButtonDirective { + @HostBinding('class') get classes(): string { + return 'pi-button pi-button__w100'; + } +} diff --git a/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.html b/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.html index 8f95a2d..55e21c1 100644 --- a/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.html +++ b/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.html @@ -1 +1 @@ - + diff --git a/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.scss b/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.scss index f790186..518e550 100644 --- a/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.scss +++ b/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.scss @@ -1,37 +1,37 @@ -:host { - display: flex; - justify-content: center; - align-items: center; - transition: all 0.35s linear; - transition-delay: 0.1s; - - &.pi-button__medium { - height: var(--pi-spacing-x-large); - width: var(--pi-spacing-x-large); - .mat-icon { - width: var(--pi-spacing-small); - } - } - - &:hover { - cursor: pointer; - } - - &.is-expanded { - transform: rotate(180deg); - } - - &.pi-color__primary { - background-color: var(--pi-color-primary-50); - border: 1px solid var(--pi-color-primary-100); - .mat-icon { - color: var(--pi-color-primary); - } - &:hover { - border: 1px solid var(--pi-color-highlighted-200); - .mat-icon { - color: var(--pi-color-highlighted-200); - } - } - } -} +:host { + display: flex; + justify-content: center; + align-items: center; + transition: all 0.35s linear; + transition-delay: 0.1s; + + &.pi-button__medium { + height: var(--pi-spacing-x-large); + width: var(--pi-spacing-x-large); + .mat-icon { + width: var(--pi-spacing-small); + } + } + + &:hover { + cursor: pointer; + } + + &.is-expanded { + transform: rotate(180deg); + } + + &.pi-color__primary { + background-color: var(--pi-color-primary-50); + border: 1px solid var(--pi-color-primary-100); + .mat-icon { + color: var(--pi-color-primary); + } + &:hover { + border: 1px solid var(--pi-color-highlighted-200); + .mat-icon { + color: var(--pi-color-highlighted-200); + } + } + } +} diff --git a/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts b/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts index 5ef89bd..bccda08 100644 --- a/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts +++ b/libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts @@ -4,24 +4,24 @@ import { HostBinding, Input, output -} from '@angular/core'; -import { ComponentFamilyClass } from '../../../styles'; +} from '@angular/core'; +import { ComponentFamilyClass } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-chevron-button', templateUrl: './chevron-button.component.html', styleUrls: ['./chevron-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], -}) -export class PiChevronButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - return ['pi-chevron-button', ComponentFamilyClass.Button, this.colorClass, this.sizeClass].join( - ' ' - ); - } - - readonly toggle = output(); -} +}) +export class PiChevronButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + return ['pi-chevron-button', ComponentFamilyClass.Button, this.colorClass, this.sizeClass].join( + ' ' + ); + } + + readonly toggle = output(); +} diff --git a/libs/ui/src/lib/ui/button/close-button/close-button.component.html b/libs/ui/src/lib/ui/button/close-button/close-button.component.html index 0241d53..32569dc 100644 --- a/libs/ui/src/lib/ui/button/close-button/close-button.component.html +++ b/libs/ui/src/lib/ui/button/close-button/close-button.component.html @@ -1 +1 @@ - + diff --git a/libs/ui/src/lib/ui/button/close-button/close-button.component.scss b/libs/ui/src/lib/ui/button/close-button/close-button.component.scss index 2b9b069..8e35187 100644 --- a/libs/ui/src/lib/ui/button/close-button/close-button.component.scss +++ b/libs/ui/src/lib/ui/button/close-button/close-button.component.scss @@ -1,140 +1,140 @@ -// Close button -:host { - display: flex; - justify-content: center; - cursor: pointer; - - &::after, - &::before { - content: ''; - position: absolute; - height: 0.085rem; - margin-top: var(--pi-spacing-small); - background-color: var(--pi-color-grey); - transition: all 0.22s ease-in; - } - - &::after { - transform: rotate(45deg); - } - - &::before { - transform: rotate(-45deg); - } - label { - position: absolute; - color: var(--pi-color-primary-900); - text-transform: uppercase; - letter-spacing: var(--pi-spacing-xxx-small); - transition: all 0.22s ease-in; - transition-delay: 0.11s; - opacity: 0; - } - - &:hover { - &::after { - transform: rotate(-45deg); - background-color: var(--pi-color-primary-900); - } - - &::before { - transform: rotate(45deg); - background-color: var(--pi-color-primary-900); - } - - label { - opacity: 1; - } - } - // Sizes - &.pi-button__small { - label { - margin: var(--pi-spacing-x-large) 0 0 0; - font: { - size: 0.55rem; - } - } - } - &.pi-button__medium { - label { - margin: var(--pi-spacing-xx-large) 0 0 0; - font: { - size: var(--pi-font-size-xx-small); - } - } - } - &.pi-button__large { - label { - margin: var(--pi-spacing-xxx-large) 0 0 0; - font: { - size: var(--pi-font-size-xx-small); - } - } - } - &.pi-close-button__single { - label { - display: none; - } - } -} - -html { - &.is-mobile { - :host { - // Sizes - &.pi-button__small { - width: var(--pi-spacing-x-large); - height: var(--pi-spacing-x-large); - &::after, - &::before { - width: var(--pi-spacing-medium); - } - } - &.pi-button__medium { - width: var(--pi-spacing-xx-large); - height: var(--pi-spacing-xx-large); - &::after, - &::before { - width: var(--pi-spacing-large); - } - } - &.pi-button__large { - width: var(--pi-spacing-xx-large); - height: var(--pi-spacing-xx-large); - &::after, - &::before { - width: var(--pi-spacing-x-large); - } - } - } - } - &:not(.is-mobile) { - :host { - // Sizes - &.pi-button__small { - width: var(--pi-spacing-large); - height: var(--pi-spacing-large); - &::after, - &::before { - width: var(--pi-spacing-medium); - } - } - &.pi-button__medium { - width: var(--pi-spacing-x-large); - height: var(--pi-spacing-x-large); - &::after, - &::before { - width: var(--pi-spacing-x-large); - } - } - &.pi-button__large { - width: var(--pi-spacing-xx-large); - height: var(--pi-spacing-xx-large); - &::after, - &::before { - width: var(--pi-spacing-xx-large); - } - } - } - } -} +// Close button +:host { + display: flex; + justify-content: center; + cursor: pointer; + + &::after, + &::before { + content: ''; + position: absolute; + height: 0.085rem; + margin-top: var(--pi-spacing-small); + background-color: var(--pi-color-grey); + transition: all 0.22s ease-in; + } + + &::after { + transform: rotate(45deg); + } + + &::before { + transform: rotate(-45deg); + } + label { + position: absolute; + color: var(--pi-color-primary-900); + text-transform: uppercase; + letter-spacing: var(--pi-spacing-xxx-small); + transition: all 0.22s ease-in; + transition-delay: 0.11s; + opacity: 0; + } + + &:hover { + &::after { + transform: rotate(-45deg); + background-color: var(--pi-color-primary-900); + } + + &::before { + transform: rotate(45deg); + background-color: var(--pi-color-primary-900); + } + + label { + opacity: 1; + } + } + // Sizes + &.pi-button__small { + label { + margin: var(--pi-spacing-x-large) 0 0 0; + font: { + size: 0.55rem; + } + } + } + &.pi-button__medium { + label { + margin: var(--pi-spacing-xx-large) 0 0 0; + font: { + size: var(--pi-font-size-xx-small); + } + } + } + &.pi-button__large { + label { + margin: var(--pi-spacing-xxx-large) 0 0 0; + font: { + size: var(--pi-font-size-xx-small); + } + } + } + &.pi-close-button__single { + label { + display: none; + } + } +} + +html { + &.is-mobile { + :host { + // Sizes + &.pi-button__small { + width: var(--pi-spacing-x-large); + height: var(--pi-spacing-x-large); + &::after, + &::before { + width: var(--pi-spacing-medium); + } + } + &.pi-button__medium { + width: var(--pi-spacing-xx-large); + height: var(--pi-spacing-xx-large); + &::after, + &::before { + width: var(--pi-spacing-large); + } + } + &.pi-button__large { + width: var(--pi-spacing-xx-large); + height: var(--pi-spacing-xx-large); + &::after, + &::before { + width: var(--pi-spacing-x-large); + } + } + } + } + &:not(.is-mobile) { + :host { + // Sizes + &.pi-button__small { + width: var(--pi-spacing-large); + height: var(--pi-spacing-large); + &::after, + &::before { + width: var(--pi-spacing-medium); + } + } + &.pi-button__medium { + width: var(--pi-spacing-x-large); + height: var(--pi-spacing-x-large); + &::after, + &::before { + width: var(--pi-spacing-x-large); + } + } + &.pi-button__large { + width: var(--pi-spacing-xx-large); + height: var(--pi-spacing-xx-large); + &::after, + &::before { + width: var(--pi-spacing-xx-large); + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/button/close-button/close-button.component.ts b/libs/ui/src/lib/ui/button/close-button/close-button.component.ts index f2650c6..e7d204f 100644 --- a/libs/ui/src/lib/ui/button/close-button/close-button.component.ts +++ b/libs/ui/src/lib/ui/button/close-button/close-button.component.ts @@ -4,26 +4,26 @@ import { HostBinding, input, output -} from '@angular/core'; -import { ComponentFamilyClass } from '../../../styles'; +} from '@angular/core'; +import { ComponentFamilyClass } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-close-button', templateUrl: './close-button.component.html', styleUrls: ['./close-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], -}) -export class PiCloseButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - const hasLabelClass = this.hasLabel() === false ? 'pi-close-button__single' : ''; - return ['pi-close-button', ComponentFamilyClass.Button, this.sizeClass, hasLabelClass].join( - ' ' - ); - } - - readonly hasLabel = input(true); - readonly toggle = output(); -} +}) +export class PiCloseButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + const hasLabelClass = this.hasLabel() === false ? 'pi-close-button__single' : ''; + return ['pi-close-button', ComponentFamilyClass.Button, this.sizeClass, hasLabelClass].join( + ' ' + ); + } + + readonly hasLabel = input(true); + readonly toggle = output(); +} diff --git a/libs/ui/src/lib/ui/button/hamburger/hamburger.component.html b/libs/ui/src/lib/ui/button/hamburger/hamburger.component.html index ca95102..0790401 100644 --- a/libs/ui/src/lib/ui/button/hamburger/hamburger.component.html +++ b/libs/ui/src/lib/ui/button/hamburger/hamburger.component.html @@ -1,6 +1,6 @@ -
- - - -
- +
+ + + +
+ diff --git a/libs/ui/src/lib/ui/button/hamburger/hamburger.component.scss b/libs/ui/src/lib/ui/button/hamburger/hamburger.component.scss index 12593cc..6058ff1 100644 --- a/libs/ui/src/lib/ui/button/hamburger/hamburger.component.scss +++ b/libs/ui/src/lib/ui/button/hamburger/hamburger.component.scss @@ -1,75 +1,75 @@ -:host { - div { - span { - display: block; - height: var(--pi-spacing-xxxx-small); - width: var(--pi-spacing-xx-large); - margin: 0.35rem auto; - border-radius: 0.0625rem; - transition: all 0.25s ease-in-out; - } - &:hover { - cursor: pointer; - } - } - label { - position: absolute; - margin: 0 -0.75rem 0; - color: var(--pi-color-primary-900); - text-transform: uppercase; - letter-spacing: var(--pi-spacing-xxx-small); - transition: all 0.22s ease-in; - transition-delay: 0.11s; - opacity: 0; - font: { - size: 0.55rem; - } - } - &.is-open { - div { - span { - &:nth-child(odd) { - width: var(--pi-spacing-x-large); - } - &:nth-child(even) { - opacity: 0; - } - &:nth-child(1) { - transform: translateY(0.35rem) rotate(-45deg); - } - &:nth-child(3) { - transform: translateY(-0.6rem) rotate(45deg); - } - } - } - label { - opacity: 1; - } - } - // Primary - &.pi-color__primary { - div { - span { - background-color: var(--pi-color-primary); - } - &:hover { - span { - background-color: var(--pi-color-primary-900); - } - } - } - } - // Accent - &.pi-color__accent { - div { - span { - background-color: var(--pi-color-accent); - } - &:hover { - span { - background-color: var(--pi-color-accent-900); - } - } - } - } -} +:host { + div { + span { + display: block; + height: var(--pi-spacing-xxxx-small); + width: var(--pi-spacing-xx-large); + margin: 0.35rem auto; + border-radius: 0.0625rem; + transition: all 0.25s ease-in-out; + } + &:hover { + cursor: pointer; + } + } + label { + position: absolute; + margin: 0 -0.75rem 0; + color: var(--pi-color-primary-900); + text-transform: uppercase; + letter-spacing: var(--pi-spacing-xxx-small); + transition: all 0.22s ease-in; + transition-delay: 0.11s; + opacity: 0; + font: { + size: 0.55rem; + } + } + &.is-open { + div { + span { + &:nth-child(odd) { + width: var(--pi-spacing-x-large); + } + &:nth-child(even) { + opacity: 0; + } + &:nth-child(1) { + transform: translateY(0.35rem) rotate(-45deg); + } + &:nth-child(3) { + transform: translateY(-0.6rem) rotate(45deg); + } + } + } + label { + opacity: 1; + } + } + // Primary + &.pi-color__primary { + div { + span { + background-color: var(--pi-color-primary); + } + &:hover { + span { + background-color: var(--pi-color-primary-900); + } + } + } + } + // Accent + &.pi-color__accent { + div { + span { + background-color: var(--pi-color-accent); + } + &:hover { + span { + background-color: var(--pi-color-accent-900); + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts b/libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts index 5d8161f..f785898 100644 --- a/libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts +++ b/libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts @@ -1,18 +1,18 @@ -import { ChangeDetectionStrategy, Component, HostBinding, output } from '@angular/core'; -import { ComponentFamilyClass } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, output } from '@angular/core'; +import { ComponentFamilyClass } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-hamburger', templateUrl: './hamburger.component.html', styleUrls: ['./hamburger.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], -}) -export class PiHamburgerComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - return ['pi-hamburger', ComponentFamilyClass.Button, this.colorClass].join(' '); - } - readonly toggle = output(); -} +}) +export class PiHamburgerComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + return ['pi-hamburger', ComponentFamilyClass.Button, this.colorClass].join(' '); + } + readonly toggle = output(); +} diff --git a/libs/ui/src/lib/ui/button/icon-button/icon-button.component.html b/libs/ui/src/lib/ui/button/icon-button/icon-button.component.html index 24d4773..dc7b1dc 100644 --- a/libs/ui/src/lib/ui/button/icon-button/icon-button.component.html +++ b/libs/ui/src/lib/ui/button/icon-button/icon-button.component.html @@ -1,54 +1,54 @@ - - - + + + diff --git a/libs/ui/src/lib/ui/button/icon-button/icon-button.component.scss b/libs/ui/src/lib/ui/button/icon-button/icon-button.component.scss index 75f06e2..4af4dbb 100644 --- a/libs/ui/src/lib/ui/button/icon-button/icon-button.component.scss +++ b/libs/ui/src/lib/ui/button/icon-button/icon-button.component.scss @@ -1,189 +1,189 @@ -@mixin iconButtonExpandCollapse($rotate) { - .mat-icon { - transform: rotate(#{$rotate}); - } - &:hover { - .mat-icon { - transform: scale(1.2) rotate(#{$rotate}); - } - } -} - -:host { - transition: all 0.2s ease; - - & > button { - display: flex; - align-items: center; - justify-content: center; - gap: var(--pi-spacing-xx-small); - &:not(:disabled) { - &:hover { - cursor: pointer; - } - } - - // Single - &.pi-button__icon--single { - height: var(--pi-spacing-xxx-large); - width: var(--pi-spacing-xxx-large); - } - &:not(.pi-button__icon--single) { - button { - text-decoration: underline; - } - } - & > img { - height: var(--pi-spacing-x-large); - width: var(--pi-spacing-x-large); - } - } - // Has Before Label - &.pi-button__icon--before-label { - & > button { - justify-content: flex-end; - text-decoration: none; - font: { - size: unset; - } - & > small { - position: absolute; - opacity: 0; - transform: translateX(-2rem); - white-space: pre-wrap; - width: min-content; - text-align: right; - line-height: initial; - color: var(--pi-color-primary-200); - font: { - size: var(--pi-font-size-xx-small); - family: 'Soehne', Helvetica, Arial, sans-serif; - } - } - &:hover { - & > small { - transition: all 0.2s ease-in-out; - transition-delay: 0.05s; - transform: translateX(-1.5rem); - opacity: 1; - color: var(--pi-color-primary); - } - } - } - } - // Sizes - &.pi-button__x-small { - & > button { - // Single Icon - &.pi-button__icon--single { - button, - .mat-icon { - width: var(--pi-spacing-medium); - height: var(--pi-spacing-medium); - } - } - // Not Single Icon - &:not(.pi-button__icon--single) { - .mat-icon { - width: var(--pi-spacing-medium); - height: var(--pi-spacing-medium); - } - } - } - } - &.pi-button__small { - & > button { - // Single Icon - &.pi-button__icon--single { - button, - .mat-icon { - width: var(--pi-spacing-medium); - height: var(--pi-spacing-medium); - } - } - // Not Single Icon - &:not(.pi-button__icon--single) { - .mat-icon { - width: var(--pi-spacing-small); - height: var(--pi-spacing-small); - } - } - } - } - &.pi-button__medium { - & > button { - // Single Icon - &.pi-button__icon--single { - button, - .mat-icon { - width: var(--pi-spacing-large); - height: var(--pi-spacing-large); - } - } - // Not Single Icon - &:not(.pi-button__icon--single) { - .mat-icon { - width: 1.125rem; - height: 1.125rem; - } - } - } - } - &.pi-button__large { - & > button { - // Single Icon - &.pi-button__icon--single { - button, - .mat-icon { - width: var(--pi-spacing-xx-large); - height: var(--pi-spacing-xx-large); - } - } - // Not Single Icon - &:not(.pi-button__icon--single) { - .mat-icon { - width: var(--pi-spacing-x-large); - height: var(--pi-spacing-x-large); - } - } - } - } - - &.pi-button__x-small { - button { - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium); - font: { - size: 0.75rem; - } - } - } - - &.pi-button__w100 { - width: 100%; - } - .mat-icon { - display: flex; - transition: all 0.2s ease; - } - - &:not(.is-expanded):not(.is-collapsed) { - & > button { - &:not(:disabled) { - &:hover { - .mat-icon, - img { - transform: scale(1.2); - } - } - } - } - } - - // States - &.is-collapsed { - @include iconButtonExpandCollapse(0); - } - &.is-expanded { - @include iconButtonExpandCollapse(90deg); - } -} +@mixin iconButtonExpandCollapse($rotate) { + .mat-icon { + transform: rotate(#{$rotate}); + } + &:hover { + .mat-icon { + transform: scale(1.2) rotate(#{$rotate}); + } + } +} + +:host { + transition: all 0.2s ease; + + & > button { + display: flex; + align-items: center; + justify-content: center; + gap: var(--pi-spacing-xx-small); + &:not(:disabled) { + &:hover { + cursor: pointer; + } + } + + // Single + &.pi-button__icon--single { + height: var(--pi-spacing-xxx-large); + width: var(--pi-spacing-xxx-large); + } + &:not(.pi-button__icon--single) { + button { + text-decoration: underline; + } + } + & > img { + height: var(--pi-spacing-x-large); + width: var(--pi-spacing-x-large); + } + } + // Has Before Label + &.pi-button__icon--before-label { + & > button { + justify-content: flex-end; + text-decoration: none; + font: { + size: unset; + } + & > small { + position: absolute; + opacity: 0; + transform: translateX(-2rem); + white-space: pre-wrap; + width: min-content; + text-align: right; + line-height: initial; + color: var(--pi-color-primary-200); + font: { + size: var(--pi-font-size-xx-small); + family: 'Soehne', Helvetica, Arial, sans-serif; + } + } + &:hover { + & > small { + transition: all 0.2s ease-in-out; + transition-delay: 0.05s; + transform: translateX(-1.5rem); + opacity: 1; + color: var(--pi-color-primary); + } + } + } + } + // Sizes + &.pi-button__x-small { + & > button { + // Single Icon + &.pi-button__icon--single { + button, + .mat-icon { + width: var(--pi-spacing-medium); + height: var(--pi-spacing-medium); + } + } + // Not Single Icon + &:not(.pi-button__icon--single) { + .mat-icon { + width: var(--pi-spacing-medium); + height: var(--pi-spacing-medium); + } + } + } + } + &.pi-button__small { + & > button { + // Single Icon + &.pi-button__icon--single { + button, + .mat-icon { + width: var(--pi-spacing-medium); + height: var(--pi-spacing-medium); + } + } + // Not Single Icon + &:not(.pi-button__icon--single) { + .mat-icon { + width: var(--pi-spacing-small); + height: var(--pi-spacing-small); + } + } + } + } + &.pi-button__medium { + & > button { + // Single Icon + &.pi-button__icon--single { + button, + .mat-icon { + width: var(--pi-spacing-large); + height: var(--pi-spacing-large); + } + } + // Not Single Icon + &:not(.pi-button__icon--single) { + .mat-icon { + width: 1.125rem; + height: 1.125rem; + } + } + } + } + &.pi-button__large { + & > button { + // Single Icon + &.pi-button__icon--single { + button, + .mat-icon { + width: var(--pi-spacing-xx-large); + height: var(--pi-spacing-xx-large); + } + } + // Not Single Icon + &:not(.pi-button__icon--single) { + .mat-icon { + width: var(--pi-spacing-x-large); + height: var(--pi-spacing-x-large); + } + } + } + } + + &.pi-button__x-small { + button { + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium); + font: { + size: 0.75rem; + } + } + } + + &.pi-button__w100 { + width: 100%; + } + .mat-icon { + display: flex; + transition: all 0.2s ease; + } + + &:not(.is-expanded):not(.is-collapsed) { + & > button { + &:not(:disabled) { + &:hover { + .mat-icon, + img { + transform: scale(1.2); + } + } + } + } + } + + // States + &.is-collapsed { + @include iconButtonExpandCollapse(0); + } + &.is-expanded { + @include iconButtonExpandCollapse(90deg); + } +} diff --git a/libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts b/libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts index deea83d..c799490 100644 --- a/libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts +++ b/libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts @@ -5,72 +5,72 @@ import { HostBinding, input, viewChild -} from '@angular/core'; -import { buttonSize, mode } from '../../../styles'; +} from '@angular/core'; +import { buttonSize, mode } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-icon-button', templateUrl: './icon-button.component.html', styleUrls: ['./icon-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiIconButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - const customIconClass = this.iconType() === 'custom' && 'pi-icon-button__custom-icon'; - const isResponsiveClass = this.isResponsive() ? 'is-responsive' : ''; - return [ - 'pi-icon-button', - this.sizeClass, - this.iconPositionClass, - this.widthClass, - customIconClass, - isResponsiveClass, - ].join(' '); - } - readonly contentRef = viewChild.required('content'); - - readonly icon = input(); - readonly iconType = input<'fill' | 'default' | 'custom'>('default'); - readonly previous = input(false); - readonly width = input('medium'); - readonly text = input(); - readonly hasPadding = input(true); - readonly mode = input('dark'); - readonly isResponsive = input(false); - - get buttonTypeClass(): string | null { +}) +export class PiIconButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + const customIconClass = this.iconType() === 'custom' && 'pi-icon-button__custom-icon'; + const isResponsiveClass = this.isResponsive() ? 'is-responsive' : ''; + return [ + 'pi-icon-button', + this.sizeClass, + this.iconPositionClass, + this.widthClass, + customIconClass, + isResponsiveClass, + ].join(' '); + } + readonly contentRef = viewChild.required('content'); + + readonly icon = input(); + readonly iconType = input<'fill' | 'default' | 'custom'>('default'); + readonly previous = input(false); + readonly width = input('medium'); + readonly text = input(); + readonly hasPadding = input(true); + readonly mode = input('dark'); + readonly isResponsive = input(false); + + get buttonTypeClass(): string | null { const appearance = this.appearance(); - return appearance ? `pi-button__appearance--${appearance}` : null; - } - - get buttonColorClass(): string | null { + return appearance ? `pi-button__appearance--${appearance}` : null; + } + + get buttonColorClass(): string | null { const color = this.color(); - return color ? `pi-color__${color}` : null; - } - - get widthClass(): string | null { + return color ? `pi-color__${color}` : null; + } + + get widthClass(): string | null { const width = this.width(); - return width ? `pi-button__${width}` : null; - } - - get textClass(): string | null { - return this.text() ? 'has-text' : 'pi-button__icon--single'; - } - - get iconPositionClass(): string | null { - return this.previous() ? 'pi-button__icon--previous' : null; - } - - get hasPaddingClass(): string | null { - return this.hasPadding() ? null : 'pi-button__trimmed'; - } - - get modeClass(): string | null { + return width ? `pi-button__${width}` : null; + } + + get textClass(): string | null { + return this.text() ? 'has-text' : 'pi-button__icon--single'; + } + + get iconPositionClass(): string | null { + return this.previous() ? 'pi-button__icon--previous' : null; + } + + get hasPaddingClass(): string | null { + return this.hasPadding() ? null : 'pi-button__trimmed'; + } + + get modeClass(): string | null { const modeValue = this.mode(); - return modeValue && `pi-color__mode--${modeValue}`; - } -} + return modeValue && `pi-color__mode--${modeValue}`; + } +} diff --git a/libs/ui/src/lib/ui/button/index.ts b/libs/ui/src/lib/ui/button/index.ts index e1db5ce..c614ba7 100644 --- a/libs/ui/src/lib/ui/button/index.ts +++ b/libs/ui/src/lib/ui/button/index.ts @@ -1,17 +1,17 @@ -// Export all buttons components -export * from './action-button/action-button.component'; -export * from './base-button.component'; -export * from './chevron-button/chevron-button.component'; -export * from './close-button/close-button.component'; -export * from './hamburger/hamburger.component'; -export * from './icon-button/icon-button.component'; -export * from './radio-button/radio-button.component'; -export * from './switch-button/switch-button.component'; -export * from './toggle-button/toggle-button.component'; - -// Export button's module - - -// Export button's directive -export * from './button.directive'; -export * from './switch-button/switch-button.directive'; +// Export all buttons components +export * from './action-button/action-button.component'; +export * from './base-button.component'; +export * from './chevron-button/chevron-button.component'; +export * from './close-button/close-button.component'; +export * from './hamburger/hamburger.component'; +export * from './icon-button/icon-button.component'; +export * from './radio-button/radio-button.component'; +export * from './switch-button/switch-button.component'; +export * from './toggle-button/toggle-button.component'; + +// Export button's module + + +// Export button's directive +export * from './button.directive'; +export * from './switch-button/switch-button.directive'; diff --git a/libs/ui/src/lib/ui/button/radio-button/radio-button.component.html b/libs/ui/src/lib/ui/button/radio-button/radio-button.component.html index dbea664..1861b45 100644 --- a/libs/ui/src/lib/ui/button/radio-button/radio-button.component.html +++ b/libs/ui/src/lib/ui/button/radio-button/radio-button.component.html @@ -1,5 +1,5 @@ - - - + + + diff --git a/libs/ui/src/lib/ui/button/radio-button/radio-button.component.scss b/libs/ui/src/lib/ui/button/radio-button/radio-button.component.scss index 772d96a..93835cb 100644 --- a/libs/ui/src/lib/ui/button/radio-button/radio-button.component.scss +++ b/libs/ui/src/lib/ui/button/radio-button/radio-button.component.scss @@ -1,78 +1,78 @@ -@mixin radioButtonColor($color) { - border-color: var(--pi-color-#{$color}); - &.is-active { - background-color: var(--pi-color-#{$color}-25); - & > span { - background-color: var(--pi-color-#{$color}); - } - } - - & > .mat-icon { - color: var(--pi-color-#{$color}); - } -} -:host { - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border: 1px solid; - - &:hover { - cursor: pointer; - } - - &.is-disabled { - opacity: 0.5; - } - - // Color - &.pi-color__primary { - @include radioButtonColor(primary); - } - &.pi-color__accent { - @include radioButtonColor(accent); - } - &.pi-color__highlighted { - @include radioButtonColor(highlighted); - } - &.pi-color__grey { - @include radioButtonColor(grey-300); - } - &.pi-color__success { - @include radioButtonColor(success); - } - &.pi-color__warn { - @include radioButtonColor(warn); - } - - // Type default || radio - &:not(.pi-radio-button__icon--check) { - height: var(--pi-spacing-x-large); - width: var(--pi-spacing-x-large); - & > span { - height: var(--pi-spacing-x-small); - width: var(--pi-spacing-x-small); - border-radius: 50%; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - } - } - // Icon - // Check - &.pi-radio-button__icon--check { - &:not(.is-active) { - .mat-icon { - display: none; - } - } - } - - // Size - &.pi-button__small { - width: var(--pi-spacing-medium); - height: var(--pi-spacing-medium); - } -} +@mixin radioButtonColor($color) { + border-color: var(--pi-color-#{$color}); + &.is-active { + background-color: var(--pi-color-#{$color}-25); + & > span { + background-color: var(--pi-color-#{$color}); + } + } + + & > .mat-icon { + color: var(--pi-color-#{$color}); + } +} +:host { + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border: 1px solid; + + &:hover { + cursor: pointer; + } + + &.is-disabled { + opacity: 0.5; + } + + // Color + &.pi-color__primary { + @include radioButtonColor(primary); + } + &.pi-color__accent { + @include radioButtonColor(accent); + } + &.pi-color__highlighted { + @include radioButtonColor(highlighted); + } + &.pi-color__grey { + @include radioButtonColor(grey-300); + } + &.pi-color__success { + @include radioButtonColor(success); + } + &.pi-color__warn { + @include radioButtonColor(warn); + } + + // Type default || radio + &:not(.pi-radio-button__icon--check) { + height: var(--pi-spacing-x-large); + width: var(--pi-spacing-x-large); + & > span { + height: var(--pi-spacing-x-small); + width: var(--pi-spacing-x-small); + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + } + } + // Icon + // Check + &.pi-radio-button__icon--check { + &:not(.is-active) { + .mat-icon { + display: none; + } + } + } + + // Size + &.pi-button__small { + width: var(--pi-spacing-medium); + height: var(--pi-spacing-medium); + } +} diff --git a/libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts b/libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts index 97ca51c..ad7b9e5 100644 --- a/libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts +++ b/libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts @@ -1,37 +1,37 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; import { PiBaseButtonComponent } from '../base-button.component'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-radio-button', templateUrl: './radio-button.component.html', styleUrls: ['./radio-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiRadioButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - return [ - 'pi-radio-button', - this.colorClass, - this.iconClass, - this.isActiveClass, - this.sizeClass, - ].join(' '); - } - - readonly icon = input<'bullet' | 'check'>('check'); - - // Status - readonly isActive = input.required(); - readonly isDisabled = input.required(); - - get iconClass(): string | null { - return this.icon() === 'check' ? 'pi-radio-button__icon--check' : null; - } - - get isActiveClass(): string | null { - return this.isActive() ? 'is-active' : null; - } -} +}) +export class PiRadioButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + return [ + 'pi-radio-button', + this.colorClass, + this.iconClass, + this.isActiveClass, + this.sizeClass, + ].join(' '); + } + + readonly icon = input<'bullet' | 'check'>('check'); + + // Status + readonly isActive = input.required(); + readonly isDisabled = input.required(); + + get iconClass(): string | null { + return this.icon() === 'check' ? 'pi-radio-button__icon--check' : null; + } + + get isActiveClass(): string | null { + return this.isActive() ? 'is-active' : null; + } +} diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html index 71ac5d8..3652107 100644 --- a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html +++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.html @@ -1,38 +1,38 @@ -
- - - - - - - - - - - - - - - - - - -
- - - - - - - {{ content }} - +
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + {{ content }} + diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss index c5a1733..bf1cc3b 100644 --- a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss +++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.scss @@ -1,133 +1,133 @@ -@mixin textColor($color: var(--pi-color-grey)) { - div { - span { - color: $color; - } - } -} - -:host { - position: relative; - &.has-icon { - div { - width: 6rem; - border-radius: var(--pi-border-radius-large); - span { - width: 3rem; - &::before { - width: 3rem; - border-radius: var(--pi-border-radius-large); - } - &.is-active { - &::before { - background-color: var(--pi-color-primary-200); - } - .mat-icon { - color: var(--pi-color-white); - opacity: 1; - } - } - &:not(.is-active) { - .mat-icon { - color: var(--pi-color-primary); - } - } - } - .mat-icon { - height: var(--pi-spacing-large); - width: var(--pi-spacing-large); - } - } - &.pi-button__large { - .mat-icon { - height: 1.75rem; - width: 1.75rem; - } - } - } - &:not(.has-icon) { - div { - width: fit-content; - padding: var(--pi-spacing-xxx-small); - background-color: var(--pi-color-grey-25); - border-radius: var(--pi-border-radius-medium); - - span { - position: relative; - padding: var(--pi-spacing-small) var(--pi-spacing-large); - border-radius: var(--pi-border-radius-small); - @include textColor(); - &::before { - width: 100%; - bottom: 0; - left: 0; - background-color: var(--pi-color-white); - border-radius: var(--pi-border-radius-small); - } - - &.is-active { - span { - font-weight: 400; - } - } - &:not(.is-active) { - span { - font-weight: 300; - } - } - } - } - // Text color - // Primary - &.pi-color__primary { - @include textColor(var(--pi-color-primary)); - } - // Highlighted - &.pi-color__highlighted { - @include textColor(var(--pi-color-highlighted)); - } - // accent - &.pi-color__accent { - @include textColor(var(--pi-color-accent)); - } - // Warn - &.pi-color__warn { - @include textColor(var(--pi-color-warn)); - } - } - div { - display: flex; - span { - display: flex; - justify-content: center; - align-items: center; - height: var(--pi-spacing-xxx-large); - transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s; - will-change: opacity; - &::before { - content: ''; - position: absolute; - z-index: -1; - height: var(--pi-spacing-xxx-large); - transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s; - box-shadow: var(--pi-box-shadow); - } - - &.is-active { - &::before { - transform: translateX(0%); - opacity: 1; - } - } - &:not(.is-active) { - &::before { - transform: translateX(-100%); - opacity: 0; - } - } - &:hover { - cursor: pointer; - } - } - } -} +@mixin textColor($color: var(--pi-color-grey)) { + div { + span { + color: $color; + } + } +} + +:host { + position: relative; + &.has-icon { + div { + width: 6rem; + border-radius: var(--pi-border-radius-large); + span { + width: 3rem; + &::before { + width: 3rem; + border-radius: var(--pi-border-radius-large); + } + &.is-active { + &::before { + background-color: var(--pi-color-primary-200); + } + .mat-icon { + color: var(--pi-color-white); + opacity: 1; + } + } + &:not(.is-active) { + .mat-icon { + color: var(--pi-color-primary); + } + } + } + .mat-icon { + height: var(--pi-spacing-large); + width: var(--pi-spacing-large); + } + } + &.pi-button__large { + .mat-icon { + height: 1.75rem; + width: 1.75rem; + } + } + } + &:not(.has-icon) { + div { + width: fit-content; + padding: var(--pi-spacing-xxx-small); + background-color: var(--pi-color-grey-25); + border-radius: var(--pi-border-radius-medium); + + span { + position: relative; + padding: var(--pi-spacing-small) var(--pi-spacing-large); + border-radius: var(--pi-border-radius-small); + @include textColor(); + &::before { + width: 100%; + bottom: 0; + left: 0; + background-color: var(--pi-color-white); + border-radius: var(--pi-border-radius-small); + } + + &.is-active { + span { + font-weight: 400; + } + } + &:not(.is-active) { + span { + font-weight: 300; + } + } + } + } + // Text color + // Primary + &.pi-color__primary { + @include textColor(var(--pi-color-primary)); + } + // Highlighted + &.pi-color__highlighted { + @include textColor(var(--pi-color-highlighted)); + } + // accent + &.pi-color__accent { + @include textColor(var(--pi-color-accent)); + } + // Warn + &.pi-color__warn { + @include textColor(var(--pi-color-warn)); + } + } + div { + display: flex; + span { + display: flex; + justify-content: center; + align-items: center; + height: var(--pi-spacing-xxx-large); + transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s; + will-change: opacity; + &::before { + content: ''; + position: absolute; + z-index: -1; + height: var(--pi-spacing-xxx-large); + transition: all 0.3s cubic-bezier(0.77, 0, 0.125, 1) 0.0015s; + box-shadow: var(--pi-box-shadow); + } + + &.is-active { + &::before { + transform: translateX(0%); + opacity: 1; + } + } + &:not(.is-active) { + &::before { + transform: translateX(-100%); + opacity: 0; + } + } + &:hover { + cursor: pointer; + } + } + } +} diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts index a1109a9..8d0487c 100644 --- a/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts +++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts @@ -5,47 +5,47 @@ import { input, model, output -} from '@angular/core'; -import { ComponentFamilyClass } from '../../../styles'; +} from '@angular/core'; +import { ComponentFamilyClass } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; import { NgTemplateOutlet } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-switch-button', templateUrl: './switch-button.component.html', styleUrls: ['./switch-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MatIcon], -}) -export class PiSwitchButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - const contentTypeClass = this.contentType() === 'icon' ? 'has-icon' : ''; - return [ - 'pi-switch-button', - ComponentFamilyClass.Button, - this.sizeClass, - this.colorClass, - contentTypeClass, - ].join(' '); - } - - readonly isActive = model(true); - readonly toggledTo = output<'on' | 'off'>(); - - readonly contentType = input<'icon' | 'text'>('icon'); +}) +export class PiSwitchButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + const contentTypeClass = this.contentType() === 'icon' ? 'has-icon' : ''; + return [ + 'pi-switch-button', + ComponentFamilyClass.Button, + this.sizeClass, + this.colorClass, + contentTypeClass, + ].join(' '); + } + + readonly isActive = model(true); + readonly toggledTo = output<'on' | 'off'>(); + + readonly contentType = input<'icon' | 'text'>('icon'); readonly content = input.required<[ string, string -]>(); - - toggleSelected(): void { - if (this.isActive()) { - this.isActive.set(false); - this.toggledTo.emit('off'); - } else { - this.isActive.set(true); - this.toggledTo.emit('on'); - } - } -} +]>(); + + toggleSelected(): void { + if (this.isActive()) { + this.isActive.set(false); + this.toggledTo.emit('off'); + } else { + this.isActive.set(true); + this.toggledTo.emit('on'); + } + } +} diff --git a/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts b/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts index 9a419c0..b2a62f8 100644 --- a/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts +++ b/libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts @@ -1,23 +1,23 @@ -import { Directive, HostBinding } from '@angular/core'; - -@Directive({ selector: 'pi-prefix-left', }) -export class PiSwitchButtonPrefixLeftDirective { - @HostBinding('class') className = 'pi-switch-button__prefix--left'; -} - -@Directive({ selector: 'pi-suffix-left', }) -export class PiSwitchButtonSuffixLeftDirective { - @HostBinding('class') className = 'pi-switch-button__suffix--left'; -} - -@Directive({ selector: 'pi-prefix-right', }) - export class PiSwitchButtonPrefixRightDirective { - @HostBinding('class') className = 'pi-switch-button__prefix--right'; - } - - @Directive({ selector: 'pi-suffix-right', }) - export class PiSwitchButtonSuffixRightDirective { - @HostBinding('class') className = 'pi-switch-button__suffix--right'; - } - - +import { Directive, HostBinding } from '@angular/core'; + +@Directive({ selector: 'pi-prefix-left', }) +export class PiSwitchButtonPrefixLeftDirective { + @HostBinding('class') className = 'pi-switch-button__prefix--left'; +} + +@Directive({ selector: 'pi-suffix-left', }) +export class PiSwitchButtonSuffixLeftDirective { + @HostBinding('class') className = 'pi-switch-button__suffix--left'; +} + +@Directive({ selector: 'pi-prefix-right', }) + export class PiSwitchButtonPrefixRightDirective { + @HostBinding('class') className = 'pi-switch-button__prefix--right'; + } + + @Directive({ selector: 'pi-suffix-right', }) + export class PiSwitchButtonSuffixRightDirective { + @HostBinding('class') className = 'pi-switch-button__suffix--right'; + } + + diff --git a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html index e04bcd4..243e8ff 100644 --- a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html +++ b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html @@ -1,9 +1,9 @@ - - -{{ amount() }} + + +{{ amount() }} diff --git a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss index de2c8ae..8717a25 100644 --- a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss +++ b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.scss @@ -1,166 +1,166 @@ -:host { - display: flex; - flex-direction: row-reverse; - & > button { - display: flex; - justify-content: flex-start; - align-items: center; - height: 3.125rem; - white-space: pre-line; - text-align: left; - color: var(--pi-color-primary); - border-radius: var(--pi-border-radius-medium); - -webkit-border-radius: var(--pi-border-radius-medium); - -moz-border-radius: var(--pi-border-radius-medium); - line-height: 125%; - font: { - weight: 300; - } - } - & > span { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - height: 1.35rem; - width: 1.35rem; - transform: translateX(0.375rem); - margin-top: -0.375rem; - background-color: var(--pi-color-accent); - border-radius: 50%; - color: var(--pi-color-white); - line-height: 1.35rem; - small { - font: { - size: var(--pi-font-size-xx-small); - } - } - } - &:not(.is-active) { - & > button { - background-color: var(--pi-color-white); - border: 1px solid var(--pi-color-primary-50); - &:not(:disabled) { - &:hover { - cursor: pointer; - transition: var(--pi-animation); - .mat-icon { - transform: scale(1.025); - transition: var(--pi-animation); - } - } - } - } - &:hover { - & > button { - &:not(:disabled) { - background-color: var(--pi-color-primary-25); - border: 1px solid var(--pi-color-primary-200); - } - } - } - } - // Active - &.is-active { - & > button { - background-color: var(--pi-color-primary-25); - border: 1px solid var(--pi-color-primary-75); - } - } - // Disabled - &.is-disabled { - & > button { - opacity: 0.33; - } - } - - // Icon type - // Stroke - &.pi-toggle-button__icon--stroke { - & > button { - gap: var(--pi-spacing-xx-small); - padding-left: var(--pi-spacing-x-small); - padding-right: var(--pi-spacing-medium); - font: { - size: var(--pi-font-size-x-small); - } - & > .mat-icon { - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - min-width: var(--pi-spacing-xx-large); - padding: 0.3rem; - border: 1px solid var(--pi-color-primary-200); - border-radius: 50%; - } - } - } - // Icon type default - &:not(.pi-toggle-button__icon--stroke) { - & > button { - gap: var(--pi-spacing-x-small); - & > .mat-icon { - height: var(--pi-spacing-large); - width: var(--pi-spacing-large); - } - } - } - - // Flex firection - // Row reverse - &.pi-button__flex-direction--row-reverse { - & > button { - flex-direction: row-reverse; - justify-content: space-between; - } - } -} - -html { - // Mobile - &.is-mobile { - :host { - // Stroke - &.pi-toggle-button__icon--stroke { - & > button { - width: 10rem; - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - :host { - // Small device - @media screen and (max-width: 62rem) { - // Icon type default - &:not(.pi-toggle-button__icon--stroke) { - & > button { - padding-left: var(--pi-spacing-small); - padding-right: var(--pi-spacing-small); - } - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - :host { - // Stroke - &.pi-toggle-button__icon--stroke { - & > button { - width: 12rem; - } - } - // Large device - @media screen and (min-width: 62rem) { - // Icon type default - &:not(.pi-toggle-button__icon--stroke) { - & > button { - padding-left: var(--pi-spacing-large); - padding-right: var(--pi-spacing-medium); - } - } - } - } - } -} +:host { + display: flex; + flex-direction: row-reverse; + & > button { + display: flex; + justify-content: flex-start; + align-items: center; + height: 3.125rem; + white-space: pre-line; + text-align: left; + color: var(--pi-color-primary); + border-radius: var(--pi-border-radius-medium); + -webkit-border-radius: var(--pi-border-radius-medium); + -moz-border-radius: var(--pi-border-radius-medium); + line-height: 125%; + font: { + weight: 300; + } + } + & > span { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + height: 1.35rem; + width: 1.35rem; + transform: translateX(0.375rem); + margin-top: -0.375rem; + background-color: var(--pi-color-accent); + border-radius: 50%; + color: var(--pi-color-white); + line-height: 1.35rem; + small { + font: { + size: var(--pi-font-size-xx-small); + } + } + } + &:not(.is-active) { + & > button { + background-color: var(--pi-color-white); + border: 1px solid var(--pi-color-primary-50); + &:not(:disabled) { + &:hover { + cursor: pointer; + transition: var(--pi-animation); + .mat-icon { + transform: scale(1.025); + transition: var(--pi-animation); + } + } + } + } + &:hover { + & > button { + &:not(:disabled) { + background-color: var(--pi-color-primary-25); + border: 1px solid var(--pi-color-primary-200); + } + } + } + } + // Active + &.is-active { + & > button { + background-color: var(--pi-color-primary-25); + border: 1px solid var(--pi-color-primary-75); + } + } + // Disabled + &.is-disabled { + & > button { + opacity: 0.33; + } + } + + // Icon type + // Stroke + &.pi-toggle-button__icon--stroke { + & > button { + gap: var(--pi-spacing-xx-small); + padding-left: var(--pi-spacing-x-small); + padding-right: var(--pi-spacing-medium); + font: { + size: var(--pi-font-size-x-small); + } + & > .mat-icon { + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + min-width: var(--pi-spacing-xx-large); + padding: 0.3rem; + border: 1px solid var(--pi-color-primary-200); + border-radius: 50%; + } + } + } + // Icon type default + &:not(.pi-toggle-button__icon--stroke) { + & > button { + gap: var(--pi-spacing-x-small); + & > .mat-icon { + height: var(--pi-spacing-large); + width: var(--pi-spacing-large); + } + } + } + + // Flex firection + // Row reverse + &.pi-button__flex-direction--row-reverse { + & > button { + flex-direction: row-reverse; + justify-content: space-between; + } + } +} + +html { + // Mobile + &.is-mobile { + :host { + // Stroke + &.pi-toggle-button__icon--stroke { + & > button { + width: 10rem; + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + :host { + // Small device + @media screen and (max-width: 62rem) { + // Icon type default + &:not(.pi-toggle-button__icon--stroke) { + & > button { + padding-left: var(--pi-spacing-small); + padding-right: var(--pi-spacing-small); + } + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + :host { + // Stroke + &.pi-toggle-button__icon--stroke { + & > button { + width: 12rem; + } + } + // Large device + @media screen and (min-width: 62rem) { + // Icon type default + &:not(.pi-toggle-button__icon--stroke) { + & > button { + padding-left: var(--pi-spacing-large); + padding-right: var(--pi-spacing-medium); + } + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts index e8419a6..3a597f0 100644 --- a/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts +++ b/libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts @@ -1,42 +1,42 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { buttonSize } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { buttonSize } from '../../../styles'; import { PiBaseButtonComponent } from '../base-button.component'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-toggle-button', templateUrl: './toggle-button.component.html', styleUrls: ['./toggle-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiToggleButtonComponent extends PiBaseButtonComponent { - @HostBinding('class') get classes(): string { - const isActiveClass = this.isActive() && 'is-active'; - const isDisabledClass = this.isDisabled() ? 'is-disabled' : ''; +}) +export class PiToggleButtonComponent extends PiBaseButtonComponent { + @HostBinding('class') get classes(): string { + const isActiveClass = this.isActive() && 'is-active'; + const isDisabledClass = this.isDisabled() ? 'is-disabled' : ''; const iconType = this.iconType(); - const iconTypeClass = iconType !== 'default' && `pi-toggle-button__icon--${iconType}`; - return [ - 'pi-toggle-button', - this.sizeClass, - this.flexDirectionClass, - isActiveClass, - isDisabledClass, - iconTypeClass, - ].join(' '); - } - - // Content - readonly icon = input(); - readonly text = input(); - readonly amount = input(); - - // Skin - readonly width = input('large'); - readonly iconType = input<'stroke' | 'default'>('stroke'); - - // Status - readonly isActive = input.required(); - readonly isDisabled = input.required(); -} + const iconTypeClass = iconType !== 'default' && `pi-toggle-button__icon--${iconType}`; + return [ + 'pi-toggle-button', + this.sizeClass, + this.flexDirectionClass, + isActiveClass, + isDisabledClass, + iconTypeClass, + ].join(' '); + } + + // Content + readonly icon = input(); + readonly text = input(); + readonly amount = input(); + + // Skin + readonly width = input('large'); + readonly iconType = input<'stroke' | 'default'>('stroke'); + + // Status + readonly isActive = input.required(); + readonly isDisabled = input.required(); +} diff --git a/libs/ui/src/lib/ui/card/base-card.component.ts b/libs/ui/src/lib/ui/card/base-card.component.ts index 5206a77..bea7ca7 100644 --- a/libs/ui/src/lib/ui/card/base-card.component.ts +++ b/libs/ui/src/lib/ui/card/base-card.component.ts @@ -1,106 +1,106 @@ -// Angular -import { Directive, HostBinding, OnInit, input, output } from '@angular/core'; - -// Style definitions -import { alignment, context, gap, mode, opacity, padding } from '../../styles'; - -@Directive() -export abstract class PiBaseCardComponent implements OnInit { - readonly hasShadow = input(true); - readonly isClickable = input(false); - readonly isStroked = input(false); - readonly color = input<'primary' | 'accent' | 'highlighted' | 'grey' | 'white'>('white'); - readonly mode = input('light'); - readonly alignment = input.required(); - readonly gap = input.required(); - readonly padding = input('xxl'); - readonly linkLabel = input(); - readonly opacity = input(); - readonly innerPadding = input.required(); - readonly context = input.required(); - readonly hasEqualPadding = input(false); - readonly hasPadding = input(true); - - readonly execute = output(); - - ngOnInit(): void { - this.colorClass; - this.contextClass; - this.gapClass; - this.hasEqualPaddingClass; - this.hasLinkLabelClass; - this.hasShadowClass; - this.isClickableClass; - this.modeClass; - this.opacityClass; - this.isStrokedClass; - } - - protected get hasShadowClass(): string | boolean | undefined { - return this.hasShadow() && 'has-shadow'; - } - - protected get isClickableClass(): string | false | undefined { - return this.isClickable() && 'is-clickable'; - } - - protected get colorClass(): string { +// Angular +import { Directive, HostBinding, OnInit, input, output } from '@angular/core'; + +// Style definitions +import { alignment, context, gap, mode, opacity, padding } from '../../styles'; + +@Directive() +export abstract class PiBaseCardComponent implements OnInit { + readonly hasShadow = input(true); + readonly isClickable = input(false); + readonly isStroked = input(false); + readonly color = input<'primary' | 'accent' | 'highlighted' | 'grey' | 'white'>('white'); + readonly mode = input('light'); + readonly alignment = input.required(); + readonly gap = input.required(); + readonly padding = input('xxl'); + readonly linkLabel = input(); + readonly opacity = input(); + readonly innerPadding = input.required(); + readonly context = input.required(); + readonly hasEqualPadding = input(false); + readonly hasPadding = input(true); + + readonly execute = output(); + + ngOnInit(): void { + this.colorClass; + this.contextClass; + this.gapClass; + this.hasEqualPaddingClass; + this.hasLinkLabelClass; + this.hasShadowClass; + this.isClickableClass; + this.modeClass; + this.opacityClass; + this.isStrokedClass; + } + + protected get hasShadowClass(): string | boolean | undefined { + return this.hasShadow() && 'has-shadow'; + } + + protected get isClickableClass(): string | false | undefined { + return this.isClickable() && 'is-clickable'; + } + + protected get colorClass(): string { const color = this.color(); - return color && `pi-color__${color}`; - } - - protected get alignmentClass(): string | undefined { + return color && `pi-color__${color}`; + } + + protected get alignmentClass(): string | undefined { const alignmentValue = this.alignment(); - return alignmentValue && `pi-card__align-items--${alignmentValue}`; - } - - protected get gapClass(): string | undefined { + return alignmentValue && `pi-card__align-items--${alignmentValue}`; + } + + protected get gapClass(): string | undefined { const gapValue = this.gap(); - return gapValue && `pi-card__gap--${gapValue}`; - } - - protected get paddingClass(): string | undefined { + return gapValue && `pi-card__gap--${gapValue}`; + } + + protected get paddingClass(): string | undefined { const paddingValue = this.padding(); - return paddingValue && `pi-card__padding--${paddingValue}`; - } - - protected get modeClass(): string | undefined { + return paddingValue && `pi-card__padding--${paddingValue}`; + } + + protected get modeClass(): string | undefined { const modeValue = this.mode(); - return modeValue ? `pi-color__mode--${modeValue}` : ''; - } - - protected get isStrokedClass(): string { - return this.isStroked() ? 'is-stroked' : ''; - } - - protected get hasEqualPaddingClass(): string { - return this.hasEqualPadding() ? 'has-equal-inner-padding' : ''; - } - - protected get hasLinkLabelClass(): string { - return !!this.linkLabel() ? 'has-link-label' : ''; - } - - protected get opacityClass(): string { + return modeValue ? `pi-color__mode--${modeValue}` : ''; + } + + protected get isStrokedClass(): string { + return this.isStroked() ? 'is-stroked' : ''; + } + + protected get hasEqualPaddingClass(): string { + return this.hasEqualPadding() ? 'has-equal-inner-padding' : ''; + } + + protected get hasLinkLabelClass(): string { + return !!this.linkLabel() ? 'has-link-label' : ''; + } + + protected get opacityClass(): string { const opacityValue = this.opacity(); - return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; - } - - protected get innerPaddingClass(): string { + return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; + } + + protected get innerPaddingClass(): string { const innerPadding = this.innerPadding(); - return innerPadding ? `pi-card__inner-padding--${innerPadding}` : ''; - } - - protected get isContectPublicClass(): string | undefined { - return this.context() === 'public' ? 'is-public' : ''; - } - - protected get hasPaddingClass(): string | undefined { - return !this.padding() ? '' : 'has-padding'; - } - - protected get contextClass(): string | undefined { + return innerPadding ? `pi-card__inner-padding--${innerPadding}` : ''; + } + + protected get isContectPublicClass(): string | undefined { + return this.context() === 'public' ? 'is-public' : ''; + } + + protected get hasPaddingClass(): string | undefined { + return !this.padding() ? '' : 'has-padding'; + } + + protected get contextClass(): string | undefined { const contextValue = this.context(); - return contextValue && `is-${contextValue}`; - } -} + return contextValue && `is-${contextValue}`; + } +} diff --git a/libs/ui/src/lib/ui/card/card/card.component.html b/libs/ui/src/lib/ui/card/card/card.component.html index d75f529..6b1937e 100644 --- a/libs/ui/src/lib/ui/card/card/card.component.html +++ b/libs/ui/src/lib/ui/card/card/card.component.html @@ -1,13 +1,13 @@ - - - - - - - - - - {{ linkLabel() }} - - - + + + + + + + + + + {{ linkLabel() }} + + + diff --git a/libs/ui/src/lib/ui/card/card/card.component.ts b/libs/ui/src/lib/ui/card/card/card.component.ts index 7749c19..00b9760 100644 --- a/libs/ui/src/lib/ui/card/card/card.component.ts +++ b/libs/ui/src/lib/ui/card/card/card.component.ts @@ -1,35 +1,35 @@ -// Angular -import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; - -// Components +// Angular +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; + +// Components import { PiBaseCardComponent } from '../base-card.component'; import { NgIf } from '@angular/common'; -import { PiIconComponent } from '../../icon/icon/icon.component'; - +import { PiIconComponent } from '../../icon/icon/icon.component'; + @Component({ selector: 'pi-card', templateUrl: './card.component.html', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, PiIconComponent], -}) -export class PiCardComponent extends PiBaseCardComponent { - @HostBinding('class') get classes(): string { - return [ - 'pi-component', - 'pi-card', - this.isClickableClass, - this.hasShadowClass, - this.colorClass, - this.alignmentClass, - this.gapClass, - this.modeClass, - this.isStrokedClass, - this.paddingClass, - this.opacityClass, - this.hasLinkLabelClass, - this.innerPaddingClass, - this.hasEqualPaddingClass, - this.contextClass, - ].join(' '); - } -} +}) +export class PiCardComponent extends PiBaseCardComponent { + @HostBinding('class') get classes(): string { + return [ + 'pi-component', + 'pi-card', + this.isClickableClass, + this.hasShadowClass, + this.colorClass, + this.alignmentClass, + this.gapClass, + this.modeClass, + this.isStrokedClass, + this.paddingClass, + this.opacityClass, + this.hasLinkLabelClass, + this.innerPaddingClass, + this.hasEqualPaddingClass, + this.contextClass, + ].join(' '); + } +} diff --git a/libs/ui/src/lib/ui/card/directives/card.directive.ts b/libs/ui/src/lib/ui/card/directives/card.directive.ts index 32629b3..61f91ee 100644 --- a/libs/ui/src/lib/ui/card/directives/card.directive.ts +++ b/libs/ui/src/lib/ui/card/directives/card.directive.ts @@ -1,29 +1,29 @@ -import { Directive, HostBinding, Input } from '@angular/core'; - +import { Directive, HostBinding, Input } from '@angular/core'; + @Directive({ selector: 'pi-card-top-content', host: { class: 'pi-card-content pi-card-content__top', }, -}) -export class PiCardTopContentDirective {} - -@Directive({ selector: 'pi-card-center-content', }) -export class PiCardCenterContentDirective { - @HostBinding('class') className = 'pi-card-content pi-card-content__center'; -} - -@Directive({ selector: 'pi-card-bottom-content', }) -export class PiCardBottomContentDirective { - @HostBinding('class') className = 'pi-card-content pi-card-content__bottom'; -} - -@Directive({ selector: 'pi-card-left-content', }) -export class PiCardLeftContentDirective { - @HostBinding('class') className = 'pi-card-content pi-card-content__left'; -} - -@Directive({ selector: 'pi-card-right-content', }) -export class PiCardRightContentDirective { - @HostBinding('class') className = 'pi-card-content pi-card-content__right'; -} +}) +export class PiCardTopContentDirective {} + +@Directive({ selector: 'pi-card-center-content', }) +export class PiCardCenterContentDirective { + @HostBinding('class') className = 'pi-card-content pi-card-content__center'; +} + +@Directive({ selector: 'pi-card-bottom-content', }) +export class PiCardBottomContentDirective { + @HostBinding('class') className = 'pi-card-content pi-card-content__bottom'; +} + +@Directive({ selector: 'pi-card-left-content', }) +export class PiCardLeftContentDirective { + @HostBinding('class') className = 'pi-card-content pi-card-content__left'; +} + +@Directive({ selector: 'pi-card-right-content', }) +export class PiCardRightContentDirective { + @HostBinding('class') className = 'pi-card-content pi-card-content__right'; +} diff --git a/libs/ui/src/lib/ui/card/index.ts b/libs/ui/src/lib/ui/card/index.ts index e4b0a68..46f34db 100644 --- a/libs/ui/src/lib/ui/card/index.ts +++ b/libs/ui/src/lib/ui/card/index.ts @@ -1,5 +1,5 @@ - - -export * from './card/card.component'; - -export * from './directives/card.directive'; + + +export * from './card/card.component'; + +export * from './directives/card.directive'; diff --git a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html index 3d60d13..f739d05 100644 --- a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html +++ b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.html @@ -1,31 +1,31 @@ -
- -
- -
- -
- -
- -
- - -
-
-
+
+ +
+ +
+ +
+ +
+ +
+ + +
+
+
diff --git a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss index 1fab24b..c79989f 100644 --- a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss +++ b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.scss @@ -1,144 +1,144 @@ -@mixin carouselFooter($color) { - footer { - display: flex; - justify-content: center; - gap: var(--pi-spacing-medium); - margin-top: var(--pi-spacing-xxx-large); - - div { - height: var(--pi-spacing-xx-small); - width: var(--pi-spacing-xx-small); - border-radius: var(--pi-border-radius-xx-small); - &.is-active { - background-color: var(--pi-color-#{$color}-200); - } - &:not(.is-active) { - background-color: var(--pi-color-#{$color}-50); - } - } - } -} - -@mixin carouselJustifyContent($justify-content) { - & > main { - & > section { - justify-content: $justify-content; - } - } -} - -:host { - // Common - .pi-carousel__item { - width: -webkit-fill-available; - } - // Type - &.pi-carousel__linear, - &.pi-carousel__symmetric { - & > main { - display: flex; - align-items: center; - justify-content: center; - gap: var(--pi-spacing-small); - &.pi-carousel__horizontal { - flex-direction: row; - & > section { - flex-direction: row; - padding: var(--pi-spacing-xx-large) var(--pi-spacing-large); - } - } - &.pi-carousel__vertical { - flex-direction: column; - & > section { - flex-direction: column; - padding: 0 var(--pi-spacing-large); - } - } - - & > section { - display: flex; - align-items: stretch; - flex: 1 1 0; - overflow: hidden; - transition: var(--pi-animation); - .pi-carousel__item { - user-select: none; - transition: var(--pi-animation); - overflow: hidden; - &:not(:first-child):not(:last-child) { - padding: 0 var(--pi-spacing-xx-small); - } - &:first-child { - padding-right: var(--pi-spacing-xx-small); - } - &:last-child { - padding-left: var(--pi-spacing-xx-small); - } - } - } - } - - &.is-draggable { - .has-overflow { - .pi-carousel__item { - user-select: none; - cursor: grab; - - &:active { - cursor: grabbing; - } - } - } - &.pi-carousel__primary { - @include carouselFooter(primary); - } - &.pi-carousel__accent { - @include carouselFooter(accent); - } - &.pi-carousel__highlighted { - @include carouselFooter(highlighted); - } - } - } - // Symetric - &.pi-carousel__symmetric { - .pi-carousel__item { - &.is-active { - z-index: 9; - } - &:not(.is-active) { - opacity: 0.3; - } - } - } - // Justify - // Center - &.pi-carousel__justify-content--center { - @include carouselJustifyContent(center); - } - // Flex Start - &.pi-carousel__justify-content--flex-start { - @include carouselJustifyContent(flex-start); - } - // Flex End - &.pi-carousel__justify-content--flex-end { - @include carouselJustifyContent(flex-end); - } - // Space Around - &.pi-carousel__justify-content--space-around { - @include carouselJustifyContent(space-around); - } - // Space Between - &.pi-carousel__justify-content--space-between { - @include carouselJustifyContent(space-between); - } - // Space Evenly - &.pi-carousel__justify-content--space-evenly { - & > main { - justify-content: space-between; - & > section { - max-width: 80%; - } - } - } +@mixin carouselFooter($color) { + footer { + display: flex; + justify-content: center; + gap: var(--pi-spacing-medium); + margin-top: var(--pi-spacing-xxx-large); + + div { + height: var(--pi-spacing-xx-small); + width: var(--pi-spacing-xx-small); + border-radius: var(--pi-border-radius-xx-small); + &.is-active { + background-color: var(--pi-color-#{$color}-200); + } + &:not(.is-active) { + background-color: var(--pi-color-#{$color}-50); + } + } + } +} + +@mixin carouselJustifyContent($justify-content) { + & > main { + & > section { + justify-content: $justify-content; + } + } +} + +:host { + // Common + .pi-carousel__item { + width: -webkit-fill-available; + } + // Type + &.pi-carousel__linear, + &.pi-carousel__symmetric { + & > main { + display: flex; + align-items: center; + justify-content: center; + gap: var(--pi-spacing-small); + &.pi-carousel__horizontal { + flex-direction: row; + & > section { + flex-direction: row; + padding: var(--pi-spacing-xx-large) var(--pi-spacing-large); + } + } + &.pi-carousel__vertical { + flex-direction: column; + & > section { + flex-direction: column; + padding: 0 var(--pi-spacing-large); + } + } + + & > section { + display: flex; + align-items: stretch; + flex: 1 1 0; + overflow: hidden; + transition: var(--pi-animation); + .pi-carousel__item { + user-select: none; + transition: var(--pi-animation); + overflow: hidden; + &:not(:first-child):not(:last-child) { + padding: 0 var(--pi-spacing-xx-small); + } + &:first-child { + padding-right: var(--pi-spacing-xx-small); + } + &:last-child { + padding-left: var(--pi-spacing-xx-small); + } + } + } + } + + &.is-draggable { + .has-overflow { + .pi-carousel__item { + user-select: none; + cursor: grab; + + &:active { + cursor: grabbing; + } + } + } + &.pi-carousel__primary { + @include carouselFooter(primary); + } + &.pi-carousel__accent { + @include carouselFooter(accent); + } + &.pi-carousel__highlighted { + @include carouselFooter(highlighted); + } + } + } + // Symetric + &.pi-carousel__symmetric { + .pi-carousel__item { + &.is-active { + z-index: 9; + } + &:not(.is-active) { + opacity: 0.3; + } + } + } + // Justify + // Center + &.pi-carousel__justify-content--center { + @include carouselJustifyContent(center); + } + // Flex Start + &.pi-carousel__justify-content--flex-start { + @include carouselJustifyContent(flex-start); + } + // Flex End + &.pi-carousel__justify-content--flex-end { + @include carouselJustifyContent(flex-end); + } + // Space Around + &.pi-carousel__justify-content--space-around { + @include carouselJustifyContent(space-around); + } + // Space Between + &.pi-carousel__justify-content--space-between { + @include carouselJustifyContent(space-between); + } + // Space Evenly + &.pi-carousel__justify-content--space-evenly { + & > main { + justify-content: space-between; + & > section { + max-width: 80%; + } + } + } } \ No newline at end of file diff --git a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts index db215db..521abe0 100644 --- a/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts +++ b/libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts @@ -1,536 +1,536 @@ -// Angular -import { - AfterViewChecked, - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - OnChanges, - OnDestroy, - OnInit, - Renderer2, - SimpleChanges, - input, - output, - viewChild, - contentChildren -} from '@angular/core'; - -// Shared -import { ComponentFamilyClass, justify, theming } from '../../../styles'; -import { Device, DeviceConfigsFacade } from '../../../util/device-configs'; -import { PiCarouselItemDirective } from '../carousel.directive'; -import { Subject, combineLatest, skip, takeUntil } from 'rxjs'; -import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; -import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; - -@Component({ - selector: 'pi-carousel', - templateUrl: './carousel.component.html', - styleUrls: ['./carousel.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ - NgIf, - PiIconButtonComponent, - NgFor, - NgTemplateOutlet, - ], -}) -export class PiCarouselComponent - implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy -{ - @HostBinding('class') get classes(): string { - const carouselItems = this.carouselItems(); - const itemsNumberClass = - carouselItems && `pi-carousel__${carouselItems.length}-items`; - const direction = this.direction(); - const directionTypeClass = direction && `pi-carousel__${direction}`; - const colorClass = `pi-carousel__${this.color()}`; - const typeClass = `pi-carousel__${this.type()}`; - const isDraggableClass = this.isDraggable() ? 'is-draggable' : ''; - const justifyValue = this.justify(); - const justifyClass = justifyValue && `pi-carousel__justify-content--${justifyValue}`; - return [ - ComponentFamilyClass.Carousel, - itemsNumberClass, - typeClass, - directionTypeClass, - isDraggableClass, - colorClass, - justifyClass, - ].join(' '); - } - - // Skin - readonly type = input<'symmetric' | 'linear'>('linear'); - - readonly direction = input<'horizontal' | 'vertical'>('horizontal'); - - readonly color = input('primary'); - readonly justify = input.required(); - - readonly device = input.required(); - - /** - * If true, the carousel will not show the next and previous buttons. - */ - readonly hideSwipeButtons = input(true); - - /** - * If true, the carousel will not show the pagination. - */ - readonly hidePaginator = input(false); - - - // BEHAVIOUR - /** - * If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided, - * each item will take the total width of the carousel divided by the number of items. - */ - readonly itemsDesktop = input.required(); - - /** - * If no number of items for tablet is provided, - * the number of items for desktop will be used. - */ - readonly itemsTablet = input(); - - /** - * If no number of items for mobile is provided, - * the number of items for desktop will be used. - */ - readonly itemsMobile = input(); - - /** - * If we want to set a custom width for each item, - * we can provide the width in pixels and this will override the number of items per device. - * The carousel will display per page the number of items that fit in the total width. - */ - readonly itemWidth = input.required(); - - /** - * If true, the user will be able to drag the carousel to move across items. - */ - readonly isDraggable = input(true); - - /** - * If true, when the user clicks on the next or previous button, - * the carousel will move to the next or previous page - * ie. currentItem will be incremented/decremented by itemsPerPage. - */ - readonly movePerPage = input(false); - - // OUTPUTS - /** - * Emits the index of the current item when it changes. - */ - readonly itemChanged = output(); - - /** - * carouselItems corresponds to the items that will be displayed in the carousel. - */ - readonly carouselItems = contentChildren(PiCarouselItemDirective, { descendants: true }); - - /** - * carouselContentWrapper corresponds to the section that contains the carousel items and excludes the control buttons - */ - readonly carouselContentWrapper = viewChild.required('carouselContentWrapper', { read: ElementRef }); - - carouselItemsNativeElements: HTMLElement[] = []; - - private destroyed$: Subject = new Subject(); - - private _currentItemIndex = 0; - set currentItem(index: number) { - this._currentItemIndex = index; - this.itemChanged.emit(index); - } - get currentItem(): number { - return this._currentItemIndex; - } - - itemsPerPage: number; - pages: Array; - - // Drag variables - isDragging = false; - isMouseDown = false; - dragInitPosition = 0; - dragFinalPosition = 0; - - private mousedownListener: () => void; - private mouseupListener: () => void; - private mousemoveListener: () => void; - - private touchstartListener: () => void; - private touchmoveListener: () => void; - private touchendListener: () => void; - - constructor( - private cdr: ChangeDetectorRef, - private el: ElementRef, - private renderer: Renderer2, - private deviceConfig: DeviceConfigsFacade - ) {} - - /** - * Used for symmetric carousel to know how many items to show on each side of the current item. - */ - get numberOfSideItems(): number { - return Math.floor(this.itemsPerPage / 2); - } - - /** - * Icon displayed in the next control button. - */ - get nextIcon(): string { - return this.direction() === 'horizontal' ? 'chevron-forward' : 'chevron-down'; - } - - /** - * Icon displayed in the prev control button. - */ - get prevIcon(): string { - return this.direction() === 'horizontal' ? 'chevron-back' : 'chevron-up'; - } - - /** - * Returns the carousel content wrapper native element. - */ - get carouselContentElement(): HTMLElement { - return this.carouselContentWrapper().nativeElement; - } - - get tallestElementHeightPx(): number { - return this.carouselItemsNativeElements.reduce( - (value, currentValue) => - value > currentValue.offsetHeight ? value : currentValue.offsetHeight, - 0 - ); - } - - /** - * Returns true if the number of items is greater than the number of items per page. - */ - get hasOverflow(): boolean { - return this.carouselItems().length > this.itemsPerPage; - } - - get canSwipeNext(): boolean { - return this.movePerPage() - ? this.currentItem + this.itemsPerPage < this.carouselItems().length - : this.currentItem < this.carouselItems().length - 1; - } - - get canSwipePrev(): boolean { - return this.movePerPage() ? this.currentItem - this.itemsPerPage >= 0 : this.currentItem > 0; - } - - /** - * Returns the index of the current page. - */ - get currentPageIndex(): number { - return Math.trunc(this.currentItem / this.itemsPerPage); - } - - ngOnInit(): void { - combineLatest([this.deviceConfig.device$, this.deviceConfig.size$]) - .pipe(skip(1), takeUntil(this.destroyed$)) - .subscribe(() => { - this.reloadComponent(); - }); - } - - ngOnChanges(simpleChanges: SimpleChanges): void { - if (simpleChanges['itemWidth'] && !!this.carouselContentWrapper()) { - this.setItemsPerPage(); - } - } - - ngAfterViewInit(): void { - this.setItemsPerPage(); - this.setPages(); - - if (this.isDraggable()) { - this.setDragEventListeners(); - } - // La suscripción a `carouselItems.changes` sólo hacía markForCheck(); - // al ser `carouselItems` una signal query, Angular ya lo hace solo. - } - - ngAfterViewChecked(): void { - this.getCarouselItemsNativeElements(); - - this.setStyleOnInit(); - } - - ngOnDestroy(): void { - this.stopDragEventListeners(); - this.destroyed$.next(); - this.destroyed$.complete(); - } - - reloadComponent(): void { - this.ngOnDestroy(); - this.currentItem = 0; - this.ngAfterViewInit(); - this.ngAfterViewChecked(); - this.cdr.markForCheck(); - } - - next(): void { - if (this.movePerPage()) { - this.currentPageIndex < this.pages.length - 1 - ? (this.currentItem = (this.currentPageIndex + 1) * this.itemsPerPage) - : null; - } else { - this.currentItem = this.currentItem + 1; - } - this.carouselTranslation(this.currentItem); - } - - prev(): void { - if (this.movePerPage()) { - this.currentPageIndex > 0 - ? (this.currentItem = (this.currentPageIndex - 1) * this.itemsPerPage) - : null; - } else { - this.currentItem = this.currentItem - 1; - } - this.carouselTranslation(this.currentItem); - } - - setItemsPerPage(): void { - const itemWidth = this.itemWidth(); - if (!!itemWidth) { - this.itemsPerPage = Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1; - } else { - const itemsDesktop = this.itemsDesktop(); - const itemsTablet = this.itemsTablet(); - const itemsMobile = this.itemsMobile(); - switch (this.device()) { - case 'DESKTOP': - this.itemsPerPage = itemsDesktop ? itemsDesktop : this.carouselItems().length; - break; - case 'TABLET': - this.itemsPerPage = itemsTablet ? itemsTablet : this.carouselItems().length; - break; - case 'MOBILE': - this.itemsPerPage = itemsMobile ? itemsMobile : this.carouselItems().length; - break; - } - } - } - - trackByFn(index: number, item: PiCarouselItemDirective): number { - return index; - } - - getItemClass(index: number): string { - let itemClass: string = 'pi-carousel__item pi-carousel__item--' + index; - if (index === this.currentItem) itemClass += ' ' + 'is-active'; - return itemClass; - } - - selectItem(index: number): void { - this.currentItem = index; - if (this.hasOverflow && !this.movePerPage()) { - this.carouselTranslation(index); - } - } - - setPages(): void { - let totalPages: number; - let pages: Array = []; - totalPages = Math.ceil(this.carouselItems().length / this.itemsPerPage); - for (let i = 0; i < totalPages; i++) { - pages.push(i); - } - this.pages = pages; - this.cdr.detectChanges(); - } - - private stopTouchDragEventListeners(): void { - if (this.touchstartListener) this.touchstartListener(); - if (this.touchmoveListener) this.touchmoveListener(); - if (this.touchendListener) this.touchendListener(); - } - - private stopMouseDragEventListeners(): void { - if (this.mousedownListener) this.mousedownListener(); - if (this.mouseupListener) this.mouseupListener(); - if (this.mousemoveListener) this.mousemoveListener(); - } - - private stopDragEventListeners(): void { - this.stopMouseDragEventListeners(); - this.stopTouchDragEventListeners(); - } - - private setDragEventListeners(): void { - this.mousedownListener = this.renderer.listen( - this.carouselContentWrapper().nativeElement, - 'mousedown', - (event) => { - this.dragStart(event); - } - ); - - this.mousemoveListener = this.renderer.listen( - document.documentElement, - 'mousemove', - (event) => { - if (this.isMouseDown) this.dragAction(event); - } - ); - - this.mouseupListener = this.renderer.listen(document.documentElement, 'mouseup', () => { - if (this.isDragging) { - this.dragEnd(); - } - }); - - this.touchstartListener = this.renderer.listen( - this.carouselContentWrapper().nativeElement, - 'touchstart', - (event) => { - this.dragStart(event); - } - ); - - this.touchmoveListener = this.renderer.listen( - document.documentElement, - 'touchmove', - (event) => { - if (this.isMouseDown) this.dragAction(event); - } - ); - - this.touchendListener = this.renderer.listen(document.documentElement, 'touchend', () => { - if (this.isDragging) this.dragEnd(); - }); - } - - private dragStart(event: MouseEvent | TouchEvent): void { - this.isMouseDown = true; - if (event instanceof TouchEvent) { - this.stopMouseDragEventListeners(); - this.dragInitPosition = event.touches[0].clientX; - } else { - this.stopTouchDragEventListeners(); - this.dragInitPosition = event.clientX; - } - } - - /** - * - * @param event - * This function handles the logic for dragging the carousel, allowing the user to swipe to the next or previous item based on the drag direction and minimum dragging width. - */ - private dragAction(event: MouseEvent | TouchEvent): void { - /** - * Sets a minimum dragging width based on either 80% of the item width if provided - * Otherwise 80% of the width of one item in terms of the number of items displayed per page - */ - const itemWidth = this.itemWidth(); - const minDraggingWidth = itemWidth ? 0.8 * itemWidth : 0.8 * (100 / this.itemsPerPage); - - this.isDragging = true; - - if (event instanceof TouchEvent) this.dragFinalPosition = event.touches[0].clientX; - if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX; - - if (this.dragInitPosition - this.dragFinalPosition > minDraggingWidth && this.canSwipeNext) { - this.currentItem++; - this.carouselTranslation(this.currentItem); - this.dragInitPosition = this.dragFinalPosition; - } - - if (this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth && this.canSwipePrev) { - this.currentItem--; - this.carouselTranslation(this.currentItem); - this.dragInitPosition = this.dragFinalPosition; - } - } - - private dragEnd(): void { - this.isDragging = false; - this.isMouseDown = false; - this.cdr.detectChanges(); - } - - private getCarouselItemsNativeElements(): void { - this.carouselItemsNativeElements = Array.from( - this.el.nativeElement.querySelectorAll('.pi-carousel__item') - ); - } - - private carouselTranslation(currentItem: number): void { - const type = this.type(); - if (type === 'linear' && currentItem <= this.carouselItems().length - this.itemsPerPage) { - this.carouselItemsTranslation(currentItem, `-${currentItem * 100}%`, this.direction()); - } else if (type === 'symmetric') { - if (currentItem < this.numberOfSideItems) { - // If we are at the beginning of the carousel - this.carouselItemsTranslation(currentItem, '0', this.direction()); - } else if (this.carouselItems().length - currentItem > this.numberOfSideItems) { - // If we are at the end of the carousel - this.carouselItemsTranslation( - currentItem, - `-${(currentItem - this.numberOfSideItems) * 100}%`, - this.direction() - ); - } else { - // If we are at the end of the carousel - this.carouselItemsTranslation( - currentItem, - `-${(this.carouselItems().length - this.itemsPerPage) * 100}%`, - this.direction() - ); - } - } - } - - private setStyleOnInit(): void { - this.direction() === 'horizontal' - ? this.setHorizontalCarouselStyle() - : this.setVerticalCarouselStyle(); - } - - private carouselItemsTranslation(currentItem: number, translation: string, axis: string) { - this.carouselItemsNativeElements.forEach((item, index) => { - const scale: number = index === currentItem && this.type() === 'symmetric' ? 1.15 : 1; - const transform: string = - axis === 'horizontal' ? `translateX(${translation})` : `translateY(${translation})`; - this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`); - }); - } - - private setHorizontalCarouselStyle(): void { - this.carouselItemsNativeElements.forEach((item) => { - const itemWidth = this.itemWidth(); - if (!!itemWidth) { - this.renderer.setStyle(item, 'min-width', `${itemWidth}px`); - this.renderer.setStyle(item, 'max-width', `${itemWidth}px`); - this.renderer.setStyle(item, 'width', 'unset'); - } else { - this.renderer.setStyle(item, 'min-width', `${100 / this.itemsPerPage}%`); - this.renderer.setStyle(item, 'max-width', `${100 / this.itemsPerPage}%`); - this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`); - } - }); - } - - private setVerticalCarouselStyle(): void { - this.renderer.setStyle( - this.carouselContentElement, - 'min-height', - `${this.itemsPerPage * this.tallestElementHeightPx}px` - ); - this.carouselItemsNativeElements.forEach((item) => { - this.renderer.setStyle(item, 'min-height', `${this.tallestElementHeightPx}px`); - }); - } -} +// Angular +import { + AfterViewChecked, + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + HostBinding, + OnChanges, + OnDestroy, + OnInit, + Renderer2, + SimpleChanges, + input, + output, + viewChild, + contentChildren +} from '@angular/core'; + +// Shared +import { ComponentFamilyClass, justify, theming } from '../../../styles'; +import { Device, DeviceConfigsFacade } from '../../../util/device-configs'; +import { PiCarouselItemDirective } from '../carousel.directive'; +import { Subject, combineLatest, skip, takeUntil } from 'rxjs'; +import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; +import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; + +@Component({ + selector: 'pi-carousel', + templateUrl: './carousel.component.html', + styleUrls: ['./carousel.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + NgIf, + PiIconButtonComponent, + NgFor, + NgTemplateOutlet, + ], +}) +export class PiCarouselComponent + implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy +{ + @HostBinding('class') get classes(): string { + const carouselItems = this.carouselItems(); + const itemsNumberClass = + carouselItems && `pi-carousel__${carouselItems.length}-items`; + const direction = this.direction(); + const directionTypeClass = direction && `pi-carousel__${direction}`; + const colorClass = `pi-carousel__${this.color()}`; + const typeClass = `pi-carousel__${this.type()}`; + const isDraggableClass = this.isDraggable() ? 'is-draggable' : ''; + const justifyValue = this.justify(); + const justifyClass = justifyValue && `pi-carousel__justify-content--${justifyValue}`; + return [ + ComponentFamilyClass.Carousel, + itemsNumberClass, + typeClass, + directionTypeClass, + isDraggableClass, + colorClass, + justifyClass, + ].join(' '); + } + + // Skin + readonly type = input<'symmetric' | 'linear'>('linear'); + + readonly direction = input<'horizontal' | 'vertical'>('horizontal'); + + readonly color = input('primary'); + readonly justify = input.required(); + + readonly device = input.required(); + + /** + * If true, the carousel will not show the next and previous buttons. + */ + readonly hideSwipeButtons = input(true); + + /** + * If true, the carousel will not show the pagination. + */ + readonly hidePaginator = input(false); + + + // BEHAVIOUR + /** + * If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided, + * each item will take the total width of the carousel divided by the number of items. + */ + readonly itemsDesktop = input.required(); + + /** + * If no number of items for tablet is provided, + * the number of items for desktop will be used. + */ + readonly itemsTablet = input(); + + /** + * If no number of items for mobile is provided, + * the number of items for desktop will be used. + */ + readonly itemsMobile = input(); + + /** + * If we want to set a custom width for each item, + * we can provide the width in pixels and this will override the number of items per device. + * The carousel will display per page the number of items that fit in the total width. + */ + readonly itemWidth = input.required(); + + /** + * If true, the user will be able to drag the carousel to move across items. + */ + readonly isDraggable = input(true); + + /** + * If true, when the user clicks on the next or previous button, + * the carousel will move to the next or previous page + * ie. currentItem will be incremented/decremented by itemsPerPage. + */ + readonly movePerPage = input(false); + + // OUTPUTS + /** + * Emits the index of the current item when it changes. + */ + readonly itemChanged = output(); + + /** + * carouselItems corresponds to the items that will be displayed in the carousel. + */ + readonly carouselItems = contentChildren(PiCarouselItemDirective, { descendants: true }); + + /** + * carouselContentWrapper corresponds to the section that contains the carousel items and excludes the control buttons + */ + readonly carouselContentWrapper = viewChild.required('carouselContentWrapper', { read: ElementRef }); + + carouselItemsNativeElements: HTMLElement[] = []; + + private destroyed$: Subject = new Subject(); + + private _currentItemIndex = 0; + set currentItem(index: number) { + this._currentItemIndex = index; + this.itemChanged.emit(index); + } + get currentItem(): number { + return this._currentItemIndex; + } + + itemsPerPage!: number; + pages!: Array; + + // Drag variables + isDragging = false; + isMouseDown = false; + dragInitPosition = 0; + dragFinalPosition = 0; + + private mousedownListener!: () => void; + private mouseupListener!: () => void; + private mousemoveListener!: () => void; + + private touchstartListener!: () => void; + private touchmoveListener!: () => void; + private touchendListener!: () => void; + + constructor( + private cdr: ChangeDetectorRef, + private el: ElementRef, + private renderer: Renderer2, + private deviceConfig: DeviceConfigsFacade + ) {} + + /** + * Used for symmetric carousel to know how many items to show on each side of the current item. + */ + get numberOfSideItems(): number { + return Math.floor(this.itemsPerPage / 2); + } + + /** + * Icon displayed in the next control button. + */ + get nextIcon(): string { + return this.direction() === 'horizontal' ? 'chevron-forward' : 'chevron-down'; + } + + /** + * Icon displayed in the prev control button. + */ + get prevIcon(): string { + return this.direction() === 'horizontal' ? 'chevron-back' : 'chevron-up'; + } + + /** + * Returns the carousel content wrapper native element. + */ + get carouselContentElement(): HTMLElement { + return this.carouselContentWrapper().nativeElement; + } + + get tallestElementHeightPx(): number { + return this.carouselItemsNativeElements.reduce( + (value, currentValue) => + value > currentValue.offsetHeight ? value : currentValue.offsetHeight, + 0 + ); + } + + /** + * Returns true if the number of items is greater than the number of items per page. + */ + get hasOverflow(): boolean { + return this.carouselItems().length > this.itemsPerPage; + } + + get canSwipeNext(): boolean { + return this.movePerPage() + ? this.currentItem + this.itemsPerPage < this.carouselItems().length + : this.currentItem < this.carouselItems().length - 1; + } + + get canSwipePrev(): boolean { + return this.movePerPage() ? this.currentItem - this.itemsPerPage >= 0 : this.currentItem > 0; + } + + /** + * Returns the index of the current page. + */ + get currentPageIndex(): number { + return Math.trunc(this.currentItem / this.itemsPerPage); + } + + ngOnInit(): void { + combineLatest([this.deviceConfig.device$, this.deviceConfig.size$]) + .pipe(skip(1), takeUntil(this.destroyed$)) + .subscribe(() => { + this.reloadComponent(); + }); + } + + ngOnChanges(simpleChanges: SimpleChanges): void { + if (simpleChanges['itemWidth'] && !!this.carouselContentWrapper()) { + this.setItemsPerPage(); + } + } + + ngAfterViewInit(): void { + this.setItemsPerPage(); + this.setPages(); + + if (this.isDraggable()) { + this.setDragEventListeners(); + } + // La suscripción a `carouselItems.changes` sólo hacía markForCheck(); + // al ser `carouselItems` una signal query, Angular ya lo hace solo. + } + + ngAfterViewChecked(): void { + this.getCarouselItemsNativeElements(); + + this.setStyleOnInit(); + } + + ngOnDestroy(): void { + this.stopDragEventListeners(); + this.destroyed$.next(); + this.destroyed$.complete(); + } + + reloadComponent(): void { + this.ngOnDestroy(); + this.currentItem = 0; + this.ngAfterViewInit(); + this.ngAfterViewChecked(); + this.cdr.markForCheck(); + } + + next(): void { + if (this.movePerPage()) { + this.currentPageIndex < this.pages.length - 1 + ? (this.currentItem = (this.currentPageIndex + 1) * this.itemsPerPage) + : null; + } else { + this.currentItem = this.currentItem + 1; + } + this.carouselTranslation(this.currentItem); + } + + prev(): void { + if (this.movePerPage()) { + this.currentPageIndex > 0 + ? (this.currentItem = (this.currentPageIndex - 1) * this.itemsPerPage) + : null; + } else { + this.currentItem = this.currentItem - 1; + } + this.carouselTranslation(this.currentItem); + } + + setItemsPerPage(): void { + const itemWidth = this.itemWidth(); + if (!!itemWidth) { + this.itemsPerPage = Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1; + } else { + const itemsDesktop = this.itemsDesktop(); + const itemsTablet = this.itemsTablet(); + const itemsMobile = this.itemsMobile(); + switch (this.device()) { + case 'DESKTOP': + this.itemsPerPage = itemsDesktop ? itemsDesktop : this.carouselItems().length; + break; + case 'TABLET': + this.itemsPerPage = itemsTablet ? itemsTablet : this.carouselItems().length; + break; + case 'MOBILE': + this.itemsPerPage = itemsMobile ? itemsMobile : this.carouselItems().length; + break; + } + } + } + + trackByFn(index: number, item: PiCarouselItemDirective): number { + return index; + } + + getItemClass(index: number): string { + let itemClass: string = 'pi-carousel__item pi-carousel__item--' + index; + if (index === this.currentItem) itemClass += ' ' + 'is-active'; + return itemClass; + } + + selectItem(index: number): void { + this.currentItem = index; + if (this.hasOverflow && !this.movePerPage()) { + this.carouselTranslation(index); + } + } + + setPages(): void { + let totalPages: number; + let pages: Array = []; + totalPages = Math.ceil(this.carouselItems().length / this.itemsPerPage); + for (let i = 0; i < totalPages; i++) { + pages.push(i); + } + this.pages = pages; + this.cdr.detectChanges(); + } + + private stopTouchDragEventListeners(): void { + if (this.touchstartListener) this.touchstartListener(); + if (this.touchmoveListener) this.touchmoveListener(); + if (this.touchendListener) this.touchendListener(); + } + + private stopMouseDragEventListeners(): void { + if (this.mousedownListener) this.mousedownListener(); + if (this.mouseupListener) this.mouseupListener(); + if (this.mousemoveListener) this.mousemoveListener(); + } + + private stopDragEventListeners(): void { + this.stopMouseDragEventListeners(); + this.stopTouchDragEventListeners(); + } + + private setDragEventListeners(): void { + this.mousedownListener = this.renderer.listen( + this.carouselContentWrapper().nativeElement, + 'mousedown', + (event) => { + this.dragStart(event); + } + ); + + this.mousemoveListener = this.renderer.listen( + document.documentElement, + 'mousemove', + (event) => { + if (this.isMouseDown) this.dragAction(event); + } + ); + + this.mouseupListener = this.renderer.listen(document.documentElement, 'mouseup', () => { + if (this.isDragging) { + this.dragEnd(); + } + }); + + this.touchstartListener = this.renderer.listen( + this.carouselContentWrapper().nativeElement, + 'touchstart', + (event) => { + this.dragStart(event); + } + ); + + this.touchmoveListener = this.renderer.listen( + document.documentElement, + 'touchmove', + (event) => { + if (this.isMouseDown) this.dragAction(event); + } + ); + + this.touchendListener = this.renderer.listen(document.documentElement, 'touchend', () => { + if (this.isDragging) this.dragEnd(); + }); + } + + private dragStart(event: MouseEvent | TouchEvent): void { + this.isMouseDown = true; + if (event instanceof TouchEvent) { + this.stopMouseDragEventListeners(); + this.dragInitPosition = event.touches[0].clientX; + } else { + this.stopTouchDragEventListeners(); + this.dragInitPosition = event.clientX; + } + } + + /** + * + * @param event + * This function handles the logic for dragging the carousel, allowing the user to swipe to the next or previous item based on the drag direction and minimum dragging width. + */ + private dragAction(event: MouseEvent | TouchEvent): void { + /** + * Sets a minimum dragging width based on either 80% of the item width if provided + * Otherwise 80% of the width of one item in terms of the number of items displayed per page + */ + const itemWidth = this.itemWidth(); + const minDraggingWidth = itemWidth ? 0.8 * itemWidth : 0.8 * (100 / this.itemsPerPage); + + this.isDragging = true; + + if (event instanceof TouchEvent) this.dragFinalPosition = event.touches[0].clientX; + if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX; + + if (this.dragInitPosition - this.dragFinalPosition > minDraggingWidth && this.canSwipeNext) { + this.currentItem++; + this.carouselTranslation(this.currentItem); + this.dragInitPosition = this.dragFinalPosition; + } + + if (this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth && this.canSwipePrev) { + this.currentItem--; + this.carouselTranslation(this.currentItem); + this.dragInitPosition = this.dragFinalPosition; + } + } + + private dragEnd(): void { + this.isDragging = false; + this.isMouseDown = false; + this.cdr.detectChanges(); + } + + private getCarouselItemsNativeElements(): void { + this.carouselItemsNativeElements = Array.from( + this.el.nativeElement.querySelectorAll('.pi-carousel__item') + ); + } + + private carouselTranslation(currentItem: number): void { + const type = this.type(); + if (type === 'linear' && currentItem <= this.carouselItems().length - this.itemsPerPage) { + this.carouselItemsTranslation(currentItem, `-${currentItem * 100}%`, this.direction()); + } else if (type === 'symmetric') { + if (currentItem < this.numberOfSideItems) { + // If we are at the beginning of the carousel + this.carouselItemsTranslation(currentItem, '0', this.direction()); + } else if (this.carouselItems().length - currentItem > this.numberOfSideItems) { + // If we are at the end of the carousel + this.carouselItemsTranslation( + currentItem, + `-${(currentItem - this.numberOfSideItems) * 100}%`, + this.direction() + ); + } else { + // If we are at the end of the carousel + this.carouselItemsTranslation( + currentItem, + `-${(this.carouselItems().length - this.itemsPerPage) * 100}%`, + this.direction() + ); + } + } + } + + private setStyleOnInit(): void { + this.direction() === 'horizontal' + ? this.setHorizontalCarouselStyle() + : this.setVerticalCarouselStyle(); + } + + private carouselItemsTranslation(currentItem: number, translation: string, axis: string) { + this.carouselItemsNativeElements.forEach((item, index) => { + const scale: number = index === currentItem && this.type() === 'symmetric' ? 1.15 : 1; + const transform: string = + axis === 'horizontal' ? `translateX(${translation})` : `translateY(${translation})`; + this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`); + }); + } + + private setHorizontalCarouselStyle(): void { + this.carouselItemsNativeElements.forEach((item) => { + const itemWidth = this.itemWidth(); + if (!!itemWidth) { + this.renderer.setStyle(item, 'min-width', `${itemWidth}px`); + this.renderer.setStyle(item, 'max-width', `${itemWidth}px`); + this.renderer.setStyle(item, 'width', 'unset'); + } else { + this.renderer.setStyle(item, 'min-width', `${100 / this.itemsPerPage}%`); + this.renderer.setStyle(item, 'max-width', `${100 / this.itemsPerPage}%`); + this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`); + } + }); + } + + private setVerticalCarouselStyle(): void { + this.renderer.setStyle( + this.carouselContentElement, + 'min-height', + `${this.itemsPerPage * this.tallestElementHeightPx}px` + ); + this.carouselItemsNativeElements.forEach((item) => { + this.renderer.setStyle(item, 'min-height', `${this.tallestElementHeightPx}px`); + }); + } +} diff --git a/libs/ui/src/lib/ui/carousel/index.ts b/libs/ui/src/lib/ui/carousel/index.ts index 20d8a05..48ea25a 100644 --- a/libs/ui/src/lib/ui/carousel/index.ts +++ b/libs/ui/src/lib/ui/carousel/index.ts @@ -1,5 +1,5 @@ - - -export * from './carousel/carousel.component'; - -export * from './carousel.directive'; + + +export * from './carousel/carousel.component'; + +export * from './carousel.directive'; diff --git a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html index 6bc6b56..196ddf9 100644 --- a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html +++ b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html @@ -1,10 +1,10 @@ - -
-
- -
- - + +
+
+ +
+ + {{ 'common.legend' | translate }} \ No newline at end of file diff --git a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss index 760dc6a..8bff0f8 100644 --- a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss +++ b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.scss @@ -1,123 +1,123 @@ -@mixin chartLegendsGrid($columns: 2, $rows: 2) { - :host { - grid-template-columns: repeat(#{$columns}, 1fr); - grid-template-rows: repeat(#{$rows}, 1fr); - & > section { - justify-self: center; - } - } -} - -:host { - position: relative; - display: grid; - gap: var(--pi-spacing-small); - padding: var(--pi-spacing-x-large) var(--pi-spacing-medium); - background-color: var(--pi-color-grey-10); - border-radius: var(--pi-border-radius-large); - - & > span { - position: absolute; - min-width: 8rem; - padding: var(--pi-spacing-xxx-small) var(--pi-spacing-medium); - text-align: center; - color: var(--pi-color-grey-200); - background-color: var(--pi-color-white); - border: 1px solid var(--pi-color-grey-75); - border-radius: var(--pi-border-radius-small); - font: { - size: var(--pi-font-size-x-small); - } - } - & > section { - display: flex; - align-items: center; - gap: var(--pi-spacing-xx-small); - - cursor: pointer; - overflow: hidden; - - &.is-hovered { - & > label { - font-weight: 600; - } - } - - & > * { - cursor: pointer; - &:hover { - font-weight: 600; - } - } - - & > div { - min-width: var(--pi-spacing-small); - min-height: var(--pi-spacing-small); - border-radius: 50%; - border: 1px solid; - } - & > label { - padding-right: var(--pi-spacing-x-large); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - transition: var(--pi-animation); - } - } -} - -html { - // Tablet & Mobile - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - :host { - & > span { - top: -0.75rem; - left: 50%; - transform: translateX(-50%); - } - } - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - :host { - & > span { - top: -1rem; - margin-left: var(--pi-spacing-x-large); - } - & > section { - justify-content: center; - } - // Comparative chart - &.is-comparative { - & > section { - &:first-child { - & > label { - border-right: 1px solid var(--pi-color-grey-100); - } - } - } - } - } - } - } - &.is-mobile { - @include chartLegendsGrid; - } - - &.is-tablet { - &.is-tablet__small { - @include chartLegendsGrid; - } - &.is-tablet__large { - @include chartLegendsGrid(3, 1); - } - } - &.is-desktop { - @include chartLegendsGrid(3, 1); - } -} +@mixin chartLegendsGrid($columns: 2, $rows: 2) { + :host { + grid-template-columns: repeat(#{$columns}, 1fr); + grid-template-rows: repeat(#{$rows}, 1fr); + & > section { + justify-self: center; + } + } +} + +:host { + position: relative; + display: grid; + gap: var(--pi-spacing-small); + padding: var(--pi-spacing-x-large) var(--pi-spacing-medium); + background-color: var(--pi-color-grey-10); + border-radius: var(--pi-border-radius-large); + + & > span { + position: absolute; + min-width: 8rem; + padding: var(--pi-spacing-xxx-small) var(--pi-spacing-medium); + text-align: center; + color: var(--pi-color-grey-200); + background-color: var(--pi-color-white); + border: 1px solid var(--pi-color-grey-75); + border-radius: var(--pi-border-radius-small); + font: { + size: var(--pi-font-size-x-small); + } + } + & > section { + display: flex; + align-items: center; + gap: var(--pi-spacing-xx-small); + + cursor: pointer; + overflow: hidden; + + &.is-hovered { + & > label { + font-weight: 600; + } + } + + & > * { + cursor: pointer; + &:hover { + font-weight: 600; + } + } + + & > div { + min-width: var(--pi-spacing-small); + min-height: var(--pi-spacing-small); + border-radius: 50%; + border: 1px solid; + } + & > label { + padding-right: var(--pi-spacing-x-large); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + transition: var(--pi-animation); + } + } +} + +html { + // Tablet & Mobile + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + :host { + & > span { + top: -0.75rem; + left: 50%; + transform: translateX(-50%); + } + } + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + :host { + & > span { + top: -1rem; + margin-left: var(--pi-spacing-x-large); + } + & > section { + justify-content: center; + } + // Comparative chart + &.is-comparative { + & > section { + &:first-child { + & > label { + border-right: 1px solid var(--pi-color-grey-100); + } + } + } + } + } + } + } + &.is-mobile { + @include chartLegendsGrid; + } + + &.is-tablet { + &.is-tablet__small { + @include chartLegendsGrid; + } + &.is-tablet__large { + @include chartLegendsGrid(3, 1); + } + } + &.is-desktop { + @include chartLegendsGrid(3, 1); + } +} diff --git a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts index 3953b12..f0a4fa9 100644 --- a/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts +++ b/libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts @@ -4,27 +4,27 @@ import { HostBinding, input, output -} from '@angular/core'; +} from '@angular/core'; import { Dataset } from '../../../util/models'; import { NgFor } from '@angular/common'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-chart-legend', templateUrl: './chart-legend.component.html', styleUrls: ['./chart-legend.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, TranslatePipe], -}) -export class PiChartLegendComponent { - @HostBinding('class') get classes(): string { - const comparativeClass = this.isComparativeChart() ? 'is-comparative' : ''; - return ['pi-chart-legend', comparativeClass].join(' '); - } - - readonly datasets = input.required>(); - readonly isComparativeChart = input(true); - readonly hoveredDatasetIndex = input(); - - readonly triggerDatasetHover = output(); -} +}) +export class PiChartLegendComponent { + @HostBinding('class') get classes(): string { + const comparativeClass = this.isComparativeChart() ? 'is-comparative' : ''; + return ['pi-chart-legend', comparativeClass].join(' '); + } + + readonly datasets = input.required>(); + readonly isComparativeChart = input(true); + readonly hoveredDatasetIndex = input(); + + readonly triggerDatasetHover = output(); +} diff --git a/libs/ui/src/lib/ui/chart/chart/chart.component.html b/libs/ui/src/lib/ui/chart/chart/chart.component.html index d5a2ee1..30de0fa 100644 --- a/libs/ui/src/lib/ui/chart/chart/chart.component.html +++ b/libs/ui/src/lib/ui/chart/chart/chart.component.html @@ -1,9 +1,9 @@ -
- -
- +
+ +
+ diff --git a/libs/ui/src/lib/ui/chart/chart/chart.component.scss b/libs/ui/src/lib/ui/chart/chart/chart.component.scss index bfef8c3..8ad3144 100644 --- a/libs/ui/src/lib/ui/chart/chart/chart.component.scss +++ b/libs/ui/src/lib/ui/chart/chart/chart.component.scss @@ -1,34 +1,34 @@ -:host { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; - max-width: 100%; - - & > div { - position: relative; - max-width: 100%; - } -} - -html { - &:not(.is-desktop) { - :host { - & > div { - aspect-ratio: 1; - height: 100%; - max-height: 40vh; - } - } - } - &.is-desktop { - :host { - & > div { - & > canvas { - aspect-ratio: 1; - height: 100%; - } - } - } - } -} +:host { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + max-width: 100%; + + & > div { + position: relative; + max-width: 100%; + } +} + +html { + &:not(.is-desktop) { + :host { + & > div { + aspect-ratio: 1; + height: 100%; + max-height: 40vh; + } + } + } + &.is-desktop { + :host { + & > div { + & > canvas { + aspect-ratio: 1; + height: 100%; + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/chart/chart/chart.component.ts b/libs/ui/src/lib/ui/chart/chart/chart.component.ts index 7cb53a1..32fb505 100644 --- a/libs/ui/src/lib/ui/chart/chart/chart.component.ts +++ b/libs/ui/src/lib/ui/chart/chart/chart.component.ts @@ -7,172 +7,171 @@ import { OnInit, input, viewChild -} from '@angular/core'; -import { Device } from '../../../util/device-configs'; -import { Dataset } from '../../../util/models'; -import { TranslateService } from '@ngx-translate/core'; -import { - BarController, - BarElement, - CategoryScale, - Chart, - Legend, - LineController, - LineElement, - LinearScale, - PointElement, - Title, - Tooltip, -} from 'chart.js'; +} from '@angular/core'; +import { Device } from '../../../util/device-configs'; +import { Dataset } from '../../../util/models'; +import { TranslateService } from '@ngx-translate/core'; +import { + BarController, + BarElement, + CategoryScale, + Chart, + Legend, + LineController, + LineElement, + LinearScale, + PointElement, + Title, + Tooltip, +} from 'chart.js'; import { datasetConfig, scalesConfig, tooltipConfig } from '../chart.configs'; -import { PiChartLegendComponent } from '../chart-legend/chart-legend.component'; - -function registerChartComponents() { - Chart.register(CategoryScale); - Chart.register(LinearScale); - Chart.register(BarController); - Chart.register(BarElement); - Chart.register(LineController); - Chart.register(LineElement); - Chart.register(PointElement); - Chart.register(Tooltip); - Chart.register(Legend); - Chart.register(Title); -} - -registerChartComponents(); +import { PiChartLegendComponent } from '../chart-legend/chart-legend.component'; + +function registerChartComponents() { + Chart.register(CategoryScale); + Chart.register(LinearScale); + Chart.register(BarController); + Chart.register(BarElement); + Chart.register(LineController); + Chart.register(LineElement); + Chart.register(PointElement); + Chart.register(Tooltip); + Chart.register(Legend); + Chart.register(Title); +} + +registerChartComponents(); @Component({ selector: 'pi-chart', templateUrl: './chart.component.html', styleUrls: ['./chart.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [PiChartLegendComponent], -}) -export class PiChartComponent implements OnInit, AfterViewInit { - readonly type = input<'line' | 'bar'>('line'); - readonly datasets = input.required>(); - readonly device = input.required(); - readonly xAxisMarks = input>(); - readonly isComparativeChart = input(true); - - private _hoveredDatasetIndex: number; - set hoveredDatasetIndex(index: number) { - this._hoveredDatasetIndex = index; - } - get hoveredDatasetIndex(): number { - return this._hoveredDatasetIndex; - } - - readonly chartRef = viewChild.required('chart', { read: (ElementRef) }); - - chart: Chart; - - constructor( - private translate: TranslateService, - private cdr: ChangeDetectorRef, - ) {} - - get completedDatasets() { - return this.datasets().map((dataset) => { - const datasetWithTranslatedLabels = { - ...dataset, - label: this.translate.instant(dataset.label), - }; - return { - ...datasetWithTranslatedLabels, - ...datasetConfig, - }; - }); - } - - ngOnInit(): void { - this.hoveredDatasetIndex = -1; - } - - ngAfterViewInit(): void { - this.getLineChartConfigs(); - } - - triggerHover(datasetIndex: number) { - if (datasetIndex === -1 || this.chart.getActiveElements().length > 0) { - this.chart.setActiveElements([]); - } else { - this.chart.setActiveElements([ - { - datasetIndex, - index: 0, - }, - ]); - } - this.chart.update(); - } - - getLineChartConfigs(): void { - const isComparativeChart = this.isComparativeChart(); - - this.chart = new Chart(this.chartRef().nativeElement, { - type: 'line', - data: { - labels: this.xAxisMarks(), - datasets: this.completedDatasets, - }, - options: { - responsive: true, - maintainAspectRatio: this.device() === 'DESKTOP' ? true : false, - hover: { - mode: 'dataset', - }, - onHover: (e: any, activeElements: any) => { - this.hoveredDatasetIndex = activeElements.length && activeElements[0].datasetIndex; - this.cdr.detectChanges(); - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - ...tooltipConfig, - filter: function (tooltipItem): boolean { - if (isComparativeChart) { - return tooltipItem.datasetIndex === 0 || tooltipItem.element.active; - } else { - return tooltipItem.element.active; - } - }, - callbacks: { - labelTextColor: function (context): string { - return context.dataset.borderColor as string; - }, - label: function (context) { - const chartLabel = - context.dataset.label.length > 12 - ? context.dataset.label.slice(0, 12) + '...' - : context.dataset.label; - let label: string; - if ((context.dataset as any).unitPosition === 'before') { - label = - chartLabel + ': ' + (context.dataset as any).unit + context.formattedValue; - } else { - label = - chartLabel + ': ' + context.formattedValue + (context.dataset as any).unit; - } - return label; - }, - title: function () {}, - }, - }, - }, - interaction: { - intersect: false, - mode: 'index', - }, - scales: scalesConfig, - }, - }); - } - - datasetHoveredInLegend(index: number): void { - this.hoveredDatasetIndex = index; - this.triggerHover(this.hoveredDatasetIndex); - } -} +}) +export class PiChartComponent implements OnInit, AfterViewInit { + readonly type = input<'line' | 'bar'>('line'); + readonly datasets = input.required>(); + readonly device = input.required(); + readonly xAxisMarks = input>(); + readonly isComparativeChart = input(true); + + private _hoveredDatasetIndex!: number; + set hoveredDatasetIndex(index: number) { + this._hoveredDatasetIndex = index; + } + get hoveredDatasetIndex(): number { + return this._hoveredDatasetIndex; + } + + readonly chartRef = viewChild.required('chart', { read: (ElementRef) }); + + chart!: Chart; + + constructor( + private translate: TranslateService, + private cdr: ChangeDetectorRef, + ) {} + + get completedDatasets() { + return this.datasets().map((dataset) => { + const datasetWithTranslatedLabels = { + ...dataset, + label: this.translate.instant(dataset.label), + }; + return { + ...datasetWithTranslatedLabels, + ...datasetConfig, + }; + }); + } + + ngOnInit(): void { + this.hoveredDatasetIndex = -1; + } + + ngAfterViewInit(): void { + this.getLineChartConfigs(); + } + + triggerHover(datasetIndex: number) { + if (datasetIndex === -1 || this.chart.getActiveElements().length > 0) { + this.chart.setActiveElements([]); + } else { + this.chart.setActiveElements([ + { + datasetIndex, + index: 0, + }, + ]); + } + this.chart.update(); + } + + getLineChartConfigs(): void { + const isComparativeChart = this.isComparativeChart(); + + this.chart = new Chart(this.chartRef().nativeElement, { + type: 'line', + data: { + labels: this.xAxisMarks(), + datasets: this.completedDatasets, + }, + options: { + responsive: true, + maintainAspectRatio: this.device() === 'DESKTOP' ? true : false, + hover: { + mode: 'dataset', + }, + onHover: (e: any, activeElements: any) => { + this.hoveredDatasetIndex = activeElements.length && activeElements[0].datasetIndex; + this.cdr.detectChanges(); + }, + plugins: { + legend: { + display: false, + }, + tooltip: { + ...tooltipConfig, + filter: function (tooltipItem): boolean { + if (isComparativeChart) { + return tooltipItem.datasetIndex === 0 || tooltipItem.element.active; + } else { + return tooltipItem.element.active; + } + }, + callbacks: { + labelTextColor: function (context): string { + return context.dataset.borderColor as string; + }, + label: function (context) { + const datasetLabel = context.dataset.label ?? ''; + const chartLabel = + datasetLabel.length > 12 ? datasetLabel.slice(0, 12) + '...' : datasetLabel; + let label: string; + if ((context.dataset as any).unitPosition === 'before') { + label = + chartLabel + ': ' + (context.dataset as any).unit + context.formattedValue; + } else { + label = + chartLabel + ': ' + context.formattedValue + (context.dataset as any).unit; + } + return label; + }, + title: function () {}, + }, + }, + }, + interaction: { + intersect: false, + mode: 'index', + }, + scales: scalesConfig, + }, + }); + } + + datasetHoveredInLegend(index: number): void { + this.hoveredDatasetIndex = index; + this.triggerHover(this.hoveredDatasetIndex); + } +} diff --git a/libs/ui/src/lib/ui/chart/index.ts b/libs/ui/src/lib/ui/chart/index.ts index f4e7466..c14f677 100644 --- a/libs/ui/src/lib/ui/chart/index.ts +++ b/libs/ui/src/lib/ui/chart/index.ts @@ -1,7 +1,7 @@ - - -export * from './chart/chart.component'; - -export * from './chart.configs'; - -export * from './chart-legend/chart-legend.component'; + + +export * from './chart/chart.component'; + +export * from './chart.configs'; + +export * from './chart-legend/chart-legend.component'; diff --git a/libs/ui/src/lib/ui/chip/base-chip.component.ts b/libs/ui/src/lib/ui/chip/base-chip.component.ts index 1c26206..3091d96 100644 --- a/libs/ui/src/lib/ui/chip/base-chip.component.ts +++ b/libs/ui/src/lib/ui/chip/base-chip.component.ts @@ -1,56 +1,56 @@ -// Angular -import { Directive, HostBinding, input } from '@angular/core'; - -// Style definitions -import { ComponentFamilyClass, density, mode, styleType } from '../../styles'; -import { chipColor } from './entities/chip.model'; -@Directive() -export abstract class PiBaseChipComponent { - @HostBinding('class') get classes(): string { +// Angular +import { Directive, HostBinding, input } from '@angular/core'; + +// Style definitions +import { ComponentFamilyClass, density, mode, styleType } from '../../styles'; +import { chipColor } from './entities/chip.model'; +@Directive() +export abstract class PiBaseChipComponent { + @HostBinding('class') get classes(): string { const color = this.color(); - const colorClass = color && `pi-color__${color}`; + const colorClass = color && `pi-color__${color}`; const size = this.size(); - const sizeClass = size && `pi-chip__size--${size}`; - const affixClass = this.icon() || this.value() ? 'has-affix' : ''; + const sizeClass = size && `pi-chip__size--${size}`; + const affixClass = this.icon() || this.value() ? 'has-affix' : ''; const affixAppearance = this.affixAppearance(); - const appearanceClass = - affixAppearance && `pi-chip__affix-appearance--${affixAppearance}`; + const appearanceClass = + affixAppearance && `pi-chip__affix-appearance--${affixAppearance}`; const modeValue = this.mode(); - const colorModeClass = modeValue && `pi-color__mode--${modeValue}`; - const isDisabledClass = this.isDisabled() ? 'is-disabled' : ''; - const isClosableClass = this.isClosable() ? 'is-closable' : ''; - const fillClass = this.fill() !== 'fit-content' && 'pi-chip__fill--fill-available'; - return [ - ComponentFamilyClass.Chip, - colorClass, - sizeClass, - isDisabledClass, - appearanceClass, - affixClass, - colorModeClass, - isClosableClass, - fillClass, - ].join(' '); - } - // Content - readonly label = input(); - readonly value = input(); - readonly icon = input(); - - // Skin - readonly color = input(); - - readonly mode = input('light'); - readonly size = input<'small' | 'medium' | 'large'>('small'); - readonly fill = input<'fit-content' | 'fill-available'>('fit-content'); - - // Affix - readonly affixAppearance = input<'fill' | 'ghost'>('ghost'); - readonly affixPosition = input<'previous' | 'after'>('after'); - - // Behavior - readonly isClosable = input(true); - - // Status - readonly isDisabled = input(false); -} + const colorModeClass = modeValue && `pi-color__mode--${modeValue}`; + const isDisabledClass = this.isDisabled() ? 'is-disabled' : ''; + const isClosableClass = this.isClosable() ? 'is-closable' : ''; + const fillClass = this.fill() !== 'fit-content' && 'pi-chip__fill--fill-available'; + return [ + ComponentFamilyClass.Chip, + colorClass, + sizeClass, + isDisabledClass, + appearanceClass, + affixClass, + colorModeClass, + isClosableClass, + fillClass, + ].join(' '); + } + // Content + readonly label = input(); + readonly value = input(); + readonly icon = input(); + + // Skin + readonly color = input(); + + readonly mode = input('light'); + readonly size = input<'small' | 'medium' | 'large'>('small'); + readonly fill = input<'fit-content' | 'fill-available'>('fit-content'); + + // Affix + readonly affixAppearance = input<'fill' | 'ghost'>('ghost'); + readonly affixPosition = input<'previous' | 'after'>('after'); + + // Behavior + readonly isClosable = input(true); + + // Status + readonly isDisabled = input(false); +} diff --git a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html index 9c74783..35e5ce8 100644 --- a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html +++ b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html @@ -1,21 +1,21 @@ - -
- {{ label() }} - - - {{ value() }} - -
- - - + +
+ {{ label() }} + + + {{ value() }} + +
+ + + diff --git a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss index 09cfada..e0dffbb 100644 --- a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss +++ b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.scss @@ -1,62 +1,62 @@ -@mixin chipActionColor($color) { - border: 1px solid; - transition: var(--pi-animation); - - // Is Active - &.is-active { - background-color: var(--pi-color-#{$color}-50); - border-color: var(--pi-color-#{$color}-100); - } - - &:not(.is-active):not(.is-disabled) { - background-color: var(--pi-color-white); - border-color: var(--pi-color-#{$color}-100); - color: var(--pi-color-#{$color}); - } - // Hover - &:hover { - cursor: pointer; - - &:not(.is-disabled) { - background-color: var(--pi-color-#{$color}-50); - border-color: var(--pi-color-#{$color}-75); - color: var(--pi-color-#{$color}-900); - } - } -} - -:host { - & > span { - gap: var(--pi-spacing-x-small); - } - - &.pi-chip__affix-position--previous { - &.has-affix { - & > span { - & > div { - flex-direction: row-reverse; - } - } - } - } - // Colors - // Primary - &.pi-color__primary { - @include chipActionColor(primary); - } - - // Accent - &.pi-color__accent { - @include chipActionColor(accent); - } - - // Highlighted - &.pi-color__highlighted { - @include chipActionColor(highlighted); - } - - // Grey - &.pi-color__grey { - @include chipActionColor(grey); - } -} +@mixin chipActionColor($color) { + border: 1px solid; + transition: var(--pi-animation); + + // Is Active + &.is-active { + background-color: var(--pi-color-#{$color}-50); + border-color: var(--pi-color-#{$color}-100); + } + + &:not(.is-active):not(.is-disabled) { + background-color: var(--pi-color-white); + border-color: var(--pi-color-#{$color}-100); + color: var(--pi-color-#{$color}); + } + // Hover + &:hover { + cursor: pointer; + + &:not(.is-disabled) { + background-color: var(--pi-color-#{$color}-50); + border-color: var(--pi-color-#{$color}-75); + color: var(--pi-color-#{$color}-900); + } + } +} + +:host { + & > span { + gap: var(--pi-spacing-x-small); + } + + &.pi-chip__affix-position--previous { + &.has-affix { + & > span { + & > div { + flex-direction: row-reverse; + } + } + } + } + // Colors + // Primary + &.pi-color__primary { + @include chipActionColor(primary); + } + + // Accent + &.pi-color__accent { + @include chipActionColor(accent); + } + + // Highlighted + &.pi-color__highlighted { + @include chipActionColor(highlighted); + } + + // Grey + &.pi-color__grey { + @include chipActionColor(grey); + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts index b0a5f69..976fabf 100644 --- a/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts +++ b/libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts @@ -4,56 +4,56 @@ import { HostBinding, input, output -} from '@angular/core'; -import { ComponentFamilyClass, mode, styleType } from '../../../styles'; -import { PiBaseChipComponent } from '../base-chip.component'; +} from '@angular/core'; +import { ComponentFamilyClass, mode, styleType } from '../../../styles'; +import { PiBaseChipComponent } from '../base-chip.component'; import { chipColor } from '../entities/chip.model'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-chip-action', templateUrl: './chip-action.component.html', styleUrls: ['./chip-action.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiChipActionComponent extends PiBaseChipComponent { - @HostBinding('class') get actionClasses(): string { - const hasActionIconClass = this.hasActionIcon() && 'has-action'; - const isActiveClass = this.isActive() ? 'is-active' : ''; - /** - * When the chip action is dismissible, the affix position will be always previous, - that's why we force the position--previous class binding - */ +}) +export class PiChipActionComponent extends PiBaseChipComponent { + @HostBinding('class') get actionClasses(): string { + const hasActionIconClass = this.hasActionIcon() && 'has-action'; + const isActiveClass = this.isActive() ? 'is-active' : ''; + /** + * When the chip action is dismissible, the affix position will be always previous, + that's why we force the position--previous class binding + */ const affixPosition = this.affixPosition(); - const isClosableAffixPositionClass = - this.isClosable() && affixPosition === 'after' - ? 'pi-chip__affix-position--previous' - : `pi-chip__affix-position--${affixPosition}`; + const isClosableAffixPositionClass = + this.isClosable() && affixPosition === 'after' + ? 'pi-chip__affix-position--previous' + : `pi-chip__affix-position--${affixPosition}`; const affixPositionValue = this.affixPosition(); - const affixPositionClass = - affixPositionValue && `pi-chip__affix-position--${affixPositionValue}`; - - return [ - 'pi-chip-action', - ComponentFamilyClass.Chip, - hasActionIconClass, - isActiveClass, - isClosableAffixPositionClass, - affixPositionClass, - ].join(' '); - } - - readonly execute = output(); - - // Content - readonly hasActionIcon = input(true); - - // Skin - override readonly size = input<'small' | 'medium' | 'large'>('small'); - override readonly color = input('primary'); - - // Status - readonly isActive = input.required(); -} + const affixPositionClass = + affixPositionValue && `pi-chip__affix-position--${affixPositionValue}`; + + return [ + 'pi-chip-action', + ComponentFamilyClass.Chip, + hasActionIconClass, + isActiveClass, + isClosableAffixPositionClass, + affixPositionClass, + ].join(' '); + } + + readonly execute = output(); + + // Content + readonly hasActionIcon = input(true); + + // Skin + override readonly size = input<'small' | 'medium' | 'large'>('small'); + override readonly color = input('primary'); + + // Status + readonly isActive = input.required(); +} diff --git a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html index 8be6d76..7c8c99b 100644 --- a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html +++ b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html @@ -1,5 +1,5 @@ - - {{ dateValue?.weekDay }} - {{ dateValue?.day }} - {{ dateValue?.month.toUpperCase() }} - + + {{ dateValue?.weekDay }} + {{ dateValue?.day }} + {{ dateValue?.month.toUpperCase() }} + diff --git a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss index 841e47a..1291e22 100644 --- a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss +++ b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.scss @@ -1,169 +1,169 @@ -@mixin columnChipDateSize($size, $gap, $radius) { - &.pi-chip-date__flex-direction--column, - &.has-weekday.pi-chip-date__flex-direction--row { - width: $size; - height: $size; - border-radius: $radius; - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - & > span { - gap: $gap; - } - } -} - -@mixin rowChipDateSize($height, $padding, $radius) { - // Without Weekday - &:not(.has-weekday) { - // Flex direction - // Column - // Row - &.pi-chip-date__flex-direction--row { - height: $height; - padding-left: $padding; - padding-right: $padding; - border-radius: $radius; - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - } - } -} - -@mixin chipDateFontSizes($day-size, $month-size) { - // Day - .pi-chip-date__day { - font: { - size: $day-size; - } - } - // Month - .pi-chip-date__month { - font: { - size: $month-size; - } - } -} - -@mixin chipDateColor($color) { - &.is-clickable { - cursor: pointer; - // Hover - &:hover { - &:not(.is-active):not(.is-disabled) { - background-color: var(--pi-color-#{$color}-75); - color: var(--pi-color-#{$color}); - } - } - // Is Active - &.is-active { - background-color: var(--pi-color-#{$color}-50); - border: 1px solid; - border-color: var(--pi-color-#{$color}-75); - } - - &:not(.is-active):not(.is-disabled) { - border: 1px solid; - border-color: var(--pi-color-#{$color}-75); - color: var(--pi-color-#{$color}); - background-color: var(--pi-color-white); - } - } - &:not(.is-clickable) { - background-color: var(--pi-color-#{$color}-25); - color: var(--pi-color-#{$color}); - &.is-stroked { - border: 1px solid; - border-color: var(--pi-color-#{$color}-50); - } - } -} - -@mixin chipDateFlexDirection { - &.pi-chip-date__flex-direction--column, - &.has-weekday.pi-chip-date__flex-direction--row { - & > span { - flex-direction: column; - align-items: center; - } - } - &:not(.has-weekday) { - &.pi-chip-date__flex-direction--row { - & > span { - flex-direction: row; - align-items: baseline; - } - } - } -} - -:host { - justify-content: center; - & > span { - display: flex; - justify-content: center; - gap: var(--pi-spacing-xxxx-small); - } - // Day - .pi-chip-date__day { - margin-bottom: unset; - font: { - weight: 600; - } - } - // Weekday - .pi-chip-date__weekday { - font: { - size: var(--pi-font-size-x-small); - } - } - // Colors - // Primary - &.pi-color__primary { - @include chipDateColor(primary); - } - // Accent - &.pi-color__accent { - @include chipDateColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include chipDateColor(highlighted); - } - // Grey - &.pi-color__grey { - @include chipDateColor(grey); - } - - // Flex direction - @include chipDateFlexDirection; - - // Sizes - // Small - &.pi-chip__size--small { - @include columnChipDateSize( - var(--pi-spacing-xxx-large), - var(--pi-spacing-xxxx-small), - 0.875rem - ); - @include rowChipDateSize(var(--pi-spacing-x-large), var(--pi-spacing-x-small), 0.5rem); - @include chipDateFontSizes(var(--pi-font-size-x-small), var(--pi-font-size-xxx-small)); - } - - // Medium - &.pi-chip__size--medium { - @include columnChipDateSize( - var(--pi-spacing-xxxx-large), - var(--pi-spacing-xxxx-small), - var(--pi-border-radius-medium) - ); - @include rowChipDateSize(var(--pi-spacing-xx-large), var(--pi-spacing-small), 0.75rem); - @include chipDateFontSizes(var(--pi-font-size-small), var(--pi-font-size-xx-small)); - } - - // Large (Has Weekday) - &.pi-chip__size--large, - &.has-weekday { - @include columnChipDateSize(4.5rem, var(--pi-spacing-xxx-small), 1.25rem); - @include chipDateFontSizes(var(--pi-font-size-large), var(--pi-font-size-xx-small)); - } -} +@mixin columnChipDateSize($size, $gap, $radius) { + &.pi-chip-date__flex-direction--column, + &.has-weekday.pi-chip-date__flex-direction--row { + width: $size; + height: $size; + border-radius: $radius; + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + & > span { + gap: $gap; + } + } +} + +@mixin rowChipDateSize($height, $padding, $radius) { + // Without Weekday + &:not(.has-weekday) { + // Flex direction + // Column + // Row + &.pi-chip-date__flex-direction--row { + height: $height; + padding-left: $padding; + padding-right: $padding; + border-radius: $radius; + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + } + } +} + +@mixin chipDateFontSizes($day-size, $month-size) { + // Day + .pi-chip-date__day { + font: { + size: $day-size; + } + } + // Month + .pi-chip-date__month { + font: { + size: $month-size; + } + } +} + +@mixin chipDateColor($color) { + &.is-clickable { + cursor: pointer; + // Hover + &:hover { + &:not(.is-active):not(.is-disabled) { + background-color: var(--pi-color-#{$color}-75); + color: var(--pi-color-#{$color}); + } + } + // Is Active + &.is-active { + background-color: var(--pi-color-#{$color}-50); + border: 1px solid; + border-color: var(--pi-color-#{$color}-75); + } + + &:not(.is-active):not(.is-disabled) { + border: 1px solid; + border-color: var(--pi-color-#{$color}-75); + color: var(--pi-color-#{$color}); + background-color: var(--pi-color-white); + } + } + &:not(.is-clickable) { + background-color: var(--pi-color-#{$color}-25); + color: var(--pi-color-#{$color}); + &.is-stroked { + border: 1px solid; + border-color: var(--pi-color-#{$color}-50); + } + } +} + +@mixin chipDateFlexDirection { + &.pi-chip-date__flex-direction--column, + &.has-weekday.pi-chip-date__flex-direction--row { + & > span { + flex-direction: column; + align-items: center; + } + } + &:not(.has-weekday) { + &.pi-chip-date__flex-direction--row { + & > span { + flex-direction: row; + align-items: baseline; + } + } + } +} + +:host { + justify-content: center; + & > span { + display: flex; + justify-content: center; + gap: var(--pi-spacing-xxxx-small); + } + // Day + .pi-chip-date__day { + margin-bottom: unset; + font: { + weight: 600; + } + } + // Weekday + .pi-chip-date__weekday { + font: { + size: var(--pi-font-size-x-small); + } + } + // Colors + // Primary + &.pi-color__primary { + @include chipDateColor(primary); + } + // Accent + &.pi-color__accent { + @include chipDateColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include chipDateColor(highlighted); + } + // Grey + &.pi-color__grey { + @include chipDateColor(grey); + } + + // Flex direction + @include chipDateFlexDirection; + + // Sizes + // Small + &.pi-chip__size--small { + @include columnChipDateSize( + var(--pi-spacing-xxx-large), + var(--pi-spacing-xxxx-small), + 0.875rem + ); + @include rowChipDateSize(var(--pi-spacing-x-large), var(--pi-spacing-x-small), 0.5rem); + @include chipDateFontSizes(var(--pi-font-size-x-small), var(--pi-font-size-xxx-small)); + } + + // Medium + &.pi-chip__size--medium { + @include columnChipDateSize( + var(--pi-spacing-xxxx-large), + var(--pi-spacing-xxxx-small), + var(--pi-border-radius-medium) + ); + @include rowChipDateSize(var(--pi-spacing-xx-large), var(--pi-spacing-small), 0.75rem); + @include chipDateFontSizes(var(--pi-font-size-small), var(--pi-font-size-xx-small)); + } + + // Large (Has Weekday) + &.pi-chip__size--large, + &.has-weekday { + @include columnChipDateSize(4.5rem, var(--pi-spacing-xxx-small), 1.25rem); + @include chipDateFontSizes(var(--pi-font-size-large), var(--pi-font-size-xx-small)); + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts index 4251992..2310a38 100644 --- a/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts +++ b/libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts @@ -4,72 +4,72 @@ import { HostBinding, input, output -} from '@angular/core'; -import { chipColor } from '../entities/chip.model'; -import { ComponentFamilyClass, theming } from '../../../styles'; -import { Date } from '../../../util/models'; -import { PiBaseChipComponent } from '../base-chip.component'; -import { DateTime } from 'luxon'; +} from '@angular/core'; +import { chipColor } from '../entities/chip.model'; +import { ComponentFamilyClass, theming } from '../../../styles'; +import { Date } from '../../../util/models'; +import { PiBaseChipComponent } from '../base-chip.component'; +import { DateTime } from 'luxon'; import _ from 'lodash'; -import { NgIf } from '@angular/common'; - +import { NgIf } from '@angular/common'; + @Component({ selector: 'pi-chip-date', templateUrl: './chip-date.component.html', styleUrls: ['./chip-date.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf], -}) -export class PiChipDateComponent extends PiBaseChipComponent { - @HostBinding('class') get dateClasses(): string { +}) +export class PiChipDateComponent extends PiBaseChipComponent { + @HostBinding('class') get dateClasses(): string { const color = this.color(); - const colorClass = color && `pi-color__${color}`; - const isClickableClass = this.isClickable() ? 'is-clickable' : ''; - const isStrokeClass = !this.isClickable() && !!this.isStroked() && 'is-stroked'; - const isActiveClass = !!this.isActive() ? 'is-active' : ''; - const hasWeekDayClass = this.size() === 'large' ? 'has-weekday' : ''; + const colorClass = color && `pi-color__${color}`; + const isClickableClass = this.isClickable() ? 'is-clickable' : ''; + const isStrokeClass = !this.isClickable() && !!this.isStroked() && 'is-stroked'; + const isActiveClass = !!this.isActive() ? 'is-active' : ''; + const hasWeekDayClass = this.size() === 'large' ? 'has-weekday' : ''; const flexDirection = this.flexDirection(); - const flexDirectionClass = - flexDirection && `pi-chip-date__flex-direction--${flexDirection}`; - return [ - 'pi-chip-date', - ComponentFamilyClass.Chip, - colorClass, - isClickableClass, - isStrokeClass, - isActiveClass, - hasWeekDayClass, - flexDirectionClass, - ].join(' '); - } - - readonly click = output(); - - // Content - readonly date = input.required(); // ISO format in UTC time zone - - // Skin - override readonly color = input('primary'); - readonly isStroked = input(false); - - // Size - weekday only available in LARGE - // No weekday - available in SMALL and MEDIUM - // row direction only available in S and M - override readonly size = input<'small' | 'medium' | 'large'>('small'); - - readonly flexDirection = input<'row' | 'column'>('column'); - - // Status - readonly isClickable = input(true); - readonly isActive = input.required(); - - get dateValue(): Date { - const dateObj = DateTime.fromISO(this.date()).setLocale('es'); - const isDateToday = dateObj.hasSame(DateTime.now(), 'day'); - return { - day: dateObj.day.toString() || '', - month: dateObj.monthShort || '', - weekDay: isDateToday ? _.capitalize(dateObj.toRelativeCalendar()) : _.capitalize(dateObj.weekdayShort || ''), - }; - } -} + const flexDirectionClass = + flexDirection && `pi-chip-date__flex-direction--${flexDirection}`; + return [ + 'pi-chip-date', + ComponentFamilyClass.Chip, + colorClass, + isClickableClass, + isStrokeClass, + isActiveClass, + hasWeekDayClass, + flexDirectionClass, + ].join(' '); + } + + readonly click = output(); + + // Content + readonly date = input.required(); // ISO format in UTC time zone + + // Skin + override readonly color = input('primary'); + readonly isStroked = input(false); + + // Size - weekday only available in LARGE + // No weekday - available in SMALL and MEDIUM + // row direction only available in S and M + override readonly size = input<'small' | 'medium' | 'large'>('small'); + + readonly flexDirection = input<'row' | 'column'>('column'); + + // Status + readonly isClickable = input(true); + readonly isActive = input.required(); + + get dateValue(): Date { + const dateObj = DateTime.fromISO(this.date()).setLocale('es'); + const isDateToday = dateObj.hasSame(DateTime.now(), 'day'); + return { + day: dateObj.day.toString() || '', + month: dateObj.monthShort || '', + weekDay: isDateToday ? _.capitalize(dateObj.toRelativeCalendar() ?? '') : _.capitalize(dateObj.weekdayShort || ''), + }; + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html index 50ea27b..8394bb9 100644 --- a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html +++ b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html @@ -1,6 +1,6 @@ - - {{ label() }} - - - - + + {{ label() }} + + + + diff --git a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss index ba12cb1..4ef25fb 100644 --- a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss +++ b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.scss @@ -1,28 +1,28 @@ -:host { - // Affix position - // Previous - &.pi-chip__affix-position--previous { - & > span { - flex-direction: row-reverse; - } - } - // Color - $status-colors: ( - (success, success), - (error, warn), - (pending, accent), - (info, primary), - (disabled, grey) - ); - - @each $status, $color in $status-colors { - &.is-#{$status} { - color: var(--pi-color-#{$color}); - - // Fill - &.pi-chip-status__appearance--fill { - background-color: var(--pi-color-#{$color}-50); - } - } - } -} +:host { + // Affix position + // Previous + &.pi-chip__affix-position--previous { + & > span { + flex-direction: row-reverse; + } + } + // Color + $status-colors: ( + (success, success), + (error, warn), + (pending, accent), + (info, primary), + (disabled, grey) + ); + + @each $status, $color in $status-colors { + &.is-#{$status} { + color: var(--pi-color-#{$color}); + + // Fill + &.pi-chip-status__appearance--fill { + background-color: var(--pi-color-#{$color}-50); + } + } + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts index a172dd1..209f94d 100644 --- a/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts +++ b/libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts @@ -1,37 +1,37 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; - -// Shared -import { status } from '../../../util/status'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; + +// Shared +import { status } from '../../../util/status'; import { PiBaseChipComponent } from '../base-chip.component'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-chip-status', templateUrl: './chip-status.component.html', styleUrls: ['./chip-status.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiChipStatusComponent extends PiBaseChipComponent { - @HostBinding('class') get statusClasses(): string { +}) +export class PiChipStatusComponent extends PiBaseChipComponent { + @HostBinding('class') get statusClasses(): string { const statusValue = this.status(); - const statusClass = statusValue && `is-${statusValue}`; - const appearanceClass = `pi-chip-status__appearance--${this.appearance()}`; - const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : ''; + const statusClass = statusValue && `is-${statusValue}`; + const appearanceClass = `pi-chip-status__appearance--${this.appearance()}`; + const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : ''; const affixPosition = this.affixPosition(); - const affixPositionClass = - affixPosition && `pi-chip__affix-position--${affixPosition}`; - return ['pi-chip-status', statusClass, appearanceClass, hasLabelClass, affixPositionClass].join( - ' ' - ); - } - - // Skin - readonly appearance = input<'ghost' | 'fill'>('fill'); - override readonly affixPosition = input<'previous' | 'after'>('previous'); - override readonly size = input<'small' | 'medium' | 'large'>('small'); - - /* green | red | yellow | blue | opacity */ - readonly status = input.required(); -} + const affixPositionClass = + affixPosition && `pi-chip__affix-position--${affixPosition}`; + return ['pi-chip-status', statusClass, appearanceClass, hasLabelClass, affixPositionClass].join( + ' ' + ); + } + + // Skin + readonly appearance = input<'ghost' | 'fill'>('fill'); + override readonly affixPosition = input<'previous' | 'after'>('previous'); + override readonly size = input<'small' | 'medium' | 'large'>('small'); + + /* green | red | yellow | blue | opacity */ + readonly status = input.required(); +} diff --git a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html index f117788..119fa53 100644 --- a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html +++ b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html @@ -1,28 +1,28 @@ - -
- - {{ timeValue }}h - - {{ dateValue }} -
- - - - - - -
- - {{ timeValue }}h - - {{ dateValue }} - - -
- - + +
+ + {{ timeValue }}h + + {{ dateValue }} +
+ + + + + + +
+ + {{ timeValue }}h + + {{ dateValue }} + + +
+ + diff --git a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss index d237174..59a1743 100644 --- a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss +++ b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.scss @@ -1,154 +1,154 @@ -@mixin chipTimeSizes($min-width, $side-padding, $ghost-padding-left, $font-size) { - gap: var(--pi-spacing-x-small); - &.has-affix { - min-width: $min-width; - padding-left: var(--pi-spacing-#{$side-padding}); - padding-right: var(--pi-spacing-#{$side-padding}); - & > span { - gap: var(--pi-spacing-small); - - .pi-chip-affix__value { - font: { - size: var(--pi-font-size-#{$font-size}); - } - } - } - &.pi-chip__affix-appearance--fill { - padding-left: var(--pi-spacing-#{$side-padding}); - } - &.is-closable { - &.pi-chip__affix-appearance--ghost { - & > span { - padding-left: var(--pi-spacing-#{$ghost-padding-left}); - } - } - } - } -} - -@mixin chipTimeCommonColor($color) { - &:not([class*='white']) { - &:not(.is-active):not(.is-disabled) { - color: var(--pi-color-#{$color}); - } - // Hover - &:hover { - &:not(.is-disabled) { - &.is-closable { - cursor: pointer; - color: var(--pi-color-#{$color}-900); - background-color: var(--pi-color-#{$color}-50); - border-color: var(--pi-color-#{$color}-75); - } - } - } - // Is Active - &.is-active { - background-color: var(--pi-color-#{$color}-50); - border-color: var(--pi-color-#{$color}-100); - } - - // NOT Has affix - &:not(.has-affix) { - background-color: var(--pi-color-#{$color}-50); - } - - // Has affix - &.has-affix { - border: 1px solid; - &:not(.is-active):not(.is-disabled) { - border-color: var(--pi-color-#{$color}-100); - } - } - } -} - -@mixin chipTimeWhiteColor($color) { - &[class*='white'] { - background-color: var(--pi-color-white); - &:not(.is-active):not(.is-disabled) { - color: var(--pi-color-#{$color}); - } - // Hover - &:hover { - &:not(.is-disabled) { - &.is-closable { - cursor: pointer; - color: var(--pi-color-#{$color}-900); - border-color: var(--pi-color-#{$color}-75); - } - } - } - // Is Active - &.is-active { - border-color: var(--pi-color-#{$color}-100); - } - - // Has affix - &.has-affix { - border: 1px solid; - &:not(.is-active):not(.is-disabled) { - border-color: var(--pi-color-#{$color}-100); - } - } - } -} -:host { - justify-content: center; - - // Affix appearance - // Fill - &.pi-chip__affix-appearance--fill { - & > span { - justify-content: space-between; - } - .pi-chip-affix { - min-width: var(--pi-spacing-xxxx-large); - } - } - - // Colors - // Primary - &.pi-color__primary { - @include chipTimeCommonColor(primary); - } - &.pi-color__primary-white { - @include chipTimeWhiteColor(primary); - } - - // Accent - &.pi-color__accent { - @include chipTimeCommonColor(accent); - } - &.pi-color__accent-white { - @include chipTimeWhiteColor(accent); - } - - // Highlighted - &.pi-color__highlighted { - @include chipTimeCommonColor(highlighted); - } - // Highlighted - &.pi-color__highlighted-white { - @include chipTimeWhiteColor(highlighted); - } - - // Grey - &.pi-color__grey { - @include chipTimeCommonColor(grey); - } - // Highlighted - &.pi-color__highlighted-white { - @include chipTimeWhiteColor(grey-white); - } - - // Sizes - // Small - &.pi-chip__size--small { - @include chipTimeSizes(10rem, xxxx-small, x-small, xx-smal); - } - // Medium - &.pi-chip__size--medium { - @include chipTimeSizes(12rem, xxx-small, small, x-small); - } -} +@mixin chipTimeSizes($min-width, $side-padding, $ghost-padding-left, $font-size) { + gap: var(--pi-spacing-x-small); + &.has-affix { + min-width: $min-width; + padding-left: var(--pi-spacing-#{$side-padding}); + padding-right: var(--pi-spacing-#{$side-padding}); + & > span { + gap: var(--pi-spacing-small); + + .pi-chip-affix__value { + font: { + size: var(--pi-font-size-#{$font-size}); + } + } + } + &.pi-chip__affix-appearance--fill { + padding-left: var(--pi-spacing-#{$side-padding}); + } + &.is-closable { + &.pi-chip__affix-appearance--ghost { + & > span { + padding-left: var(--pi-spacing-#{$ghost-padding-left}); + } + } + } + } +} + +@mixin chipTimeCommonColor($color) { + &:not([class*='white']) { + &:not(.is-active):not(.is-disabled) { + color: var(--pi-color-#{$color}); + } + // Hover + &:hover { + &:not(.is-disabled) { + &.is-closable { + cursor: pointer; + color: var(--pi-color-#{$color}-900); + background-color: var(--pi-color-#{$color}-50); + border-color: var(--pi-color-#{$color}-75); + } + } + } + // Is Active + &.is-active { + background-color: var(--pi-color-#{$color}-50); + border-color: var(--pi-color-#{$color}-100); + } + + // NOT Has affix + &:not(.has-affix) { + background-color: var(--pi-color-#{$color}-50); + } + + // Has affix + &.has-affix { + border: 1px solid; + &:not(.is-active):not(.is-disabled) { + border-color: var(--pi-color-#{$color}-100); + } + } + } +} + +@mixin chipTimeWhiteColor($color) { + &[class*='white'] { + background-color: var(--pi-color-white); + &:not(.is-active):not(.is-disabled) { + color: var(--pi-color-#{$color}); + } + // Hover + &:hover { + &:not(.is-disabled) { + &.is-closable { + cursor: pointer; + color: var(--pi-color-#{$color}-900); + border-color: var(--pi-color-#{$color}-75); + } + } + } + // Is Active + &.is-active { + border-color: var(--pi-color-#{$color}-100); + } + + // Has affix + &.has-affix { + border: 1px solid; + &:not(.is-active):not(.is-disabled) { + border-color: var(--pi-color-#{$color}-100); + } + } + } +} +:host { + justify-content: center; + + // Affix appearance + // Fill + &.pi-chip__affix-appearance--fill { + & > span { + justify-content: space-between; + } + .pi-chip-affix { + min-width: var(--pi-spacing-xxxx-large); + } + } + + // Colors + // Primary + &.pi-color__primary { + @include chipTimeCommonColor(primary); + } + &.pi-color__primary-white { + @include chipTimeWhiteColor(primary); + } + + // Accent + &.pi-color__accent { + @include chipTimeCommonColor(accent); + } + &.pi-color__accent-white { + @include chipTimeWhiteColor(accent); + } + + // Highlighted + &.pi-color__highlighted { + @include chipTimeCommonColor(highlighted); + } + // Highlighted + &.pi-color__highlighted-white { + @include chipTimeWhiteColor(highlighted); + } + + // Grey + &.pi-color__grey { + @include chipTimeCommonColor(grey); + } + // Highlighted + &.pi-color__highlighted-white { + @include chipTimeWhiteColor(grey-white); + } + + // Sizes + // Small + &.pi-chip__size--small { + @include chipTimeSizes(10rem, xxxx-small, x-small, xx-smal); + } + // Medium + &.pi-chip__size--medium { + @include chipTimeSizes(12rem, xxx-small, small, x-small); + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts index c9d21bd..fba92b0 100644 --- a/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts +++ b/libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts @@ -4,66 +4,66 @@ import { HostBinding, input, output -} from '@angular/core'; -import { chipColor } from '../entities/chip.model'; -import { ComponentFamilyClass } from '../../../styles'; -import { DateTime } from 'luxon'; -import { PiBaseChipComponent } from '../base-chip.component'; +} from '@angular/core'; +import { chipColor } from '../entities/chip.model'; +import { ComponentFamilyClass } from '../../../styles'; +import { DateTime } from 'luxon'; +import { PiBaseChipComponent } from '../base-chip.component'; import { chipThemingColor } from '../entities/chip.model'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-chip-time', templateUrl: './chip-time.component.html', styleUrls: ['./chip-time.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiChipTimeComponent extends PiBaseChipComponent { - @HostBinding('class') get dateClasses(): string { +}) +export class PiChipTimeComponent extends PiBaseChipComponent { + @HostBinding('class') get dateClasses(): string { const color = this.color(); - const colorClass = color && `pi-color__${color}`; - const isActiveClass = this.isActive() ? 'is-active' : ''; - const affixClass = this.time() && this.date() ? 'has-affix' : ''; - - return ['pi-chip-time', ComponentFamilyClass.Chip, colorClass, isActiveClass, affixClass].join( - ' ' - ); - } - - readonly execute = output(); - - // Content - readonly date = input.required(); // ISO format in UTC time zone - readonly time = input.required(); // ISO format in UTC time zone - readonly timezone = input('utc'); - - // Skin - override readonly color = input('primary'); - - /** - * On the chip time cases, we override the affix position property because - it will be always used by the thime input and will be always previous - */ - override readonly affixPosition = input<'previous' | 'after'>('previous'); - - // time - available in S and M - // time + date - available in S - override readonly size = input<'small' | 'medium' | 'large'>('small'); - - // Status - readonly isActive = input.required(); - - get dateObj(): DateTime { - return DateTime.fromISO(this.date(), { zone: 'utc' }); - } - - get timeValue(): string { - return this.dateObj.setZone(this.timezone()).toFormat('H:mm'); - } - - get dateValue(): string { - return this.dateObj.setLocale('es').toLocaleString(DateTime.DATE_MED); - } -} + const colorClass = color && `pi-color__${color}`; + const isActiveClass = this.isActive() ? 'is-active' : ''; + const affixClass = this.time() && this.date() ? 'has-affix' : ''; + + return ['pi-chip-time', ComponentFamilyClass.Chip, colorClass, isActiveClass, affixClass].join( + ' ' + ); + } + + readonly execute = output(); + + // Content + readonly date = input.required(); // ISO format in UTC time zone + readonly time = input.required(); // ISO format in UTC time zone + readonly timezone = input('utc'); + + // Skin + override readonly color = input('primary'); + + /** + * On the chip time cases, we override the affix position property because + it will be always used by the thime input and will be always previous + */ + override readonly affixPosition = input<'previous' | 'after'>('previous'); + + // time - available in S and M + // time + date - available in S + override readonly size = input<'small' | 'medium' | 'large'>('small'); + + // Status + readonly isActive = input.required(); + + get dateObj(): DateTime { + return DateTime.fromISO(this.date(), { zone: 'utc' }); + } + + get timeValue(): string { + return this.dateObj.setZone(this.timezone()).toFormat('H:mm'); + } + + get dateValue(): string { + return this.dateObj.setLocale('es').toLocaleString(DateTime.DATE_MED); + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html index e359fd7..43544d0 100644 --- a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html +++ b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html @@ -1,11 +1,11 @@ - - - - - - + + + + + + diff --git a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss index d38f9aa..8d78745 100644 --- a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss +++ b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.scss @@ -1,208 +1,208 @@ -// Structure -// Chip value body -@mixin chipValue { - // Has label - &.has-label { - display: flex; - align-items: center; - justify-content: flex-end; - } -} - -// Font size -@mixin chipValueFontSizes($value-font-size, $label-font-size, $unit-font-size) { - // NOT Has label - &:not(.has-label) { - // Affix - .pi-chip-affix { - font: { - size: var(--pi-font-size-#{$value-font-size}); - } - } - } - // Has label - &.has-label { - // Label - .pi-chip-label { - font: { - size: var(--pi-font-size-#{$label-font-size}); - } - } - // Affix - .pi-chip-affix { - // Value - & > .pi-chip-affix__value { - font: { - size: var(--pi-font-size-#{$value-font-size}); - } - } - // Unit - & > .pi-chip-affix__unit { - font: { - size: var(--pi-font-size-#{$unit-font-size}); - } - } - } - } -} - -// Chip Size -@mixin chipValueSize( - $gap, - $chip-has-label-height, - $chip-height, - $padding-left, - $padding-right, - $chip-border-radius, - $affix-border-radius -) { - // Has label - &.has-label { - height: var(--pi-spacing-#{$chip-has-label-height}); - padding-left: var(--pi-spacing-#{$padding-left}); - padding-right: var(--pi-spacing-#{$padding-right}); - border-radius: $chip-border-radius; - -webkit-border-radius: $chip-border-radius; - -moz-border-radius: $chip-border-radius; - & > span { - gap: var(--pi-spacing-#{$gap}); - } - // Label - .pi-chip-label { - margin-top: var(--pi-spacing-xxxxx-small); - } - } - // NOT Has label - &:not(.has-label) { - height: var(--pi-spacing-#{$chip-height}); - border-radius: $affix-border-radius; - -webkit-border-radius: $affix-border-radius; - -moz-border-radius: $affix-border-radius; - } -} - -@mixin chipValueAffixSize($gap, $height, $min-width, $border-radius) { - & > span { - // Affix wrapper - & > aside { - height: $height; - min-width: $min-width; - border-radius: $border-radius; - - & > .pi-chip-affix { - gap: var(--pi-spacing-#{$gap}); - } - } - } -} - -@mixin chipValueAffixSideSpacings($side-spacing) { - .pi-chip-affix { - padding-left: var(--pi-spacing-#{$side-spacing}); - padding-right: var(--pi-spacing-#{$side-spacing}); - } -} - -// Affix -@mixin chipValueAffix { - & > span { - // Affix wrapper - & > aside { - display: flex; - justify-content: center; - align-items: center; - - & > .pi-chip-affix { - align-items: baseline; - } - } - } - // NOT Has label - &:not(.has-label) { - .pi-chip-affix { - font: { - weight: 600; - } - } - } - // Has label - &.has-label { - .pi-chip-affix { - & > .pi-chip-affix__value { - font: { - weight: 600; - } - } - } - } -} - -@mixin chipValueUnitPosition { - &.pi-chip-value__unit-position--previous { - & > span { - & > aside { - & > .pi-chip-affix { - flex-direction: row-reverse; - } - } - } - } -} - -// Color -@mixin chipValueColor($color) { - // Affix - & > span { - & > aside { - background-color: var(--pi-color-#{$color}-25); - color: var(--pi-color-#{$color}); - } - } - - // Has label - &.has-label { - background-color: var(--pi-color-#{$color}-10); - color: var(--pi-color-#{$color}); - - & > span { - label { - color: var(--pi-color-#{$color}); - } - } - } -} - -:host { - // Structure - @include chipValue; - - // Affix - @include chipValueAffix; - // Affix unit - @include chipValueUnitPosition; - - // Size - // Medium - &.pi-chip__size--medium { - @include chipValueFontSizes(small, x-small, x-small); - @include chipValueSize(xx-small, xxx-large, x-large, small, xxx-small, 0.875rem, 0.75rem); - @include chipValueAffixSize(xxxxx-small, var(--pi-spacing-xx-large), 3.6rem, 0.75rem); - @include chipValueAffixSideSpacings(xx-small); - } - // Large - &.pi-chip__size--large { - @include chipValueFontSizes(medium, small, small); - @include chipValueSize(xx-small, xxxx-large, xxx-large, medium, xxx-small, 1.125rem, 0.875rem); - @include chipValueAffixSize(xxxx-small, 2.5rem, 4.25rem, 0.875rem); - @include chipValueAffixSideSpacings(x-small); - } - // Colors - // Success - &.pi-color__success { - @include chipValueColor(success); - } - // Warn - &.pi-color__warn { - @include chipValueColor(warn); - } -} +// Structure +// Chip value body +@mixin chipValue { + // Has label + &.has-label { + display: flex; + align-items: center; + justify-content: flex-end; + } +} + +// Font size +@mixin chipValueFontSizes($value-font-size, $label-font-size, $unit-font-size) { + // NOT Has label + &:not(.has-label) { + // Affix + .pi-chip-affix { + font: { + size: var(--pi-font-size-#{$value-font-size}); + } + } + } + // Has label + &.has-label { + // Label + .pi-chip-label { + font: { + size: var(--pi-font-size-#{$label-font-size}); + } + } + // Affix + .pi-chip-affix { + // Value + & > .pi-chip-affix__value { + font: { + size: var(--pi-font-size-#{$value-font-size}); + } + } + // Unit + & > .pi-chip-affix__unit { + font: { + size: var(--pi-font-size-#{$unit-font-size}); + } + } + } + } +} + +// Chip Size +@mixin chipValueSize( + $gap, + $chip-has-label-height, + $chip-height, + $padding-left, + $padding-right, + $chip-border-radius, + $affix-border-radius +) { + // Has label + &.has-label { + height: var(--pi-spacing-#{$chip-has-label-height}); + padding-left: var(--pi-spacing-#{$padding-left}); + padding-right: var(--pi-spacing-#{$padding-right}); + border-radius: $chip-border-radius; + -webkit-border-radius: $chip-border-radius; + -moz-border-radius: $chip-border-radius; + & > span { + gap: var(--pi-spacing-#{$gap}); + } + // Label + .pi-chip-label { + margin-top: var(--pi-spacing-xxxxx-small); + } + } + // NOT Has label + &:not(.has-label) { + height: var(--pi-spacing-#{$chip-height}); + border-radius: $affix-border-radius; + -webkit-border-radius: $affix-border-radius; + -moz-border-radius: $affix-border-radius; + } +} + +@mixin chipValueAffixSize($gap, $height, $min-width, $border-radius) { + & > span { + // Affix wrapper + & > aside { + height: $height; + min-width: $min-width; + border-radius: $border-radius; + + & > .pi-chip-affix { + gap: var(--pi-spacing-#{$gap}); + } + } + } +} + +@mixin chipValueAffixSideSpacings($side-spacing) { + .pi-chip-affix { + padding-left: var(--pi-spacing-#{$side-spacing}); + padding-right: var(--pi-spacing-#{$side-spacing}); + } +} + +// Affix +@mixin chipValueAffix { + & > span { + // Affix wrapper + & > aside { + display: flex; + justify-content: center; + align-items: center; + + & > .pi-chip-affix { + align-items: baseline; + } + } + } + // NOT Has label + &:not(.has-label) { + .pi-chip-affix { + font: { + weight: 600; + } + } + } + // Has label + &.has-label { + .pi-chip-affix { + & > .pi-chip-affix__value { + font: { + weight: 600; + } + } + } + } +} + +@mixin chipValueUnitPosition { + &.pi-chip-value__unit-position--previous { + & > span { + & > aside { + & > .pi-chip-affix { + flex-direction: row-reverse; + } + } + } + } +} + +// Color +@mixin chipValueColor($color) { + // Affix + & > span { + & > aside { + background-color: var(--pi-color-#{$color}-25); + color: var(--pi-color-#{$color}); + } + } + + // Has label + &.has-label { + background-color: var(--pi-color-#{$color}-10); + color: var(--pi-color-#{$color}); + + & > span { + label { + color: var(--pi-color-#{$color}); + } + } + } +} + +:host { + // Structure + @include chipValue; + + // Affix + @include chipValueAffix; + // Affix unit + @include chipValueUnitPosition; + + // Size + // Medium + &.pi-chip__size--medium { + @include chipValueFontSizes(small, x-small, x-small); + @include chipValueSize(xx-small, xxx-large, x-large, small, xxx-small, 0.875rem, 0.75rem); + @include chipValueAffixSize(xxxxx-small, var(--pi-spacing-xx-large), 3.6rem, 0.75rem); + @include chipValueAffixSideSpacings(xx-small); + } + // Large + &.pi-chip__size--large { + @include chipValueFontSizes(medium, small, small); + @include chipValueSize(xx-small, xxxx-large, xxx-large, medium, xxx-small, 1.125rem, 0.875rem); + @include chipValueAffixSize(xxxx-small, 2.5rem, 4.25rem, 0.875rem); + @include chipValueAffixSideSpacings(x-small); + } + // Colors + // Success + &.pi-color__success { + @include chipValueColor(success); + } + // Warn + &.pi-color__warn { + @include chipValueColor(warn); + } +} diff --git a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts index d748ef3..643ce63 100644 --- a/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts +++ b/libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts @@ -1,36 +1,36 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { PiBaseChipComponent } from '../base-chip.component'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { PiBaseChipComponent } from '../base-chip.component'; import { unit } from '../../../util/models'; -import { NgIf } from '@angular/common'; - +import { NgIf } from '@angular/common'; + @Component({ selector: 'pi-chip-value', templateUrl: './chip-value.component.html', styleUrls: ['./chip-value.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf], -}) -export class PiChipValueComponent extends PiBaseChipComponent { - @HostBinding('class') get valueClasses(): string { - const colorClass = Number(this.value()) > 0 ? 'pi-color__success' : 'pi-color__warn'; - const hasLabelClass = !!this.label() ? 'has-label' : ''; +}) +export class PiChipValueComponent extends PiBaseChipComponent { + @HostBinding('class') get valueClasses(): string { + const colorClass = Number(this.value()) > 0 ? 'pi-color__success' : 'pi-color__warn'; + const hasLabelClass = !!this.label() ? 'has-label' : ''; const unitPosition = this.unitPosition(); - const unitPositionClass = - unitPosition && `pi-chip-value__unit-position--${unitPosition}`; + const unitPositionClass = + unitPosition && `pi-chip-value__unit-position--${unitPosition}`; const affixPosition = this.affixPosition(); - const affixPositionClass = - affixPosition && `pi-chip__affix-position--${affixPosition}`; - return ['pi-chip-value', colorClass, hasLabelClass, unitPositionClass, affixPositionClass].join( - ' ' - ); - } - - // Content - readonly unit = input.required(); - - // Skin - override readonly size = input<'small' | 'medium' | 'large'>('large'); - - // Unit - readonly unitPosition = input<'previous' | 'after'>('after'); -} + const affixPositionClass = + affixPosition && `pi-chip__affix-position--${affixPosition}`; + return ['pi-chip-value', colorClass, hasLabelClass, unitPositionClass, affixPositionClass].join( + ' ' + ); + } + + // Content + readonly unit = input.required(); + + // Skin + override readonly size = input<'small' | 'medium' | 'large'>('large'); + + // Unit + readonly unitPosition = input<'previous' | 'after'>('after'); +} diff --git a/libs/ui/src/lib/ui/chip/chip/chip.component.html b/libs/ui/src/lib/ui/chip/chip/chip.component.html index 371e994..1803356 100644 --- a/libs/ui/src/lib/ui/chip/chip/chip.component.html +++ b/libs/ui/src/lib/ui/chip/chip/chip.component.html @@ -1,23 +1,23 @@ - - {{ label() }} - - - - - - - - - {{ value() }} - - + + {{ label() }} + + + + + + + + + {{ value() }} + + diff --git a/libs/ui/src/lib/ui/chip/chip/chip.component.scss b/libs/ui/src/lib/ui/chip/chip/chip.component.scss index d5f0dcc..bbd789b 100644 --- a/libs/ui/src/lib/ui/chip/chip/chip.component.scss +++ b/libs/ui/src/lib/ui/chip/chip/chip.component.scss @@ -1,37 +1,37 @@ -@mixin chipColor($color) { - // Outline - &.pi-chip__appearance--outline { - border: 1px solid; - background-color: var(--pi-color-white); - color: var(--pi-color-#{$color}); - border-color: var(--pi-color-#{$color}-50); - } -} - -:host { - // Colors - // Primary - &.pi-color__primary { - @include chipColor(primary); - } - - // Accent - &.pi-color__accent { - @include chipColor(accent); - } - - // Warn - &.pi-color__warn { - @include chipColor(warn); - } - - // Success - &.pi-color__success { - @include chipColor(success); - } - - // Grey - &.pi-color__grey { - @include chipColor(grey); - } -} +@mixin chipColor($color) { + // Outline + &.pi-chip__appearance--outline { + border: 1px solid; + background-color: var(--pi-color-white); + color: var(--pi-color-#{$color}); + border-color: var(--pi-color-#{$color}-50); + } +} + +:host { + // Colors + // Primary + &.pi-color__primary { + @include chipColor(primary); + } + + // Accent + &.pi-color__accent { + @include chipColor(accent); + } + + // Warn + &.pi-color__warn { + @include chipColor(warn); + } + + // Success + &.pi-color__success { + @include chipColor(success); + } + + // Grey + &.pi-color__grey { + @include chipColor(grey); + } +} diff --git a/libs/ui/src/lib/ui/chip/chip/chip.component.ts b/libs/ui/src/lib/ui/chip/chip/chip.component.ts index 1869159..bd6730d 100644 --- a/libs/ui/src/lib/ui/chip/chip/chip.component.ts +++ b/libs/ui/src/lib/ui/chip/chip/chip.component.ts @@ -1,34 +1,34 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { theming } from '../../../styles'; -import { chipColor } from '../entities/chip.model'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { theming } from '../../../styles'; +import { chipColor } from '../entities/chip.model'; import { PiBaseChipComponent } from '../base-chip.component'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-chip', templateUrl: './chip.component.html', styleUrls: ['./chip.component.scss', '../styles/base-chip.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiChipComponent extends PiBaseChipComponent { - @HostBinding('class') get chipClasses(): string { +}) +export class PiChipComponent extends PiBaseChipComponent { + @HostBinding('class') get chipClasses(): string { const appearance = this.appearance(); - const appearanceClass = appearance && `pi-chip__appearance--${appearance}`; + const appearanceClass = appearance && `pi-chip__appearance--${appearance}`; const iconType = this.iconType(); - const iconTypeClass = iconType && `pi-chip__icon-type--${iconType}`; - const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : ''; + const iconTypeClass = iconType && `pi-chip__icon-type--${iconType}`; + const hasLabelClass = !this.label() ? 'pi-chip__single-icon' : ''; const affixPosition = this.affixPosition(); - const affixPositionClass = - affixPosition && `pi-chip__affix-position--${affixPosition}`; - return [appearanceClass, iconTypeClass, hasLabelClass, affixPositionClass].join(' '); - } - - // Content - readonly iconType = input<'custom' | 'default'>('default'); - - // Skin - readonly appearance = input<'outline' | 'fill'>('outline'); - override readonly color = input('primary'); -} + const affixPositionClass = + affixPosition && `pi-chip__affix-position--${affixPosition}`; + return [appearanceClass, iconTypeClass, hasLabelClass, affixPositionClass].join(' '); + } + + // Content + readonly iconType = input<'custom' | 'default'>('default'); + + // Skin + readonly appearance = input<'outline' | 'fill'>('outline'); + override readonly color = input('primary'); +} diff --git a/libs/ui/src/lib/ui/chip/entities/chip.model.ts b/libs/ui/src/lib/ui/chip/entities/chip.model.ts index e99ae3e..911a3c8 100644 --- a/libs/ui/src/lib/ui/chip/entities/chip.model.ts +++ b/libs/ui/src/lib/ui/chip/entities/chip.model.ts @@ -1,25 +1,25 @@ -// Skin -export type chipColor = - | 'accent-white' - | 'accent' - | 'grey' - | 'grey-white' - | 'highlighted-white' - | 'highlighted' - | 'primary-white' - | 'primary' - | 'success-white' - | 'success' - | 'warn-white' - | 'warn'; - -// Skin -export type chipThemingColor = - | 'accent-white' - | 'accent' - | 'grey' - | 'grey-white' - | 'highlighted-white' - | 'highlighted' - | 'primary-white' - | 'primary'; +// Skin +export type chipColor = + | 'accent-white' + | 'accent' + | 'grey' + | 'grey-white' + | 'highlighted-white' + | 'highlighted' + | 'primary-white' + | 'primary' + | 'success-white' + | 'success' + | 'warn-white' + | 'warn'; + +// Skin +export type chipThemingColor = + | 'accent-white' + | 'accent' + | 'grey' + | 'grey-white' + | 'highlighted-white' + | 'highlighted' + | 'primary-white' + | 'primary'; diff --git a/libs/ui/src/lib/ui/chip/index.ts b/libs/ui/src/lib/ui/chip/index.ts index 9766dcc..4cac96d 100644 --- a/libs/ui/src/lib/ui/chip/index.ts +++ b/libs/ui/src/lib/ui/chip/index.ts @@ -1,9 +1,9 @@ - - -export * from './chip/chip.component'; -export * from './chip-action/chip-action.component'; -export * from './chip-date/chip-date.component'; -export * from './chip-status/chip-status.component'; -export * from './chip-value/chip-value.component'; -export * from './chip-time/chip-time.component'; -export * from './tile/tile.component'; + + +export * from './chip/chip.component'; +export * from './chip-action/chip-action.component'; +export * from './chip-date/chip-date.component'; +export * from './chip-status/chip-status.component'; +export * from './chip-value/chip-value.component'; +export * from './chip-time/chip-time.component'; +export * from './tile/tile.component'; diff --git a/libs/ui/src/lib/ui/chip/styles/_color.scss b/libs/ui/src/lib/ui/chip/styles/_color.scss index 040053c..3a479e7 100644 --- a/libs/ui/src/lib/ui/chip/styles/_color.scss +++ b/libs/ui/src/lib/ui/chip/styles/_color.scss @@ -1,117 +1,117 @@ -@mixin baseChipFontColor($color) { - // Mode light, default - &:not(.pi-color__mode--dark) { - label, - span { - color: var(--pi-color-#{$color}); - } - } - // Mode dark - &.pi-color__mode--dark { - label, - span { - color: var(--pi-color-white); - } - } -} - -@mixin baseChipBackgroundColor($color) { - &:not(.pi-chip-value):not(.pi-chip-date) { - // Mode light, default - &:not(.pi-color__mode--dark) { - // Fill - &.pi-chip__appearance--fill { - background-color: var(--pi-color-#{$color}-25); - } - - // Outline - &.pi-chip__appearance--outline { - background-color: var(--pi-color-#{$color}-10); - } - - // Has value - &.has-affix { - // NOT Density - &.pi-chip__affix-appearance--fill { - // Is clickable - &:not(.pi-chip-action):not(.pi-chip-time) { - // Affix - .pi-chip-affix { - background-color: var(--pi-color-#{$color}-50); - } - } - // NOT Is clickable - &.pi-chip-action, - &.pi-chip-time { - &:hover { - transition: var(--pi-animation); - // Affix - .pi-chip-affix { - background-color: var(--pi-color-#{$color}-75); - } - } - &:not(:hover) { - // Affix - .pi-chip-affix { - background-color: var(--pi-color-#{$color}-50); - } - } - } - } - } - } - - // Mode dark - &.pi-color__mode--dark { - background-color: var(--pi-color-#{$color}-300); - // Has value - &.has-affix { - &.pi-chip__affix-appearance--fill { - // Affix - .pi-chip-affix { - color: var(--pi-color-#{$color}); - background-color: var(--pi-color-white); - } - } - } - } - } -} - -:host { - // Colors - &.pi-color__primary { - @include baseChipFontColor(primary); - @include baseChipBackgroundColor(primary); - } - - &.pi-color__accent { - @include baseChipFontColor(accent); - @include baseChipBackgroundColor(accent); - } - - &.pi-color__success { - @include baseChipFontColor(success); - @include baseChipBackgroundColor(success); - } - - &.pi-color__warn { - @include baseChipFontColor(warn); - @include baseChipBackgroundColor(warn); - } - - &.pi-color__black { - @include baseChipFontColor(grey-900); - @include baseChipBackgroundColor(grey-900); - } - - &.pi-color__grey { - @include baseChipFontColor(grey); - @include baseChipBackgroundColor(grey); - } - - &.pi-color__highlighted { - @include baseChipFontColor(highlighted); - @include baseChipBackgroundColor(highlighted); - } -} +@mixin baseChipFontColor($color) { + // Mode light, default + &:not(.pi-color__mode--dark) { + label, + span { + color: var(--pi-color-#{$color}); + } + } + // Mode dark + &.pi-color__mode--dark { + label, + span { + color: var(--pi-color-white); + } + } +} + +@mixin baseChipBackgroundColor($color) { + &:not(.pi-chip-value):not(.pi-chip-date) { + // Mode light, default + &:not(.pi-color__mode--dark) { + // Fill + &.pi-chip__appearance--fill { + background-color: var(--pi-color-#{$color}-25); + } + + // Outline + &.pi-chip__appearance--outline { + background-color: var(--pi-color-#{$color}-10); + } + + // Has value + &.has-affix { + // NOT Density + &.pi-chip__affix-appearance--fill { + // Is clickable + &:not(.pi-chip-action):not(.pi-chip-time) { + // Affix + .pi-chip-affix { + background-color: var(--pi-color-#{$color}-50); + } + } + // NOT Is clickable + &.pi-chip-action, + &.pi-chip-time { + &:hover { + transition: var(--pi-animation); + // Affix + .pi-chip-affix { + background-color: var(--pi-color-#{$color}-75); + } + } + &:not(:hover) { + // Affix + .pi-chip-affix { + background-color: var(--pi-color-#{$color}-50); + } + } + } + } + } + } + + // Mode dark + &.pi-color__mode--dark { + background-color: var(--pi-color-#{$color}-300); + // Has value + &.has-affix { + &.pi-chip__affix-appearance--fill { + // Affix + .pi-chip-affix { + color: var(--pi-color-#{$color}); + background-color: var(--pi-color-white); + } + } + } + } + } +} + +:host { + // Colors + &.pi-color__primary { + @include baseChipFontColor(primary); + @include baseChipBackgroundColor(primary); + } + + &.pi-color__accent { + @include baseChipFontColor(accent); + @include baseChipBackgroundColor(accent); + } + + &.pi-color__success { + @include baseChipFontColor(success); + @include baseChipBackgroundColor(success); + } + + &.pi-color__warn { + @include baseChipFontColor(warn); + @include baseChipBackgroundColor(warn); + } + + &.pi-color__black { + @include baseChipFontColor(grey-900); + @include baseChipBackgroundColor(grey-900); + } + + &.pi-color__grey { + @include baseChipFontColor(grey); + @include baseChipBackgroundColor(grey); + } + + &.pi-color__highlighted { + @include baseChipFontColor(highlighted); + @include baseChipBackgroundColor(highlighted); + } +} diff --git a/libs/ui/src/lib/ui/chip/styles/_position.scss b/libs/ui/src/lib/ui/chip/styles/_position.scss index 17e539e..396b336 100644 --- a/libs/ui/src/lib/ui/chip/styles/_position.scss +++ b/libs/ui/src/lib/ui/chip/styles/_position.scss @@ -1,34 +1,34 @@ -// Position -@mixin chipAffixPosition { - &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-status):not(.pi-chip-time):not( - .pi-chip-action - ) { - // Has affix - &.has-affix { - // Affix position previous - &.pi-chip__affix-position--previous { - justify-content: flex-end; - & > span { - flex-direction: row-reverse; - } - } - } - } -} - -// Position -@mixin chipMatIconPosition { - &:not(.pi-chip-date):not(.pi-chip-value) { - .mat-icon { - display: flex; - justify-content: flex-start; - align-items: center; - } - } -} - -:host { - // Position - @include chipAffixPosition; - @include chipMatIconPosition; -} +// Position +@mixin chipAffixPosition { + &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-status):not(.pi-chip-time):not( + .pi-chip-action + ) { + // Has affix + &.has-affix { + // Affix position previous + &.pi-chip__affix-position--previous { + justify-content: flex-end; + & > span { + flex-direction: row-reverse; + } + } + } + } +} + +// Position +@mixin chipMatIconPosition { + &:not(.pi-chip-date):not(.pi-chip-value) { + .mat-icon { + display: flex; + justify-content: flex-start; + align-items: center; + } + } +} + +:host { + // Position + @include chipAffixPosition; + @include chipMatIconPosition; +} diff --git a/libs/ui/src/lib/ui/chip/styles/_size.scss b/libs/ui/src/lib/ui/chip/styles/_size.scss index 4411ca1..80b5918 100644 --- a/libs/ui/src/lib/ui/chip/styles/_size.scss +++ b/libs/ui/src/lib/ui/chip/styles/_size.scss @@ -1,281 +1,281 @@ -// Size -@mixin chipSize($chip-height, $chip-border-radius) { - &:not(.pi-chip-date):not(.pi-chip-value) { - height: var(--pi-spacing-#{$chip-height}); - border-radius: $chip-border-radius; - } -} - -// Single Icon Size -@mixin chipSingleIconSize($chip-size, $icon-size, $border-radius) { - &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-time) { - // Single Icon - &.pi-chip__single-icon { - height: var(--pi-spacing-#{$chip-size}); - width: var(--pi-spacing-#{$chip-size}); - border-radius: $border-radius; - - .pi-chip-affix { - height: var(--pi-spacing-#{$chip-size}); - width: var(--pi-spacing-#{$chip-size}); - border-radius: $border-radius; - // Icon - & > .pi-chip-affix__icon { - height: var(--pi-spacing-#{$icon-size}); - width: var(--pi-spacing-#{$icon-size}); - } - } - } - } -} - -/** -* This mixin manages the left and right padding from the common content to the sides. -*/ -@mixin chipSideSpacings($padding, $gap) { - &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) { - &:not(.has-affix), - &.pi-chip-action.has-affix { - padding-left: var(--pi-spacing-#{$padding}); - padding-right: var(--pi-spacing-#{$padding}); - } - &.pi-chip-action { - &.has-affix { - .pi-chip-close-icon { - margin-left: var(--pi-spacing-#{$padding}); - } - } - } - - &.pi-chip-time { - &.is-closable { - padding-right: var(--pi-spacing-#{$padding}); - } - } - - &:not(.has-action) { - &.has-affix { - // Previous - &.pi-chip__affix-position--previous { - padding-right: var(--pi-spacing-#{$padding}); - } - // After - &.pi-chip__affix-position--after { - padding-left: var(--pi-spacing-#{$padding}); - } - - &.pi-chip__affix-appearance--ghost { - // Previous - &.pi-chip__affix-position--previous { - padding-left: calc( - var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) - - var(--pi-spacing-xxxx-small) - ); - } - // After - &.pi-chip__affix-position--after { - padding-right: calc( - var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) - - var(--pi-spacing-xxxx-small) - ); - } - } - } - } - - &.has-affix { - &.pi-chip__affix-appearance--fill { - & > span { - gap: var(--pi-spacing-#{$gap}); - } - } - &.pi-chip__affix-appearance--ghost { - & > span { - gap: calc(var(--pi-spacing-#{$gap}) - var(--pi-spacing-xxxxx-small)); - } - } - } - } -} - -// Font sizes -@mixin chipFontSize($size) { - &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) { - .pi-chip-label, - span { - font: { - size: var(--pi-font-size-#{$size}); - } - } - // Has value - .pi-chip-affix { - text-align: center; - font: { - weight: 600; - } - } - } -} - -// Affix size -@mixin chipAffixSize($size, $affix-border-radius, $icon-padding, $text-side-padding) { - &:not(.pi-chip-date):not(.pi-chip-value) { - .pi-chip-affix { - // Icon, Value or Time - & > [class*='pi-chip-affix__'] { - display: flex; - justify-content: center; - align-items: center; - } - - // Value or Time - & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) { - height: $size; - text-align: center; - } - } - - // NOT Chip Single Icon - &:not(.pi-chip__single-icon) { - .pi-chip-affix { - height: $size; - border-radius: $affix-border-radius; - } - } - - // NOT Chip time - &:not(.pi-chip-time) { - .pi-chip-affix { - min-width: calc(#{$size} + var(--pi-spacing-xxxx-small)); - } - } - // NOT Chip time affix appearance ghost - &:not(.pi-chip-time.pi-chip__affix-appearance--ghost) { - .pi-chip-affix { - // Value or Time - & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) { - padding-left: var(--pi-spacing-#{$text-side-padding}); - padding-right: var(--pi-spacing-#{$text-side-padding}); - } - } - } - - // NOT Chip Single Icon & Chip Time - &:not(.pi-chip__single-icon):not(.pi-chip-time) { - .pi-chip-affix { - min-width: calc(#{$size} + var(--pi-spacing-xxxx-small)); - // Icon - & > .pi-chip-affix__icon { - height: calc(#{$size} - var(--pi-spacing-#{$icon-padding})); - width: calc(#{$size} - var(--pi-spacing-#{$icon-padding})); - } - } - } - } -} - -/** -* This mixin manages the left and right padding from the affix, fill and ghost, to the sides. -*/ -@mixin chipAffixSideSpacings($affix-side-spacing) { - &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) { - &.has-affix { - // Previous - &.pi-chip__affix-position--previous { - padding-left: var(--pi-spacing-#{$affix-side-spacing}); - } - /** - * After position does not includes the chip time & the chip action when it's closable. - */ - &:not(.pi-chip-time):not(.is-closable), - &:not(.pi-chip-action.is-closable) { - // After - &.pi-chip__affix-position--after:not(.pi-chip__icon-type--custom) { - padding-right: var(--pi-spacing-#{$affix-side-spacing}); - } - } - } - } -} - -// Close Action Sizes -@mixin chipCloseIconSize($icon-size) { - .pi-chip-close-icon { - height: var(--pi-spacing-#{$icon-size}); - width: var(--pi-spacing-#{$icon-size}); - } -} - -:host { - // Chip Small - &.pi-chip__size--small { - // Small Chip size - @include chipSize(x-large, 0.5rem); - - // Small Chip side spacings - @include chipSideSpacings(x-small, xxx-small); - - // Small Chip Single Icon Size - @include chipSingleIconSize(x-large, medium, 0.625rem); - - // Small Chip font size - @include chipFontSize(x-small); - - // Small Chip Affix Size - @include chipAffixSize(1.125rem, 0.375rem, xxxx-small, xx-small); - - // Small Chip Affix Side Spacings - @include chipAffixSideSpacings(xxxx-small); - - // Small Chip Close Icon Size - @include chipCloseIconSize(x-small); - } - - // Chip Medium - &.pi-chip__size--medium { - // Medium Chip size - @include chipSize(xx-large, 0.75rem); - - // Medium Chip side spacings - @include chipSideSpacings(small, xxx-small); - - // Medium Chip Single Icon Size - @include chipSingleIconSize(xx-large, large, 0.75rem); - - // Medium Chip font size - @include chipFontSize(x-small); - - // Medium Chip Affix Size - @include chipAffixSize(var(--pi-spacing-x-large), 0.5rem, xx-small, xx-small); - - // Medium Chip Affix Side Spacings - @include chipAffixSideSpacings(xxx-small); - - // Medium Chip Close Icon Size - @include chipCloseIconSize(small); - } - - // Chip Large - &.pi-chip__size--large { - // Large Chip size - @include chipSize(xxx-large, 0.875rem); - - // Large Chip side spacings - @include chipSideSpacings(medium, xx-small); - - // Large Chip Single Icon Size - @include chipSingleIconSize(xxx-large, x-large, 0.875rem); - - // Large Chip font size - @include chipFontSize(medium); - - // Large Chip Affix Size - @include chipAffixSize(1.875rem, 0.625rem, x-small, x-small); - - // Large Chip Affix Side Spacings - @include chipAffixSideSpacings(xxx-small); - - // Large Chip Close Icon Size - @include chipCloseIconSize(small); - } -} +// Size +@mixin chipSize($chip-height, $chip-border-radius) { + &:not(.pi-chip-date):not(.pi-chip-value) { + height: var(--pi-spacing-#{$chip-height}); + border-radius: $chip-border-radius; + } +} + +// Single Icon Size +@mixin chipSingleIconSize($chip-size, $icon-size, $border-radius) { + &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip-time) { + // Single Icon + &.pi-chip__single-icon { + height: var(--pi-spacing-#{$chip-size}); + width: var(--pi-spacing-#{$chip-size}); + border-radius: $border-radius; + + .pi-chip-affix { + height: var(--pi-spacing-#{$chip-size}); + width: var(--pi-spacing-#{$chip-size}); + border-radius: $border-radius; + // Icon + & > .pi-chip-affix__icon { + height: var(--pi-spacing-#{$icon-size}); + width: var(--pi-spacing-#{$icon-size}); + } + } + } + } +} + +/** +* This mixin manages the left and right padding from the common content to the sides. +*/ +@mixin chipSideSpacings($padding, $gap) { + &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) { + &:not(.has-affix), + &.pi-chip-action.has-affix { + padding-left: var(--pi-spacing-#{$padding}); + padding-right: var(--pi-spacing-#{$padding}); + } + &.pi-chip-action { + &.has-affix { + .pi-chip-close-icon { + margin-left: var(--pi-spacing-#{$padding}); + } + } + } + + &.pi-chip-time { + &.is-closable { + padding-right: var(--pi-spacing-#{$padding}); + } + } + + &:not(.has-action) { + &.has-affix { + // Previous + &.pi-chip__affix-position--previous { + padding-right: var(--pi-spacing-#{$padding}); + } + // After + &.pi-chip__affix-position--after { + padding-left: var(--pi-spacing-#{$padding}); + } + + &.pi-chip__affix-appearance--ghost { + // Previous + &.pi-chip__affix-position--previous { + padding-left: calc( + var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) - + var(--pi-spacing-xxxx-small) + ); + } + // After + &.pi-chip__affix-position--after { + padding-right: calc( + var(--pi-spacing-#{$padding}) - var(--pi-spacing-#{$gap}) - + var(--pi-spacing-xxxx-small) + ); + } + } + } + } + + &.has-affix { + &.pi-chip__affix-appearance--fill { + & > span { + gap: var(--pi-spacing-#{$gap}); + } + } + &.pi-chip__affix-appearance--ghost { + & > span { + gap: calc(var(--pi-spacing-#{$gap}) - var(--pi-spacing-xxxxx-small)); + } + } + } + } +} + +// Font sizes +@mixin chipFontSize($size) { + &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) { + .pi-chip-label, + span { + font: { + size: var(--pi-font-size-#{$size}); + } + } + // Has value + .pi-chip-affix { + text-align: center; + font: { + weight: 600; + } + } + } +} + +// Affix size +@mixin chipAffixSize($size, $affix-border-radius, $icon-padding, $text-side-padding) { + &:not(.pi-chip-date):not(.pi-chip-value) { + .pi-chip-affix { + // Icon, Value or Time + & > [class*='pi-chip-affix__'] { + display: flex; + justify-content: center; + align-items: center; + } + + // Value or Time + & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) { + height: $size; + text-align: center; + } + } + + // NOT Chip Single Icon + &:not(.pi-chip__single-icon) { + .pi-chip-affix { + height: $size; + border-radius: $affix-border-radius; + } + } + + // NOT Chip time + &:not(.pi-chip-time) { + .pi-chip-affix { + min-width: calc(#{$size} + var(--pi-spacing-xxxx-small)); + } + } + // NOT Chip time affix appearance ghost + &:not(.pi-chip-time.pi-chip__affix-appearance--ghost) { + .pi-chip-affix { + // Value or Time + & > [class*='pi-chip-affix__']:not(.pi-chip-affix__icon) { + padding-left: var(--pi-spacing-#{$text-side-padding}); + padding-right: var(--pi-spacing-#{$text-side-padding}); + } + } + } + + // NOT Chip Single Icon & Chip Time + &:not(.pi-chip__single-icon):not(.pi-chip-time) { + .pi-chip-affix { + min-width: calc(#{$size} + var(--pi-spacing-xxxx-small)); + // Icon + & > .pi-chip-affix__icon { + height: calc(#{$size} - var(--pi-spacing-#{$icon-padding})); + width: calc(#{$size} - var(--pi-spacing-#{$icon-padding})); + } + } + } + } +} + +/** +* This mixin manages the left and right padding from the affix, fill and ghost, to the sides. +*/ +@mixin chipAffixSideSpacings($affix-side-spacing) { + &:not(.pi-chip-date):not(.pi-chip-value):not(.pi-chip__single-icon) { + &.has-affix { + // Previous + &.pi-chip__affix-position--previous { + padding-left: var(--pi-spacing-#{$affix-side-spacing}); + } + /** + * After position does not includes the chip time & the chip action when it's closable. + */ + &:not(.pi-chip-time):not(.is-closable), + &:not(.pi-chip-action.is-closable) { + // After + &.pi-chip__affix-position--after:not(.pi-chip__icon-type--custom) { + padding-right: var(--pi-spacing-#{$affix-side-spacing}); + } + } + } + } +} + +// Close Action Sizes +@mixin chipCloseIconSize($icon-size) { + .pi-chip-close-icon { + height: var(--pi-spacing-#{$icon-size}); + width: var(--pi-spacing-#{$icon-size}); + } +} + +:host { + // Chip Small + &.pi-chip__size--small { + // Small Chip size + @include chipSize(x-large, 0.5rem); + + // Small Chip side spacings + @include chipSideSpacings(x-small, xxx-small); + + // Small Chip Single Icon Size + @include chipSingleIconSize(x-large, medium, 0.625rem); + + // Small Chip font size + @include chipFontSize(x-small); + + // Small Chip Affix Size + @include chipAffixSize(1.125rem, 0.375rem, xxxx-small, xx-small); + + // Small Chip Affix Side Spacings + @include chipAffixSideSpacings(xxxx-small); + + // Small Chip Close Icon Size + @include chipCloseIconSize(x-small); + } + + // Chip Medium + &.pi-chip__size--medium { + // Medium Chip size + @include chipSize(xx-large, 0.75rem); + + // Medium Chip side spacings + @include chipSideSpacings(small, xxx-small); + + // Medium Chip Single Icon Size + @include chipSingleIconSize(xx-large, large, 0.75rem); + + // Medium Chip font size + @include chipFontSize(x-small); + + // Medium Chip Affix Size + @include chipAffixSize(var(--pi-spacing-x-large), 0.5rem, xx-small, xx-small); + + // Medium Chip Affix Side Spacings + @include chipAffixSideSpacings(xxx-small); + + // Medium Chip Close Icon Size + @include chipCloseIconSize(small); + } + + // Chip Large + &.pi-chip__size--large { + // Large Chip size + @include chipSize(xxx-large, 0.875rem); + + // Large Chip side spacings + @include chipSideSpacings(medium, xx-small); + + // Large Chip Single Icon Size + @include chipSingleIconSize(xxx-large, x-large, 0.875rem); + + // Large Chip font size + @include chipFontSize(medium); + + // Large Chip Affix Size + @include chipAffixSize(1.875rem, 0.625rem, x-small, x-small); + + // Large Chip Affix Side Spacings + @include chipAffixSideSpacings(xxx-small); + + // Large Chip Close Icon Size + @include chipCloseIconSize(small); + } +} diff --git a/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss b/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss index 4b2df9f..e5bc2c5 100644 --- a/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss +++ b/libs/ui/src/lib/ui/chip/styles/base-chip.component.scss @@ -1,75 +1,75 @@ -@use 'color'; -@use 'position'; -@use 'size'; - -// Common Chip styles -:host { - display: flex; - align-items: center; - width: fit-content; - & > span { - display: flex; - align-items: center; - line-height: 1; - } - - .pi-chip-affix { - display: flex; - justify-content: center; - } - - &:not(.pi-chip-value) { - .pi-chip-affix { - align-items: center; - } - } - - // Status - // Disabled - &.is-disabled { - opacity: 0.5; - cursor: default; - } - - .mat-icon, - img { - transition: var(--pi-animation); - } - &:hover { - .pi-chip-close-icon { - transform: rotate(90deg); - } - } - - &:not(.pi-chip__single-icon):not(.pi-chip-date__flex-direction--column) { - &.pi-chip__fill--fill-available { - width: -webkit-fill-available; - } - &:not(.pi-chip__fill--fill-available) { - width: fit-content; - } - } - &.pi-chip-action, - &.pi-chip-time { - & > span { - width: -webkit-fill-available; - & > div { - display: flex; - justify-content: center; - align-items: center; - gap: var(--pi-spacing-xx-small); - } - } - // Ghost - &.pi-chip__affix-appearance--ghost { - & > span { - & > div { - flex: 1 1 auto; - } - & > .pi-chip-close-icon { - flex: 0 0 auto; - } - } - } - } -} +@use 'color'; +@use 'position'; +@use 'size'; + +// Common Chip styles +:host { + display: flex; + align-items: center; + width: fit-content; + & > span { + display: flex; + align-items: center; + line-height: 1; + } + + .pi-chip-affix { + display: flex; + justify-content: center; + } + + &:not(.pi-chip-value) { + .pi-chip-affix { + align-items: center; + } + } + + // Status + // Disabled + &.is-disabled { + opacity: 0.5; + cursor: default; + } + + .mat-icon, + img { + transition: var(--pi-animation); + } + &:hover { + .pi-chip-close-icon { + transform: rotate(90deg); + } + } + + &:not(.pi-chip__single-icon):not(.pi-chip-date__flex-direction--column) { + &.pi-chip__fill--fill-available { + width: -webkit-fill-available; + } + &:not(.pi-chip__fill--fill-available) { + width: fit-content; + } + } + &.pi-chip-action, + &.pi-chip-time { + & > span { + width: -webkit-fill-available; + & > div { + display: flex; + justify-content: center; + align-items: center; + gap: var(--pi-spacing-xx-small); + } + } + // Ghost + &.pi-chip__affix-appearance--ghost { + & > span { + & > div { + flex: 1 1 auto; + } + & > .pi-chip-close-icon { + flex: 0 0 auto; + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/chip/tile/tile.component.html b/libs/ui/src/lib/ui/chip/tile/tile.component.html index fc53c72..8bd2159 100644 --- a/libs/ui/src/lib/ui/chip/tile/tile.component.html +++ b/libs/ui/src/lib/ui/chip/tile/tile.component.html @@ -1,11 +1,11 @@ -
-
- - - {{ value() }} - -
- {{ value() }} -
- - +
+
+ + + {{ value() }} + +
+ {{ value() }} +
+ + diff --git a/libs/ui/src/lib/ui/chip/tile/tile.component.scss b/libs/ui/src/lib/ui/chip/tile/tile.component.scss index 46d1cab..8a16d76 100644 --- a/libs/ui/src/lib/ui/chip/tile/tile.component.scss +++ b/libs/ui/src/lib/ui/chip/tile/tile.component.scss @@ -1,127 +1,127 @@ -@mixin tileColor($color) { - color: var(--pi-color-#{$color}); - background-color: var(--pi-color-#{$color}-25); - & > label { - color: var(--pi-color-#{$color}); - } - & > header { - & > div { - background-color: var(--pi-color-#{$color}-75); - } - } -} - -@mixin tileSpacings($gap, $padding, $border-radius) { - gap: var(--pi-spacing-#{$gap}); - padding: var(--pi-spacing-#{$padding}); - border-radius: $border-radius; - -webkit-border-radius: $border-radius; - -moz-border-radius: $border-radius; -} - -@mixin tileSizes($height, $width) { - height: $height; - width: $width; -} - -:host { - display: flex; - & > header { - & > div { - display: flex; - justify-content: space-between; - align-items: flex-start; - width: -webkit-fill-available; - & > span { - display: flex; - line-height: 1; - font: { - size: var(--pi-font-size-large); - weight: 700; - } - } - } - } - & > label { - font: { - size: var(--pi-font-size-x-small); - } - } - & > header { - & > div { - display: flex; - justify-content: center; - align-items: center; - padding: var(--pi-spacing-xx-small); - border-radius: 0.875rem; - -webkit-border-radius: 0.875rem; - -moz-border-radius: 0.875rem; - } - } - - // Value - &.has-value { - span { - display: flex; - justify-content: center; - align-items: center; - height: var(--pi-spacing-x-large); - width: var(--pi-spacing-x-large); - font: { - weight: 600; - } - } - } - - &.has-icon-and-value { - } - - // Flex Direction - // Column - &.pi-tile__flex-direction--column { - flex-direction: column; - align-items: flex-start; - justify-content: space-between; - @include tileSizes(6.375rem, 8.75rem); - @include tileSpacings(xx-small, small, 1.1875rem); - } - // Row - &.pi-tile__flex-direction--row { - align-items: center; - - @include tileSpacings(xx-small, xx-small, var(--pi-border-radius-medium)); - } - - // Color - // Primary - &.pi-color__primary { - @include tileColor(primary); - } - // Accent - &.pi-color__accent { - @include tileColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include tileColor(highlighted); - } -} - -html { - &.is-mobile { - :host { - // Row - &.pi-tile__flex-direction--row { - @include tileSizes(auto, -webkit-fill-available); - } - } - } - &:not(.is-mobile) { - :host { - // Row - &.pi-tile__flex-direction--row { - @include tileSizes(auto, 12.125rem); - } - } - } -} +@mixin tileColor($color) { + color: var(--pi-color-#{$color}); + background-color: var(--pi-color-#{$color}-25); + & > label { + color: var(--pi-color-#{$color}); + } + & > header { + & > div { + background-color: var(--pi-color-#{$color}-75); + } + } +} + +@mixin tileSpacings($gap, $padding, $border-radius) { + gap: var(--pi-spacing-#{$gap}); + padding: var(--pi-spacing-#{$padding}); + border-radius: $border-radius; + -webkit-border-radius: $border-radius; + -moz-border-radius: $border-radius; +} + +@mixin tileSizes($height, $width) { + height: $height; + width: $width; +} + +:host { + display: flex; + & > header { + & > div { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: -webkit-fill-available; + & > span { + display: flex; + line-height: 1; + font: { + size: var(--pi-font-size-large); + weight: 700; + } + } + } + } + & > label { + font: { + size: var(--pi-font-size-x-small); + } + } + & > header { + & > div { + display: flex; + justify-content: center; + align-items: center; + padding: var(--pi-spacing-xx-small); + border-radius: 0.875rem; + -webkit-border-radius: 0.875rem; + -moz-border-radius: 0.875rem; + } + } + + // Value + &.has-value { + span { + display: flex; + justify-content: center; + align-items: center; + height: var(--pi-spacing-x-large); + width: var(--pi-spacing-x-large); + font: { + weight: 600; + } + } + } + + &.has-icon-and-value { + } + + // Flex Direction + // Column + &.pi-tile__flex-direction--column { + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + @include tileSizes(6.375rem, 8.75rem); + @include tileSpacings(xx-small, small, 1.1875rem); + } + // Row + &.pi-tile__flex-direction--row { + align-items: center; + + @include tileSpacings(xx-small, xx-small, var(--pi-border-radius-medium)); + } + + // Color + // Primary + &.pi-color__primary { + @include tileColor(primary); + } + // Accent + &.pi-color__accent { + @include tileColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include tileColor(highlighted); + } +} + +html { + &.is-mobile { + :host { + // Row + &.pi-tile__flex-direction--row { + @include tileSizes(auto, -webkit-fill-available); + } + } + } + &:not(.is-mobile) { + :host { + // Row + &.pi-tile__flex-direction--row { + @include tileSizes(auto, 12.125rem); + } + } + } +} diff --git a/libs/ui/src/lib/ui/chip/tile/tile.component.ts b/libs/ui/src/lib/ui/chip/tile/tile.component.ts index ceea78d..5e81919 100644 --- a/libs/ui/src/lib/ui/chip/tile/tile.component.ts +++ b/libs/ui/src/lib/ui/chip/tile/tile.component.ts @@ -1,34 +1,34 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; import { ComponentFamilyClass, theming } from '../../../styles'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-tile', templateUrl: './tile.component.html', styleUrls: ['./tile.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiTileComponent { - @HostBinding('class') get classes(): string { +}) +export class PiTileComponent { + @HostBinding('class') get classes(): string { const color = this.color(); - const colorClass = color && `pi-color__${color}`; - const hasIconClass = !this.icon() ? 'has-value' : ''; - const hasIconAndValueClass = this.icon() && this.value() ? 'has-icon-and-value' : ''; + const colorClass = color && `pi-color__${color}`; + const hasIconClass = !this.icon() ? 'has-value' : ''; + const hasIconAndValueClass = this.icon() && this.value() ? 'has-icon-and-value' : ''; const flexDirectionValue = this.flexDirection(); - const flexDirection = flexDirectionValue && `pi-tile__flex-direction--${flexDirectionValue}`; - return ['pi-tile', ComponentFamilyClass.Text, colorClass, flexDirection, hasIconClass].join( - ' ' - ); - } - - // Content - readonly label = input(); - readonly value = input(); - readonly icon = input(); - - // Skin - readonly color = input('primary'); - readonly flexDirection = input<'row' | 'column'>('column'); -} + const flexDirection = flexDirectionValue && `pi-tile__flex-direction--${flexDirectionValue}`; + return ['pi-tile', ComponentFamilyClass.Text, colorClass, flexDirection, hasIconClass].join( + ' ' + ); + } + + // Content + readonly label = input(); + readonly value = input(); + readonly icon = input(); + + // Skin + readonly color = input('primary'); + readonly flexDirection = input<'row' | 'column'>('column'); +} diff --git a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html index 9c14915..e3b150f 100644 --- a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html +++ b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html @@ -1,92 +1,92 @@ - -
- -
- - - - - -
- - - - - - - -
- - - - - - -
-
-
- - - - - - - -
- - -
-
- - - - - Template Error - + +
+ +
+ + + + + +
+ + + + + + + +
+ + + + + + +
+
+
+ + + + + + + +
+ + +
+
+ + + + + Template Error + diff --git a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts index a063b52..4125d76 100644 --- a/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts +++ b/libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts @@ -9,13 +9,13 @@ import { output, viewChild, contentChild -} from '@angular/core'; -import { justify } from '../../../styles'; -import { ListMode } from '../../../util/list-configs'; +} from '@angular/core'; +import { justify } from '../../../styles'; +import { ListMode } from '../../../util/list-configs'; import { cardType, columnsNumber, rowsNumber } from '../entities/data-grid.model'; import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; -import { PiGridItemDirective } from '../directives/grid-item.directive'; - +import { PiGridItemDirective } from '../directives/grid-item.directive'; + @Component({ selector: 'pi-data-grid', templateUrl: './data-grid.component.html', @@ -26,196 +26,196 @@ import { PiGridItemDirective } from '../directives/grid-item.directive'; NgTemplateOutlet, NgFor, ], -}) -export class PiDataGridComponent { - @HostBinding('class') get classes(): string { - return [ - 'pi-data-grid', - this.appearanceClass, - this.cardTypeClass, - this.columnsClass, - this.dataDirectionClass, - this.isEditableClass, - this.isExpandableClass, - this.justifyClass, - this.modeClass, - this.rowsClass, - ].join(' '); - } - - // Content - readonly data = input | null>([]); - readonly columns = input.required(); - readonly mode = input('list'); - readonly content = input<'key' | 'values'>('values'); - /** - * dataDirection = colummn: 'headings will be dispplayed at left side' - * dataDirection = row: 'headings will be dispplayed at top' - **/ - - readonly rows = input.required(); - readonly index = input.required(); - // Status - readonly isActive = input.required(); - // Behavior - readonly isExpandable = input(false); - // Behavior - readonly isEditable = input(false); - - // Skin - readonly dataDirection = input<'row' | 'column'>('row'); - readonly cardType = input('vertical'); - readonly appearance = input<'outline' | 'ghost'>('outline'); - readonly hasPdding = input(true); - readonly justify = input('space-between'); - - readonly clickItem = output(); - - readonly gridItemRef = viewChild>('gridItem'); - - readonly keysTemplateRef = contentChild>('keysTemplate'); - - readonly valuesTemplateRef = contentChild>('valuesTemplate'); - - readonly expandableKeysTemplateRef = contentChild>('expandableKeysTemplate'); - - readonly expandableValuesTemplateRef = contentChild>('expandableValuesTemplate'); - - trackByFn(index: number): number | undefined { - return index; - } - - /** - * Defines the appearance of the Data Grid in mode === 'List' of the data grid component - * - * A) FILL: - * - The even rows in Data Direction === ROW will be displayed at color grey || theming color with density 10. - * - The even columns in Data Direction === COLUMN will be displayed at color grey || theming color with density 10. - * - * B) OUTLINE: - * - All rows, excepting the last one, in Data Direction === ROW will have a border bottom 1px solid grey || theming color with density 25 - 50, depending on the grid item state. - * - All rows, excepting the last one, in Data Direction === COLUMN will have a border right 1px solid grey || theming color with density 25 - 50, depending on the grid item state. - * - * C) GHOST: - * - The rows and the cols does not have any background color and stroked grid items. - * - */ - protected get appearanceClass(): string { +}) +export class PiDataGridComponent { + @HostBinding('class') get classes(): string { + return [ + 'pi-data-grid', + this.appearanceClass, + this.cardTypeClass, + this.columnsClass, + this.dataDirectionClass, + this.isEditableClass, + this.isExpandableClass, + this.justifyClass, + this.modeClass, + this.rowsClass, + ].join(' '); + } + + // Content + readonly data = input | null>([]); + readonly columns = input.required(); + readonly mode = input('list'); + readonly content = input<'key' | 'values'>('values'); + /** + * dataDirection = colummn: 'headings will be dispplayed at left side' + * dataDirection = row: 'headings will be dispplayed at top' + **/ + + readonly rows = input.required(); + readonly index = input.required(); + // Status + readonly isActive = input.required(); + // Behavior + readonly isExpandable = input(false); + // Behavior + readonly isEditable = input(false); + + // Skin + readonly dataDirection = input<'row' | 'column'>('row'); + readonly cardType = input('vertical'); + readonly appearance = input<'outline' | 'ghost'>('outline'); + readonly hasPdding = input(true); + readonly justify = input('space-between'); + + readonly clickItem = output(); + + readonly gridItemRef = viewChild>('gridItem'); + + readonly keysTemplateRef = contentChild>('keysTemplate'); + + readonly valuesTemplateRef = contentChild>('valuesTemplate'); + + readonly expandableKeysTemplateRef = contentChild>('expandableKeysTemplate'); + + readonly expandableValuesTemplateRef = contentChild>('expandableValuesTemplate'); + + trackByFn(index: number): number | undefined { + return index; + } + + /** + * Defines the appearance of the Data Grid in mode === 'List' of the data grid component + * + * A) FILL: + * - The even rows in Data Direction === ROW will be displayed at color grey || theming color with density 10. + * - The even columns in Data Direction === COLUMN will be displayed at color grey || theming color with density 10. + * + * B) OUTLINE: + * - All rows, excepting the last one, in Data Direction === ROW will have a border bottom 1px solid grey || theming color with density 25 - 50, depending on the grid item state. + * - All rows, excepting the last one, in Data Direction === COLUMN will have a border right 1px solid grey || theming color with density 25 - 50, depending on the grid item state. + * + * C) GHOST: + * - The rows and the cols does not have any background color and stroked grid items. + * + */ + protected get appearanceClass(): string { const appearance = this.appearance(); - return appearance ? `pi-data-grid__appearance--${appearance}` : ''; - } - - /** - * Defines the appearance of the card (grid item) in mode === 'Grid'. - * - * A) HORIZONTAL: - * - A card design with an horizontal orientation in order to allow to see more results in screen print the Aside or in Mobile Devices. - * - * B) SQUARED: - * - A card design with an squared orientation in order show simplified items information. - * - * C) VERTICAL: - * - A card with a vertical orientation to display items with the full information. - * - * D) LIST: - * - This is not properly a card and it's only available in Data Direction === 'Column' cases. - * - The list type emulates a table with for a single item, so, a single keys <> values combination. - * - */ - protected get cardTypeClass(): string { + return appearance ? `pi-data-grid__appearance--${appearance}` : ''; + } + + /** + * Defines the appearance of the card (grid item) in mode === 'Grid'. + * + * A) HORIZONTAL: + * - A card design with an horizontal orientation in order to allow to see more results in screen print the Aside or in Mobile Devices. + * + * B) SQUARED: + * - A card design with an squared orientation in order show simplified items information. + * + * C) VERTICAL: + * - A card with a vertical orientation to display items with the full information. + * + * D) LIST: + * - This is not properly a card and it's only available in Data Direction === 'Column' cases. + * - The list type emulates a table with for a single item, so, a single keys <> values combination. + * + */ + protected get cardTypeClass(): string { const cardTypeValue = this.cardType(); - return this.mode() === 'grid' && cardTypeValue ? `pi-data-grid__card-type--${cardTypeValue}` : ''; - } - - /** - * Defines the number of columns of the data grid. - * - * - When de data data direction === ROW, 1 column = 1 column. - * - When de data data direction === COLUMN, 1 column emulates a row. - * - */ - protected get columnsClass(): string { + return this.mode() === 'grid' && cardTypeValue ? `pi-data-grid__card-type--${cardTypeValue}` : ''; + } + + /** + * Defines the number of columns of the data grid. + * + * - When de data data direction === ROW, 1 column = 1 column. + * - When de data data direction === COLUMN, 1 column emulates a row. + * + */ + protected get columnsClass() { const columns = this.columns(); - return columns && `pi-data-grid__columns--${columns}`; - } - - /** - * Defines the data direction of the data grid component - * If any item is displayed as - * - * - This property only applies in Data Direction === COLUMN cases: - * - */ - protected get dataDirectionClass(): string { + return columns && `pi-data-grid__columns--${columns}`; + } + + /** + * Defines the data direction of the data grid component + * If any item is displayed as + * + * - This property only applies in Data Direction === COLUMN cases: + * + */ + protected get dataDirectionClass(): string { const dataDirection = this.dataDirection(); - return this.mode() === 'list' && dataDirection - ? `pi-data-grid__data-direction--${dataDirection}` - : ''; - } - - /** - * Manage if the row can be Editable - * - * This property only applies in Data Direction === COLUMN cases: - * - */ - protected get isEditableClass(): string { - return this.dataDirection() === 'column' && this.isEditable() ? 'is-editable' : ''; - } - - /** - * Manage if the row can be Expandable - * - * - This property only applies in Data Direction === ROW cases: - * - */ - protected get isExpandableClass(): string { - return this.dataDirection() === 'row' && this.isExpandable() ? 'is-expandable' : ''; - } - - /** - * Defines the justify property between columns - * - * - This property only applies in Data Direction === COLUMN cases: - * - */ - protected get justifyClass(): string { + return this.mode() === 'list' && dataDirection + ? `pi-data-grid__data-direction--${dataDirection}` + : ''; + } + + /** + * Manage if the row can be Editable + * + * This property only applies in Data Direction === COLUMN cases: + * + */ + protected get isEditableClass(): string { + return this.dataDirection() === 'column' && this.isEditable() ? 'is-editable' : ''; + } + + /** + * Manage if the row can be Expandable + * + * - This property only applies in Data Direction === ROW cases: + * + */ + protected get isExpandableClass(): string { + return this.dataDirection() === 'row' && this.isExpandable() ? 'is-expandable' : ''; + } + + /** + * Defines the justify property between columns + * + * - This property only applies in Data Direction === COLUMN cases: + * + */ + protected get justifyClass(): string { const justifyValue = this.justify(); - return this.dataDirection() === 'column' && justifyValue - ? `pi-data-grid__justify-content--${justifyValue}` - : ''; - } - - /** - * Defines the if the list is shown in: - * - * A) Mode LIST: - * - The mode list emulates a Table component. - * - It can be avaliable in Data Direction === 'Column' and Data Direction === 'Row'. - * - The number of rows and cols must be defined. - * - * - * B) Mode GRID: - * - To display cards and 1 column lists in Data Direction Column. - * - The mode Grid is available in small and large devices. - * - The number of rows and cols must be defined to be combined - * with the cardType in order to generate grid template area to implement a specific design. - * - */ - protected get modeClass(): string { + return this.dataDirection() === 'column' && justifyValue + ? `pi-data-grid__justify-content--${justifyValue}` + : ''; + } + + /** + * Defines the if the list is shown in: + * + * A) Mode LIST: + * - The mode list emulates a Table component. + * - It can be avaliable in Data Direction === 'Column' and Data Direction === 'Row'. + * - The number of rows and cols must be defined. + * + * + * B) Mode GRID: + * - To display cards and 1 column lists in Data Direction Column. + * - The mode Grid is available in small and large devices. + * - The number of rows and cols must be defined to be combined + * with the cardType in order to generate grid template area to implement a specific design. + * + */ + protected get modeClass() { const mode = this.mode(); - return mode && `pi-data-grid__mode--${mode}`; - } - - /** - * Defines the number of rows of the data grid. - * - * - When de data data direction === ROW, 1 row = 1 row. - * - When de data data direction === COLUMN, 1 row emulates a column. - * - */ - protected get rowsClass(): string { + return mode && `pi-data-grid__mode--${mode}`; + } + + /** + * Defines the number of rows of the data grid. + * + * - When de data data direction === ROW, 1 row = 1 row. + * - When de data data direction === COLUMN, 1 row emulates a column. + * + */ + protected get rowsClass() { const rows = this.rows(); - return rows && `pi-data-grid__rows--${rows}`; - } -} + return rows && `pi-data-grid__rows--${rows}`; + } +} diff --git a/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts b/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts index 50fd440..4f85fa0 100644 --- a/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts +++ b/libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts @@ -1,28 +1,28 @@ -import { AfterViewInit, Directive, ElementRef, HostBinding, input } from '@angular/core'; -import { itemType } from '../entities/data-grid.model'; - -@Directive({ selector: '[pi-cell]', }) -export class PiCellDirective implements AfterViewInit { - @HostBinding(`class`) get cellType(): string | undefined { +import { AfterViewInit, Directive, ElementRef, HostBinding, input } from '@angular/core'; +import { itemType } from '../entities/data-grid.model'; + +@Directive({ selector: '[pi-cell]', }) +export class PiCellDirective implements AfterViewInit { + @HostBinding(`class`) get cellType(): string | undefined { const textAlign = this.textAlign(); - const textAlignClass = textAlign !== 'left' && `pi-cell__text-align--${textAlign}`; - const indentClass = this.indent() ? 'pi-cell__indented' : ''; + const textAlignClass = textAlign !== 'left' && `pi-cell__text-align--${textAlign}`; + const indentClass = this.indent() ? 'pi-cell__indented' : ''; const type = this.type(); - const typeClass = type !== 'default' && `pi-cell__type--${type}`; - return ['pi-cell', textAlignClass, indentClass, typeClass].join(' '); - } - - readonly type = input('default'); - readonly indent = input(false); - readonly index = input.required(); - readonly textAlign = input<'left' | 'center' | 'right'>('left'); - - constructor(private elRef: ElementRef) {} - - ngAfterViewInit(): void { + const typeClass = type !== 'default' && `pi-cell__type--${type}`; + return ['pi-cell', textAlignClass, indentClass, typeClass].join(' '); + } + + readonly type = input('default'); + readonly indent = input(false); + readonly index = input.required(); + readonly textAlign = input<'left' | 'center' | 'right'>('left'); + + constructor(private elRef: ElementRef) {} + + ngAfterViewInit(): void { const index = this.index(); - if (index !== undefined) { - this.elRef?.nativeElement?.classList.add(`pi-cell__${index}`); - } - } -} + if (index !== undefined) { + this.elRef?.nativeElement?.classList.add(`pi-cell__${index}`); + } + } +} diff --git a/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts b/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts index d29ceb6..d4f14f0 100644 --- a/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts +++ b/libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts @@ -1,35 +1,35 @@ -import { Directive, ElementRef, HostBinding, HostListener, Renderer2, input } from '@angular/core'; -import { columnsNumber } from '../entities/data-grid.model'; - -@Directive({ selector: '[pi-grid-item]', }) -export class PiGridItemDirective { - @HostBinding(`class`) get gridItemType(): string { - const isExpandableClass = this.isExpandable() ? 'is-expandable' : ''; - const isSelectedClass = this.isSelected() ? 'is-selected' : ''; +import { Directive, ElementRef, HostBinding, HostListener, Renderer2, input } from '@angular/core'; +import { columnsNumber } from '../entities/data-grid.model'; + +@Directive({ selector: '[pi-grid-item]', }) +export class PiGridItemDirective { + @HostBinding(`class`) get gridItemType(): string { + const isExpandableClass = this.isExpandable() ? 'is-expandable' : ''; + const isSelectedClass = this.isSelected() ? 'is-selected' : ''; const context = this.context(); - const contextClass = context && `pi-grid-item__context--${context}`; - return ['pi-grid-item', isExpandableClass, isSelectedClass, contextClass].join(' '); - } - - readonly isExpandable = input(false); - readonly isSelected = input(false); - readonly context = input.required<'keys' | 'values'>(); - - readonly cells = input.required(); - readonly isActive = input.required(); - - readonly isVisited = input(false); - - constructor(private elRef: ElementRef, private renderer: Renderer2) {} - - @HostListener('click') selectItem(): void { - const gridItem = this.elRef.nativeElement; - const isSelected = gridItem.classList.contains('is-selected'); - - if (isSelected) { - this.renderer.removeClass(gridItem, 'is-selected'); - } else { - this.renderer.addClass(gridItem, 'is-selected'); - } - } -} + const contextClass = context && `pi-grid-item__context--${context}`; + return ['pi-grid-item', isExpandableClass, isSelectedClass, contextClass].join(' '); + } + + readonly isExpandable = input(false); + readonly isSelected = input(false); + readonly context = input.required<'keys' | 'values'>(); + + readonly cells = input.required(); + readonly isActive = input.required(); + + readonly isVisited = input(false); + + constructor(private elRef: ElementRef, private renderer: Renderer2) {} + + @HostListener('click') selectItem(): void { + const gridItem = this.elRef.nativeElement; + const isSelected = gridItem.classList.contains('is-selected'); + + if (isSelected) { + this.renderer.removeClass(gridItem, 'is-selected'); + } else { + this.renderer.addClass(gridItem, 'is-selected'); + } + } +} diff --git a/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts b/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts index ff79026..b10f740 100644 --- a/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts +++ b/libs/ui/src/lib/ui/data-grid/entities/data-grid.model.ts @@ -1,17 +1,17 @@ -export type itemType = - | 'action' - | 'amount' - | 'checkbox' - | 'date' - | 'default' - | 'sum' - | 'icon' - | 'description'; - -export type columnsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; - -export type rowsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; - -export type cardStyle = 'primary' | 'secondary' | 'tertiary' | 'horizontal' | 'single-card'; - -export type cardType = 'vertical' | 'squared' | 'horizontal' | 'list'; +export type itemType = + | 'action' + | 'amount' + | 'checkbox' + | 'date' + | 'default' + | 'sum' + | 'icon' + | 'description'; + +export type columnsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; + +export type rowsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; + +export type cardStyle = 'primary' | 'secondary' | 'tertiary' | 'horizontal' | 'single-card'; + +export type cardType = 'vertical' | 'squared' | 'horizontal' | 'list'; diff --git a/libs/ui/src/lib/ui/data-grid/index.ts b/libs/ui/src/lib/ui/data-grid/index.ts index f515fe0..065b2ee 100644 --- a/libs/ui/src/lib/ui/data-grid/index.ts +++ b/libs/ui/src/lib/ui/data-grid/index.ts @@ -1,7 +1,7 @@ - - -export * from './data-grid/data-grid.component'; - -export * from './directives/cell.directive'; - -export * from './directives/grid-item.directive'; + + +export * from './data-grid/data-grid.component'; + +export * from './directives/cell.directive'; + +export * from './directives/grid-item.directive'; diff --git a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html index afabe8b..595473d 100644 --- a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html +++ b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.html @@ -1,3 +1,3 @@ -
- -
+
+ +
diff --git a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts index 79b9caf..cd70767 100644 --- a/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts +++ b/libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts @@ -1,59 +1,59 @@ -import { ChangeDetectionStrategy, Component, HostBinding, OnInit, input } from '@angular/core'; -import { Store } from '@ngrx/store'; - -import { DataTableItem } from '../entities/data-table-item.model'; - -import { ComponentFamilyClass } from '../../../styles'; -import { - DeviceConfigsState, - DeviceTypeSelectors, -} from '../../../util/device-configs'; -import { take } from 'rxjs/operators'; - +import { ChangeDetectionStrategy, Component, HostBinding, OnInit, input } from '@angular/core'; +import { Store } from '@ngrx/store'; + +import { DataTableItem } from '../entities/data-table-item.model'; + +import { ComponentFamilyClass } from '../../../styles'; +import { + DeviceConfigsState, + DeviceTypeSelectors, +} from '../../../util/device-configs'; +import { take } from 'rxjs/operators'; + @Component({ selector: 'pi-base-data-table', templateUrl: './base-data-table.component.html', styleUrls: ['./base-data-table.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class PiBaseDataTableComponent implements OnInit { - @HostBinding('class') get classes(): string { - return [ - 'pi-base-data-table', - ComponentFamilyClass.Table, - this.dataDirectionClass, - this.typeClass, - ].join(' '); - } - readonly items = input>(); - readonly dataDirection = input<'row' | 'column'>('row'); - readonly type = input<'header' | 'data'>('data'); - readonly hideValues = input(false); - - constructor(private store: Store) {} - - ngOnInit(): void { - this.dataDirectionClass; - this.typeClass; - this.hideHeader(); - } - - get dataDirectionClass(): string { - return `pi-base-data-table__data-direction--${this.dataDirection()}`; - } - - get typeClass(): string | void { - return this.type() === 'header' && 'pi-base-data-table__type--header'; - } - - private hideHeader(): void { - this.store - .select(DeviceTypeSelectors.getDevice) - .pipe(take(1)) - .subscribe((deviceType: string) => { - if (deviceType !== 'DESKTOP' && this.hideValues()) { - delete this.items()[0].values; - } - }); - } -} +}) +export class PiBaseDataTableComponent implements OnInit { + @HostBinding('class') get classes(): string { + return [ + 'pi-base-data-table', + ComponentFamilyClass.Table, + this.dataDirectionClass, + this.typeClass, + ].join(' '); + } + readonly items = input>(); + readonly dataDirection = input<'row' | 'column'>('row'); + readonly type = input<'header' | 'data'>('data'); + readonly hideValues = input(false); + + constructor(private store: Store) {} + + ngOnInit(): void { + this.dataDirectionClass; + this.typeClass; + this.hideHeader(); + } + + get dataDirectionClass(): string { + return `pi-base-data-table__data-direction--${this.dataDirection()}`; + } + + get typeClass() { + return this.type() === 'header' && 'pi-base-data-table__type--header'; + } + + private hideHeader(): void { + this.store + .select(DeviceTypeSelectors.getDevice) + .pipe(take(1)) + .subscribe((deviceType: string) => { + if (deviceType !== 'DESKTOP' && this.hideValues()) { + delete this.items()?.[0]?.values; + } + }); + } +} diff --git a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html index ac089b3..fdcb2cd 100644 --- a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html +++ b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html @@ -1,45 +1,45 @@ - - - - - - - - - - - - - - - - - {{ display() }} - - - - - - {{ display() }} - - - - - - {{ display() }} - - - - - - - - - - + + + + + + + + + + + + + + + + + {{ display() }} + + + + + + {{ display() }} + + + + + + {{ display() }} + + + + + + + + + + diff --git a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts index 546f1e5..03981e1 100644 --- a/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts +++ b/libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; import { NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common'; -import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component'; - -export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action'; +import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component'; + +export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action'; @Component({ selector: 'pi-cell-type', templateUrl: './cell-type.component.html', @@ -14,30 +14,30 @@ export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input NgTemplateOutlet, PiBaseDataTableComponent, ], -}) -export class PiCellTypeComponent { - @HostBinding('class') className = 'pi-cell-type'; - - @HostBinding('class.pi-cell-type__amount') get isAmount(): boolean { - return this.type() === 'amount'; - } - @HostBinding('class.pi-cell-type__text') get isText(): boolean { - return this.type() === 'text'; - } - @HostBinding('class.pi-cell-type__date') get isDate(): boolean { - return this.type() === 'date'; - } - @HostBinding('class.pi-cell-type__input') get isInput(): boolean { - return this.type() === 'input'; - } - @HostBinding('class.pi-cell-type__action') get isAction(): boolean { - return this.type() === 'action'; - } - - readonly type = input('text'); - - /** - * Data to display - */ - readonly display = input(); -} +}) +export class PiCellTypeComponent { + @HostBinding('class') className = 'pi-cell-type'; + + @HostBinding('class.pi-cell-type__amount') get isAmount(): boolean { + return this.type() === 'amount'; + } + @HostBinding('class.pi-cell-type__text') get isText(): boolean { + return this.type() === 'text'; + } + @HostBinding('class.pi-cell-type__date') get isDate(): boolean { + return this.type() === 'date'; + } + @HostBinding('class.pi-cell-type__input') get isInput(): boolean { + return this.type() === 'input'; + } + @HostBinding('class.pi-cell-type__action') get isAction(): boolean { + return this.type() === 'action'; + } + + readonly type = input('text'); + + /** + * Data to display + */ + readonly display = input(); +} diff --git a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html index c965b98..5ee7ddb 100644 --- a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html +++ b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html @@ -1,9 +1,9 @@ - -

{{ heading() }}

-
- - - -
+ +

{{ heading() }}

+
+ + + +
diff --git a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss index 0f3019e..10607d2 100644 --- a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss +++ b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.scss @@ -1,64 +1,64 @@ -:host { - display: flex; - // Text style - // Regular - &.pi-data-table-item__text-style--regular { - } - - // Bold - &.pi-data-table-item__text-style--bold { - font: { - weight: 700; - } - } - - // Italic - &.pi-data-table-item__text-style--italic { - } - - // Indent - &.pi-data-table-item__text-style--indent { - h4 { - padding-left: var(--pi-spacing-xxx-large); - } - } - - // Justify - // Flex-start - &.pi-data-table-item__justify--flex-start { - & > article { - & > .pi-cell-type { - justify-content: flex-start; - } - } - } - // Center - &.pi-data-table-item__justify--center { - & > article { - & > .pi-cell-type { - justify-content: center; - } - } - } - - // Flex-end - &.pi-data-table-item__justify--flex-end { - & > article { - & > .pi-cell-type { - justify-content: flex-end; - } - } - } -} - -//Mobile and tablet -@media screen and (max-width: 62rem) { - :host { - // Indent - &.pi-data-table-item__text-style--indent { - h4 { - padding-left: var(--pi-spacing-small); - } - } - } -} +:host { + display: flex; + // Text style + // Regular + &.pi-data-table-item__text-style--regular { + } + + // Bold + &.pi-data-table-item__text-style--bold { + font: { + weight: 700; + } + } + + // Italic + &.pi-data-table-item__text-style--italic { + } + + // Indent + &.pi-data-table-item__text-style--indent { + h4 { + padding-left: var(--pi-spacing-xxx-large); + } + } + + // Justify + // Flex-start + &.pi-data-table-item__justify--flex-start { + & > article { + & > .pi-cell-type { + justify-content: flex-start; + } + } + } + // Center + &.pi-data-table-item__justify--center { + & > article { + & > .pi-cell-type { + justify-content: center; + } + } + } + + // Flex-end + &.pi-data-table-item__justify--flex-end { + & > article { + & > .pi-cell-type { + justify-content: flex-end; + } + } + } +} + +//Mobile and tablet +@media screen and (max-width: 62rem) { + :host { + // Indent + &.pi-data-table-item__text-style--indent { + h4 { + padding-left: var(--pi-spacing-small); + } + } + } +} diff --git a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts index 895acb5..77f9020 100644 --- a/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts +++ b/libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts @@ -8,57 +8,57 @@ import { input, contentChild, viewChild -} from '@angular/core'; -import { textStyle, justify, borderType } from '../../../styles'; -import { Store } from '@ngrx/store'; - -// Store -import { - DeviceConfigsState, - DeviceTypeSelectors, -} from '../../../util/device-configs'; - -// RxJS +} from '@angular/core'; +import { textStyle, justify, borderType } from '../../../styles'; +import { Store } from '@ngrx/store'; + +// Store +import { + DeviceConfigsState, + DeviceTypeSelectors, +} from '../../../util/device-configs'; + +// RxJS import { take } from 'rxjs/operators'; -import { NgFor, NgTemplateOutlet } from '@angular/common'; +import { NgFor, NgTemplateOutlet } from '@angular/common'; @Component({ selector: 'pi-data-table-item', templateUrl: './data-table-item.component.html', styleUrls: ['./data-table-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, NgTemplateOutlet], -}) -export class PiDataTableItemComponent implements AfterViewInit { - @HostBinding('class') get classes(): string { - return ['pi-data-table-item', this.textStyleClass, this.justifyClass].join(' '); - } - - readonly heading = input(); - readonly values = input>(); - readonly textStyle = input('regular'); - readonly justify = input('flex-start'); - readonly borderType = input(); - - readonly item = contentChild>('item'); - readonly componentItem = viewChild('componentItem'); - - constructor(private store: Store) {} - - ngAfterViewInit(): void { - this.setCellClassByIndex(); - } - - setCellClassByIndex(): void { - this.values()?.forEach((item: string, index: number) => { - this.componentItem().nativeElement.children[index].classList.add(`pi-cell__${index}`); - }); - } - - get textStyleClass(): string { - return `pi-data-table-item__text-style--${this.textStyle()}`; - } - - get justifyClass(): string { - return `pi-data-table-item__justify--${this.justify()}`; - } -} +}) +export class PiDataTableItemComponent implements AfterViewInit { + @HostBinding('class') get classes(): string { + return ['pi-data-table-item', this.textStyleClass, this.justifyClass].join(' '); + } + + readonly heading = input(); + readonly values = input>(); + readonly textStyle = input('regular'); + readonly justify = input('flex-start'); + readonly borderType = input(); + + readonly item = contentChild>('item'); + readonly componentItem = viewChild('componentItem'); + + constructor(private store: Store) {} + + ngAfterViewInit(): void { + this.setCellClassByIndex(); + } + + setCellClassByIndex(): void { + this.values()?.forEach((item: string, index: number) => { + this.componentItem()?.nativeElement.children[index].classList.add(`pi-cell__${index}`); + }); + } + + get textStyleClass(): string { + return `pi-data-table-item__text-style--${this.textStyle()}`; + } + + get justifyClass(): string { + return `pi-data-table-item__justify--${this.justify()}`; + } +} diff --git a/libs/ui/src/lib/ui/data-table/entities/data-table-item.model.ts b/libs/ui/src/lib/ui/data-table/entities/data-table-item.model.ts index 9b5f165..e753aef 100644 --- a/libs/ui/src/lib/ui/data-table/entities/data-table-item.model.ts +++ b/libs/ui/src/lib/ui/data-table/entities/data-table-item.model.ts @@ -1,6 +1,7 @@ -export interface DataTableItem { - heading: string; - key?: string; - position?: number; - values: Array; -} +export interface DataTableItem { + heading: string; + key?: string; + position?: number; + // opcional: base-data-table lo borra en pantallas pequeñas + values?: Array; +} diff --git a/libs/ui/src/lib/ui/data-table/index.ts b/libs/ui/src/lib/ui/data-table/index.ts index 8f96474..7450e56 100644 --- a/libs/ui/src/lib/ui/data-table/index.ts +++ b/libs/ui/src/lib/ui/data-table/index.ts @@ -1,7 +1,7 @@ - - -export * from './base-data-table/base-data-table.component'; -export * from './cell-type/cell-type.component'; -export * from './data-table-item/data-table-item.component'; - -export * from './entities/data-table-item.model'; + + +export * from './base-data-table/base-data-table.component'; +export * from './cell-type/cell-type.component'; +export * from './data-table-item/data-table-item.component'; + +export * from './entities/data-table-item.model'; diff --git a/libs/ui/src/lib/ui/divider/divider/divider.component.html b/libs/ui/src/lib/ui/divider/divider/divider.component.html index 986c909..1ec0b70 100644 --- a/libs/ui/src/lib/ui/divider/divider/divider.component.html +++ b/libs/ui/src/lib/ui/divider/divider/divider.component.html @@ -1,10 +1,10 @@ - - -
- - -
- {{ label() }} -
- + + +
+ + +
+ {{ label() }} +
+ diff --git a/libs/ui/src/lib/ui/divider/divider/divider.component.scss b/libs/ui/src/lib/ui/divider/divider/divider.component.scss index 1aa8777..e8d013d 100644 --- a/libs/ui/src/lib/ui/divider/divider/divider.component.scss +++ b/libs/ui/src/lib/ui/divider/divider/divider.component.scss @@ -1,250 +1,250 @@ -// Generic color mixin -@mixin dividerColor($color) { - & > hr { - border-color: var(--pi-color-#{$color}); - } - & > span { - color: var(--pi-color-#{$color}); - } -} - -// All colors mixin -@mixin dividerColors { - // Hr Color - &.pi-color__primary { - @include dividerColor(primary-200); - } - &.pi-color__accent { - @include dividerColor(accent-200); - } - &.pi-color__warn { - @include dividerColor(warn-200); - } - &.pi-color__success { - @include dividerColor(success-200); - } - &.pi-color__white { - @include dividerColor(white-rgba-06); - } - &.pi-color__black { - @include dividerColor(black); - } - &.pi-color__grey { - @include dividerColor(grey-75); - } - &.pi-color__highlighted { - @include dividerColor(highlighted-200); - } - &.pi-color__black-primary { - @include dividerColor(black); - } - &.pi-color__primary-black { - @include dividerColor(primary); - } - &.pi-color__black-accent { - @include dividerColor(black); - } - &.pi-color__accent-black { - @include dividerColor(accent-200); - } - &.pi-color__white { - @include dividerColor(white-900); - } - &.pi-color__dark-black { - @include dividerColor(grey-75); - } - &.pi-color__black-dark { - @include dividerColor(grey-900); - } - &.pi-color__grey-black { - @include dividerColor(grey-75); - } - &.pi-color__black-grey { - @include dividerColor(grey-900); - } - &.pi-color__highlighted-grey { - @include dividerColor(highlighted-200); - } - &.pi-color__grey-highlighted { - @include dividerColor(grey-100); - } -} - -// Horizontal divider -@mixin horizontalDivider { - &:not(.pi-divider__direction--vertical) { - & > hr { - border-radius: unset; - max-width: 100vw; - margin: 0; - } - - // Width - // TODO: check final widths - // x-small - &.pi-divider__width--xx-small { - & > hr { - width: var(--pi-spacing-xx-small); - } - } - - &.pi-divider__width--x-small { - & > hr { - width: var(--pi-spacing-large); - } - } - // small - &.pi-divider__width--small { - & > hr { - width: var(--pi-spacing-xxx-large); - } - } - // medium - &.pi-divider__width--medium { - & > hr { - width: 50%; - } - } - // large - &.pi-divider__width--large { - & > hr { - width: -webkit-fill-available; - } - } - // Height - // small - &.pi-divider__height--small { - & > hr { - height: 0.0625rem; - border-bottom: 0.0625rem solid; - } - } - // medium - &.pi-divider__height--medium { - & > hr { - height: var(--pi-spacing-xxxx-small); - border-bottom: 0.125rem solid; - } - } - - // large - &.pi-divider__height--large { - & > hr { - height: 0.1875rem; - border-bottom: 0.1875rem solid; - } - } - @include dividerColors; - - // Position - &.pi-divider__position--before { - .pi-icon { - transform: translateX(-0.6875rem); - } - } - - &.pi-divider__position--after { - .pi-icon { - transform: translateX(-0.25rem); - } - } - - // Aligment - // flex-start - &.pi-divider__aligment--flex-start { - align-items: flex-start; - } - // Center - &.pi-divider__aligment--center { - align-items: center; - } - // Flex-end - &.pi-divider__aligment--flex-end { - align-items: flex-end; - } - - // Has Icon - &.has-icon { - display: flex; - // Gap - // Xs - &.pi-divider__gap--xs { - gap: var(--pi-spacing-x-small); - } - // S - &.pi-divider__gap--s { - gap: var(--pi-spacing-small); - } - // M - &.pi-divider__gap--m { - gap: var(--pi-spacing-medium); - } - // L - &.pi-divider__gap--large { - gap: var(--pi-spacing-large); - } - // X - &.pi-divider__gap--xl { - gap: var(--pi-spacing-x-large); - } - - // Icon Position - // After - &.pi-divider__position--after { - flex-direction: row-reverse; - } - } - - // Has label - &.has-label { - justify-content: center; - gap: var(--pi-spacing-medium); - width: -webkit-fill-available; - & > hr { - max-width: 50%; - } - } - } -} - -// Vertical divider -@mixin verticalDivider { - &.pi-divider__direction--vertical { - & > hr { - all: unset; - border-left: 1px solid; - } - @include dividerColors; - // Height - // small - &.pi-divider__height--small { - & > hr { - height: var(--pi-spacing-small); - } - } - // medium - &.pi-divider__height--medium { - & > hr { - height: var(--pi-spacing-medium); - } - } - - // large - &.pi-divider__height--large { - & > hr { - height: var(--pi-spacing-large); - } - } - } -} - -:host { - display: flex; - - // Horizontal - @include horizontalDivider; - - // Vertical - @include verticalDivider; - // Color -} +// Generic color mixin +@mixin dividerColor($color) { + & > hr { + border-color: var(--pi-color-#{$color}); + } + & > span { + color: var(--pi-color-#{$color}); + } +} + +// All colors mixin +@mixin dividerColors { + // Hr Color + &.pi-color__primary { + @include dividerColor(primary-200); + } + &.pi-color__accent { + @include dividerColor(accent-200); + } + &.pi-color__warn { + @include dividerColor(warn-200); + } + &.pi-color__success { + @include dividerColor(success-200); + } + &.pi-color__white { + @include dividerColor(white-rgba-06); + } + &.pi-color__black { + @include dividerColor(black); + } + &.pi-color__grey { + @include dividerColor(grey-75); + } + &.pi-color__highlighted { + @include dividerColor(highlighted-200); + } + &.pi-color__black-primary { + @include dividerColor(black); + } + &.pi-color__primary-black { + @include dividerColor(primary); + } + &.pi-color__black-accent { + @include dividerColor(black); + } + &.pi-color__accent-black { + @include dividerColor(accent-200); + } + &.pi-color__white { + @include dividerColor(white-900); + } + &.pi-color__dark-black { + @include dividerColor(grey-75); + } + &.pi-color__black-dark { + @include dividerColor(grey-900); + } + &.pi-color__grey-black { + @include dividerColor(grey-75); + } + &.pi-color__black-grey { + @include dividerColor(grey-900); + } + &.pi-color__highlighted-grey { + @include dividerColor(highlighted-200); + } + &.pi-color__grey-highlighted { + @include dividerColor(grey-100); + } +} + +// Horizontal divider +@mixin horizontalDivider { + &:not(.pi-divider__direction--vertical) { + & > hr { + border-radius: unset; + max-width: 100vw; + margin: 0; + } + + // Width + // TODO: check final widths + // x-small + &.pi-divider__width--xx-small { + & > hr { + width: var(--pi-spacing-xx-small); + } + } + + &.pi-divider__width--x-small { + & > hr { + width: var(--pi-spacing-large); + } + } + // small + &.pi-divider__width--small { + & > hr { + width: var(--pi-spacing-xxx-large); + } + } + // medium + &.pi-divider__width--medium { + & > hr { + width: 50%; + } + } + // large + &.pi-divider__width--large { + & > hr { + width: -webkit-fill-available; + } + } + // Height + // small + &.pi-divider__height--small { + & > hr { + height: 0.0625rem; + border-bottom: 0.0625rem solid; + } + } + // medium + &.pi-divider__height--medium { + & > hr { + height: var(--pi-spacing-xxxx-small); + border-bottom: 0.125rem solid; + } + } + + // large + &.pi-divider__height--large { + & > hr { + height: 0.1875rem; + border-bottom: 0.1875rem solid; + } + } + @include dividerColors; + + // Position + &.pi-divider__position--before { + .pi-icon { + transform: translateX(-0.6875rem); + } + } + + &.pi-divider__position--after { + .pi-icon { + transform: translateX(-0.25rem); + } + } + + // Aligment + // flex-start + &.pi-divider__aligment--flex-start { + align-items: flex-start; + } + // Center + &.pi-divider__aligment--center { + align-items: center; + } + // Flex-end + &.pi-divider__aligment--flex-end { + align-items: flex-end; + } + + // Has Icon + &.has-icon { + display: flex; + // Gap + // Xs + &.pi-divider__gap--xs { + gap: var(--pi-spacing-x-small); + } + // S + &.pi-divider__gap--s { + gap: var(--pi-spacing-small); + } + // M + &.pi-divider__gap--m { + gap: var(--pi-spacing-medium); + } + // L + &.pi-divider__gap--large { + gap: var(--pi-spacing-large); + } + // X + &.pi-divider__gap--xl { + gap: var(--pi-spacing-x-large); + } + + // Icon Position + // After + &.pi-divider__position--after { + flex-direction: row-reverse; + } + } + + // Has label + &.has-label { + justify-content: center; + gap: var(--pi-spacing-medium); + width: -webkit-fill-available; + & > hr { + max-width: 50%; + } + } + } +} + +// Vertical divider +@mixin verticalDivider { + &.pi-divider__direction--vertical { + & > hr { + all: unset; + border-left: 1px solid; + } + @include dividerColors; + // Height + // small + &.pi-divider__height--small { + & > hr { + height: var(--pi-spacing-small); + } + } + // medium + &.pi-divider__height--medium { + & > hr { + height: var(--pi-spacing-medium); + } + } + + // large + &.pi-divider__height--large { + & > hr { + height: var(--pi-spacing-large); + } + } + } +} + +:host { + display: flex; + + // Horizontal + @include horizontalDivider; + + // Vertical + @include verticalDivider; + // Color +} diff --git a/libs/ui/src/lib/ui/divider/divider/divider.component.ts b/libs/ui/src/lib/ui/divider/divider/divider.component.ts index 270d4f5..4da2f98 100644 --- a/libs/ui/src/lib/ui/divider/divider/divider.component.ts +++ b/libs/ui/src/lib/ui/divider/divider/divider.component.ts @@ -1,63 +1,63 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; - -// Shared +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; + +// Shared import { alignment, gap, iconSize, textColor } from '../../../styles'; import { NgIf } from '@angular/common'; -import { PiIconComponent } from '../../icon/icon/icon.component'; - +import { PiIconComponent } from '../../icon/icon/icon.component'; + @Component({ selector: 'pi-divider', templateUrl: './divider.component.html', styleUrls: ['./divider.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, PiIconComponent], -}) -export class PiDividerComponent { - @HostBinding('class') get classes(): string { - const aligmentClass = `pi-divider__aligment--${this.aligment()}`; +}) +export class PiDividerComponent { + @HostBinding('class') get classes(): string { + const aligmentClass = `pi-divider__aligment--${this.aligment()}`; const color = this.color(); - const colorClass = color && `pi-color__${color}`; + const colorClass = color && `pi-color__${color}`; const gapValue = this.gap(); - const gapClass = gapValue && `pi-divider__gap--${gapValue}`; - const hasIconClass = this.icon() ? 'has-icon' : ''; - const heightClass = `pi-divider__height--${this.height()}`; + const gapClass = gapValue && `pi-divider__gap--${gapValue}`; + const hasIconClass = this.icon() ? 'has-icon' : ''; + const heightClass = `pi-divider__height--${this.height()}`; const iconSizeValue = this.iconSize(); - const iconSizeClass = !!iconSizeValue && `pi-divider__icon-size--${iconSizeValue}`; - const labelClass = this.label() ? 'has-label' : ''; + const iconSizeClass = !!iconSizeValue && `pi-divider__icon-size--${iconSizeValue}`; + const labelClass = this.label() ? 'has-label' : ''; const iconPosition = this.iconPosition(); - const positionClass = !!iconPosition && `pi-divider__position--${iconPosition}`; - const widthClass = `pi-divider__width--${this.width()}`; + const positionClass = !!iconPosition && `pi-divider__position--${iconPosition}`; + const widthClass = `pi-divider__width--${this.width()}`; const direction = this.direction(); - const directionClass = !!direction && `pi-divider__direction--${direction}`; - return [ - 'pi-divider', - aligmentClass, - colorClass, - gapClass, - hasIconClass, - heightClass, - iconSizeClass, - labelClass, - positionClass, - widthClass, - directionClass, - ].join(' '); - } - - readonly width = input<'xx-small' | 'x-small' | 'small' | 'medium' | 'large'>('large'); - readonly height = input<'small' | 'medium' | 'large'>('small'); - // Color: 1st hr 2nd icon - readonly color = input.required(); - readonly gap = input.required(); - readonly aligment = input('center'); - readonly direction = input<'horizontal' | 'vertical'>('horizontal'); - - // Divider Icon - readonly icon = input.required(); - readonly iconSize = input('x-large'); - readonly iconType = input<'fill' | 'default'>('default'); - readonly iconPosition = input<'before' | 'after'>('after'); - readonly isStroked = input(false); - - readonly label = input.required(); -} + const directionClass = !!direction && `pi-divider__direction--${direction}`; + return [ + 'pi-divider', + aligmentClass, + colorClass, + gapClass, + hasIconClass, + heightClass, + iconSizeClass, + labelClass, + positionClass, + widthClass, + directionClass, + ].join(' '); + } + + readonly width = input<'xx-small' | 'x-small' | 'small' | 'medium' | 'large'>('large'); + readonly height = input<'small' | 'medium' | 'large'>('small'); + // Color: 1st hr 2nd icon + readonly color = input.required(); + readonly gap = input.required(); + readonly aligment = input('center'); + readonly direction = input<'horizontal' | 'vertical'>('horizontal'); + + // Divider Icon + readonly icon = input.required(); + readonly iconSize = input('x-large'); + readonly iconType = input<'fill' | 'default'>('default'); + readonly iconPosition = input<'before' | 'after'>('after'); + readonly isStroked = input(false); + + readonly label = input.required(); +} diff --git a/libs/ui/src/lib/ui/divider/index.ts b/libs/ui/src/lib/ui/divider/index.ts index 7319155..4c2eb4e 100644 --- a/libs/ui/src/lib/ui/divider/index.ts +++ b/libs/ui/src/lib/ui/divider/index.ts @@ -1,3 +1,3 @@ - - -export * from './divider/divider.component'; + + +export * from './divider/divider.component'; diff --git a/libs/ui/src/lib/ui/error-status-code/index.ts b/libs/ui/src/lib/ui/error-status-code/index.ts index 28389b2..9746e6d 100644 --- a/libs/ui/src/lib/ui/error-status-code/index.ts +++ b/libs/ui/src/lib/ui/error-status-code/index.ts @@ -1,3 +1,3 @@ - - -export * from './not-found/not-found.component'; + + +export * from './not-found/not-found.component'; diff --git a/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.html b/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.html index 5b862f9..74acad5 100644 --- a/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.html +++ b/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.html @@ -1,16 +1,16 @@ - - - -

{{'404.error404' | translate}}

- - -

- {{'404.pageNotFound' | translate}}

{{'404.checkUrlAndRefresh' | translate}} -

- - - - + + + +

{{'404.error404' | translate}}

+ + +

+ {{'404.pageNotFound' | translate}}

{{'404.checkUrlAndRefresh' | translate}} +

+ + + + diff --git a/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.ts b/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.ts index 685c0e7..69adad6 100644 --- a/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.ts +++ b/libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.ts @@ -1,13 +1,13 @@ -import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core'; -import { Location } from '@angular/common'; +import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core'; +import { Location } from '@angular/common'; import { LayoutTypeClass } from '../../../styles'; import { PiMainWrapper } from '../../wrapper/main/main.wrapper'; import { PiHeadlineComponent, PiHeadlineLabelContentDirective, PiHeadlineDescriptionContentDirective } from '../../image/headline/headline.component'; import { PiTextXLargeDirective, PiTextMediumDirective } from '../../text/directives/text-sizes.directive'; import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-not-found', templateUrl: './not-found.component.html', @@ -23,13 +23,13 @@ import { TranslatePipe } from '@ngx-translate/core'; forwardRef(() => PiNotFoundComponent), TranslatePipe ], -}) -export class PiNotFoundComponent { - @HostBinding('class') className = LayoutTypeClass.VerticallyCentered; - - constructor(private location: Location) {} - - previous(): void { - this.location.back(); - } -} +}) +export class PiNotFoundComponent { + @HostBinding('class') className = LayoutTypeClass.VerticallyCentered; + + constructor(private location: Location) {} + + previous(): void { + this.location.back(); + } +} diff --git a/libs/ui/src/lib/ui/form-field/base-form-field.component.ts b/libs/ui/src/lib/ui/form-field/base-form-field.component.ts index 62cb0d8..e485306 100644 --- a/libs/ui/src/lib/ui/form-field/base-form-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/base-form-field.component.ts @@ -1,84 +1,84 @@ -import { Component, HostBinding, Injector, effect, input, output, ChangeDetectionStrategy } from '@angular/core'; -import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { ComponentFamilyClass } from '../../styles'; -import { PiFormControl } from '../../util/form-control'; - -@Component({ - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: PiBaseFormFieldComponent, - multi: true, - }, - ], -}) -export abstract class PiBaseFormFieldComponent extends PiFormControl { - @HostBinding('class') - get classes(): string { - return [ - ComponentFamilyClass.Field, - this.hasErrorClass, - this.focusedClass, - this.isDisabledClass, - ].join(' '); - } - - readonly formControlName = input.required(); - - readonly placeholder = input(); - - readonly isAutofocus = input(false); - - readonly appearance = input<'outline' | 'fill'>('outline'); - - readonly enableErrorMessage = input(true); - - readonly isControlStatusReactive = input(false); - - /** - * El estado deshabilitado tiene dos fuentes: esta entrada y el - * `setDisabledState` del ControlValueAccessor. `disabled` (heredado de - * PiFormControl) sigue siendo el estado efectivo que se debe leer. - */ - readonly isDisabled = input(false); - - readonly isActive = output(); - - constructor(injector: Injector) { - super(injector); - - effect(() => { - this.disabled = this.isDisabled(); - // Update control status reactively - if (this.isControlStatusReactive()) { - if (this.disabled) { - this.control.disable(); - } else { - this.control.enable(); - } - } - }); - } - - get control(): FormControl { - return this.controlContainer.control?.get(this.formControlName()) as FormControl; - } - - get hasError(): boolean { - return !!this.control.errors?.['message']; - } - - protected get focusedClass(): string | boolean { - return this.focused ? 'is-focused' : false; - } - - protected get hasErrorClass(): string | boolean { - return this.hasError ? 'has-error' : ''; - } - - protected get isDisabledClass(): string { - return this.disabled ? 'is-disabled' : ''; - } -} +import { Component, HostBinding, Injector, effect, input, output, ChangeDetectionStrategy } from '@angular/core'; +import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ComponentFamilyClass } from '../../styles'; +import { PiFormControl } from '../../util/form-control'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: PiBaseFormFieldComponent, + multi: true, + }, + ], +}) +export abstract class PiBaseFormFieldComponent extends PiFormControl { + @HostBinding('class') + get classes(): string { + return [ + ComponentFamilyClass.Field, + this.hasErrorClass, + this.focusedClass, + this.isDisabledClass, + ].join(' '); + } + + readonly formControlName = input.required(); + + readonly placeholder = input(); + + readonly isAutofocus = input(false); + + readonly appearance = input<'outline' | 'fill'>('outline'); + + readonly enableErrorMessage = input(true); + + readonly isControlStatusReactive = input(false); + + /** + * El estado deshabilitado tiene dos fuentes: esta entrada y el + * `setDisabledState` del ControlValueAccessor. `disabled` (heredado de + * PiFormControl) sigue siendo el estado efectivo que se debe leer. + */ + readonly isDisabled = input(false); + + readonly isActive = output(); + + constructor(injector: Injector) { + super(injector); + + effect(() => { + this.disabled = this.isDisabled(); + // Update control status reactively + if (this.isControlStatusReactive()) { + if (this.disabled) { + this.control.disable(); + } else { + this.control.enable(); + } + } + }); + } + + get control(): FormControl { + return this.controlContainer.control?.get(this.formControlName()) as FormControl; + } + + get hasError(): boolean { + return !!this.control.errors?.['message']; + } + + protected get focusedClass(): string | boolean { + return this.focused ? 'is-focused' : false; + } + + protected get hasErrorClass(): string | boolean { + return this.hasError ? 'has-error' : ''; + } + + protected get isDisabledClass(): string { + return this.disabled ? 'is-disabled' : ''; + } +} diff --git a/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.html b/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.html index 29888a5..39e7762 100644 --- a/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.html +++ b/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.html @@ -1,24 +1,24 @@ - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts b/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts index df365ba..049ec46 100644 --- a/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts @@ -1,16 +1,16 @@ -import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; - -import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency'; - +import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; + +import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency'; + import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field'; import { NgIf, NgFor } from '@angular/common'; import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-currency-field', templateUrl: './currency-field.component.html', @@ -36,18 +36,18 @@ import { TranslatePipe } from '@ngx-translate/core'; forwardRef(() => PiCurrencyFieldComponent), TranslatePipe ], -}) -export class PiCurrencyFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = `pi-form-field__currency`; - - customCurrencyMaskConfig = { - align: 'left', - allowNegative: true, - decimal: ',', - precision: 2, - prefix: '', - thousands: '.', - inputMode: NgxCurrencyInputMode.Natural, - nullable: true, - }; -} +}) +export class PiCurrencyFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = `pi-form-field__currency`; + + customCurrencyMaskConfig = { + align: 'left', + allowNegative: true, + decimal: ',', + precision: 2, + prefix: '', + thousands: '.', + inputMode: NgxCurrencyInputMode.Natural, + nullable: true, + }; +} diff --git a/libs/ui/src/lib/ui/form-field/directives/autofocus.directive.ts b/libs/ui/src/lib/ui/form-field/directives/autofocus.directive.ts index 1e8c985..c14eb0d 100644 --- a/libs/ui/src/lib/ui/form-field/directives/autofocus.directive.ts +++ b/libs/ui/src/lib/ui/form-field/directives/autofocus.directive.ts @@ -1,21 +1,21 @@ -import { Directive, OnChanges, OnInit, SimpleChanges, input } from '@angular/core'; -import { MatInput } from '@angular/material/input'; - -@Directive({ selector: '[pi-autofocus]', }) -export class PiAutofocusDirective implements OnInit, OnChanges { - readonly isAutofocusSelected = input(); - - constructor(private matInput: MatInput) {} - - ngOnInit() { - if (this.isAutofocusSelected()) { - setTimeout(() => this.matInput.focus()); - } - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes) { - if (this.isAutofocusSelected()) this.matInput.focus(); - } - } -} +import { Directive, OnChanges, OnInit, SimpleChanges, input } from '@angular/core'; +import { MatInput } from '@angular/material/input'; + +@Directive({ selector: '[pi-autofocus]', }) +export class PiAutofocusDirective implements OnInit, OnChanges { + readonly isAutofocusSelected = input(); + + constructor(private matInput: MatInput) {} + + ngOnInit() { + if (this.isAutofocusSelected()) { + setTimeout(() => this.matInput.focus()); + } + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes) { + if (this.isAutofocusSelected()) this.matInput.focus(); + } + } +} diff --git a/libs/ui/src/lib/ui/form-field/directives/checkbox-grid.directive.ts b/libs/ui/src/lib/ui/form-field/directives/checkbox-grid.directive.ts index e735a63..11e7c23 100644 --- a/libs/ui/src/lib/ui/form-field/directives/checkbox-grid.directive.ts +++ b/libs/ui/src/lib/ui/form-field/directives/checkbox-grid.directive.ts @@ -1,16 +1,16 @@ -import { Directive, HostBinding, input } from '@angular/core'; - -@Directive({ selector: '[pi-checkbox-grid]', }) -export class PiCheckboxGridDirective { - @HostBinding('class') get classes(): string { +import { Directive, HostBinding, input } from '@angular/core'; + +@Directive({ selector: '[pi-checkbox-grid]', }) +export class PiCheckboxGridDirective { + @HostBinding('class') get classes(): string { const columns = this.columns(); - const columnClass = - columns && `pi-checkbox-grid__column pi-checkbox-grid__column--${columns}`; + const columnClass = + columns && `pi-checkbox-grid__column pi-checkbox-grid__column--${columns}`; const fill = this.fill(); - const fillClass = fill && `pi-checkbox-grid__fill pi-checkbox-grid__fill--${fill}`; - return ['pi-checkbox-grid', columnClass, fillClass].join(' '); - } - - readonly columns = input<'1' | '2' | '3' | '4'>('2'); - readonly fill = input<'fit-content' | 'fill-available'>('fit-content'); -} + const fillClass = fill && `pi-checkbox-grid__fill pi-checkbox-grid__fill--${fill}`; + return ['pi-checkbox-grid', columnClass, fillClass].join(' '); + } + + readonly columns = input<'1' | '2' | '3' | '4'>('2'); + readonly fill = input<'fit-content' | 'fill-available'>('fit-content'); +} diff --git a/libs/ui/src/lib/ui/form-field/directives/label.directive.ts b/libs/ui/src/lib/ui/form-field/directives/label.directive.ts index cd5e748..05c27c2 100644 --- a/libs/ui/src/lib/ui/form-field/directives/label.directive.ts +++ b/libs/ui/src/lib/ui/form-field/directives/label.directive.ts @@ -1,24 +1,24 @@ -import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core'; - -@Directive({ selector: 'pi-label', }) -export class PiLabelDirective implements OnInit { - @HostBinding('class') get classes(): string { - const validationClass = this.isRequired() ? 'is-required' : ''; - return ['pi-label', validationClass].join(' '); - } - @HostBinding('class') className = 'pi-label'; - - readonly isRequired = input(false); - - constructor(private renderer: Renderer2, private el: ElementRef) {} - - ngOnInit() { - if (this.isRequired()) { - const span = this.renderer.createElement('span'); - const text = this.renderer.createText('*'); - - this.renderer.appendChild(span, text); - this.renderer.appendChild(this.el.nativeElement, span); - } - } -} +import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core'; + +@Directive({ selector: 'pi-label', }) +export class PiLabelDirective implements OnInit { + @HostBinding('class') get classes(): string { + const validationClass = this.isRequired() ? 'is-required' : ''; + return ['pi-label', validationClass].join(' '); + } + @HostBinding('class') className = 'pi-label'; + + readonly isRequired = input(false); + + constructor(private renderer: Renderer2, private el: ElementRef) {} + + ngOnInit() { + if (this.isRequired()) { + const span = this.renderer.createElement('span'); + const text = this.renderer.createText('*'); + + this.renderer.appendChild(span, text); + this.renderer.appendChild(this.el.nativeElement, span); + } + } +} diff --git a/libs/ui/src/lib/ui/form-field/directives/radio-grid.directive.ts b/libs/ui/src/lib/ui/form-field/directives/radio-grid.directive.ts index 9796a13..8abb198 100644 --- a/libs/ui/src/lib/ui/form-field/directives/radio-grid.directive.ts +++ b/libs/ui/src/lib/ui/form-field/directives/radio-grid.directive.ts @@ -1,20 +1,20 @@ -import { Directive, HostBinding, input } from '@angular/core'; -import { justify } from '../../../styles'; - -// Flex -@Directive({ selector: '[pi-radio-grid]', }) -export class PiRadioGridDirective { - @HostBinding('class') get classes(): string { +import { Directive, HostBinding, input } from '@angular/core'; +import { justify } from '../../../styles'; + +// Flex +@Directive({ selector: '[pi-radio-grid]', }) +export class PiRadioGridDirective { + @HostBinding('class') get classes(): string { const type = this.type(); - const typeClass = type && `pi-radio-grid__type--${type}`; + const typeClass = type && `pi-radio-grid__type--${type}`; const justifyValue = this.justify(); - const justifyClass = justifyValue && `pi-radio-grid__justify--${justifyValue}`; + const justifyClass = justifyValue && `pi-radio-grid__justify--${justifyValue}`; const columns = this.columns(); - const columnsClass = columns && `pi-radio-grid__columns--${columns}`; - return ['pi-radio-grid', typeClass, justifyClass, columnsClass].join(' '); - } - - readonly type = input<'grid' | 'flex'>('flex'); - readonly justify = input('flex-start'); - readonly columns = input<1 | 2 | 3 | 4>(1); -} + const columnsClass = columns && `pi-radio-grid__columns--${columns}`; + return ['pi-radio-grid', typeClass, justifyClass, columnsClass].join(' '); + } + + readonly type = input<'grid' | 'flex'>('flex'); + readonly justify = input('flex-start'); + readonly columns = input<1 | 2 | 3 | 4>(1); +} diff --git a/libs/ui/src/lib/ui/form-field/email-field/email-field.component.html b/libs/ui/src/lib/ui/form-field/email-field/email-field.component.html index 7ecd1ab..36fb47a 100644 --- a/libs/ui/src/lib/ui/form-field/email-field/email-field.component.html +++ b/libs/ui/src/lib/ui/form-field/email-field/email-field.component.html @@ -1,23 +1,23 @@ - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts b/libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts index 32d12d8..0040e3b 100644 --- a/libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field'; import { PiIconComponent } from '../../icon/icon/icon.component'; @@ -7,8 +7,8 @@ import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-email-field', templateUrl: './email-field.component.html', @@ -34,7 +34,7 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -export class PiEmailFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = `pi-form-field__email`; -} +}) +export class PiEmailFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = `pi-form-field__email`; +} diff --git a/libs/ui/src/lib/ui/form-field/entities/radio.model.ts b/libs/ui/src/lib/ui/form-field/entities/radio.model.ts index dab50ae..92a5403 100644 --- a/libs/ui/src/lib/ui/form-field/entities/radio.model.ts +++ b/libs/ui/src/lib/ui/form-field/entities/radio.model.ts @@ -1,7 +1,7 @@ -export interface RadioOption { - id: number; - title: string; - value: string; - disabled?: boolean; - subtitle?: string; -} +export interface RadioOption { + id: number; + title: string; + value: string; + disabled?: boolean; + subtitle?: string; +} diff --git a/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.html b/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.html index f70b9f4..640cab9 100644 --- a/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.html +++ b/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.html @@ -1,24 +1,24 @@ -
- - - - - -
- - - {{ text | translate }} - - +
+ + + + + +
+ + + {{ text | translate }} + + diff --git a/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.scss b/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.scss index 48c9b3c..7c287f1 100644 --- a/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.scss +++ b/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.scss @@ -1,16 +1,16 @@ -:host { - display: flex; - flex-direction: column; - & > section { - display: flex; - align-items: center; - gap: var(--pi-spacing-medium); - width: 100%; - .pi-icon { - margin-top: var(--pi-spacing-small); - } - } - .mat-mdc-form-field-error { - margin-left: 3.8rem; - } -} +:host { + display: flex; + flex-direction: column; + & > section { + display: flex; + align-items: center; + gap: var(--pi-spacing-medium); + width: 100%; + .pi-icon { + margin-top: var(--pi-spacing-small); + } + } + .mat-mdc-form-field-error { + margin-left: 3.8rem; + } +} diff --git a/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts b/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts index 13aef2c..a4b02d8 100644 --- a/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts @@ -1,14 +1,14 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { iconSize } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { iconSize } from '../../../styles'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { PiIconComponent } from '../../icon/icon/icon.component'; import { MatFormField, MatLabel, MatError } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-icon-field', templateUrl: './icon-field.component.html', @@ -33,12 +33,12 @@ import { TranslatePipe } from '@ngx-translate/core'; NgFor, TranslatePipe, ], -}) -export class PiIconFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') get componentClasses(): string { - return ['pi-form-field__text-icon'].join(' '); - } - - readonly icon = input(); - readonly iconSize = input('x-large'); -} +}) +export class PiIconFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') get componentClasses(): string { + return ['pi-form-field__text-icon'].join(' '); + } + + readonly icon = input(); + readonly iconSize = input('x-large'); +} diff --git a/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.html b/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.html index 66bccd8..9516373 100644 --- a/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.html +++ b/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.html @@ -1,42 +1,42 @@ - - - - - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts b/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts index 81758da..6cd3ee9 100644 --- a/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts @@ -1,6 +1,6 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Injectable, input } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { unit } from '../../../util/models'; +import { ChangeDetectionStrategy, Component, HostBinding, Injectable, input } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { unit } from '../../../util/models'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatError } from '@angular/material/form-field'; import { PiPrefixDirective, PiSuffixDirective } from '../../../util/affix/affix.directive'; @@ -9,8 +9,8 @@ import { PiIconComponent } from '../../icon/icon/icon.component'; import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-incremental-number-field', templateUrl: './incremental-number-field.component.html', @@ -39,54 +39,54 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -@Injectable() -export class PiIncrementalNumberFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = 'pi-form-field__incremental'; - - readonly slot = input(1); - - readonly max = input(); - - readonly min = input(0); - - readonly unit = input(''); - - readonly showIncrementButtons = input(true); - - incrementValue(): void { - if (this.disabled) return - let currentValue = Number(this.control.value); - // Handle decimal numbers +}) +@Injectable() +export class PiIncrementalNumberFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = 'pi-form-field__incremental'; + + readonly slot = input(1); + + readonly max = input(); + + readonly min = input(0); + + readonly unit = input(''); + + readonly showIncrementButtons = input(true); + + incrementValue(): void { + if (this.disabled) return + let currentValue = Number(this.control.value); + // Handle decimal numbers const slot = this.slot(); - if (Number.isInteger(slot)) { - this.control.setValue(currentValue + slot); - } else { - this.control.setValue((currentValue + slot).toFixed(2)); - } - } - - decrementValue(): void { - if (this.disabled) return - let currentValue = Number(this.control.value); - // Handle decimal numbers + if (Number.isInteger(slot)) { + this.control.setValue(currentValue + slot); + } else { + this.control.setValue((currentValue + slot).toFixed(2)); + } + } + + decrementValue(): void { + if (this.disabled) return + let currentValue = Number(this.control.value); + // Handle decimal numbers const slot = this.slot(); - if (Number.isInteger(slot)) { - this.control.setValue(currentValue - slot); - } else { - this.control.setValue((currentValue - slot).toFixed(2)); - } - } - - isIncrementButtonDisabled(): boolean { - return this.disabled || this.control.value + this.slot() > this.max(); - } - - isDecrementButtonDisabled(): boolean { + if (Number.isInteger(slot)) { + this.control.setValue(currentValue - slot); + } else { + this.control.setValue((currentValue - slot).toFixed(2)); + } + } + + isIncrementButtonDisabled(): boolean { + return this.disabled || this.control.value + this.slot() > (this.max() ?? Infinity); + } + + isDecrementButtonDisabled(): boolean { const min = this.min(); - if (min || min === 0) { - return this.disabled || this.control.value - this.slot() < min; - } - return this.disabled; - } -} + if (min || min === 0) { + return this.disabled || this.control.value - this.slot() < min; + } + return this.disabled; + } +} diff --git a/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.html b/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.html index 15a050d..3be4255 100644 --- a/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.html +++ b/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.html @@ -1,38 +1,38 @@ -
-
- - {{ 'common.min' | translate }} - - - -
- - - -
- - {{ 'common.max' | translate }} - - - -
- - - {{ text | translate }} - - -
+
+
+ + {{ 'common.min' | translate }} + + + +
+ + + +
+ + {{ 'common.max' | translate }} + + + +
+ + + {{ text | translate }} + + +
diff --git a/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts b/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts index 5e3ef9b..446522a 100644 --- a/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { FormGroup, FormGroupDirective, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { FormGroup, FormGroupDirective, ReactiveFormsModule } from '@angular/forms'; import { unit } from '../../../util/models'; import { PiLabelDirective } from '../directives/label.directive'; import { PiIncrementalNumberFieldComponent } from '../incremental-number-field/incremental-number-field.component'; @@ -7,8 +7,8 @@ import { PiDividerComponent } from '../../divider/divider/divider.component'; import { NgIf, NgFor } from '@angular/common'; import { MatError } from '@angular/material/form-field'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-incremental-range-field', templateUrl: './incremental-range-field.component.html', @@ -24,23 +24,23 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -export class PiIncrementalRangeFieldComponent { - @HostBinding('class') className = - 'pi-field pi-form-field__incremental pi-form-field__incremental--range'; - - readonly formGroupName = input.required(); - readonly minValue = input.required(); - readonly maxValue = input.required(); - readonly unit = input.required(); - readonly step = input.required(); - readonly showError = input(false); - readonly showIncrementButtons = input(true); - readonly placeholder = input(); - - constructor(private rootFormGroup: FormGroupDirective) {} - - get form() { - return this.rootFormGroup.control.get(this.formGroupName()) as FormGroup; - } -} +}) +export class PiIncrementalRangeFieldComponent { + @HostBinding('class') className = + 'pi-field pi-form-field__incremental pi-form-field__incremental--range'; + + readonly formGroupName = input.required(); + readonly minValue = input.required(); + readonly maxValue = input.required(); + readonly unit = input.required(); + readonly step = input.required(); + readonly showError = input(false); + readonly showIncrementButtons = input(true); + readonly placeholder = input(); + + constructor(private rootFormGroup: FormGroupDirective) {} + + get form() { + return this.rootFormGroup.control.get(this.formGroupName()) as FormGroup; + } +} diff --git a/libs/ui/src/lib/ui/form-field/index.ts b/libs/ui/src/lib/ui/form-field/index.ts index 88a13b5..4d409f4 100644 --- a/libs/ui/src/lib/ui/form-field/index.ts +++ b/libs/ui/src/lib/ui/form-field/index.ts @@ -1,26 +1,26 @@ -export * from './directives/label.directive'; -export * from './directives/radio-grid.directive'; -export * from './directives/checkbox-grid.directive'; -export * from './directives/autofocus.directive'; - -export * from './entities/radio.model'; - -export * from './incremental-number-field/incremental-number-field.component'; -export * from './number-field/number-field.component'; -export * from './text-field/text-field.component'; -export * from './textarea/textarea.component'; -export * from './currency-field/currency-field.component'; -export * from './search-field/search-field.component'; -export * from './email-field/email-field.component'; -export * from './password-field/password-field.component'; -export * from './icon-field/icon-field.component'; - - - -export * from './phone-field/phone-field.component'; - -export * from './base-form-field.component'; - -export * from './incremental-range-field/incremental-range-field.component'; - -export * from './slide-toggle/slide-toggle.component'; +export * from './directives/label.directive'; +export * from './directives/radio-grid.directive'; +export * from './directives/checkbox-grid.directive'; +export * from './directives/autofocus.directive'; + +export * from './entities/radio.model'; + +export * from './incremental-number-field/incremental-number-field.component'; +export * from './number-field/number-field.component'; +export * from './text-field/text-field.component'; +export * from './textarea/textarea.component'; +export * from './currency-field/currency-field.component'; +export * from './search-field/search-field.component'; +export * from './email-field/email-field.component'; +export * from './password-field/password-field.component'; +export * from './icon-field/icon-field.component'; + + + +export * from './phone-field/phone-field.component'; + +export * from './base-form-field.component'; + +export * from './incremental-range-field/incremental-range-field.component'; + +export * from './slide-toggle/slide-toggle.component'; diff --git a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html index 0c24415..ba6f02f 100644 --- a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html +++ b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.html @@ -1,26 +1,26 @@ - - - - - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts index da24095..05cefdc 100644 --- a/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts @@ -1,13 +1,13 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Injectable } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding, Injectable } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatError } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-number-field', templateUrl: './number-field.component.html', @@ -33,9 +33,9 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) - -@Injectable() -export class PiNumberFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = `pi-form-field__number`; -} +}) + +@Injectable() +export class PiNumberFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = `pi-form-field__number`; +} diff --git a/libs/ui/src/lib/ui/form-field/password-field/password-field.component.html b/libs/ui/src/lib/ui/form-field/password-field/password-field.component.html index 8caf208..ace06e2 100644 --- a/libs/ui/src/lib/ui/form-field/password-field/password-field.component.html +++ b/libs/ui/src/lib/ui/form-field/password-field/password-field.component.html @@ -1,30 +1,30 @@ - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts b/libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts index d437985..00bed9a 100644 --- a/libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field'; import { PiSuffixDirective } from '../../../util/affix/affix.directive'; @@ -8,8 +8,8 @@ import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-password-field', templateUrl: './password-field.component.html', @@ -36,9 +36,9 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -export class PiPasswordFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = `pi-form-field__password`; - - hide = true; -} +}) +export class PiPasswordFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = `pi-form-field__password`; + + hide = true; +} diff --git a/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.html b/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.html index be6ee6a..4096031 100644 --- a/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.html +++ b/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.html @@ -1,22 +1,22 @@ - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts b/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts index 3518098..d60e591 100644 --- a/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field'; import { PiIconComponent } from '../../icon/icon/icon.component'; @@ -7,8 +7,8 @@ import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-phone-field', templateUrl: './phone-field.component.html', @@ -34,7 +34,7 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -export class PiPhoneFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = `pi-form-field__phone`; -} +}) +export class PiPhoneFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = `pi-form-field__phone`; +} diff --git a/libs/ui/src/lib/ui/form-field/search-field/search-field.component.html b/libs/ui/src/lib/ui/form-field/search-field/search-field.component.html index ce64434..45a9fc9 100644 --- a/libs/ui/src/lib/ui/form-field/search-field/search-field.component.html +++ b/libs/ui/src/lib/ui/form-field/search-field/search-field.component.html @@ -1,24 +1,24 @@ -
- - -
- +
+ + +
+ diff --git a/libs/ui/src/lib/ui/form-field/search-field/search-field.component.scss b/libs/ui/src/lib/ui/form-field/search-field/search-field.component.scss index a5a708f..373cb2d 100644 --- a/libs/ui/src/lib/ui/form-field/search-field/search-field.component.scss +++ b/libs/ui/src/lib/ui/form-field/search-field/search-field.component.scss @@ -1,98 +1,98 @@ -:host { - display: flex; - gap: var(--pi-spacing-small); - justify-content: center; - height: var(--pi-height-button-large); - background-color: var(--pi-color-white); - border-radius: var(--pi-border-radius-large); - - fieldset { - display: flex; - input { - all: unset; - caret-color: var(--pi-color-primary-100); - font: { - size: 0.8125rem; - weight: 400; - } - &::placeholder { - color: var(--pi-color-grey-200); - -webkit-text-fill-color: var(--pi-color-grey-200); - } - } - } - - &.is-collapsed { - width: var(--pi-height-button-large); - - cursor: pointer; - fieldset { - input { - width: 0; - opacity: 0; - } - .pi-icon { - height: var(--pi-height-button-large); - } - } - - & > .pi-icon { - display: none; - } - - &:hover { - border: 1px solid var(--pi-color-primary-100); - fieldset { - .pi-icon { - transition: var(--pi-animation); - width: var(--pi-height-button-large); - } - } - } - &:not(:hover) { - fieldset { - .pi-icon { - transition: var(--pi-animation); - width: 100%; - } - } - } - } - &.is-expanded { - justify-content: space-between; - padding-left: var(--pi-spacing-medium); - padding-right: var(--pi-spacing-medium); - fieldset { - gap: var(--pi-spacing-small); - input { - width: 100%; - opacity: 1; - min-width: 13.125rem; - } - } - &.is-focused { - border: 1px solid var(--pi-color-primary-100); - } - &:not(.is-focused) { - border: 1px solid var(--pi-color-white-900); - } - } -} - -html { - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - :host { - fieldset { - input { - font: { - size: 0.8125rem; - } - } - } - } - } - } -} +:host { + display: flex; + gap: var(--pi-spacing-small); + justify-content: center; + height: var(--pi-height-button-large); + background-color: var(--pi-color-white); + border-radius: var(--pi-border-radius-large); + + fieldset { + display: flex; + input { + all: unset; + caret-color: var(--pi-color-primary-100); + font: { + size: 0.8125rem; + weight: 400; + } + &::placeholder { + color: var(--pi-color-grey-200); + -webkit-text-fill-color: var(--pi-color-grey-200); + } + } + } + + &.is-collapsed { + width: var(--pi-height-button-large); + + cursor: pointer; + fieldset { + input { + width: 0; + opacity: 0; + } + .pi-icon { + height: var(--pi-height-button-large); + } + } + + & > .pi-icon { + display: none; + } + + &:hover { + border: 1px solid var(--pi-color-primary-100); + fieldset { + .pi-icon { + transition: var(--pi-animation); + width: var(--pi-height-button-large); + } + } + } + &:not(:hover) { + fieldset { + .pi-icon { + transition: var(--pi-animation); + width: 100%; + } + } + } + } + &.is-expanded { + justify-content: space-between; + padding-left: var(--pi-spacing-medium); + padding-right: var(--pi-spacing-medium); + fieldset { + gap: var(--pi-spacing-small); + input { + width: 100%; + opacity: 1; + min-width: 13.125rem; + } + } + &.is-focused { + border: 1px solid var(--pi-color-primary-100); + } + &:not(.is-focused) { + border: 1px solid var(--pi-color-white-900); + } + } +} + +html { + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + :host { + fieldset { + input { + font: { + size: 0.8125rem; + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts b/libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts index 873e982..caf00de 100644 --- a/libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts @@ -1,86 +1,86 @@ -import { - ChangeDetectionStrategy, - Component, - ElementRef, - HostBinding, - Injector, - effect, - input, - model, - output, - viewChild -} from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { OnInit } from '@angular/core'; -import { PiBaseFormFieldComponent } from '../base-form-field.component'; -import { PiIconComponent } from '../../icon/icon/icon.component'; -import { NgIf } from '@angular/common'; - -@Component({ - selector: 'pi-search-field', - templateUrl: './search-field.component.html', - styleUrls: ['./search-field.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: PiSearchFieldComponent, - multi: true, - }, - ], - imports: [ - PiIconComponent, - ReactiveFormsModule, - NgIf, - ], -}) -export class PiSearchFieldComponent extends PiBaseFormFieldComponent implements OnInit { - @HostBinding('class') override get classes(): string { - const isExpandedClass = this.isExpanded() ? 'is-expanded' : 'is-collapsed'; - return ['pi-field pi-form-field__search', isExpandedClass].join(' '); - } - - readonly searchClick = output(); - - readonly resetClick = output(); - - readonly inputRef = viewChild.required('input', { read: ElementRef }); - - readonly isClosable = input(true); - - /** - * `model` porque además de recibirse desde fuera, el propio componente la - * escribe (openField / closeField / valueChanges). - */ - readonly isExpanded = model(false); - - constructor(injector: Injector) { - super(injector); - // Antes lo emitía el setter en cada asignación. - effect(() => this.isActive.emit(this.isExpanded())); - } - - ngOnInit(): void { - this.isExpanded.set(!!this.control.value || !this.isClosable()); - this.control.valueChanges.subscribe((value: any) => { - if (value) { - this.isExpanded.set(true); - } - }); - } - - openField(): void { - this.isExpanded.set(true); - this.inputRef().nativeElement.focus(); - } - - closeField(): void { - if (this.isClosable()) { - this.isExpanded.set(false); - } - if (this.control.value) { - this.control.reset(); - this.resetClick.emit(); - } - } -} +import { + ChangeDetectionStrategy, + Component, + ElementRef, + HostBinding, + Injector, + effect, + input, + model, + output, + viewChild +} from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { OnInit } from '@angular/core'; +import { PiBaseFormFieldComponent } from '../base-form-field.component'; +import { PiIconComponent } from '../../icon/icon/icon.component'; +import { NgIf } from '@angular/common'; + +@Component({ + selector: 'pi-search-field', + templateUrl: './search-field.component.html', + styleUrls: ['./search-field.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: PiSearchFieldComponent, + multi: true, + }, + ], + imports: [ + PiIconComponent, + ReactiveFormsModule, + NgIf, + ], +}) +export class PiSearchFieldComponent extends PiBaseFormFieldComponent implements OnInit { + @HostBinding('class') override get classes(): string { + const isExpandedClass = this.isExpanded() ? 'is-expanded' : 'is-collapsed'; + return ['pi-field pi-form-field__search', isExpandedClass].join(' '); + } + + readonly searchClick = output(); + + readonly resetClick = output(); + + readonly inputRef = viewChild.required('input', { read: ElementRef }); + + readonly isClosable = input(true); + + /** + * `model` porque además de recibirse desde fuera, el propio componente la + * escribe (openField / closeField / valueChanges). + */ + readonly isExpanded = model(false); + + constructor(injector: Injector) { + super(injector); + // Antes lo emitía el setter en cada asignación. + effect(() => this.isActive.emit(this.isExpanded())); + } + + ngOnInit(): void { + this.isExpanded.set(!!this.control.value || !this.isClosable()); + this.control.valueChanges.subscribe((value: any) => { + if (value) { + this.isExpanded.set(true); + } + }); + } + + openField(): void { + this.isExpanded.set(true); + this.inputRef().nativeElement.focus(); + } + + closeField(): void { + if (this.isClosable()) { + this.isExpanded.set(false); + } + if (this.control.value) { + this.control.reset(); + this.resetClick.emit(); + } + } +} diff --git a/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.html b/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.html index 20e0fde..7509a20 100644 --- a/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.html +++ b/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.html @@ -1,4 +1,4 @@ - + diff --git a/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.scss b/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.scss index 40e5399..632b58f 100644 --- a/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.scss +++ b/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.scss @@ -1,66 +1,66 @@ -:host { - & > label { - display: inline-block; - position: relative; - height: 1.375rem; - width: 2.25rem; - & > input { - display: none; - } - & > span { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 1px solid var(--pi-color-primary); - border-radius: 1.25rem; - transition: 0.22s; - &::before { - content: ''; - position: absolute; - left: var(--pi-spacing-xxxx-small); - bottom: var(--pi-spacing-xxxx-small); - height: var(--pi-spacing-medium); - width: var(--pi-spacing-medium); - border-radius: 50%; - transition: 0.22s; - } - } - } - - // Is checked - &.is-checked { - & > label { - & > span { - background-color: var(--pi-color-primary); - &::before { - background-color: var(--pi-color-white); - transform: translateX(calc(1.125rem - 0.25rem)); - } - } - } - } - // NOT Is checked - &:not(.is-checked) { - & > label { - & > span { - &::before { - background-color: var(--pi-color-primary); - } - } - } - } - - &.is-disabled { - opacity: 0.3; - } - - &:not(.is-disabled) { - & > label { - & > span { - cursor: pointer; - } - } - } -} +:host { + & > label { + display: inline-block; + position: relative; + height: 1.375rem; + width: 2.25rem; + & > input { + display: none; + } + & > span { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 1px solid var(--pi-color-primary); + border-radius: 1.25rem; + transition: 0.22s; + &::before { + content: ''; + position: absolute; + left: var(--pi-spacing-xxxx-small); + bottom: var(--pi-spacing-xxxx-small); + height: var(--pi-spacing-medium); + width: var(--pi-spacing-medium); + border-radius: 50%; + transition: 0.22s; + } + } + } + + // Is checked + &.is-checked { + & > label { + & > span { + background-color: var(--pi-color-primary); + &::before { + background-color: var(--pi-color-white); + transform: translateX(calc(1.125rem - 0.25rem)); + } + } + } + } + // NOT Is checked + &:not(.is-checked) { + & > label { + & > span { + &::before { + background-color: var(--pi-color-primary); + } + } + } + } + + &.is-disabled { + opacity: 0.3; + } + + &:not(.is-disabled) { + & > label { + & > span { + cursor: pointer; + } + } + } +} diff --git a/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.ts b/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.ts index 65480a4..c11e26e 100644 --- a/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.ts +++ b/libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.ts @@ -1,7 +1,7 @@ -import { ChangeDetectionStrategy, Component, HostBinding, OnChanges, OnInit, SimpleChanges, input } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { PiBaseFormFieldComponent } from '../base-form-field.component'; - +import { ChangeDetectionStrategy, Component, HostBinding, OnChanges, OnInit, SimpleChanges, input } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { PiBaseFormFieldComponent } from '../base-form-field.component'; + @Component({ selector: 'pi-slide-toggle', templateUrl: './slide-toggle.component.html', @@ -15,20 +15,20 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component'; }, ], imports: [ReactiveFormsModule], -}) -export class PiSlideToggleComponent extends PiBaseFormFieldComponent implements OnInit { - @HostBinding('class') override get classes(): string { - const isCheckedClass = this.isChecked ? 'is-checked' : ''; - return ['pi-slide-toggle', isCheckedClass, this.isDisabledClass].join(' '); - } - - readonly label = input(); - - isChecked!: boolean; - - ngOnInit(): void { - this.control.valueChanges.subscribe((value: boolean) => { - this.isChecked = value; - }); - } -} +}) +export class PiSlideToggleComponent extends PiBaseFormFieldComponent implements OnInit { + @HostBinding('class') override get classes(): string { + const isCheckedClass = this.isChecked ? 'is-checked' : ''; + return ['pi-slide-toggle', isCheckedClass, this.isDisabledClass].join(' '); + } + + readonly label = input(); + + isChecked!: boolean; + + ngOnInit(): void { + this.control.valueChanges.subscribe((value: boolean) => { + this.isChecked = value; + }); + } +} diff --git a/libs/ui/src/lib/ui/form-field/text-field/text-field.component.html b/libs/ui/src/lib/ui/form-field/text-field/text-field.component.html index 799c80d..4d25e3f 100644 --- a/libs/ui/src/lib/ui/form-field/text-field/text-field.component.html +++ b/libs/ui/src/lib/ui/form-field/text-field/text-field.component.html @@ -1,21 +1,21 @@ - - - - - - - - - - - - {{ text | translate }} - - - + + + + + + + + + + + + {{ text | translate }} + + + diff --git a/libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts b/libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts index cd8325b..3092fd8 100644 --- a/libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts +++ b/libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts @@ -1,13 +1,13 @@ -import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-text-field', templateUrl: './text-field.component.html', @@ -32,7 +32,7 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -export class PiTextFieldComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = `pi-form-field__text`; -} +}) +export class PiTextFieldComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = `pi-form-field__text`; +} diff --git a/libs/ui/src/lib/ui/form-field/textarea/textarea.component.html b/libs/ui/src/lib/ui/form-field/textarea/textarea.component.html index 8029e13..4f6b57a 100644 --- a/libs/ui/src/lib/ui/form-field/textarea/textarea.component.html +++ b/libs/ui/src/lib/ui/form-field/textarea/textarea.component.html @@ -1,23 +1,23 @@ - - - - - - - - {{ text | translate }} - - -{{ control.value?.length || 0 }} / {{ maxLength() }} + + + + + + + + {{ text | translate }} + + +{{ control.value?.length || 0 }} / {{ maxLength() }} diff --git a/libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts b/libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts index b57cbfe..ae3b7ac 100644 --- a/libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts +++ b/libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; import { PiBaseFormFieldComponent } from '../base-form-field.component'; import { MatFormField, MatLabel, MatError } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; @@ -7,8 +7,8 @@ import { CdkTextareaAutosize } from '@angular/cdk/text-field'; import { PiAutofocusDirective } from '../directives/autofocus.directive'; import { NgIf, NgFor } from '@angular/common'; import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-textarea', templateUrl: './textarea.component.html', @@ -33,9 +33,9 @@ import { TranslatePipe } from '@ngx-translate/core'; PiCurrencyFieldComponent, TranslatePipe, ], -}) -export class PiTextareaComponent extends PiBaseFormFieldComponent { - @HostBinding('class') className = 'pi-form-field__textarea'; - - readonly maxLength = input(1e6); -} +}) +export class PiTextareaComponent extends PiBaseFormFieldComponent { + @HostBinding('class') className = 'pi-form-field__textarea'; + + readonly maxLength = input(1e6); +} diff --git a/libs/ui/src/lib/ui/icon/icon/icon.component.html b/libs/ui/src/lib/ui/icon/icon/icon.component.html index f78690f..848baaf 100644 --- a/libs/ui/src/lib/ui/icon/icon/icon.component.html +++ b/libs/ui/src/lib/ui/icon/icon/icon.component.html @@ -1,5 +1,5 @@ - - - + + + diff --git a/libs/ui/src/lib/ui/icon/icon/icon.component.scss b/libs/ui/src/lib/ui/icon/icon/icon.component.scss index c87edb7..81af59b 100644 --- a/libs/ui/src/lib/ui/icon/icon/icon.component.scss +++ b/libs/ui/src/lib/ui/icon/icon/icon.component.scss @@ -1,245 +1,245 @@ -@mixin fillIconSize($fill-area-size, $icon-size, $padding) { - height: $fill-area-size; - min-width: $fill-area-size; - width: $fill-area-size; - padding: $padding; - img, - .mat-icon { - width: $icon-size; - } -} - -@mixin defaultIconSize($size) { - img, - .mat-icon { - height: $size; - width: $size; - } -} - -@mixin fillIconColor($background-color, $color, $border-color) { - background-color: $background-color; - .mat-icon { - color: $color; - } - &.is-stroked { - border-color: $border-color; - } -} - -@mixin defaultIconColor { - .mat-icon { - color: var(--pi-color-primary); - } -} - -:host { - display: flex; - justify-content: center; - align-items: center; - - .mat-icon { - display: flex; - } - - // Sizes - // X-Small - &:not(.pi-icon__appearance--fill) { - &.pi-icon__x-small { - @include defaultIconSize(var(--pi-spacing-medium)); - } - // Small - &.pi-icon__small { - @include defaultIconSize(1.125rem); - } - // Medium - &.pi-icon__medium { - @include defaultIconSize(var(--pi-spacing-large)); - } - // Large - &.pi-icon__large { - @include defaultIconSize(1.75rem); - } - // X-Large - &.pi-icon__x-large { - @include defaultIconSize(var(--pi-spacing-xx-large)); - } - } - - &.pi-icon__appearance--fill { - display: flex; - align-items: center; - justify-content: center; - - // Sizes type fill - - // Small - // X Small - // Medium - &.pi-icon__x-small { - @include fillIconSize(var(--pi-spacing-medium), var(--pi-spacing-small), 0); - } - &.pi-icon__small { - @include fillIconSize( - var(--pi-spacing-x-large), - var(--pi-spacing-medium), - var(--pi-spacing-xxxx-small) - ); - } - - // Large & X Large - - &.pi-icon__medium { - @include fillIconSize( - var(--pi-spacing-xx-large), - var(--pi-spacing-x-large), - var(--pi-spacing-xxx-small) - ); - } - &.pi-icon__large { - @include fillIconSize( - var(--pi-spacing-xxx-large), - var(--pi-spacing-x-large), - var(--pi-spacing-xx-small) - ); - } - - &.pi-icon__x-large { - @include fillIconSize( - var(--pi-spacing-xxxx-large), - var(--pi-spacing-x-large), - var(--pi-spacing-xxx-small) - ); - } - - &:not(.is-stroked) { - padding: 0.4375rem; - } - // Small - &.pi-icon__border-radius--small { - border-radius: 0.75rem; - } - // Medium - &.pi-icon__border-radius--medium { - border-radius: var(--pi-border-radius-medium); - } - // Large & - // Stroke default - &.pi-icon__border-radius--large, - &:not(.pi-icon__border-radius--small):not(.pi-icon__border-radius--medium) { - border-radius: 1rem; - } - &.is-stroked { - border: 1px solid; - } - &.pi-color__primary { - @include fillIconColor( - var(--pi-color-primary-25), - var(--pi-color-primary), - var(--pi-color-primary-75) - ); - } - &.pi-color__accent { - @include fillIconColor( - var(--pi-color-accent-25), - var(--pi-color-accent), - var(--pi-color-accent-75) - ); - } - &.pi-color__warn { - @include fillIconColor( - var(--pi-color-warn-25), - var(--pi-color-warn-100), - var(--pi-color-warn) - ); - } - &.pi-color__highlighted { - @include fillIconColor( - var(--pi-color-highlighted-25), - var(--pi-color-highlighted), - var(--pi-color-highlighted-75) - ); - } - &.pi-color__white { - @include fillIconColor( - var(--pi-color-white), - var(--pi-color-primary), - var(--pi-color-primary-200) - ); - } - - &.pi-color__grey { - @include fillIconColor( - var(--pi-color-grey-25), - var(--pi-color-grey), - var(--pi-color-grey-100) - ); - } - } - // Animation - // Horizontally - &.pi-icon__animation--horizontally { - animation: alternateOpacity 2s ease infinite alternate, swing 3s linear infinite alternate; - } - // Vertically - &.pi-icon__animation--vertically { - animation: alternateOpacity 2s ease infinite alternate, bounce 3s linear infinite alternate; - } - - &.pi-icon__animation--clickable { - &:not(.is-disabled) { - .mat-icon { - transition: var(--pi-animation); - } - &:hover { - cursor: pointer; - .mat-icon { - transform: scale(1.15); - } - } - } - } - &.is-disabled { - opacity: 0.66; - } -} - -@keyframes alternateOpacity { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0.5; - } -} - -@keyframes bounce { - 0%, - 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(0.5rem); - } - - 80% { - transform: translateY(-0.25rem); - } -} - -@keyframes swing { - 0%, - 100% { - transform: translateX(0); - } - - 50% { - transform: translateX(0.5rem); - } - - 80% { - transform: translateX(-0.25rem); - } -} +@mixin fillIconSize($fill-area-size, $icon-size, $padding) { + height: $fill-area-size; + min-width: $fill-area-size; + width: $fill-area-size; + padding: $padding; + img, + .mat-icon { + width: $icon-size; + } +} + +@mixin defaultIconSize($size) { + img, + .mat-icon { + height: $size; + width: $size; + } +} + +@mixin fillIconColor($background-color, $color, $border-color) { + background-color: $background-color; + .mat-icon { + color: $color; + } + &.is-stroked { + border-color: $border-color; + } +} + +@mixin defaultIconColor { + .mat-icon { + color: var(--pi-color-primary); + } +} + +:host { + display: flex; + justify-content: center; + align-items: center; + + .mat-icon { + display: flex; + } + + // Sizes + // X-Small + &:not(.pi-icon__appearance--fill) { + &.pi-icon__x-small { + @include defaultIconSize(var(--pi-spacing-medium)); + } + // Small + &.pi-icon__small { + @include defaultIconSize(1.125rem); + } + // Medium + &.pi-icon__medium { + @include defaultIconSize(var(--pi-spacing-large)); + } + // Large + &.pi-icon__large { + @include defaultIconSize(1.75rem); + } + // X-Large + &.pi-icon__x-large { + @include defaultIconSize(var(--pi-spacing-xx-large)); + } + } + + &.pi-icon__appearance--fill { + display: flex; + align-items: center; + justify-content: center; + + // Sizes type fill + + // Small + // X Small + // Medium + &.pi-icon__x-small { + @include fillIconSize(var(--pi-spacing-medium), var(--pi-spacing-small), 0); + } + &.pi-icon__small { + @include fillIconSize( + var(--pi-spacing-x-large), + var(--pi-spacing-medium), + var(--pi-spacing-xxxx-small) + ); + } + + // Large & X Large + + &.pi-icon__medium { + @include fillIconSize( + var(--pi-spacing-xx-large), + var(--pi-spacing-x-large), + var(--pi-spacing-xxx-small) + ); + } + &.pi-icon__large { + @include fillIconSize( + var(--pi-spacing-xxx-large), + var(--pi-spacing-x-large), + var(--pi-spacing-xx-small) + ); + } + + &.pi-icon__x-large { + @include fillIconSize( + var(--pi-spacing-xxxx-large), + var(--pi-spacing-x-large), + var(--pi-spacing-xxx-small) + ); + } + + &:not(.is-stroked) { + padding: 0.4375rem; + } + // Small + &.pi-icon__border-radius--small { + border-radius: 0.75rem; + } + // Medium + &.pi-icon__border-radius--medium { + border-radius: var(--pi-border-radius-medium); + } + // Large & + // Stroke default + &.pi-icon__border-radius--large, + &:not(.pi-icon__border-radius--small):not(.pi-icon__border-radius--medium) { + border-radius: 1rem; + } + &.is-stroked { + border: 1px solid; + } + &.pi-color__primary { + @include fillIconColor( + var(--pi-color-primary-25), + var(--pi-color-primary), + var(--pi-color-primary-75) + ); + } + &.pi-color__accent { + @include fillIconColor( + var(--pi-color-accent-25), + var(--pi-color-accent), + var(--pi-color-accent-75) + ); + } + &.pi-color__warn { + @include fillIconColor( + var(--pi-color-warn-25), + var(--pi-color-warn-100), + var(--pi-color-warn) + ); + } + &.pi-color__highlighted { + @include fillIconColor( + var(--pi-color-highlighted-25), + var(--pi-color-highlighted), + var(--pi-color-highlighted-75) + ); + } + &.pi-color__white { + @include fillIconColor( + var(--pi-color-white), + var(--pi-color-primary), + var(--pi-color-primary-200) + ); + } + + &.pi-color__grey { + @include fillIconColor( + var(--pi-color-grey-25), + var(--pi-color-grey), + var(--pi-color-grey-100) + ); + } + } + // Animation + // Horizontally + &.pi-icon__animation--horizontally { + animation: alternateOpacity 2s ease infinite alternate, swing 3s linear infinite alternate; + } + // Vertically + &.pi-icon__animation--vertically { + animation: alternateOpacity 2s ease infinite alternate, bounce 3s linear infinite alternate; + } + + &.pi-icon__animation--clickable { + &:not(.is-disabled) { + .mat-icon { + transition: var(--pi-animation); + } + &:hover { + cursor: pointer; + .mat-icon { + transform: scale(1.15); + } + } + } + } + &.is-disabled { + opacity: 0.66; + } +} + +@keyframes alternateOpacity { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +@keyframes bounce { + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(0.5rem); + } + + 80% { + transform: translateY(-0.25rem); + } +} + +@keyframes swing { + 0%, + 100% { + transform: translateX(0); + } + + 50% { + transform: translateX(0.5rem); + } + + 80% { + transform: translateX(-0.25rem); + } +} diff --git a/libs/ui/src/lib/ui/icon/icon/icon.component.ts b/libs/ui/src/lib/ui/icon/icon/icon.component.ts index 9c024cc..1968529 100644 --- a/libs/ui/src/lib/ui/icon/icon/icon.component.ts +++ b/libs/ui/src/lib/ui/icon/icon/icon.component.ts @@ -1,57 +1,57 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; - -// Shared -import { - animation, - borderRadius, - ComponentFamilyClass, - iconSize, - styleType, +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; + +// Shared +import { + animation, + borderRadius, + ComponentFamilyClass, + iconSize, + styleType, } from '../../../styles'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-icon', templateUrl: './icon.component.html', styleUrls: ['./icon.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiIconComponent { - @HostBinding('class') get classes(): string { +}) +export class PiIconComponent { + @HostBinding('class') get classes(): string { const color = this.color(); - const colorClass = color && `pi-color__${color}`; + const colorClass = color && `pi-color__${color}`; const size = this.size(); - const sizeClass = size && `pi-icon__${size}`; + const sizeClass = size && `pi-icon__${size}`; const animationValue = this.animation(); - const animationClass = animationValue && `pi-icon__animation--${animationValue}`; + const animationClass = animationValue && `pi-icon__animation--${animationValue}`; const appearance = this.appearance(); - const appearanceClass = - appearance !== 'default' ? `pi-icon__appearance--${appearance}` : ''; + const appearanceClass = + appearance !== 'default' ? `pi-icon__appearance--${appearance}` : ''; const type = this.type(); - const typeClass = type !== 'default' ? `pi-icon__type--${type}` : ''; + const typeClass = type !== 'default' ? `pi-icon__type--${type}` : ''; const borderRadiusValue = this.borderRadius(); - const borderRadiusClass = borderRadiusValue && `pi-icon__border-radius--${borderRadiusValue}`; - const strokeClass = this.isStroked() === true && 'is-stroked'; - return [ - 'pi-icon', - ComponentFamilyClass.Text, - colorClass, - sizeClass, - animationClass, - appearanceClass, - borderRadiusClass, - strokeClass, - typeClass, - ].join(' '); - } - readonly color = input(); - readonly icon = input(); - readonly size = input('medium'); - readonly animation = input(); - readonly appearance = input<'fill' | 'default'>('default'); - readonly type = input<'custom' | 'default'>('default'); - readonly borderRadius = input(); - readonly isStroked = input(false); -} + const borderRadiusClass = borderRadiusValue && `pi-icon__border-radius--${borderRadiusValue}`; + const strokeClass = this.isStroked() === true && 'is-stroked'; + return [ + 'pi-icon', + ComponentFamilyClass.Text, + colorClass, + sizeClass, + animationClass, + appearanceClass, + borderRadiusClass, + strokeClass, + typeClass, + ].join(' '); + } + readonly color = input(); + readonly icon = input(); + readonly size = input('medium'); + readonly animation = input(); + readonly appearance = input<'fill' | 'default'>('default'); + readonly type = input<'custom' | 'default'>('default'); + readonly borderRadius = input(); + readonly isStroked = input(false); +} diff --git a/libs/ui/src/lib/ui/icon/index.ts b/libs/ui/src/lib/ui/icon/index.ts index 91803ce..e4dc452 100644 --- a/libs/ui/src/lib/ui/icon/index.ts +++ b/libs/ui/src/lib/ui/icon/index.ts @@ -1,3 +1,3 @@ - - -export * from './icon/icon.component'; + + +export * from './icon/icon.component'; diff --git a/libs/ui/src/lib/ui/image/background-image.directive.ts b/libs/ui/src/lib/ui/image/background-image.directive.ts index 84491fe..e216bc6 100644 --- a/libs/ui/src/lib/ui/image/background-image.directive.ts +++ b/libs/ui/src/lib/ui/image/background-image.directive.ts @@ -1,4 +1,4 @@ -// Angular +// Angular import { AfterViewInit, Directive, @@ -7,74 +7,74 @@ import { Renderer2, OnDestroy, input -} from '@angular/core'; - -// RxJS - -// Store -import { Device, DeviceConfigsFacade } from '../../util/device-configs'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; - -@Directive({ selector: '[pi-background-image]', }) -export class PiBackgroundImageDirective implements AfterViewInit, OnDestroy { - @HostBinding('class') get classes(): string { +} from '@angular/core'; + +// RxJS + +// Store +import { Device, DeviceConfigsFacade } from '../../util/device-configs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +@Directive({ selector: '[pi-background-image]', }) +export class PiBackgroundImageDirective implements AfterViewInit, OnDestroy { + @HostBinding('class') get classes(): string { const animation = this.animation(); - const animationClass = animation && `pi-background-image__animation--${animation}`; - return ['pi-image', 'pi-background-image', animationClass].join(' '); - } - - readonly extension = input<'jpg' | 'png' | 'svg' | 'gif' | 'webp'>('svg'); - readonly animation = input<'infinite'>(); - readonly image = input(); - readonly isResponsive = input(false); - readonly origin = input<'content-box' | 'border-box'>('content-box'); - readonly size = input<'auto' | 'contain' | 'cover'>('cover'); - readonly position = input<'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom'>('center center'); - - private destroy$: Subject = new Subject(); - - constructor( - private deviceConfigsFacade: DeviceConfigsFacade, - private element: ElementRef, - private renderer: Renderer2 - ) {} - - ngAfterViewInit(): void { - this.deviceConfigsFacade.device$.pipe(takeUntil(this.destroy$)).subscribe((device: Device) => { - this.setBackgroundImage(device.toLocaleLowerCase()); - }); - } - - ngOnDestroy(): void { - this.destroy$.next(); - this.destroy$.complete(); - } - - private setBackgroundImage(device: string): void { - const el = this.element.nativeElement; - - this.renderer.setStyle(el, 'background-repeat', 'no-repeat'); - this.renderer.setStyle(el, 'background-position', this.position()); - this.renderer.setStyle(el, 'background-size', this.size()); - if (this.origin() === 'content-box') { - this.renderer.setStyle(el, 'background-origin', 'content-box'); - } else { - this.renderer.setStyle(el, 'background-origin', 'border-box'); - } - - if (this.isResponsive()) { - this.renderer.setStyle( - el, - 'background-image', - `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${this.image()}-${device}.${this.extension()})` - ); - } else { - this.renderer.setStyle( - el, - 'background-image', - `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${this.image()}.${this.extension()})` - ); - } - } -} + const animationClass = animation && `pi-background-image__animation--${animation}`; + return ['pi-image', 'pi-background-image', animationClass].join(' '); + } + + readonly extension = input<'jpg' | 'png' | 'svg' | 'gif' | 'webp'>('svg'); + readonly animation = input<'infinite'>(); + readonly image = input(); + readonly isResponsive = input(false); + readonly origin = input<'content-box' | 'border-box'>('content-box'); + readonly size = input<'auto' | 'contain' | 'cover'>('cover'); + readonly position = input<'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom'>('center center'); + + private destroy$: Subject = new Subject(); + + constructor( + private deviceConfigsFacade: DeviceConfigsFacade, + private element: ElementRef, + private renderer: Renderer2 + ) {} + + ngAfterViewInit(): void { + this.deviceConfigsFacade.device$.pipe(takeUntil(this.destroy$)).subscribe((device: Device) => { + this.setBackgroundImage(device.toLocaleLowerCase()); + }); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + private setBackgroundImage(device: string): void { + const el = this.element.nativeElement; + + this.renderer.setStyle(el, 'background-repeat', 'no-repeat'); + this.renderer.setStyle(el, 'background-position', this.position()); + this.renderer.setStyle(el, 'background-size', this.size()); + if (this.origin() === 'content-box') { + this.renderer.setStyle(el, 'background-origin', 'content-box'); + } else { + this.renderer.setStyle(el, 'background-origin', 'border-box'); + } + + if (this.isResponsive()) { + this.renderer.setStyle( + el, + 'background-image', + `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${this.image()}-${device}.${this.extension()})` + ); + } else { + this.renderer.setStyle( + el, + 'background-image', + `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${this.image()}.${this.extension()})` + ); + } + } +} diff --git a/libs/ui/src/lib/ui/image/headline/headline.component.html b/libs/ui/src/lib/ui/image/headline/headline.component.html index 25225ab..b34d21c 100644 --- a/libs/ui/src/lib/ui/image/headline/headline.component.html +++ b/libs/ui/src/lib/ui/image/headline/headline.component.html @@ -1,21 +1,21 @@ -
- - - - -
- +
+ + + + +
+ diff --git a/libs/ui/src/lib/ui/image/headline/headline.component.scss b/libs/ui/src/lib/ui/image/headline/headline.component.scss index 3e897d4..8991464 100644 --- a/libs/ui/src/lib/ui/image/headline/headline.component.scss +++ b/libs/ui/src/lib/ui/image/headline/headline.component.scss @@ -1,318 +1,318 @@ -:host { - display: flex; - - h2 { - padding-top: unset; - font: { - size: var(--pi-font-size-xx-large); - } - } - // Type - &.pi-headline__type--avatar { - & > figure { - border-radius: var(--pi-border-radius-medium); - & > img { - border-radius: var(--pi-border-radius-medium); - } - } - } - // Flex direction - // Row - &.pi-headline__flex--row { - align-items: center; - } - // Row-reverse - &.pi-headline__flex--row-reverse { - flex-direction: row-reverse; - } - // Column - &.pi-headline__flex--column { - align-items: center; - } - // Column-reverse - &.pi-headline__flex--column-reverse { - flex-direction: column-reverse; - } - - // Gap - // xxx small - &.pi-headline__gap--xxxs { - gap: var(--pi-spacing-xxx-small); - } - // XX Small - &.pi-headline__gap--xxs { - gap: var(--pi-spacing-xx-small); - } - // X Small - &.pi-headline__gap--xs { - gap: var(--pi-spacing-x-small); - } - // Small - &.pi-headline__gap--s { - gap: var(--pi-spacing-small); - } - - // Medium - &.pi-headline__gap--m { - gap: var(--pi-spacing-medium); - } - - // Large - &.pi-headline__gap--l { - gap: var(--pi-spacing-large); - } - - // X-large - &.pi-headline__gap--xl { - gap: var(--pi-spacing-x-large); - } - - // XX-large - &.pi-headline__gap--xxl, - &:not(.pi-headline__gap--s):not(.pi-headline__gap--m):not(.pi-headline__gap--l):not( - .pi-headline__gap--xl - ):not(.pi-headline__gap--xxxl):not(.pi-headline__gap--xxxxl):not(.pi-headline__gap--xxxs):not( - .pi-headline__gap--xxs - ):not(.pi-headline__gap--xs):not(.pi-headline__gap--none) { - gap: var(--pi-spacing-xx-large); - } - - // XXX-large - &.pi-headline__gap--xxxl { - gap: var(--pi-spacing-xxx-large); - } - - // XXXX-large - &.pi-headline__gap--xxxxl { - gap: var(--pi-spacing-xxxx-large); - } - - // Alignment - // Flex Start - &.pi-headline__align--flex-start { - align-items: flex-start; - } - - // Center - &.pi-headline__align--center { - align-items: center; - } - - // Flex End - &.pi-headline__align--flex-end { - align-items: flex-end; - } - - // Width - // Mobile & Phablet - @media screen and (max-width: 62rem) { - // Width - // 2 / 3 - &.pi-headline__width--two-thirds { - & > figure { - max-width: 70%; - } - } - // 3 / 4 - &.pi-headline__width--three-quarters { - & > figure { - max-width: 80%; - } - } - // 1 / 2 - &.pi-headline__width--half { - & > figure { - max-width: 60%; - } - } - // 1 / 3 - &.pi-headline__width--third { - & > figure { - max-width: 50%; - } - } - // 1 / 4 - &.pi-headline__width--quarter { - & > figure { - max-width: 33.33%; - } - } - // 1 / 5 - &.pi-headline__width--fifth { - & > figure { - max-width: 25%; - } - } - // 1 / 6 - &.pi-headline__width--sixth { - & > figure { - max-width: 20%; - } - } - - // Padding - // XXXXL - 3.375rem - 54px - &.pi-headline__padding--xxxxl { - padding: var(--pi-spacing-xxx-large); - } - // xxxl - 2.5rem - 40px - &.pi-headline__padding--xxxl { - padding: var(--pi-spacing-xx-large); - } - // xxl - 2rem - 32px - &.pi-headline__padding--xxl { - padding: var(--pi-spacing-x-large); - } - // xl - 1.5rem - 24px - &.pi-headline__padding--xl { - padding: var(--pi-spacing-large); - } - // l - 1.125rem - 18px - &.pi-headline__padding--l { - padding: var(--pi-spacing-medium); - } - // m - 1rem - 16px - &.pi-headline__padding--m { - padding: var(--pi-spacing-small); - } - } - // Tablet & Desktop - @media screen and (min-width: 62rem) { - // Width - // 2 / 3 - &.pi-headline__width--two-thirds { - & > figure { - max-width: 66.66%; - } - } - // 3 / 4 - &.pi-headline__width--three-quarters { - & > figure { - max-width: 75%; - } - } - // 1 / 2 - &.pi-headline__width--half { - & > figure { - max-width: 50%; - } - } - // 1 / 3 - &.pi-headline__width--third { - & > figure { - max-width: 33.33%; - } - } - // 1 / 4 - &.pi-headline__width--quarter { - & > figure { - max-width: 25%; - } - } - // 1 / 5 - &.pi-headline__width--fifth { - & > figure { - max-width: 20%; - } - } - // 1 / 6 - &.pi-headline__width--sixth { - & > figure { - max-width: 16.66%; - } - } - // Padding - // XXXXL - 3.375rem - 54px - &.pi-headline__padding--xxxxl { - padding: var(--pi-spacing-xxxx-large); - } - // xxxl - 2.5rem - 40px - &.pi-headline__padding--xxxl { - padding: var(--pi-spacing-xxx-large); - } - // xxl - 2rem - 32px - &.pi-headline__padding--xxl { - padding: var(--pi-spacing-xx-large); - } - // xl - 1.5rem - 24px - &.pi-headline__padding--xl { - padding: var(--pi-spacing-x-large); - } - // l - 1.125rem - 18px - &.pi-headline__padding--l { - padding: var(--pi-spacing-large); - } - // m - 1rem - 16px - &.pi-headline__padding--m { - padding: var(--pi-spacing-medium); - } - } -} - -html { - &.is-mobile { - // Media queries - // Mobile max 640px - @media screen and (max-width: 30rem) { - .pi-headline { - &.pi-headline__flex-row { - flex-direction: column; - & > figure { - width: 80%; - } - & > aside { - width: 100%; - } - } - } - } - @media screen and (min-width: 30rem) and (max-width: 40rem) { - .pi-headline { - &.pi-headline__flex-row { - flex-direction: column; - & > figure { - width: 55%; - } - & > aside { - width: 95%; - } - } - } - } - } - - // Desktop & tablet min 640px - &:not(.is-mobile) { - .pi-headline { - &.pi-headline__flex--row { - & > figure { - width: 45%; - } - & > aside { - width: 55%; - } - } - } - } - - // Tablet - &.is-tablet { - .pi-headline { - &.pi-headline__type-logo { - & > figure { - max-width: 12.5rem; - } - } - } - } - // Desktop - &.is-desktop { - .pi-headline { - &.pi-headline__type--logo { - & > figure { - max-width: 6.875rem; - } - } - } - } -} +:host { + display: flex; + + h2 { + padding-top: unset; + font: { + size: var(--pi-font-size-xx-large); + } + } + // Type + &.pi-headline__type--avatar { + & > figure { + border-radius: var(--pi-border-radius-medium); + & > img { + border-radius: var(--pi-border-radius-medium); + } + } + } + // Flex direction + // Row + &.pi-headline__flex--row { + align-items: center; + } + // Row-reverse + &.pi-headline__flex--row-reverse { + flex-direction: row-reverse; + } + // Column + &.pi-headline__flex--column { + align-items: center; + } + // Column-reverse + &.pi-headline__flex--column-reverse { + flex-direction: column-reverse; + } + + // Gap + // xxx small + &.pi-headline__gap--xxxs { + gap: var(--pi-spacing-xxx-small); + } + // XX Small + &.pi-headline__gap--xxs { + gap: var(--pi-spacing-xx-small); + } + // X Small + &.pi-headline__gap--xs { + gap: var(--pi-spacing-x-small); + } + // Small + &.pi-headline__gap--s { + gap: var(--pi-spacing-small); + } + + // Medium + &.pi-headline__gap--m { + gap: var(--pi-spacing-medium); + } + + // Large + &.pi-headline__gap--l { + gap: var(--pi-spacing-large); + } + + // X-large + &.pi-headline__gap--xl { + gap: var(--pi-spacing-x-large); + } + + // XX-large + &.pi-headline__gap--xxl, + &:not(.pi-headline__gap--s):not(.pi-headline__gap--m):not(.pi-headline__gap--l):not( + .pi-headline__gap--xl + ):not(.pi-headline__gap--xxxl):not(.pi-headline__gap--xxxxl):not(.pi-headline__gap--xxxs):not( + .pi-headline__gap--xxs + ):not(.pi-headline__gap--xs):not(.pi-headline__gap--none) { + gap: var(--pi-spacing-xx-large); + } + + // XXX-large + &.pi-headline__gap--xxxl { + gap: var(--pi-spacing-xxx-large); + } + + // XXXX-large + &.pi-headline__gap--xxxxl { + gap: var(--pi-spacing-xxxx-large); + } + + // Alignment + // Flex Start + &.pi-headline__align--flex-start { + align-items: flex-start; + } + + // Center + &.pi-headline__align--center { + align-items: center; + } + + // Flex End + &.pi-headline__align--flex-end { + align-items: flex-end; + } + + // Width + // Mobile & Phablet + @media screen and (max-width: 62rem) { + // Width + // 2 / 3 + &.pi-headline__width--two-thirds { + & > figure { + max-width: 70%; + } + } + // 3 / 4 + &.pi-headline__width--three-quarters { + & > figure { + max-width: 80%; + } + } + // 1 / 2 + &.pi-headline__width--half { + & > figure { + max-width: 60%; + } + } + // 1 / 3 + &.pi-headline__width--third { + & > figure { + max-width: 50%; + } + } + // 1 / 4 + &.pi-headline__width--quarter { + & > figure { + max-width: 33.33%; + } + } + // 1 / 5 + &.pi-headline__width--fifth { + & > figure { + max-width: 25%; + } + } + // 1 / 6 + &.pi-headline__width--sixth { + & > figure { + max-width: 20%; + } + } + + // Padding + // XXXXL - 3.375rem - 54px + &.pi-headline__padding--xxxxl { + padding: var(--pi-spacing-xxx-large); + } + // xxxl - 2.5rem - 40px + &.pi-headline__padding--xxxl { + padding: var(--pi-spacing-xx-large); + } + // xxl - 2rem - 32px + &.pi-headline__padding--xxl { + padding: var(--pi-spacing-x-large); + } + // xl - 1.5rem - 24px + &.pi-headline__padding--xl { + padding: var(--pi-spacing-large); + } + // l - 1.125rem - 18px + &.pi-headline__padding--l { + padding: var(--pi-spacing-medium); + } + // m - 1rem - 16px + &.pi-headline__padding--m { + padding: var(--pi-spacing-small); + } + } + // Tablet & Desktop + @media screen and (min-width: 62rem) { + // Width + // 2 / 3 + &.pi-headline__width--two-thirds { + & > figure { + max-width: 66.66%; + } + } + // 3 / 4 + &.pi-headline__width--three-quarters { + & > figure { + max-width: 75%; + } + } + // 1 / 2 + &.pi-headline__width--half { + & > figure { + max-width: 50%; + } + } + // 1 / 3 + &.pi-headline__width--third { + & > figure { + max-width: 33.33%; + } + } + // 1 / 4 + &.pi-headline__width--quarter { + & > figure { + max-width: 25%; + } + } + // 1 / 5 + &.pi-headline__width--fifth { + & > figure { + max-width: 20%; + } + } + // 1 / 6 + &.pi-headline__width--sixth { + & > figure { + max-width: 16.66%; + } + } + // Padding + // XXXXL - 3.375rem - 54px + &.pi-headline__padding--xxxxl { + padding: var(--pi-spacing-xxxx-large); + } + // xxxl - 2.5rem - 40px + &.pi-headline__padding--xxxl { + padding: var(--pi-spacing-xxx-large); + } + // xxl - 2rem - 32px + &.pi-headline__padding--xxl { + padding: var(--pi-spacing-xx-large); + } + // xl - 1.5rem - 24px + &.pi-headline__padding--xl { + padding: var(--pi-spacing-x-large); + } + // l - 1.125rem - 18px + &.pi-headline__padding--l { + padding: var(--pi-spacing-large); + } + // m - 1rem - 16px + &.pi-headline__padding--m { + padding: var(--pi-spacing-medium); + } + } +} + +html { + &.is-mobile { + // Media queries + // Mobile max 640px + @media screen and (max-width: 30rem) { + .pi-headline { + &.pi-headline__flex-row { + flex-direction: column; + & > figure { + width: 80%; + } + & > aside { + width: 100%; + } + } + } + } + @media screen and (min-width: 30rem) and (max-width: 40rem) { + .pi-headline { + &.pi-headline__flex-row { + flex-direction: column; + & > figure { + width: 55%; + } + & > aside { + width: 95%; + } + } + } + } + } + + // Desktop & tablet min 640px + &:not(.is-mobile) { + .pi-headline { + &.pi-headline__flex--row { + & > figure { + width: 45%; + } + & > aside { + width: 55%; + } + } + } + } + + // Tablet + &.is-tablet { + .pi-headline { + &.pi-headline__type-logo { + & > figure { + max-width: 12.5rem; + } + } + } + } + // Desktop + &.is-desktop { + .pi-headline { + &.pi-headline__type--logo { + & > figure { + max-width: 6.875rem; + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/image/headline/headline.component.ts b/libs/ui/src/lib/ui/image/headline/headline.component.ts index feaa44c..d785419 100644 --- a/libs/ui/src/lib/ui/image/headline/headline.component.ts +++ b/libs/ui/src/lib/ui/image/headline/headline.component.ts @@ -5,73 +5,73 @@ import { Directive, HostBinding, input -} from '@angular/core'; - -// Shared -import { - alignment, - ComponentFamilyClass, - flexDirection, - gap, +} from '@angular/core'; + +// Shared +import { + alignment, + ComponentFamilyClass, + flexDirection, + gap, } from '../../../styles'; import { NgIf } from '@angular/common'; -import { SanitizerAltImagePipe } from '../../../util/pipes/pipes'; - +import { SanitizerAltImagePipe } from '../../../util/pipes/pipes'; + @Directive({ selector: 'pi-headline-label-content', host: { class: 'pi-headline-content pi-headline-content__label' }, -}) -export class PiHeadlineLabelContentDirective {} - +}) +export class PiHeadlineLabelContentDirective {} + @Directive({ selector: 'pi-headline-description-content', host: { class: 'pi-headline-content pi-headline-content__description' }, -}) -export class PiHeadlineDescriptionContentDirective {} - +}) +export class PiHeadlineDescriptionContentDirective {} + @Component({ selector: 'pi-headline', templateUrl: './headline.component.html', styleUrls: ['./headline.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, SanitizerAltImagePipe], -}) -export class PiHeadlineComponent { - @HostBinding('class') get classes(): string { +}) +export class PiHeadlineComponent { + @HostBinding('class') get classes(): string { const alignmentValue = this.alignment(); - const alignmentClass = alignmentValue && `pi-headline__align--${alignmentValue}`; + const alignmentClass = alignmentValue && `pi-headline__align--${alignmentValue}`; const flexDirectionValue = this.flexDirection(); - const flexDirectionClass = flexDirectionValue && `pi-headline__flex--${flexDirectionValue}`; + const flexDirectionClass = flexDirectionValue && `pi-headline__flex--${flexDirectionValue}`; const gapValue = this.gap(); - const gapClass = gapValue && `pi-headline__gap--${gapValue}`; + const gapClass = gapValue && `pi-headline__gap--${gapValue}`; const padding = this.padding(); - const paddingClass = padding && `pi-headline__padding--${padding}`; + const paddingClass = padding && `pi-headline__padding--${padding}`; const type = this.type(); - const typeClass = type !== 'default' && `pi-headline__type--${type}`; + const typeClass = type !== 'default' && `pi-headline__type--${type}`; const width = this.width(); - const widthClass = width && `pi-headline__width--${width}`; - - return [ - ComponentFamilyClass.Image, - 'pi-headline', - typeClass, - flexDirectionClass, - gapClass, - alignmentClass, - widthClass, - paddingClass, - ].join(' '); - } - readonly alt = input(); - readonly hasContent = input(true); - readonly link = input.required(); - readonly pathImg = input.required(); - - // Skin - readonly alignment = input('center'); - readonly flexDirection = input('column'); - readonly gap = input.required(); - readonly type = input<'logo' | 'default' | 'avatar'>('default'); - readonly padding = input<'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm'>(); - readonly width = input<'quarter' | 'third' | 'half' | 'fifth' | 'sixth' | 'three-quarters' | 'two-thirds'>(); -} + const widthClass = width && `pi-headline__width--${width}`; + + return [ + ComponentFamilyClass.Image, + 'pi-headline', + typeClass, + flexDirectionClass, + gapClass, + alignmentClass, + widthClass, + paddingClass, + ].join(' '); + } + readonly alt = input(); + readonly hasContent = input(true); + readonly link = input.required(); + readonly pathImg = input.required(); + + // Skin + readonly alignment = input('center'); + readonly flexDirection = input('column'); + readonly gap = input.required(); + readonly type = input<'logo' | 'default' | 'avatar'>('default'); + readonly padding = input<'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm'>(); + readonly width = input<'quarter' | 'third' | 'half' | 'fifth' | 'sixth' | 'three-quarters' | 'two-thirds'>(); +} diff --git a/libs/ui/src/lib/ui/image/index.ts b/libs/ui/src/lib/ui/image/index.ts index 88147b0..d2a4d1f 100644 --- a/libs/ui/src/lib/ui/image/index.ts +++ b/libs/ui/src/lib/ui/image/index.ts @@ -1,5 +1,5 @@ - - -export * from './background-image.directive'; - -export * from './headline/headline.component'; + + +export * from './background-image.directive'; + +export * from './headline/headline.component'; diff --git a/libs/ui/src/lib/ui/list-item/index.ts b/libs/ui/src/lib/ui/list-item/index.ts index 4872a2e..3429b14 100644 --- a/libs/ui/src/lib/ui/list-item/index.ts +++ b/libs/ui/src/lib/ui/list-item/index.ts @@ -1,3 +1,3 @@ - - -export * from './list-item/list-item.component'; + + +export * from './list-item/list-item.component'; diff --git a/libs/ui/src/lib/ui/list-item/list-item/list-item.component.html b/libs/ui/src/lib/ui/list-item/list-item/list-item.component.html index 8e91a1e..1ebbad2 100644 --- a/libs/ui/src/lib/ui/list-item/list-item/list-item.component.html +++ b/libs/ui/src/lib/ui/list-item/list-item/list-item.component.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/libs/ui/src/lib/ui/list-item/list-item/list-item.component.scss b/libs/ui/src/lib/ui/list-item/list-item/list-item.component.scss index 2f25487..a2e08df 100644 --- a/libs/ui/src/lib/ui/list-item/list-item/list-item.component.scss +++ b/libs/ui/src/lib/ui/list-item/list-item/list-item.component.scss @@ -1,251 +1,251 @@ -@mixin listItemColor($color) { - &[class*='pi-list-item__border'] { - border-color: var(--pi-color-#{$color}-75); - } - &.pi-list-item__appearance--fill { - // Translucent - &[class*='pi-color__opacity'] { - // Light - &.pi-color__mode--light, - &:not(.pi-color__mode--dark) { - background-image: var(--pi-gradient-#{$color}-light-rgba); - &.is-stroked { - border-color: var(--pi-color-#{$color}-75); - } - // Clickable - &.is-clickable { - &:hover { - &:not(.is-disabled) { - &:not(.is-active) { - background-image: var(--pi-gradient-#{$color}-light-rgba-hover); - &.is-stroked { - border-color: var(--pi-color-#{$color}-75); - } - } - } - } - &.is-active { - background-image: var(--pi-gradient-#{$color}-light-rgba-hover); - &.is-stroked { - border-color: var(--pi-color-#{$color}-75); - } - } - } - } - - // Dark - &.pi-color__mode--dark { - background-image: var(--pi-gradient-#{$color}-dark-rgba); - &.is-stroked { - border-color: var(--pi-color-#{$color}); - } - &.is-clickable { - &:hover { - &:not(.is-disabled) { - &:not(.is-active) { - background-image: var(--pi-gradient-#{$color}-dark-rgba-hover); - &.is-stroked { - border-color: var(--pi-color-#{$color}-900); - } - } - } - } - &.is-active { - background-image: var(--pi-gradient-#{$color}-dark-rgba-hover); - &.is-stroked { - border-color: var(--pi-color-#{$color}-900); - } - } - } - } - } - // Opaque - &:not([class*='pi-color__opacity']) { - // Light - &.pi-color__mode--light, - &:not(.pi-color__mode--dark) { - background-color: var(--pi-color-#{$color}-25); - &.is-stroked { - border-color: var(--pi-color-#{$color}-75); - } - &.is-clickable { - &:hover { - &:not(.is-disabled) { - &:not(.is-active) { - background-color: var(--pi-color-#{$color}-50); - &.is-stroked { - border-color: var(--pi-color-#{$color}-100); - } - } - } - } - &.is-active { - background-color: var(--pi-color-#{$color}-25); - &.is-stroked { - border-color: var(--pi-color-#{$color}-75); - } - } - } - } - - // Dark - &.pi-color__mode--dark { - background-color: var(--pi-color-#{$color}-400); - &.is-stroked { - border-color: var(--pi-color-#{$color}); - } - &.is-clickable { - &:hover { - &:not(.is-disabled) { - &:not(.is-active) { - background-color: var(--pi-color-#{$color}); - &.is-stroked { - border-color: var(--pi-color-#{$color}-900); - } - } - } - } - &.is-active { - background-color: var(--pi-color-#{$color}); - &.is-stroked { - border-color: var(--pi-color-#{$color}); - } - } - } - } - } - } -} - -@mixin listItemColorWhite { - // Light Translucent - &[class*='pi-color__opacity'] { - // Light Glass gradient - background-image: var(--pi-gradient-white-rgba); - &.is-clickable { - &:hover { - // Light Glass gradient hover - background-image: var(--pi-gradient-white-rgba-hover); - } - } - } - // Light Opaque - &:not([class*='pi-color__opacity']) { - background-color: var(--pi-color-white); - } - // Light & Is stroked - &.is-stroked { - border-color: var(--pi-color-white); - } -} - -:host { - display: flex; - width: 100%; - transition: var(--pi-animation); - &:hover { - transition: var(--pi-animation); - } - label { - margin-bottom: unset; - } - &.is-stroked { - border: 1px solid; - } - &.is-clickable { - &:hover { - cursor: pointer; - } - } - &[class*='pi-color__opacity'] { - -webkit-backdrop-filter: blur(0.75rem); - backdrop-filter: blur(0.75rem); - } - - // Appearance - // Fill - &.pi-list-item__appearance--fill { - border-radius: var(--pi-border-radius-large); - &.is-stroked { - border: 1px solid; - border-radius: var(--pi-border-radius-large); - } - &.pi-color__opacity--80 { - opacity: 0.8; - } - &.pi-color__opacity--50 { - opacity: 0.5; - } - } - - // Alignment - &.pi-list-item__align-items--center, - &:not(.pi-list-item__align-items--flex-start):not(.pi-list-item__align-items--flex-end) { - align-items: center; - } - &.pi-list-item__align-items--flex-start { - align-items: flex-start; - } - &.pi-list-item__align-items--flex-end { - align-items: flex-end; - } - - // Padding - &.pi-list-item__padding--xxxl { - padding: var(--pi-spacing-xxx-large); - } - &.pi-list-item__padding--xl { - padding: var(--pi-spacing-x-large); - } - &.pi-list-item__padding--m { - padding: var(--pi-spacing-medium); - } - &.pi-list-item__padding--s { - padding: var(--pi-spacing-small); - } - &.pi-list-item__padding--xs { - padding: var(--pi-spacing-x-small); - } - &.pi-list-item__padding--xxs { - padding: var(--pi-spacing-xx-small); - } - &.pi-list-item__padding--none { - padding: 0; - } - - // Border - &.pi-list-item__border--top { - border-top: 1px solid; - } - &.pi-list-item__border--bottom { - border-bottom: 1px solid; - } - - // Colors - &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( - .pi-color__highlighted - ):not(.pi-color__white) { - @include listItemColor(grey); - } - // Colors - // Primary - &.pi-color__primary { - @include listItemColor(primary); - } - // Accent - &.pi-color__accent { - @include listItemColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include listItemColor(highlighted); - } - // Warn - &.pi-color__warn { - @include listItemColor(warn); - } - - &.pi-color__white { - @include listItemColorWhite; - } -} +@mixin listItemColor($color) { + &[class*='pi-list-item__border'] { + border-color: var(--pi-color-#{$color}-75); + } + &.pi-list-item__appearance--fill { + // Translucent + &[class*='pi-color__opacity'] { + // Light + &.pi-color__mode--light, + &:not(.pi-color__mode--dark) { + background-image: var(--pi-gradient-#{$color}-light-rgba); + &.is-stroked { + border-color: var(--pi-color-#{$color}-75); + } + // Clickable + &.is-clickable { + &:hover { + &:not(.is-disabled) { + &:not(.is-active) { + background-image: var(--pi-gradient-#{$color}-light-rgba-hover); + &.is-stroked { + border-color: var(--pi-color-#{$color}-75); + } + } + } + } + &.is-active { + background-image: var(--pi-gradient-#{$color}-light-rgba-hover); + &.is-stroked { + border-color: var(--pi-color-#{$color}-75); + } + } + } + } + + // Dark + &.pi-color__mode--dark { + background-image: var(--pi-gradient-#{$color}-dark-rgba); + &.is-stroked { + border-color: var(--pi-color-#{$color}); + } + &.is-clickable { + &:hover { + &:not(.is-disabled) { + &:not(.is-active) { + background-image: var(--pi-gradient-#{$color}-dark-rgba-hover); + &.is-stroked { + border-color: var(--pi-color-#{$color}-900); + } + } + } + } + &.is-active { + background-image: var(--pi-gradient-#{$color}-dark-rgba-hover); + &.is-stroked { + border-color: var(--pi-color-#{$color}-900); + } + } + } + } + } + // Opaque + &:not([class*='pi-color__opacity']) { + // Light + &.pi-color__mode--light, + &:not(.pi-color__mode--dark) { + background-color: var(--pi-color-#{$color}-25); + &.is-stroked { + border-color: var(--pi-color-#{$color}-75); + } + &.is-clickable { + &:hover { + &:not(.is-disabled) { + &:not(.is-active) { + background-color: var(--pi-color-#{$color}-50); + &.is-stroked { + border-color: var(--pi-color-#{$color}-100); + } + } + } + } + &.is-active { + background-color: var(--pi-color-#{$color}-25); + &.is-stroked { + border-color: var(--pi-color-#{$color}-75); + } + } + } + } + + // Dark + &.pi-color__mode--dark { + background-color: var(--pi-color-#{$color}-400); + &.is-stroked { + border-color: var(--pi-color-#{$color}); + } + &.is-clickable { + &:hover { + &:not(.is-disabled) { + &:not(.is-active) { + background-color: var(--pi-color-#{$color}); + &.is-stroked { + border-color: var(--pi-color-#{$color}-900); + } + } + } + } + &.is-active { + background-color: var(--pi-color-#{$color}); + &.is-stroked { + border-color: var(--pi-color-#{$color}); + } + } + } + } + } + } +} + +@mixin listItemColorWhite { + // Light Translucent + &[class*='pi-color__opacity'] { + // Light Glass gradient + background-image: var(--pi-gradient-white-rgba); + &.is-clickable { + &:hover { + // Light Glass gradient hover + background-image: var(--pi-gradient-white-rgba-hover); + } + } + } + // Light Opaque + &:not([class*='pi-color__opacity']) { + background-color: var(--pi-color-white); + } + // Light & Is stroked + &.is-stroked { + border-color: var(--pi-color-white); + } +} + +:host { + display: flex; + width: 100%; + transition: var(--pi-animation); + &:hover { + transition: var(--pi-animation); + } + label { + margin-bottom: unset; + } + &.is-stroked { + border: 1px solid; + } + &.is-clickable { + &:hover { + cursor: pointer; + } + } + &[class*='pi-color__opacity'] { + -webkit-backdrop-filter: blur(0.75rem); + backdrop-filter: blur(0.75rem); + } + + // Appearance + // Fill + &.pi-list-item__appearance--fill { + border-radius: var(--pi-border-radius-large); + &.is-stroked { + border: 1px solid; + border-radius: var(--pi-border-radius-large); + } + &.pi-color__opacity--80 { + opacity: 0.8; + } + &.pi-color__opacity--50 { + opacity: 0.5; + } + } + + // Alignment + &.pi-list-item__align-items--center, + &:not(.pi-list-item__align-items--flex-start):not(.pi-list-item__align-items--flex-end) { + align-items: center; + } + &.pi-list-item__align-items--flex-start { + align-items: flex-start; + } + &.pi-list-item__align-items--flex-end { + align-items: flex-end; + } + + // Padding + &.pi-list-item__padding--xxxl { + padding: var(--pi-spacing-xxx-large); + } + &.pi-list-item__padding--xl { + padding: var(--pi-spacing-x-large); + } + &.pi-list-item__padding--m { + padding: var(--pi-spacing-medium); + } + &.pi-list-item__padding--s { + padding: var(--pi-spacing-small); + } + &.pi-list-item__padding--xs { + padding: var(--pi-spacing-x-small); + } + &.pi-list-item__padding--xxs { + padding: var(--pi-spacing-xx-small); + } + &.pi-list-item__padding--none { + padding: 0; + } + + // Border + &.pi-list-item__border--top { + border-top: 1px solid; + } + &.pi-list-item__border--bottom { + border-bottom: 1px solid; + } + + // Colors + &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not( + .pi-color__highlighted + ):not(.pi-color__white) { + @include listItemColor(grey); + } + // Colors + // Primary + &.pi-color__primary { + @include listItemColor(primary); + } + // Accent + &.pi-color__accent { + @include listItemColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include listItemColor(highlighted); + } + // Warn + &.pi-color__warn { + @include listItemColor(warn); + } + + &.pi-color__white { + @include listItemColorWhite; + } +} diff --git a/libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts b/libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts index ec43d51..487c600 100644 --- a/libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts +++ b/libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts @@ -1,137 +1,137 @@ -import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core'; - -import { - alignment, - borderType, - ComponentFamilyClass, - mode, - opacity, - padding, - styleType, -} from '../../../styles'; - +import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core'; + +import { + alignment, + borderType, + ComponentFamilyClass, + mode, + opacity, + padding, + styleType, +} from '../../../styles'; + @Directive({ selector: 'pi-list-item-left-icon', host: { class: 'pi-list-item-icon pi-list-item-icon__left' }, -}) -export class PiListItemLeftIconDirective {} - +}) +export class PiListItemLeftIconDirective {} + @Directive({ selector: 'pi-list-item-left-content', host: { class: 'pi-list-item-content pi-list-item-content__left' }, -}) -export class PiListItemLeftContentDirective {} - +}) +export class PiListItemLeftContentDirective {} + @Directive({ selector: 'pi-list-item-right-content', host: { class: 'pi-list-item-content pi-list-item-content__right' }, -}) -export class PiListItemRightContentDirective {} - +}) +export class PiListItemRightContentDirective {} + @Directive({ selector: 'pi-list-item-right-icon', host: { class: 'pi-list-item-icon pi-list-item-icon__right' }, -}) -export class PiListItemRightIconDirective {} - +}) +export class PiListItemRightIconDirective {} + @Component({ selector: 'pi-list-item', templateUrl: './list-item.component.html', styleUrls: ['./list-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class PiListItemComponent { - @HostBinding('class') get classes(): string { - return [ - 'pi-list-item', - ComponentFamilyClass.List, - this.borderTypeClass, - this.colorClass, - this.isActiveClass, - this.isClickableClass, - this.isDisabledClass, - this.isResponsiveClass, - this.paddingClass, - this.appearanceClass, - this.maxWidthClass, - this.isStrokedClass, - this.opacityClass, - this.alignmentClass, - this.modeClass, - ].join(' '); - } - - readonly alignment = input('center'); - readonly appearance = input<'default' | 'fill'>('default'); - readonly borderType = input.required(); - readonly color = input.required(); - readonly isActive = input(false); - readonly isClickable = input(false); - readonly isDisabled = input(false); - readonly isResponsive = input(false); - readonly isStroked = input(false); - readonly maxWidth = input<'full' | 'half' | 'third'>('full'); - readonly mode = input('light'); - readonly opacity = input(); - readonly padding = input('xl'); - - protected get alignmentClass(): string { +}) +export class PiListItemComponent { + @HostBinding('class') get classes(): string { + return [ + 'pi-list-item', + ComponentFamilyClass.List, + this.borderTypeClass, + this.colorClass, + this.isActiveClass, + this.isClickableClass, + this.isDisabledClass, + this.isResponsiveClass, + this.paddingClass, + this.appearanceClass, + this.maxWidthClass, + this.isStrokedClass, + this.opacityClass, + this.alignmentClass, + this.modeClass, + ].join(' '); + } + + readonly alignment = input('center'); + readonly appearance = input<'default' | 'fill'>('default'); + readonly borderType = input.required(); + readonly color = input.required(); + readonly isActive = input(false); + readonly isClickable = input(false); + readonly isDisabled = input(false); + readonly isResponsive = input(false); + readonly isStroked = input(false); + readonly maxWidth = input<'full' | 'half' | 'third'>('full'); + readonly mode = input('light'); + readonly opacity = input(); + readonly padding = input('xl'); + + protected get alignmentClass(): string { const alignmentValue = this.alignment(); - return alignmentValue ? `pi-list-item__align-items--${alignmentValue}` : ''; - } - - protected get borderTypeClass(): string { + return alignmentValue ? `pi-list-item__align-items--${alignmentValue}` : ''; + } + + protected get borderTypeClass(): string { const borderTypeValue = this.borderType(); - return borderTypeValue ? `pi-list-item__border--${borderTypeValue}` : ''; - } - - protected get colorClass(): string { + return borderTypeValue ? `pi-list-item__border--${borderTypeValue}` : ''; + } + + protected get colorClass(): string { const color = this.color(); - return color ? `pi-color__${color}` : ''; - } - - protected get maxWidthClass(): string | false { + return color ? `pi-color__${color}` : ''; + } + + protected get maxWidthClass(): string | false { const maxWidth = this.maxWidth(); - return maxWidth !== 'full' && `pi-list-item__max-width--${maxWidth}`; - } - - protected get isActiveClass(): string { - return this.isActive() ? 'is-active' : ''; - } - - protected get isClickableClass(): string { - return this.isClickable() ? 'is-clickable' : ''; - } - - protected get isDisabledClass(): string { - return this.isDisabled() ? 'is-disabled' : ''; - } - - protected get isResponsiveClass(): string { - return this.isResponsive() ? 'is-responsive' : ''; - } - - protected get isStrokedClass(): string { - return this.isStroked() && this.appearance() === 'fill' ? 'is-stroked' : ''; - } - - protected get paddingClass(): string { + return maxWidth !== 'full' && `pi-list-item__max-width--${maxWidth}`; + } + + protected get isActiveClass(): string { + return this.isActive() ? 'is-active' : ''; + } + + protected get isClickableClass(): string { + return this.isClickable() ? 'is-clickable' : ''; + } + + protected get isDisabledClass(): string { + return this.isDisabled() ? 'is-disabled' : ''; + } + + protected get isResponsiveClass(): string { + return this.isResponsive() ? 'is-responsive' : ''; + } + + protected get isStrokedClass(): string { + return this.isStroked() && this.appearance() === 'fill' ? 'is-stroked' : ''; + } + + protected get paddingClass(): string { const paddingValue = this.padding(); - return paddingValue ? `pi-list-item__padding--${paddingValue}` : ''; - } - - protected get appearanceClass(): string { + return paddingValue ? `pi-list-item__padding--${paddingValue}` : ''; + } + + protected get appearanceClass(): string { const appearance = this.appearance(); - return appearance !== 'default' ? `pi-list-item__appearance--${appearance}` : ''; - } - - protected get opacityClass(): string { + return appearance !== 'default' ? `pi-list-item__appearance--${appearance}` : ''; + } + + protected get opacityClass(): string { const opacityValue = this.opacity(); - return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; - } - - protected get modeClass(): string | undefined { + return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; + } + + protected get modeClass(): string | undefined { const modeValue = this.mode(); - return modeValue ? `pi-color__mode--${modeValue}` : ''; - } -} + return modeValue ? `pi-color__mode--${modeValue}` : ''; + } +} diff --git a/libs/ui/src/lib/ui/modal/entities/modal-configs.ts b/libs/ui/src/lib/ui/modal/entities/modal-configs.ts index 4afce4d..4458fbe 100644 --- a/libs/ui/src/lib/ui/modal/entities/modal-configs.ts +++ b/libs/ui/src/lib/ui/modal/entities/modal-configs.ts @@ -1,33 +1,33 @@ -import { MatDialogConfig } from '@angular/material/dialog'; - -// Modal -export enum ModalConfigKeys { - Small = 'small', - Medium = 'medium', - Full = 'full', -} - -export type ModalConfigs = { - [key in ModalConfigKeys]: MatDialogConfig; -}; - -export const modalConfigs: ModalConfigs = { - [ModalConfigKeys.Small]: { - maxHeight: '85vh', - minHeight: '50vh', - backdropClass: 'pi-backdrop', - panelClass: ['pi-modal__panel', 'pi-modal__panel--small'], - }, - [ModalConfigKeys.Medium]: { - maxHeight: '85vh', - minHeight: '66.66vh', - backdropClass: 'pi-backdrop', - panelClass: ['pi-modal__panel', 'pi-modal__panel--medium'], - }, - [ModalConfigKeys.Full]: { - maxHeight: '95vh', - maxWidth: '95vw', - backdropClass: 'pi-backdrop', - panelClass: ['pi-modal__panel', 'pi-modal__panel--full'], - }, -}; +import { MatDialogConfig } from '@angular/material/dialog'; + +// Modal +export enum ModalConfigKeys { + Small = 'small', + Medium = 'medium', + Full = 'full', +} + +export type ModalConfigs = { + [key in ModalConfigKeys]: MatDialogConfig; +}; + +export const modalConfigs: ModalConfigs = { + [ModalConfigKeys.Small]: { + maxHeight: '85vh', + minHeight: '50vh', + backdropClass: 'pi-backdrop', + panelClass: ['pi-modal__panel', 'pi-modal__panel--small'], + }, + [ModalConfigKeys.Medium]: { + maxHeight: '85vh', + minHeight: '66.66vh', + backdropClass: 'pi-backdrop', + panelClass: ['pi-modal__panel', 'pi-modal__panel--medium'], + }, + [ModalConfigKeys.Full]: { + maxHeight: '95vh', + maxWidth: '95vw', + backdropClass: 'pi-backdrop', + panelClass: ['pi-modal__panel', 'pi-modal__panel--full'], + }, +}; diff --git a/libs/ui/src/lib/ui/modal/entities/modal.model.ts b/libs/ui/src/lib/ui/modal/entities/modal.model.ts index 7d25109..4201284 100644 --- a/libs/ui/src/lib/ui/modal/entities/modal.model.ts +++ b/libs/ui/src/lib/ui/modal/entities/modal.model.ts @@ -1,35 +1,35 @@ -import { TemplateRef } from '@angular/core'; - -export enum ModalType { - DIALOG = 'dialog', - CUSTOM = 'custom', -} - -export enum ModalStyleType { - PRIMARY = 'primary', - WARN = 'warn', -} - -// TODO: remove question mark once it's going to be refacorized -interface ModalData { - title?: string; - subtitle?: string; -} - -export interface DialogModalData extends ModalData { - type: ModalType.DIALOG; - pathImg: string; - template?: TemplateRef; - description?: string; - label?: string; - buttonText: { - primaryAction?: string; - secondaryAction?: string; - }; - style?: ModalStyleType; -} - -export interface CustomModalData extends ModalData { - type: ModalType.CUSTOM; - template: TemplateRef; -} +import { TemplateRef } from '@angular/core'; + +export enum ModalType { + DIALOG = 'dialog', + CUSTOM = 'custom', +} + +export enum ModalStyleType { + PRIMARY = 'primary', + WARN = 'warn', +} + +// TODO: remove question mark once it's going to be refacorized +interface ModalData { + title?: string; + subtitle?: string; +} + +export interface DialogModalData extends ModalData { + type: ModalType.DIALOG; + pathImg: string; + template?: TemplateRef; + description?: string; + label?: string; + buttonText: { + primaryAction?: string; + secondaryAction?: string; + }; + style?: ModalStyleType; +} + +export interface CustomModalData extends ModalData { + type: ModalType.CUSTOM; + template: TemplateRef; +} diff --git a/libs/ui/src/lib/ui/modal/index.ts b/libs/ui/src/lib/ui/modal/index.ts index ffc43f5..a2f342c 100644 --- a/libs/ui/src/lib/ui/modal/index.ts +++ b/libs/ui/src/lib/ui/modal/index.ts @@ -1,9 +1,9 @@ -export * from './modal/modal.component'; - - - -export * from './entities/modal.model'; - -export * from './entities/modal-configs'; - -export * from './utils'; +export * from './modal/modal.component'; + + + +export * from './entities/modal.model'; + +export * from './entities/modal-configs'; + +export * from './utils'; diff --git a/libs/ui/src/lib/ui/modal/modal/modal.component.html b/libs/ui/src/lib/ui/modal/modal/modal.component.html index ad09f48..dd16b6a 100644 --- a/libs/ui/src/lib/ui/modal/modal/modal.component.html +++ b/libs/ui/src/lib/ui/modal/modal/modal.component.html @@ -1,59 +1,59 @@ -
- -

- {{ title }} - {{ subtitle }} -

- - - -
- - - - - -
- - - - {{ dialogModalData.label }} - - {{ - dialogModalData.description - }} - -
- -
-
- - - - - - - - -
- -
- +
+ +

+ {{ title }} + {{ subtitle }} +

+ + + +
+ + + + + +
+ + + + {{ dialogModalData.label }} + + {{ + dialogModalData.description + }} + +
+ +
+
+ + + + + + + + +
+ +
+ diff --git a/libs/ui/src/lib/ui/modal/modal/modal.component.scss b/libs/ui/src/lib/ui/modal/modal/modal.component.scss index 12a4d0e..4417917 100644 --- a/libs/ui/src/lib/ui/modal/modal/modal.component.scss +++ b/libs/ui/src/lib/ui/modal/modal/modal.component.scss @@ -1,147 +1,147 @@ -:host { - display: flex; - flex-direction: column; - gap: var(--pi-spacing-xx-small); - flex-grow: 1; - min-height: 50vh; - width: 100%; - - .pi-close-button { - display: flex; - justify-content: flex-end; - align-items: flex-start; - height: var(--pi-spacing-xxx-large); - } - - &.pi-modal { - // Dialog type - &.pi-modal__dialog { - justify-content: space-between; - - .pi-close-button { - width: 100%; - } - .pi-modal__main-content { - overflow-y: auto; - & > section { - text-align: center; - } - } - } - // Custom type - &.pi-modal__custom { - overflow: hidden; - & > header { - display: flex; - justify-content: space-between; - padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) var(--pi-spacing-xx-small); - & > span { - width: calc(100% - var(--pi-spacing-xxx-large)); - text-align: center; - margin-left: var(--pi-spacing-xxx-large); - } - h3 { - display: flex; - justify-content: space-between; - flex-direction: column; - - span { - font: { - size: var(--pi-font-size-small); - weight: 300; - } - } - } - .pi-close-button { - width: var(--pi-spacing-xxx-large); - } - } - .pi-modal__main-content { - &.pi-modal__main-content--custom-template { - height: 100%; - - & > *:first-child { - overflow-y: auto; - padding: 0 var(--pi-spacing-x-large); - } - } - } - } - } -} - -html { - &.is-mobile { - :host { - gap: 0; - // Center content - &.pi-modal { - // Dialog type - &:not(.pi-modal__custom) { - // Action wrapper - & > *:nth-child(n + 1) { - padding: var(--pi-spacing-large); - } - } - // Custom - &.pi-modal__custom { - h3 { - &:not(span) { - font: { - size: var(--pi-font-size-medium); - } - } - } - } - } - } - } - &.is-tablet { - :host { - // Center content - &.pi-modal { - // Dialog type - &:not(.pi-modal__custom) { - // Action wrapper - & > *:nth-child(n + 1) { - padding: var(--pi-spacing-x-large); - } - } - // Custom - &.pi-modal__custom { - h3 { - &:not(span) { - font: { - size: var(--pi-font-size-large); - } - } - } - } - } - } - } - &.is-desktop { - :host { - // Center content - &.pi-modal { - // Dialog type - &:not(.pi-modal__custom) { - // Action wrapper - & > *:nth-child(n + 1) { - padding: var(--pi-spacing-x-large); - } - } - // Custom - &.pi-modal__custom { - h3 { - &:not(span) { - font: { - size: var(--pi-font-size-large); - } - } - } - } - } - } - } -} +:host { + display: flex; + flex-direction: column; + gap: var(--pi-spacing-xx-small); + flex-grow: 1; + min-height: 50vh; + width: 100%; + + .pi-close-button { + display: flex; + justify-content: flex-end; + align-items: flex-start; + height: var(--pi-spacing-xxx-large); + } + + &.pi-modal { + // Dialog type + &.pi-modal__dialog { + justify-content: space-between; + + .pi-close-button { + width: 100%; + } + .pi-modal__main-content { + overflow-y: auto; + & > section { + text-align: center; + } + } + } + // Custom type + &.pi-modal__custom { + overflow: hidden; + & > header { + display: flex; + justify-content: space-between; + padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) var(--pi-spacing-xx-small); + & > span { + width: calc(100% - var(--pi-spacing-xxx-large)); + text-align: center; + margin-left: var(--pi-spacing-xxx-large); + } + h3 { + display: flex; + justify-content: space-between; + flex-direction: column; + + span { + font: { + size: var(--pi-font-size-small); + weight: 300; + } + } + } + .pi-close-button { + width: var(--pi-spacing-xxx-large); + } + } + .pi-modal__main-content { + &.pi-modal__main-content--custom-template { + height: 100%; + + & > *:first-child { + overflow-y: auto; + padding: 0 var(--pi-spacing-x-large); + } + } + } + } + } +} + +html { + &.is-mobile { + :host { + gap: 0; + // Center content + &.pi-modal { + // Dialog type + &:not(.pi-modal__custom) { + // Action wrapper + & > *:nth-child(n + 1) { + padding: var(--pi-spacing-large); + } + } + // Custom + &.pi-modal__custom { + h3 { + &:not(span) { + font: { + size: var(--pi-font-size-medium); + } + } + } + } + } + } + } + &.is-tablet { + :host { + // Center content + &.pi-modal { + // Dialog type + &:not(.pi-modal__custom) { + // Action wrapper + & > *:nth-child(n + 1) { + padding: var(--pi-spacing-x-large); + } + } + // Custom + &.pi-modal__custom { + h3 { + &:not(span) { + font: { + size: var(--pi-font-size-large); + } + } + } + } + } + } + } + &.is-desktop { + :host { + // Center content + &.pi-modal { + // Dialog type + &:not(.pi-modal__custom) { + // Action wrapper + & > *:nth-child(n + 1) { + padding: var(--pi-spacing-x-large); + } + } + // Custom + &.pi-modal__custom { + h3 { + &:not(span) { + font: { + size: var(--pi-font-size-large); + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/modal/modal/modal.component.ts b/libs/ui/src/lib/ui/modal/modal/modal.component.ts index 82461af..791ea6d 100644 --- a/libs/ui/src/lib/ui/modal/modal/modal.component.ts +++ b/libs/ui/src/lib/ui/modal/modal/modal.component.ts @@ -1,10 +1,10 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Inject } from '@angular/core'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { - CustomModalData, - DialogModalData, - ModalStyleType, - ModalType, +import { ChangeDetectionStrategy, Component, HostBinding, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { + CustomModalData, + DialogModalData, + ModalStyleType, + ModalType, } from '../entities/modal.model'; import { NgIf, NgTemplateOutlet } from '@angular/common'; import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive'; @@ -13,8 +13,8 @@ import { PiColorPrimaryDirective } from '../../../util/color/directives/colors.d import { PiCloseButtonComponent } from '../../button/close-button/close-button.component'; import { PiHeadlineComponent, PiHeadlineLabelContentDirective, PiHeadlineDescriptionContentDirective } from '../../image/headline/headline.component'; import { PiActionWrapper } from '../../wrapper/action/action.wrapper'; -import { PiGhostButtonDirective } from '../../button/button.directive'; - +import { PiGhostButtonDirective } from '../../button/button.directive'; + @Component({ selector: 'pi-modal', templateUrl: './modal.component.html', @@ -33,63 +33,63 @@ import { PiGhostButtonDirective } from '../../button/button.directive'; PiActionWrapper, PiGhostButtonDirective, ], -}) -export class PiModalComponent { - @HostBinding('class') - get classes(): string { - const typeClass = this.type && `pi-modal__${this.type}`; - const disableCloseClass = this.dialogRef.disableClose ? '' : 'pi-modal__is-closable'; - return ['pi-modal', typeClass, disableCloseClass].join(' '); - } - - styleType: ModalStyleType; - buttonColor: ModalStyleType; - - title: string | undefined; - subtitle: string | undefined; - - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: CustomModalData | DialogModalData - ) { - this.title = data.title; - this.subtitle = data.subtitle; - if (data.type === ModalType.DIALOG) { - this.styleType = data.style || ModalStyleType.PRIMARY; - this.buttonColor = - data.style === ModalStyleType.WARN ? ModalStyleType.WARN : ModalStyleType.PRIMARY; - } - } - - get type(): string { - return this.data.type; - } - - get dialogModalData() { - return this.data as DialogModalData; - } - - get customModalData() { - return this.data as CustomModalData; - } - - get buttonColorClass(): string | null { - return this.buttonColor ? `pi-button pi-color__${this.buttonColor}` : null; - } - - closeModal(): void { - this.dialogRef.close(); - } - - primaryAction(): void { - this.dialogRef.close(true); - } - - secondaryAction(): void { - this.dialogRef.close(false); - } - - instanceOfDialogModal(): boolean { - return this.type === ModalType.DIALOG; - } -} +}) +export class PiModalComponent { + @HostBinding('class') + get classes(): string { + const typeClass = this.type && `pi-modal__${this.type}`; + const disableCloseClass = this.dialogRef.disableClose ? '' : 'pi-modal__is-closable'; + return ['pi-modal', typeClass, disableCloseClass].join(' '); + } + + styleType!: ModalStyleType; + buttonColor!: ModalStyleType; + + title: string | undefined; + subtitle: string | undefined; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: CustomModalData | DialogModalData + ) { + this.title = data.title; + this.subtitle = data.subtitle; + if (data.type === ModalType.DIALOG) { + this.styleType = data.style || ModalStyleType.PRIMARY; + this.buttonColor = + data.style === ModalStyleType.WARN ? ModalStyleType.WARN : ModalStyleType.PRIMARY; + } + } + + get type(): string { + return this.data.type; + } + + get dialogModalData() { + return this.data as DialogModalData; + } + + get customModalData() { + return this.data as CustomModalData; + } + + get buttonColorClass(): string | null { + return this.buttonColor ? `pi-button pi-color__${this.buttonColor}` : null; + } + + closeModal(): void { + this.dialogRef.close(); + } + + primaryAction(): void { + this.dialogRef.close(true); + } + + secondaryAction(): void { + this.dialogRef.close(false); + } + + instanceOfDialogModal(): boolean { + return this.type === ModalType.DIALOG; + } +} diff --git a/libs/ui/src/lib/ui/modal/utils.ts b/libs/ui/src/lib/ui/modal/utils.ts index e1ab407..fc8fb2e 100644 --- a/libs/ui/src/lib/ui/modal/utils.ts +++ b/libs/ui/src/lib/ui/modal/utils.ts @@ -1,16 +1,16 @@ -import { MatDialogConfig } from '@angular/material/dialog'; -import { ModalConfigKeys, modalConfigs } from './entities/modal-configs'; -import { CustomModalData, DialogModalData } from './entities/modal.model'; - -// Modal config -export function getModalConfigs( - key: ModalConfigKeys, - data?: D, - disableClose?: boolean -): MatDialogConfig { - return { - ...(disableClose && { disableClose }), - ...modalConfigs[key], - ...(data && { data }), - }; -} +import { MatDialogConfig } from '@angular/material/dialog'; +import { ModalConfigKeys, modalConfigs } from './entities/modal-configs'; +import { CustomModalData, DialogModalData } from './entities/modal.model'; + +// Modal config +export function getModalConfigs( + key: ModalConfigKeys, + data?: D, + disableClose?: boolean +): MatDialogConfig { + return { + ...(disableClose && { disableClose }), + ...modalConfigs[key], + ...(data && { data }), + }; +} diff --git a/libs/ui/src/lib/ui/note/entities/note.model.ts b/libs/ui/src/lib/ui/note/entities/note.model.ts index 99565e3..1aad738 100644 --- a/libs/ui/src/lib/ui/note/entities/note.model.ts +++ b/libs/ui/src/lib/ui/note/entities/note.model.ts @@ -1,6 +1,6 @@ -import { status } from '../../../util/status'; - -export interface NoteStatus { - statusType: status; - icon: string; -} +import { status } from '../../../util/status'; + +export interface NoteStatus { + statusType: status; + icon: string; +} diff --git a/libs/ui/src/lib/ui/note/index.ts b/libs/ui/src/lib/ui/note/index.ts index 809cfbf..1bb734b 100644 --- a/libs/ui/src/lib/ui/note/index.ts +++ b/libs/ui/src/lib/ui/note/index.ts @@ -1,3 +1,3 @@ - - -export * from './note/note.component'; + + +export * from './note/note.component'; diff --git a/libs/ui/src/lib/ui/note/infrastructure/note-data.service.ts b/libs/ui/src/lib/ui/note/infrastructure/note-data.service.ts index 81aafbf..647f77f 100644 --- a/libs/ui/src/lib/ui/note/infrastructure/note-data.service.ts +++ b/libs/ui/src/lib/ui/note/infrastructure/note-data.service.ts @@ -1,29 +1,29 @@ -// Angular -import { Injectable } from '@angular/core'; -import { NoteStatus } from '../entities/note.model'; - -@Injectable({ - providedIn: 'root', -}) -export class NoteDataService { - getNoteStatusData(): Array { - return [ - { - statusType: 'success', - icon: 'check-rounded', - }, - { - statusType: 'error', - icon: 'close-rounded', - }, - { - statusType: 'pending', - icon: 'exclamation', - }, - { - statusType: 'info', - icon: 'info', - }, - ]; - } -} +// Angular +import { Injectable } from '@angular/core'; +import { NoteStatus } from '../entities/note.model'; + +@Injectable({ + providedIn: 'root', +}) +export class NoteDataService { + getNoteStatusData(): Array { + return [ + { + statusType: 'success', + icon: 'check-rounded', + }, + { + statusType: 'error', + icon: 'close-rounded', + }, + { + statusType: 'pending', + icon: 'exclamation', + }, + { + statusType: 'info', + icon: 'info', + }, + ]; + } +} diff --git a/libs/ui/src/lib/ui/note/note/note.component.html b/libs/ui/src/lib/ui/note/note/note.component.html index e0c3eb5..b5db179 100644 --- a/libs/ui/src/lib/ui/note/note/note.component.html +++ b/libs/ui/src/lib/ui/note/note/note.component.html @@ -1,7 +1,7 @@ -
- -
{{ title() }}
- {{ text() }} - -
- +
+ +
{{ title() }}
+ {{ text() }} + +
+ diff --git a/libs/ui/src/lib/ui/note/note/note.component.scss b/libs/ui/src/lib/ui/note/note/note.component.scss index 302ea42..1986978 100644 --- a/libs/ui/src/lib/ui/note/note/note.component.scss +++ b/libs/ui/src/lib/ui/note/note/note.component.scss @@ -1,279 +1,279 @@ -@mixin noteAlignItems($align-items) { - align-items: $align-items; - & > div { - align-items: $align-items; - } -} - -@mixin noteJustifyContent($justify-content) { - &:not(.pi-note__flex-direction--column) { - justify-content: $justify-content; - } -} - -@mixin noteGap($gap) { - gap: var(--pi-spacing-#{$gap}); -} - -@mixin lightFillNoteColor($background-color, $border-color, $color) { - &.pi-note__mode--light { - background-color: var(--pi-color-#{$background-color}); - border-color: var(--pi-color-#{$border-color}); - color: var(--pi-color-#{$color}); - & > *:nth-child(n + 1) { - color: var(--pi-color-#{$color}); - } - } -} - -:host { - display: flex; - width: 100%; - transition: var(--pi-animation); - - & > div { - display: flex; - gap: var(--pi-spacing-xx-small); - & > span { - display: flex; - line-height: 1; - } - } - - small { - display: block; - line-height: 1.2; - } - - .mat-icon { - display: flex; - align-items: center; - min-height: var(--pi-spacing-xx-large); - min-width: var(--pi-spacing-xx-large); - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - } - - // Alignment - // flex start - &.pi-note__align-items--flex-start { - @include noteAlignItems(flex-start); - } - // center - &.pi-note__align-items--center { - @include noteAlignItems(center); - } - // flex end - &.pi-note__align-items--flex-end { - @include noteAlignItems(flex-end); - } - - // Alignment - - // center - &.pi-note__justify-content--center { - @include noteJustifyContent(center); - } - - // space-between - &.pi-note__justify-content--space-between { - @include noteJustifyContent(space-between); - } - - // Gap - // 0.25rem - 4px - &.pi-note__gap--xxxs { - @include noteGap(xxx-small); - } - // 0.5rem - 8px - &.pi-note__gap--xxs { - @include noteGap(xx-small); - } - // 0.625rem - 10px - &.pi-note__gap--xs { - @include noteGap(x-small); - } - // 0.75rem - 12px - &.pi-note__gap--s { - @include noteGap(small); - } - // 1rem - 16px - &.pi-note__gap--m { - @include noteGap(medium); - } - // 1.25rem - 20px - &.pi-note__gap--l { - @include noteGap(large); - } - // 1.5rem - 24px - &.pi-note__gap--xl { - @include noteGap(x-large); - } - // 2rem - 32px - &.pi-note__gap--xxl { - @include noteGap(xx-large); - } - // 2.5rem - 40px - &.pi-note__gap--xxxl { - @include noteGap(xxx-large); - } - // 3.375rem - 54px - &.pi-note__gap--xxxxl { - @include noteGap(xxxx-large); - } - // Flex direction - &.pi-note__flex-direction--column { - flex-direction: column; - & > div { - flex-direction: column; - justify-content: center; - align-items: center; - gap: var(--pi-spacing-medium); - text-align: center; - & > .mat-icon { - height: var(--pi-spacing-xxx-large); - width: var(--pi-spacing-xxx-large); - } - } - } - // Note type - // Status - &.pi-note__status { - // Fill - &.pi-note__appearance--fill { - padding: var(--pi-spacing-x-small) var(--pi-spacing-medium); - border: 1px solid; - border-radius: var(--pi-border-radius-medium); - // Successful - &.pi-note__status--success { - @include lightFillNoteColor(success-50, success-100, success); - } - // Error - &.pi-note__status--error { - @include lightFillNoteColor(warn-25, warn-50, warn); - } - // Pending - &.pi-note__status--pending { - @include lightFillNoteColor(accent-50, accent-100, accent); - &.pi-note__mode--dark { - background-image: linear-gradient(135deg, #f6bc63 0%, #db971d 51.21%, #f6bc63 200%); - background-size: 200% 100%; - border-color: var(--pi-color-accent-200); - color: var(--pi-color-white); - & > *:nth-child(n + 1) { - color: var(--pi-color-white); - } - &:hover { - background-position: right center; - } - } - } - // Info - &.pi-note__status--info { - @include lightFillNoteColor(primary-50, primary-100, primary); - } - } - - // Ghost - &.pi-note__appearance--ghost { - // Successful - &.pi-note__status--success { - &.pi-note__mode--light { - color: var(--pi-color-success); - } - } - // Error - &.pi-note__status--error { - &.pi-note__mode--light { - color: var(--pi-color-warn); - } - } - // Pending - &.pi-note__status--pending { - &.pi-note__mode--light { - color: var(--pi-color-accent); - } - } - // Info - &.pi-note__status--info { - &.pi-note__mode--light { - color: var(--pi-color-primary); - } - } - } - } - // Simple - &.pi-note__simple { - .mat-icon { - display: none; - } - padding: var(--pi-spacing-x-large); - background-color: var(--pi-color-primary-25); - border-radius: var(--pi-border-radius-large); - } -} -html { - // Mobile - &.is-mobile { - :host { - &.pi-note__status { - // Fill - &.pi-note__appearance--fill { - & > div { - .mat-icon { - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - } - } - } - // Ghost - &.pi-note__appearance--ghost { - & > div { - .mat-icon { - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - } - } - } - - // responsive - &.is-responsive { - flex-direction: column; - gap: var(--pi-spacing-x-small); - } - } - } - } - - // Desktop & Tablet - &:not(.is-mobile) { - :host { - &.pi-note__status { - &:not(.pi-note__flex-direction--column) { - // Fill - &.pi-note__appearance--fill { - & > div { - .mat-icon { - height: var(--pi-spacing-x-large); - min-height: var(--pi-spacing-x-large); - width: var(--pi-spacing-x-large); - min-width: var(--pi-spacing-x-large); - } - } - } - // Ghost - &.pi-note__appearance--ghost { - & > div { - .mat-icon { - height: var(--pi-spacing-large); - min-height: var(--pi-spacing-large); - width: var(--pi-spacing-large); - min-width: var(--pi-spacing-large); - } - } - } - } - } - } - } -} +@mixin noteAlignItems($align-items) { + align-items: $align-items; + & > div { + align-items: $align-items; + } +} + +@mixin noteJustifyContent($justify-content) { + &:not(.pi-note__flex-direction--column) { + justify-content: $justify-content; + } +} + +@mixin noteGap($gap) { + gap: var(--pi-spacing-#{$gap}); +} + +@mixin lightFillNoteColor($background-color, $border-color, $color) { + &.pi-note__mode--light { + background-color: var(--pi-color-#{$background-color}); + border-color: var(--pi-color-#{$border-color}); + color: var(--pi-color-#{$color}); + & > *:nth-child(n + 1) { + color: var(--pi-color-#{$color}); + } + } +} + +:host { + display: flex; + width: 100%; + transition: var(--pi-animation); + + & > div { + display: flex; + gap: var(--pi-spacing-xx-small); + & > span { + display: flex; + line-height: 1; + } + } + + small { + display: block; + line-height: 1.2; + } + + .mat-icon { + display: flex; + align-items: center; + min-height: var(--pi-spacing-xx-large); + min-width: var(--pi-spacing-xx-large); + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + } + + // Alignment + // flex start + &.pi-note__align-items--flex-start { + @include noteAlignItems(flex-start); + } + // center + &.pi-note__align-items--center { + @include noteAlignItems(center); + } + // flex end + &.pi-note__align-items--flex-end { + @include noteAlignItems(flex-end); + } + + // Alignment + + // center + &.pi-note__justify-content--center { + @include noteJustifyContent(center); + } + + // space-between + &.pi-note__justify-content--space-between { + @include noteJustifyContent(space-between); + } + + // Gap + // 0.25rem - 4px + &.pi-note__gap--xxxs { + @include noteGap(xxx-small); + } + // 0.5rem - 8px + &.pi-note__gap--xxs { + @include noteGap(xx-small); + } + // 0.625rem - 10px + &.pi-note__gap--xs { + @include noteGap(x-small); + } + // 0.75rem - 12px + &.pi-note__gap--s { + @include noteGap(small); + } + // 1rem - 16px + &.pi-note__gap--m { + @include noteGap(medium); + } + // 1.25rem - 20px + &.pi-note__gap--l { + @include noteGap(large); + } + // 1.5rem - 24px + &.pi-note__gap--xl { + @include noteGap(x-large); + } + // 2rem - 32px + &.pi-note__gap--xxl { + @include noteGap(xx-large); + } + // 2.5rem - 40px + &.pi-note__gap--xxxl { + @include noteGap(xxx-large); + } + // 3.375rem - 54px + &.pi-note__gap--xxxxl { + @include noteGap(xxxx-large); + } + // Flex direction + &.pi-note__flex-direction--column { + flex-direction: column; + & > div { + flex-direction: column; + justify-content: center; + align-items: center; + gap: var(--pi-spacing-medium); + text-align: center; + & > .mat-icon { + height: var(--pi-spacing-xxx-large); + width: var(--pi-spacing-xxx-large); + } + } + } + // Note type + // Status + &.pi-note__status { + // Fill + &.pi-note__appearance--fill { + padding: var(--pi-spacing-x-small) var(--pi-spacing-medium); + border: 1px solid; + border-radius: var(--pi-border-radius-medium); + // Successful + &.pi-note__status--success { + @include lightFillNoteColor(success-50, success-100, success); + } + // Error + &.pi-note__status--error { + @include lightFillNoteColor(warn-25, warn-50, warn); + } + // Pending + &.pi-note__status--pending { + @include lightFillNoteColor(accent-50, accent-100, accent); + &.pi-note__mode--dark { + background-image: linear-gradient(135deg, #f6bc63 0%, #db971d 51.21%, #f6bc63 200%); + background-size: 200% 100%; + border-color: var(--pi-color-accent-200); + color: var(--pi-color-white); + & > *:nth-child(n + 1) { + color: var(--pi-color-white); + } + &:hover { + background-position: right center; + } + } + } + // Info + &.pi-note__status--info { + @include lightFillNoteColor(primary-50, primary-100, primary); + } + } + + // Ghost + &.pi-note__appearance--ghost { + // Successful + &.pi-note__status--success { + &.pi-note__mode--light { + color: var(--pi-color-success); + } + } + // Error + &.pi-note__status--error { + &.pi-note__mode--light { + color: var(--pi-color-warn); + } + } + // Pending + &.pi-note__status--pending { + &.pi-note__mode--light { + color: var(--pi-color-accent); + } + } + // Info + &.pi-note__status--info { + &.pi-note__mode--light { + color: var(--pi-color-primary); + } + } + } + } + // Simple + &.pi-note__simple { + .mat-icon { + display: none; + } + padding: var(--pi-spacing-x-large); + background-color: var(--pi-color-primary-25); + border-radius: var(--pi-border-radius-large); + } +} +html { + // Mobile + &.is-mobile { + :host { + &.pi-note__status { + // Fill + &.pi-note__appearance--fill { + & > div { + .mat-icon { + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + } + } + } + // Ghost + &.pi-note__appearance--ghost { + & > div { + .mat-icon { + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + } + } + } + + // responsive + &.is-responsive { + flex-direction: column; + gap: var(--pi-spacing-x-small); + } + } + } + } + + // Desktop & Tablet + &:not(.is-mobile) { + :host { + &.pi-note__status { + &:not(.pi-note__flex-direction--column) { + // Fill + &.pi-note__appearance--fill { + & > div { + .mat-icon { + height: var(--pi-spacing-x-large); + min-height: var(--pi-spacing-x-large); + width: var(--pi-spacing-x-large); + min-width: var(--pi-spacing-x-large); + } + } + } + // Ghost + &.pi-note__appearance--ghost { + & > div { + .mat-icon { + height: var(--pi-spacing-large); + min-height: var(--pi-spacing-large); + width: var(--pi-spacing-large); + min-width: var(--pi-spacing-large); + } + } + } + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/note/note/note.component.ts b/libs/ui/src/lib/ui/note/note/note.component.ts index 6baa88e..88bb761 100644 --- a/libs/ui/src/lib/ui/note/note/note.component.ts +++ b/libs/ui/src/lib/ui/note/note/note.component.ts @@ -5,28 +5,28 @@ import { HostBinding, OnInit, input -} from '@angular/core'; -import { NoteDataService } from '../infrastructure/note-data.service'; -import { NoteStatus } from '../entities/note.model'; - -import { status } from '../../../util/status'; +} from '@angular/core'; +import { NoteDataService } from '../infrastructure/note-data.service'; +import { NoteStatus } from '../entities/note.model'; + +import { status } from '../../../util/status'; import { gap, alignment } from '../../../styles'; import { MatIcon } from '@angular/material/icon'; import { NgIf } from '@angular/common'; -import { PiTextSmallDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive'; - +import { PiTextSmallDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive'; + @Directive({ selector: 'pi-note-label-content', host: { class: 'pi-note-content pi-note-content__label' }, -}) -export class PiNoteLabelContentDirective {} - +}) +export class PiNoteLabelContentDirective {} + @Directive({ selector: 'pi-note-action-content', host: { class: 'pi-note-content pi-note-content__action' }, -}) -export class PiNoteActionContentDirective {} - +}) +export class PiNoteActionContentDirective {} + @Component({ selector: 'pi-note', templateUrl: './note.component.html', @@ -38,75 +38,75 @@ export class PiNoteActionContentDirective {} PiTextSmallDirective, PiTextXSmallDirective, ], -}) -export class PiNoteComponent implements OnInit { - @HostBinding('class') get classes(): string { +}) +export class PiNoteComponent implements OnInit { + @HostBinding('class') get classes(): string { const alignmentValue = this.alignment(); - const alignmentClass = alignmentValue && `pi-note__align-items--${alignmentValue}`; + const alignmentClass = alignmentValue && `pi-note__align-items--${alignmentValue}`; const flexDirection = this.flexDirection(); - const flexDirectionClass = - flexDirection && `pi-note__flex-direction--${flexDirection}`; + const flexDirectionClass = + flexDirection && `pi-note__flex-direction--${flexDirection}`; const justify = this.justify(); - const justifyContentClass = justify && `pi-note__justify-content--${justify}`; + const justifyContentClass = justify && `pi-note__justify-content--${justify}`; const gapValue = this.gap(); - const gapClass = gapValue && `pi-note__gap--${gapValue}`; - const isResponsiveClass = this.isResponsive() && 'is-responsive'; - const isStickyClass = this.isSticky() && 'is-sticky'; + const gapClass = gapValue && `pi-note__gap--${gapValue}`; + const isResponsiveClass = this.isResponsive() && 'is-responsive'; + const isStickyClass = this.isSticky() && 'is-sticky'; const mode = this.mode(); - const modeClass = mode && `pi-note__mode--${mode}`; + const modeClass = mode && `pi-note__mode--${mode}`; const position = this.position(); - const positionClass = position && `pi-note__position--${position}`; + const positionClass = position && `pi-note__position--${position}`; const statusValue = this.status(); - const statusClass = statusValue && `pi-note__status--${statusValue}`; + const statusClass = statusValue && `pi-note__status--${statusValue}`; const appearance = this.appearance(); - const appearanceClass = appearance && `pi-note__appearance--${appearance}`; + const appearanceClass = appearance && `pi-note__appearance--${appearance}`; const type = this.type(); - const typeClass = type && `pi-note__${type}`; - return [ - 'pi-note', - alignmentClass, - flexDirectionClass, - gapClass, - isResponsiveClass, - isStickyClass, - modeClass, - positionClass, - statusClass, - appearanceClass, - typeClass, - justifyContentClass, - ].join(' '); - } - - // Content - readonly title = input.required(); - readonly text = input.required(); - - // Behavior - readonly status = input.required(); - - // Skin - readonly alignment = input('center'); - readonly justify = input<'center' | 'space-between'>('space-between'); - readonly flexDirection = input<'row' | 'column'>('row'); - readonly gap = input.required(); - readonly isResponsive = input(false); - readonly isSticky = input(false); - readonly mode = input<'dark' | 'light'>('light'); - readonly position = input<'top' | 'bottom'>('bottom'); - readonly appearance = input<'fill' | 'ghost'>('fill'); - readonly type = input<'status' | 'simple'>('status'); - - noteStatus!: NoteStatus; - - constructor(private noteDataService: NoteDataService) {} - - ngOnInit(): void { - this.noteStatus = this.getNoteStatus(); - } - - getNoteStatus(): NoteStatus | undefined { - const noteStatusOptions = this.noteDataService.getNoteStatusData(); - return noteStatusOptions.find((noteStatus) => this.status() === noteStatus.statusType); - } -} + const typeClass = type && `pi-note__${type}`; + return [ + 'pi-note', + alignmentClass, + flexDirectionClass, + gapClass, + isResponsiveClass, + isStickyClass, + modeClass, + positionClass, + statusClass, + appearanceClass, + typeClass, + justifyContentClass, + ].join(' '); + } + + // Content + readonly title = input.required(); + readonly text = input.required(); + + // Behavior + readonly status = input.required(); + + // Skin + readonly alignment = input('center'); + readonly justify = input<'center' | 'space-between'>('space-between'); + readonly flexDirection = input<'row' | 'column'>('row'); + readonly gap = input.required(); + readonly isResponsive = input(false); + readonly isSticky = input(false); + readonly mode = input<'dark' | 'light'>('light'); + readonly position = input<'top' | 'bottom'>('bottom'); + readonly appearance = input<'fill' | 'ghost'>('fill'); + readonly type = input<'status' | 'simple'>('status'); + + noteStatus?: NoteStatus; + + constructor(private noteDataService: NoteDataService) {} + + ngOnInit(): void { + this.noteStatus = this.getNoteStatus(); + } + + getNoteStatus(): NoteStatus | undefined { + const noteStatusOptions = this.noteDataService.getNoteStatusData(); + return noteStatusOptions.find((noteStatus) => this.status() === noteStatus.statusType); + } +} diff --git a/libs/ui/src/lib/ui/notification/entities/notification.data.ts b/libs/ui/src/lib/ui/notification/entities/notification.data.ts index dfb08ea..3d744e4 100644 --- a/libs/ui/src/lib/ui/notification/entities/notification.data.ts +++ b/libs/ui/src/lib/ui/notification/entities/notification.data.ts @@ -1,27 +1,27 @@ -import { MatSnackBarConfig } from '@angular/material/snack-bar'; - -// Notification -export enum NotificationConfigKeys { - Success = 'success', - Error = 'error', - Info = 'info', -} - -export type NotificationConfigs = { - [key in NotificationConfigKeys]: MatSnackBarConfig; -}; - -export const notificationConfigs: NotificationConfigs = { - [NotificationConfigKeys.Success]: { - duration: 3000, - panelClass: ['pi-snack-bar', 'pi-snack-bar__success'], - }, - [NotificationConfigKeys.Error]: { - duration: 3000, - panelClass: ['pi-snack-bar', 'pi-snack-bar__error'], - }, - [NotificationConfigKeys.Info]: { - duration: 3000, - panelClass: ['pi-snack-bar', 'pi-snack-bar__info'], - }, -}; +import { MatSnackBarConfig } from '@angular/material/snack-bar'; + +// Notification +export enum NotificationConfigKeys { + Success = 'success', + Error = 'error', + Info = 'info', +} + +export type NotificationConfigs = { + [key in NotificationConfigKeys]: MatSnackBarConfig; +}; + +export const notificationConfigs: NotificationConfigs = { + [NotificationConfigKeys.Success]: { + duration: 3000, + panelClass: ['pi-snack-bar', 'pi-snack-bar__success'], + }, + [NotificationConfigKeys.Error]: { + duration: 3000, + panelClass: ['pi-snack-bar', 'pi-snack-bar__error'], + }, + [NotificationConfigKeys.Info]: { + duration: 3000, + panelClass: ['pi-snack-bar', 'pi-snack-bar__info'], + }, +}; diff --git a/libs/ui/src/lib/ui/notification/entities/notification.model.ts b/libs/ui/src/lib/ui/notification/entities/notification.model.ts index 27d1467..2896fe1 100644 --- a/libs/ui/src/lib/ui/notification/entities/notification.model.ts +++ b/libs/ui/src/lib/ui/notification/entities/notification.model.ts @@ -1,13 +1,13 @@ -interface BaseNotificationData { - message: string; - type: 'success' | 'info' | 'error'; - dismissible: boolean; -} - -export interface ButtonNotificationData extends BaseNotificationData { - buttonText: string; -} - -export interface IconNotificationData extends BaseNotificationData { - icon: string; -} +interface BaseNotificationData { + message: string; + type: 'success' | 'info' | 'error'; + dismissible: boolean; +} + +export interface ButtonNotificationData extends BaseNotificationData { + buttonText: string; +} + +export interface IconNotificationData extends BaseNotificationData { + icon: string; +} diff --git a/libs/ui/src/lib/ui/notification/index.ts b/libs/ui/src/lib/ui/notification/index.ts index 6751f1d..9f91b4b 100644 --- a/libs/ui/src/lib/ui/notification/index.ts +++ b/libs/ui/src/lib/ui/notification/index.ts @@ -1,19 +1,19 @@ -// Entities -export * from './entities/notification.model'; -export * from './entities/notification.data'; - -// Services -export * from './infrastructure/notification.service'; - -// State -export * from './state/notification.actions'; -export * from './state/notification.effects'; - -// Utils -export * from './utils'; - -// Module - - -// Components -export * from './snack-bar/snack-bar.component'; +// Entities +export * from './entities/notification.model'; +export * from './entities/notification.data'; + +// Services +export * from './infrastructure/notification.service'; + +// State +export * from './state/notification.actions'; +export * from './state/notification.effects'; + +// Utils +export * from './utils'; + +// Module + + +// Components +export * from './snack-bar/snack-bar.component'; diff --git a/libs/ui/src/lib/ui/notification/infrastructure/notification.service.ts b/libs/ui/src/lib/ui/notification/infrastructure/notification.service.ts index a365eb3..3bbd35d 100644 --- a/libs/ui/src/lib/ui/notification/infrastructure/notification.service.ts +++ b/libs/ui/src/lib/ui/notification/infrastructure/notification.service.ts @@ -1,55 +1,55 @@ -import { Injectable } from '@angular/core'; - -// Material -import { MatSnackBar } from '@angular/material/snack-bar'; - -// Component -import { PiSnackBarComponent } from '../snack-bar/snack-bar.component'; - -@Injectable({ - providedIn: 'root', -}) -export class NotificationService { - constructor(private _snackBar: MatSnackBar) {} - - success(message: string, description?: string): void { - this._snackBar.openFromComponent(PiSnackBarComponent, { - data: { - message, - description, - icon: 'check-rounded', - type: 'success', - dismissible: false, - }, - duration: 3000, - panelClass: ['pi-snackbar', 'pi-snackbar__success'], - }); - } - - error(message: string, description?: string): void { - this._snackBar.openFromComponent(PiSnackBarComponent, { - data: { - message, - description, - icon: 'close-rounded', - type: 'error', - dismissible: false, - }, - duration: 3000, - panelClass: ['pi-snackbar', 'pi-snackbar__error'], - }); - } - - info(message: string, description?: string): void { - this._snackBar.openFromComponent(PiSnackBarComponent, { - data: { - message, - description, - type: 'info-rounded', - dismissible: false, - }, - duration: 3000, - panelClass: ['pi-snackbar', 'pi-snackbar__info'], - }); - } -} +import { Injectable } from '@angular/core'; + +// Material +import { MatSnackBar } from '@angular/material/snack-bar'; + +// Component +import { PiSnackBarComponent } from '../snack-bar/snack-bar.component'; + +@Injectable({ + providedIn: 'root', +}) +export class NotificationService { + constructor(private _snackBar: MatSnackBar) {} + + success(message: string, description?: string): void { + this._snackBar.openFromComponent(PiSnackBarComponent, { + data: { + message, + description, + icon: 'check-rounded', + type: 'success', + dismissible: false, + }, + duration: 3000, + panelClass: ['pi-snackbar', 'pi-snackbar__success'], + }); + } + + error(message: string, description?: string): void { + this._snackBar.openFromComponent(PiSnackBarComponent, { + data: { + message, + description, + icon: 'close-rounded', + type: 'error', + dismissible: false, + }, + duration: 3000, + panelClass: ['pi-snackbar', 'pi-snackbar__error'], + }); + } + + info(message: string, description?: string): void { + this._snackBar.openFromComponent(PiSnackBarComponent, { + data: { + message, + description, + type: 'info-rounded', + dismissible: false, + }, + duration: 3000, + panelClass: ['pi-snackbar', 'pi-snackbar__info'], + }); + } +} diff --git a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.html b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.html index 3addde5..bfd01ea 100644 --- a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.html +++ b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.html @@ -1,12 +1,12 @@ -
- -
-
{{ message() }}
- {{ description() }} -
-
- - - +
+ +
+
{{ message() }}
+ {{ description() }} +
+
+ + + diff --git a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.scss b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.scss index 87d6e67..e783971 100644 --- a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.scss +++ b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.scss @@ -1,58 +1,58 @@ -@mixin stateColor($color) { - color: $color; - h5 { - color: $color; - } - span { - color: var(--pi-color-grey); - } - .pi-button { - color: $color; - } -} - -:host { - display: flex; - justify-content: space-between; - align-items: center; - gap: var(--pi-spacing-x-small); - margin: auto; - border-radius: var(--pi-border-radius-large); - text-align: center; - div { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - } - &.pi-snackbar__type--info { - color: var(--pi-color-primary); - background-color: var(--pi-color-primary-25); - border-color: var(--pi-color-primary-50); - } - &.pi-snackbar__type--error { - color: var(--pi-color-warn); - background-color: var(--pi-color-warn-25); - border-color: var(--pi-color-warn-50); - } - &.pi-snackbar__type--success { - color: var(--pi-color-success); - background-color: var(--pi-color-success-25); - border-color: var(--pi-color-success-50); - } - - & > section { - display: flex; - align-items: center; - gap: var(--pi-spacing-medium); - } - &.pi-snackbar__type--error { - @include stateColor(var(--pi-color-warn)); - } - &.pi-snackbar__type--success { - @include stateColor(var(--pi-color-success)); - } - &.pi-snackbar__type--info { - @include stateColor(var(--pi-color-primary)); - } -} +@mixin stateColor($color) { + color: $color; + h5 { + color: $color; + } + span { + color: var(--pi-color-grey); + } + .pi-button { + color: $color; + } +} + +:host { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--pi-spacing-x-small); + margin: auto; + border-radius: var(--pi-border-radius-large); + text-align: center; + div { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } + &.pi-snackbar__type--info { + color: var(--pi-color-primary); + background-color: var(--pi-color-primary-25); + border-color: var(--pi-color-primary-50); + } + &.pi-snackbar__type--error { + color: var(--pi-color-warn); + background-color: var(--pi-color-warn-25); + border-color: var(--pi-color-warn-50); + } + &.pi-snackbar__type--success { + color: var(--pi-color-success); + background-color: var(--pi-color-success-25); + border-color: var(--pi-color-success-50); + } + + & > section { + display: flex; + align-items: center; + gap: var(--pi-spacing-medium); + } + &.pi-snackbar__type--error { + @include stateColor(var(--pi-color-warn)); + } + &.pi-snackbar__type--success { + @include stateColor(var(--pi-color-success)); + } + &.pi-snackbar__type--info { + @include stateColor(var(--pi-color-primary)); + } +} diff --git a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts index 5cf4132..c6a2776 100644 --- a/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts +++ b/libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts @@ -1,13 +1,13 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Inject, Optional, forwardRef, input } from '@angular/core'; -import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; +import { ChangeDetectionStrategy, Component, HostBinding, Inject, Optional, forwardRef, input } from '@angular/core'; +import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; import { styleType } from '../../../styles'; import { NgIf } from '@angular/common'; import { PiIconComponent } from '../../icon/icon/icon.component'; import { PiMediumButtonDirective, PiGhostButtonDirective } from '../../button/button.directive'; import { PiTextWeightMediumDirective } from '../../text/directives/text-weights.directive'; import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive'; - - + + @Component({ selector: 'pi-snack-bar', templateUrl: './snack-bar.component.html', @@ -23,60 +23,60 @@ import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directi PiGhostButtonDirective, forwardRef(() => PiSnackBarComponent) ], -}) -export class PiSnackBarComponent { - @HostBinding('class') className = 'pi-snackbar'; - - @HostBinding('class') get classes(): string { +}) +export class PiSnackBarComponent { + @HostBinding('class') className = 'pi-snackbar'; + + @HostBinding('class') get classes(): string { const type = this.type(); - const TypeClass = type && `pi-snackbar__type--${type}`; - const HasIconClass = this.icon() && 'pi-snackbar__has--icon'; - const IsDimsissibleClass = this.icon() && 'pi-snackbar__is--dismissible'; - - return ['pi-snackbar', TypeClass, HasIconClass, IsDimsissibleClass].join(' '); - } - - readonly message = input(); - - readonly text = input(); - readonly icon = input(); - readonly type = input<'success' | 'error' | 'info'>('success'); - readonly dismissible = input(false); - readonly description = input(); - - iconColor!: styleType; - buttonColor!: styleType; - - /** The instance of the component making up the content of the snack bar. */ - private readonly snackBarRef: MatSnackBarRef; - - constructor(@Optional() @Inject(MAT_SNACK_BAR_DATA) public data: any) { - if (data) { - this.message = data.message; - this.icon = data.icon; - this.type = data.type; - this.dismissible = data.dismissible; - this.description = data.description; - if (this.icon()) { - switch (data.type) { - case 'error': - this.iconColor = 'warn'; - break; - case 'success': - this.iconColor = 'success'; - break; - case 'info': - this.iconColor = 'primary'; - break; - } - } - } - } - - /** Dismisses the snack bar. */ - dismiss(): void { - if (this.snackBarRef) { - this.snackBarRef.dismiss(); - } - } -} + const TypeClass = type && `pi-snackbar__type--${type}`; + const HasIconClass = this.icon() && 'pi-snackbar__has--icon'; + const IsDimsissibleClass = this.icon() && 'pi-snackbar__is--dismissible'; + + return ['pi-snackbar', TypeClass, HasIconClass, IsDimsissibleClass].join(' '); + } + + readonly message = input(); + + readonly text = input(); + readonly icon = input(); + readonly type = input<'success' | 'error' | 'info'>('success'); + readonly dismissible = input(false); + readonly description = input(); + + iconColor!: styleType; + buttonColor!: styleType; + + /** The instance of the component making up the content of the snack bar. */ + private readonly snackBarRef!: MatSnackBarRef; + + constructor(@Optional() @Inject(MAT_SNACK_BAR_DATA) public data: any) { + if (data) { + this.message = data.message; + this.icon = data.icon; + this.type = data.type; + this.dismissible = data.dismissible; + this.description = data.description; + if (this.icon()) { + switch (data.type) { + case 'error': + this.iconColor = 'warn'; + break; + case 'success': + this.iconColor = 'success'; + break; + case 'info': + this.iconColor = 'primary'; + break; + } + } + } + } + + /** Dismisses the snack bar. */ + dismiss(): void { + if (this.snackBarRef) { + this.snackBarRef.dismiss(); + } + } +} diff --git a/libs/ui/src/lib/ui/notification/state/notification.actions.ts b/libs/ui/src/lib/ui/notification/state/notification.actions.ts index 893f35d..b278c7b 100644 --- a/libs/ui/src/lib/ui/notification/state/notification.actions.ts +++ b/libs/ui/src/lib/ui/notification/state/notification.actions.ts @@ -1,29 +1,29 @@ -import { createAction, props } from '@ngrx/store'; - -export const displaySuccess = createAction( - '[CORE NOTIFICATION] Display Success', - props<{ - payload: string; - description?: string; - }>() -); - -export const displayError = createAction( - '[CORE NOTIFICATION] Display Error', - props<{ - payload: string; - description?: string; - }>() -); - -export const displayInfo = createAction( - '[CORE NOTIFICATION] Display Info', - props<{ - payload: string; - description?: string; - }>() -); - -export const triggerNotificationAction = createAction( - '[CORE NOTIFICATION] Trigger Notification Action' -); +import { createAction, props } from '@ngrx/store'; + +export const displaySuccess = createAction( + '[CORE NOTIFICATION] Display Success', + props<{ + payload: string; + description?: string; + }>() +); + +export const displayError = createAction( + '[CORE NOTIFICATION] Display Error', + props<{ + payload: string; + description?: string; + }>() +); + +export const displayInfo = createAction( + '[CORE NOTIFICATION] Display Info', + props<{ + payload: string; + description?: string; + }>() +); + +export const triggerNotificationAction = createAction( + '[CORE NOTIFICATION] Trigger Notification Action' +); diff --git a/libs/ui/src/lib/ui/notification/state/notification.effects.ts b/libs/ui/src/lib/ui/notification/state/notification.effects.ts index 65e2378..c94eac8 100644 --- a/libs/ui/src/lib/ui/notification/state/notification.effects.ts +++ b/libs/ui/src/lib/ui/notification/state/notification.effects.ts @@ -1,59 +1,59 @@ -import { Actions, createEffect, ofType } from '@ngrx/effects'; - -import * as NotificationActions from './notification.actions'; - -import { map, switchMap, tap } from 'rxjs/operators'; - -import { Injectable } from '@angular/core'; - -import { NotificationService } from '../infrastructure/notification.service'; - -@Injectable() -export class NotificationEffects { - constructor(private action$: Actions, private _notification: NotificationService) {} - - displaySuccess$ = createEffect( - () => { - return this.action$.pipe( - ofType(NotificationActions.displaySuccess), - map((action) => { - return action; - }), - tap((action) => { - this._notification.success(action.payload, action.description); - }) - ); - }, - { dispatch: false } - ); - - displayError$ = createEffect( - () => { - return this.action$.pipe( - ofType(NotificationActions.displayError), - map((action) => { - return action; - }), - tap((action) => { - this._notification.error(action.payload, action.description); - }) - ); - }, - { dispatch: false } - ); - - displayInfo$ = createEffect( - () => { - return this.action$.pipe( - ofType(NotificationActions.displayInfo), - map((action) => { - return action; - }), - tap((action) => { - this._notification.info(action.payload, action.description); - }) - ); - }, - { dispatch: false } - ); -} +import { Actions, createEffect, ofType } from '@ngrx/effects'; + +import * as NotificationActions from './notification.actions'; + +import { map, switchMap, tap } from 'rxjs/operators'; + +import { Injectable } from '@angular/core'; + +import { NotificationService } from '../infrastructure/notification.service'; + +@Injectable() +export class NotificationEffects { + constructor(private action$: Actions, private _notification: NotificationService) {} + + displaySuccess$ = createEffect( + () => { + return this.action$.pipe( + ofType(NotificationActions.displaySuccess), + map((action) => { + return action; + }), + tap((action) => { + this._notification.success(action.payload, action.description); + }) + ); + }, + { dispatch: false } + ); + + displayError$ = createEffect( + () => { + return this.action$.pipe( + ofType(NotificationActions.displayError), + map((action) => { + return action; + }), + tap((action) => { + this._notification.error(action.payload, action.description); + }) + ); + }, + { dispatch: false } + ); + + displayInfo$ = createEffect( + () => { + return this.action$.pipe( + ofType(NotificationActions.displayInfo), + map((action) => { + return action; + }), + tap((action) => { + this._notification.info(action.payload, action.description); + }) + ); + }, + { dispatch: false } + ); +} diff --git a/libs/ui/src/lib/ui/notification/utils.ts b/libs/ui/src/lib/ui/notification/utils.ts index daa1c6d..1647b97 100644 --- a/libs/ui/src/lib/ui/notification/utils.ts +++ b/libs/ui/src/lib/ui/notification/utils.ts @@ -1,15 +1,15 @@ -import { MatSnackBarConfig } from '@angular/material/snack-bar'; - -import { NotificationConfigKeys, notificationConfigs } from './entities/notification.data'; -import { IconNotificationData, ButtonNotificationData } from './entities/notification.model'; - -// Notification config -export function getNotificationConfigs( - key: NotificationConfigKeys, - data?: IconNotificationData | ButtonNotificationData -): MatSnackBarConfig { - return { - ...notificationConfigs[key], - ...(data && { data }), - }; -} +import { MatSnackBarConfig } from '@angular/material/snack-bar'; + +import { NotificationConfigKeys, notificationConfigs } from './entities/notification.data'; +import { IconNotificationData, ButtonNotificationData } from './entities/notification.model'; + +// Notification config +export function getNotificationConfigs( + key: NotificationConfigKeys, + data?: IconNotificationData | ButtonNotificationData +): MatSnackBarConfig { + return { + ...notificationConfigs[key], + ...(data && { data }), + }; +} diff --git a/libs/ui/src/lib/ui/paginator/index.ts b/libs/ui/src/lib/ui/paginator/index.ts index 9efd2f9..04633ec 100644 --- a/libs/ui/src/lib/ui/paginator/index.ts +++ b/libs/ui/src/lib/ui/paginator/index.ts @@ -1,3 +1,3 @@ - - -export * from './paginator/paginator.component'; + + +export * from './paginator/paginator.component'; diff --git a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html index b544a3d..9abc96b 100644 --- a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html +++ b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.html @@ -1,68 +1,68 @@ - - -Previous - -
- -
- - - Next - - - - - {{ page }} - - - -
- - {{ page }} - -
- - -
- - {{ page }} - -
- + + +Previous + +
+ +
+ + + Next + + + + + {{ page }} + + + +
+ + {{ page }} + +
+ + +
+ + {{ page }} + +
+ diff --git a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.scss b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.scss index 581d1e5..f7eabc2 100644 --- a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.scss +++ b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.scss @@ -1,36 +1,36 @@ -:host { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - margin-top: var(--pi-spacing-small); - & > footer { - display: flex; - align-items: center; - gap: var(--pi-spacing-small); - } - span { - display: flex; - justify-content: center; - align-items: center; - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - border-radius: 0.625rem; - transition: var(--pi-animation); - cursor: pointer; - font: { - size: var(--pi-font-size-small); - } - &.is-active { - color: var(--pi-color-primary-900); - background-color: var(--pi-color-primary-50); - transition: var(--pi-animation); - font: { - weight: 500; - } - } - &:not(.is-active) { - color: var(--pi-color-grey-200); - } - } -} +:host { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin-top: var(--pi-spacing-small); + & > footer { + display: flex; + align-items: center; + gap: var(--pi-spacing-small); + } + span { + display: flex; + justify-content: center; + align-items: center; + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + border-radius: 0.625rem; + transition: var(--pi-animation); + cursor: pointer; + font: { + size: var(--pi-font-size-small); + } + &.is-active { + color: var(--pi-color-primary-900); + background-color: var(--pi-color-primary-50); + transition: var(--pi-animation); + font: { + weight: 500; + } + } + &:not(.is-active) { + color: var(--pi-color-grey-200); + } + } +} diff --git a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts index 2e165eb..1eb1943 100644 --- a/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts +++ b/libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts @@ -1,120 +1,120 @@ -import { ChangeDetectionStrategy, Component, OnInit, HostBinding, forwardRef, input, model, output } from '@angular/core'; -import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; -import { NgIf, NgFor } from '@angular/common'; -import { PiIconComponent } from '../../icon/icon/icon.component'; - - -@Component({ - selector: 'pi-paginator', - templateUrl: './paginator.component.html', - styleUrls: ['./paginator.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ - PiIconButtonComponent, - NgIf, - NgFor, - PiIconComponent, - forwardRef(() => PiPaginatorComponent) -], -}) -export class PiPaginatorComponent implements OnInit { - @HostBinding('class') className = 'pi-paginator'; - readonly currentPage = model(1); - readonly pageSize = input.required(); - readonly totalPages = input.required(); - readonly isDisabled = input.required(); - - readonly changePage = output(); - - firstPages!: number[]; - - firstPagesRange = 0; - - ngOnInit(): void { - this.initFirstPages(); - } - - get pages() { - return [...new Array(this.totalPages()).keys()].map((el) => el + 1); - } - - // get firstPages() { - // return this._firstPages; - // } - - // New arr with last 3 (new empty array with the desired legnth), withg the .keys I got the - // - /** - * Returns the names of the enumerable string properties and methods of an object. - * @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object. - */ - // keys(o: object): string[]; - - get lastPages() { - return [...new Array(this.totalPages()).keys()].slice(-3).map((el) => el + 1); - } - - protected initFirstPages(): void { - this.firstPages = [...new Array(this.totalPages()).slice(0, 3).keys()].map((el) => el + 1); - } - - protected paginateBack(): void { - if (this.currentPage() > 1) { - const updatedCurrentPage = this.currentPage() - 1; - if (this.firstPages.indexOf(this.currentPage()) === 0) { - this.firstPages = this.decrementPaginatorRangeBy(3); - this.firstPagesRange = this.firstPagesRange - 3; - } - this.currentPage.set(updatedCurrentPage); - this.changePage.emit(updatedCurrentPage); - } - } - - protected paginateNext(): void { - if (this.currentPage() < this.totalPages()) { - const updatedCurrentPage = this.currentPage() + 1; - if (this.firstPages.indexOf(this.currentPage()) >= 2) { - this.firstPagesRange = this.firstPagesRange + 3; - this.firstPages = this.incrementPaginatorRangeBy(3); - } - this.currentPage.set(updatedCurrentPage); - this.changePage.emit(updatedCurrentPage); - } - } - - protected paginateTo(selectedPage: number): void { - if (this.isDisabled() && selectedPage > this.currentPage()) { - return; - } else { - this.currentPage.set(selectedPage); - this.changePage.emit(this.currentPage()); - } - } - - protected paginateToFirstPage(): void { - this.paginateTo(1); - this.initFirstPages(); - this.firstPagesRange = 0; - } - - protected movePages(): void { - if (!this.isDisabled()) { - this.firstPagesRange = this.firstPagesRange + 3; - this.firstPages = this.incrementPaginatorRangeBy(3); - this.currentPage.set(this.firstPages[0]); - this.changePage.emit(this.currentPage()); - } - } - - private incrementPaginatorRangeBy(range: number): Array { - return [...new Array(this.totalPages()).keys()] - .slice(this.firstPagesRange, this.firstPagesRange + range) - .map((el) => el + 1); - } - - private decrementPaginatorRangeBy(range: number): Array { - return [...new Array(this.totalPages()).keys()] - .slice(this.firstPagesRange - range, this.firstPagesRange) - .map((el) => el + 1); - } -} +import { ChangeDetectionStrategy, Component, OnInit, HostBinding, forwardRef, input, model, output } from '@angular/core'; +import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; +import { NgIf, NgFor } from '@angular/common'; +import { PiIconComponent } from '../../icon/icon/icon.component'; + + +@Component({ + selector: 'pi-paginator', + templateUrl: './paginator.component.html', + styleUrls: ['./paginator.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + PiIconButtonComponent, + NgIf, + NgFor, + PiIconComponent, + forwardRef(() => PiPaginatorComponent) +], +}) +export class PiPaginatorComponent implements OnInit { + @HostBinding('class') className = 'pi-paginator'; + readonly currentPage = model(1); + readonly pageSize = input.required(); + readonly totalPages = input.required(); + readonly isDisabled = input.required(); + + readonly changePage = output(); + + firstPages!: number[]; + + firstPagesRange = 0; + + ngOnInit(): void { + this.initFirstPages(); + } + + get pages() { + return [...new Array(this.totalPages()).keys()].map((el) => el + 1); + } + + // get firstPages() { + // return this._firstPages; + // } + + // New arr with last 3 (new empty array with the desired legnth), withg the .keys I got the + // + /** + * Returns the names of the enumerable string properties and methods of an object. + * @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object. + */ + // keys(o: object): string[]; + + get lastPages() { + return [...new Array(this.totalPages()).keys()].slice(-3).map((el) => el + 1); + } + + protected initFirstPages(): void { + this.firstPages = [...new Array(this.totalPages()).slice(0, 3).keys()].map((el) => el + 1); + } + + protected paginateBack(): void { + if (this.currentPage() > 1) { + const updatedCurrentPage = this.currentPage() - 1; + if (this.firstPages.indexOf(this.currentPage()) === 0) { + this.firstPages = this.decrementPaginatorRangeBy(3); + this.firstPagesRange = this.firstPagesRange - 3; + } + this.currentPage.set(updatedCurrentPage); + this.changePage.emit(updatedCurrentPage); + } + } + + protected paginateNext(): void { + if (this.currentPage() < this.totalPages()) { + const updatedCurrentPage = this.currentPage() + 1; + if (this.firstPages.indexOf(this.currentPage()) >= 2) { + this.firstPagesRange = this.firstPagesRange + 3; + this.firstPages = this.incrementPaginatorRangeBy(3); + } + this.currentPage.set(updatedCurrentPage); + this.changePage.emit(updatedCurrentPage); + } + } + + protected paginateTo(selectedPage: number): void { + if (this.isDisabled() && selectedPage > this.currentPage()) { + return; + } else { + this.currentPage.set(selectedPage); + this.changePage.emit(this.currentPage()); + } + } + + protected paginateToFirstPage(): void { + this.paginateTo(1); + this.initFirstPages(); + this.firstPagesRange = 0; + } + + protected movePages(): void { + if (!this.isDisabled()) { + this.firstPagesRange = this.firstPagesRange + 3; + this.firstPages = this.incrementPaginatorRangeBy(3); + this.currentPage.set(this.firstPages[0]); + this.changePage.emit(this.currentPage()); + } + } + + private incrementPaginatorRangeBy(range: number): Array { + return [...new Array(this.totalPages()).keys()] + .slice(this.firstPagesRange, this.firstPagesRange + range) + .map((el) => el + 1); + } + + private decrementPaginatorRangeBy(range: number): Array { + return [...new Array(this.totalPages()).keys()] + .slice(this.firstPagesRange - range, this.firstPagesRange) + .map((el) => el + 1); + } +} diff --git a/libs/ui/src/lib/ui/panel/base-panel.component.ts b/libs/ui/src/lib/ui/panel/base-panel.component.ts index 9b52ef1..256284d 100644 --- a/libs/ui/src/lib/ui/panel/base-panel.component.ts +++ b/libs/ui/src/lib/ui/panel/base-panel.component.ts @@ -1,136 +1,136 @@ -// Angular -import { Directive, OnInit, input } from '@angular/core'; -import { - alignment, - borderRadius, - styleType, - flexDirection, - justify, - padding, - gap, - opacity, -} from '../../styles'; -import { status } from '../../util/status'; - -@Directive() -export abstract class PiBasePanelComponent implements OnInit { - readonly alignment = input('center'); - readonly borderRadius = input('large'); - readonly color = input('white'); - readonly flexDirection = input('column'); - readonly isStroked = input(false); - readonly hasShadow = input(false); - readonly justify = input('center'); - readonly width = input<'quarter' | 'third' | 'half' | 'fifth' | 'sixth' | 'two-thirds'>(); - // TODO: remove on the advisor dashboard refactor - readonly height = input.required<'small' | 'medium' | 'large' | 'x-large' | undefined>(); - readonly outline = input.required(); - readonly padding = input('l'); - readonly grid = input<'half' | 'quarter' | 'reverse-quarter'>(); - readonly gap = input('l'); - readonly mode = input<'dark' | 'light'>('dark'); - readonly innerPadding = input.required(); - readonly opacity = input(); - - readonly status = input.required(); - - ngOnInit(): void { - this.alignmentClass; - this.borderRadiusClass; - this.colorClass; - this.flexDirectionClass; - this.justifyClass; - this.widthClass; - this.outlineClass; - this.paddingClass; - this.gapClass; - this.statusClass; - this.isStrokedClass; - this.modeClass; - this.opacityClass; - } - - protected get widthClass(): string | undefined { +// Angular +import { Directive, OnInit, input } from '@angular/core'; +import { + alignment, + borderRadius, + styleType, + flexDirection, + justify, + padding, + gap, + opacity, +} from '../../styles'; +import { status } from '../../util/status'; + +@Directive() +export abstract class PiBasePanelComponent implements OnInit { + readonly alignment = input('center'); + readonly borderRadius = input('large'); + readonly color = input('white'); + readonly flexDirection = input('column'); + readonly isStroked = input(false); + readonly hasShadow = input(false); + readonly justify = input('center'); + readonly width = input<'quarter' | 'third' | 'half' | 'fifth' | 'sixth' | 'two-thirds'>(); + // TODO: remove on the advisor dashboard refactor + readonly height = input.required<'small' | 'medium' | 'large' | 'x-large' | undefined>(); + readonly outline = input.required(); + readonly padding = input('l'); + readonly grid = input<'half' | 'quarter' | 'reverse-quarter'>(); + readonly gap = input('l'); + readonly mode = input<'dark' | 'light'>('dark'); + readonly innerPadding = input.required(); + readonly opacity = input(); + + readonly status = input.required(); + + ngOnInit(): void { + this.alignmentClass; + this.borderRadiusClass; + this.colorClass; + this.flexDirectionClass; + this.justifyClass; + this.widthClass; + this.outlineClass; + this.paddingClass; + this.gapClass; + this.statusClass; + this.isStrokedClass; + this.modeClass; + this.opacityClass; + } + + protected get widthClass(): string | undefined { const width = this.width(); - return width && `pi-panel__width--${width}`; - } - - protected get alignmentClass(): string { + return width && `pi-panel__width--${width}`; + } + + protected get alignmentClass(): string { const alignmentValue = this.alignment(); - return alignmentValue && `pi-panel__align--${alignmentValue}`; - } - - protected get justifyClass(): string { + return alignmentValue && `pi-panel__align--${alignmentValue}`; + } + + protected get justifyClass(): string { const justifyValue = this.justify(); - return justifyValue && `pi-panel__justify--${justifyValue}`; - } - - protected get flexDirectionClass(): string { + return justifyValue && `pi-panel__justify--${justifyValue}`; + } + + protected get flexDirectionClass(): string { const flexDirectionValue = this.flexDirection(); - return flexDirectionValue && `pi-panel__flex-direction--${flexDirectionValue}`; - } - - protected get borderRadiusClass(): string { + return flexDirectionValue && `pi-panel__flex-direction--${flexDirectionValue}`; + } + + protected get borderRadiusClass(): string { const borderRadiusValue = this.borderRadius(); - return borderRadiusValue && `pi-panel__border-radius--${borderRadiusValue}`; - } - - protected get colorClass(): string { - return `pi-color__${this.color()}`; - } - - protected get hasShadowClass(): string | boolean { - return this.hasShadow() && 'has-shadow'; - } - - protected get heightClass(): string | undefined { + return borderRadiusValue && `pi-panel__border-radius--${borderRadiusValue}`; + } + + protected get colorClass(): string { + return `pi-color__${this.color()}`; + } + + protected get hasShadowClass(): string | boolean { + return this.hasShadow() && 'has-shadow'; + } + + protected get heightClass(): string | undefined { const height = this.height(); - return height && `pi-panel__height--${height}`; - } - - protected get outlineClass(): string { + return height && `pi-panel__height--${height}`; + } + + protected get outlineClass(): string { const outline = this.outline(); - return outline && `is-stroked pi-panel__border-color--${outline}`; - } - - protected get paddingClass(): string { + return outline && `is-stroked pi-panel__border-color--${outline}`; + } + + protected get paddingClass(): string { const paddingValue = this.padding(); - return paddingValue ? `pi-panel__padding--${paddingValue}` : ''; - } - - protected get gridClass(): string | false { + return paddingValue ? `pi-panel__padding--${paddingValue}` : ''; + } + + protected get gridClass() { const grid = this.grid(); - return grid && `pi-panel__grid--${grid}`; - } - - protected get isStrokedClass(): string { - return this.isStroked() ? 'is-stroked' : ''; - } - - protected get gapClass(): string { + return grid && `pi-panel__grid--${grid}`; + } + + protected get isStrokedClass(): string { + return this.isStroked() ? 'is-stroked' : ''; + } + + protected get gapClass(): string { const gapValue = this.gap(); - return gapValue && `pi-panel__gap--${gapValue}`; - } - - protected get statusClass(): string { + return gapValue && `pi-panel__gap--${gapValue}`; + } + + protected get statusClass(): string { const statusValue = this.status(); - return statusValue && `is-${statusValue}`; - } - - protected get modeClass(): string { + return statusValue && `is-${statusValue}`; + } + + protected get modeClass(): string { const mode = this.mode(); - return mode && `pi-color__mode--${mode}`; - } - - protected get innerPaddingClass(): string { + return mode && `pi-color__mode--${mode}`; + } + + protected get innerPaddingClass(): string { const innerPadding = this.innerPadding(); - return innerPadding - ? `pi-panel__inner-padding pi-panel__inner-padding--${innerPadding}` - : ''; - } - - protected get opacityClass(): string { + return innerPadding + ? `pi-panel__inner-padding pi-panel__inner-padding--${innerPadding}` + : ''; + } + + protected get opacityClass(): string { const opacityValue = this.opacity(); - return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; - } -} + return opacityValue ? `pi-color__opacity--${opacityValue}` : ''; + } +} diff --git a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html index f9387ad..db9bb7f 100644 --- a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html +++ b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html @@ -1,63 +1,63 @@ - -
- -
-
-

{{ title() }}

-

{{ subtitle() }}

-
- -
- - - - - -
- -
-
- - - - - -
- - -
- - - - - -
- -
- + +
+ +
+
+

{{ title() }}

+

{{ subtitle() }}

+
+ +
+ + + + + +
+ +
+
+ + + + + +
+ + +
+ + + + + +
+ +
+ diff --git a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.scss b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.scss index b5f1499..4942268 100644 --- a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.scss +++ b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.scss @@ -1,145 +1,145 @@ -:host { - display: block; - padding: var(--pi-spacing-x-large); - background-color: var(--pi-color-white); - border-radius: var(--pi-border-radius-large); - - // Form type - & > form { - & > header { - display: flex; - justify-content: space-between; - & > aside { - display: flex; - align-items: center; - gap: var(--pi-spacing-medium); - height: var(--pi-spacing-x-large); - & > div { - display: flex; - align-items: center; - } - } - } - - & > section { - display: flex; - flex-direction: column; - height: auto; - overflow: hidden; - transition: all 0.33s ease-out; - - &.is-collapsed { - height: auto; - flex: 1; - max-height: 0; - & > *:nth-child(n + 1) { - opacity: 0; - visibility: hidden; - } - } - &.is-expanded { - flex: 0; - height: 100%; - opacity: 1; - visibility: visible; - transition: all 0.33s ease; - } - } - } - - // Custom type - &.pi-panel__expansion--type-custom { - // Header - & > header { - display: flex; - justify-content: space-between; - gap: var(--pi-spacing-medium); - & > aside { - display: flex; - align-items: center; - gap: var(--pi-spacing-small); - .pi-icon { - transition: var(--pi-animation); - &:hover { - cursor: pointer; - } - &.is-collapsed { - transform: rotate(-90deg); - } - &:not(.is-collapsed) { - transform: rotate(0); - } - } - } - } - - // Expandable content - & > section { - display: flex; - flex-direction: column; - height: auto; - overflow: hidden; - transition: all 0.33s ease-out; - - // Collapsed - &.is-collapsed { - height: auto; - flex: 1; - max-height: 0; - margin-top: 0; - & > *:nth-child(n + 1) { - opacity: 0; - visibility: hidden; - } - } - // Expanded - &.is-expanded { - margin-top: var(--pi-spacing-xx-large); - flex: 0; - height: 100%; - opacity: 1; - visibility: visible; - transition: all 0.33s ease; - } - } - } -} - -html { - &.is-mobile { - :host { - & > form { - & > header { - flex-direction: column-reverse; - gap: var(--pi-spacing-medium); - & > aside { - justify-content: space-between; - .pi-divider__direction--vertical { - display: none; - } - } - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - :host { - & > form { - &.is-expanded { - max-height: 100%; - } - } - } - } - // Desktop - &.is-desktop { - :host { - & > form { - &.is-expanded { - max-height: 166.66vh; - } - } - } - } -} +:host { + display: block; + padding: var(--pi-spacing-x-large); + background-color: var(--pi-color-white); + border-radius: var(--pi-border-radius-large); + + // Form type + & > form { + & > header { + display: flex; + justify-content: space-between; + & > aside { + display: flex; + align-items: center; + gap: var(--pi-spacing-medium); + height: var(--pi-spacing-x-large); + & > div { + display: flex; + align-items: center; + } + } + } + + & > section { + display: flex; + flex-direction: column; + height: auto; + overflow: hidden; + transition: all 0.33s ease-out; + + &.is-collapsed { + height: auto; + flex: 1; + max-height: 0; + & > *:nth-child(n + 1) { + opacity: 0; + visibility: hidden; + } + } + &.is-expanded { + flex: 0; + height: 100%; + opacity: 1; + visibility: visible; + transition: all 0.33s ease; + } + } + } + + // Custom type + &.pi-panel__expansion--type-custom { + // Header + & > header { + display: flex; + justify-content: space-between; + gap: var(--pi-spacing-medium); + & > aside { + display: flex; + align-items: center; + gap: var(--pi-spacing-small); + .pi-icon { + transition: var(--pi-animation); + &:hover { + cursor: pointer; + } + &.is-collapsed { + transform: rotate(-90deg); + } + &:not(.is-collapsed) { + transform: rotate(0); + } + } + } + } + + // Expandable content + & > section { + display: flex; + flex-direction: column; + height: auto; + overflow: hidden; + transition: all 0.33s ease-out; + + // Collapsed + &.is-collapsed { + height: auto; + flex: 1; + max-height: 0; + margin-top: 0; + & > *:nth-child(n + 1) { + opacity: 0; + visibility: hidden; + } + } + // Expanded + &.is-expanded { + margin-top: var(--pi-spacing-xx-large); + flex: 0; + height: 100%; + opacity: 1; + visibility: visible; + transition: all 0.33s ease; + } + } + } +} + +html { + &.is-mobile { + :host { + & > form { + & > header { + flex-direction: column-reverse; + gap: var(--pi-spacing-medium); + & > aside { + justify-content: space-between; + .pi-divider__direction--vertical { + display: none; + } + } + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + :host { + & > form { + &.is-expanded { + max-height: 100%; + } + } + } + } + // Desktop + &.is-desktop { + :host { + & > form { + &.is-expanded { + max-height: 166.66vh; + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts index 0a46d08..b04ef9c 100644 --- a/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts +++ b/libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts @@ -10,9 +10,9 @@ import { model, output, contentChild -} from '@angular/core'; -import { FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { ComponentFamilyClass } from '../../../styles'; +} from '@angular/core'; +import { FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { ComponentFamilyClass } from '../../../styles'; import { PiBasePanelComponent } from '../base-panel.component'; import { NgIf, NgTemplateOutlet } from '@angular/common'; import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive'; @@ -22,8 +22,8 @@ import { PiColorGreyDirective } from '../../../util/color/directives/colors.dire import { PiDividerComponent } from '../../divider/divider/divider.component'; import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component'; import { PiIconComponent } from '../../icon/icon/icon.component'; -import { TranslatePipe } from '@ngx-translate/core'; - +import { TranslatePipe } from '@ngx-translate/core'; + @Component({ selector: 'pi-expansion-panel', templateUrl: './expansion-panel.component.html', @@ -44,51 +44,51 @@ import { TranslatePipe } from '@ngx-translate/core'; PiIconComponent, TranslatePipe, ], -}) -export class PiExpansionPanelComponent extends PiBasePanelComponent implements OnInit, OnChanges { - @HostBinding('class') get classes(): string { +}) +export class PiExpansionPanelComponent extends PiBasePanelComponent implements OnInit, OnChanges { + @HostBinding('class') get classes(): string { const type = this.type(); - const typeClass = type && `pi-panel__expansion--type-${type}`; - return [ - 'pi-panel__expansion', - ComponentFamilyClass.Panel, - this.colorClass, - this.paddingClass, - this.statusClass, - typeClass, - ].join(' '); - } - - readonly type = input<'form' | 'custom'>('form'); - readonly isCollapsed = model(false); - readonly title = input(); - readonly subtitle = input(); - readonly formGroup = input.required(); - readonly edit = output(); - - readonly topContentRef = contentChild>('topContent'); - - readonly centerContentRef = contentChild>('centerContent'); - - readonly expandableContentRef = contentChild>('expandableContent'); - - override ngOnInit(): void { - if (this.status() === 'disabled') this.isCollapsed.set(true); - } - - ngOnChanges({ status }: SimpleChanges): void { - if (status?.currentValue === 'disabled') this.isCollapsed.set(true); - } - - toggle(): void { + const typeClass = type && `pi-panel__expansion--type-${type}`; + return [ + 'pi-panel__expansion', + ComponentFamilyClass.Panel, + this.colorClass, + this.paddingClass, + this.statusClass, + typeClass, + ].join(' '); + } + + readonly type = input<'form' | 'custom'>('form'); + readonly isCollapsed = model(false); + readonly title = input(); + readonly subtitle = input(); + readonly formGroup = input.required(); + readonly edit = output(); + + readonly topContentRef = contentChild>('topContent'); + + readonly centerContentRef = contentChild>('centerContent'); + + readonly expandableContentRef = contentChild>('expandableContent'); + + override ngOnInit(): void { + if (this.status() === 'disabled') this.isCollapsed.set(true); + } + + ngOnChanges({ status }: SimpleChanges): void { + if (status?.currentValue === 'disabled') this.isCollapsed.set(true); + } + + toggle(): void { const status = this.status(); - if (status !== 'disabled' && status !== 'info') this.isCollapsed.set(!this.isCollapsed()); - } - - onEdit(): void { - if (this.status() !== 'disabled') { - if (this.isCollapsed()) this.toggle(); - this.edit.emit(); - } - } -} + if (status !== 'disabled' && status !== 'info') this.isCollapsed.set(!this.isCollapsed()); + } + + onEdit(): void { + if (this.status() !== 'disabled') { + if (this.isCollapsed()) this.toggle(); + this.edit.emit(); + } + } +} diff --git a/libs/ui/src/lib/ui/panel/index.ts b/libs/ui/src/lib/ui/panel/index.ts index ab3b4ad..ca5a486 100644 --- a/libs/ui/src/lib/ui/panel/index.ts +++ b/libs/ui/src/lib/ui/panel/index.ts @@ -1,8 +1,8 @@ -export * from './expansion-panel/expansion-panel.component'; -export * from './panel/panel.component'; - -export * from './panel.directive'; - -export * from './base-panel.component'; - - +export * from './expansion-panel/expansion-panel.component'; +export * from './panel/panel.component'; + +export * from './panel.directive'; + +export * from './base-panel.component'; + + diff --git a/libs/ui/src/lib/ui/panel/panel.directive.ts b/libs/ui/src/lib/ui/panel/panel.directive.ts index a818a63..ff77f53 100644 --- a/libs/ui/src/lib/ui/panel/panel.directive.ts +++ b/libs/ui/src/lib/ui/panel/panel.directive.ts @@ -1,65 +1,65 @@ -import { Directive, HostBinding, OnInit, input } from '@angular/core'; -import { padding } from '../../styles'; - -@Directive() -export abstract class PiBasePanelContentDirective implements OnInit { - @HostBinding('class') get commonClasses(): string { - return ['pi-panel-content', this.innerPaddingClass].join(' '); - } - - readonly innerPadding = input(); - - ngOnInit(): void { - this.innerPaddingClass; - } - - protected get innerPaddingClass(): string { +import { Directive, HostBinding, OnInit, input } from '@angular/core'; +import { padding } from '../../styles'; + +@Directive() +export abstract class PiBasePanelContentDirective implements OnInit { + @HostBinding('class') get commonClasses(): string { + return ['pi-panel-content', this.innerPaddingClass].join(' '); + } + + readonly innerPadding = input(); + + ngOnInit(): void { + this.innerPaddingClass; + } + + protected get innerPaddingClass(): string { const innerPadding = this.innerPadding(); - return innerPadding ? `pi-panel-content__inner-padding--${innerPadding}` : ''; - } -} - -// Horizontal direction -@Directive({ selector: 'pi-panel-right-content', }) -export class PiPanelRightContentDirective extends PiBasePanelContentDirective{ - @HostBinding('class') get classes(): string { - return 'pi-panel-content__right'; - } -} - -@Directive({ selector: 'pi-panel-left-content', }) -export class PiPanelLeftContentDirective extends PiBasePanelContentDirective{ - @HostBinding('class') get classes(): string { - return 'pi-panel-content__left'; - } -} - -// Vertical direction -@Directive({ selector: 'pi-panel-top-content', }) -export class PiPanelTopContentDirective extends PiBasePanelContentDirective{ - @HostBinding('class') get classes(): string { - return 'pi-panel-content__top'; - } -} - -@Directive({ selector: 'pi-panel-center-content', }) -export class PiPanelCenterContentDirective extends PiBasePanelContentDirective{ - @HostBinding('class') get classes(): string { - return 'pi-panel-content__center'; - } -} - -@Directive({ selector: 'pi-panel-expandable-content', }) -export class PiPanelExpandableContentDirective extends PiBasePanelContentDirective{ - @HostBinding('class') get classes(): string { - return 'pi-panel-content__expandable'; - } -} - -// Vertical direction -@Directive({ selector: 'pi-panel-bottom-content', }) -export class PiPanelBottomContentDirective extends PiBasePanelContentDirective{ - @HostBinding('class') get classes(): string { - return 'pi-panel-content__bottom'; - } -} + return innerPadding ? `pi-panel-content__inner-padding--${innerPadding}` : ''; + } +} + +// Horizontal direction +@Directive({ selector: 'pi-panel-right-content', }) +export class PiPanelRightContentDirective extends PiBasePanelContentDirective{ + @HostBinding('class') get classes(): string { + return 'pi-panel-content__right'; + } +} + +@Directive({ selector: 'pi-panel-left-content', }) +export class PiPanelLeftContentDirective extends PiBasePanelContentDirective{ + @HostBinding('class') get classes(): string { + return 'pi-panel-content__left'; + } +} + +// Vertical direction +@Directive({ selector: 'pi-panel-top-content', }) +export class PiPanelTopContentDirective extends PiBasePanelContentDirective{ + @HostBinding('class') get classes(): string { + return 'pi-panel-content__top'; + } +} + +@Directive({ selector: 'pi-panel-center-content', }) +export class PiPanelCenterContentDirective extends PiBasePanelContentDirective{ + @HostBinding('class') get classes(): string { + return 'pi-panel-content__center'; + } +} + +@Directive({ selector: 'pi-panel-expandable-content', }) +export class PiPanelExpandableContentDirective extends PiBasePanelContentDirective{ + @HostBinding('class') get classes(): string { + return 'pi-panel-content__expandable'; + } +} + +// Vertical direction +@Directive({ selector: 'pi-panel-bottom-content', }) +export class PiPanelBottomContentDirective extends PiBasePanelContentDirective{ + @HostBinding('class') get classes(): string { + return 'pi-panel-content__bottom'; + } +} diff --git a/libs/ui/src/lib/ui/panel/panel/panel.component.html b/libs/ui/src/lib/ui/panel/panel/panel.component.html index 9e46555..d564eeb 100644 --- a/libs/ui/src/lib/ui/panel/panel/panel.component.html +++ b/libs/ui/src/lib/ui/panel/panel/panel.component.html @@ -1,19 +1,19 @@ -
- -
-
-

{{ title() }}

-

{{ subtitle() }}

-
- -
- - - - - - - - - -
+
+ +
+
+

{{ title() }}

+

{{ subtitle() }}

+
+ +
+ + + + + + + + + +
diff --git a/libs/ui/src/lib/ui/panel/panel/panel.component.scss b/libs/ui/src/lib/ui/panel/panel/panel.component.scss index f16dca0..067ab06 100644 --- a/libs/ui/src/lib/ui/panel/panel/panel.component.scss +++ b/libs/ui/src/lib/ui/panel/panel/panel.component.scss @@ -1,336 +1,336 @@ -@mixin panelPadding($padding) { - padding: var(--pi-spacing-#{$padding}); -} - -@mixin panelGap($gap) { - & > section { - gap: var(--pi-spacing-#{$gap}); - } -} - -@mixin panelColor($color) { - &.pi-color__mode--dark { - background-color: var(--pi-color-#{$color}-50); - } - &.pi-color__mode--light { - background-color: var(--pi-color-#{$color}-25); - } - &.is-stroked { - &.pi-color__mode--dark { - border-color: var(--pi-color-#{$color}-200); - } - &.pi-color__mode--light { - border-color: var(--pi-color-#{$color}-50); - } - } -} - -@mixin panelColorWhite { - // Light Translucent - &[class*='pi-color__opacity'] { - // Light Glass color - background-color: var(--pi-color-white-rgba-03); - &.is-clickable { - &:hover { - // Light Glass color hover - background-color: var(--pi-color-white-rgba-06); - } - } - } - // Light Opaque - &:not([class*='pi-color__opacity']) { - background-color: var(--pi-color-white); - } - // Light & Is stroked - &.is-stroked { - border-color: var(--pi-color-white-900); - } -} - -@mixin alignItems($align-items) { - & > section { - align-items: $align-items; - } -} - -@mixin flexDirection($flex-direction) { - & > section { - flex-direction: $flex-direction; - } -} - -@mixin justifyContent($justify-content) { - & > section { - justify-content: $justify-content; - } -} - -:host { - display: block; - - & > section { - display: flex; - & > header { - display: flex; - justify-content: space-between; - gap: var(--pi-spacing-medium); - } - } - - // Alignment - &.pi-panel__align--center { - @include alignItems(center); - } - &.pi-panel__align--flex-start { - @include alignItems(flex-start); - } - &.pi-panel__align--flex-end { - @include alignItems(flex-end); - } - // Flex direction - &.pi-panel__flex-direction--column { - @include flexDirection(column); - } - &.pi-panel__flex-direction--column-reverse { - @include flexDirection(column-reverse); - } - // Justify - &.pi-panel__justify--flex-start { - @include justifyContent(flex-start); - } - &.pi-panel__justify--flex-end { - @include justifyContent(flex-end); - } - &.pi-panel__justify--center { - @include justifyContent(center); - } - &.pi-panel__justify--space-between { - @include justifyContent(space-between); - } - &.pi-panel__justify--space-evenly { - @include justifyContent(space-evenly); - } - &.pi-panel__justify--space-around { - @include justifyContent(space-around); - } - - // Radius - &.pi-panel__border-radius--small { - border-radius: var(--pi-border-radius-small); - } - &.pi-panel__border-radius--medium { - border-radius: var(--pi-border-radius-medium); - } - &.pi-panel__border-radius--large { - border-radius: var(--pi-border-radius-large); - } - // Colors - - &.pi-color__primary { - @include panelColor(primary); - } - &.pi-color__accent { - @include panelColor(accent); - } - &.pi-color__highlighted { - @include panelColor(highlighted); - } - &.pi-color__success { - @include panelColor(success); - } - &.pi-color__grey { - @include panelColor(grey); - } - &.pi-color__white { - background-color: var(--pi-color-white); - @include panelColorWhite; - } - &.is-stroked { - border: 1px solid; - &.pi-color__white { - border-color: var(--pi-color-grey-25); - } - } - - // Has shadow - &.has-shadow { - box-shadow: var(--pi-box-shadow-panel); - } - - // Padding - &.pi-panel__padding--xxxs { - @include panelPadding(xxx-small); - } - &.pi-panel__padding--xxs { - @include panelPadding(xx-small); - } - &.pi-panel__padding--xs { - @include panelPadding(x-small); - } - - &.pi-panel__padding--s { - @include panelPadding(small); - } - - &.pi-panel__padding--m { - @include panelPadding(medium); - } - - &.pi-panel__padding--l { - @include panelPadding(large); - } - - &.pi-panel__padding--xl { - @include panelPadding(x-large); - } - - &.pi-panel__padding--xxl { - @include panelPadding(xx-large); - } - - // Gap - &.pi-panel__gap--xxxs { - @include panelGap(xxx-small); - } - - &.pi-panel__gap--xxs { - @include panelGap(xx-small); - } - - &.pi-panel__gap--xs { - @include panelGap(x-small); - } - - &.pi-panel__gap--s { - @include panelGap(small); - } - - &.pi-panel__gap--m { - @include panelGap(medium); - } - - &.pi-panel__gap--l { - @include panelGap(large); - } - - &.pi-panel__gap--xl { - @include panelGap(x-large); - } - - &.pi-panel__gap--xxl { - @include panelGap(xx-large); - } - - &.pi-panel__gap--xxxl { - @include panelGap(xxx-large); - } - - &.pi-panel__gap--xxxxl { - @include panelGap(xxxx-large); - } - - &.pi-panel__gap--none { - & > section { - gap: 0; - } - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - // Width - // 2 / 3 - &.pi-panel__width--two-thirds { - max-width: 75%; - } - // 1 / 2 - &.pi-panel__width--half { - max-width: 66.66%; - } - // 1 / 3 - &.pi-panel__width--third { - max-width: 50%; - } - // 1 / 4 - &.pi-panel__width--quarter { - max-width: 33.33%; - } - // 1 / 5 - &.pi-panel__width--fifth { - max-width: 25%; - } - // 1 / 6 - &.pi-panel__width--sixth { - max-width: 20%; - } - } - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - // 2 / 3 - &.pi-panel__width--two-thirds { - width: 66.66%; - max-width: 40rem; - } - // 1 / 2 - &.pi-panel__width--half { - width: 50%; - max-width: 35rem; - } - // 1 / 3 - &.pi-panel__width--third { - width: 33.33%; - max-width: 30rem; - } - // 1 / 4 - &.pi-panel__width--quarter { - width: 25%; - max-width: 17.5rem; - } - // 1 / 5 - &.pi-panel__width--fifth { - width: 20%; - max-width: 15rem; - } - // 1 / 6 - &.pi-panel__width--sixth { - width: 16.66%; - max-width: 12rem; - } - } - } - - // Desktop - &.is-desktop { - // Small - &.pi-panel__height--small { - & > section { - min-height: 20vh; - } - } - // Medium - &.pi-panel__height--medium { - & > section { - min-height: 55vh; - } - } - // Large - &.pi-panel__height--large { - & > section { - min-height: 66.66vh; - } - } - // X Large - &.pi-panel__height--x-large { - & > section { - min-height: 75vh; - } - } - } -} +@mixin panelPadding($padding) { + padding: var(--pi-spacing-#{$padding}); +} + +@mixin panelGap($gap) { + & > section { + gap: var(--pi-spacing-#{$gap}); + } +} + +@mixin panelColor($color) { + &.pi-color__mode--dark { + background-color: var(--pi-color-#{$color}-50); + } + &.pi-color__mode--light { + background-color: var(--pi-color-#{$color}-25); + } + &.is-stroked { + &.pi-color__mode--dark { + border-color: var(--pi-color-#{$color}-200); + } + &.pi-color__mode--light { + border-color: var(--pi-color-#{$color}-50); + } + } +} + +@mixin panelColorWhite { + // Light Translucent + &[class*='pi-color__opacity'] { + // Light Glass color + background-color: var(--pi-color-white-rgba-03); + &.is-clickable { + &:hover { + // Light Glass color hover + background-color: var(--pi-color-white-rgba-06); + } + } + } + // Light Opaque + &:not([class*='pi-color__opacity']) { + background-color: var(--pi-color-white); + } + // Light & Is stroked + &.is-stroked { + border-color: var(--pi-color-white-900); + } +} + +@mixin alignItems($align-items) { + & > section { + align-items: $align-items; + } +} + +@mixin flexDirection($flex-direction) { + & > section { + flex-direction: $flex-direction; + } +} + +@mixin justifyContent($justify-content) { + & > section { + justify-content: $justify-content; + } +} + +:host { + display: block; + + & > section { + display: flex; + & > header { + display: flex; + justify-content: space-between; + gap: var(--pi-spacing-medium); + } + } + + // Alignment + &.pi-panel__align--center { + @include alignItems(center); + } + &.pi-panel__align--flex-start { + @include alignItems(flex-start); + } + &.pi-panel__align--flex-end { + @include alignItems(flex-end); + } + // Flex direction + &.pi-panel__flex-direction--column { + @include flexDirection(column); + } + &.pi-panel__flex-direction--column-reverse { + @include flexDirection(column-reverse); + } + // Justify + &.pi-panel__justify--flex-start { + @include justifyContent(flex-start); + } + &.pi-panel__justify--flex-end { + @include justifyContent(flex-end); + } + &.pi-panel__justify--center { + @include justifyContent(center); + } + &.pi-panel__justify--space-between { + @include justifyContent(space-between); + } + &.pi-panel__justify--space-evenly { + @include justifyContent(space-evenly); + } + &.pi-panel__justify--space-around { + @include justifyContent(space-around); + } + + // Radius + &.pi-panel__border-radius--small { + border-radius: var(--pi-border-radius-small); + } + &.pi-panel__border-radius--medium { + border-radius: var(--pi-border-radius-medium); + } + &.pi-panel__border-radius--large { + border-radius: var(--pi-border-radius-large); + } + // Colors + + &.pi-color__primary { + @include panelColor(primary); + } + &.pi-color__accent { + @include panelColor(accent); + } + &.pi-color__highlighted { + @include panelColor(highlighted); + } + &.pi-color__success { + @include panelColor(success); + } + &.pi-color__grey { + @include panelColor(grey); + } + &.pi-color__white { + background-color: var(--pi-color-white); + @include panelColorWhite; + } + &.is-stroked { + border: 1px solid; + &.pi-color__white { + border-color: var(--pi-color-grey-25); + } + } + + // Has shadow + &.has-shadow { + box-shadow: var(--pi-box-shadow-panel); + } + + // Padding + &.pi-panel__padding--xxxs { + @include panelPadding(xxx-small); + } + &.pi-panel__padding--xxs { + @include panelPadding(xx-small); + } + &.pi-panel__padding--xs { + @include panelPadding(x-small); + } + + &.pi-panel__padding--s { + @include panelPadding(small); + } + + &.pi-panel__padding--m { + @include panelPadding(medium); + } + + &.pi-panel__padding--l { + @include panelPadding(large); + } + + &.pi-panel__padding--xl { + @include panelPadding(x-large); + } + + &.pi-panel__padding--xxl { + @include panelPadding(xx-large); + } + + // Gap + &.pi-panel__gap--xxxs { + @include panelGap(xxx-small); + } + + &.pi-panel__gap--xxs { + @include panelGap(xx-small); + } + + &.pi-panel__gap--xs { + @include panelGap(x-small); + } + + &.pi-panel__gap--s { + @include panelGap(small); + } + + &.pi-panel__gap--m { + @include panelGap(medium); + } + + &.pi-panel__gap--l { + @include panelGap(large); + } + + &.pi-panel__gap--xl { + @include panelGap(x-large); + } + + &.pi-panel__gap--xxl { + @include panelGap(xx-large); + } + + &.pi-panel__gap--xxxl { + @include panelGap(xxx-large); + } + + &.pi-panel__gap--xxxxl { + @include panelGap(xxxx-large); + } + + &.pi-panel__gap--none { + & > section { + gap: 0; + } + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + // Width + // 2 / 3 + &.pi-panel__width--two-thirds { + max-width: 75%; + } + // 1 / 2 + &.pi-panel__width--half { + max-width: 66.66%; + } + // 1 / 3 + &.pi-panel__width--third { + max-width: 50%; + } + // 1 / 4 + &.pi-panel__width--quarter { + max-width: 33.33%; + } + // 1 / 5 + &.pi-panel__width--fifth { + max-width: 25%; + } + // 1 / 6 + &.pi-panel__width--sixth { + max-width: 20%; + } + } + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + // 2 / 3 + &.pi-panel__width--two-thirds { + width: 66.66%; + max-width: 40rem; + } + // 1 / 2 + &.pi-panel__width--half { + width: 50%; + max-width: 35rem; + } + // 1 / 3 + &.pi-panel__width--third { + width: 33.33%; + max-width: 30rem; + } + // 1 / 4 + &.pi-panel__width--quarter { + width: 25%; + max-width: 17.5rem; + } + // 1 / 5 + &.pi-panel__width--fifth { + width: 20%; + max-width: 15rem; + } + // 1 / 6 + &.pi-panel__width--sixth { + width: 16.66%; + max-width: 12rem; + } + } + } + + // Desktop + &.is-desktop { + // Small + &.pi-panel__height--small { + & > section { + min-height: 20vh; + } + } + // Medium + &.pi-panel__height--medium { + & > section { + min-height: 55vh; + } + } + // Large + &.pi-panel__height--large { + & > section { + min-height: 66.66vh; + } + } + // X Large + &.pi-panel__height--x-large { + & > section { + min-height: 75vh; + } + } + } +} diff --git a/libs/ui/src/lib/ui/panel/panel/panel.component.ts b/libs/ui/src/lib/ui/panel/panel/panel.component.ts index 92d76ae..fb09578 100644 --- a/libs/ui/src/lib/ui/panel/panel/panel.component.ts +++ b/libs/ui/src/lib/ui/panel/panel/panel.component.ts @@ -1,12 +1,12 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { ComponentFamilyClass } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { ComponentFamilyClass } from '../../../styles'; import { PiBasePanelComponent } from '../base-panel.component'; import { NgIf } from '@angular/common'; import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive'; import { PiTextWeightMediumDirective, PiTextWeightLightDirective } from '../../text/directives/text-weights.directive'; import { PiMediumButtonDirective } from '../../button/button.directive'; -import { PiColorGreyDirective } from '../../../util/color/directives/colors.directive'; - +import { PiColorGreyDirective } from '../../../util/color/directives/colors.directive'; + @Component({ selector: 'pi-panel', templateUrl: './panel.component.html', @@ -21,33 +21,33 @@ import { PiColorGreyDirective } from '../../../util/color/directives/colors.dire PiTextWeightLightDirective, PiTextXSmallDirective, ], -}) -export class PiPanelComponent extends PiBasePanelComponent { - @HostBinding('class') get classes(): string { - return [ - 'pi-panel', - ComponentFamilyClass.Panel, - this.alignmentClass, - this.borderRadiusClass, - this.colorClass, - this.flexDirectionClass, - this.gapClass, - this.gridClass, - this.hasShadowClass, - this.heightClass, - this.innerPaddingClass, - this.justifyClass, - this.modeClass, - this.outlineClass, - this.paddingClass, - this.paddingClass, - this.statusClass, - this.widthClass, - this.isStrokedClass, - this.opacityClass, - ].join(' '); - } - - readonly title = input(); - readonly subtitle = input(); -} +}) +export class PiPanelComponent extends PiBasePanelComponent { + @HostBinding('class') get classes(): string { + return [ + 'pi-panel', + ComponentFamilyClass.Panel, + this.alignmentClass, + this.borderRadiusClass, + this.colorClass, + this.flexDirectionClass, + this.gapClass, + this.gridClass, + this.hasShadowClass, + this.heightClass, + this.innerPaddingClass, + this.justifyClass, + this.modeClass, + this.outlineClass, + this.paddingClass, + this.paddingClass, + this.statusClass, + this.widthClass, + this.isStrokedClass, + this.opacityClass, + ].join(' '); + } + + readonly title = input(); + readonly subtitle = input(); +} diff --git a/libs/ui/src/lib/ui/progress/index.ts b/libs/ui/src/lib/ui/progress/index.ts index ae03fec..3a8c736 100644 --- a/libs/ui/src/lib/ui/progress/index.ts +++ b/libs/ui/src/lib/ui/progress/index.ts @@ -1,5 +1,5 @@ - - -export * from './progress-bar/progress-bar.component'; - -export * from './progress-spinner/progress-spinner.component'; + + +export * from './progress-bar/progress-bar.component'; + +export * from './progress-spinner/progress-spinner.component'; diff --git a/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.html b/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.html index af0f4cf..71cf390 100644 --- a/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.html +++ b/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.html @@ -1,2 +1,2 @@ -
{{ label() }}
- +
{{ label() }}
+ diff --git a/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.scss b/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.scss index 7853f2d..6f5bed2 100644 --- a/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.scss +++ b/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.scss @@ -1,31 +1,31 @@ -:host { - display: block; - width: -webkit-fill-available; - & > *:nth-child(n + 2) { - margin-top: var(--pi-spacing-xx-small); - } -} - -html { - // Mobile - &.is-mobile { - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - } - } - // Tablet - &.is-tablet { - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - } - } - // Desktop - &.is-desktop { - } -} +:host { + display: block; + width: -webkit-fill-available; + & > *:nth-child(n + 2) { + margin-top: var(--pi-spacing-xx-small); + } +} + +html { + // Mobile + &.is-mobile { + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + } + } + // Tablet + &.is-tablet { + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + } + } + // Desktop + &.is-desktop { + } +} diff --git a/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.ts b/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.ts index 59b080e..ae31084 100644 --- a/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.ts +++ b/libs/ui/src/lib/ui/progress/progress-bar/progress-bar.component.ts @@ -1,17 +1,17 @@ import { ChangeDetectionStrategy, Component, HostBinding, forwardRef, input } from '@angular/core'; import { MatProgressBar } from '@angular/material/progress-bar'; - - + + @Component({ selector: 'pi-progress-bar', templateUrl: './progress-bar.component.html', styleUrls: ['./progress-bar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressBar, forwardRef(() => PiProgressBarComponent)], -}) -export class PiProgressBarComponent { - @HostBinding('class') className = 'pi-progress-bar'; - - readonly label = input.required(); - readonly value = input.required(); -} +}) +export class PiProgressBarComponent { + @HostBinding('class') className = 'pi-progress-bar'; + + readonly label = input.required(); + readonly value = input.required(); +} diff --git a/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.html b/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.html index 312458f..33c44d6 100644 --- a/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.html +++ b/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.html @@ -1,29 +1,29 @@ - - - - - - - {{ value() }}% - - - - - - {{ value() }}% - - {{ label() }} - + + + + + + + {{ value() }}% + + + + + + {{ value() }}% + + {{ label() }} + diff --git a/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.scss b/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.scss index 3091a07..3dfdb2c 100644 --- a/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.scss +++ b/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.scss @@ -1,140 +1,140 @@ -@mixin progressSpinnerSize( - $large-font-size: var(--pi-font-size-large), - $small-font-size: var(--pi-font-size-medium) -) { - :host { - &.pi-spinner__progress { - & > span { - & > span { - &:nth-child(1) { - font: { - size: $large-font-size; - } - } - &:nth-child(2) { - font: { - size: $small-font-size; - } - } - } - } - } - } -} - -@mixin strokeWidth($box-shadow) { - // Compact - &.pi-spinner__appearance--compact { - .mat-mdc-progress-spinner { - box-shadow: $box-shadow; - } - } -} - -@mixin fontSizesClass( - $value-font-size-small: 1.75rem, - $percentage-font-size-small: var(--pi-font-size-x-small), - $value-font-size-large: var(--pi-font-size-xxx-large), - $percentage-font-size-large: var(--pi-font-size-small) -) { - :host { - // Diameter class - // Small 60 - 70 - &.pi-spinner__diameter--small { - // Value - & > span { - font: { - size: $value-font-size-small; - } - // Percentage - & > span { - font: { - size: $percentage-font-size-small; - } - } - } - } - // Large 110 - 130 - &.pi-spinner__diameter--large { - // Value - & > span { - font: { - size: $value-font-size-large; - } - // Percentage - & > span { - font: { - size: $percentage-font-size-large; - } - } - } - } - } -} - -:host { - display: block; - - & > span { - position: relative; - display: flex; - justify-content: center; - align-items: baseline; - & > span { - color: var(--pi-color-primary); - &:nth-child(1) { - font: { - weight: 700; - } - } - } - } - - // Style Type - // Default - &:not(.pi-spinner__appearance--compact) { - } - // Compact - &.pi-spinner__appearance--compact { - .mat-mdc-progress-spinner { - border-radius: 50%; - } - } - // Stroke width - // 4 - &.pi-spinner__stroke--4 { - @include strokeWidth(0 0 0 var(--pi-spacing-xxx-small) var(--pi-color-grey-25) inset); - } - // 6 - &.pi-spinner__stroke--6 { - @include strokeWidth(0 0 0 0.375rem var(--pi-color-grey-25) inset); - } - // 8 - &.pi-spinner__stroke--8 { - @include strokeWidth(0 0 0 var(--pi-spacing-xx-small) var(--pi-color-grey-25) inset); - } -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - @include progressSpinnerSize; - @include fontSizesClass; - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - @include progressSpinnerSize(var(--pi-font-size-large), var(--pi-font-size-small)); - @include fontSizesClass( - var(--pi-font-size-xxx-large), - var(--pi-font-size-x-small), - var(--pi-font-size-xxxx-large), - var(--pi-font-size-small) - ); - } - } -} +@mixin progressSpinnerSize( + $large-font-size: var(--pi-font-size-large), + $small-font-size: var(--pi-font-size-medium) +) { + :host { + &.pi-spinner__progress { + & > span { + & > span { + &:nth-child(1) { + font: { + size: $large-font-size; + } + } + &:nth-child(2) { + font: { + size: $small-font-size; + } + } + } + } + } + } +} + +@mixin strokeWidth($box-shadow) { + // Compact + &.pi-spinner__appearance--compact { + .mat-mdc-progress-spinner { + box-shadow: $box-shadow; + } + } +} + +@mixin fontSizesClass( + $value-font-size-small: 1.75rem, + $percentage-font-size-small: var(--pi-font-size-x-small), + $value-font-size-large: var(--pi-font-size-xxx-large), + $percentage-font-size-large: var(--pi-font-size-small) +) { + :host { + // Diameter class + // Small 60 - 70 + &.pi-spinner__diameter--small { + // Value + & > span { + font: { + size: $value-font-size-small; + } + // Percentage + & > span { + font: { + size: $percentage-font-size-small; + } + } + } + } + // Large 110 - 130 + &.pi-spinner__diameter--large { + // Value + & > span { + font: { + size: $value-font-size-large; + } + // Percentage + & > span { + font: { + size: $percentage-font-size-large; + } + } + } + } + } +} + +:host { + display: block; + + & > span { + position: relative; + display: flex; + justify-content: center; + align-items: baseline; + & > span { + color: var(--pi-color-primary); + &:nth-child(1) { + font: { + weight: 700; + } + } + } + } + + // Style Type + // Default + &:not(.pi-spinner__appearance--compact) { + } + // Compact + &.pi-spinner__appearance--compact { + .mat-mdc-progress-spinner { + border-radius: 50%; + } + } + // Stroke width + // 4 + &.pi-spinner__stroke--4 { + @include strokeWidth(0 0 0 var(--pi-spacing-xxx-small) var(--pi-color-grey-25) inset); + } + // 6 + &.pi-spinner__stroke--6 { + @include strokeWidth(0 0 0 0.375rem var(--pi-color-grey-25) inset); + } + // 8 + &.pi-spinner__stroke--8 { + @include strokeWidth(0 0 0 var(--pi-spacing-xx-small) var(--pi-color-grey-25) inset); + } +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + @include progressSpinnerSize; + @include fontSizesClass; + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + @include progressSpinnerSize(var(--pi-font-size-large), var(--pi-font-size-small)); + @include fontSizesClass( + var(--pi-font-size-xxx-large), + var(--pi-font-size-x-small), + var(--pi-font-size-xxxx-large), + var(--pi-font-size-small) + ); + } + } +} diff --git a/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.ts b/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.ts index 2265d33..3aebaea 100644 --- a/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.ts +++ b/libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; import { MatProgressSpinner } from '@angular/material/progress-spinner'; import { NgIf } from '@angular/common'; -import { PiProgressBarComponent } from '../progress-bar/progress-bar.component'; +import { PiProgressBarComponent } from '../progress-bar/progress-bar.component'; @Component({ selector: 'pi-progress-spinner', templateUrl: './progress-spinner.component.html', @@ -12,36 +12,36 @@ import { PiProgressBarComponent } from '../progress-bar/progress-bar.component'; NgIf, PiProgressBarComponent, ], -}) -export class PiProgressSpinnerComponent { - @HostBinding('class') - className = 'pi-spinner pi-spinner__progress'; - - @HostBinding('class') get classes(): string { +}) +export class PiProgressSpinnerComponent { + @HostBinding('class') + className = 'pi-spinner pi-spinner__progress'; + + @HostBinding('class') get classes(): string { const appearance = this.appearance(); - const appearanceClass = - appearance !== 'default' && `pi-spinner__appearance--${appearance}`; + const appearanceClass = + appearance !== 'default' && `pi-spinner__appearance--${appearance}`; const strokeWidth = this.strokeWidth(); - const strokeWidthClass = strokeWidth && `pi-spinner__stroke--${strokeWidth}`; + const strokeWidthClass = strokeWidth && `pi-spinner__stroke--${strokeWidth}`; const diameter = this.diameter(); - const smallDiameterClass = - diameter === 60 || (diameter === 70 && 'pi-spinner__diameter--small'); + const smallDiameterClass = + diameter === 60 || (diameter === 70 && 'pi-spinner__diameter--small'); const diameterValue = this.diameter(); - const largeDiameterClass = - diameterValue === 110 || (diameterValue === 130 && 'pi-spinner__diameter--large'); - return [ - 'pi-spinner', - 'pi-spinner__progress', - appearanceClass, - strokeWidthClass, - smallDiameterClass, - largeDiameterClass, - ].join(' '); - } - - readonly value = input.required(); - readonly label = input.required(); - readonly appearance = input<'compact' | 'default'>('default'); - readonly strokeWidth = input<2 | 3 | 4 | 5 | 6 | 7 | 8>(6); - readonly diameter = input.required(); -} + const largeDiameterClass = + diameterValue === 110 || (diameterValue === 130 && 'pi-spinner__diameter--large'); + return [ + 'pi-spinner', + 'pi-spinner__progress', + appearanceClass, + strokeWidthClass, + smallDiameterClass, + largeDiameterClass, + ].join(' '); + } + + readonly value = input.required(); + readonly label = input.required(); + readonly appearance = input<'compact' | 'default'>('default'); + readonly strokeWidth = input<2 | 3 | 4 | 5 | 6 | 7 | 8>(6); + readonly diameter = input.required(); +} diff --git a/libs/ui/src/lib/ui/select/base-select.component.ts b/libs/ui/src/lib/ui/select/base-select.component.ts index 7188ca2..f1d85b7 100644 --- a/libs/ui/src/lib/ui/select/base-select.component.ts +++ b/libs/ui/src/lib/ui/select/base-select.component.ts @@ -9,426 +9,426 @@ import { contentChild, contentChildren, viewChildren, ChangeDetectionStrategy -} from '@angular/core'; -import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { PiFormControl } from '../../util/form-control'; -import { PiSelectOptionComponent } from './select-option/select-option.component'; -import { - SelectColor, - SelectOptionFlexDirection, - SelectOptionSize, - actionIcon, -} from './entities/select.model'; - +} from '@angular/core'; +import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { PiFormControl } from '../../util/form-control'; +import { PiSelectOptionComponent } from './select-option/select-option.component'; +import { + SelectColor, + SelectOptionFlexDirection, + SelectOptionSize, + actionIcon, +} from './entities/select.model'; + @Component({ - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: PiBaseSelectComponent, - multi: true, - }, - ], -}) -export class PiBaseSelectComponent extends PiFormControl { - @HostBinding('class') get commonClasses(): string { - const isDisabledClass = this.disabled ? 'is-disabled' : ''; - return ['pi-select', isDisabledClass].join(' '); - } - - // ====================== - // FORM CONFIGURATION - // ====================== - - /** - * Name of the form control. - */ - readonly formControlName = input.required(); - - /** - * Property used for comparisons. - */ - readonly keyIdProperty = input.required(); - - // ====================== - // SKIN - // ====================== - - /** - * Specifies the layout for the menu. - */ - readonly menuType = input<'default' | 'flex-wrap' | 'custom-grid'>('default'); - - /** - * Defines the type of the select component. - */ - readonly type = input<'default' | 'dropdown'>('default'); - - /** - * The appearance style of the select component. - */ - - readonly appearance = input<'fill' | 'outline' | 'ghost'>('fill'); - - /** - * The type of the input. - */ - readonly pickedOptionType = input<'button' | 'input'>('input'); - - /** - * Defines the color of the select component and its child components. - */ - readonly color = input('primary'); - - /** - * Defines the color of the select component and its child components. - */ - readonly menuColor = input<'white' | 'transparent'>('white'); - - /** - * The flex direction property binded in the select component is used to bind - * the pre definded select option flex direction property. - */ - - readonly flexDirection = input('row'); - - /** - * The text align property defines if the picked option text in type dropdown cases and - * can extends the text alignment from the selec option when we use Back End data. - */ - - readonly textAlign = input<'left' | 'center'>('left'); - /** - * An optional icon for the select. - */ - readonly icon = input(); - - /** - * An optional icon for the select. - */ - readonly actionIcon = input('chevron-forward'); - - // ====================== - // CONTENT & DATA - // ====================== - - /** - * List of selectable options. - */ - readonly options = input>([]); - - /** - * An optional label for the select. - */ - readonly label = input(); - - /** - * Placeholder for the select when no option is selected. - */ - readonly placeholder = input(); - - /** - * Defines the select an select option size in picked option type button cases - */ - readonly size = input<'small' | 'medium'>('medium'); - - - /** - * Defines if the picked option is responsive or not (ie. if it disappears in small devices or not) - */ - readonly isResponsive = input(true); - - // ====================== - // CONTENT PROJECTIONS - // ====================== - - /** - * Provides a reference to the custom template for the options if provided. - */ - readonly optionTemplateRef = contentChild.required>('optionTemplate'); - - /** - * Provides a reference to the custom template for the selected item if provided. - */ - readonly selectedTemplateRef = contentChild.required>('selectedTemplate'); - - /** - * A query list of all the child option components that are content projected from an external consumer. - * These components are typically passed into this component's content slot from outside. - */ - readonly childrenOptionsComponents = contentChildren(PiSelectOptionComponent); - - /** - * A query list of native element references for the child option components - * that are content projected from an external consumer. - * This provides direct access to their corresponding DOM elements. - */ - readonly childrenOptionsEl = contentChildren(PiSelectOptionComponent, { read: ElementRef }); - - /** - * A query list of all the child option components that are directly defined (view children) - * within this component's template. - * These are the default option components provided by the component itself. - */ - readonly viewChildOptionsComponents = viewChildren(PiSelectOptionComponent); - - /** - * A query list of native element references for the child option components - * that are directly defined (view children) within this component's template. - * This provides direct access to their corresponding DOM elements. - */ - readonly viewChildOptionsEl = viewChildren(PiSelectOptionComponent, { read: ElementRef }); - - constructor( - protected el: ElementRef, - protected override injector: Injector, - protected readonly _renderer: Renderer2 - ) { - super(injector); - } - - trackByFn(index: number): number | undefined { - return index; - } - - /** - * Returns the FormControl associated with the formControlName. - */ - get control(): FormControl { - return this.controlContainer.control?.get(this.formControlName()) as FormControl; - } - - /** - * Retrieves the native element of the select. - */ - get selectElement(): HTMLElement { - return this.el.nativeElement; - } - - /** - * Determines if the control has an error and returns an appropriate class. - */ - get errorClass(): string { - return this.control?.errors ? 'has-error' : ''; - } - - /** - * Toggles the visibility of the dropdown menu. - */ - onToggleDropdown(): void { - if (this.disabled) return; - if (this.isMenuVisible()) { - this.setIsHidden(); - } else { - this.setIsVisible(); - } - } - - /** - * Sets the state of the component to visible. - */ - protected setIsVisible(): void { - this.selectElement && this._renderer.addClass(this.selectElement, 'is-expanded'); - } - - /** - * Sets the state of the component to hidden. - */ - protected setIsHidden(): void { - this.selectElement && this._renderer.removeClass(this.selectElement, 'is-expanded'); - } - - /** - * Checks if the menu (options) is visible. - * @returns True if the menu is visible, false otherwise. - */ - protected isMenuVisible(): boolean { - return this.selectElement.classList.contains('is-expanded'); - } - - /** - * Manage the Select Option size - * - * When the select option is not instanced in the template, for BE data - */ - - get selectOptionSize(): SelectOptionSize { - switch (true) { - case this.type() === 'dropdown' && this.pickedOptionType() === 'input': - return SelectOptionSize.Small; - case this.type() === 'dropdown' && this.pickedOptionType() === 'button' && this.size() === 'medium': - return SelectOptionSize.Medium; - case this.type() === 'dropdown' && this.pickedOptionType() === 'button' && this.size() === 'small': - return SelectOptionSize.Small; - case this.type() === 'default' && this.menuType() === 'flex-wrap': - return SelectOptionSize.Large; - case this.type() === 'default' && this.menuType() === 'default' && this.appearance() === 'ghost': - return SelectOptionSize.Medium; - case this.type() === 'default' && this.menuType() === 'default' && this.appearance() !== 'ghost': - return SelectOptionSize.Small; - default: - return SelectOptionSize.Medium; - // Default value if no one of the cases match - } - } - - /** - * Get SKIN scss Classes - */ - - /** - * Manage the Select & Select Multiple appearance property - */ - protected get appearanceClass(): string | false | undefined { + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: PiBaseSelectComponent, + multi: true, + }, + ], +}) +export class PiBaseSelectComponent extends PiFormControl { + @HostBinding('class') get commonClasses(): string { + const isDisabledClass = this.disabled ? 'is-disabled' : ''; + return ['pi-select', isDisabledClass].join(' '); + } + + // ====================== + // FORM CONFIGURATION + // ====================== + + /** + * Name of the form control. + */ + readonly formControlName = input.required(); + + /** + * Property used for comparisons. + */ + readonly keyIdProperty = input.required(); + + // ====================== + // SKIN + // ====================== + + /** + * Specifies the layout for the menu. + */ + readonly menuType = input<'default' | 'flex-wrap' | 'custom-grid'>('default'); + + /** + * Defines the type of the select component. + */ + readonly type = input<'default' | 'dropdown'>('default'); + + /** + * The appearance style of the select component. + */ + + readonly appearance = input<'fill' | 'outline' | 'ghost'>('fill'); + + /** + * The type of the input. + */ + readonly pickedOptionType = input<'button' | 'input'>('input'); + + /** + * Defines the color of the select component and its child components. + */ + readonly color = input('primary'); + + /** + * Defines the color of the select component and its child components. + */ + readonly menuColor = input<'white' | 'transparent'>('white'); + + /** + * The flex direction property binded in the select component is used to bind + * the pre definded select option flex direction property. + */ + + readonly flexDirection = input('row'); + + /** + * The text align property defines if the picked option text in type dropdown cases and + * can extends the text alignment from the selec option when we use Back End data. + */ + + readonly textAlign = input<'left' | 'center'>('left'); + /** + * An optional icon for the select. + */ + readonly icon = input(); + + /** + * An optional icon for the select. + */ + readonly actionIcon = input('chevron-forward'); + + // ====================== + // CONTENT & DATA + // ====================== + + /** + * List of selectable options. + */ + readonly options = input>([]); + + /** + * An optional label for the select. + */ + readonly label = input(); + + /** + * Placeholder for the select when no option is selected. + */ + readonly placeholder = input(); + + /** + * Defines the select an select option size in picked option type button cases + */ + readonly size = input<'small' | 'medium'>('medium'); + + + /** + * Defines if the picked option is responsive or not (ie. if it disappears in small devices or not) + */ + readonly isResponsive = input(true); + + // ====================== + // CONTENT PROJECTIONS + // ====================== + + /** + * Provides a reference to the custom template for the options if provided. + */ + readonly optionTemplateRef = contentChild.required>('optionTemplate'); + + /** + * Provides a reference to the custom template for the selected item if provided. + */ + readonly selectedTemplateRef = contentChild.required>('selectedTemplate'); + + /** + * A query list of all the child option components that are content projected from an external consumer. + * These components are typically passed into this component's content slot from outside. + */ + readonly childrenOptionsComponents = contentChildren(PiSelectOptionComponent); + + /** + * A query list of native element references for the child option components + * that are content projected from an external consumer. + * This provides direct access to their corresponding DOM elements. + */ + readonly childrenOptionsEl = contentChildren(PiSelectOptionComponent, { read: ElementRef }); + + /** + * A query list of all the child option components that are directly defined (view children) + * within this component's template. + * These are the default option components provided by the component itself. + */ + readonly viewChildOptionsComponents = viewChildren(PiSelectOptionComponent); + + /** + * A query list of native element references for the child option components + * that are directly defined (view children) within this component's template. + * This provides direct access to their corresponding DOM elements. + */ + readonly viewChildOptionsEl = viewChildren(PiSelectOptionComponent, { read: ElementRef }); + + constructor( + protected el: ElementRef, + protected override injector: Injector, + protected readonly _renderer: Renderer2 + ) { + super(injector); + } + + trackByFn(index: number): number | undefined { + return index; + } + + /** + * Returns the FormControl associated with the formControlName. + */ + get control(): FormControl { + return this.controlContainer.control?.get(this.formControlName()) as FormControl; + } + + /** + * Retrieves the native element of the select. + */ + get selectElement(): HTMLElement { + return this.el.nativeElement; + } + + /** + * Determines if the control has an error and returns an appropriate class. + */ + get errorClass(): string { + return this.control?.errors ? 'has-error' : ''; + } + + /** + * Toggles the visibility of the dropdown menu. + */ + onToggleDropdown(): void { + if (this.disabled) return; + if (this.isMenuVisible()) { + this.setIsHidden(); + } else { + this.setIsVisible(); + } + } + + /** + * Sets the state of the component to visible. + */ + protected setIsVisible(): void { + this.selectElement && this._renderer.addClass(this.selectElement, 'is-expanded'); + } + + /** + * Sets the state of the component to hidden. + */ + protected setIsHidden(): void { + this.selectElement && this._renderer.removeClass(this.selectElement, 'is-expanded'); + } + + /** + * Checks if the menu (options) is visible. + * @returns True if the menu is visible, false otherwise. + */ + protected isMenuVisible(): boolean { + return this.selectElement.classList.contains('is-expanded'); + } + + /** + * Manage the Select Option size + * + * When the select option is not instanced in the template, for BE data + */ + + get selectOptionSize(): SelectOptionSize { + switch (true) { + case this.type() === 'dropdown' && this.pickedOptionType() === 'input': + return SelectOptionSize.Small; + case this.type() === 'dropdown' && this.pickedOptionType() === 'button' && this.size() === 'medium': + return SelectOptionSize.Medium; + case this.type() === 'dropdown' && this.pickedOptionType() === 'button' && this.size() === 'small': + return SelectOptionSize.Small; + case this.type() === 'default' && this.menuType() === 'flex-wrap': + return SelectOptionSize.Large; + case this.type() === 'default' && this.menuType() === 'default' && this.appearance() === 'ghost': + return SelectOptionSize.Medium; + case this.type() === 'default' && this.menuType() === 'default' && this.appearance() !== 'ghost': + return SelectOptionSize.Small; + default: + return SelectOptionSize.Medium; + // Default value if no one of the cases match + } + } + + /** + * Get SKIN scss Classes + */ + + /** + * Manage the Select & Select Multiple appearance property + */ + protected get appearanceClass(): string | false | undefined { const appearance = this.appearance(); - return ( - this.menuType() !== 'custom-grid' && - appearance && - `pi-select__appearance--${appearance}` - ); - } - - /** - * Manage the Select & Select Multiple Theming Color Class property - * - * This property affectes to: - * - * A) the picked option in type !== 'dropdown'. - * - * B) the select options to, binding a class to manage the options. - * - * color depending on the user profile. - */ - protected get colorClass(): string | undefined { + return ( + this.menuType() !== 'custom-grid' && + appearance && + `pi-select__appearance--${appearance}` + ); + } + + /** + * Manage the Select & Select Multiple Theming Color Class property + * + * This property affectes to: + * + * A) the picked option in type !== 'dropdown'. + * + * B) the select options to, binding a class to manage the options. + * + * color depending on the user profile. + */ + protected get colorClass() { const color = this.color(); - return this.menuType() !== 'custom-grid' && color && `pi-color__${color}`; - } - - /** - * Manage the Select & Select Multiple Menu Color Class property - * - * This property can be modified from the default one (white) specially when type !== 'dropdown'. - */ - protected get menuColorClass(): string | undefined { + return this.menuType() !== 'custom-grid' && color && `pi-color__${color}`; + } + + /** + * Manage the Select & Select Multiple Menu Color Class property + * + * This property can be modified from the default one (white) specially when type !== 'dropdown'. + */ + protected get menuColorClass(): string | undefined { const menuColor = this.menuColor(); - return this.menuType() !== 'custom-grid' && menuColor !== 'white' - ? `pi-select__menu-color--${menuColor}` - : ''; - } - - /** - * Manage the Select & Select Multiple Menu Type Class property - * - * This property defines if: - * - * A) the Menu Type ==> flex direction: column - * as default property - * - * B) the Menu Type ==> flex direction: row && flex-wrap: wrap - * to display the select options as a mosaic in the page - */ - protected get menuTypeClass(): string | undefined { + return this.menuType() !== 'custom-grid' && menuColor !== 'white' + ? `pi-select__menu-color--${menuColor}` + : ''; + } + + /** + * Manage the Select & Select Multiple Menu Type Class property + * + * This property defines if: + * + * A) the Menu Type ==> flex direction: column + * as default property + * + * B) the Menu Type ==> flex direction: row && flex-wrap: wrap + * to display the select options as a mosaic in the page + */ + protected get menuTypeClass(): string | undefined { const menuType = this.menuType(); - return menuType === 'default' - ? 'pi-select__menu-type--column' - : `pi-select__menu-type--${menuType}`; - } - - /** - * Manage the Select & Select Multiple Picked Option Type Class property - * This only applies to the dropdown - * - * This property defines if: - * - * A) the Picked Option Type === Input - * it means that the picked option emulate a Field or an Input. - * - * B) the Picked Option Type === Button - * it means that the picked option emulate a Button. - */ - protected get pickedOptionTypeClass(): string | undefined { + return menuType === 'default' + ? 'pi-select__menu-type--column' + : `pi-select__menu-type--${menuType}`; + } + + /** + * Manage the Select & Select Multiple Picked Option Type Class property + * This only applies to the dropdown + * + * This property defines if: + * + * A) the Picked Option Type === Input + * it means that the picked option emulate a Field or an Input. + * + * B) the Picked Option Type === Button + * it means that the picked option emulate a Button. + */ + protected get pickedOptionTypeClass() { const pickedOptionType = this.pickedOptionType(); - return ( - this.type() === 'dropdown' && - this.menuType() !== 'custom-grid' && - pickedOptionType && - `pi-select__picked-option-type--${pickedOptionType}` - ); - } - - /** - * Manage the Select & Select Multiple Type Class property - * This defines if: - * - * This property defines if: - * - * A) - * a.1) Large device: - * the select options are displayed in a Dropdown menu, - * with an absolut position (nearest ancestor). - * - * a.2) Small device: - * the select options are displayed in a Hub menu, - * with a fixed position (viewport). - * When the menu is visible, it appears over the navbar. - * - * B) The select options are displayed in a default menu, - * with menu type flex direction or column, - * in a static positioned menu. - */ - protected get typeClass(): string | undefined { + return ( + this.type() === 'dropdown' && + this.menuType() !== 'custom-grid' && + pickedOptionType && + `pi-select__picked-option-type--${pickedOptionType}` + ); + } + + /** + * Manage the Select & Select Multiple Type Class property + * This defines if: + * + * This property defines if: + * + * A) + * a.1) Large device: + * the select options are displayed in a Dropdown menu, + * with an absolut position (nearest ancestor). + * + * a.2) Small device: + * the select options are displayed in a Hub menu, + * with a fixed position (viewport). + * When the menu is visible, it appears over the navbar. + * + * B) The select options are displayed in a default menu, + * with menu type flex direction or column, + * in a static positioned menu. + */ + protected get typeClass(): string | undefined { const type = this.type(); - return type && `pi-select__type--${type}`; - } - - /** - * Manage the Select & Select Multiple Text Alignment property - * - * This property can only be used in two cases - * - * A) Select Type Default && - * - * This defines if the text alignment and justify content is center or left and flex start: - * - * This property defines: - * - * A) The picked option text alignment in Select Type === Dropdown cases. - * - * B) The select option text aligment and justify content. - * - */ - protected get textAlignClass(): string | boolean { + return type && `pi-select__type--${type}`; + } + + /** + * Manage the Select & Select Multiple Text Alignment property + * + * This property can only be used in two cases + * + * A) Select Type Default && + * + * This defines if the text alignment and justify content is center or left and flex start: + * + * This property defines: + * + * A) The picked option text alignment in Select Type === Dropdown cases. + * + * B) The select option text aligment and justify content. + * + */ + protected get textAlignClass(): string | boolean { const menuType = this.menuType(); const textAlign = this.textAlign(); - return (textAlign !== 'left' && this.pickedOptionType() === 'button') || - (menuType === 'flex-wrap' && this.flexDirection() === 'row') || - menuType === 'default' - ? `pi-select__text-align--${textAlign}` - : ''; - } - - /** - * Manage the Select & Select Multiple Picked Option and Select Options Sizes - * - * This property can only be used in one case - * - * When the Select Picked Option Type === Button - * - */ - protected get sizeClass(): string | boolean { + return (textAlign !== 'left' && this.pickedOptionType() === 'button') || + (menuType === 'flex-wrap' && this.flexDirection() === 'row') || + menuType === 'default' + ? `pi-select__text-align--${textAlign}` + : ''; + } + + /** + * Manage the Select & Select Multiple Picked Option and Select Options Sizes + * + * This property can only be used in one case + * + * When the Select Picked Option Type === Button + * + */ + protected get sizeClass(): string | boolean { const size = this.size(); - return this.pickedOptionType() === 'button' && size ? `pi-select__${size}` : ''; - } - - /** - * Manage the Select & Select Multiple Picked Option Responsive Class - * - * This property can only be used in one case - * - * When the Select Picked Option Type === Button - */ - protected get isResponsiveClass(): string | boolean { - return this.pickedOptionType() === 'button' && this.isResponsive() ? 'is-responsive' : ''; -} -} + return this.pickedOptionType() === 'button' && size ? `pi-select__${size}` : ''; + } + + /** + * Manage the Select & Select Multiple Picked Option Responsive Class + * + * This property can only be used in one case + * + * When the Select Picked Option Type === Button + */ + protected get isResponsiveClass(): string | boolean { + return this.pickedOptionType() === 'button' && this.isResponsive() ? 'is-responsive' : ''; +} +} diff --git a/libs/ui/src/lib/ui/select/entities/select.model.ts b/libs/ui/src/lib/ui/select/entities/select.model.ts index 9362b7c..60f45cd 100644 --- a/libs/ui/src/lib/ui/select/entities/select.model.ts +++ b/libs/ui/src/lib/ui/select/entities/select.model.ts @@ -1,30 +1,30 @@ -import { styleType } from '../../../styles'; -import { status } from '../../../util/status'; - -export interface SelectOption { - id: number; - name?: string; - value: any; - initials?: string; - description?: string; - disabled?: boolean; - icon?: string; -} - -export type actionIcon = 'chevron-forward' | 'filter' | 'sort'; - -export enum SelectOptionSize { - Small = 'small', - Medium = 'medium', - Large = 'large', -} - -export type SelectOptionFlexDirection = 'row' | 'column' | 'row-reverse'; - -export const StatusRadioColorMap = new Map([ - ['disabled', 'grey'], - ['info', 'white'], - ['success', 'primary'], -]); - +import { styleType } from '../../../styles'; +import { status } from '../../../util/status'; + +export interface SelectOption { + id: number; + name?: string; + value: any; + initials?: string; + description?: string; + disabled?: boolean; + icon?: string; +} + +export type actionIcon = 'chevron-forward' | 'filter' | 'sort'; + +export enum SelectOptionSize { + Small = 'small', + Medium = 'medium', + Large = 'large', +} + +export type SelectOptionFlexDirection = 'row' | 'column' | 'row-reverse'; + +export const StatusRadioColorMap = new Map([ + ['disabled', 'grey'], + ['info', 'white'], + ['success', 'primary'], +]); + export type SelectColor = 'grey' | 'primary' | 'accent' | 'highlighted' | 'warn' | 'success'; \ No newline at end of file diff --git a/libs/ui/src/lib/ui/select/index.ts b/libs/ui/src/lib/ui/select/index.ts index c8c3514..675923c 100644 --- a/libs/ui/src/lib/ui/select/index.ts +++ b/libs/ui/src/lib/ui/select/index.ts @@ -1,12 +1,12 @@ - - -export * from './select-multiple/select-multiple.component'; -export * from './select-option/select-option.component'; -export * from './select-period/select-period.component'; -export * from './select/select.component'; - -export * from './entities/select.model'; - -export * from './base-select.component'; - -export * from './select-carousel/select-carousel.component'; + + +export * from './select-multiple/select-multiple.component'; +export * from './select-option/select-option.component'; +export * from './select-period/select-period.component'; +export * from './select/select.component'; + +export * from './entities/select.model'; + +export * from './base-select.component'; + +export * from './select-carousel/select-carousel.component'; diff --git a/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.html b/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.html index f068642..3bddd1c 100644 --- a/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.html +++ b/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.html @@ -1,38 +1,38 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.scss b/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.scss index b2b9967..d215e00 100644 --- a/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.scss +++ b/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.scss @@ -1,8 +1,8 @@ -:host { - .pi-select-options-menu { - .pi-select__carousel--option { - display: flex; - justify-content: center; - } - } -} +:host { + .pi-select-options-menu { + .pi-select__carousel--option { + display: flex; + justify-content: center; + } + } +} diff --git a/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.ts b/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.ts index 2709655..8099162 100644 --- a/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.ts +++ b/libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.ts @@ -8,20 +8,20 @@ import { Injector, Renderer2, input -} from '@angular/core'; +} from '@angular/core'; import { toObservable } from '@angular/core/rxjs-interop'; -import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { TranslateService, TranslatePipe } from '@ngx-translate/core'; -import _ from 'lodash'; -import { merge } from 'rxjs'; -import { PiBaseSelectComponent } from '../base-select.component'; -import { PiSelectOptionComponent } from '../select-option/select-option.component'; -import { Device } from '../../../util/device-configs'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { TranslateService, TranslatePipe } from '@ngx-translate/core'; +import _ from 'lodash'; +import { merge } from 'rxjs'; +import { PiBaseSelectComponent } from '../base-select.component'; +import { PiSelectOptionComponent } from '../select-option/select-option.component'; +import { Device } from '../../../util/device-configs'; import { justify } from '../../../styles'; import { PiCarouselComponent } from '../../carousel/carousel/carousel.component'; import { NgFor, NgTemplateOutlet } from '@angular/common'; -import { PiCarouselItemDirective } from '../../carousel/carousel.directive'; - +import { PiCarouselItemDirective } from '../../carousel/carousel.directive'; + @Component({ selector: 'pi-select-carousel', templateUrl: './select-carousel.component.html', @@ -42,177 +42,177 @@ import { PiCarouselItemDirective } from '../../carousel/carousel.directive'; NgTemplateOutlet, TranslatePipe, ], -}) -export class PiSelectCarouselComponent extends PiBaseSelectComponent implements AfterContentInit { - /** - * Binds a CSS class name to the host element. - * Represents the default class for the select component. - */ - @HostBinding('class') get classes(): string { - return [ - 'pi-select__carousel', - this.appearanceClass, - this.colorClass, - this.menuColorClass, - this.menuTypeClass, - this.pickedOptionTypeClass, - this.textAlignClass, - this.typeClass, - ].join(' '); - } - - //CAROUSEL PROPERTIES - readonly device = input(); - - readonly itemsDesktop = input.required(); - - readonly itemsTablet = input(); - - readonly itemsMobile = input(); - - readonly itemWidth = input(); - - readonly movePerPage = input(); - - readonly hideSwipeButtons = input(); - - readonly isDraggable = input(); - - readonly justifyCarousel = input(); - - /** - * Component's constructor. Initializes the component with required services. - * @param translateService - Service used for translating option names. - * @param el - Element reference of the component. - * @param injector - Injector to get instances of dependencies. - * @param _renderer - Renderer to modify native elements. - */ - constructor( - private readonly translateService: TranslateService, - protected override el: ElementRef, - protected override injector: Injector, - protected override readonly _renderer: Renderer2, - private _cdr: ChangeDetectorRef - ) { - super(el, injector, _renderer); - } - - /** - * Getter for the value of the control. - * @returns The value of the control as a string. - */ - get controlValue(): any { - return this.control.value; - } - - /** - * Getter for the selected option based on the control value. - * @returns The selected option. - */ - get selectedOption(): any { - return this.options().find((option) => _.isEqual(this.controlValue, option)); - } - - /** - * Getter for the name of the selected option. - * Uses the `translateService` to get the translated name. - * @returns The translated name of the selected option. - */ - get selectedOptionsName(): Array { - return this.translateService.instant(this.selectedOption.name); - } - - /** - * Angular lifecycle hook that is called after Angular has fully initialized - * a component's content. This method sets up reactive subscriptions to listen - * for changes in either content children or view children. - * - * The method uses the `merge` RxJS operator to combine streams of changes - * from both `childrenOptionsComponents` (content children) and - * `viewChildOptionsComponents` (view children). This ensures that whenever - * any changes occur in either of the child lists, the visual state of the - * select options is updated appropriately. - * - * Using `Promise.resolve().then(...)`, the method ensures that the - * `updateChildrenOptionsSelectedState` method is executed in the next - * microtask, after any ongoing change detection cycles are completed. - * This approach ensures consistent and correct behavior in all scenarios. - * - * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to - * set the initial state of the child options based on the current value of - * `selectedOption`. - */ - ngAfterContentInit(): void { - this.control.setValue(this.selectedOption); - merge( +}) +export class PiSelectCarouselComponent extends PiBaseSelectComponent implements AfterContentInit { + /** + * Binds a CSS class name to the host element. + * Represents the default class for the select component. + */ + @HostBinding('class') get classes(): string { + return [ + 'pi-select__carousel', + this.appearanceClass, + this.colorClass, + this.menuColorClass, + this.menuTypeClass, + this.pickedOptionTypeClass, + this.textAlignClass, + this.typeClass, + ].join(' '); + } + + //CAROUSEL PROPERTIES + readonly device = input(); + + readonly itemsDesktop = input.required(); + + readonly itemsTablet = input(); + + readonly itemsMobile = input(); + + readonly itemWidth = input(); + + readonly movePerPage = input(); + + readonly hideSwipeButtons = input(); + + readonly isDraggable = input(); + + readonly justifyCarousel = input(); + + /** + * Component's constructor. Initializes the component with required services. + * @param translateService - Service used for translating option names. + * @param el - Element reference of the component. + * @param injector - Injector to get instances of dependencies. + * @param _renderer - Renderer to modify native elements. + */ + constructor( + private readonly translateService: TranslateService, + protected override el: ElementRef, + protected override injector: Injector, + protected override readonly _renderer: Renderer2, + private _cdr: ChangeDetectorRef + ) { + super(el, injector, _renderer); + } + + /** + * Getter for the value of the control. + * @returns The value of the control as a string. + */ + get controlValue(): any { + return this.control.value; + } + + /** + * Getter for the selected option based on the control value. + * @returns The selected option. + */ + get selectedOption(): any { + return this.options().find((option) => _.isEqual(this.controlValue, option)); + } + + /** + * Getter for the name of the selected option. + * Uses the `translateService` to get the translated name. + * @returns The translated name of the selected option. + */ + get selectedOptionsName(): Array { + return this.translateService.instant(this.selectedOption.name); + } + + /** + * Angular lifecycle hook that is called after Angular has fully initialized + * a component's content. This method sets up reactive subscriptions to listen + * for changes in either content children or view children. + * + * The method uses the `merge` RxJS operator to combine streams of changes + * from both `childrenOptionsComponents` (content children) and + * `viewChildOptionsComponents` (view children). This ensures that whenever + * any changes occur in either of the child lists, the visual state of the + * select options is updated appropriately. + * + * Using `Promise.resolve().then(...)`, the method ensures that the + * `updateChildrenOptionsSelectedState` method is executed in the next + * microtask, after any ongoing change detection cycles are completed. + * This approach ensures consistent and correct behavior in all scenarios. + * + * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to + * set the initial state of the child options based on the current value of + * `selectedOption`. + */ + ngAfterContentInit(): void { + this.control.setValue(this.selectedOption); + merge( toObservable(this.childrenOptionsComponents, { injector: this.injector }), - toObservable(this.viewChildOptionsComponents, { injector: this.injector }), - this.control.valueChanges - ).subscribe(() => { - Promise.resolve().then(() => { - this.updateChildrenOptionsSelectedState(this.selectedOption); - }); - }); - } - - /** - * Handles the logic for selecting an option. - * Sets the control value to the value of the selected option and updates child states. - * @param option - The option to be selected. - */ - onSelectOption(option: any) { - this.control.setValue(option); - this.updateChildrenOptionsSelectedState(option); - } - - onItemChanged(event: number) { - this.onSelectOption(this.options()[event]); - } - - /** - * Updates the visual state of child options based on the selected option. - * - * This method first determines whether the child options are content projected - * from the parent or are internally defined within the component. Depending on - * the source, it then updates the visual state of each child option accordingly. - * - * @param selectedOption - The currently selected option. - */ - private updateChildrenOptionsSelectedState(selectedOption: any): void { - // Array of child option components to work with. - let childrenOptionsComponent: readonly PiSelectOptionComponent[]; - // Reference to the child option elements for DOM manipulation. - let childrenOptionsElementRef: readonly ElementRef[]; - - // Check if we have child options that are content projected from a parent component. + toObservable(this.viewChildOptionsComponents, { injector: this.injector }), + this.control.valueChanges + ).subscribe(() => { + Promise.resolve().then(() => { + this.updateChildrenOptionsSelectedState(this.selectedOption); + }); + }); + } + + /** + * Handles the logic for selecting an option. + * Sets the control value to the value of the selected option and updates child states. + * @param option - The option to be selected. + */ + onSelectOption(option: any) { + this.control.setValue(option); + this.updateChildrenOptionsSelectedState(option); + } + + onItemChanged(event: number) { + this.onSelectOption(this.options()[event]); + } + + /** + * Updates the visual state of child options based on the selected option. + * + * This method first determines whether the child options are content projected + * from the parent or are internally defined within the component. Depending on + * the source, it then updates the visual state of each child option accordingly. + * + * @param selectedOption - The currently selected option. + */ + private updateChildrenOptionsSelectedState(selectedOption: any): void { + // Array of child option components to work with. + let childrenOptionsComponent: readonly PiSelectOptionComponent[]; + // Reference to the child option elements for DOM manipulation. + let childrenOptionsElementRef: readonly ElementRef[]; + + // Check if we have child options that are content projected from a parent component. const childrenOptionsComponents = this.childrenOptionsComponents(); - if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { - childrenOptionsComponent = childrenOptionsComponents; - childrenOptionsElementRef = this.childrenOptionsEl(); - } else { - // If not, it means they're internally defined (default), so we fetch from viewChildren. - childrenOptionsComponent = this.viewChildOptionsComponents(); - childrenOptionsElementRef = this.viewChildOptionsEl(); - } - - // Update the visual state of each child option. - childrenOptionsComponent?.forEach((childOption, index) => { - const isSelected = selectedOption - ? selectedOption[this.keyIdProperty()] === childOption['id'] - : false; - // If the current child option matches the selected option, highlight it. - if (isSelected) { - this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); - childOption.isSelected.set(true); - } else { - // Otherwise, ensure it is not highlighted. - this._renderer.removeClass( - childrenOptionsElementRef[index]?.nativeElement, - 'is-selected' - ); - childOption.isSelected.set(false); - } - }); - this._cdr.markForCheck(); - } -} + if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { + childrenOptionsComponent = childrenOptionsComponents; + childrenOptionsElementRef = this.childrenOptionsEl(); + } else { + // If not, it means they're internally defined (default), so we fetch from viewChildren. + childrenOptionsComponent = this.viewChildOptionsComponents(); + childrenOptionsElementRef = this.viewChildOptionsEl(); + } + + // Update the visual state of each child option. + childrenOptionsComponent?.forEach((childOption, index) => { + const isSelected = selectedOption + ? selectedOption[this.keyIdProperty()] === childOption['id'] + : false; + // If the current child option matches the selected option, highlight it. + if (isSelected) { + this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); + childOption.isSelected.set(true); + } else { + // Otherwise, ensure it is not highlighted. + this._renderer.removeClass( + childrenOptionsElementRef[index]?.nativeElement, + 'is-selected' + ); + childOption.isSelected.set(false); + } + }); + this._cdr.markForCheck(); + } +} diff --git a/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.html b/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.html index 22aa5d1..c0cde95 100644 --- a/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.html +++ b/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.html @@ -1,171 +1,171 @@ - - - -
- -
- - {{ - (selectedOptionsNames?.join(', ') | truncate : 33) || (label() | translate) - }} -
- -
- - - - - -
- - -
- - - - {{ - selectedOptionsNames?.join(', ') | truncate : 33 || (placeholder() | translate) - }} - - - - - - -
-
- - - - -
- - -
- - - {{ - selectedOptionsNames?.join(', ') | truncate : 33 || (placeholder() | translate) - }} - - - - - - -
-
- - - - - - - + + + +
+ +
+ + {{ + (selectedOptionsNames?.join(', ') | truncate : 33) || (label() | translate) + }} +
+ +
+ + + + + +
+ + +
+ + + + {{ + selectedOptionsNames?.join(', ') | truncate : 33 || (placeholder() | translate) + }} + + + + + + +
+
+ + + + +
+ + +
+ + + {{ + selectedOptionsNames?.join(', ') | truncate : 33 || (placeholder() | translate) + }} + + + + + + +
+
+ + + + + + + diff --git a/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.scss b/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.scss index 9173052..889ed34 100644 --- a/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.scss +++ b/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.scss @@ -1,44 +1,44 @@ -:host { - // Select Multiple - &.pi-select__multiple { - // Options menu - .pi-select-options-menu { - // Options menu bottom action bar - & > footer { - padding-right: var(--pi-spacing-small); - & > span { - display: flex; - justify-content: center; - align-items: flex-end; - height: calc(var(--pi-spacing-xxx-large) + var(--pi-spacing-xx-small)); - border-top: 1px solid; - border-color: var(--pi-color-grey-75); - } - &::before { - content: ''; - border-color: var(--pi-color-grey-75); - } - } - } - - // Type - // Dropdown - &.pi-select__type--dropdown { - .pi-select-options-menu { - flex-direction: column; - } - } - &:not(.pi-select__type--dropdown) { - .pi-select-options-menu { - & > .pi-select-options-menu__select-all { - display: flex; - gap: var(--pi-spacing-x-small); - align-items: center; - } - & > .pi-select-options-menu__select-all + .pi-select-options-menu__options { - margin-top: var(--pi-spacing-x-large); - } - } - } - } -} +:host { + // Select Multiple + &.pi-select__multiple { + // Options menu + .pi-select-options-menu { + // Options menu bottom action bar + & > footer { + padding-right: var(--pi-spacing-small); + & > span { + display: flex; + justify-content: center; + align-items: flex-end; + height: calc(var(--pi-spacing-xxx-large) + var(--pi-spacing-xx-small)); + border-top: 1px solid; + border-color: var(--pi-color-grey-75); + } + &::before { + content: ''; + border-color: var(--pi-color-grey-75); + } + } + } + + // Type + // Dropdown + &.pi-select__type--dropdown { + .pi-select-options-menu { + flex-direction: column; + } + } + &:not(.pi-select__type--dropdown) { + .pi-select-options-menu { + & > .pi-select-options-menu__select-all { + display: flex; + gap: var(--pi-spacing-x-small); + align-items: center; + } + & > .pi-select-options-menu__select-all + .pi-select-options-menu__options { + margin-top: var(--pi-spacing-x-large); + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.ts b/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.ts index cc579e6..15e742f 100644 --- a/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.ts +++ b/libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.ts @@ -1,332 +1,332 @@ -import { - AfterContentInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - Injector, - Input, - QueryList, - Renderer2, - input -} from '@angular/core'; +import { + AfterContentInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + HostBinding, + Injector, + Input, + QueryList, + Renderer2, + input +} from '@angular/core'; import { toObservable } from '@angular/core/rxjs-interop'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { TranslateService, TranslatePipe } from '@ngx-translate/core'; -import { merge } from 'rxjs'; -import { PiBaseSelectComponent } from '../base-select.component'; -import { PiSelectOptionComponent } from '../select-option/select-option.component'; -import _ from 'lodash'; -import { MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox'; -import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgFor } from '@angular/common'; -import { PiIconComponent } from '../../icon/icon/icon.component'; -import { PiDisabledDirective } from '../../../util/status/directives/status.directive'; -import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive'; -import { PiDynamicColorDirective, PiColorPrimaryDirective } from '../../../util/color/directives/colors.directive'; -import { PiGhostButtonDirective, PiW100ButtonDirective } from '../../button/button.directive'; -import { TruncatePipe } from '../../../util/pipes/pipes'; - -@Component({ - selector: 'pi-select-multiple', - templateUrl: './select-multiple.component.html', - styleUrls: ['./select-multiple.component.scss', '../styles/base-select.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: PiSelectMultipleComponent, - multi: true, - }, - ], - imports: [ - ReactiveFormsModule, - NgIf, - PiIconComponent, - PiDisabledDirective, - PiDisabledDirective_1, - NgSwitch, - NgSwitchCase, - NgTemplateOutlet, - MatCheckbox, - PiDynamicColorDirective, - NgFor, - PiSelectOptionComponent, - PiGhostButtonDirective, - PiColorPrimaryDirective, - PiW100ButtonDirective, - TruncatePipe, - TranslatePipe, - ], -}) -export class PiSelectMultipleComponent extends PiBaseSelectComponent implements AfterContentInit { - /** - * Binds a CSS class name to the host element. - * Represents the default class for the select component. - */ - @HostBinding('class') get classes(): string { - return [ - 'pi-select__multiple', - this.appearanceClass, - this.colorClass, - this.menuColorClass, - this.menuTypeClass, - this.pickedOptionTypeClass, - this.sizeClass, - this.textAlignClass, - this.typeClass, - this.isResponsiveClass - ].join(' '); - } - - /** - * Specifies the maximum number of selectable options. - * Defaults to `Infinity` if not provided. - */ - readonly maxLength = input(Infinity); - - /** - * Specifies whether the select component has an option to select all options at once. - * Defaults to `false` if not provided. - */ - readonly hasSelectAllOptions = input(false); - - /** - * Provides the label to display next to the select all option. - */ - readonly selectAllLabel = input(); - - constructor( - private readonly translateService: TranslateService, - protected override el: ElementRef, - protected override injector: Injector, - protected override readonly _renderer: Renderer2, - private _cdr: ChangeDetectorRef - ) { - super(el, injector, _renderer); - } - - /** - * Retrieves the values of the selected options. - */ - get controlValue(): Array { - return this.control.value; - } - - /** - * Retrieves a list of selected options. - */ - // Sólo tenía getter, así que el @Input() original nunca pudo asignarse desde - // fuera: es un valor derivado, no una entrada. - get selectedOptions(): Array { - if (!this.controlValue) return []; - return this.options().filter((option) => _.some(this.controlValue, option)); - } - - /** - * Retrieves the names of the selected options. - */ - get selectedOptionsNames(): Array { - return this.selectedOptions.map((option) => this.translateService.instant(option.name)); - } - - get enabledOptions(): Array { - return this.options().filter((option) => !option.disabled); - } - - get areAllEnabledOptionsSelected(): boolean { - return this.enabledOptions.length === this.selectedOptions.length; - } - - get areAllOptionsSelected(): boolean { - return this.options().length === this.selectedOptions.length; - } - - /** - * Angular lifecycle hook that is called after Angular has fully initialized - * a component's content. This method sets up reactive subscriptions to listen - * for changes in either content children or view children. - * - * The method uses the `merge` RxJS operator to combine streams of changes - * from both `childrenOptionsComponents` (content children) and - * `viewChildOptionsComponents` (view children). This ensures that whenever - * any changes occur in either of the child lists, the visual state of the - * select options is updated appropriately. - * - * Using `Promise.resolve().then(...)`, the method ensures that the - * `updateChildrenOptionsSelectedState` method is executed in the next - * microtask, after any ongoing change detection cycles are completed. - * This approach ensures consistent and correct behavior in all scenarios. - * - * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to - * set the initial state of the child options based on the current value of - * `selectedOptions`. - */ - ngAfterContentInit(): void { - this.control.setValue(this.selectedOptions); - merge( +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { TranslateService, TranslatePipe } from '@ngx-translate/core'; +import { merge } from 'rxjs'; +import { PiBaseSelectComponent } from '../base-select.component'; +import { PiSelectOptionComponent } from '../select-option/select-option.component'; +import _ from 'lodash'; +import { MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox'; +import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgFor } from '@angular/common'; +import { PiIconComponent } from '../../icon/icon/icon.component'; +import { PiDisabledDirective } from '../../../util/status/directives/status.directive'; +import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive'; +import { PiDynamicColorDirective, PiColorPrimaryDirective } from '../../../util/color/directives/colors.directive'; +import { PiGhostButtonDirective, PiW100ButtonDirective } from '../../button/button.directive'; +import { TruncatePipe } from '../../../util/pipes/pipes'; + +@Component({ + selector: 'pi-select-multiple', + templateUrl: './select-multiple.component.html', + styleUrls: ['./select-multiple.component.scss', '../styles/base-select.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: PiSelectMultipleComponent, + multi: true, + }, + ], + imports: [ + ReactiveFormsModule, + NgIf, + PiIconComponent, + PiDisabledDirective, + PiDisabledDirective_1, + NgSwitch, + NgSwitchCase, + NgTemplateOutlet, + MatCheckbox, + PiDynamicColorDirective, + NgFor, + PiSelectOptionComponent, + PiGhostButtonDirective, + PiColorPrimaryDirective, + PiW100ButtonDirective, + TruncatePipe, + TranslatePipe, + ], +}) +export class PiSelectMultipleComponent extends PiBaseSelectComponent implements AfterContentInit { + /** + * Binds a CSS class name to the host element. + * Represents the default class for the select component. + */ + @HostBinding('class') get classes(): string { + return [ + 'pi-select__multiple', + this.appearanceClass, + this.colorClass, + this.menuColorClass, + this.menuTypeClass, + this.pickedOptionTypeClass, + this.sizeClass, + this.textAlignClass, + this.typeClass, + this.isResponsiveClass + ].join(' '); + } + + /** + * Specifies the maximum number of selectable options. + * Defaults to `Infinity` if not provided. + */ + readonly maxLength = input(Infinity); + + /** + * Specifies whether the select component has an option to select all options at once. + * Defaults to `false` if not provided. + */ + readonly hasSelectAllOptions = input(false); + + /** + * Provides the label to display next to the select all option. + */ + readonly selectAllLabel = input(); + + constructor( + private readonly translateService: TranslateService, + protected override el: ElementRef, + protected override injector: Injector, + protected override readonly _renderer: Renderer2, + private _cdr: ChangeDetectorRef + ) { + super(el, injector, _renderer); + } + + /** + * Retrieves the values of the selected options. + */ + get controlValue(): Array { + return this.control.value; + } + + /** + * Retrieves a list of selected options. + */ + // Sólo tenía getter, así que el @Input() original nunca pudo asignarse desde + // fuera: es un valor derivado, no una entrada. + get selectedOptions(): Array { + if (!this.controlValue) return []; + return this.options().filter((option) => _.some(this.controlValue, option)); + } + + /** + * Retrieves the names of the selected options. + */ + get selectedOptionsNames(): Array { + return this.selectedOptions.map((option) => this.translateService.instant(option.name)); + } + + get enabledOptions(): Array { + return this.options().filter((option) => !option.disabled); + } + + get areAllEnabledOptionsSelected(): boolean { + return this.enabledOptions.length === this.selectedOptions.length; + } + + get areAllOptionsSelected(): boolean { + return this.options().length === this.selectedOptions.length; + } + + /** + * Angular lifecycle hook that is called after Angular has fully initialized + * a component's content. This method sets up reactive subscriptions to listen + * for changes in either content children or view children. + * + * The method uses the `merge` RxJS operator to combine streams of changes + * from both `childrenOptionsComponents` (content children) and + * `viewChildOptionsComponents` (view children). This ensures that whenever + * any changes occur in either of the child lists, the visual state of the + * select options is updated appropriately. + * + * Using `Promise.resolve().then(...)`, the method ensures that the + * `updateChildrenOptionsSelectedState` method is executed in the next + * microtask, after any ongoing change detection cycles are completed. + * This approach ensures consistent and correct behavior in all scenarios. + * + * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to + * set the initial state of the child options based on the current value of + * `selectedOptions`. + */ + ngAfterContentInit(): void { + this.control.setValue(this.selectedOptions); + merge( toObservable(this.childrenOptionsComponents, { injector: this.injector }), - toObservable(this.viewChildOptionsComponents, { injector: this.injector }), - this.control.valueChanges - ).subscribe(() => { - Promise.resolve().then(() => { - this.updateChildrenOptionsSelectedState(this.selectedOptions); - this.updateChildrenOptionsDisabledState(this.selectedOptions); - }); - }); - } - - /** - * Resets the list of selected options. - */ - onClickReset(): void { - this.control.setValue([]); - } - - /** - * Hides the dropdown after saving the selected options. - */ - onClickSave(): void { - this.setIsHidden(); - } - - /** - * Handles the logic for selecting and deselecting options. - * - * @remarks - * - Adds the option to the list of selected options when selected. - * - Removes the option from the list when deselected. - * - Ensures that the number of selected options doesn't exceed `maxLength`. - * - * @param option - The option to be selected or deselected. - */ - onSelectOption(option: any): void { - if (option.disabled) return; - const selectedOptions: any[] = [...(this.selectedOptions || [])]; - const optionIndex = selectedOptions.findIndex( - (id) => id[this.keyIdProperty()] === option[this.keyIdProperty()] - ); - - if (optionIndex !== -1) { - selectedOptions.splice(optionIndex, 1); - } else if (selectedOptions.length < (this.maxLength() || Infinity)) { - selectedOptions.push(option); - } else { - return; - } - - this.control.setValue(selectedOptions); - this.updateChildrenOptionsSelectedState(selectedOptions); - this.updateChildrenOptionsDisabledState(selectedOptions); - } - - selectAll(): void { - this.control.setValue(this.enabledOptions); - } - - onSelectAllOptions(event: MatCheckboxChange): void { - if (event.checked) { - this.selectAll(); - } else { - this.onClickReset(); - } - } - - /** - * Updates the visual state of child options based on the currently selected options. - * - * This method determines the source of the child options — whether they are content projected - * from an external component or are defined within this component. - * - * The visual state of each child option is then adjusted based on the provided list of selected options. - * If a child option is in the list of selected options, it is visually marked as selected. - * - * @param selectedOptions - The current list of selected options. - */ - private updateChildrenOptionsSelectedState(selectedOptions: any[]): void { - // Array of child option components to work with. - let childrenOptionsComponent: readonly PiSelectOptionComponent[]; - // Reference to the child option elements for DOM manipulation. - let childrenOptionsElementRef: readonly ElementRef[]; - - // Check if we have child options that are content projected from a parent component. - const childrenOptionsComponents = this.childrenOptionsComponents(); - if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { - childrenOptionsComponent = childrenOptionsComponents; - childrenOptionsElementRef = this.childrenOptionsEl(); - } else { - // If not, it means they're internally defined (default), so we fetch from viewChildren. - childrenOptionsComponent = this.viewChildOptionsComponents(); - childrenOptionsElementRef = this.viewChildOptionsEl(); - } - - childrenOptionsComponent?.forEach((childOption, index) => { - const isSelected = selectedOptions.some( - (selectedOption) => selectedOption[this.keyIdProperty()] === childOption['id'] - ); - if (isSelected) { - this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); - childOption.isSelected.set(true); - } else { - this._renderer.removeClass( - childrenOptionsElementRef[index]?.nativeElement, - 'is-selected' - ); - childOption.isSelected.set(false); - } - }); - - this._cdr.markForCheck(); - } - - /** - * Updates the visual state of child options based on the currently selected options and the `maxLength` property. - * - * This method determines the source of the child options — whether they are content projected - * from an external component or are defined within this component. - * - * The visual state of each child option is adjusted based on the following: - * - If the `maxLength` property has been reached, and a child option isn't in the list of selected options, - * it is visually marked as disabled. - * - Otherwise, any disabled visual indication on the child option is removed. - * - * @param selectedOptions - The current list of selected options. - */ - private updateChildrenOptionsDisabledState(selectedOptions: any[]): void { - // Disable all options if the maximum number of selections has been reached. - const disableOthers = selectedOptions.length >= (this.maxLength() || Infinity); - // Array of child option components to work with. - let childrenOptionsComponent: readonly PiSelectOptionComponent[]; - // Reference to the child option elements for DOM manipulation. - let childrenOptionsElementRef: readonly ElementRef[]; - - // Check if we have child options that are content projected from a parent component. - const childrenOptionsComponents = this.childrenOptionsComponents(); - if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { - childrenOptionsComponent = childrenOptionsComponents; - childrenOptionsElementRef = this.childrenOptionsEl(); - } else { - // If not, it means they're internally defined (default), so we fetch from viewChildren. - childrenOptionsComponent = this.viewChildOptionsComponents(); - childrenOptionsElementRef = this.viewChildOptionsEl(); - } - - childrenOptionsComponent?.forEach((childOption, index) => { - const isSelected = selectedOptions.some( - (selectedOption) => selectedOption[this.keyIdProperty()] === childOption['id'] - ); - - const isDisabled = childOption.isDisabled(); - if ((!isSelected && disableOthers) || isDisabled) { - this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-disabled'); - } else { - this._renderer.removeClass( - childrenOptionsElementRef[index]?.nativeElement, - 'is-disabled' - ); - } - }); - - this._cdr.markForCheck(); - } -} + toObservable(this.viewChildOptionsComponents, { injector: this.injector }), + this.control.valueChanges + ).subscribe(() => { + Promise.resolve().then(() => { + this.updateChildrenOptionsSelectedState(this.selectedOptions); + this.updateChildrenOptionsDisabledState(this.selectedOptions); + }); + }); + } + + /** + * Resets the list of selected options. + */ + onClickReset(): void { + this.control.setValue([]); + } + + /** + * Hides the dropdown after saving the selected options. + */ + onClickSave(): void { + this.setIsHidden(); + } + + /** + * Handles the logic for selecting and deselecting options. + * + * @remarks + * - Adds the option to the list of selected options when selected. + * - Removes the option from the list when deselected. + * - Ensures that the number of selected options doesn't exceed `maxLength`. + * + * @param option - The option to be selected or deselected. + */ + onSelectOption(option: any): void { + if (option.disabled) return; + const selectedOptions: any[] = [...(this.selectedOptions || [])]; + const optionIndex = selectedOptions.findIndex( + (id) => id[this.keyIdProperty()] === option[this.keyIdProperty()] + ); + + if (optionIndex !== -1) { + selectedOptions.splice(optionIndex, 1); + } else if (selectedOptions.length < (this.maxLength() || Infinity)) { + selectedOptions.push(option); + } else { + return; + } + + this.control.setValue(selectedOptions); + this.updateChildrenOptionsSelectedState(selectedOptions); + this.updateChildrenOptionsDisabledState(selectedOptions); + } + + selectAll(): void { + this.control.setValue(this.enabledOptions); + } + + onSelectAllOptions(event: MatCheckboxChange): void { + if (event.checked) { + this.selectAll(); + } else { + this.onClickReset(); + } + } + + /** + * Updates the visual state of child options based on the currently selected options. + * + * This method determines the source of the child options — whether they are content projected + * from an external component or are defined within this component. + * + * The visual state of each child option is then adjusted based on the provided list of selected options. + * If a child option is in the list of selected options, it is visually marked as selected. + * + * @param selectedOptions - The current list of selected options. + */ + private updateChildrenOptionsSelectedState(selectedOptions: any[]): void { + // Array of child option components to work with. + let childrenOptionsComponent: readonly PiSelectOptionComponent[]; + // Reference to the child option elements for DOM manipulation. + let childrenOptionsElementRef: readonly ElementRef[]; + + // Check if we have child options that are content projected from a parent component. + const childrenOptionsComponents = this.childrenOptionsComponents(); + if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { + childrenOptionsComponent = childrenOptionsComponents; + childrenOptionsElementRef = this.childrenOptionsEl(); + } else { + // If not, it means they're internally defined (default), so we fetch from viewChildren. + childrenOptionsComponent = this.viewChildOptionsComponents(); + childrenOptionsElementRef = this.viewChildOptionsEl(); + } + + childrenOptionsComponent?.forEach((childOption, index) => { + const isSelected = selectedOptions.some( + (selectedOption) => selectedOption[this.keyIdProperty()] === childOption['id'] + ); + if (isSelected) { + this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); + childOption.isSelected.set(true); + } else { + this._renderer.removeClass( + childrenOptionsElementRef[index]?.nativeElement, + 'is-selected' + ); + childOption.isSelected.set(false); + } + }); + + this._cdr.markForCheck(); + } + + /** + * Updates the visual state of child options based on the currently selected options and the `maxLength` property. + * + * This method determines the source of the child options — whether they are content projected + * from an external component or are defined within this component. + * + * The visual state of each child option is adjusted based on the following: + * - If the `maxLength` property has been reached, and a child option isn't in the list of selected options, + * it is visually marked as disabled. + * - Otherwise, any disabled visual indication on the child option is removed. + * + * @param selectedOptions - The current list of selected options. + */ + private updateChildrenOptionsDisabledState(selectedOptions: any[]): void { + // Disable all options if the maximum number of selections has been reached. + const disableOthers = selectedOptions.length >= (this.maxLength() || Infinity); + // Array of child option components to work with. + let childrenOptionsComponent: readonly PiSelectOptionComponent[]; + // Reference to the child option elements for DOM manipulation. + let childrenOptionsElementRef: readonly ElementRef[]; + + // Check if we have child options that are content projected from a parent component. + const childrenOptionsComponents = this.childrenOptionsComponents(); + if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { + childrenOptionsComponent = childrenOptionsComponents; + childrenOptionsElementRef = this.childrenOptionsEl(); + } else { + // If not, it means they're internally defined (default), so we fetch from viewChildren. + childrenOptionsComponent = this.viewChildOptionsComponents(); + childrenOptionsElementRef = this.viewChildOptionsEl(); + } + + childrenOptionsComponent?.forEach((childOption, index) => { + const isSelected = selectedOptions.some( + (selectedOption) => selectedOption[this.keyIdProperty()] === childOption['id'] + ); + + const isDisabled = childOption.isDisabled(); + if ((!isSelected && disableOthers) || isDisabled) { + this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-disabled'); + } else { + this._renderer.removeClass( + childrenOptionsElementRef[index]?.nativeElement, + 'is-disabled' + ); + } + }); + + this._cdr.markForCheck(); + } +} diff --git a/libs/ui/src/lib/ui/select/select-option/_color.scss b/libs/ui/src/lib/ui/select/select-option/_color.scss index 1860cff..03eeee4 100644 --- a/libs/ui/src/lib/ui/select/select-option/_color.scss +++ b/libs/ui/src/lib/ui/select/select-option/_color.scss @@ -1,409 +1,409 @@ -/*** -* Select Option single color properties -**/ - -/*** -* Current text color -**/ -@mixin selectOptionTextColor($text-color) { - .pi-select-option__label, - .pi-select-option__initials { - color: var(--pi-color-#{$text-color}); - } - &.has-icon { - .pi-select-option__icon { - color: var(--pi-color-#{$text-color}); - } - } - &.has-radio { - .pi-select-option__radio-button { - color: var(--pi-color-#{$text-color}); - } - } -} - -/*** -* Select Option Description Color -**/ -@mixin selectOptionDescriptionColor($desciption-color) { - &.has-description { - .pi-select-option__description { - color: var(--pi-color-#{$desciption-color}); - } - } -} - -@mixin selectOptionFillIconBackgroundColor($background-color) { - &.has-icon { - .pi-select-option__icon { - background-color: var(--pi-color-#{$background-color}); - } - } -} -@mixin selectOptionBorderColor($color) { - border-color: var(--pi-color-#{$color}); -} - -@mixin selectOptionBackgroundColor($color) { - background-color: var(--pi-color-#{$color}); -} - -/*** -* 1. Select Type: DEFAULT -* -* 1.1. Color Mixin for the following cases: -* -* Select Appearance: GHOST && -* Select Type: DEFAULT && -* Select Menu Type: COLUMN -* -* This combinations are composed by radio button and checkboxes gruops -* & can have or not a description, that will be always grey-300. -**/ -@mixin selectOptionAppearanceGhostMenuTypeDefaultColor($color) { - // Default (Column) - &.pi-select__appearance--ghost { - // Select Type: - // Default - &:not(.pi-select__type--dropdown) { - :host { - // Has Description - @include selectOptionDescriptionColor(grey-300); - // Default - &:not(.is-selected):not(:hover), - &.is-disabled { - @include selectOptionTextColor(grey-900); - } - // Default && Active - &.is-selected { - @include selectOptionTextColor(#{$color}); - } - // Hover - &:hover { - // NOT Disabled && NOT Active - &:not(.is-disabled):not(.is-selected) { - @include selectOptionTextColor(#{$color}); - } - } - } - } - } -} - -/*** -* 2. Select Picked Option Type: BUTTON -* -* 2.1 Color Mixin for the following cases: -* -* Select Appearance: GHOST && -* Select Type: DROPDOWN && -* Select Menu Type: COLUMN && -* Select Picked Option Type: BUTTON -* -**/ -@mixin selectOptionAppearanceGhostPickedOptionTypeButtonColor($color) { - // Apperarance: - // Ghost - &.pi-select__appearance--ghost { - // Select Type: - - // Dropdown - &.pi-select__type--dropdown { - // Picked Option Type: - // Button - &.pi-select__picked-option-type--button { - :host { - // Default - &:not(.is-selected):not(:hover), - &.is-disabled { - @include selectOptionTextColor(grey); - } - // Active - &.is-selected { - @include selectOptionTextColor($color); - } - // Hover - &:hover { - &:not(.is-disabled):not(.is-selected) { - @include selectOptionTextColor(#{$color}-900); - @include selectOptionBackgroundColor(grey-10); - } - } - } - } - } - } -} - -/*** -* -* 2.2 Color Mixin for the following cases: -* -* Select Appearance: FILL && -* Select Type: DROPDOWN && -* Select Menu Type: COLUMN && -* Select Picked Option Type: BUTTON -* -**/ - -@mixin selectOptionAppearanceFillPickedOptionTypeButtonColor($color) { - // Apperarance: - // Fill - &.pi-select__appearance--fill { - // Select Type: - - // Dropdown - &.pi-select__type--dropdown { - // Picked Option Type: - // Button - &.pi-select__picked-option-type--button { - :host { - // Default - &:not(.is-selected):not(:hover), - &.is-disabled { - @include selectOptionTextColor($color); - @include selectOptionBackgroundColor(#{$color}-25); - } - // Active - &.is-selected { - @include selectOptionTextColor(#{$color}); - @include selectOptionBackgroundColor(#{$color}-50); - } - // Hover - &:hover { - &:not(.is-disabled) { - @include selectOptionTextColor(#{$color}); - @include selectOptionBackgroundColor(#{$color}-50); - } - } - } - } - } - } -} - -/** -* 2.3 Color Mixin for the following cases: -* -* Select Appearance: OUTLINE && -* Select Type: DROPDOWN && -* Select Menu Type: COLUMN && -* Select Picked Option Type: BUTTON -* -**/ - -@mixin selectOptionAppearanceOutlinePickedOptionTypeButtonColor($color) { - // Apperarance: - // Outline - &.pi-select__appearance--outline { - // Select Type: - - // Dropdown - &.pi-select__type--dropdown { - // Picked Option Type: - // Button - &.pi-select__picked-option-type--button { - :host { - // Default - &:not(.is-selected):not(:hover), - &.is-disabled { - @include selectOptionTextColor(#{$color}); - @include selectOptionBorderColor(#{$color}-50); - } - // Active - &.is-selected { - @include selectOptionTextColor($color); - @include selectOptionBorderColor(#{$color}-100); - } - // Hover - &:hover { - &:not(.is-disabled):not(.is-selected) { - @include selectOptionTextColor(#{$color}); - @include selectOptionBorderColor(#{$color}-100); - } - } - } - } - } - } -} - -/*** -* 3. Select Picked Option Type: INPUT || undefined -* -* 3.1 Color Mixin for the following cases: -* -* Select Appearance: FILL || OUTLINE && -* Select Type: DROPDOWN || DEFAULT (in context as inside an Accordion in Aside) && -* Select Menu Type: COLUMN && -* Select Picked Option Type: INPUT -* -**/ - -@mixin selectOptionAppearanceFillAndOutlineMenuTypeColumnColor($color) { - // Menu Type: - &.pi-select__menu-type--column { - // Select Appearance: - // Fill || Outline - &.pi-select__appearance--fill, - &.pi-select__appearance--outline { - // Default (Column) - &:not(.pi-select__picked-option-type--button) { - :host { - // Default - &:not(.is-selected):not(:hover), - &.is-disabled { - @include selectOptionTextColor(#{$color}); - @include selectOptionBackgroundColor(#{$color}-10); - @include selectOptionBorderColor(#{$color}-50); - } - // Active - &.is-selected { - @include selectOptionTextColor($color); - @include selectOptionBackgroundColor(#{$color}-25); - @include selectOptionBorderColor(#{$color}-100); - } - // Hover - &:hover { - &:not(.is-disabled) { - @include selectOptionTextColor(#{$color}); - @include selectOptionBackgroundColor(#{$color}-50); - @include selectOptionBorderColor(#{$color}-100); - } - } - } - } - } - } -} - -/*** -* 4. Select Menu Type: FLEX WRAP -* -* 4.1 Color Mixin for the following cases: -* -* Select Menu Type: FLEX WRAP && -* -**/ - -@mixin selectOptionMenuTypeFlexWrapColor($color) { - // Menu Type: - // Flex Wrap - &.pi-select__menu-type--flex-wrap { - :host { - // Default - &:not(.is-selected):not(:hover), - &.is-disabled { - @include selectOptionTextColor(grey); - @include selectOptionBorderColor(grey-50); - @include selectOptionFillIconBackgroundColor(grey-50); - } - // Active - &.is-selected { - @include selectOptionTextColor($color); - @include selectOptionBackgroundColor(#{$color}-25); - @include selectOptionBorderColor(#{$color}-75); - @include selectOptionFillIconBackgroundColor(#{$color}-50); - } - // Hover - &:hover { - &:not(.is-disabled) { - @include selectOptionTextColor(#{$color}); - @include selectOptionBackgroundColor(#{$color}-25); - @include selectOptionFillIconBackgroundColor(#{$color}-75); - &.is-selected { - @include selectOptionBorderColor(#{$color}-200); - } - &:not(.is-selected) { - @include selectOptionBorderColor(#{$color}-100); - } - } - } - } - } -} -.pi-select { - // Theming Color: - // Primary - &.pi-color__primary { - // 1. Type: Default && Menu Type: Column && Appearance: Ghost - @include selectOptionAppearanceGhostMenuTypeDefaultColor(primary); - // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button - // 2.1. Appearance: Ghost - @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(primary); - // 2.2. Appearance: Fill - @include selectOptionAppearanceFillPickedOptionTypeButtonColor(primary); - // 2.3. Appearance: Outline - @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(primary); - // 3. Appearance: Fill || Outline && Menu Type: Column - @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(primary); - // 4. Menu Type: Flex Wrap - @include selectOptionMenuTypeFlexWrapColor(primary); - } - // Accent - &.pi-color__accent { - // 1. Type: Default && Menu Type: Column && Appearance: Ghost - @include selectOptionAppearanceGhostMenuTypeDefaultColor(accent); - // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button - // 2.1. Appearance: Ghost - @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(accent); - // 2.2. Appearance: Fill - @include selectOptionAppearanceFillPickedOptionTypeButtonColor(accent); - // 2.3. Appearance: Outline - @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(accent); - // 3. Appearance: Fill || Outline && Menu Type: Column - @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(accent); - // 4. Menu Type: Flex Wrap - @include selectOptionMenuTypeFlexWrapColor(accent); - } - // Highlighted - &.pi-color__highlighted { - // 1. Type: Default && Menu Type: Column && Appearance: Ghost - @include selectOptionAppearanceGhostMenuTypeDefaultColor(highlighted); - // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button - // 2.1. Appearance: Ghost - @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(highlighted); - // 2.2. Appearance: Fill - @include selectOptionAppearanceFillPickedOptionTypeButtonColor(highlighted); - // 2.3. Appearance: Outline - @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(highlighted); - // 3. Appearance: Fill || Outline && Menu Type: Column - @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(highlighted); - // 4. Menu Type: Flex Wrap - @include selectOptionMenuTypeFlexWrapColor(highlighted); - } - - // Status colors - // Success - &.pi-color__success { - // 1. Type: Default && Menu Type: Column && Appearance: Ghost - @include selectOptionAppearanceGhostMenuTypeDefaultColor(success); - // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button - // 2.1. Appearance: Ghost - @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(success); - // 2.2. Appearance: Fill - @include selectOptionAppearanceFillPickedOptionTypeButtonColor(success); - // 2.3. Appearance: Outline - @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(success); - // 3. Appearance: Fill || Outline && Menu Type: Column - @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(success); - // 4. Menu Type: Flex Wrap - @include selectOptionMenuTypeFlexWrapColor(success); - } - // Error - &.pi-color__warn { - // 1. Type: Default && Menu Type: Column && Appearance: Ghost - @include selectOptionAppearanceGhostMenuTypeDefaultColor(warn); - // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button - // 2.1. Appearance: Ghost - @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(warn); - // 2.2. Appearance: Fill - @include selectOptionAppearanceFillPickedOptionTypeButtonColor(warn); - // 2.3. Appearance: Outline - @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(warn); - // 3. Appearance: Fill || Outline && Menu Type: Column - @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(warn); - // 4. Menu Type: Flex Wrap - @include selectOptionMenuTypeFlexWrapColor(warn); - } -} +/*** +* Select Option single color properties +**/ + +/*** +* Current text color +**/ +@mixin selectOptionTextColor($text-color) { + .pi-select-option__label, + .pi-select-option__initials { + color: var(--pi-color-#{$text-color}); + } + &.has-icon { + .pi-select-option__icon { + color: var(--pi-color-#{$text-color}); + } + } + &.has-radio { + .pi-select-option__radio-button { + color: var(--pi-color-#{$text-color}); + } + } +} + +/*** +* Select Option Description Color +**/ +@mixin selectOptionDescriptionColor($desciption-color) { + &.has-description { + .pi-select-option__description { + color: var(--pi-color-#{$desciption-color}); + } + } +} + +@mixin selectOptionFillIconBackgroundColor($background-color) { + &.has-icon { + .pi-select-option__icon { + background-color: var(--pi-color-#{$background-color}); + } + } +} +@mixin selectOptionBorderColor($color) { + border-color: var(--pi-color-#{$color}); +} + +@mixin selectOptionBackgroundColor($color) { + background-color: var(--pi-color-#{$color}); +} + +/*** +* 1. Select Type: DEFAULT +* +* 1.1. Color Mixin for the following cases: +* +* Select Appearance: GHOST && +* Select Type: DEFAULT && +* Select Menu Type: COLUMN +* +* This combinations are composed by radio button and checkboxes gruops +* & can have or not a description, that will be always grey-300. +**/ +@mixin selectOptionAppearanceGhostMenuTypeDefaultColor($color) { + // Default (Column) + &.pi-select__appearance--ghost { + // Select Type: + // Default + &:not(.pi-select__type--dropdown) { + :host { + // Has Description + @include selectOptionDescriptionColor(grey-300); + // Default + &:not(.is-selected):not(:hover), + &.is-disabled { + @include selectOptionTextColor(grey-900); + } + // Default && Active + &.is-selected { + @include selectOptionTextColor(#{$color}); + } + // Hover + &:hover { + // NOT Disabled && NOT Active + &:not(.is-disabled):not(.is-selected) { + @include selectOptionTextColor(#{$color}); + } + } + } + } + } +} + +/*** +* 2. Select Picked Option Type: BUTTON +* +* 2.1 Color Mixin for the following cases: +* +* Select Appearance: GHOST && +* Select Type: DROPDOWN && +* Select Menu Type: COLUMN && +* Select Picked Option Type: BUTTON +* +**/ +@mixin selectOptionAppearanceGhostPickedOptionTypeButtonColor($color) { + // Apperarance: + // Ghost + &.pi-select__appearance--ghost { + // Select Type: + + // Dropdown + &.pi-select__type--dropdown { + // Picked Option Type: + // Button + &.pi-select__picked-option-type--button { + :host { + // Default + &:not(.is-selected):not(:hover), + &.is-disabled { + @include selectOptionTextColor(grey); + } + // Active + &.is-selected { + @include selectOptionTextColor($color); + } + // Hover + &:hover { + &:not(.is-disabled):not(.is-selected) { + @include selectOptionTextColor(#{$color}-900); + @include selectOptionBackgroundColor(grey-10); + } + } + } + } + } + } +} + +/*** +* +* 2.2 Color Mixin for the following cases: +* +* Select Appearance: FILL && +* Select Type: DROPDOWN && +* Select Menu Type: COLUMN && +* Select Picked Option Type: BUTTON +* +**/ + +@mixin selectOptionAppearanceFillPickedOptionTypeButtonColor($color) { + // Apperarance: + // Fill + &.pi-select__appearance--fill { + // Select Type: + + // Dropdown + &.pi-select__type--dropdown { + // Picked Option Type: + // Button + &.pi-select__picked-option-type--button { + :host { + // Default + &:not(.is-selected):not(:hover), + &.is-disabled { + @include selectOptionTextColor($color); + @include selectOptionBackgroundColor(#{$color}-25); + } + // Active + &.is-selected { + @include selectOptionTextColor(#{$color}); + @include selectOptionBackgroundColor(#{$color}-50); + } + // Hover + &:hover { + &:not(.is-disabled) { + @include selectOptionTextColor(#{$color}); + @include selectOptionBackgroundColor(#{$color}-50); + } + } + } + } + } + } +} + +/** +* 2.3 Color Mixin for the following cases: +* +* Select Appearance: OUTLINE && +* Select Type: DROPDOWN && +* Select Menu Type: COLUMN && +* Select Picked Option Type: BUTTON +* +**/ + +@mixin selectOptionAppearanceOutlinePickedOptionTypeButtonColor($color) { + // Apperarance: + // Outline + &.pi-select__appearance--outline { + // Select Type: + + // Dropdown + &.pi-select__type--dropdown { + // Picked Option Type: + // Button + &.pi-select__picked-option-type--button { + :host { + // Default + &:not(.is-selected):not(:hover), + &.is-disabled { + @include selectOptionTextColor(#{$color}); + @include selectOptionBorderColor(#{$color}-50); + } + // Active + &.is-selected { + @include selectOptionTextColor($color); + @include selectOptionBorderColor(#{$color}-100); + } + // Hover + &:hover { + &:not(.is-disabled):not(.is-selected) { + @include selectOptionTextColor(#{$color}); + @include selectOptionBorderColor(#{$color}-100); + } + } + } + } + } + } +} + +/*** +* 3. Select Picked Option Type: INPUT || undefined +* +* 3.1 Color Mixin for the following cases: +* +* Select Appearance: FILL || OUTLINE && +* Select Type: DROPDOWN || DEFAULT (in context as inside an Accordion in Aside) && +* Select Menu Type: COLUMN && +* Select Picked Option Type: INPUT +* +**/ + +@mixin selectOptionAppearanceFillAndOutlineMenuTypeColumnColor($color) { + // Menu Type: + &.pi-select__menu-type--column { + // Select Appearance: + // Fill || Outline + &.pi-select__appearance--fill, + &.pi-select__appearance--outline { + // Default (Column) + &:not(.pi-select__picked-option-type--button) { + :host { + // Default + &:not(.is-selected):not(:hover), + &.is-disabled { + @include selectOptionTextColor(#{$color}); + @include selectOptionBackgroundColor(#{$color}-10); + @include selectOptionBorderColor(#{$color}-50); + } + // Active + &.is-selected { + @include selectOptionTextColor($color); + @include selectOptionBackgroundColor(#{$color}-25); + @include selectOptionBorderColor(#{$color}-100); + } + // Hover + &:hover { + &:not(.is-disabled) { + @include selectOptionTextColor(#{$color}); + @include selectOptionBackgroundColor(#{$color}-50); + @include selectOptionBorderColor(#{$color}-100); + } + } + } + } + } + } +} + +/*** +* 4. Select Menu Type: FLEX WRAP +* +* 4.1 Color Mixin for the following cases: +* +* Select Menu Type: FLEX WRAP && +* +**/ + +@mixin selectOptionMenuTypeFlexWrapColor($color) { + // Menu Type: + // Flex Wrap + &.pi-select__menu-type--flex-wrap { + :host { + // Default + &:not(.is-selected):not(:hover), + &.is-disabled { + @include selectOptionTextColor(grey); + @include selectOptionBorderColor(grey-50); + @include selectOptionFillIconBackgroundColor(grey-50); + } + // Active + &.is-selected { + @include selectOptionTextColor($color); + @include selectOptionBackgroundColor(#{$color}-25); + @include selectOptionBorderColor(#{$color}-75); + @include selectOptionFillIconBackgroundColor(#{$color}-50); + } + // Hover + &:hover { + &:not(.is-disabled) { + @include selectOptionTextColor(#{$color}); + @include selectOptionBackgroundColor(#{$color}-25); + @include selectOptionFillIconBackgroundColor(#{$color}-75); + &.is-selected { + @include selectOptionBorderColor(#{$color}-200); + } + &:not(.is-selected) { + @include selectOptionBorderColor(#{$color}-100); + } + } + } + } + } +} +.pi-select { + // Theming Color: + // Primary + &.pi-color__primary { + // 1. Type: Default && Menu Type: Column && Appearance: Ghost + @include selectOptionAppearanceGhostMenuTypeDefaultColor(primary); + // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button + // 2.1. Appearance: Ghost + @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(primary); + // 2.2. Appearance: Fill + @include selectOptionAppearanceFillPickedOptionTypeButtonColor(primary); + // 2.3. Appearance: Outline + @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(primary); + // 3. Appearance: Fill || Outline && Menu Type: Column + @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(primary); + // 4. Menu Type: Flex Wrap + @include selectOptionMenuTypeFlexWrapColor(primary); + } + // Accent + &.pi-color__accent { + // 1. Type: Default && Menu Type: Column && Appearance: Ghost + @include selectOptionAppearanceGhostMenuTypeDefaultColor(accent); + // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button + // 2.1. Appearance: Ghost + @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(accent); + // 2.2. Appearance: Fill + @include selectOptionAppearanceFillPickedOptionTypeButtonColor(accent); + // 2.3. Appearance: Outline + @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(accent); + // 3. Appearance: Fill || Outline && Menu Type: Column + @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(accent); + // 4. Menu Type: Flex Wrap + @include selectOptionMenuTypeFlexWrapColor(accent); + } + // Highlighted + &.pi-color__highlighted { + // 1. Type: Default && Menu Type: Column && Appearance: Ghost + @include selectOptionAppearanceGhostMenuTypeDefaultColor(highlighted); + // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button + // 2.1. Appearance: Ghost + @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(highlighted); + // 2.2. Appearance: Fill + @include selectOptionAppearanceFillPickedOptionTypeButtonColor(highlighted); + // 2.3. Appearance: Outline + @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(highlighted); + // 3. Appearance: Fill || Outline && Menu Type: Column + @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(highlighted); + // 4. Menu Type: Flex Wrap + @include selectOptionMenuTypeFlexWrapColor(highlighted); + } + + // Status colors + // Success + &.pi-color__success { + // 1. Type: Default && Menu Type: Column && Appearance: Ghost + @include selectOptionAppearanceGhostMenuTypeDefaultColor(success); + // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button + // 2.1. Appearance: Ghost + @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(success); + // 2.2. Appearance: Fill + @include selectOptionAppearanceFillPickedOptionTypeButtonColor(success); + // 2.3. Appearance: Outline + @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(success); + // 3. Appearance: Fill || Outline && Menu Type: Column + @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(success); + // 4. Menu Type: Flex Wrap + @include selectOptionMenuTypeFlexWrapColor(success); + } + // Error + &.pi-color__warn { + // 1. Type: Default && Menu Type: Column && Appearance: Ghost + @include selectOptionAppearanceGhostMenuTypeDefaultColor(warn); + // 2. Type: Dropdown && Menu Type: Column && Picked Option Type: Button + // 2.1. Appearance: Ghost + @include selectOptionAppearanceGhostPickedOptionTypeButtonColor(warn); + // 2.2. Appearance: Fill + @include selectOptionAppearanceFillPickedOptionTypeButtonColor(warn); + // 2.3. Appearance: Outline + @include selectOptionAppearanceOutlinePickedOptionTypeButtonColor(warn); + // 3. Appearance: Fill || Outline && Menu Type: Column + @include selectOptionAppearanceFillAndOutlineMenuTypeColumnColor(warn); + // 4. Menu Type: Flex Wrap + @include selectOptionMenuTypeFlexWrapColor(warn); + } +} diff --git a/libs/ui/src/lib/ui/select/select-option/_size.scss b/libs/ui/src/lib/ui/select/select-option/_size.scss index ffe87f8..b2f4e4f 100644 --- a/libs/ui/src/lib/ui/select/select-option/_size.scss +++ b/libs/ui/src/lib/ui/select/select-option/_size.scss @@ -1,392 +1,392 @@ -// SELECT OPTION SIZE - -/* -* Select Option Height -*/ -@mixin selectOptionHeight($height) { - height: $height; -} - -/* -* Select Option Width -*/ -@mixin selectOptionWidth($width) { - width: $width; -} - -/* -* Select Option Side Spacings -*/ -@mixin selectOptionSpacings($spacing-large, $spacing-small) { - // Side spacings depending on type property: - // Single - &.pi-select-option__type--single { - padding-left: $spacing-large; - padding-right: $spacing-large; - } - // Multiple - &.pi-select-option__type--multiple { - padding-left: $spacing-small; - padding-right: $spacing-large; - } - // Flex wrap - &.pi-select-option__type--flex-wrap { - &.has-icon { - padding-left: $spacing-small; - padding-right: $spacing-large; - } - &:not(.has-icon) { - padding-left: $spacing-large; - padding-right: $spacing-large; - } - } -} -/* -* Select Option Border Radius -*/ -@mixin selectOptionBorderRadius($border-radius) { - border-radius: $border-radius; - -webkit-border-radius: $border-radius; - -moz-border-radius: $border-radius; -} - -/* -* Select Option Font Sizes -* -* Label -* Description -* Initials -*/ - -@mixin selectOptionFontSizes($label-font-size, $description-font-size, $initials-font-size) { - .pi-select-option__label { - font: { - size: var(--pi-font-size-#{$label-font-size}); - } - } - .pi-select-option__description { - font: { - size: var(--pi-font-size-#{$description-font-size}); - } - } - .pi-select-option__initials { - font: { - size: var(--pi-font-size-#{$initials-font-size}); - } - } -} - -/* -* Select Option Appearance Ghost Has Description Sizes -*/ -@mixin selectOptionAppearanceGhostHasDescriptionSizes( - $side-gap, - $has-description-vertical-gap, - $min-height -) { - // Has radio || Has checkbox - &.has-radio, - &.has-checkbox { - & > div { - gap: $side-gap; - } - } - - // Has decription - &.has-description { - min-height: $min-height; - & > div { - & > span { - gap: $has-description-vertical-gap; - margin-top: var(--pi-spacing-xxxx-small); - } - } - } -} - -/* -* Select Option Radio Button Size -*/ -@mixin selectOptionRadioButtonSize($radio-size) { - .pi-select-option__radio-button { - height: $radio-size; - width: $radio-size; - min-width: $radio-size; - max-width: $radio-size; - } -} - -/* -* Select Option Max Width ch -*/ -@mixin selectOptionMaxCharacters($max-width) { - overflow: hidden; - & > div { - overflow: hidden; - & > span { - overflow: hidden; - text-overflow: ellipsis; - } - } - .pi-select-option__label { - white-space: nowrap; - overflow: hidden; - max-width: $max-width; - } -} - -/* -* Select Option for Select Appearance Ghost Sizes -*/ -@mixin selectOptionAppearanceGhostSizes { - .pi-select { - // Default (Column) & Ghost appearance - &.pi-select__appearance--ghost { - // NOT type button - &:not(.pi-select__picked-option-type--button) { - :host { - // Size: - // Medium - /* - * side-gap, has-description-vertical-gap, label-font-size, description-font-size - */ - &.pi-select-option__medium { - @include selectOptionAppearanceGhostHasDescriptionSizes( - var(--pi-spacing-x-small), - var(--pi-spacing-xxxx-small), - 3.125rem - ); - @include selectOptionFontSizes(small, x-small, small); - @include selectOptionRadioButtonSize(var(--pi-spacing-large)); - } - // // Large - &.pi-select-option__large { - @include selectOptionAppearanceGhostHasDescriptionSizes( - var(--pi-spacing-small), - var(--pi-spacing-xxx-small), - 3.875rem - ); - @include selectOptionFontSizes(medium, small, medium); - @include selectOptionRadioButtonSize(var(--pi-spacing-large)); - } - // NOT Has description - &:not(.has-description) { - // Medium - &.pi-select-option__medium { - @include selectOptionHeight(var(--pi-spacing-xxx-large)); - @include selectOptionFontSizes(small, x-small, small); - } - // Large - &.pi-select-option__large { - @include selectOptionHeight(var(--pi-spacing-xxxx-large)); - @include selectOptionFontSizes(medium, small, medium); - } - } - } - } - // Select Type: Dropown || Menu Type: Default (Column) - &.pi-select__type--dropdown, - &.pi-select__menu-type--column { - /* - ** Picked Option Type Contitions the Select Option Sizes - ** Size SMALL does not exists in the Piked Option Type Button cases - ** - */ - // Picked Option Type: - // Button - &.pi-select__picked-option-type--button { - :host { - // Size: - - // Size: - // Small - &.pi-select-option__small { - @include selectOptionFontSizes(x-small, x-small, x-small); - @include selectOptionMaxCharacters(30ch); - } - - // Small Medium & Large - &.pi-select-option__small, - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionHeight(var(--pi-spacing-xxx-large)); - @include selectOptionSpacings(var(--pi-spacing-small), var(--pi-spacing-x-small)); - @include selectOptionBorderRadius(0.875rem); - } - - // Medium & Large - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionFontSizes(small, small, small); - @include selectOptionMaxCharacters(40ch); - } - } - } - } - } - } -} - -/* -* Select Option for Select Appearance Fill and Outline Sizes -*/ -@mixin selectOptionFillAndOutlineSizes { - .pi-select { - // Default (Column) - &.pi-select__appearance--fill, - &.pi-select__appearance--outline { - // Select Type: Dropown || Menu Type: Default (Column) - &.pi-select__type--dropdown, - &.pi-select__menu-type--column { - /* - ** Picked Option Type Contitions the Select Option Sizes - ** Size SMALL does not exists in the Piked Option Type Button cases - ** - */ - // Picked Option Type: - // Button - &.pi-select__picked-option-type--button { - :host { - // Size: - // Small - &.pi-select-option__small { - @include selectOptionFontSizes(x-small, x-small, x-small); - @include selectOptionMaxCharacters(30ch); - } - - // Small, Medium & Large - &.pi-select-option__small, - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionHeight(var(--pi-spacing-xxx-large)); - @include selectOptionSpacings(var(--pi-spacing-medium), var(--pi-spacing-x-small)); - @include selectOptionBorderRadius(0.875rem); - } - // Medium & Large - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionFontSizes(small, small, small); - } - } - } - // Input || (Default && (Select Appearance === Fill || Outline)) - &:not(.pi-select__picked-option-type--button) { - :host { - // Flex Direction: - // Row - &.pi-select-option__flex-direction--row { - &:not(.pi-select-option__type--flex-wrap) { - // Size: - // Small - &.pi-select-option__small, - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionHeight(var(--pi-spacing-xx-large)); - @include selectOptionSpacings( - var(--pi-spacing-x-small), - var(--pi-spacing-xxx-small) - ); - @include selectOptionBorderRadius(var(--pi-border-radius-small)); - @include selectOptionFontSizes(x-small, x-small, x-small); - } - } - } - } - } - } - - // Select Type: Default - &:not(.pi-select__type--dropdown) { - // && Menu Type: Flex Wrap - &.pi-select__menu-type--flex-wrap { - :host { - &.pi-select-option__type--flex-wrap { - // Radio button size in Select Otions Type: Flex-Wrap - @include selectOptionRadioButtonSize(0.875rem); - @include selectOptionBorderRadius(0.875rem); - - // Row - &.pi-select-option__flex-direction--row { - &.pi-select-option__small, - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionHeight(var(--pi-spacing-xxxx-large)); - @include selectOptionSpacings( - var(--pi-spacing-medium), - var(--pi-spacing-xx-small) - ); - @include selectOptionFontSizes(x-small, x-small, x-small); - } - } - // Column - &.pi-select-option__flex-direction--column { - &.pi-select-option__small, - &.pi-select-option__medium, - &.pi-select-option__large { - @include selectOptionHeight(6.375rem); - @include selectOptionWidth(8.75rem); - @include selectOptionSpacings(var(--pi-spacing-medium), var(--pi-spacing-medium)); - @include selectOptionFontSizes(x-small, x-small, small); - } - } - } - } - } - } - } - } -} - -/* -* Select Option Flex Direction Column for Select Appearance Fill and Outline Sizes -*/ -@mixin selectOptionFillAndOutlineColumnSize { -} - -// SIDE SPACINGS - -/* -* Select Option for Select Appearance Ghost Spacings -*/ -@mixin selectOptionAppearanceGhostSpacings { -} - -/* -* Select Option Flex Direction Row for Select Appearance Fill and Outline Spacings -*/ -@mixin selectOptionFillAndOutlineRowSpacings { -} - -/* -* Select Option Flex Direction Column for Select Appearance Fill and Outline Spacings -*/ -@mixin selectOptionFillAndOutlineColumnSpacings { -} - -/* -* Select Option In Menu Type Flex Wrap Width -*/ - -@mixin selectOptionFlexWrapWidth($width: 100%) { - :host { - &.pi-select-option__type--flex-wrap { - &.pi-select-option__flex-direction--row { - width: $width; - } - } - } -} - -html { - @include selectOptionAppearanceGhostSizes; - @include selectOptionFillAndOutlineSizes; - - // Mobile - &.is-mobile { - @include selectOptionFlexWrapWidth; - } - // Tablet & Desktop - &:not(.is-mobile) { - @include selectOptionFlexWrapWidth(12rem); - } -} +// SELECT OPTION SIZE + +/* +* Select Option Height +*/ +@mixin selectOptionHeight($height) { + height: $height; +} + +/* +* Select Option Width +*/ +@mixin selectOptionWidth($width) { + width: $width; +} + +/* +* Select Option Side Spacings +*/ +@mixin selectOptionSpacings($spacing-large, $spacing-small) { + // Side spacings depending on type property: + // Single + &.pi-select-option__type--single { + padding-left: $spacing-large; + padding-right: $spacing-large; + } + // Multiple + &.pi-select-option__type--multiple { + padding-left: $spacing-small; + padding-right: $spacing-large; + } + // Flex wrap + &.pi-select-option__type--flex-wrap { + &.has-icon { + padding-left: $spacing-small; + padding-right: $spacing-large; + } + &:not(.has-icon) { + padding-left: $spacing-large; + padding-right: $spacing-large; + } + } +} +/* +* Select Option Border Radius +*/ +@mixin selectOptionBorderRadius($border-radius) { + border-radius: $border-radius; + -webkit-border-radius: $border-radius; + -moz-border-radius: $border-radius; +} + +/* +* Select Option Font Sizes +* +* Label +* Description +* Initials +*/ + +@mixin selectOptionFontSizes($label-font-size, $description-font-size, $initials-font-size) { + .pi-select-option__label { + font: { + size: var(--pi-font-size-#{$label-font-size}); + } + } + .pi-select-option__description { + font: { + size: var(--pi-font-size-#{$description-font-size}); + } + } + .pi-select-option__initials { + font: { + size: var(--pi-font-size-#{$initials-font-size}); + } + } +} + +/* +* Select Option Appearance Ghost Has Description Sizes +*/ +@mixin selectOptionAppearanceGhostHasDescriptionSizes( + $side-gap, + $has-description-vertical-gap, + $min-height +) { + // Has radio || Has checkbox + &.has-radio, + &.has-checkbox { + & > div { + gap: $side-gap; + } + } + + // Has decription + &.has-description { + min-height: $min-height; + & > div { + & > span { + gap: $has-description-vertical-gap; + margin-top: var(--pi-spacing-xxxx-small); + } + } + } +} + +/* +* Select Option Radio Button Size +*/ +@mixin selectOptionRadioButtonSize($radio-size) { + .pi-select-option__radio-button { + height: $radio-size; + width: $radio-size; + min-width: $radio-size; + max-width: $radio-size; + } +} + +/* +* Select Option Max Width ch +*/ +@mixin selectOptionMaxCharacters($max-width) { + overflow: hidden; + & > div { + overflow: hidden; + & > span { + overflow: hidden; + text-overflow: ellipsis; + } + } + .pi-select-option__label { + white-space: nowrap; + overflow: hidden; + max-width: $max-width; + } +} + +/* +* Select Option for Select Appearance Ghost Sizes +*/ +@mixin selectOptionAppearanceGhostSizes { + .pi-select { + // Default (Column) & Ghost appearance + &.pi-select__appearance--ghost { + // NOT type button + &:not(.pi-select__picked-option-type--button) { + :host { + // Size: + // Medium + /* + * side-gap, has-description-vertical-gap, label-font-size, description-font-size + */ + &.pi-select-option__medium { + @include selectOptionAppearanceGhostHasDescriptionSizes( + var(--pi-spacing-x-small), + var(--pi-spacing-xxxx-small), + 3.125rem + ); + @include selectOptionFontSizes(small, x-small, small); + @include selectOptionRadioButtonSize(var(--pi-spacing-large)); + } + // // Large + &.pi-select-option__large { + @include selectOptionAppearanceGhostHasDescriptionSizes( + var(--pi-spacing-small), + var(--pi-spacing-xxx-small), + 3.875rem + ); + @include selectOptionFontSizes(medium, small, medium); + @include selectOptionRadioButtonSize(var(--pi-spacing-large)); + } + // NOT Has description + &:not(.has-description) { + // Medium + &.pi-select-option__medium { + @include selectOptionHeight(var(--pi-spacing-xxx-large)); + @include selectOptionFontSizes(small, x-small, small); + } + // Large + &.pi-select-option__large { + @include selectOptionHeight(var(--pi-spacing-xxxx-large)); + @include selectOptionFontSizes(medium, small, medium); + } + } + } + } + // Select Type: Dropown || Menu Type: Default (Column) + &.pi-select__type--dropdown, + &.pi-select__menu-type--column { + /* + ** Picked Option Type Contitions the Select Option Sizes + ** Size SMALL does not exists in the Piked Option Type Button cases + ** + */ + // Picked Option Type: + // Button + &.pi-select__picked-option-type--button { + :host { + // Size: + + // Size: + // Small + &.pi-select-option__small { + @include selectOptionFontSizes(x-small, x-small, x-small); + @include selectOptionMaxCharacters(30ch); + } + + // Small Medium & Large + &.pi-select-option__small, + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionHeight(var(--pi-spacing-xxx-large)); + @include selectOptionSpacings(var(--pi-spacing-small), var(--pi-spacing-x-small)); + @include selectOptionBorderRadius(0.875rem); + } + + // Medium & Large + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionFontSizes(small, small, small); + @include selectOptionMaxCharacters(40ch); + } + } + } + } + } + } +} + +/* +* Select Option for Select Appearance Fill and Outline Sizes +*/ +@mixin selectOptionFillAndOutlineSizes { + .pi-select { + // Default (Column) + &.pi-select__appearance--fill, + &.pi-select__appearance--outline { + // Select Type: Dropown || Menu Type: Default (Column) + &.pi-select__type--dropdown, + &.pi-select__menu-type--column { + /* + ** Picked Option Type Contitions the Select Option Sizes + ** Size SMALL does not exists in the Piked Option Type Button cases + ** + */ + // Picked Option Type: + // Button + &.pi-select__picked-option-type--button { + :host { + // Size: + // Small + &.pi-select-option__small { + @include selectOptionFontSizes(x-small, x-small, x-small); + @include selectOptionMaxCharacters(30ch); + } + + // Small, Medium & Large + &.pi-select-option__small, + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionHeight(var(--pi-spacing-xxx-large)); + @include selectOptionSpacings(var(--pi-spacing-medium), var(--pi-spacing-x-small)); + @include selectOptionBorderRadius(0.875rem); + } + // Medium & Large + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionFontSizes(small, small, small); + } + } + } + // Input || (Default && (Select Appearance === Fill || Outline)) + &:not(.pi-select__picked-option-type--button) { + :host { + // Flex Direction: + // Row + &.pi-select-option__flex-direction--row { + &:not(.pi-select-option__type--flex-wrap) { + // Size: + // Small + &.pi-select-option__small, + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionHeight(var(--pi-spacing-xx-large)); + @include selectOptionSpacings( + var(--pi-spacing-x-small), + var(--pi-spacing-xxx-small) + ); + @include selectOptionBorderRadius(var(--pi-border-radius-small)); + @include selectOptionFontSizes(x-small, x-small, x-small); + } + } + } + } + } + } + + // Select Type: Default + &:not(.pi-select__type--dropdown) { + // && Menu Type: Flex Wrap + &.pi-select__menu-type--flex-wrap { + :host { + &.pi-select-option__type--flex-wrap { + // Radio button size in Select Otions Type: Flex-Wrap + @include selectOptionRadioButtonSize(0.875rem); + @include selectOptionBorderRadius(0.875rem); + + // Row + &.pi-select-option__flex-direction--row { + &.pi-select-option__small, + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionHeight(var(--pi-spacing-xxxx-large)); + @include selectOptionSpacings( + var(--pi-spacing-medium), + var(--pi-spacing-xx-small) + ); + @include selectOptionFontSizes(x-small, x-small, x-small); + } + } + // Column + &.pi-select-option__flex-direction--column { + &.pi-select-option__small, + &.pi-select-option__medium, + &.pi-select-option__large { + @include selectOptionHeight(6.375rem); + @include selectOptionWidth(8.75rem); + @include selectOptionSpacings(var(--pi-spacing-medium), var(--pi-spacing-medium)); + @include selectOptionFontSizes(x-small, x-small, small); + } + } + } + } + } + } + } + } +} + +/* +* Select Option Flex Direction Column for Select Appearance Fill and Outline Sizes +*/ +@mixin selectOptionFillAndOutlineColumnSize { +} + +// SIDE SPACINGS + +/* +* Select Option for Select Appearance Ghost Spacings +*/ +@mixin selectOptionAppearanceGhostSpacings { +} + +/* +* Select Option Flex Direction Row for Select Appearance Fill and Outline Spacings +*/ +@mixin selectOptionFillAndOutlineRowSpacings { +} + +/* +* Select Option Flex Direction Column for Select Appearance Fill and Outline Spacings +*/ +@mixin selectOptionFillAndOutlineColumnSpacings { +} + +/* +* Select Option In Menu Type Flex Wrap Width +*/ + +@mixin selectOptionFlexWrapWidth($width: 100%) { + :host { + &.pi-select-option__type--flex-wrap { + &.pi-select-option__flex-direction--row { + width: $width; + } + } + } +} + +html { + @include selectOptionAppearanceGhostSizes; + @include selectOptionFillAndOutlineSizes; + + // Mobile + &.is-mobile { + @include selectOptionFlexWrapWidth; + } + // Tablet & Desktop + &:not(.is-mobile) { + @include selectOptionFlexWrapWidth(12rem); + } +} diff --git a/libs/ui/src/lib/ui/select/select-option/_text-align.scss b/libs/ui/src/lib/ui/select/select-option/_text-align.scss index eef2b4a..85e3857 100644 --- a/libs/ui/src/lib/ui/select/select-option/_text-align.scss +++ b/libs/ui/src/lib/ui/select/select-option/_text-align.scss @@ -1,94 +1,94 @@ -/** -* Text Align Center can only be applied when -* -* A) -* -* The Menu Type === Flex Wrap. -* && The Select Option does not have an Icon -*/ - -@mixin selectOptionForMenuTypeFlexWrapTextAlign { - :host { - // Center - &.pi-select-option__text-align--center { - &.pi-select-option__type--flex-wrap { - &:not(.has-icon) { - & > span { - text-align: center; - width: -webkit-fill-available; - } - } - } - } - } -} - -/** -* B) -* -* The Select Component === Single. -* && The Menu Type === Column. -* && The Picked Option Type === Button. -*/ -@mixin selectOptionForPickedOptionTypeButtonTextAlign { - .pi-select { - // Center - &.pi-select__single { - &.pi-select__menu-type--column { - &.pi-select__picked-option-type--button { - &.pi-select__text-align--center { - :host { - &.pi-select-option__type--single { - & > div { - justify-content: center; - width: -webkit-fill-available; - } - &.has-icon { - & > div { - transform: translateX(0.6rem); - } - } - } - } - } - } - } - } - } -} -/** -* C) -* -* The Select Component === Single. -* && The Menu Type === Column. -*/ -@mixin selectOptionMenuTypeColumnTextAlign { - .pi-select { - // Center - &.pi-select__single { - &.pi-select__menu-type--column { - &.pi-select__text-align--center { - :host { - &.pi-select-option__type--single { - & > div { - justify-content: center; - width: -webkit-fill-available; - } - &.has-icon { - & > div { - transform: translateX(0.6rem); - } - } - } - } - } - } - } - } -} - -html { - @include selectOptionForMenuTypeFlexWrapTextAlign; - @include selectOptionForPickedOptionTypeButtonTextAlign; - @include selectOptionMenuTypeColumnTextAlign; -} +/** +* Text Align Center can only be applied when +* +* A) +* +* The Menu Type === Flex Wrap. +* && The Select Option does not have an Icon +*/ + +@mixin selectOptionForMenuTypeFlexWrapTextAlign { + :host { + // Center + &.pi-select-option__text-align--center { + &.pi-select-option__type--flex-wrap { + &:not(.has-icon) { + & > span { + text-align: center; + width: -webkit-fill-available; + } + } + } + } + } +} + +/** +* B) +* +* The Select Component === Single. +* && The Menu Type === Column. +* && The Picked Option Type === Button. +*/ +@mixin selectOptionForPickedOptionTypeButtonTextAlign { + .pi-select { + // Center + &.pi-select__single { + &.pi-select__menu-type--column { + &.pi-select__picked-option-type--button { + &.pi-select__text-align--center { + :host { + &.pi-select-option__type--single { + & > div { + justify-content: center; + width: -webkit-fill-available; + } + &.has-icon { + & > div { + transform: translateX(0.6rem); + } + } + } + } + } + } + } + } + } +} +/** +* C) +* +* The Select Component === Single. +* && The Menu Type === Column. +*/ +@mixin selectOptionMenuTypeColumnTextAlign { + .pi-select { + // Center + &.pi-select__single { + &.pi-select__menu-type--column { + &.pi-select__text-align--center { + :host { + &.pi-select-option__type--single { + & > div { + justify-content: center; + width: -webkit-fill-available; + } + &.has-icon { + & > div { + transform: translateX(0.6rem); + } + } + } + } + } + } + } + } +} + +html { + @include selectOptionForMenuTypeFlexWrapTextAlign; + @include selectOptionForPickedOptionTypeButtonTextAlign; + @include selectOptionMenuTypeColumnTextAlign; +} diff --git a/libs/ui/src/lib/ui/select/select-option/_type.scss b/libs/ui/src/lib/ui/select/select-option/_type.scss index 104effc..6dd9a57 100644 --- a/libs/ui/src/lib/ui/select/select-option/_type.scss +++ b/libs/ui/src/lib/ui/select/select-option/_type.scss @@ -1,262 +1,262 @@ -// TYPE -/** -* The Select Option Type depends on the select, select multiple and date-picker components Appearance -*/ - -/** -* Select Option Single & Multiple for Select Appearance Ghost cases -* -*/ -@mixin selectOptionForSelectAppearanceGhost { - // Ghost - &.pi-select__appearance--ghost { - :host { - display: flex; - // Select option: - // Single || Multiple - &.pi-select-option__type--single, - &.pi-select-option__type--multiple { - & > div { - display: flex; - } - // Is Selected - &.is-selected { - &:not(.is-disabled) { - .pi-select-option__label { - font: { - weight: 600; - } - } - } - } - // Has description - &.has-description { - & > div { - align-items: flex-start; - & > span { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - } - } - - .pi-select-option__radio-button { - transform: translateY(0.1875rem); - } - - // Font Styles: - // Label - .pi-select-option__label { - font: { - weight: 600; - } - } - } - // NOT Has description - &:not(.has-description) { - justify-content: space-between; - align-items: center; - & > div { - align-items: center; - } - } - } - } - } -} - -/** -* Select Option Single & Multiple for Select Appearance Ghost cases -* -*/ -@mixin selectOptionForSelectAppearanceFillAndOutline { - &.pi-select__appearance--fill, - &.pi-select__appearance--outline { - :host { - // Select option type: - // Single || Multiple - &.pi-select-option__type--single, - &.pi-select-option__type--multiple { - // Structure - display: flex; - justify-content: space-between; - align-items: center; - - & > div { - display: flex; - align-items: center; - gap: var(--pi-spacing-xx-small); - width: 100%; - text-wrap: nowrap; - & > span { - display: flex; - align-items: center; - line-height: 1; - } - } - - // State - // Is selected - &.is-selected { - &:not(.is-disabled) { - .pi-select-option__label { - font: { - weight: 600; - } - } - } - } - &:hover { - &:not(.is-disabled) { - .pi-select-option__label { - font: { - weight: 400; - } - } - } - } - .pi-select-option__initials { - font: { - weight: 600; - } - } - } - } - &.pi-select__menu-type--column { - :host { - border: 1px solid; - } - } - } - &.pi-select__appearance--outline { - &.pi-select__picked-option-type--button { - :host { - border: 1px solid; - } - } - } -} - -/** -* Select Option Single -* -*/ -@mixin selectOptionTypeSingle { - .pi-select { - // Select appearance: - // Ghost - @include selectOptionForSelectAppearanceGhost; - // Fill & Outline - // Default (Column) - @include selectOptionForSelectAppearanceFillAndOutline; - } -} - -/** -* Select Option Multiple -*/ -@mixin selectOptionTypeMultiple { - .pi-select { - // Select appearance: - // Ghost - @include selectOptionForSelectAppearanceGhost; - // Fill & Outline - // Default (Column) - @include selectOptionForSelectAppearanceFillAndOutline; - } -} - -/** -* Select Option Type Flex Wrap -* Flex Direction: Row -*/ -@mixin selectOptionTypeFlexWrapFlexDirectionRow { - display: flex; - align-items: center; - gap: var(--pi-spacing-xx-small); - white-space: pre-line; - text-align: left; - - // State: - // Hover -} - -/** -* Select Option Type Flex Wrap -* Flex Direction: Column -*/ -@mixin selectOptionTypeFlexWrapFlexDirectionColumn { - display: grid; - padding: var(--pi-spacing-small); - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-template-areas: - 'icon radio' - 'label label'; - - .pi-select-option__label { - grid-area: label; - } - .pi-select-option__radio-button { - grid-area: radio; - justify-self: end; - } - - .pi-select-option__icon { - grid-area: icon; - } -} - -/** -* Select Option Flex Wrap -*/ -@mixin selectOptionTypeFlexWrap { - .pi-select { - &.pi-select__menu-type--flex-wrap { - :host { - // Select option type: - // Flex Wrap - &.pi-select-option__type--flex-wrap { - border: 1px solid; - .pi-select-option__icon { - height: var(--pi-spacing-xx-large); - width: var(--pi-spacing-xx-large); - min-width: var(--pi-spacing-xx-large); - padding: var(--pi-spacing-xxx-small); - border-radius: 0.6rem; - } - // Is selected - &.is-selected, - &:hover { - &:not(.is-disabled) { - .pi-select-option__label { - font: { - weight: 400; - } - } - } - } - // Select option flex direction: - // Row - &.pi-select-option__flex-direction--row { - @include selectOptionTypeFlexWrapFlexDirectionRow; - } - &.pi-select-option__flex-direction--column { - // Column - @include selectOptionTypeFlexWrapFlexDirectionColumn; - } - } - } - } - } -} - -html { - // Single - @include selectOptionTypeSingle; - // Multiple - @include selectOptionTypeMultiple; - // Flex wrap - @include selectOptionTypeFlexWrap; -} +// TYPE +/** +* The Select Option Type depends on the select, select multiple and date-picker components Appearance +*/ + +/** +* Select Option Single & Multiple for Select Appearance Ghost cases +* +*/ +@mixin selectOptionForSelectAppearanceGhost { + // Ghost + &.pi-select__appearance--ghost { + :host { + display: flex; + // Select option: + // Single || Multiple + &.pi-select-option__type--single, + &.pi-select-option__type--multiple { + & > div { + display: flex; + } + // Is Selected + &.is-selected { + &:not(.is-disabled) { + .pi-select-option__label { + font: { + weight: 600; + } + } + } + } + // Has description + &.has-description { + & > div { + align-items: flex-start; + & > span { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } + } + + .pi-select-option__radio-button { + transform: translateY(0.1875rem); + } + + // Font Styles: + // Label + .pi-select-option__label { + font: { + weight: 600; + } + } + } + // NOT Has description + &:not(.has-description) { + justify-content: space-between; + align-items: center; + & > div { + align-items: center; + } + } + } + } + } +} + +/** +* Select Option Single & Multiple for Select Appearance Ghost cases +* +*/ +@mixin selectOptionForSelectAppearanceFillAndOutline { + &.pi-select__appearance--fill, + &.pi-select__appearance--outline { + :host { + // Select option type: + // Single || Multiple + &.pi-select-option__type--single, + &.pi-select-option__type--multiple { + // Structure + display: flex; + justify-content: space-between; + align-items: center; + + & > div { + display: flex; + align-items: center; + gap: var(--pi-spacing-xx-small); + width: 100%; + text-wrap: nowrap; + & > span { + display: flex; + align-items: center; + line-height: 1; + } + } + + // State + // Is selected + &.is-selected { + &:not(.is-disabled) { + .pi-select-option__label { + font: { + weight: 600; + } + } + } + } + &:hover { + &:not(.is-disabled) { + .pi-select-option__label { + font: { + weight: 400; + } + } + } + } + .pi-select-option__initials { + font: { + weight: 600; + } + } + } + } + &.pi-select__menu-type--column { + :host { + border: 1px solid; + } + } + } + &.pi-select__appearance--outline { + &.pi-select__picked-option-type--button { + :host { + border: 1px solid; + } + } + } +} + +/** +* Select Option Single +* +*/ +@mixin selectOptionTypeSingle { + .pi-select { + // Select appearance: + // Ghost + @include selectOptionForSelectAppearanceGhost; + // Fill & Outline + // Default (Column) + @include selectOptionForSelectAppearanceFillAndOutline; + } +} + +/** +* Select Option Multiple +*/ +@mixin selectOptionTypeMultiple { + .pi-select { + // Select appearance: + // Ghost + @include selectOptionForSelectAppearanceGhost; + // Fill & Outline + // Default (Column) + @include selectOptionForSelectAppearanceFillAndOutline; + } +} + +/** +* Select Option Type Flex Wrap +* Flex Direction: Row +*/ +@mixin selectOptionTypeFlexWrapFlexDirectionRow { + display: flex; + align-items: center; + gap: var(--pi-spacing-xx-small); + white-space: pre-line; + text-align: left; + + // State: + // Hover +} + +/** +* Select Option Type Flex Wrap +* Flex Direction: Column +*/ +@mixin selectOptionTypeFlexWrapFlexDirectionColumn { + display: grid; + padding: var(--pi-spacing-small); + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: + 'icon radio' + 'label label'; + + .pi-select-option__label { + grid-area: label; + } + .pi-select-option__radio-button { + grid-area: radio; + justify-self: end; + } + + .pi-select-option__icon { + grid-area: icon; + } +} + +/** +* Select Option Flex Wrap +*/ +@mixin selectOptionTypeFlexWrap { + .pi-select { + &.pi-select__menu-type--flex-wrap { + :host { + // Select option type: + // Flex Wrap + &.pi-select-option__type--flex-wrap { + border: 1px solid; + .pi-select-option__icon { + height: var(--pi-spacing-xx-large); + width: var(--pi-spacing-xx-large); + min-width: var(--pi-spacing-xx-large); + padding: var(--pi-spacing-xxx-small); + border-radius: 0.6rem; + } + // Is selected + &.is-selected, + &:hover { + &:not(.is-disabled) { + .pi-select-option__label { + font: { + weight: 400; + } + } + } + } + // Select option flex direction: + // Row + &.pi-select-option__flex-direction--row { + @include selectOptionTypeFlexWrapFlexDirectionRow; + } + &.pi-select-option__flex-direction--column { + // Column + @include selectOptionTypeFlexWrapFlexDirectionColumn; + } + } + } + } + } +} + +html { + // Single + @include selectOptionTypeSingle; + // Multiple + @include selectOptionTypeMultiple; + // Flex wrap + @include selectOptionTypeFlexWrap; +} diff --git a/libs/ui/src/lib/ui/select/select-option/select-option.component.html b/libs/ui/src/lib/ui/select/select-option/select-option.component.html index c2346de..8b13a9e 100644 --- a/libs/ui/src/lib/ui/select/select-option/select-option.component.html +++ b/libs/ui/src/lib/ui/select/select-option/select-option.component.html @@ -1,65 +1,65 @@ - - - -
- - - {{ label() | translate }} - {{ - description() | translate - }} - -
- - - {{ initials() | translate }} - - - - - -
- - {{ label() | translate }} -
- {{ initials() | translate }} - - - - - - - {{ label() | translate }} - {{ initials() | translate }} - - - + + + +
+ + + {{ label() | translate }} + {{ + description() | translate + }} + +
+ + + {{ initials() | translate }} + + + + + +
+ + {{ label() | translate }} +
+ {{ initials() | translate }} + + + + + + + {{ label() | translate }} + {{ initials() | translate }} + + + diff --git a/libs/ui/src/lib/ui/select/select-option/select-option.component.scss b/libs/ui/src/lib/ui/select/select-option/select-option.component.scss index 871c61d..ac9cafc 100644 --- a/libs/ui/src/lib/ui/select/select-option/select-option.component.scss +++ b/libs/ui/src/lib/ui/select/select-option/select-option.component.scss @@ -1,55 +1,55 @@ -// Properties -@use 'color'; -@use 'text-align'; -@use 'size'; -@use 'type'; - -:host { - transition: var(--pi-animation); - // States: - // Hover - &:hover { - transition: var(--pi-animation); - // NOT Is Selected && - &:not(.is-disabled) { - cursor: pointer; - transition: var(--pi-animation); - .mat-icon { - transform: scale(1.025); - transition: var(--pi-animation); - } - } - &.is-disabled { - cursor: default; - } - } - &:not(:hover) { - transition: var(--pi-animation); - } - - &.is-disabled { - opacity: 0.33; - } - - .mat-icon { - display: flex; - } - - // Menu Type: - // Default (Column) - &.pi-select__menu-type--column { - :host { - .pi-select-option__label { - line-height: 1; - } - } - } - // Flex wrap - &.pi-select__menu-type--flex-wrap { - :host { - .pi-select-option__label { - line-height: 1.25; - } - } - } -} +// Properties +@use 'color'; +@use 'text-align'; +@use 'size'; +@use 'type'; + +:host { + transition: var(--pi-animation); + // States: + // Hover + &:hover { + transition: var(--pi-animation); + // NOT Is Selected && + &:not(.is-disabled) { + cursor: pointer; + transition: var(--pi-animation); + .mat-icon { + transform: scale(1.025); + transition: var(--pi-animation); + } + } + &.is-disabled { + cursor: default; + } + } + &:not(:hover) { + transition: var(--pi-animation); + } + + &.is-disabled { + opacity: 0.33; + } + + .mat-icon { + display: flex; + } + + // Menu Type: + // Default (Column) + &.pi-select__menu-type--column { + :host { + .pi-select-option__label { + line-height: 1; + } + } + } + // Flex wrap + &.pi-select__menu-type--flex-wrap { + :host { + .pi-select-option__label { + line-height: 1.25; + } + } + } +} diff --git a/libs/ui/src/lib/ui/select/select-option/select-option.component.ts b/libs/ui/src/lib/ui/select/select-option/select-option.component.ts index 2ac109c..ad9c600 100644 --- a/libs/ui/src/lib/ui/select/select-option/select-option.component.ts +++ b/libs/ui/src/lib/ui/select/select-option/select-option.component.ts @@ -1,99 +1,99 @@ -import { - ChangeDetectionStrategy, - Component, - HostBinding, - input, - model -} from '@angular/core'; -import { SelectColor, SelectOptionFlexDirection, actionIcon } from '../entities/select.model'; -import { NgSwitch, NgSwitchCase, NgIf } from '@angular/common'; -import { PiRadioButtonComponent } from '../../button/radio-button/radio-button.component'; -import { MatIcon } from '@angular/material/icon'; -import { MatCheckbox } from '@angular/material/checkbox'; -import { TranslatePipe } from '@ngx-translate/core'; - -@Component({ - selector: 'pi-select-option', - templateUrl: './select-option.component.html', - styleUrls: ['./select-option.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ - NgSwitch, - NgSwitchCase, - NgIf, - PiRadioButtonComponent, - MatIcon, - MatCheckbox, - TranslatePipe, - ], -}) -export class PiSelectOptionComponent { - @HostBinding('class') get classes(): string { - const color = this.color(); - const colorClass = color && `pi-color__${color}`; - const flexDirection = this.flexDirection(); - const flexDirectionClass = - flexDirection && `pi-select-option__flex-direction--${flexDirection}`; - const hasDescriptionClass = this.description() ? 'has-description' : ''; - const hasCheckboxClass = this.type() === 'multiple' ? 'has-checkbox' : ''; - const hasIconClass = this.icon() ? 'has-icon' : ''; - const hasRadioClass = this.hasRadio() ? 'has-radio' : ''; - const textAlign = this.textAlign(); - const justifyClass = textAlign && `pi-select-option__text-align--${textAlign}`; - const size = this.size(); - const sizeClass = size && `pi-select-option__${size}`; - const type = this.type(); - const typeClass = type && `pi-select-option__type--${type}`; - - return [ - 'pi-select-option', - colorClass, - flexDirectionClass, - hasCheckboxClass, - hasDescriptionClass, - hasIconClass, - hasRadioClass, - justifyClass, - sizeClass, - typeClass, - ].join(' '); - } - - // Content - readonly id = input(); - readonly label = input(); - readonly description = input(); - readonly initials = input(); - readonly icon = input(); - readonly actionIcon = input('chevron-forward'); - readonly hasRadio = input(false); - - // Skin - readonly color = input('primary'); - readonly flexDirection = input('row'); - readonly textAlign = input<'left' | 'center'>('left'); - - /** - * Small: for menuType === column && Select Appearance Fill and Outline - * Medium: for menuType === column && Select Appearance Button - * Large: for menuType === flex-wrap && Appearance Fill and Outline - */ - readonly size = input<'small' | 'medium' | 'large'>('medium'); - - /** - * Type 'flex-wrap' is used if parent select type === flex-wrap - * Type 'single' is used if parent select type === default (column) and is a simple select - * Type 'multiple' is used if parent select type === default (column) and is a multiple select - */ - readonly type = input<'single' | 'multiple' | 'flex-wrap'>('single'); - - /** - * `model` en vez de `input` porque los selects padre lo asignan de forma - * imperativa sobre las instancias hijas (`childOption.isSelected.set(...)`). - * El `markForCheck()` manual que hacía el setter anterior ya no hace falta: - * al ser una señal, Angular marca el componente automáticamente. - */ - readonly isSelected = model(false); - - readonly isDisabled = input.required(); -} +import { + ChangeDetectionStrategy, + Component, + HostBinding, + input, + model +} from '@angular/core'; +import { SelectColor, SelectOptionFlexDirection, actionIcon } from '../entities/select.model'; +import { NgSwitch, NgSwitchCase, NgIf } from '@angular/common'; +import { PiRadioButtonComponent } from '../../button/radio-button/radio-button.component'; +import { MatIcon } from '@angular/material/icon'; +import { MatCheckbox } from '@angular/material/checkbox'; +import { TranslatePipe } from '@ngx-translate/core'; + +@Component({ + selector: 'pi-select-option', + templateUrl: './select-option.component.html', + styleUrls: ['./select-option.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + NgSwitch, + NgSwitchCase, + NgIf, + PiRadioButtonComponent, + MatIcon, + MatCheckbox, + TranslatePipe, + ], +}) +export class PiSelectOptionComponent { + @HostBinding('class') get classes(): string { + const color = this.color(); + const colorClass = color && `pi-color__${color}`; + const flexDirection = this.flexDirection(); + const flexDirectionClass = + flexDirection && `pi-select-option__flex-direction--${flexDirection}`; + const hasDescriptionClass = this.description() ? 'has-description' : ''; + const hasCheckboxClass = this.type() === 'multiple' ? 'has-checkbox' : ''; + const hasIconClass = this.icon() ? 'has-icon' : ''; + const hasRadioClass = this.hasRadio() ? 'has-radio' : ''; + const textAlign = this.textAlign(); + const justifyClass = textAlign && `pi-select-option__text-align--${textAlign}`; + const size = this.size(); + const sizeClass = size && `pi-select-option__${size}`; + const type = this.type(); + const typeClass = type && `pi-select-option__type--${type}`; + + return [ + 'pi-select-option', + colorClass, + flexDirectionClass, + hasCheckboxClass, + hasDescriptionClass, + hasIconClass, + hasRadioClass, + justifyClass, + sizeClass, + typeClass, + ].join(' '); + } + + // Content + readonly id = input(); + readonly label = input(); + readonly description = input(); + readonly initials = input(); + readonly icon = input(); + readonly actionIcon = input('chevron-forward'); + readonly hasRadio = input(false); + + // Skin + readonly color = input('primary'); + readonly flexDirection = input('row'); + readonly textAlign = input<'left' | 'center'>('left'); + + /** + * Small: for menuType === column && Select Appearance Fill and Outline + * Medium: for menuType === column && Select Appearance Button + * Large: for menuType === flex-wrap && Appearance Fill and Outline + */ + readonly size = input<'small' | 'medium' | 'large'>('medium'); + + /** + * Type 'flex-wrap' is used if parent select type === flex-wrap + * Type 'single' is used if parent select type === default (column) and is a simple select + * Type 'multiple' is used if parent select type === default (column) and is a multiple select + */ + readonly type = input<'single' | 'multiple' | 'flex-wrap'>('single'); + + /** + * `model` en vez de `input` porque los selects padre lo asignan de forma + * imperativa sobre las instancias hijas (`childOption.isSelected.set(...)`). + * El `markForCheck()` manual que hacía el setter anterior ya no hace falta: + * al ser una señal, Angular marca el componente automáticamente. + */ + readonly isSelected = model(false); + + readonly isDisabled = input.required(); +} diff --git a/libs/ui/src/lib/ui/select/select-period/select-period.component.html b/libs/ui/src/lib/ui/select/select-period/select-period.component.html index 5084358..b37955e 100644 --- a/libs/ui/src/lib/ui/select/select-period/select-period.component.html +++ b/libs/ui/src/lib/ui/select/select-period/select-period.component.html @@ -1,167 +1,167 @@ - - - - - -
- -
- {{ - selectedOption?.name || label() | translate - }} -
- -
- - - - - -
- - -
- - - - {{ - selectedOption?.name || placeholder() | translate - }} - - - - - - -
-
- - - - -
- - -
- - - {{ - selectedOption?.name || placeholder() | translate - }} - - - - - - -
-
- - - - - - - + + + + + +
+ +
+ {{ + selectedOption?.name || label() | translate + }} +
+ +
+ + + + + +
+ + +
+ + + + {{ + selectedOption?.name || placeholder() | translate + }} + + + + + + +
+
+ + + + +
+ + +
+ + + {{ + selectedOption?.name || placeholder() | translate + }} + + + + + + +
+
+ + + + + + + diff --git a/libs/ui/src/lib/ui/select/select-period/select-period.component.scss b/libs/ui/src/lib/ui/select/select-period/select-period.component.scss index 359b039..f52c288 100644 --- a/libs/ui/src/lib/ui/select/select-period/select-period.component.scss +++ b/libs/ui/src/lib/ui/select/select-period/select-period.component.scss @@ -1,5 +1,5 @@ -:host { - // Select Period - &.pi-select__period { - } -} +:host { + // Select Period + &.pi-select__period { + } +} diff --git a/libs/ui/src/lib/ui/select/select-period/select-period.component.ts b/libs/ui/src/lib/ui/select/select-period/select-period.component.ts index 301ba2a..0679f07 100644 --- a/libs/ui/src/lib/ui/select/select-period/select-period.component.ts +++ b/libs/ui/src/lib/ui/select/select-period/select-period.component.ts @@ -9,20 +9,20 @@ import { Injector, Renderer2, input -} from '@angular/core'; +} from '@angular/core'; import { toObservable } from '@angular/core/rxjs-interop'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { TranslateService, TranslatePipe } from '@ngx-translate/core'; -import { merge } from 'rxjs'; -import { PiBaseSelectComponent } from '../base-select.component'; -import { PiSelectOptionComponent } from '../select-option/select-option.component'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { TranslateService, TranslatePipe } from '@ngx-translate/core'; +import { merge } from 'rxjs'; +import { PiBaseSelectComponent } from '../base-select.component'; +import { PiSelectOptionComponent } from '../select-option/select-option.component'; import _ from 'lodash'; import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgFor } from '@angular/common'; import { PiIconComponent } from '../../icon/icon/icon.component'; import { PiDisabledDirective } from '../../../util/status/directives/status.directive'; import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive'; -import { PiSelectComponent } from '../select/select.component'; - +import { PiSelectComponent } from '../select/select.component'; + @Component({ selector: 'pi-select-period', templateUrl: './select-period.component.html', @@ -49,180 +49,180 @@ import { PiSelectComponent } from '../select/select.component'; PiSelectComponent, TranslatePipe, ], -}) -export class PiSelectPeriodComponent extends PiBaseSelectComponent implements AfterContentInit { - /** - * Binds a CSS class name to the host element. - * Represents the default class for the select component. - */ - @HostBinding('class') get classes(): string { - return [ - 'pi-select__period', - this.appearanceClass, - this.colorClass, - this.menuColorClass, - this.menuTypeClass, - this.pickedOptionTypeClass, - this.textAlignClass, - this.typeClass, - ].join(' '); - } - - /** - * Host listener for the click event on the component. - * Toggles the visibility of the select options. - */ - @HostListener('click') - onClick() { - if (!this.isMenuVisible() && !this.disabled) { - this.setIsVisible(); - } else { - this.setIsHidden(); - } - } - - /** - * Host listener for the document click event. - * Ensures that the select options are hidden if clicked outside the component. - * @param event - The mouse event object. - */ - @HostListener('document:click', ['$event']) - onDocumentClick(event: MouseEvent) { - if (!this.el.nativeElement.contains(event.target)) { - this.setIsHidden(); - } - } - - - /** - * Component's constructor. Initializes the component with required services. - * @param translateService - Service used for translating option names. - * @param el - Element reference of the component. - * @param injector - Injector to get instances of dependencies. - * @param _renderer - Renderer to modify native elements. - */ - constructor( - private readonly translateService: TranslateService, - protected override el: ElementRef, - protected override injector: Injector, - protected override readonly _renderer: Renderer2, - private _cdr: ChangeDetectorRef - ) { - super(el, injector, _renderer); - } - - /** - * Getter for the value of the control. - * @returns The value of the control as a string. - */ - get controlValue(): any { - return this.control.value; - } - - /** - * Getter for the selected option based on the control value. - * @returns The selected option. - */ - get selectedOption(): any { - return this.options().find((option) => _.isEqual(this.controlValue, option)); - } - - /** - * Getter for the name of the selected option. - * Uses the `translateService` to get the translated name. - * @returns The translated name of the selected option. - */ - get selectedOptionsName(): Array { - return this.translateService.instant(this.selectedOption.name); - } - - /** - * Angular lifecycle hook that is called after Angular has fully initialized - * a component's content. This method sets up reactive subscriptions to listen - * for changes in either content children or view children. - * - * The method uses the `merge` RxJS operator to combine streams of changes - * from both `childrenOptionsComponents` (content children) and - * `viewChildOptionsComponents` (view children). This ensures that whenever - * any changes occur in either of the child lists, the visual state of the - * select options is updated appropriately. - * - * Using `Promise.resolve().then(...)`, the method ensures that the - * `updateChildrenOptionsSelectedState` method is executed in the next - * microtask, after any ongoing change detection cycles are completed. - * This approach ensures consistent and correct behavior in all scenarios. - * - * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to - * set the initial state of the child options based on the current value of - * `selectedOption`. - */ - ngAfterContentInit(): void { - this.control.setValue(this.selectedOption); - merge( +}) +export class PiSelectPeriodComponent extends PiBaseSelectComponent implements AfterContentInit { + /** + * Binds a CSS class name to the host element. + * Represents the default class for the select component. + */ + @HostBinding('class') get classes(): string { + return [ + 'pi-select__period', + this.appearanceClass, + this.colorClass, + this.menuColorClass, + this.menuTypeClass, + this.pickedOptionTypeClass, + this.textAlignClass, + this.typeClass, + ].join(' '); + } + + /** + * Host listener for the click event on the component. + * Toggles the visibility of the select options. + */ + @HostListener('click') + onClick() { + if (!this.isMenuVisible() && !this.disabled) { + this.setIsVisible(); + } else { + this.setIsHidden(); + } + } + + /** + * Host listener for the document click event. + * Ensures that the select options are hidden if clicked outside the component. + * @param event - The mouse event object. + */ + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + if (!this.el.nativeElement.contains(event.target)) { + this.setIsHidden(); + } + } + + + /** + * Component's constructor. Initializes the component with required services. + * @param translateService - Service used for translating option names. + * @param el - Element reference of the component. + * @param injector - Injector to get instances of dependencies. + * @param _renderer - Renderer to modify native elements. + */ + constructor( + private readonly translateService: TranslateService, + protected override el: ElementRef, + protected override injector: Injector, + protected override readonly _renderer: Renderer2, + private _cdr: ChangeDetectorRef + ) { + super(el, injector, _renderer); + } + + /** + * Getter for the value of the control. + * @returns The value of the control as a string. + */ + get controlValue(): any { + return this.control.value; + } + + /** + * Getter for the selected option based on the control value. + * @returns The selected option. + */ + get selectedOption(): any { + return this.options().find((option) => _.isEqual(this.controlValue, option)); + } + + /** + * Getter for the name of the selected option. + * Uses the `translateService` to get the translated name. + * @returns The translated name of the selected option. + */ + get selectedOptionsName(): Array { + return this.translateService.instant(this.selectedOption.name); + } + + /** + * Angular lifecycle hook that is called after Angular has fully initialized + * a component's content. This method sets up reactive subscriptions to listen + * for changes in either content children or view children. + * + * The method uses the `merge` RxJS operator to combine streams of changes + * from both `childrenOptionsComponents` (content children) and + * `viewChildOptionsComponents` (view children). This ensures that whenever + * any changes occur in either of the child lists, the visual state of the + * select options is updated appropriately. + * + * Using `Promise.resolve().then(...)`, the method ensures that the + * `updateChildrenOptionsSelectedState` method is executed in the next + * microtask, after any ongoing change detection cycles are completed. + * This approach ensures consistent and correct behavior in all scenarios. + * + * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to + * set the initial state of the child options based on the current value of + * `selectedOption`. + */ + ngAfterContentInit(): void { + this.control.setValue(this.selectedOption); + merge( toObservable(this.childrenOptionsComponents, { injector: this.injector }), - toObservable(this.viewChildOptionsComponents, { injector: this.injector }), - this.control.valueChanges - ).subscribe(() => { - Promise.resolve().then(() => { - this.updateChildrenOptionsSelectedState(this.selectedOption); - }); - }); - } - - /** - * Handles the logic for selecting an option. - * Sets the control value to the value of the selected option and updates child states. - * @param option - The option to be selected. - */ - onSelectOption(option: any) { - this.control.setValue(option); - this.updateChildrenOptionsSelectedState(option); - } - - /** - * Updates the visual state of child options based on the selected option. - * - * This method first determines whether the child options are content projected - * from the parent or are internally defined within the component. Depending on - * the source, it then updates the visual state of each child option accordingly. - * - * @param selectedOption - The currently selected option. - */ - private updateChildrenOptionsSelectedState(selectedOption: any): void { - // Array of child option components to work with. - let childrenOptionsComponent: readonly PiSelectOptionComponent[]; - // Reference to the child option elements for DOM manipulation. - let childrenOptionsElementRef: readonly ElementRef[]; - - // Check if we have child options that are content projected from a parent component. + toObservable(this.viewChildOptionsComponents, { injector: this.injector }), + this.control.valueChanges + ).subscribe(() => { + Promise.resolve().then(() => { + this.updateChildrenOptionsSelectedState(this.selectedOption); + }); + }); + } + + /** + * Handles the logic for selecting an option. + * Sets the control value to the value of the selected option and updates child states. + * @param option - The option to be selected. + */ + onSelectOption(option: any) { + this.control.setValue(option); + this.updateChildrenOptionsSelectedState(option); + } + + /** + * Updates the visual state of child options based on the selected option. + * + * This method first determines whether the child options are content projected + * from the parent or are internally defined within the component. Depending on + * the source, it then updates the visual state of each child option accordingly. + * + * @param selectedOption - The currently selected option. + */ + private updateChildrenOptionsSelectedState(selectedOption: any): void { + // Array of child option components to work with. + let childrenOptionsComponent: readonly PiSelectOptionComponent[]; + // Reference to the child option elements for DOM manipulation. + let childrenOptionsElementRef: readonly ElementRef[]; + + // Check if we have child options that are content projected from a parent component. const childrenOptionsComponents = this.childrenOptionsComponents(); - if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { - childrenOptionsComponent = childrenOptionsComponents; - childrenOptionsElementRef = this.childrenOptionsEl(); - } else { - // If not, it means they're internally defined (default), so we fetch from viewChildren. - childrenOptionsComponent = this.viewChildOptionsComponents(); - childrenOptionsElementRef = this.viewChildOptionsEl(); - } - - // Update the visual state of each child option. - childrenOptionsComponent?.forEach((childOption, index) => { - const isSelected = selectedOption - ? selectedOption[this.keyIdProperty()] === childOption['id'] - : false; - // If the current child option matches the selected option, highlight it. - if (isSelected) { - this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); - childOption.isSelected.set(true); - } else { - // Otherwise, ensure it is not highlighted. - this._renderer.removeClass( - childrenOptionsElementRef[index]?.nativeElement, - 'is-selected' - ); - childOption.isSelected.set(false); - } - }); - this._cdr.markForCheck(); - } -} + if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { + childrenOptionsComponent = childrenOptionsComponents; + childrenOptionsElementRef = this.childrenOptionsEl(); + } else { + // If not, it means they're internally defined (default), so we fetch from viewChildren. + childrenOptionsComponent = this.viewChildOptionsComponents(); + childrenOptionsElementRef = this.viewChildOptionsEl(); + } + + // Update the visual state of each child option. + childrenOptionsComponent?.forEach((childOption, index) => { + const isSelected = selectedOption + ? selectedOption[this.keyIdProperty()] === childOption['id'] + : false; + // If the current child option matches the selected option, highlight it. + if (isSelected) { + this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); + childOption.isSelected.set(true); + } else { + // Otherwise, ensure it is not highlighted. + this._renderer.removeClass( + childrenOptionsElementRef[index]?.nativeElement, + 'is-selected' + ); + childOption.isSelected.set(false); + } + }); + this._cdr.markForCheck(); + } +} diff --git a/libs/ui/src/lib/ui/select/select/select.component.html b/libs/ui/src/lib/ui/select/select/select.component.html index 399a9d1..9da8522 100644 --- a/libs/ui/src/lib/ui/select/select/select.component.html +++ b/libs/ui/src/lib/ui/select/select/select.component.html @@ -1,141 +1,141 @@ - - - - - -
- -
- {{ - selectedOption?.name || label() | translate - }} -
- -
- - - - - -
- - -
- - - - {{ - selectedOption?.name || placeholder() | translate - }} - - - - - - -
-
- - - - -
- - -
- - - {{ - selectedOption?.name || placeholder() | translate - }} - - - - - - -
-
- - - - - - - + + + + + +
+ +
+ {{ + selectedOption?.name || label() | translate + }} +
+ +
+ + + + + +
+ + +
+ + + + {{ + selectedOption?.name || placeholder() | translate + }} + + + + + + +
+
+ + + + +
+ + +
+ + + {{ + selectedOption?.name || placeholder() | translate + }} + + + + + + +
+
+ + + + + + + diff --git a/libs/ui/src/lib/ui/select/select/select.component.ts b/libs/ui/src/lib/ui/select/select/select.component.ts index f34dcd8..b9890a9 100644 --- a/libs/ui/src/lib/ui/select/select/select.component.ts +++ b/libs/ui/src/lib/ui/select/select/select.component.ts @@ -1,17 +1,17 @@ -import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Injector, QueryList, Renderer2, forwardRef, input } from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Injector, QueryList, Renderer2, forwardRef, input } from '@angular/core'; import { toObservable } from '@angular/core/rxjs-interop'; -import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; -import { TranslateService, TranslatePipe } from '@ngx-translate/core'; -import { merge } from 'rxjs'; -import { PiBaseSelectComponent } from '../base-select.component'; -import { PiSelectOptionComponent } from '../select-option/select-option.component'; +import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; +import { TranslateService, TranslatePipe } from '@ngx-translate/core'; +import { merge } from 'rxjs'; +import { PiBaseSelectComponent } from '../base-select.component'; +import { PiSelectOptionComponent } from '../select-option/select-option.component'; import _ from 'lodash'; import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgFor } from '@angular/common'; import { PiIconComponent } from '../../icon/icon/icon.component'; import { PiDisabledDirective } from '../../../util/status/directives/status.directive'; import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive'; - - + + @Component({ selector: 'pi-select', templateUrl: './select.component.html', @@ -38,187 +38,187 @@ import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directi forwardRef(() => PiSelectComponent), TranslatePipe ], -}) -export class PiSelectComponent extends PiBaseSelectComponent implements AfterContentInit { - /** - * Binds a CSS class name to the host element. - * Represents the default class for the select component. - */ - @HostBinding('class') get classes(): string { - return [ - 'pi-select__single', - this.hasRadioClass, - this.appearanceClass, - this.colorClass, - this.menuColorClass, - this.menuTypeClass, - this.pickedOptionTypeClass, - this.sizeClass, - this.textAlignClass, - this.typeClass, - this.isResponsiveClass - ].join(' '); - } - - /** - * Host listener for the click event on the component. - * Toggles the visibility of the select options. - */ - @HostListener('click') - onClick() { - if (!this.isMenuVisible() && !this.disabled) { - this.setIsVisible(); - } else { - this.setIsHidden(); - } - } - - /** - * Host listener for the document click event. - * Ensures that the select options are hidden if clicked outside the component. - * @param event - The mouse event object. - */ - @HostListener('document:click', ['$event']) - onDocumentClick(event: MouseEvent) { - if (!this.el.nativeElement.contains(event.target)) { - this.setIsHidden(); - } - } - - readonly hasRadio = input(false); - - /** - * Component's constructor. Initializes the component with required services. - * @param translateService - Service used for translating option names. - * @param el - Element reference of the component. - * @param injector - Injector to get instances of dependencies. - * @param _renderer - Renderer to modify native elements. - */ - constructor( - private readonly translateService: TranslateService, - protected override el: ElementRef, - protected override injector: Injector, - protected override readonly _renderer: Renderer2, - private _cdr: ChangeDetectorRef - ) { - super(el, injector, _renderer); - } - - /** - * Getter for the value of the control. - * @returns The value of the control as a string. - */ - get controlValue(): any { - return this.control.value; - } - - /** - * Getter for the selected option based on the control value. - * @returns The selected option. - */ - get selectedOption(): any { - return this.options().find((option) => _.isEqual(this.controlValue, option)); - } - - /** - * Getter for the name of the selected option. - * Uses the `translateService` to get the translated name. - * @returns The translated name of the selected option. - */ - get selectedOptionsName(): Array { - return this.translateService.instant(this.selectedOption.name); - } - - /** - * Angular lifecycle hook that is called after Angular has fully initialized - * a component's content. This method sets up reactive subscriptions to listen - * for changes in either content children or view children. - * - * The method uses the `merge` RxJS operator to combine streams of changes - * from both `childrenOptionsComponents` (content children) and - * `viewChildOptionsComponents` (view children). This ensures that whenever - * any changes occur in either of the child lists, the visual state of the - * select options is updated appropriately. - * - * Using `Promise.resolve().then(...)`, the method ensures that the - * `updateChildrenOptionsSelectedState` method is executed in the next - * microtask, after any ongoing change detection cycles are completed. - * This approach ensures consistent and correct behavior in all scenarios. - * - * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to - * set the initial state of the child options based on the current value of - * `selectedOption`. - */ - ngAfterContentInit(): void { - this.control.setValue(this.selectedOption); - merge( +}) +export class PiSelectComponent extends PiBaseSelectComponent implements AfterContentInit { + /** + * Binds a CSS class name to the host element. + * Represents the default class for the select component. + */ + @HostBinding('class') get classes(): string { + return [ + 'pi-select__single', + this.hasRadioClass, + this.appearanceClass, + this.colorClass, + this.menuColorClass, + this.menuTypeClass, + this.pickedOptionTypeClass, + this.sizeClass, + this.textAlignClass, + this.typeClass, + this.isResponsiveClass + ].join(' '); + } + + /** + * Host listener for the click event on the component. + * Toggles the visibility of the select options. + */ + @HostListener('click') + onClick() { + if (!this.isMenuVisible() && !this.disabled) { + this.setIsVisible(); + } else { + this.setIsHidden(); + } + } + + /** + * Host listener for the document click event. + * Ensures that the select options are hidden if clicked outside the component. + * @param event - The mouse event object. + */ + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + if (!this.el.nativeElement.contains(event.target)) { + this.setIsHidden(); + } + } + + readonly hasRadio = input(false); + + /** + * Component's constructor. Initializes the component with required services. + * @param translateService - Service used for translating option names. + * @param el - Element reference of the component. + * @param injector - Injector to get instances of dependencies. + * @param _renderer - Renderer to modify native elements. + */ + constructor( + private readonly translateService: TranslateService, + protected override el: ElementRef, + protected override injector: Injector, + protected override readonly _renderer: Renderer2, + private _cdr: ChangeDetectorRef + ) { + super(el, injector, _renderer); + } + + /** + * Getter for the value of the control. + * @returns The value of the control as a string. + */ + get controlValue(): any { + return this.control.value; + } + + /** + * Getter for the selected option based on the control value. + * @returns The selected option. + */ + get selectedOption(): any { + return this.options().find((option) => _.isEqual(this.controlValue, option)); + } + + /** + * Getter for the name of the selected option. + * Uses the `translateService` to get the translated name. + * @returns The translated name of the selected option. + */ + get selectedOptionsName(): Array { + return this.translateService.instant(this.selectedOption.name); + } + + /** + * Angular lifecycle hook that is called after Angular has fully initialized + * a component's content. This method sets up reactive subscriptions to listen + * for changes in either content children or view children. + * + * The method uses the `merge` RxJS operator to combine streams of changes + * from both `childrenOptionsComponents` (content children) and + * `viewChildOptionsComponents` (view children). This ensures that whenever + * any changes occur in either of the child lists, the visual state of the + * select options is updated appropriately. + * + * Using `Promise.resolve().then(...)`, the method ensures that the + * `updateChildrenOptionsSelectedState` method is executed in the next + * microtask, after any ongoing change detection cycles are completed. + * This approach ensures consistent and correct behavior in all scenarios. + * + * Lastly, it proactively calls `updateChildrenOptionsSelectedState` to + * set the initial state of the child options based on the current value of + * `selectedOption`. + */ + ngAfterContentInit(): void { + this.control.setValue(this.selectedOption); + merge( toObservable(this.childrenOptionsComponents, { injector: this.injector }), - toObservable(this.viewChildOptionsComponents, { injector: this.injector }), - this.control.valueChanges - ).subscribe(() => { - Promise.resolve().then(() => { - this.updateChildrenOptionsSelectedState(this.selectedOption); - }); - }); - } - - /** - * Handles the logic for selecting an option. - * Sets the control value to the value of the selected option and updates child states. - * @param option - The option to be selected. - */ - onSelectOption(option: any) { - this.control.setValue(option); - this.updateChildrenOptionsSelectedState(option); - } - - /** - * Updates the visual state of child options based on the selected option. - * - * This method first determines whether the child options are content projected - * from the parent or are internally defined within the component. Depending on - * the source, it then updates the visual state of each child option accordingly. - * - * @param selectedOption - The currently selected option. - */ - private updateChildrenOptionsSelectedState(selectedOption: any): void { - // Array of child option components to work with. - let childrenOptionsComponent: readonly PiSelectOptionComponent[]; - // Reference to the child option elements for DOM manipulation. - let childrenOptionsElementRef: readonly ElementRef[]; - - // Check if we have child options that are content projected from a parent component. + toObservable(this.viewChildOptionsComponents, { injector: this.injector }), + this.control.valueChanges + ).subscribe(() => { + Promise.resolve().then(() => { + this.updateChildrenOptionsSelectedState(this.selectedOption); + }); + }); + } + + /** + * Handles the logic for selecting an option. + * Sets the control value to the value of the selected option and updates child states. + * @param option - The option to be selected. + */ + onSelectOption(option: any) { + this.control.setValue(option); + this.updateChildrenOptionsSelectedState(option); + } + + /** + * Updates the visual state of child options based on the selected option. + * + * This method first determines whether the child options are content projected + * from the parent or are internally defined within the component. Depending on + * the source, it then updates the visual state of each child option accordingly. + * + * @param selectedOption - The currently selected option. + */ + private updateChildrenOptionsSelectedState(selectedOption: any): void { + // Array of child option components to work with. + let childrenOptionsComponent: readonly PiSelectOptionComponent[]; + // Reference to the child option elements for DOM manipulation. + let childrenOptionsElementRef: readonly ElementRef[]; + + // Check if we have child options that are content projected from a parent component. const childrenOptionsComponents = this.childrenOptionsComponents(); - if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { - childrenOptionsComponent = childrenOptionsComponents; - childrenOptionsElementRef = this.childrenOptionsEl(); - } else { - // If not, it means they're internally defined (default), so we fetch from viewChildren. - childrenOptionsComponent = this.viewChildOptionsComponents(); - childrenOptionsElementRef = this.viewChildOptionsEl(); - } - - // Update the visual state of each child option. - childrenOptionsComponent?.forEach((childOption, index) => { - const isSelected = selectedOption - ? selectedOption[this.keyIdProperty()] === childOption['id'] - : false; - // If the current child option matches the selected option, highlight it. - if (isSelected) { - this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); - childOption.isSelected.set(true); - } else { // Otherwise, ensure it is not highlighted. - this._renderer.removeClass( - childrenOptionsElementRef[index]?.nativeElement, - 'is-selected' - ); - childOption.isSelected.set(false); - } - }); - this._cdr.markForCheck(); - } - - get hasRadioClass(): string | undefined { - return this.hasRadio() ? 'has-radio' : ''; - } -} + if (childrenOptionsComponents && childrenOptionsComponents.length > 0) { + childrenOptionsComponent = childrenOptionsComponents; + childrenOptionsElementRef = this.childrenOptionsEl(); + } else { + // If not, it means they're internally defined (default), so we fetch from viewChildren. + childrenOptionsComponent = this.viewChildOptionsComponents(); + childrenOptionsElementRef = this.viewChildOptionsEl(); + } + + // Update the visual state of each child option. + childrenOptionsComponent?.forEach((childOption, index) => { + const isSelected = selectedOption + ? selectedOption[this.keyIdProperty()] === childOption['id'] + : false; + // If the current child option matches the selected option, highlight it. + if (isSelected) { + this._renderer.addClass(childrenOptionsElementRef[index]?.nativeElement, 'is-selected'); + childOption.isSelected.set(true); + } else { // Otherwise, ensure it is not highlighted. + this._renderer.removeClass( + childrenOptionsElementRef[index]?.nativeElement, + 'is-selected' + ); + childOption.isSelected.set(false); + } + }); + this._cdr.markForCheck(); + } + + get hasRadioClass(): string | undefined { + return this.hasRadio() ? 'has-radio' : ''; + } +} diff --git a/libs/ui/src/lib/ui/select/styles/_appearance.scss b/libs/ui/src/lib/ui/select/styles/_appearance.scss index 0b99ce7..22cdac5 100644 --- a/libs/ui/src/lib/ui/select/styles/_appearance.scss +++ b/libs/ui/src/lib/ui/select/styles/_appearance.scss @@ -1,91 +1,91 @@ -// Button -@mixin selectPickedOptionButton { - :host { - &.pi-select__picked-option-type--button { - .pi-select-options-menu { - border-radius: var(--pi-border-radius-medium); - & > div { - & > span { - & > div { - height: var(--pi-height-button-large); - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 var(--pi-spacing-small) 0 var(--pi-spacing-x-large); - border-radius: var(--pi-border-radius-medium); - transition: var(--pi-animation); - } - &.is-active { - & > div { - border: 1px solid; - } - } - } - } - } - } - } -} - -@mixin selectPickedOptionButtonMobile { - :host { - &.pi-select__picked-option-type--button { - .pi-select-options-menu { - position: absolute; - z-index: 99; - padding: var(--pi-spacing-x-large) var(--pi-spacing-xxxx-small) var(--pi-spacing-medium) - var(--pi-spacing-large); - } - &:not(.pi-select__multiple) { - .pi-select-options-menu { - margin-top: var(--pi-spacing-xxx-large); - } - } - &.pi-select__multiple { - .pi-select-options-menu { - margin-top: calc( - var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + var(--pi-spacing-medium) - ); - } - } - } - } -} - -html { - // Button - @include selectPickedOptionButton; - - // Mobile - &.is-mobile { - // Button mobile - @include selectPickedOptionButtonMobile; - :host { - .pi-select-options-menu { - width: 100%; - } - // Appearance - // Fill & Outline - &.pi-select__appearance--fill, - &.pi-select__appearance--outline { - .pi-select-options-menu { - margin-top: var(--pi-spacing-small); - } - } - } - } - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - :host { - &.pi-select__picked-option-type--button { - .pi-select-options-menu { - min-width: max-content; - right: 0; - } - } - } - } - } -} +// Button +@mixin selectPickedOptionButton { + :host { + &.pi-select__picked-option-type--button { + .pi-select-options-menu { + border-radius: var(--pi-border-radius-medium); + & > div { + & > span { + & > div { + height: var(--pi-height-button-large); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--pi-spacing-small) 0 var(--pi-spacing-x-large); + border-radius: var(--pi-border-radius-medium); + transition: var(--pi-animation); + } + &.is-active { + & > div { + border: 1px solid; + } + } + } + } + } + } + } +} + +@mixin selectPickedOptionButtonMobile { + :host { + &.pi-select__picked-option-type--button { + .pi-select-options-menu { + position: absolute; + z-index: 99; + padding: var(--pi-spacing-x-large) var(--pi-spacing-xxxx-small) var(--pi-spacing-medium) + var(--pi-spacing-large); + } + &:not(.pi-select__multiple) { + .pi-select-options-menu { + margin-top: var(--pi-spacing-xxx-large); + } + } + &.pi-select__multiple { + .pi-select-options-menu { + margin-top: calc( + var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + var(--pi-spacing-medium) + ); + } + } + } + } +} + +html { + // Button + @include selectPickedOptionButton; + + // Mobile + &.is-mobile { + // Button mobile + @include selectPickedOptionButtonMobile; + :host { + .pi-select-options-menu { + width: 100%; + } + // Appearance + // Fill & Outline + &.pi-select__appearance--fill, + &.pi-select__appearance--outline { + .pi-select-options-menu { + margin-top: var(--pi-spacing-small); + } + } + } + } + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + :host { + &.pi-select__picked-option-type--button { + .pi-select-options-menu { + min-width: max-content; + right: 0; + } + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/select/styles/_color.scss b/libs/ui/src/lib/ui/select/styles/_color.scss index d0a75c9..180e9fd 100644 --- a/libs/ui/src/lib/ui/select/styles/_color.scss +++ b/libs/ui/src/lib/ui/select/styles/_color.scss @@ -1,251 +1,251 @@ -/*** -* 1. Select Picked Option Type: Input -* -* 1.1. Color Mixin for the following cases: -* -* Select Appearance: FILL && -* Select Type: DROPDOWN && -* Select Picked Option Type: INPUT -* -**/ - -@mixin pickedOptionTypeInputAppearanceFillColor($theming-color) { - &.pi-select { - &.pi-select__picked-option-type--input { - &.pi-select__appearance--fill { - .pi-select-picked-option { - & > div { - background-color: var(--pi-color-white); - } - } - &:not(:hover) { - &:not(.is-expanded) { - .pi-select-picked-option { - & > div { - border-color: var(--pi-color-grey-100); - } - } - .pi-select-picked-option__label { - color: var(--pi-color-grey-300); - } - .pi-select-picked-option__placeholder { - color: var(--pi-color-grey-300); - } - } - } - - // Is Expanded - &.is-expanded { - .pi-select-picked-option { - & > div { - border-color: var(--pi-color-#{$theming-color}); - } - } - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon { - color: var(--pi-color-#{$theming-color}); - } - .pi-select-picked-option__placeholder { - color: var(--pi-color-#{$theming-color}); - } - } - - // Hover - &:hover { - &:not(.is-expanded):not(.is-disabled) { - .pi-select-picked-option { - & > div { - border-color: var(--pi-color-grey-200); - } - } - .pi-select-picked-option__label { - color: var(--pi-color-grey); - } - .pi-select-picked-option__placeholder { - color: var(--pi-color-grey-300); - } - } - } - } - } - } -} - -/*** -* 1. Select Picked Option Type: Input -* -* 1.2. Color Mixin for the following cases: -* -* Select Appearance: OUTLINE && -* Select Type: DROPDOWN && -* Select Picked Option Type: INPUT -* -**/ - -@mixin pickedOptionTypeInputAppearanceOutlineColor($theming-color) { - &.pi-select { - &.pi-select__picked-option-type--input { - &.pi-select__appearance--outline { - .pi-select-picked-option { - & > div { - background-color: var(--pi-color-white); - } - } - // Default - &:not(:hover) { - &:not(.is-expanded) { - .pi-select-picked-option { - & > div { - border-color: var(--pi-color-grey-200); - } - } - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon, - .pi-select-picked-option__custom-icon { - color: var(--pi-color-grey-200); - } - .pi-select-picked-option__placeholder { - color: var(--pi-color-grey-200); - } - } - } - - // Is Expanded - &.is-expanded { - .pi-select-picked-option { - & > div { - border-color: var(--pi-color-#{$theming-color}); - } - } - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon, - .pi-select-picked-option__custom-icon { - color: var(--pi-color-#{$theming-color}); - } - .pi-select-picked-option__placeholder { - color: var(--pi-color-#{$theming-color}); - } - } - - // Hover - &:hover { - &:not(.is-expanded):not(.is-disabled) { - .pi-select-picked-option { - & > div { - border-color: var(--pi-color-grey-300); - } - } - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon, - .pi-select-picked-option__custom-icon { - color: var(--pi-color-grey-300); - } - .pi-select-picked-option__placeholder { - color: var(--pi-color-grey-300); - } - } - } - } - } - } -} - -/*** -* 2. Select Picked Option Type: Button -* -* 2.1. Color Mixin for the following cases: -* -* Select Appearance: FILL || OUTLINE || GHOST && -* Select Type: DROPDOWN && -* Select Picked Option Type: BUTTON -* -**/ - -@mixin pickedOptionTypeButtonColor($theming-color) { - &.pi-select { - &.pi-select__picked-option-type--button { - // Select Appearance: - // Fill & Ghost - &.pi-select__appearance--fill, - &.pi-select__appearance--ghost { - .pi-select-picked-option { - border-color: transparent; - } - } - // Default - &:not(:hover) { - .pi-select-picked-option { - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon, - .pi-select-picked-option__custom-icon { - color: var(--pi-color-#{$theming-color}); - } - } - - // Outline - &.pi-select__appearance--outline { - .pi-select-picked-option { - border-color: var(--pi-color-#{$theming-color}-200); - } - } - } - // Is Expanded - &.is-expanded { - .pi-select-picked-option { - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon, - .pi-select-picked-option__custom-icon { - color: var(--pi-color-#{$theming-color}); - } - } - - // Outline - &.pi-select__appearance--outline { - .pi-select-picked-option { - border-color: var(--pi-color-#{$theming-color}); - } - } - } - // Hover - &:hover { - &:not(.is-expanded):not(.is-disabled) { - .pi-select-picked-option { - .pi-select-picked-option__label, - .pi-select-picked-option__action-icon, - .pi-select-picked-option__custom-icon { - color: var(--pi-color-#{$theming-color}); - } - } - - // Outline - &.pi-select__appearance--outline { - .pi-select-picked-option { - border-color: var(--pi-color-#{$theming-color}); - } - } - } - } - } - } -} - -:host { - // Primary - &.pi-color__primary { - @include pickedOptionTypeInputAppearanceFillColor(primary); - @include pickedOptionTypeInputAppearanceOutlineColor(primary); - @include pickedOptionTypeButtonColor(primary); - } - // Accent - &.pi-color__accent { - @include pickedOptionTypeInputAppearanceFillColor(accent); - @include pickedOptionTypeInputAppearanceOutlineColor(accent); - @include pickedOptionTypeButtonColor(accent); - } - // Highlighted - &.pi-color__highlighted { - @include pickedOptionTypeInputAppearanceFillColor(highlighted); - @include pickedOptionTypeInputAppearanceOutlineColor(highlighted); - @include pickedOptionTypeButtonColor(highlighted); - } -} +/*** +* 1. Select Picked Option Type: Input +* +* 1.1. Color Mixin for the following cases: +* +* Select Appearance: FILL && +* Select Type: DROPDOWN && +* Select Picked Option Type: INPUT +* +**/ + +@mixin pickedOptionTypeInputAppearanceFillColor($theming-color) { + &.pi-select { + &.pi-select__picked-option-type--input { + &.pi-select__appearance--fill { + .pi-select-picked-option { + & > div { + background-color: var(--pi-color-white); + } + } + &:not(:hover) { + &:not(.is-expanded) { + .pi-select-picked-option { + & > div { + border-color: var(--pi-color-grey-100); + } + } + .pi-select-picked-option__label { + color: var(--pi-color-grey-300); + } + .pi-select-picked-option__placeholder { + color: var(--pi-color-grey-300); + } + } + } + + // Is Expanded + &.is-expanded { + .pi-select-picked-option { + & > div { + border-color: var(--pi-color-#{$theming-color}); + } + } + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon { + color: var(--pi-color-#{$theming-color}); + } + .pi-select-picked-option__placeholder { + color: var(--pi-color-#{$theming-color}); + } + } + + // Hover + &:hover { + &:not(.is-expanded):not(.is-disabled) { + .pi-select-picked-option { + & > div { + border-color: var(--pi-color-grey-200); + } + } + .pi-select-picked-option__label { + color: var(--pi-color-grey); + } + .pi-select-picked-option__placeholder { + color: var(--pi-color-grey-300); + } + } + } + } + } + } +} + +/*** +* 1. Select Picked Option Type: Input +* +* 1.2. Color Mixin for the following cases: +* +* Select Appearance: OUTLINE && +* Select Type: DROPDOWN && +* Select Picked Option Type: INPUT +* +**/ + +@mixin pickedOptionTypeInputAppearanceOutlineColor($theming-color) { + &.pi-select { + &.pi-select__picked-option-type--input { + &.pi-select__appearance--outline { + .pi-select-picked-option { + & > div { + background-color: var(--pi-color-white); + } + } + // Default + &:not(:hover) { + &:not(.is-expanded) { + .pi-select-picked-option { + & > div { + border-color: var(--pi-color-grey-200); + } + } + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon, + .pi-select-picked-option__custom-icon { + color: var(--pi-color-grey-200); + } + .pi-select-picked-option__placeholder { + color: var(--pi-color-grey-200); + } + } + } + + // Is Expanded + &.is-expanded { + .pi-select-picked-option { + & > div { + border-color: var(--pi-color-#{$theming-color}); + } + } + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon, + .pi-select-picked-option__custom-icon { + color: var(--pi-color-#{$theming-color}); + } + .pi-select-picked-option__placeholder { + color: var(--pi-color-#{$theming-color}); + } + } + + // Hover + &:hover { + &:not(.is-expanded):not(.is-disabled) { + .pi-select-picked-option { + & > div { + border-color: var(--pi-color-grey-300); + } + } + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon, + .pi-select-picked-option__custom-icon { + color: var(--pi-color-grey-300); + } + .pi-select-picked-option__placeholder { + color: var(--pi-color-grey-300); + } + } + } + } + } + } +} + +/*** +* 2. Select Picked Option Type: Button +* +* 2.1. Color Mixin for the following cases: +* +* Select Appearance: FILL || OUTLINE || GHOST && +* Select Type: DROPDOWN && +* Select Picked Option Type: BUTTON +* +**/ + +@mixin pickedOptionTypeButtonColor($theming-color) { + &.pi-select { + &.pi-select__picked-option-type--button { + // Select Appearance: + // Fill & Ghost + &.pi-select__appearance--fill, + &.pi-select__appearance--ghost { + .pi-select-picked-option { + border-color: transparent; + } + } + // Default + &:not(:hover) { + .pi-select-picked-option { + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon, + .pi-select-picked-option__custom-icon { + color: var(--pi-color-#{$theming-color}); + } + } + + // Outline + &.pi-select__appearance--outline { + .pi-select-picked-option { + border-color: var(--pi-color-#{$theming-color}-200); + } + } + } + // Is Expanded + &.is-expanded { + .pi-select-picked-option { + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon, + .pi-select-picked-option__custom-icon { + color: var(--pi-color-#{$theming-color}); + } + } + + // Outline + &.pi-select__appearance--outline { + .pi-select-picked-option { + border-color: var(--pi-color-#{$theming-color}); + } + } + } + // Hover + &:hover { + &:not(.is-expanded):not(.is-disabled) { + .pi-select-picked-option { + .pi-select-picked-option__label, + .pi-select-picked-option__action-icon, + .pi-select-picked-option__custom-icon { + color: var(--pi-color-#{$theming-color}); + } + } + + // Outline + &.pi-select__appearance--outline { + .pi-select-picked-option { + border-color: var(--pi-color-#{$theming-color}); + } + } + } + } + } + } +} + +:host { + // Primary + &.pi-color__primary { + @include pickedOptionTypeInputAppearanceFillColor(primary); + @include pickedOptionTypeInputAppearanceOutlineColor(primary); + @include pickedOptionTypeButtonColor(primary); + } + // Accent + &.pi-color__accent { + @include pickedOptionTypeInputAppearanceFillColor(accent); + @include pickedOptionTypeInputAppearanceOutlineColor(accent); + @include pickedOptionTypeButtonColor(accent); + } + // Highlighted + &.pi-color__highlighted { + @include pickedOptionTypeInputAppearanceFillColor(highlighted); + @include pickedOptionTypeInputAppearanceOutlineColor(highlighted); + @include pickedOptionTypeButtonColor(highlighted); + } +} diff --git a/libs/ui/src/lib/ui/select/styles/_menu-color.scss b/libs/ui/src/lib/ui/select/styles/_menu-color.scss index 4a7bfba..1b48e62 100644 --- a/libs/ui/src/lib/ui/select/styles/_menu-color.scss +++ b/libs/ui/src/lib/ui/select/styles/_menu-color.scss @@ -1,22 +1,22 @@ -// MENU COLOR - -@mixin selectMenuColor { - :host { - // Default (White) - &:not(.pi-select__menu-color--transparent) { - .pi-select-options-menu { - background-color: var(--pi-color-white); - } - } - // Transparent - &.pi-select__menu-color--transparent { - .pi-select-options-menu { - background-color: transparent; - } - } - } -} - -html { - @include selectMenuColor; -} +// MENU COLOR + +@mixin selectMenuColor { + :host { + // Default (White) + &:not(.pi-select__menu-color--transparent) { + .pi-select-options-menu { + background-color: var(--pi-color-white); + } + } + // Transparent + &.pi-select__menu-color--transparent { + .pi-select-options-menu { + background-color: transparent; + } + } + } +} + +html { + @include selectMenuColor; +} diff --git a/libs/ui/src/lib/ui/select/styles/_menu-type.scss b/libs/ui/src/lib/ui/select/styles/_menu-type.scss index a066762..cf6f715 100644 --- a/libs/ui/src/lib/ui/select/styles/_menu-type.scss +++ b/libs/ui/src/lib/ui/select/styles/_menu-type.scss @@ -1,110 +1,110 @@ -// MENU TYPE - -// Default (COLUMN) -/** -* Display: flex + flex-direction: column. -* -* Default (Select options displayed in flex column direction menu is the expected common select menu layout) -*/ -@mixin selectMenuTypeDefault { - :host { - &:not(.pi-select__menu-type--flex-wrap):not(.pi-select__menu-type--custom-grid) { - // Options menu - .pi-select-options-menu { - // Options - & > div { - gap: var(--pi-spacing-xx-small); - } - } - - // Options menu - .pi-select-options-menu { - // Options - & > div { - flex-direction: column; - } - } - - // Ghost - &.pi-select__appearance--ghost { - // NOT Type: dropdown. Just in default select cases. - &:not(.pi-select__type--dropdown) { - .pi-select-options-menu { - padding: var(--pi-spacing-small); - } - } - } - } - } -} - -// Flex Wrap (ROW + WRAP) -/** -* Display: flex + flex-direction: row + flex-wrap: wrap. -* -* Default (Select options displayed in flex column direction is the expected common select menu layout) -* -* Use cases -* -* On Type Default: -* -* The menu type flex wrap is used: -* -* A) when the select option emulates a button with a max width property in screens type private - form in large devices usually for multiple selections with quite a few options. - It's always be used in selects type default (non emergent). -* -* B) In the date-picker with monthly frequency in order to allow to see - all the months in the options menu without scrolling. - It's always be used in date-pickers type dropdown or hub. -*/ - -@mixin selectMenuTypeFlexWrap($flex-direction: column, $flex-wrap: nowrap) { - :host { - &.pi-select__menu-type--flex-wrap { - // Options menu - .pi-select-options-menu { - // Options - & > div { - flex-direction: $flex-direction; - flex-wrap: $flex-wrap; - gap: var(--pi-spacing-x-small); - } - } - } - } -} -// Custom Grid -@mixin seletcMenuTypeCustomGrid { - :host { - &:not(.pi-select__menu-type--custom-grid) { - // Options menu - .pi-select-options-menu { - // Options - & > div { - display: flex; - } - } - } - } -} - -html { - // Default - @include selectMenuTypeDefault; - - // Custom Grid - @include seletcMenuTypeCustomGrid; - - // Mobile - &.is-mobile { - // Flex wrap - @include selectMenuTypeFlexWrap; - } - - // Tablet & Desktop - &:not(.is-mobile) { - // Flex wrap - @include selectMenuTypeFlexWrap(row, wrap); - } -} +// MENU TYPE + +// Default (COLUMN) +/** +* Display: flex + flex-direction: column. +* +* Default (Select options displayed in flex column direction menu is the expected common select menu layout) +*/ +@mixin selectMenuTypeDefault { + :host { + &:not(.pi-select__menu-type--flex-wrap):not(.pi-select__menu-type--custom-grid) { + // Options menu + .pi-select-options-menu { + // Options + & > div { + gap: var(--pi-spacing-xx-small); + } + } + + // Options menu + .pi-select-options-menu { + // Options + & > div { + flex-direction: column; + } + } + + // Ghost + &.pi-select__appearance--ghost { + // NOT Type: dropdown. Just in default select cases. + &:not(.pi-select__type--dropdown) { + .pi-select-options-menu { + padding: var(--pi-spacing-small); + } + } + } + } + } +} + +// Flex Wrap (ROW + WRAP) +/** +* Display: flex + flex-direction: row + flex-wrap: wrap. +* +* Default (Select options displayed in flex column direction is the expected common select menu layout) +* +* Use cases +* +* On Type Default: +* +* The menu type flex wrap is used: +* +* A) when the select option emulates a button with a max width property in screens type private + form in large devices usually for multiple selections with quite a few options. + It's always be used in selects type default (non emergent). +* +* B) In the date-picker with monthly frequency in order to allow to see + all the months in the options menu without scrolling. + It's always be used in date-pickers type dropdown or hub. +*/ + +@mixin selectMenuTypeFlexWrap($flex-direction: column, $flex-wrap: nowrap) { + :host { + &.pi-select__menu-type--flex-wrap { + // Options menu + .pi-select-options-menu { + // Options + & > div { + flex-direction: $flex-direction; + flex-wrap: $flex-wrap; + gap: var(--pi-spacing-x-small); + } + } + } + } +} +// Custom Grid +@mixin seletcMenuTypeCustomGrid { + :host { + &:not(.pi-select__menu-type--custom-grid) { + // Options menu + .pi-select-options-menu { + // Options + & > div { + display: flex; + } + } + } + } +} + +html { + // Default + @include selectMenuTypeDefault; + + // Custom Grid + @include seletcMenuTypeCustomGrid; + + // Mobile + &.is-mobile { + // Flex wrap + @include selectMenuTypeFlexWrap; + } + + // Tablet & Desktop + &:not(.is-mobile) { + // Flex wrap + @include selectMenuTypeFlexWrap(row, wrap); + } +} diff --git a/libs/ui/src/lib/ui/select/styles/_picked-option-type.scss b/libs/ui/src/lib/ui/select/styles/_picked-option-type.scss index 0d8702e..a80e812 100644 --- a/libs/ui/src/lib/ui/select/styles/_picked-option-type.scss +++ b/libs/ui/src/lib/ui/select/styles/_picked-option-type.scss @@ -1,287 +1,287 @@ -/** -* Picked Option Type: Button -*/ -@mixin pickedOptionTypeButton { - &.pi-select__picked-option-type--button { - .pi-select-picked-option { - padding-left: var(--pi-spacing-medium); - padding-right: var(--pi-spacing-medium); - border: 1px solid; - border-radius: var(--pi-border-radius-large); - - & > div { - align-items: center; - gap: var(--pi-font-size-xx-small); - } - - transition: var(--pi-animation-fast); - & > * { - transition: var(--pi-animation-fast); - & > * { - transition: var(--pi-animation-fast); - } - } - } - // Options Menu - .pi-select-options-menu { - display: flex; - flex-direction: column; - } - // Options Menu Picked Option - .pi-select-options-menu__picked-option { - min-height: var(--pi-spacing-xxx-large); - padding-left: calc(var(--pi-spacing-xxx-small) + var(--pi-spacing-xxxxx-small)); - padding-right: var(--pi-spacing-medium); - } - // Options Menu Picked Option Placeholder - .pi-select-options-menu-picked-option__placeholder { - display: flex; - align-items: center; - line-height: 1; - color: var(--pi-color-grey); - } - // State: - // Not Hover - &:not(:hover) { - .pi-select-picked-option { - border: 1px solid; - border-color: var(--pi-color-white); - } - } - - // Hover || Expanded - &:hover, - &.is-expanded { - .pi-select-picked-option__custom-icon { - transform: scale(1.1); - } - } - // Hover - &:hover { - .pi-select-picked-option__action-icon { - transform: translateX(var(--pi-spacing-xxxx-small)) rotate(90deg); - } - } - - // Text Align: - // Center - // Select Single - &.pi-select__single { - &.pi-select__text-align--center { - // Options Menu Picked Option - .pi-select-options-menu__picked-option { - display: flex; - justify-content: space-between; - align-items: center; - gap: var(--pi-spacing-xx-small); - } - } - } - - // Select Multiple - &.pi-select__multiple, - &:not(.pi-select__text-align--center) { - // Options Menu Picked Option - .pi-select-options-menu__picked-option { - display: grid; - grid-template-columns: auto auto 1fr; - align-content: center; - grid-column-gap: var(--pi-spacing-xx-small); - - & > *:last-child { - justify-self: end; - } - } - } - - .pi-select-options-menu-picked-option__action-icon { - transition: var(--pi-animation-fast); - &:hover { - cursor: pointer; - } - &.pi-select-options-menu-picked-option__action-icon--chevron { - transform: rotate(-90deg); - - &:hover { - transform: rotate(-90deg) translateX(var(--pi-spacing-xxxx-small)) scale(1.2); - } - } - &:not(.pi-select-options-menu-picked-option__action-icon--chevron) { - &:hover { - transform: scale(1.2); - } - } - } - // Appearance: - // Fill & Outline Appearance - @include pickedOptionTypeButtonAppearanceFillAndOutline; - // Ghost Appearance - @include pickedOptionTypeButtonAppearanceGhost; - } -} - -/** -* Appearance: -* Fill & Outline Appearance -*/ -@mixin pickedOptionTypeButtonAppearanceFillAndOutline { - &.pi-select__appearance--fill, - &.pi-select__appearance--outline { - .pi-select-picked-option { - & > div { - height: var(--pi-spacing-xxxx-large); - } - } - } -} -/** -* Appearance: -* Ghost Appearance -*/ -@mixin pickedOptionTypeButtonAppearanceGhost { - &.pi-select__appearance--ghost { - .pi-select-picked-option { - display: flex; - justify-content: flex-end; - gap: var(--pi-spacing-xxx-small); - & > div { - width: fit-content; - } - } - } -} - -/** -* Picked Option Type: Button -* -* Devices: Mobile & Tabled S -*/ -@mixin pickedOptionTypeButtonSmallDevice { - :host { - &.pi-select__picked-option-type--button { - &.is-responsive { - .pi-select-picked-option__label { - display: none; - } - } - } - } -} - -/** -* Picked Option Type: Input -*/ -@mixin pickedOptionTypeInput { - &.pi-select__picked-option-type--input { - .pi-select-picked-option { - justify-content: space-between; - font: { - size: var(--pi-font-size-small); - } - & > div { - justify-content: space-between; - } - - .pi-select-picked-option__label { - font: { - size: var(--pi-font-size-x-small); - } - } - - .pi-select-picked-option__placeholder { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - } - // Position - // Expanded - &.is-expanded { - .pi-select-picked-option__action-icon { - transform: rotate(90deg); - } - } - - // Status - // Disabled - &.is-disabled { - .pi-select-picked-option__action-icon { - display: none; - } - } - - // Appearance - // Outline - &.pi-select__appearance--outline { - .pi-select-picked-option { - flex-direction: column; - align-items: flex-start; - .pi-select-picked-option__label { - margin-bottom: var(--pi-spacing-xxx-small); - padding-left: var(--pi-spacing-x-small); - padding-right: var(--pi-spacing-x-small); - font: { - size: var(--pi-font-size-x-small); - } - } - - & > div { - padding: var(--pi-spacing-x-small); - border: 1px solid; - border-radius: var(--pi-border-radius-small); - & > span { - align-items: center; - } - } - } - } - // Fill - &.pi-select__appearance--fill { - .pi-select-picked-option { - align-items: flex-end; - gap: var(--pi-spacing-medium); - & > div { - border-bottom-style: solid; - border-bottom-width: 1px; - & > span { - display: flex; - flex-direction: column; - gap: 0.275rem; - height: calc(var(--pi-spacing-xxxx-large) + 0.375rem); - justify-content: flex-end; - transform: translateY(-0.125rem); - } - } - } - } - } -} - -:host { - // Picked option - .pi-select-picked-option { - display: flex; - & > div { - display: flex; - align-items: center; - width: -webkit-fill-available; - transition: var(--pi-animation); - - & > .pi-icon { - transition: var(--pi-animation); - } - } - } - // Picked Option Type: - // Button - @include pickedOptionTypeButton; - // Input - @include pickedOptionTypeInput; -} - -html { - // Mobile & Tablet - &:not(.is-desktop) { - @include pickedOptionTypeButtonSmallDevice; - } -} +/** +* Picked Option Type: Button +*/ +@mixin pickedOptionTypeButton { + &.pi-select__picked-option-type--button { + .pi-select-picked-option { + padding-left: var(--pi-spacing-medium); + padding-right: var(--pi-spacing-medium); + border: 1px solid; + border-radius: var(--pi-border-radius-large); + + & > div { + align-items: center; + gap: var(--pi-font-size-xx-small); + } + + transition: var(--pi-animation-fast); + & > * { + transition: var(--pi-animation-fast); + & > * { + transition: var(--pi-animation-fast); + } + } + } + // Options Menu + .pi-select-options-menu { + display: flex; + flex-direction: column; + } + // Options Menu Picked Option + .pi-select-options-menu__picked-option { + min-height: var(--pi-spacing-xxx-large); + padding-left: calc(var(--pi-spacing-xxx-small) + var(--pi-spacing-xxxxx-small)); + padding-right: var(--pi-spacing-medium); + } + // Options Menu Picked Option Placeholder + .pi-select-options-menu-picked-option__placeholder { + display: flex; + align-items: center; + line-height: 1; + color: var(--pi-color-grey); + } + // State: + // Not Hover + &:not(:hover) { + .pi-select-picked-option { + border: 1px solid; + border-color: var(--pi-color-white); + } + } + + // Hover || Expanded + &:hover, + &.is-expanded { + .pi-select-picked-option__custom-icon { + transform: scale(1.1); + } + } + // Hover + &:hover { + .pi-select-picked-option__action-icon { + transform: translateX(var(--pi-spacing-xxxx-small)) rotate(90deg); + } + } + + // Text Align: + // Center + // Select Single + &.pi-select__single { + &.pi-select__text-align--center { + // Options Menu Picked Option + .pi-select-options-menu__picked-option { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--pi-spacing-xx-small); + } + } + } + + // Select Multiple + &.pi-select__multiple, + &:not(.pi-select__text-align--center) { + // Options Menu Picked Option + .pi-select-options-menu__picked-option { + display: grid; + grid-template-columns: auto auto 1fr; + align-content: center; + grid-column-gap: var(--pi-spacing-xx-small); + + & > *:last-child { + justify-self: end; + } + } + } + + .pi-select-options-menu-picked-option__action-icon { + transition: var(--pi-animation-fast); + &:hover { + cursor: pointer; + } + &.pi-select-options-menu-picked-option__action-icon--chevron { + transform: rotate(-90deg); + + &:hover { + transform: rotate(-90deg) translateX(var(--pi-spacing-xxxx-small)) scale(1.2); + } + } + &:not(.pi-select-options-menu-picked-option__action-icon--chevron) { + &:hover { + transform: scale(1.2); + } + } + } + // Appearance: + // Fill & Outline Appearance + @include pickedOptionTypeButtonAppearanceFillAndOutline; + // Ghost Appearance + @include pickedOptionTypeButtonAppearanceGhost; + } +} + +/** +* Appearance: +* Fill & Outline Appearance +*/ +@mixin pickedOptionTypeButtonAppearanceFillAndOutline { + &.pi-select__appearance--fill, + &.pi-select__appearance--outline { + .pi-select-picked-option { + & > div { + height: var(--pi-spacing-xxxx-large); + } + } + } +} +/** +* Appearance: +* Ghost Appearance +*/ +@mixin pickedOptionTypeButtonAppearanceGhost { + &.pi-select__appearance--ghost { + .pi-select-picked-option { + display: flex; + justify-content: flex-end; + gap: var(--pi-spacing-xxx-small); + & > div { + width: fit-content; + } + } + } +} + +/** +* Picked Option Type: Button +* +* Devices: Mobile & Tabled S +*/ +@mixin pickedOptionTypeButtonSmallDevice { + :host { + &.pi-select__picked-option-type--button { + &.is-responsive { + .pi-select-picked-option__label { + display: none; + } + } + } + } +} + +/** +* Picked Option Type: Input +*/ +@mixin pickedOptionTypeInput { + &.pi-select__picked-option-type--input { + .pi-select-picked-option { + justify-content: space-between; + font: { + size: var(--pi-font-size-small); + } + & > div { + justify-content: space-between; + } + + .pi-select-picked-option__label { + font: { + size: var(--pi-font-size-x-small); + } + } + + .pi-select-picked-option__placeholder { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + // Position + // Expanded + &.is-expanded { + .pi-select-picked-option__action-icon { + transform: rotate(90deg); + } + } + + // Status + // Disabled + &.is-disabled { + .pi-select-picked-option__action-icon { + display: none; + } + } + + // Appearance + // Outline + &.pi-select__appearance--outline { + .pi-select-picked-option { + flex-direction: column; + align-items: flex-start; + .pi-select-picked-option__label { + margin-bottom: var(--pi-spacing-xxx-small); + padding-left: var(--pi-spacing-x-small); + padding-right: var(--pi-spacing-x-small); + font: { + size: var(--pi-font-size-x-small); + } + } + + & > div { + padding: var(--pi-spacing-x-small); + border: 1px solid; + border-radius: var(--pi-border-radius-small); + & > span { + align-items: center; + } + } + } + } + // Fill + &.pi-select__appearance--fill { + .pi-select-picked-option { + align-items: flex-end; + gap: var(--pi-spacing-medium); + & > div { + border-bottom-style: solid; + border-bottom-width: 1px; + & > span { + display: flex; + flex-direction: column; + gap: 0.275rem; + height: calc(var(--pi-spacing-xxxx-large) + 0.375rem); + justify-content: flex-end; + transform: translateY(-0.125rem); + } + } + } + } + } +} + +:host { + // Picked option + .pi-select-picked-option { + display: flex; + & > div { + display: flex; + align-items: center; + width: -webkit-fill-available; + transition: var(--pi-animation); + + & > .pi-icon { + transition: var(--pi-animation); + } + } + } + // Picked Option Type: + // Button + @include pickedOptionTypeButton; + // Input + @include pickedOptionTypeInput; +} + +html { + // Mobile & Tablet + &:not(.is-desktop) { + @include pickedOptionTypeButtonSmallDevice; + } +} diff --git a/libs/ui/src/lib/ui/select/styles/_size.scss b/libs/ui/src/lib/ui/select/styles/_size.scss index 95c057b..0cf4285 100644 --- a/libs/ui/src/lib/ui/select/styles/_size.scss +++ b/libs/ui/src/lib/ui/select/styles/_size.scss @@ -1,67 +1,67 @@ -/* -* Select Font Sizes -*/ -@mixin selectSize($min-width) { - min-width: $min-width; -} - -/* -* Select Font Sizes -*/ -@mixin selectFontSize($font-size) { - .pi-select-picked-option__label, - .pi-select-options-menu-picked-option__placeholder { - font: { - size: var(--pi-font-size-#{$font-size}); - } - } -} - -/* -* Select Option Max Width ch -*/ -@mixin selectMaxCharacters($max-width) { - .pi-select-picked-option__label, - .pi-select-options-menu-picked-option__placeholder { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: $max-width; - } -} - -:host { - // The selec size property only applies to the Picked Option Type Button - &.pi-select__picked-option-type--button { - // Small - &.pi-select__small { - @include selectFontSize(x-small); - @include selectMaxCharacters(30ch); - } - - // Medium - &.pi-select__medium { - @include selectMaxCharacters(40ch); - } - } -} - -html { - &.is-mobile { - :host { - &.pi-select__picked-option-type--button { - &:not(.is-responsive) { - @include selectSize(16rem); - } - } - } - } - - &:not(.is-mobile) { - :host { - &.pi-select__picked-option-type--button { - @include selectSize(16rem); - } - } - } -} +/* +* Select Font Sizes +*/ +@mixin selectSize($min-width) { + min-width: $min-width; +} + +/* +* Select Font Sizes +*/ +@mixin selectFontSize($font-size) { + .pi-select-picked-option__label, + .pi-select-options-menu-picked-option__placeholder { + font: { + size: var(--pi-font-size-#{$font-size}); + } + } +} + +/* +* Select Option Max Width ch +*/ +@mixin selectMaxCharacters($max-width) { + .pi-select-picked-option__label, + .pi-select-options-menu-picked-option__placeholder { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: $max-width; + } +} + +:host { + // The selec size property only applies to the Picked Option Type Button + &.pi-select__picked-option-type--button { + // Small + &.pi-select__small { + @include selectFontSize(x-small); + @include selectMaxCharacters(30ch); + } + + // Medium + &.pi-select__medium { + @include selectMaxCharacters(40ch); + } + } +} + +html { + &.is-mobile { + :host { + &.pi-select__picked-option-type--button { + &:not(.is-responsive) { + @include selectSize(16rem); + } + } + } + } + + &:not(.is-mobile) { + :host { + &.pi-select__picked-option-type--button { + @include selectSize(16rem); + } + } + } +} diff --git a/libs/ui/src/lib/ui/select/styles/_type.scss b/libs/ui/src/lib/ui/select/styles/_type.scss index 1c46671..52687b7 100644 --- a/libs/ui/src/lib/ui/select/styles/_type.scss +++ b/libs/ui/src/lib/ui/select/styles/_type.scss @@ -1,235 +1,235 @@ -// TYPE -/** -* 1. Default -* 2. Dropdown (Large device only) -* Below the main mixins, there are also all style properties to display the options menu in the right -* distance and position respect to the picked option in any Select Appearance and Picked Option Type combination. -* -* 3. Hub (Small device only) -*/ - -// 1. DEFAULT -/** -* Position static: -* Options menu positioned according to the normal flow of the page. -*/ -@mixin selectTypeDefault { - :host { - &:not(.pi-select__type--dropdown) { - .pi-select-options-menu__options { - width: -webkit-fill-available; - } - } - } -} - -// 2. DROPDOWN (Large device) -/** -* Position absolute: -* Options menu positioned relative to the nearest positioned ancestor -* (instead of positioned relative to the viewport, like fixed) -* >> In this case, nearest to the Picked Option. -*/ -@mixin selectTypeDropdown { - :host { - &.pi-select__type--dropdown { - // State - // Collapsed - &:not(.is-expanded), - &.is-disabled { - .pi-select-options-menu { - display: none; - } - } - // Expanded - &.is-expanded { - .pi-select-options-menu { - display: flex; - } - } - // Options menu - .pi-select-options-menu { - position: absolute; - z-index: 99; - top: var(--pi-spacing-xxxx-small); - padding: var(--pi-spacing-medium) var(--pi-spacing-xxxx-small) var(--pi-spacing-medium) - var(--pi-spacing-medium); - border: 1px solid; - border-color: var(--pi-color-white-900); - box-shadow: var(--pi-box-shadow-panel); - - // Options Menu > Options - .pi-select-options-menu__options { - gap: var(--pi-spacing-xx-small); - overflow-y: scroll; - overflow-x: hidden; - - &::-webkit-scrollbar { - width: 0.1875rem; - } - &::-webkit-scrollbar-thumb { - background-color: var(--pi-color-grey-25); - - &:hover { - background-color: var(--pi-color-grey-75); - } - } - } - } - - // Picked Option Type: - // Input - &.pi-select__picked-option-type--input { - // Options Menu > Options - .pi-select-options-menu__options { - width: calc(100% - var(--pi-spacing-xxxxx-small)); - } - // Appearance: - // Fill - &.pi-select__appearance--fill { - @include optionsMenuDropdownOuterSizesAndSpacings( - 14.5rem, - calc(100% - var(--pi-spacing-xx-large)), - calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small)), - var(--pi-spacing-xxxx-large) - ); - @include optionsMenuDropdownInnerSizesAndSpacings( - var(--pi-spacing-xx-small), - var(--pi-border-radius-medium) - ); - } - // Outline || Ghost - &.pi-select__appearance--outline, - &.pi-select__appearance--ghost { - @include optionsMenuDropdownOuterSizesAndSpacings( - 16.75rem, - 100%, - calc( - var(--pi-spacing-xxxx-large) + var(--pi-spacing-small) + var(--pi-spacing-xxxxx-small) - ), - unset - ); - @include optionsMenuDropdownInnerSizesAndSpacings( - var(--pi-spacing-xx-small), - var(--pi-border-radius-small) - ); - } - } - - // Picked Option Type: - // Button - &.pi-select__picked-option-type--button { - @include optionsMenuDropdownOuterSizesAndSpacings(19.5rem, 100%, -0.5rem, unset); - @include optionsMenuDropdownInnerSizesAndSpacings( - var(--pi-spacing-x-small), - var(--pi-border-radius-large) - ); - - // Options Menu > Options - .pi-select-options-menu__options { - width: calc(100% - var(--pi-spacing-xxxxx-small)); - } - } - } - } -} -// 3. HUB (Small device) -/** -* Position fixed: -* Options menu positioned relative to the viewport, -* which means it always stays in the same place even if the page is scrolled. -* >> In this case, placed Fixed covering the navbar. -*/ - -@mixin selectTypeHub { - :host { - &.pi-select__type--dropdown { - } - } - /** - * TODO: - * Add the hub styles when the scss classes is-hub-visible / is-hub-hidden - * are going to be binded to the DOM tree through a hub state - */ -} - -// SPECIFIC PROPERTIES MIXINS -/** -* Select Type Dropdown Sizes & Outer Spacings -* -* This mixin manages the options menu: -* -* 1. Max height of the options menu box. -* Notice that the max height increases 50px when the select is multiple, -* because we're adding the extra options menu actions bar height. -* 2. Width of the options menu box. -* 3. Margin Top between the picked option and options menu box. -*/ -@mixin optionsMenuDropdownOuterSizesAndSpacings($max-height, $width, $margin-top, $margin-left) { - .pi-select-options-menu { - width: $width; - margin-top: $margin-top; - margin-left: $margin-left; - } - // Select Single - &:not(.pi-select__multiple) { - .pi-select-options-menu { - max-height: $max-height; - } - } - // Select Multiple - &.pi-select__multiple { - .pi-select-options-menu { - max-height: calc(#{$max-height} + 3.125rem); - } - } -} - -/** -* Select Type Dropdown Inner Sizes and Spacings -* -* This mixin manages the options menu: -* -* 1. Inner Padding Right from the scroll. -* 2. Options menu border radius. -*/ -@mixin optionsMenuDropdownInnerSizesAndSpacings($inner-padding-right, $border-radius) { - .pi-select-options-menu { - border-radius: $border-radius; - .pi-select-options-menu__options { - padding-right: $inner-padding-right; - } - } -} - -html { - // Type - // Default - @include selectTypeDefault; - - // MEDIA QUERIES - // Mobile & Tablet - &:not(.is-desktop) { - // Small device - @media screen and (max-width: 62rem) { - // Type - // Dropdown - /** - * TODO: - * Replace the selectTypeDropdown mixin to the selectTypeHub one - * when the scss classes is-hub-visible / is-hub-hidden - * are going to be binded to the DOM tree through a hub state - */ - @include selectTypeDropdown; - } - } - // Tablet & Desktop - &:not(.is-mobile) { - // Large device - @media screen and (min-width: 62rem) { - // Type - // Dropdown - @include selectTypeDropdown; - } - } -} +// TYPE +/** +* 1. Default +* 2. Dropdown (Large device only) +* Below the main mixins, there are also all style properties to display the options menu in the right +* distance and position respect to the picked option in any Select Appearance and Picked Option Type combination. +* +* 3. Hub (Small device only) +*/ + +// 1. DEFAULT +/** +* Position static: +* Options menu positioned according to the normal flow of the page. +*/ +@mixin selectTypeDefault { + :host { + &:not(.pi-select__type--dropdown) { + .pi-select-options-menu__options { + width: -webkit-fill-available; + } + } + } +} + +// 2. DROPDOWN (Large device) +/** +* Position absolute: +* Options menu positioned relative to the nearest positioned ancestor +* (instead of positioned relative to the viewport, like fixed) +* >> In this case, nearest to the Picked Option. +*/ +@mixin selectTypeDropdown { + :host { + &.pi-select__type--dropdown { + // State + // Collapsed + &:not(.is-expanded), + &.is-disabled { + .pi-select-options-menu { + display: none; + } + } + // Expanded + &.is-expanded { + .pi-select-options-menu { + display: flex; + } + } + // Options menu + .pi-select-options-menu { + position: absolute; + z-index: 99; + top: var(--pi-spacing-xxxx-small); + padding: var(--pi-spacing-medium) var(--pi-spacing-xxxx-small) var(--pi-spacing-medium) + var(--pi-spacing-medium); + border: 1px solid; + border-color: var(--pi-color-white-900); + box-shadow: var(--pi-box-shadow-panel); + + // Options Menu > Options + .pi-select-options-menu__options { + gap: var(--pi-spacing-xx-small); + overflow-y: scroll; + overflow-x: hidden; + + &::-webkit-scrollbar { + width: 0.1875rem; + } + &::-webkit-scrollbar-thumb { + background-color: var(--pi-color-grey-25); + + &:hover { + background-color: var(--pi-color-grey-75); + } + } + } + } + + // Picked Option Type: + // Input + &.pi-select__picked-option-type--input { + // Options Menu > Options + .pi-select-options-menu__options { + width: calc(100% - var(--pi-spacing-xxxxx-small)); + } + // Appearance: + // Fill + &.pi-select__appearance--fill { + @include optionsMenuDropdownOuterSizesAndSpacings( + 14.5rem, + calc(100% - var(--pi-spacing-xx-large)), + calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small)), + var(--pi-spacing-xxxx-large) + ); + @include optionsMenuDropdownInnerSizesAndSpacings( + var(--pi-spacing-xx-small), + var(--pi-border-radius-medium) + ); + } + // Outline || Ghost + &.pi-select__appearance--outline, + &.pi-select__appearance--ghost { + @include optionsMenuDropdownOuterSizesAndSpacings( + 16.75rem, + 100%, + calc( + var(--pi-spacing-xxxx-large) + var(--pi-spacing-small) + var(--pi-spacing-xxxxx-small) + ), + unset + ); + @include optionsMenuDropdownInnerSizesAndSpacings( + var(--pi-spacing-xx-small), + var(--pi-border-radius-small) + ); + } + } + + // Picked Option Type: + // Button + &.pi-select__picked-option-type--button { + @include optionsMenuDropdownOuterSizesAndSpacings(19.5rem, 100%, -0.5rem, unset); + @include optionsMenuDropdownInnerSizesAndSpacings( + var(--pi-spacing-x-small), + var(--pi-border-radius-large) + ); + + // Options Menu > Options + .pi-select-options-menu__options { + width: calc(100% - var(--pi-spacing-xxxxx-small)); + } + } + } + } +} +// 3. HUB (Small device) +/** +* Position fixed: +* Options menu positioned relative to the viewport, +* which means it always stays in the same place even if the page is scrolled. +* >> In this case, placed Fixed covering the navbar. +*/ + +@mixin selectTypeHub { + :host { + &.pi-select__type--dropdown { + } + } + /** + * TODO: + * Add the hub styles when the scss classes is-hub-visible / is-hub-hidden + * are going to be binded to the DOM tree through a hub state + */ +} + +// SPECIFIC PROPERTIES MIXINS +/** +* Select Type Dropdown Sizes & Outer Spacings +* +* This mixin manages the options menu: +* +* 1. Max height of the options menu box. +* Notice that the max height increases 50px when the select is multiple, +* because we're adding the extra options menu actions bar height. +* 2. Width of the options menu box. +* 3. Margin Top between the picked option and options menu box. +*/ +@mixin optionsMenuDropdownOuterSizesAndSpacings($max-height, $width, $margin-top, $margin-left) { + .pi-select-options-menu { + width: $width; + margin-top: $margin-top; + margin-left: $margin-left; + } + // Select Single + &:not(.pi-select__multiple) { + .pi-select-options-menu { + max-height: $max-height; + } + } + // Select Multiple + &.pi-select__multiple { + .pi-select-options-menu { + max-height: calc(#{$max-height} + 3.125rem); + } + } +} + +/** +* Select Type Dropdown Inner Sizes and Spacings +* +* This mixin manages the options menu: +* +* 1. Inner Padding Right from the scroll. +* 2. Options menu border radius. +*/ +@mixin optionsMenuDropdownInnerSizesAndSpacings($inner-padding-right, $border-radius) { + .pi-select-options-menu { + border-radius: $border-radius; + .pi-select-options-menu__options { + padding-right: $inner-padding-right; + } + } +} + +html { + // Type + // Default + @include selectTypeDefault; + + // MEDIA QUERIES + // Mobile & Tablet + &:not(.is-desktop) { + // Small device + @media screen and (max-width: 62rem) { + // Type + // Dropdown + /** + * TODO: + * Replace the selectTypeDropdown mixin to the selectTypeHub one + * when the scss classes is-hub-visible / is-hub-hidden + * are going to be binded to the DOM tree through a hub state + */ + @include selectTypeDropdown; + } + } + // Tablet & Desktop + &:not(.is-mobile) { + // Large device + @media screen and (min-width: 62rem) { + // Type + // Dropdown + @include selectTypeDropdown; + } + } +} diff --git a/libs/ui/src/lib/ui/select/styles/base-select.scss b/libs/ui/src/lib/ui/select/styles/base-select.scss index 8abbda9..40aa0b8 100644 --- a/libs/ui/src/lib/ui/select/styles/base-select.scss +++ b/libs/ui/src/lib/ui/select/styles/base-select.scss @@ -1,30 +1,30 @@ -// Properties -@use 'appearance'; -@use 'color'; -@use 'menu-color'; -@use 'menu-type'; -@use 'picked-option-type'; -@use 'size'; -@use 'type'; - -:host { - &.pi-select { - position: relative; - display: flex; - flex-direction: column; - width: -webkit-fill-available; - // States: - // Disabled - &.is-disabled { - // Button & Fill - &:not(.pi-select__appearance--fill) { - opacity: 0.33; - } - } - } - .pi-select-picked-option { - &:hover { - cursor: pointer; - } - } -} +// Properties +@use 'appearance'; +@use 'color'; +@use 'menu-color'; +@use 'menu-type'; +@use 'picked-option-type'; +@use 'size'; +@use 'type'; + +:host { + &.pi-select { + position: relative; + display: flex; + flex-direction: column; + width: -webkit-fill-available; + // States: + // Disabled + &.is-disabled { + // Button & Fill + &:not(.pi-select__appearance--fill) { + opacity: 0.33; + } + } + } + .pi-select-picked-option { + &:hover { + cursor: pointer; + } + } +} diff --git a/libs/ui/src/lib/ui/slide-toggle/index.ts b/libs/ui/src/lib/ui/slide-toggle/index.ts index a1b6bc0..f15afbd 100644 --- a/libs/ui/src/lib/ui/slide-toggle/index.ts +++ b/libs/ui/src/lib/ui/slide-toggle/index.ts @@ -1,3 +1,3 @@ - - -export * from './slide-toggle/slide-toggle.component'; + + +export * from './slide-toggle/slide-toggle.component'; diff --git a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html index d7072a2..6627b58 100644 --- a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html +++ b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.html @@ -1 +1 @@ -

slide-toggle works!

+

slide-toggle works!

diff --git a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts index 3785496..d065976 100644 --- a/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts +++ b/libs/ui/src/lib/ui/slide-toggle/slide-toggle/slide-toggle.component.ts @@ -1,10 +1,10 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { PiFormControl } from '../../../util/form-control'; - +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { PiFormControl } from '../../../util/form-control'; + @Component({ selector: 'pi-slide-toggle', templateUrl: './slide-toggle.component.html', styleUrls: ['./slide-toggle.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class PiSlideToggleComponent extends PiFormControl {} +}) +export class PiSlideToggleComponent extends PiFormControl {} diff --git a/libs/ui/src/lib/ui/slider/base-slider.component.ts b/libs/ui/src/lib/ui/slider/base-slider.component.ts index c2fe610..cb7edd8 100644 --- a/libs/ui/src/lib/ui/slider/base-slider.component.ts +++ b/libs/ui/src/lib/ui/slider/base-slider.component.ts @@ -1,62 +1,62 @@ -// Angular +// Angular import { Directive, HostBinding, input, viewChild -} from '@angular/core'; -import { FormControlDirective } from '@angular/forms'; - -// Models -import { unit } from '../../util/models'; - -@Directive() -export abstract class PiBaseSliderComponent { - readonly formControlDirective = viewChild(FormControlDirective); - - @HostBinding('class') - get classes(): string { - const isDisabledClass = this.isDisabled() ? 'is-disabled' : ''; +} from '@angular/core'; +import { FormControlDirective } from '@angular/forms'; + +// Models +import { unit } from '../../util/models'; + +@Directive() +export abstract class PiBaseSliderComponent { + readonly formControlDirective = viewChild(FormControlDirective); + + @HostBinding('class') + get classes(): string { + const isDisabledClass = this.isDisabled() ? 'is-disabled' : ''; const flexDirection = this.flexDirection(); - const flexDirectionClass = flexDirection !== 'column' && `pi-slider__flex-direction--${flexDirection}`; - return ['pi-slider', isDisabledClass, flexDirectionClass].join(' '); - } - - // Content - readonly label = input(); - readonly thumbLabel = input(true); - readonly minValue = input(0); - readonly maxValue = input(100); - readonly unit = input.required(); - readonly step = input(1); - - // Skin - readonly flexDirection = input<'column' | 'column-reverse'>('column'); - - // Behaviour - readonly isDisabled = input(); - - - formatLabel = (value: number) => { - return `${value} ${this.unit()}`; - }; - - registerOnTouched(fn: any): void { - this.formControlDirective()?.valueAccessor?.registerOnTouched(fn); - } - - registerOnChange(fn: any): void { - this.formControlDirective()?.valueAccessor?.registerOnChange(fn); - } - - writeValue(obj: any): void { - this.formControlDirective()?.valueAccessor?.writeValue(obj); - } - - setDisabledState(isDisabled: boolean): void { - this.formControlDirective()?.valueAccessor?.setDisabledState ? isDisabled : null; - } -} - - - + const flexDirectionClass = flexDirection !== 'column' && `pi-slider__flex-direction--${flexDirection}`; + return ['pi-slider', isDisabledClass, flexDirectionClass].join(' '); + } + + // Content + readonly label = input(); + readonly thumbLabel = input(true); + readonly minValue = input(0); + readonly maxValue = input(100); + readonly unit = input.required(); + readonly step = input(1); + + // Skin + readonly flexDirection = input<'column' | 'column-reverse'>('column'); + + // Behaviour + readonly isDisabled = input(); + + + formatLabel = (value: number) => { + return `${value} ${this.unit()}`; + }; + + registerOnTouched(fn: any): void { + this.formControlDirective()?.valueAccessor?.registerOnTouched(fn); + } + + registerOnChange(fn: any): void { + this.formControlDirective()?.valueAccessor?.registerOnChange(fn); + } + + writeValue(obj: any): void { + this.formControlDirective()?.valueAccessor?.writeValue(obj); + } + + setDisabledState(isDisabled: boolean): void { + this.formControlDirective()?.valueAccessor?.setDisabledState ? isDisabled : null; + } +} + + + diff --git a/libs/ui/src/lib/ui/slider/index.ts b/libs/ui/src/lib/ui/slider/index.ts index 538a593..a69307b 100644 --- a/libs/ui/src/lib/ui/slider/index.ts +++ b/libs/ui/src/lib/ui/slider/index.ts @@ -1,5 +1,5 @@ - - -export * from './range-slider/range-slider.component'; - -export * from './slider/slider.component'; + + +export * from './range-slider/range-slider.component'; + +export * from './slider/slider.component'; diff --git a/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.html b/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.html index af44e52..5286b27 100644 --- a/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.html +++ b/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.html @@ -1,13 +1,13 @@ -
- - - - -
+
+ + + + +
diff --git a/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.ts b/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.ts index a19c7df..83fc47f 100644 --- a/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.ts +++ b/libs/ui/src/lib/ui/slider/range-slider/range-slider.component.ts @@ -1,12 +1,12 @@ -// Angular -import { ChangeDetectionStrategy, Component, HostBinding, OnInit, forwardRef, input } from '@angular/core'; -import { FormGroup, FormGroupDirective, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; - -// Component +// Angular +import { ChangeDetectionStrategy, Component, HostBinding, OnInit, forwardRef, input } from '@angular/core'; +import { FormGroup, FormGroupDirective, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; + +// Component import { PiBaseSliderComponent } from '../base-slider.component'; import { MatSlider, MatSliderRangeThumb } from '@angular/material/slider'; - - + + @Component({ selector: 'pi-range-slider', templateUrl: './range-slider.component.html', @@ -24,23 +24,23 @@ import { MatSlider, MatSliderRangeThumb } from '@angular/material/slider'; MatSliderRangeThumb, forwardRef(() => PiRangeSliderComponent) ], -}) -export class PiRangeSliderComponent extends PiBaseSliderComponent implements OnInit { - @HostBinding('class') className = 'pi-slider__range'; - - readonly formGroupName = input.required(); - - constructor(private rootFormGroup: FormGroupDirective) { - super() - } - - get form() { - return this.rootFormGroup.control.get(this.formGroupName()) as FormGroup; - } - - ngOnInit(): void { - if (this.isDisabled()) { - this.form.disable(); - } - } -} +}) +export class PiRangeSliderComponent extends PiBaseSliderComponent implements OnInit { + @HostBinding('class') className = 'pi-slider__range'; + + readonly formGroupName = input.required(); + + constructor(private rootFormGroup: FormGroupDirective) { + super() + } + + get form() { + return this.rootFormGroup.control.get(this.formGroupName()) as FormGroup; + } + + ngOnInit(): void { + if (this.isDisabled()) { + this.form.disable(); + } + } +} diff --git a/libs/ui/src/lib/ui/slider/slider/slider.component.html b/libs/ui/src/lib/ui/slider/slider/slider.component.html index f95755c..6efcd57 100644 --- a/libs/ui/src/lib/ui/slider/slider/slider.component.html +++ b/libs/ui/src/lib/ui/slider/slider/slider.component.html @@ -1,14 +1,14 @@ - - - {{ control?.value }} {{ unit() }} - - - - + + + {{ control?.value }} {{ unit() }} + + + + diff --git a/libs/ui/src/lib/ui/slider/slider/slider.component.scss b/libs/ui/src/lib/ui/slider/slider/slider.component.scss index 4861530..784a663 100644 --- a/libs/ui/src/lib/ui/slider/slider/slider.component.scss +++ b/libs/ui/src/lib/ui/slider/slider/slider.component.scss @@ -1,18 +1,18 @@ -:host { - & > span { - display: flex; - align-items: center; - justify-content: space-between; - - & > label { - font: { - size: var(--pi-font-size-small); - } - } - & > span { - font: { - size: var(pi-font-size-small); - } - } - } -} +:host { + & > span { + display: flex; + align-items: center; + justify-content: space-between; + + & > label { + font: { + size: var(--pi-font-size-small); + } + } + & > span { + font: { + size: var(pi-font-size-small); + } + } + } +} diff --git a/libs/ui/src/lib/ui/slider/slider/slider.component.ts b/libs/ui/src/lib/ui/slider/slider/slider.component.ts index 6521959..27b4322 100644 --- a/libs/ui/src/lib/ui/slider/slider/slider.component.ts +++ b/libs/ui/src/lib/ui/slider/slider/slider.component.ts @@ -1,18 +1,18 @@ -// Angular +// Angular import { ChangeDetectionStrategy, Component, Injector, OnInit, input -} from '@angular/core'; -import { ControlContainer, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; - -// Component +} from '@angular/core'; +import { ControlContainer, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'; + +// Component import { PiBaseSliderComponent } from '../base-slider.component'; import { NgIf } from '@angular/common'; -import { MatSlider, MatSliderThumb } from '@angular/material/slider'; - +import { MatSlider, MatSliderThumb } from '@angular/material/slider'; + @Component({ selector: 'pi-slider', templateUrl: './slider.component.html', @@ -31,26 +31,26 @@ import { MatSlider, MatSliderThumb } from '@angular/material/slider'; MatSliderThumb, ReactiveFormsModule, ], -}) -export class PiSliderComponent extends PiBaseSliderComponent implements OnInit { - - readonly formControlName = input(); - - constructor(private injector: Injector) { - super() - } - - get control(): any { - return this.controlContainer.control?.get(this.formControlName()); - } - - get controlContainer(): any { - return this.injector.get(ControlContainer); - } - - ngOnInit(): void { - if (this.isDisabled()) { - this.control.disable(); - } - } -} +}) +export class PiSliderComponent extends PiBaseSliderComponent implements OnInit { + + readonly formControlName = input(); + + constructor(private injector: Injector) { + super() + } + + get control(): any { + return this.controlContainer.control?.get(this.formControlName()); + } + + get controlContainer(): any { + return this.injector.get(ControlContainer); + } + + ngOnInit(): void { + if (this.isDisabled()) { + this.control.disable(); + } + } +} diff --git a/libs/ui/src/lib/ui/spinner/index.ts b/libs/ui/src/lib/ui/spinner/index.ts index 4a11dc2..f7b00dc 100644 --- a/libs/ui/src/lib/ui/spinner/index.ts +++ b/libs/ui/src/lib/ui/spinner/index.ts @@ -1,3 +1,3 @@ - - -export * from './spinner/spinner.component'; + + +export * from './spinner/spinner.component'; diff --git a/libs/ui/src/lib/ui/spinner/spinner/spinner.component.html b/libs/ui/src/lib/ui/spinner/spinner/spinner.component.html index 20b706f..2aa85cd 100644 --- a/libs/ui/src/lib/ui/spinner/spinner/spinner.component.html +++ b/libs/ui/src/lib/ui/spinner/spinner/spinner.component.html @@ -1,6 +1,6 @@ - + diff --git a/libs/ui/src/lib/ui/spinner/spinner/spinner.component.ts b/libs/ui/src/lib/ui/spinner/spinner/spinner.component.ts index 4fd7a8e..e6dc244 100644 --- a/libs/ui/src/lib/ui/spinner/spinner/spinner.component.ts +++ b/libs/ui/src/lib/ui/spinner/spinner/spinner.component.ts @@ -1,25 +1,25 @@ -// Angular -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +// Angular +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; import { ComponentFamilyClass } from '../../../styles'; -import { MatProgressSpinner } from '@angular/material/progress-spinner'; - +import { MatProgressSpinner } from '@angular/material/progress-spinner'; + @Component({ selector: 'pi-spinner', templateUrl: './spinner.component.html', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinner], -}) -export class PiSpinnerComponent { - @HostBinding('class') get classes(): string { - const typeClass = `${ComponentFamilyClass.DomainComponent} pi-spinner pi-spinner__loader`; - const isFullScreenClass = this.isFullScreen() && 'pi-spinner__loader--fullscreen'; - const colorClass = `pi-spinner__loader--${this.color()}`; - return [typeClass, isFullScreenClass, colorClass].join(' '); - } - - readonly isLoading = input(); - readonly diameter = input(50); - readonly strokeWidth = input(5); - readonly isFullScreen = input(true); - readonly color = input<'primary' | 'accent'>('accent'); -} +}) +export class PiSpinnerComponent { + @HostBinding('class') get classes(): string { + const typeClass = `${ComponentFamilyClass.DomainComponent} pi-spinner pi-spinner__loader`; + const isFullScreenClass = this.isFullScreen() && 'pi-spinner__loader--fullscreen'; + const colorClass = `pi-spinner__loader--${this.color()}`; + return [typeClass, isFullScreenClass, colorClass].join(' '); + } + + readonly isLoading = input(); + readonly diameter = input(50); + readonly strokeWidth = input(5); + readonly isFullScreen = input(true); + readonly color = input<'primary' | 'accent'>('accent'); +} diff --git a/libs/ui/src/lib/ui/tab/index.ts b/libs/ui/src/lib/ui/tab/index.ts index ec3653e..457ee6f 100644 --- a/libs/ui/src/lib/ui/tab/index.ts +++ b/libs/ui/src/lib/ui/tab/index.ts @@ -1,7 +1,7 @@ - - -export * from './tab/tab.component'; - -export * from './tab.directive'; - -export * from './entities/tab.model'; + + +export * from './tab/tab.component'; + +export * from './tab.directive'; + +export * from './entities/tab.model'; diff --git a/libs/ui/src/lib/ui/tab/tab/tab.component.html b/libs/ui/src/lib/ui/tab/tab/tab.component.html index e1d36fe..43f3022 100644 --- a/libs/ui/src/lib/ui/tab/tab/tab.component.html +++ b/libs/ui/src/lib/ui/tab/tab/tab.component.html @@ -1,59 +1,59 @@ -
- -
- - -
- - - {{ tab.label | translate }} - -
- - -
- - -
- -
- - - -
-
- -
- -
- -
+
+ +
+ + +
+ + + {{ tab.label | translate }} + +
+ + +
+ + +
+ +
+ + + +
+
+ +
+ +
+ +
diff --git a/libs/ui/src/lib/ui/tab/tab/tab.component.scss b/libs/ui/src/lib/ui/tab/tab/tab.component.scss index 4af650d..1fe5a9e 100644 --- a/libs/ui/src/lib/ui/tab/tab/tab.component.scss +++ b/libs/ui/src/lib/ui/tab/tab/tab.component.scss @@ -1,280 +1,280 @@ -@mixin tabHeader( - $bg-color: var(--pi-color-highlighted-25), - $border-color: var(--pi-color-primary-75), - $padding: var(--pi-spacing-xx-small) -) { - gap: var(--pi-spacing-large); - background-color: $bg-color; - border: 1px solid $border-color; - padding: $padding; - .pi-tab__element { - width: 100%; - padding: var(--pi-spacing-x-small) 0; - border-radius: 1rem; - transition: var(--pi-animation); - &:not(.is-disabled):not(.is-active) { - &:hover { - color: var(--pi-color-primary); - background-color: var(--pi-color-primary-75); - } - } - &.is-active { - color: var(--pi-color-highlighted); - background-color: var(--pi-color-primary-75); - } - } - & > section { - &.is-overflowing { - .pi-tab__element { - flex: 1 1 auto; - } - } - } -} - -@mixin tabElementSize($word-spacing: 100vh) { - :host { - // Fill - &.pi-tab__appearance--fill { - // Header - & > *:nth-child(1) { - .pi-tab__element { - & > span { - display: table-caption; - word-spacing: $word-spacing; - transition: var(--pi-animation); - } - } - } - } - } -} - -@mixin tabJustifyContent($justify-content) { - .pi-tab__element { - justify-content: $justify-content; - } -} - -:host { - width: 100%; - display: block; - - &.hide-tabs { - // Header - & > *:nth-child(1) { - display: none; - } - } - - &:not(.hide-tabs) { - // Header - & > *:nth-child(1) { - display: flex; - align-items: center; - // Tab wrapper - & > section { - width: 100%; - display: flex; - overflow: scroll; - &::-webkit-scrollbar { - display: none; - } - &:not(.is-overflowing) { - justify-content: space-between; - } - .pi-tab__element { - display: flex; - align-items: center; - &:not(.is-disabled):not(.is-active) { - &:hover { - cursor: pointer; - } - } - & > span { - font: { - size: var(--pi-font-size-x-small); - } - } - } - } - } - - // Content - & > *:nth-child(2) { - margin-top: var(--pi-spacing-x-large); - } - - // Tab justify content elements - // Flex start - &.pi-tab__justify-content--flex-start { - @include tabJustifyContent(flex-start); - } - // Center - &.pi-tab__justify-content--center { - @include tabJustifyContent(center); - } - // Flex end - &.pi-tab__justify-content--flex-end { - @include tabJustifyContent(flex-end); - } - - // Tab appearance - // Default - &.pi-tab__appearance--default { - // Header - & > *:nth-child(1) { - @include tabHeader; - border-radius: 1rem; - } - } - - // Fill - &.pi-tab__appearance--fill { - // Header - & > *:nth-child(1) { - @include tabHeader( - var(--pi-color-primary-25), - var(--pi-color-primary-75), - var(--pi-spacing-xx-small) - ); - border-radius: 1.5rem; - .pi-tab__element { - gap: var(--pi-spacing-xx-small); - box-sizing: border-box; - border-radius: 1rem; - } - } - } - // Outline - &.pi-tab__appearance--outline { - // Header - & > *:nth-child(1) { - padding: var(--pi-spacing-xx-small); - & > section { - gap: 0; - .pi-tab__element { - width: 100%; - flex: 1 1 auto; - padding: var(--pi-spacing-small) var(--pi-spacing-xx-small); - span { - font: { - size: var(--pi-font-size-small); - } - } - &:not(.is-disabled):not(.is-active) { - border-bottom: 1px solid; - border-bottom-color: var(--pi-color-grey-200); - span { - color: var(--pi-color-grey-300); - } - } - &.is-active { - border-bottom: 1px solid; - border-bottom-color: var(--pi-color-grey-900); - span { - color: var(--pi-color-grey-900); - font: { - weight: 400; - } - } - } - } - } - } - } - } - - // Content - & > *:nth-child(2) { - display: flex; - overflow: hidden; - // Tab content - & > * { - width: 100%; - flex: 0 0 auto; - transition: var(--pi-animation); - overflow: hidden; - } - } -} - -html { - // Mobile - &.is-mobile { - :host { - // Header - & > *:nth-child(1) { - // Tab wrapper - & > section { - gap: var(--pi-spacing-x-small); - } - } - // Tab Type - // Fill - &.pi-tab__appearance--fill { - // Header - & > *:nth-child(1) { - // Tab wrapper - & > section { - padding: var(--pi-spacing-medium) var(--pi-spacing-x-large); - .pi-tab__element { - width: 5rem; - min-width: 5rem; - max-width: 5rem; - height: var(--pi-spacing-xxx-large); - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xx-small); - } - } - } - } - } - } - - // Mobile & Tablet - &:not(.is-desktop) { - @include tabElementSize; - } - - // Tablet & Desktop - &:not(.is-mobile) { - :host { - height: 100%; - // Header - & > *:nth-child(1) { - // Tab wrapper - & > section { - gap: var(--pi-spacing-x-large); - } - } - // Tab type - // Fill - &.pi-tab__appearance--fill { - // Header - & > *:nth-child(1) { - padding: var(--pi-spacing-x-small) var(--pi-spacing-x-large); - // Tab wrapper - & > section { - .pi-tab__element { - width: 5.75rem; - height: var(--pi-spacing-xxxx-large); - padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small); - } - } - } - } - } - } - - &.is-desktop { - // Medium & Large - &:not(.is-desktop__small) { - @include tabElementSize; - } - - // Large - &.is-desktop__large { - @include tabElementSize(unset); - } - } -} +@mixin tabHeader( + $bg-color: var(--pi-color-highlighted-25), + $border-color: var(--pi-color-primary-75), + $padding: var(--pi-spacing-xx-small) +) { + gap: var(--pi-spacing-large); + background-color: $bg-color; + border: 1px solid $border-color; + padding: $padding; + .pi-tab__element { + width: 100%; + padding: var(--pi-spacing-x-small) 0; + border-radius: 1rem; + transition: var(--pi-animation); + &:not(.is-disabled):not(.is-active) { + &:hover { + color: var(--pi-color-primary); + background-color: var(--pi-color-primary-75); + } + } + &.is-active { + color: var(--pi-color-highlighted); + background-color: var(--pi-color-primary-75); + } + } + & > section { + &.is-overflowing { + .pi-tab__element { + flex: 1 1 auto; + } + } + } +} + +@mixin tabElementSize($word-spacing: 100vh) { + :host { + // Fill + &.pi-tab__appearance--fill { + // Header + & > *:nth-child(1) { + .pi-tab__element { + & > span { + display: table-caption; + word-spacing: $word-spacing; + transition: var(--pi-animation); + } + } + } + } + } +} + +@mixin tabJustifyContent($justify-content) { + .pi-tab__element { + justify-content: $justify-content; + } +} + +:host { + width: 100%; + display: block; + + &.hide-tabs { + // Header + & > *:nth-child(1) { + display: none; + } + } + + &:not(.hide-tabs) { + // Header + & > *:nth-child(1) { + display: flex; + align-items: center; + // Tab wrapper + & > section { + width: 100%; + display: flex; + overflow: scroll; + &::-webkit-scrollbar { + display: none; + } + &:not(.is-overflowing) { + justify-content: space-between; + } + .pi-tab__element { + display: flex; + align-items: center; + &:not(.is-disabled):not(.is-active) { + &:hover { + cursor: pointer; + } + } + & > span { + font: { + size: var(--pi-font-size-x-small); + } + } + } + } + } + + // Content + & > *:nth-child(2) { + margin-top: var(--pi-spacing-x-large); + } + + // Tab justify content elements + // Flex start + &.pi-tab__justify-content--flex-start { + @include tabJustifyContent(flex-start); + } + // Center + &.pi-tab__justify-content--center { + @include tabJustifyContent(center); + } + // Flex end + &.pi-tab__justify-content--flex-end { + @include tabJustifyContent(flex-end); + } + + // Tab appearance + // Default + &.pi-tab__appearance--default { + // Header + & > *:nth-child(1) { + @include tabHeader; + border-radius: 1rem; + } + } + + // Fill + &.pi-tab__appearance--fill { + // Header + & > *:nth-child(1) { + @include tabHeader( + var(--pi-color-primary-25), + var(--pi-color-primary-75), + var(--pi-spacing-xx-small) + ); + border-radius: 1.5rem; + .pi-tab__element { + gap: var(--pi-spacing-xx-small); + box-sizing: border-box; + border-radius: 1rem; + } + } + } + // Outline + &.pi-tab__appearance--outline { + // Header + & > *:nth-child(1) { + padding: var(--pi-spacing-xx-small); + & > section { + gap: 0; + .pi-tab__element { + width: 100%; + flex: 1 1 auto; + padding: var(--pi-spacing-small) var(--pi-spacing-xx-small); + span { + font: { + size: var(--pi-font-size-small); + } + } + &:not(.is-disabled):not(.is-active) { + border-bottom: 1px solid; + border-bottom-color: var(--pi-color-grey-200); + span { + color: var(--pi-color-grey-300); + } + } + &.is-active { + border-bottom: 1px solid; + border-bottom-color: var(--pi-color-grey-900); + span { + color: var(--pi-color-grey-900); + font: { + weight: 400; + } + } + } + } + } + } + } + } + + // Content + & > *:nth-child(2) { + display: flex; + overflow: hidden; + // Tab content + & > * { + width: 100%; + flex: 0 0 auto; + transition: var(--pi-animation); + overflow: hidden; + } + } +} + +html { + // Mobile + &.is-mobile { + :host { + // Header + & > *:nth-child(1) { + // Tab wrapper + & > section { + gap: var(--pi-spacing-x-small); + } + } + // Tab Type + // Fill + &.pi-tab__appearance--fill { + // Header + & > *:nth-child(1) { + // Tab wrapper + & > section { + padding: var(--pi-spacing-medium) var(--pi-spacing-x-large); + .pi-tab__element { + width: 5rem; + min-width: 5rem; + max-width: 5rem; + height: var(--pi-spacing-xxx-large); + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xx-small); + } + } + } + } + } + } + + // Mobile & Tablet + &:not(.is-desktop) { + @include tabElementSize; + } + + // Tablet & Desktop + &:not(.is-mobile) { + :host { + height: 100%; + // Header + & > *:nth-child(1) { + // Tab wrapper + & > section { + gap: var(--pi-spacing-x-large); + } + } + // Tab type + // Fill + &.pi-tab__appearance--fill { + // Header + & > *:nth-child(1) { + padding: var(--pi-spacing-x-small) var(--pi-spacing-x-large); + // Tab wrapper + & > section { + .pi-tab__element { + width: 5.75rem; + height: var(--pi-spacing-xxxx-large); + padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small); + } + } + } + } + } + } + + &.is-desktop { + // Medium & Large + &:not(.is-desktop__small) { + @include tabElementSize; + } + + // Large + &.is-desktop__large { + @include tabElementSize(unset); + } + } +} diff --git a/libs/ui/src/lib/ui/tab/tab/tab.component.ts b/libs/ui/src/lib/ui/tab/tab/tab.component.ts index caf3549..8d37a33 100644 --- a/libs/ui/src/lib/ui/tab/tab/tab.component.ts +++ b/libs/ui/src/lib/ui/tab/tab/tab.component.ts @@ -1,197 +1,197 @@ -import { - AfterViewChecked, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - OnDestroy, - Renderer2, - effect, - input, - output, - contentChildren, - viewChild -} from '@angular/core'; -import { TabButton } from '../entities/tab.model'; -import { PiTabContentDirective, PiTabElementDirective } from '../tab.directive'; -import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; -import { PiIconComponent } from '../../icon/icon/icon.component'; -import { PiDisabledDirective } from '../../../util/status/directives/status.directive'; -import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive'; -import { TranslatePipe } from '@ngx-translate/core'; - -@Component({ - selector: 'pi-tab', - templateUrl: './tab.component.html', - styleUrls: ['./tab.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ - NgIf, - PiIconComponent, - PiDisabledDirective, - PiDisabledDirective_1, - NgFor, - NgTemplateOutlet, - TranslatePipe, - ], -}) -export class PiTabComponent implements AfterViewChecked, OnDestroy { - @HostBinding('class') get classes(): string { - const appearanceClass = `pi-tab__appearance--${this.appearance()}`; - const hideTabsClass = this.hideTabs() ? 'hide-tabs' : ''; - const justify = this.justify(); - const justifyClass = justify ? `pi-tab__justify-content--${justify}` : ''; - return ['pi-tab', hideTabsClass, appearanceClass, justifyClass].join(' '); - } - - readonly tabButtons = input>(); - - readonly defaultSelectedTab = input(0); - - readonly appearance = input<'default' | 'fill' | 'outline'>('default'); - - readonly isSmallDevice = input.required(); - - readonly disableContentTranslation = input(false); - - readonly hideTabs = input(false); - - // Justify content to the tab elments - readonly justify = input<'flex-start' | 'flex-end' | 'center'>('center'); - - readonly tabChange = output(); - - readonly tabContentItems = contentChildren(PiTabContentDirective, { descendants: true }); - - readonly tabElementItems = contentChildren(PiTabElementDirective, { descendants: true }); - - readonly tabWrapperElementRef = viewChild.required('tabWrapper', { read: ElementRef }); - - currentContent: number; - currentTabElement: number = 0; - - isTabWrapperScrolledToStart: boolean = true; - isTabWrapperScrolledToEnd: boolean = false; - - constructor( - private cdr: ChangeDetectorRef, - private el: ElementRef, - private renderer: Renderer2 - ) { - // Antes lo hacía el setter de `defaultSelectedTab` (más la llamada de - // ngAfterViewInit). El efecto cubre ambos: se ejecuta al inicializar y - // en cada cambio de la entrada. - effect(() => this.onTabChange(this.defaultSelectedTab())); - } - - get tabContentNativeElements(): HTMLElement[] { - return Array.from(this.el.nativeElement.querySelectorAll('.pi-tab__content')); - } - - get tabElementsNativeElements(): HTMLElement[] { - return Array.from(this.el.nativeElement.querySelectorAll('.pi-tab__element')); - } - - get tabWrapperNativeElement(): HTMLElement { - return this.tabWrapperElementRef()?.nativeElement; - } - - get isTabWrapperOverflowing(): boolean { - const isTabWrapperOverflowing = - this.tabWrapperNativeElement?.scrollWidth > this.tabWrapperNativeElement?.clientWidth; - if (isTabWrapperOverflowing) - this.renderer.addClass(this.tabWrapperNativeElement, 'is-overflowing'); - return isTabWrapperOverflowing; - } - - // El ngAfterViewInit original sólo suscribía a tabContentItems.changes para - // hacer markForCheck(); como ahora es una signal query, Angular ya reevalúa - // la plantilla cuando cambia. - - ngAfterViewChecked(): void { - this.cdr.detectChanges(); - this.tabWrapperNativeElement?.addEventListener('scroll', this.updateTabWrapperScrollState); - } - - ngOnDestroy(): void { - this.tabWrapperNativeElement?.removeEventListener('scroll', this.updateTabWrapperScrollState); - } - - onTabChange(index: number): void { - this.tabChange.emit(index); - this.currentContent = index; - if (this.isSmallDevice()) { - this.currentTabElement = index; - this.handleTabWrapperScrollOnMobile(); - } - if (!this.disableContentTranslation()) this.handleTabContentDisplay(); - } - - getTabContentClass(index: number): string { - let contentClass: string = 'pi-tab pi-tab__content'; - if (index === this.currentContent) contentClass += ' ' + 'is-active'; - return contentClass; - } - - getTabElementClass(index: number, tabButton?: TabButton): string { - let contentClass: string = 'pi-tab pi-tab__element'; - if (index === this.currentContent) contentClass += ' ' + 'is-active'; - if (tabButton && tabButton.icon) contentClass += ' ' + 'has-icon'; - return contentClass; - } - - scrollTabWrapper(direction: 'next' | 'prev'): void { - if (direction === 'next') { - this.currentTabElement = this.currentTabElement + 1; - } else { - this.currentTabElement = this.currentTabElement - 1; - } - this.translateTabWrapper(); - } - - private handleTabContentDisplay(): void { - const transform: string = `translateX(-${this.currentContent * 100}%)`; - this.tabContentNativeElements.forEach((item) => { - this.renderer.setStyle(item, 'transform', `${transform}`); - }); - } - - private handleTabWrapperScrollOnMobile(): void { - if (!this.isTabWrapperOverflowing) return; - const target = this.tabElementsNativeElements[this.currentTabElement]; - const remainingSpace = this.tabWrapperNativeElement?.clientWidth - target.offsetWidth; - const spaceLeftAndRight = remainingSpace / 2; - this.tabWrapperNativeElement?.scrollTo({ - left: target.offsetLeft - spaceLeftAndRight, - behavior: 'smooth', - }); - } - - private translateTabWrapper(): void { - this.tabWrapperNativeElement?.scrollTo({ - left: this.currentTabElement * 0.75 * this.tabWrapperNativeElement?.offsetWidth, - behavior: 'smooth', - }); - } - - private updateIsTabWrapperScrolledToStart(): void { - this.isTabWrapperScrolledToStart = this.tabWrapperElementRef()?.nativeElement?.scrollLeft === 0; - } - - private updateIsTabWrapperScrolledToEnd(): void { - const tabWrapperElementRef = this.tabWrapperElementRef(); - this.isTabWrapperScrolledToEnd = - tabWrapperElementRef?.nativeElement?.scrollWidth - - tabWrapperElementRef?.nativeElement?.scrollLeft === - tabWrapperElementRef?.nativeElement?.clientWidth; - } - - private updateTabWrapperScrollState = (): void => { - this.updateIsTabWrapperScrolledToStart(); - - this.updateIsTabWrapperScrolledToEnd(); - - this.cdr.detectChanges(); - }; -} +import { + AfterViewChecked, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + HostBinding, + OnDestroy, + Renderer2, + effect, + input, + output, + contentChildren, + viewChild +} from '@angular/core'; +import { TabButton } from '../entities/tab.model'; +import { PiTabContentDirective, PiTabElementDirective } from '../tab.directive'; +import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; +import { PiIconComponent } from '../../icon/icon/icon.component'; +import { PiDisabledDirective } from '../../../util/status/directives/status.directive'; +import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive'; +import { TranslatePipe } from '@ngx-translate/core'; + +@Component({ + selector: 'pi-tab', + templateUrl: './tab.component.html', + styleUrls: ['./tab.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + NgIf, + PiIconComponent, + PiDisabledDirective, + PiDisabledDirective_1, + NgFor, + NgTemplateOutlet, + TranslatePipe, + ], +}) +export class PiTabComponent implements AfterViewChecked, OnDestroy { + @HostBinding('class') get classes(): string { + const appearanceClass = `pi-tab__appearance--${this.appearance()}`; + const hideTabsClass = this.hideTabs() ? 'hide-tabs' : ''; + const justify = this.justify(); + const justifyClass = justify ? `pi-tab__justify-content--${justify}` : ''; + return ['pi-tab', hideTabsClass, appearanceClass, justifyClass].join(' '); + } + + readonly tabButtons = input>(); + + readonly defaultSelectedTab = input(0); + + readonly appearance = input<'default' | 'fill' | 'outline'>('default'); + + readonly isSmallDevice = input.required(); + + readonly disableContentTranslation = input(false); + + readonly hideTabs = input(false); + + // Justify content to the tab elments + readonly justify = input<'flex-start' | 'flex-end' | 'center'>('center'); + + readonly tabChange = output(); + + readonly tabContentItems = contentChildren(PiTabContentDirective, { descendants: true }); + + readonly tabElementItems = contentChildren(PiTabElementDirective, { descendants: true }); + + readonly tabWrapperElementRef = viewChild.required('tabWrapper', { read: ElementRef }); + + currentContent!: number; + currentTabElement: number = 0; + + isTabWrapperScrolledToStart: boolean = true; + isTabWrapperScrolledToEnd: boolean = false; + + constructor( + private cdr: ChangeDetectorRef, + private el: ElementRef, + private renderer: Renderer2 + ) { + // Antes lo hacía el setter de `defaultSelectedTab` (más la llamada de + // ngAfterViewInit). El efecto cubre ambos: se ejecuta al inicializar y + // en cada cambio de la entrada. + effect(() => this.onTabChange(this.defaultSelectedTab())); + } + + get tabContentNativeElements(): HTMLElement[] { + return Array.from(this.el.nativeElement.querySelectorAll('.pi-tab__content')); + } + + get tabElementsNativeElements(): HTMLElement[] { + return Array.from(this.el.nativeElement.querySelectorAll('.pi-tab__element')); + } + + get tabWrapperNativeElement(): HTMLElement { + return this.tabWrapperElementRef()?.nativeElement; + } + + get isTabWrapperOverflowing(): boolean { + const isTabWrapperOverflowing = + this.tabWrapperNativeElement?.scrollWidth > this.tabWrapperNativeElement?.clientWidth; + if (isTabWrapperOverflowing) + this.renderer.addClass(this.tabWrapperNativeElement, 'is-overflowing'); + return isTabWrapperOverflowing; + } + + // El ngAfterViewInit original sólo suscribía a tabContentItems.changes para + // hacer markForCheck(); como ahora es una signal query, Angular ya reevalúa + // la plantilla cuando cambia. + + ngAfterViewChecked(): void { + this.cdr.detectChanges(); + this.tabWrapperNativeElement?.addEventListener('scroll', this.updateTabWrapperScrollState); + } + + ngOnDestroy(): void { + this.tabWrapperNativeElement?.removeEventListener('scroll', this.updateTabWrapperScrollState); + } + + onTabChange(index: number): void { + this.tabChange.emit(index); + this.currentContent = index; + if (this.isSmallDevice()) { + this.currentTabElement = index; + this.handleTabWrapperScrollOnMobile(); + } + if (!this.disableContentTranslation()) this.handleTabContentDisplay(); + } + + getTabContentClass(index: number): string { + let contentClass: string = 'pi-tab pi-tab__content'; + if (index === this.currentContent) contentClass += ' ' + 'is-active'; + return contentClass; + } + + getTabElementClass(index: number, tabButton?: TabButton): string { + let contentClass: string = 'pi-tab pi-tab__element'; + if (index === this.currentContent) contentClass += ' ' + 'is-active'; + if (tabButton && tabButton.icon) contentClass += ' ' + 'has-icon'; + return contentClass; + } + + scrollTabWrapper(direction: 'next' | 'prev'): void { + if (direction === 'next') { + this.currentTabElement = this.currentTabElement + 1; + } else { + this.currentTabElement = this.currentTabElement - 1; + } + this.translateTabWrapper(); + } + + private handleTabContentDisplay(): void { + const transform: string = `translateX(-${this.currentContent * 100}%)`; + this.tabContentNativeElements.forEach((item) => { + this.renderer.setStyle(item, 'transform', `${transform}`); + }); + } + + private handleTabWrapperScrollOnMobile(): void { + if (!this.isTabWrapperOverflowing) return; + const target = this.tabElementsNativeElements[this.currentTabElement]; + const remainingSpace = this.tabWrapperNativeElement?.clientWidth - target.offsetWidth; + const spaceLeftAndRight = remainingSpace / 2; + this.tabWrapperNativeElement?.scrollTo({ + left: target.offsetLeft - spaceLeftAndRight, + behavior: 'smooth', + }); + } + + private translateTabWrapper(): void { + this.tabWrapperNativeElement?.scrollTo({ + left: this.currentTabElement * 0.75 * this.tabWrapperNativeElement?.offsetWidth, + behavior: 'smooth', + }); + } + + private updateIsTabWrapperScrolledToStart(): void { + this.isTabWrapperScrolledToStart = this.tabWrapperElementRef()?.nativeElement?.scrollLeft === 0; + } + + private updateIsTabWrapperScrolledToEnd(): void { + const tabWrapperElementRef = this.tabWrapperElementRef(); + this.isTabWrapperScrolledToEnd = + tabWrapperElementRef?.nativeElement?.scrollWidth - + tabWrapperElementRef?.nativeElement?.scrollLeft === + tabWrapperElementRef?.nativeElement?.clientWidth; + } + + private updateTabWrapperScrollState = (): void => { + this.updateIsTabWrapperScrolledToStart(); + + this.updateIsTabWrapperScrolledToEnd(); + + this.cdr.detectChanges(); + }; +} diff --git a/libs/ui/src/lib/ui/text/base-text-viewer.component.ts b/libs/ui/src/lib/ui/text/base-text-viewer.component.ts index c76d466..a88d3fc 100644 --- a/libs/ui/src/lib/ui/text/base-text-viewer.component.ts +++ b/libs/ui/src/lib/ui/text/base-text-viewer.component.ts @@ -1,148 +1,148 @@ -// Angular -import { Directive, HostBinding, OnInit, input } from '@angular/core'; - -// Style definitions -import { - alignment, - borderType, - textColor, - flexDirection, - justify, - fontWeight, - styleType, - fontStyle, - iconSize, - fontSize, - ComponentFamilyClass, -} from '../../styles'; - -@Directive() -export abstract class PiBaseTextViewerComponent implements OnInit { - @HostBinding('class') get classes(): string { - return [ - ComponentFamilyClass.Text, - this.alignmentClass, - this.borderTypeClass, - this.colorClass, - this.flexDirectionClass, - this.fontSizeClass, - this.justifyClass, - this.fontStyleClass, - this.fontWeightClass, - this.iconSizeClass, - this.isDisabledClass, - this.iconAppearanceClass, - this.iconColorClass, - this.hasIconClass, - this.hasLabelClass, - this.hasValueClass, - ].join(' '); - } - readonly alignment = input('center'); - readonly borderType = input(); - readonly color = input(); - readonly flexDirection = input('row'); - readonly fontSize = input('s'); - readonly justify = input('flex-start'); - readonly fontWeight = input('300'); - readonly fontStyle = input('normal'); - readonly icon = input(); - readonly iconSize = input('medium'); - readonly iconColor = input(); - readonly iconAppearance = input<'stroke' | 'fill-stroke' | 'fill' | 'default' | 'custom'>('default'); - readonly isDisabled = input(false); - - // Content - readonly label = input.required(); - readonly value = input.required(); - - ngOnInit(): void { - this.alignmentClass; - this.borderTypeClass; - this.colorClass; - this.flexDirectionClass; - this.fontSizeClass; - this.fontStyleClass; - this.fontWeightClass; - this.justifyClass; - this.iconSizeClass; - this.iconColorClass; - this.isDisabledClass; - this.hasLabelClass; - this.hasValueClass; - this.iconAppearanceClass; - } - - protected get alignmentClass(): string { +// Angular +import { Directive, HostBinding, OnInit, input } from '@angular/core'; + +// Style definitions +import { + alignment, + borderType, + textColor, + flexDirection, + justify, + fontWeight, + styleType, + fontStyle, + iconSize, + fontSize, + ComponentFamilyClass, +} from '../../styles'; + +@Directive() +export abstract class PiBaseTextViewerComponent implements OnInit { + @HostBinding('class') get classes(): string { + return [ + ComponentFamilyClass.Text, + this.alignmentClass, + this.borderTypeClass, + this.colorClass, + this.flexDirectionClass, + this.fontSizeClass, + this.justifyClass, + this.fontStyleClass, + this.fontWeightClass, + this.iconSizeClass, + this.isDisabledClass, + this.iconAppearanceClass, + this.iconColorClass, + this.hasIconClass, + this.hasLabelClass, + this.hasValueClass, + ].join(' '); + } + readonly alignment = input('center'); + readonly borderType = input(); + readonly color = input(); + readonly flexDirection = input('row'); + readonly fontSize = input('s'); + readonly justify = input('flex-start'); + readonly fontWeight = input('300'); + readonly fontStyle = input('normal'); + readonly icon = input(); + readonly iconSize = input('medium'); + readonly iconColor = input(); + readonly iconAppearance = input<'stroke' | 'fill-stroke' | 'fill' | 'default' | 'custom'>('default'); + readonly isDisabled = input(false); + + // Content + readonly label = input.required(); + readonly value = input.required(); + + ngOnInit(): void { + this.alignmentClass; + this.borderTypeClass; + this.colorClass; + this.flexDirectionClass; + this.fontSizeClass; + this.fontStyleClass; + this.fontWeightClass; + this.justifyClass; + this.iconSizeClass; + this.iconColorClass; + this.isDisabledClass; + this.hasLabelClass; + this.hasValueClass; + this.iconAppearanceClass; + } + + protected get alignmentClass(): string { const alignmentValue = this.alignment(); - return alignmentValue && `pi-text-viewer__align--${alignmentValue}`; - } - - protected get borderTypeClass(): string | undefined { + return alignmentValue && `pi-text-viewer__align--${alignmentValue}`; + } + + protected get borderTypeClass(): string | undefined { const borderTypeValue = this.borderType(); - return borderTypeValue && `pi-text-viewer__border--${borderTypeValue}`; - } - - protected get colorClass(): string | undefined { + return borderTypeValue && `pi-text-viewer__border--${borderTypeValue}`; + } + + protected get colorClass(): string | undefined { const color = this.color(); - return color && `pi-color__${color}`; - } - - protected get flexDirectionClass(): string | undefined { + return color && `pi-color__${color}`; + } + + protected get flexDirectionClass(): string | undefined { const flexDirectionValue = this.flexDirection(); - return flexDirectionValue && `pi-text-viewer__flex-direction--${flexDirectionValue}`; - } - - protected get fontSizeClass(): string | undefined { + return flexDirectionValue && `pi-text-viewer__flex-direction--${flexDirectionValue}`; + } + + protected get fontSizeClass(): string | undefined { const fontSizeValue = this.fontSize(); - return fontSizeValue && `pi-text-viewer__font-size--${fontSizeValue}`; - } - - protected get fontWeightClass(): string | undefined { + return fontSizeValue && `pi-text-viewer__font-size--${fontSizeValue}`; + } + + protected get fontWeightClass(): string | undefined { const fontWeightValue = this.fontWeight(); - return fontWeightValue && `pi-text-viewer__font-weight--${fontWeightValue}`; - } - - protected get justifyClass(): string | undefined { + return fontWeightValue && `pi-text-viewer__font-weight--${fontWeightValue}`; + } + + protected get justifyClass(): string | undefined { const justifyValue = this.justify(); - return justifyValue && `pi-text-viewer__justify--${justifyValue}`; - } - - protected get fontStyleClass(): string | undefined { + return justifyValue && `pi-text-viewer__justify--${justifyValue}`; + } + + protected get fontStyleClass(): string | undefined { const fontStyleValue = this.fontStyle(); - return fontStyleValue && `pi-text-viewer__font-style--${fontStyleValue}`; - } - - protected get hasIconClass(): string | boolean { - return this.icon() ? 'has-icon' : ''; - } - - protected get hasLabelClass(): string | boolean { - return this.label() ? 'has-label' : ''; - } - - protected get hasValueClass(): string | boolean { - return this.value() ? 'has-value' : ''; - } - - protected get iconSizeClass(): string | undefined { + return fontStyleValue && `pi-text-viewer__font-style--${fontStyleValue}`; + } + + protected get hasIconClass(): string | boolean { + return this.icon() ? 'has-icon' : ''; + } + + protected get hasLabelClass(): string | boolean { + return this.label() ? 'has-label' : ''; + } + + protected get hasValueClass(): string | boolean { + return this.value() ? 'has-value' : ''; + } + + protected get iconSizeClass(): string | undefined { const iconSizeValue = this.iconSize(); - return iconSizeValue && `pi-text-viewer__icon-size--${iconSizeValue}`; - } - - protected get iconColorClass(): string | undefined { + return iconSizeValue && `pi-text-viewer__icon-size--${iconSizeValue}`; + } + + protected get iconColorClass(): string | undefined { const iconColor = this.iconColor(); - return iconColor - ? `pi-text-viewer__icon-color--${iconColor}` - : 'pi-text-viewer__icon-color--black'; - } - - protected get iconAppearanceClass(): string | undefined { + return iconColor + ? `pi-text-viewer__icon-color--${iconColor}` + : 'pi-text-viewer__icon-color--black'; + } + + protected get iconAppearanceClass(): string | undefined { const iconAppearance = this.iconAppearance(); - return iconAppearance && `pi-text-viewer__icon-appearance--${iconAppearance}`; - } - - protected get isDisabledClass(): string | boolean { - return this.isDisabled() ? 'is-disabled' : ''; - } -} + return iconAppearance && `pi-text-viewer__icon-appearance--${iconAppearance}`; + } + + protected get isDisabledClass(): string | boolean { + return this.isDisabled() ? 'is-disabled' : ''; + } +} diff --git a/libs/ui/src/lib/ui/text/directives/text-color.directive.ts b/libs/ui/src/lib/ui/text/directives/text-color.directive.ts index 2711b03..8154fb0 100644 --- a/libs/ui/src/lib/ui/text/directives/text-color.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-color.directive.ts @@ -1,23 +1,23 @@ -import { Directive, HostBinding, input } from '@angular/core'; -import { styleType } from '../../../styles'; - -// Condition color -@Directive({ selector: '[pi-color]', }) -export class PiTextColorDirective { - // Blue - @HostBinding('class.pi-color__primary') get isPrimary(): boolean { - return this.color() === 'primary'; - } - - // Yellow - @HostBinding('class.pi-color__accent') get isAccent(): boolean { - return this.color() === 'accent'; - } - - // Red - @HostBinding('class.pi-color__warn') get isWarn(): boolean { - return this.color() === 'warn'; - } - - readonly color = input(); -} +import { Directive, HostBinding, input } from '@angular/core'; +import { styleType } from '../../../styles'; + +// Condition color +@Directive({ selector: '[pi-color]', }) +export class PiTextColorDirective { + // Blue + @HostBinding('class.pi-color__primary') get isPrimary(): boolean { + return this.color() === 'primary'; + } + + // Yellow + @HostBinding('class.pi-color__accent') get isAccent(): boolean { + return this.color() === 'accent'; + } + + // Red + @HostBinding('class.pi-color__warn') get isWarn(): boolean { + return this.color() === 'warn'; + } + + readonly color = input(); +} diff --git a/libs/ui/src/lib/ui/text/directives/text-group-indicator.directive.ts b/libs/ui/src/lib/ui/text/directives/text-group-indicator.directive.ts index 6feb6ed..682eeb8 100644 --- a/libs/ui/src/lib/ui/text/directives/text-group-indicator.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-group-indicator.directive.ts @@ -1,8 +1,8 @@ -import { Directive, HostBinding } from '@angular/core'; - -@Directive({ selector: '[pi-text-group-indicator]', }) -export class PiTextGroupIndicatorDirective { - @HostBinding('class') get classes(): string { - return 'pi-text-group pi-text-group__value-indicator'; - } -} +import { Directive, HostBinding } from '@angular/core'; + +@Directive({ selector: '[pi-text-group-indicator]', }) +export class PiTextGroupIndicatorDirective { + @HostBinding('class') get classes(): string { + return 'pi-text-group pi-text-group__value-indicator'; + } +} diff --git a/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts b/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts index bde46ba..e3bcdc4 100644 --- a/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-sizes.directive.ts @@ -1,79 +1,79 @@ -import { Directive, HostBinding, input } from '@angular/core'; - -@Directive({ selector: '[pi-text-size]', }) -export class PiTextSizeDirective { - @HostBinding('class') get classes(): string { - return this.sizeClass; - } - - readonly size = input.required<'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large'>(); - - protected get sizeClass(): string { +import { Directive, HostBinding, input } from '@angular/core'; + +@Directive({ selector: '[pi-text-size]', }) +export class PiTextSizeDirective { + @HostBinding('class') get classes(): string { + return this.sizeClass; + } + + readonly size = input.required<'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large'>(); + + protected get sizeClass(): string { const size = this.size(); - return !!size && `pi-text pi-text__size--${size}`; - } -} - -// 0.625rem - 10px -@Directive({ selector: '[xxs]', }) -export class PiTextXXSmallDirective { - @HostBinding('class') get classes(): string { - return 'pi-text pi-text__size--xx-small'; - } -} - -// 0.75rem - 12px -@Directive({ selector: '[xs]', }) -export class PiTextXSmallDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--x-small'; - } -} - -// 0.9375rem - 15px -@Directive({ selector: '[s]', }) -export class PiTextSmallDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--small'; - } -} - -// 1.125rem - 18px -@Directive({ selector: '[m]', }) -export class PiTextMediumDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--medium'; - } -} - -// 1.375rem - 22px -@Directive({ selector: '[l]', }) -export class PiTextLargeDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--large'; - } -} - -// 1.6875rem - 27px -@Directive({ selector: '[xl]', }) -export class PiTextXLargeDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--x-large'; - } -} - -// 2.375rem - 38px -@Directive({ selector: '[xxl]', }) -export class PiTextXXLargeDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--xx-large'; - } -} - -// 2.875rem - 46px -@Directive({ selector: '[xxxl]', }) -export class PiTextXXXLargeDirective { - @HostBinding('class') get fontSize(): string { - return 'pi-text pi-text__size--xxx-large'; - } -} + return !!size && `pi-text pi-text__size--${size}`; + } +} + +// 0.625rem - 10px +@Directive({ selector: '[xxs]', }) +export class PiTextXXSmallDirective { + @HostBinding('class') get classes(): string { + return 'pi-text pi-text__size--xx-small'; + } +} + +// 0.75rem - 12px +@Directive({ selector: '[xs]', }) +export class PiTextXSmallDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--x-small'; + } +} + +// 0.9375rem - 15px +@Directive({ selector: '[s]', }) +export class PiTextSmallDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--small'; + } +} + +// 1.125rem - 18px +@Directive({ selector: '[m]', }) +export class PiTextMediumDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--medium'; + } +} + +// 1.375rem - 22px +@Directive({ selector: '[l]', }) +export class PiTextLargeDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--large'; + } +} + +// 1.6875rem - 27px +@Directive({ selector: '[xl]', }) +export class PiTextXLargeDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--x-large'; + } +} + +// 2.375rem - 38px +@Directive({ selector: '[xxl]', }) +export class PiTextXXLargeDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--xx-large'; + } +} + +// 2.875rem - 46px +@Directive({ selector: '[xxxl]', }) +export class PiTextXXXLargeDirective { + @HostBinding('class') get fontSize(): string { + return 'pi-text pi-text__size--xxx-large'; + } +} diff --git a/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts b/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts index 956307c..4a5b044 100644 --- a/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-styles.directive.ts @@ -1,40 +1,40 @@ -import { Directive, HostBinding, input } from '@angular/core'; - -@Directive({ selector: '[pi-text-centered]', }) -export class PiTextCenteredDirective { - @HostBinding('class') get classes(): string { - return 'pi-text pi-text__centered'; - } -} - -@Directive({ selector: '[pi-text-group]', }) -export class PiTextGroupDirective { - @HostBinding('class') get classes(): string { - return 'pi-text pi-text__group'; - } -} -@Directive({ selector: '[pi-disabled]', }) -export class PiDisabledDirective { - @HostBinding('style.opacity') get opacity(): number { - return this.isDisabled() ? 0.2 : 1; - } - // El ngOnChanges original sólo reasignaba a la entrada su propio - // currentValue (no-op). Con signal inputs sobra. - readonly isDisabled = input(); -} - -@Directive({ selector: '[pi-covered]', }) -export class PiTextCoveredDirective { - @HostBinding('class') get classes(): string { - return this.isCovered() ? 'pi-text pi-text__is-covered' : ''; - } - - readonly isCovered = input(); -} - -@Directive({ selector: '[pi-letter-spacing]', }) -export class PiTextLetterSpacingDirective { - @HostBinding('class') get classes(): string { - return 'pi-text pi-text__letter-spacing'; - } -} +import { Directive, HostBinding, input } from '@angular/core'; + +@Directive({ selector: '[pi-text-centered]', }) +export class PiTextCenteredDirective { + @HostBinding('class') get classes(): string { + return 'pi-text pi-text__centered'; + } +} + +@Directive({ selector: '[pi-text-group]', }) +export class PiTextGroupDirective { + @HostBinding('class') get classes(): string { + return 'pi-text pi-text__group'; + } +} +@Directive({ selector: '[pi-disabled]', }) +export class PiDisabledDirective { + @HostBinding('style.opacity') get opacity(): number { + return this.isDisabled() ? 0.2 : 1; + } + // El ngOnChanges original sólo reasignaba a la entrada su propio + // currentValue (no-op). Con signal inputs sobra. + readonly isDisabled = input(); +} + +@Directive({ selector: '[pi-covered]', }) +export class PiTextCoveredDirective { + @HostBinding('class') get classes(): string { + return this.isCovered() ? 'pi-text pi-text__is-covered' : ''; + } + + readonly isCovered = input(); +} + +@Directive({ selector: '[pi-letter-spacing]', }) +export class PiTextLetterSpacingDirective { + @HostBinding('class') get classes(): string { + return 'pi-text pi-text__letter-spacing'; + } +} diff --git a/libs/ui/src/lib/ui/text/directives/text-weights.directive.ts b/libs/ui/src/lib/ui/text/directives/text-weights.directive.ts index 50003d8..5782412 100644 --- a/libs/ui/src/lib/ui/text/directives/text-weights.directive.ts +++ b/libs/ui/src/lib/ui/text/directives/text-weights.directive.ts @@ -1,41 +1,41 @@ -import { Directive, HostBinding } from '@angular/core'; - -// 300 -@Directive({ selector: '[light]', }) -export class PiTextWeightLightDirective { - @HostBinding('style.font-weight') get fontWeight(): string { - return '300'; - } -} - -// 400 -@Directive({ selector: '[normal]', }) -export class PiTextWeightNormalDirective { - @HostBinding('style.font-weight') get fontWeight(): string { - return '400'; - } -} - -// 600 -@Directive({ selector: '[medium]', }) -export class PiTextWeightMediumDirective { - @HostBinding('style.font-weight') get fontWeight(): string { - return '600'; - } -} - -// 700 -@Directive({ selector: '[bold]', }) -export class PiTextWeightBoldDirective { - @HostBinding('style.font-weight') get fontWeight(): string { - return '700'; - } -} - -// 800 -@Directive({ selector: '[black]', }) -export class PiTextWeightBlackDirective { - @HostBinding('style.font-weight') get fontWeight(): string { - return '800'; - } -} +import { Directive, HostBinding } from '@angular/core'; + +// 300 +@Directive({ selector: '[light]', }) +export class PiTextWeightLightDirective { + @HostBinding('style.font-weight') get fontWeight(): string { + return '300'; + } +} + +// 400 +@Directive({ selector: '[normal]', }) +export class PiTextWeightNormalDirective { + @HostBinding('style.font-weight') get fontWeight(): string { + return '400'; + } +} + +// 600 +@Directive({ selector: '[medium]', }) +export class PiTextWeightMediumDirective { + @HostBinding('style.font-weight') get fontWeight(): string { + return '600'; + } +} + +// 700 +@Directive({ selector: '[bold]', }) +export class PiTextWeightBoldDirective { + @HostBinding('style.font-weight') get fontWeight(): string { + return '700'; + } +} + +// 800 +@Directive({ selector: '[black]', }) +export class PiTextWeightBlackDirective { + @HostBinding('style.font-weight') get fontWeight(): string { + return '800'; + } +} diff --git a/libs/ui/src/lib/ui/text/index.ts b/libs/ui/src/lib/ui/text/index.ts index 83904fe..d7cb9a7 100644 --- a/libs/ui/src/lib/ui/text/index.ts +++ b/libs/ui/src/lib/ui/text/index.ts @@ -1,13 +1,13 @@ -export * from './directives/text-color.directive'; -export * from './directives/text-group-indicator.directive'; -export * from './directives/text-sizes.directive'; -export * from './directives/text-styles.directive'; -export * from './directives/text-weights.directive'; - -export * from './text-area-expansion/text-area-expansion.component'; -export * from './text-viewer/text-viewer.component'; -export * from './text-viewer-link/text-viewer-link.component'; - -export * from './base-text-viewer.component'; - - +export * from './directives/text-color.directive'; +export * from './directives/text-group-indicator.directive'; +export * from './directives/text-sizes.directive'; +export * from './directives/text-styles.directive'; +export * from './directives/text-weights.directive'; + +export * from './text-area-expansion/text-area-expansion.component'; +export * from './text-viewer/text-viewer.component'; +export * from './text-viewer-link/text-viewer-link.component'; + +export * from './base-text-viewer.component'; + + diff --git a/libs/ui/src/lib/ui/text/styles/_alignment.scss b/libs/ui/src/lib/ui/text/styles/_alignment.scss index 453d24d..9a3ca38 100644 --- a/libs/ui/src/lib/ui/text/styles/_alignment.scss +++ b/libs/ui/src/lib/ui/text/styles/_alignment.scss @@ -1,18 +1,18 @@ -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Alignment - &.pi-text-viewer__align--center { - align-items: center; - } - &.pi-text-viewer__align--flex-start { - align-items: flex-start; - } - &.pi-text-viewer__align--flex-end { - align-items: flex-end; - & > article { - text-align: right; - } - } - } -} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Alignment + &.pi-text-viewer__align--center { + align-items: center; + } + &.pi-text-viewer__align--flex-start { + align-items: flex-start; + } + &.pi-text-viewer__align--flex-end { + align-items: flex-end; + & > article { + text-align: right; + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_border-type.scss b/libs/ui/src/lib/ui/text/styles/_border-type.scss index 1d7a075..86f3757 100644 --- a/libs/ui/src/lib/ui/text/styles/_border-type.scss +++ b/libs/ui/src/lib/ui/text/styles/_border-type.scss @@ -1,66 +1,66 @@ -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Border type - &.pi-text-viewer__border--top { - & > article { - padding-top: var(--pi-spacing-xxx-small); - border-top: 1px solid var(--pi-color-grey-25); - } - } - &.pi-text-viewer__border--middle { - &.pi-text-viewer__flex-direction--row { - & > article { - label { - width: 50%; - padding-right: var(--pi-spacing-xxx-small); - border-right: 1px solid var(--pi-color-grey-25); - } - span { - padding-left: var(--pi-spacing-xxx-small); - } - } - } - &.pi-text-viewer__flex-direction--row-reverse { - & > article { - label { - padding-left: var(--pi-spacing-xxx-small); - } - span { - width: 50%; - padding-right: var(--pi-spacing-xxx-small); - border-right: 1px solid var(--pi-color-grey-25); - } - } - } - &.pi-text-viewer__flex-direction--column { - & > article { - label { - padding-bottom: var(--pi-spacing-xxx-small); - border-bottom: 1px solid var(--pi-color-grey-25); - } - span { - padding-top: var(--pi-spacing-xxx-small); - } - } - } - &.pi-text-viewer__flex-direction--column-reverse { - & > article { - label { - padding-top: var(--pi-spacing-xxx-small); - } - span { - padding: var(--pi-spacing-xxx-small) var(--pi-spacing-medium); - border-bottom: 1px solid var(--pi-color-grey-25); - } - } - } - } - &.pi-text-viewer__border--bottom { - & > article { - padding-bottom: var(--pi-spacing-xxx-small); - border-bottom: 1px solid var(--pi-color-grey-25); - } - } - } -} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Border type + &.pi-text-viewer__border--top { + & > article { + padding-top: var(--pi-spacing-xxx-small); + border-top: 1px solid var(--pi-color-grey-25); + } + } + &.pi-text-viewer__border--middle { + &.pi-text-viewer__flex-direction--row { + & > article { + label { + width: 50%; + padding-right: var(--pi-spacing-xxx-small); + border-right: 1px solid var(--pi-color-grey-25); + } + span { + padding-left: var(--pi-spacing-xxx-small); + } + } + } + &.pi-text-viewer__flex-direction--row-reverse { + & > article { + label { + padding-left: var(--pi-spacing-xxx-small); + } + span { + width: 50%; + padding-right: var(--pi-spacing-xxx-small); + border-right: 1px solid var(--pi-color-grey-25); + } + } + } + &.pi-text-viewer__flex-direction--column { + & > article { + label { + padding-bottom: var(--pi-spacing-xxx-small); + border-bottom: 1px solid var(--pi-color-grey-25); + } + span { + padding-top: var(--pi-spacing-xxx-small); + } + } + } + &.pi-text-viewer__flex-direction--column-reverse { + & > article { + label { + padding-top: var(--pi-spacing-xxx-small); + } + span { + padding: var(--pi-spacing-xxx-small) var(--pi-spacing-medium); + border-bottom: 1px solid var(--pi-color-grey-25); + } + } + } + } + &.pi-text-viewer__border--bottom { + & > article { + padding-bottom: var(--pi-spacing-xxx-small); + border-bottom: 1px solid var(--pi-color-grey-25); + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_flex-direction.scss b/libs/ui/src/lib/ui/text/styles/_flex-direction.scss index beef262..14d9dc9 100644 --- a/libs/ui/src/lib/ui/text/styles/_flex-direction.scss +++ b/libs/ui/src/lib/ui/text/styles/_flex-direction.scss @@ -1,86 +1,86 @@ -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - &.has-icon { - & > article { - display: flex; - } - } - - &.pi-text-viewer__flex-direction--row, - &.pi-text-viewer__flex-direction--row-reverse { - & > article { - gap: var(--pi-spacing-xxx-small); - align-items: baseline; - } - // &.has-icon { - // &.has-label { - // &.has-value { - // & > article { - // display: flow; - // } - // } - // } - // } - } - - &.pi-text-viewer__flex-direction--column, - &.pi-text-viewer__flex-direction--column-reverse { - & > article { - display: flex; - } - } - - &.pi-text-viewer__flex-direction--column { - & > article { - flex-direction: column; - } - } - &.pi-text-viewer__flex-direction--column-reverse { - & > article { - flex-direction: column-reverse; - } - } - - &.pi-text-viewer__flex-direction--row-reverse { - flex-direction: row-reverse; - & > article { - gap: var(--pi-spacing-xxxx-small); - } - // Row reverse without icon - &:not(.has-icon) { - & > article { - align-items: center; - } - } - // Row reverse with icon - &.has-icon { - &.has-label { - &.has-value { - & > article { - flex-direction: column; - } - } - } - } - - &.pi-text-viewer__justify--space-around, - &.pi-text-viewer__justify--space-betweeen { - & > article { - align-items: flex-start; - } - } - } - // All flex direction row without justify content space... - &.pi-text-viewer__flex-direction--row-reverse { - &:not(.pi-text-viewer__justify--space-between):not( - .pi-text-viewer__justify--space-around - ):not(.pi-text-viewer__justify--center) { - max-width: max-content; - } - &.pi-text-viewer__justify--center { - max-width: -webkit-fill-available; - } - } - } -} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + &.has-icon { + & > article { + display: flex; + } + } + + &.pi-text-viewer__flex-direction--row, + &.pi-text-viewer__flex-direction--row-reverse { + & > article { + gap: var(--pi-spacing-xxx-small); + align-items: baseline; + } + // &.has-icon { + // &.has-label { + // &.has-value { + // & > article { + // display: flow; + // } + // } + // } + // } + } + + &.pi-text-viewer__flex-direction--column, + &.pi-text-viewer__flex-direction--column-reverse { + & > article { + display: flex; + } + } + + &.pi-text-viewer__flex-direction--column { + & > article { + flex-direction: column; + } + } + &.pi-text-viewer__flex-direction--column-reverse { + & > article { + flex-direction: column-reverse; + } + } + + &.pi-text-viewer__flex-direction--row-reverse { + flex-direction: row-reverse; + & > article { + gap: var(--pi-spacing-xxxx-small); + } + // Row reverse without icon + &:not(.has-icon) { + & > article { + align-items: center; + } + } + // Row reverse with icon + &.has-icon { + &.has-label { + &.has-value { + & > article { + flex-direction: column; + } + } + } + } + + &.pi-text-viewer__justify--space-around, + &.pi-text-viewer__justify--space-betweeen { + & > article { + align-items: flex-start; + } + } + } + // All flex direction row without justify content space... + &.pi-text-viewer__flex-direction--row-reverse { + &:not(.pi-text-viewer__justify--space-between):not( + .pi-text-viewer__justify--space-around + ):not(.pi-text-viewer__justify--center) { + max-width: max-content; + } + &.pi-text-viewer__justify--center { + max-width: -webkit-fill-available; + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_font-color.scss b/libs/ui/src/lib/ui/text/styles/_font-color.scss index e0cf57c..49c319d 100644 --- a/libs/ui/src/lib/ui/text/styles/_font-color.scss +++ b/libs/ui/src/lib/ui/text/styles/_font-color.scss @@ -1,88 +1,88 @@ -// Equal color -@mixin textViewerEqualFontColor($color) { - label, - span { - color: var(--pi-color-#{$color}); - } -} - -// Uniqual colors -@mixin textViewerUnequalFontColor($label-color, $value-color) { - label { - color: var(--pi-color-#{$label-color}); - } - span { - color: var(--pi-color-#{$value-color}); - } -} - -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Colors - // Equal combinations - &.pi-color__primary { - @include textViewerEqualFontColor(primary); - } - - &.pi-color__accent { - @include textViewerEqualFontColor(accent); - } - - &.pi-color__warn { - @include textViewerEqualFontColor(warn); - } - - &.pi-color__dark { - @include textViewerEqualFontColor(grey); - } - - &.pi-color__black { - @include textViewerEqualFontColor(grey-900); - } - - &.pi-color__white { - @include textViewerEqualFontColor(white); - } - - &.pi-color__grey { - @include textViewerEqualFontColor(grey-300); - } - - &.pi-color__highlighted { - @include textViewerEqualFontColor(highlighted); - } - - // Unequal combinations - &.pi-color__black-primary { - @include textViewerUnequalFontColor(grey-900, primary); - } - &.pi-color__primary-black { - @include textViewerUnequalFontColor(primary, grey-900); - } - &.pi-color__black-accent { - @include textViewerUnequalFontColor(grey-900, accent); - } - &.pi-color__accent-black { - @include textViewerUnequalFontColor(accent, grey-900); - } - &.pi-color__black-grey { - @include textViewerUnequalFontColor(grey-900, grey-300); - } - &.pi-color__grey-black { - @include textViewerUnequalFontColor(grey-300, grey-900); - } - &.pi-color__black-dark { - @include textViewerUnequalFontColor(grey-900, grey-400); - } - &.pi-color__dark-black { - @include textViewerUnequalFontColor(grey-400, grey-900); - } - &.pi-color__highlighted-grey { - @include textViewerUnequalFontColor(highlighted, grey); - } - &.pi-color__grey-highlighted { - @include textViewerUnequalFontColor(grey, highlighted); - } - } -} +// Equal color +@mixin textViewerEqualFontColor($color) { + label, + span { + color: var(--pi-color-#{$color}); + } +} + +// Uniqual colors +@mixin textViewerUnequalFontColor($label-color, $value-color) { + label { + color: var(--pi-color-#{$label-color}); + } + span { + color: var(--pi-color-#{$value-color}); + } +} + +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Colors + // Equal combinations + &.pi-color__primary { + @include textViewerEqualFontColor(primary); + } + + &.pi-color__accent { + @include textViewerEqualFontColor(accent); + } + + &.pi-color__warn { + @include textViewerEqualFontColor(warn); + } + + &.pi-color__dark { + @include textViewerEqualFontColor(grey); + } + + &.pi-color__black { + @include textViewerEqualFontColor(grey-900); + } + + &.pi-color__white { + @include textViewerEqualFontColor(white); + } + + &.pi-color__grey { + @include textViewerEqualFontColor(grey-300); + } + + &.pi-color__highlighted { + @include textViewerEqualFontColor(highlighted); + } + + // Unequal combinations + &.pi-color__black-primary { + @include textViewerUnequalFontColor(grey-900, primary); + } + &.pi-color__primary-black { + @include textViewerUnequalFontColor(primary, grey-900); + } + &.pi-color__black-accent { + @include textViewerUnequalFontColor(grey-900, accent); + } + &.pi-color__accent-black { + @include textViewerUnequalFontColor(accent, grey-900); + } + &.pi-color__black-grey { + @include textViewerUnequalFontColor(grey-900, grey-300); + } + &.pi-color__grey-black { + @include textViewerUnequalFontColor(grey-300, grey-900); + } + &.pi-color__black-dark { + @include textViewerUnequalFontColor(grey-900, grey-400); + } + &.pi-color__dark-black { + @include textViewerUnequalFontColor(grey-400, grey-900); + } + &.pi-color__highlighted-grey { + @include textViewerUnequalFontColor(highlighted, grey); + } + &.pi-color__grey-highlighted { + @include textViewerUnequalFontColor(grey, highlighted); + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_font-size.scss b/libs/ui/src/lib/ui/text/styles/_font-size.scss index 628b679..665cf54 100644 --- a/libs/ui/src/lib/ui/text/styles/_font-size.scss +++ b/libs/ui/src/lib/ui/text/styles/_font-size.scss @@ -1,223 +1,223 @@ -// Equal sizes -@mixin textViewerEqualFontSize($font-size, $gap) { - label, - a, - span { - font: { - size: var(--pi-font-size-#{$font-size}); - } - } - &[class*='pi-text-viewer__flex-direction--column'] { - & > article { - gap: var(--pi-spacing-#{$gap}); - } - } -} - -// Uniqual sizes -@mixin textViewerUnequalFontSize($large-font-size, $small-font-size, $gap) { - label { - font: { - size: var(--pi-font-size-#{$large-font-size}); - } - } - span, - a { - font: { - size: var(--pi-font-size-#{$small-font-size}); - } - } - &[class*='pi-text-viewer__flex-direction--column'] { - & > article { - gap: var(--pi-spacing-#{$gap}); - } - } -} -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Font size - // Equal sizes - &.pi-text-viewer__font-size--xxs { - @include textViewerEqualFontSize(xx-small, xxxx-small); - } - &.pi-text-viewer__font-size--xs { - @include textViewerEqualFontSize(x-small, xxxx-small); - } - &.pi-text-viewer__font-size--s { - @include textViewerEqualFontSize(small, xxxx-small); - } - &.pi-text-viewer__font-size--m { - @include textViewerEqualFontSize(medium, xxx-small); - } - &.pi-text-viewer__font-size--l { - @include textViewerEqualFontSize(large, xx-small); - } - &.pi-text-viewer__font-size--xl { - @include textViewerEqualFontSize(x-large, x-small); - } - &.pi-text-viewer__font-size--xxl { - @include textViewerEqualFontSize(xx-large, small); - } - &.pi-text-viewer__font-size--xxxl { - @include textViewerEqualFontSize(xxx-large, medium); - } - - // Unequal sizes - // xxs-xs - &.pi-text-viewer__font-size--xxs-xs { - @include textViewerUnequalFontSize(xx-small, x-small, xxxx-small); - } - // xxs-s - &.pi-text-viewer__font-size--xxs-s { - @include textViewerUnequalFontSize(xx-small, small, xxxx-small); - } - // xs-xxs - &.pi-text-viewer__font-size--xs-xxs { - @include textViewerUnequalFontSize(x-small, xx-small, xxxx-small); - } - // s-xs - &.pi-text-viewer__font-size--s-xs { - @include textViewerUnequalFontSize(small, x-small, xxxx-small); - } - // s-xxs - &.pi-text-viewer__font-size--s-xxs { - @include textViewerUnequalFontSize(small, xx-small, xxxx-small); - } - // xs-s - &.pi-text-viewer__font-size--xs-s { - @include textViewerUnequalFontSize(x-small, small, xxxx-small); - } - // xs-m - &.pi-text-viewer__font-size--xs-m { - @include textViewerUnequalFontSize(x-small, medium, xxxx-small); - } - // xs-m - &.pi-text-viewer__font-size--xs-l { - @include textViewerUnequalFontSize(x-small, large, xxxx-small); - } - // xl-m - &.pi-text-viewer__font-size--xl-m { - @include textViewerUnequalFontSize(x-large, medium, xxx-small); - } - // m-xs - &.pi-text-viewer__font-size--m-xs { - @include textViewerUnequalFontSize(medium, x-small, xxxx-small); - } - // m-xl - &.pi-text-viewer__font-size--m-xl { - @include textViewerUnequalFontSize(medium, x-large, xx-small); - } - // m-xxl - &.pi-text-viewer__font-size--m-xxl { - @include textViewerUnequalFontSize(medium, xx-large, x-small); - } - // s-l - &.pi-text-viewer__font-size--s-l { - @include textViewerUnequalFontSize(small, large, xxxx-small); - } - // l-s - &.pi-text-viewer__font-size--l-xs { - @include textViewerUnequalFontSize(large, x-small, xxxx-small); - } - // l-s - &.pi-text-viewer__font-size--l-s { - @include textViewerUnequalFontSize(large, small, xxxx-small); - } - // xl-s - &.pi-text-viewer__font-size--xl-s { - @include textViewerUnequalFontSize(x-large, small, xxxx-small); - } - // xxl-s - &.pi-text-viewer__font-size--xxl-s { - @include textViewerUnequalFontSize(xx-large, small, xxx-small); - } - - // xxl-xs - &.pi-text-viewer__font-size--xxl-xs { - @include textViewerUnequalFontSize(xx-large, x-small, xx-small); - } - // s-xl - &.pi-text-viewer__font-size--s-xl { - @include textViewerUnequalFontSize(small, x-large, xxx-small); - } - // s-xxl - &.pi-text-viewer__font-size--s-xxl { - @include textViewerUnequalFontSize(small, xx-large, x-small); - } - // m-xxl - &.pi-text-viewer__font-size--m-xxl { - @include textViewerUnequalFontSize(medium, xx-large, small); - } - // xl-xs - &.pi-text-viewer__font-size--xl-xs { - @include textViewerUnequalFontSize(x-large, x-small, xxx-small); - } - // xs-xl - &.pi-text-viewer__font-size--xs-xl { - @include textViewerUnequalFontSize(x-small, x-large, xxx-small); - } - - // m-xxl - &.pi-text-viewer__font-size--m-xxl { - @include textViewerUnequalFontSize(medium, xx-large, medium); - } - // xxl-m - &.pi-text-viewer__font-size--xxl-m { - @include textViewerUnequalFontSize(xx-large, medium, medium); - } - - // xs-xxxl - &.pi-text-viewer__font-size--xs-xxxl { - @include textViewerUnequalFontSize(x-small, xxx-large, medium); - } - // xxxl-xs - &.pi-text-viewer__font-size--xxxl-xs { - @include textViewerUnequalFontSize(xxx-large, x-small, medium); - } - - // s-xxxl - &.pi-text-viewer__font-size--s-xxxl { - @include textViewerUnequalFontSize(small, xxx-large, medium); - } - // xxxl-s - &.pi-text-viewer__font-size--xxxl-s { - @include textViewerUnequalFontSize(xxx-large, small, medium); - } - - // m-xxxl - &.pi-text-viewer__font-size--m-xxxl { - @include textViewerUnequalFontSize(medium, xxx-large, medium); - } - // xxxl-m - &.pi-text-viewer__font-size--xxxl-m { - @include textViewerUnequalFontSize(xxx-large, medium, medium); - } - - // l-xxxl - &.pi-text-viewer__font-size--l-xxxl { - @include textViewerUnequalFontSize(large, xxx-large, medium); - } - // xxxl-l - &.pi-text-viewer__font-size--xxxl-l { - @include textViewerUnequalFontSize(xxx-large, large, medium); - } - // xl-xxxl - &.pi-text-viewer__font-size--xl-xxxl { - @include textViewerUnequalFontSize(x-large, xxx-large, medium); - } - // xxxl-xl - &.pi-text-viewer__font-size--xxxl-xl { - @include textViewerUnequalFontSize(xxx-large, x-large, medium); - } - - // xxl-xxxl - &.pi-text-viewer__font-size--xxl-xxxl { - @include textViewerUnequalFontSize(xx-large, xxx-large, medium); - } - // xxxl-xxl - &.pi-text-viewer__font-size--xxxl-xxl { - @include textViewerUnequalFontSize(xxx-large, xx-large, medium); - } - } -} +// Equal sizes +@mixin textViewerEqualFontSize($font-size, $gap) { + label, + a, + span { + font: { + size: var(--pi-font-size-#{$font-size}); + } + } + &[class*='pi-text-viewer__flex-direction--column'] { + & > article { + gap: var(--pi-spacing-#{$gap}); + } + } +} + +// Uniqual sizes +@mixin textViewerUnequalFontSize($large-font-size, $small-font-size, $gap) { + label { + font: { + size: var(--pi-font-size-#{$large-font-size}); + } + } + span, + a { + font: { + size: var(--pi-font-size-#{$small-font-size}); + } + } + &[class*='pi-text-viewer__flex-direction--column'] { + & > article { + gap: var(--pi-spacing-#{$gap}); + } + } +} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Font size + // Equal sizes + &.pi-text-viewer__font-size--xxs { + @include textViewerEqualFontSize(xx-small, xxxx-small); + } + &.pi-text-viewer__font-size--xs { + @include textViewerEqualFontSize(x-small, xxxx-small); + } + &.pi-text-viewer__font-size--s { + @include textViewerEqualFontSize(small, xxxx-small); + } + &.pi-text-viewer__font-size--m { + @include textViewerEqualFontSize(medium, xxx-small); + } + &.pi-text-viewer__font-size--l { + @include textViewerEqualFontSize(large, xx-small); + } + &.pi-text-viewer__font-size--xl { + @include textViewerEqualFontSize(x-large, x-small); + } + &.pi-text-viewer__font-size--xxl { + @include textViewerEqualFontSize(xx-large, small); + } + &.pi-text-viewer__font-size--xxxl { + @include textViewerEqualFontSize(xxx-large, medium); + } + + // Unequal sizes + // xxs-xs + &.pi-text-viewer__font-size--xxs-xs { + @include textViewerUnequalFontSize(xx-small, x-small, xxxx-small); + } + // xxs-s + &.pi-text-viewer__font-size--xxs-s { + @include textViewerUnequalFontSize(xx-small, small, xxxx-small); + } + // xs-xxs + &.pi-text-viewer__font-size--xs-xxs { + @include textViewerUnequalFontSize(x-small, xx-small, xxxx-small); + } + // s-xs + &.pi-text-viewer__font-size--s-xs { + @include textViewerUnequalFontSize(small, x-small, xxxx-small); + } + // s-xxs + &.pi-text-viewer__font-size--s-xxs { + @include textViewerUnequalFontSize(small, xx-small, xxxx-small); + } + // xs-s + &.pi-text-viewer__font-size--xs-s { + @include textViewerUnequalFontSize(x-small, small, xxxx-small); + } + // xs-m + &.pi-text-viewer__font-size--xs-m { + @include textViewerUnequalFontSize(x-small, medium, xxxx-small); + } + // xs-m + &.pi-text-viewer__font-size--xs-l { + @include textViewerUnequalFontSize(x-small, large, xxxx-small); + } + // xl-m + &.pi-text-viewer__font-size--xl-m { + @include textViewerUnequalFontSize(x-large, medium, xxx-small); + } + // m-xs + &.pi-text-viewer__font-size--m-xs { + @include textViewerUnequalFontSize(medium, x-small, xxxx-small); + } + // m-xl + &.pi-text-viewer__font-size--m-xl { + @include textViewerUnequalFontSize(medium, x-large, xx-small); + } + // m-xxl + &.pi-text-viewer__font-size--m-xxl { + @include textViewerUnequalFontSize(medium, xx-large, x-small); + } + // s-l + &.pi-text-viewer__font-size--s-l { + @include textViewerUnequalFontSize(small, large, xxxx-small); + } + // l-s + &.pi-text-viewer__font-size--l-xs { + @include textViewerUnequalFontSize(large, x-small, xxxx-small); + } + // l-s + &.pi-text-viewer__font-size--l-s { + @include textViewerUnequalFontSize(large, small, xxxx-small); + } + // xl-s + &.pi-text-viewer__font-size--xl-s { + @include textViewerUnequalFontSize(x-large, small, xxxx-small); + } + // xxl-s + &.pi-text-viewer__font-size--xxl-s { + @include textViewerUnequalFontSize(xx-large, small, xxx-small); + } + + // xxl-xs + &.pi-text-viewer__font-size--xxl-xs { + @include textViewerUnequalFontSize(xx-large, x-small, xx-small); + } + // s-xl + &.pi-text-viewer__font-size--s-xl { + @include textViewerUnequalFontSize(small, x-large, xxx-small); + } + // s-xxl + &.pi-text-viewer__font-size--s-xxl { + @include textViewerUnequalFontSize(small, xx-large, x-small); + } + // m-xxl + &.pi-text-viewer__font-size--m-xxl { + @include textViewerUnequalFontSize(medium, xx-large, small); + } + // xl-xs + &.pi-text-viewer__font-size--xl-xs { + @include textViewerUnequalFontSize(x-large, x-small, xxx-small); + } + // xs-xl + &.pi-text-viewer__font-size--xs-xl { + @include textViewerUnequalFontSize(x-small, x-large, xxx-small); + } + + // m-xxl + &.pi-text-viewer__font-size--m-xxl { + @include textViewerUnequalFontSize(medium, xx-large, medium); + } + // xxl-m + &.pi-text-viewer__font-size--xxl-m { + @include textViewerUnequalFontSize(xx-large, medium, medium); + } + + // xs-xxxl + &.pi-text-viewer__font-size--xs-xxxl { + @include textViewerUnequalFontSize(x-small, xxx-large, medium); + } + // xxxl-xs + &.pi-text-viewer__font-size--xxxl-xs { + @include textViewerUnequalFontSize(xxx-large, x-small, medium); + } + + // s-xxxl + &.pi-text-viewer__font-size--s-xxxl { + @include textViewerUnequalFontSize(small, xxx-large, medium); + } + // xxxl-s + &.pi-text-viewer__font-size--xxxl-s { + @include textViewerUnequalFontSize(xxx-large, small, medium); + } + + // m-xxxl + &.pi-text-viewer__font-size--m-xxxl { + @include textViewerUnequalFontSize(medium, xxx-large, medium); + } + // xxxl-m + &.pi-text-viewer__font-size--xxxl-m { + @include textViewerUnequalFontSize(xxx-large, medium, medium); + } + + // l-xxxl + &.pi-text-viewer__font-size--l-xxxl { + @include textViewerUnequalFontSize(large, xxx-large, medium); + } + // xxxl-l + &.pi-text-viewer__font-size--xxxl-l { + @include textViewerUnequalFontSize(xxx-large, large, medium); + } + // xl-xxxl + &.pi-text-viewer__font-size--xl-xxxl { + @include textViewerUnequalFontSize(x-large, xxx-large, medium); + } + // xxxl-xl + &.pi-text-viewer__font-size--xxxl-xl { + @include textViewerUnequalFontSize(xxx-large, x-large, medium); + } + + // xxl-xxxl + &.pi-text-viewer__font-size--xxl-xxxl { + @include textViewerUnequalFontSize(xx-large, xxx-large, medium); + } + // xxxl-xxl + &.pi-text-viewer__font-size--xxxl-xxl { + @include textViewerUnequalFontSize(xxx-large, xx-large, medium); + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_font-style.scss b/libs/ui/src/lib/ui/text/styles/_font-style.scss index 5aac458..a508f5e 100644 --- a/libs/ui/src/lib/ui/text/styles/_font-style.scss +++ b/libs/ui/src/lib/ui/text/styles/_font-style.scss @@ -1,32 +1,32 @@ -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Font style - &.pi-text-viewer__font-style--italic { - label, - span, - a { - font: { - style: italic; - } - } - } - - &.pi-text-viewer__font-style--normal-italic { - span, - a { - font: { - style: italic; - } - } - } - - &.pi-text-viewer__font-style--italic-normal { - label { - font: { - style: italic; - } - } - } - } -} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Font style + &.pi-text-viewer__font-style--italic { + label, + span, + a { + font: { + style: italic; + } + } + } + + &.pi-text-viewer__font-style--normal-italic { + span, + a { + font: { + style: italic; + } + } + } + + &.pi-text-viewer__font-style--italic-normal { + label { + font: { + style: italic; + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_font-weight.scss b/libs/ui/src/lib/ui/text/styles/_font-weight.scss index 185ad22..642d2b7 100644 --- a/libs/ui/src/lib/ui/text/styles/_font-weight.scss +++ b/libs/ui/src/lib/ui/text/styles/_font-weight.scss @@ -1,103 +1,103 @@ -// Equal weight -@mixin textViewerEqualFontWeight($weight) { - label, - span, - a { - font: { - weight: $weight; - } - } -} -// Unequal weights -@mixin textViewerUnequalFontWeight($label-weight, $value-weight) { - label { - font: { - weight: $label-weight; - } - } - span, - a { - font: { - weight: $value-weight; - } - } -} - -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Equal weights - // Light 300 - &.pi-text-viewer__font-weight--300 { - @include textViewerEqualFontWeight(300); - } - // Normal 400 - &.pi-text-viewer__font-weight--400 { - @include textViewerEqualFontWeight(400); - } - // Medium 600 - &.pi-text-viewer__font-weight--600 { - @include textViewerEqualFontWeight(600); - } - // Bold 700 - &.pi-text-viewer__font-weight--700 { - @include textViewerEqualFontWeight(700); - } - // Black 800 - &.pi-text-viewer__font-weight--800 { - @include textViewerEqualFontWeight(800); - } - - // Unequal weights - // Light-Normal 300-400 - &.pi-text-viewer__font-weight--300-400 { - @include textViewerUnequalFontWeight(300, 400); - } - // Light-Medium 300-600 - &.pi-text-viewer__font-weight--300-600 { - @include textViewerUnequalFontWeight(300, 600); - } - // Light-Medium 600-300 - &.pi-text-viewer__font-weight--600-300 { - @include textViewerUnequalFontWeight(600, 300); - } - // Normal-Light 400-300 - &.pi-text-viewer__font-weight--400-300 { - @include textViewerUnequalFontWeight(400, 300); - } - - // Light-Bold 300-700 - &.pi-text-viewer__font-weight--300-700 { - @include textViewerUnequalFontWeight(300, 700); - } - // Bold Light 700-300 - &.pi-text-viewer__font-weight--700-300 { - @include textViewerUnequalFontWeight(700, 300); - } - // Light-Black 300-800 - &.pi-text-viewer__font-weight--300-800 { - @include textViewerUnequalFontWeight(300, 800); - } - // Black Light 800-300 - &.pi-text-viewer__font-weight--800-300 { - @include textViewerUnequalFontWeight(800, 300); - } - // Normal-Bold 400-700 - &.pi-text-viewer__font-weight--400-700 { - @include textViewerUnequalFontWeight(400, 700); - } - // Bold-Normal 700-400 - &.pi-text-viewer__font-weight--700-400 { - @include textViewerUnequalFontWeight(700, 400); - } - - // Normal-Black 400-800 - &.pi-text-viewer__font-weight--400-800 { - @include textViewerUnequalFontWeight(400, 800); - } - // Black-Normal 800-400 - &.pi-text-viewer__font-weight--800-400 { - @include textViewerUnequalFontWeight(800, 400); - } - } -} +// Equal weight +@mixin textViewerEqualFontWeight($weight) { + label, + span, + a { + font: { + weight: $weight; + } + } +} +// Unequal weights +@mixin textViewerUnequalFontWeight($label-weight, $value-weight) { + label { + font: { + weight: $label-weight; + } + } + span, + a { + font: { + weight: $value-weight; + } + } +} + +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Equal weights + // Light 300 + &.pi-text-viewer__font-weight--300 { + @include textViewerEqualFontWeight(300); + } + // Normal 400 + &.pi-text-viewer__font-weight--400 { + @include textViewerEqualFontWeight(400); + } + // Medium 600 + &.pi-text-viewer__font-weight--600 { + @include textViewerEqualFontWeight(600); + } + // Bold 700 + &.pi-text-viewer__font-weight--700 { + @include textViewerEqualFontWeight(700); + } + // Black 800 + &.pi-text-viewer__font-weight--800 { + @include textViewerEqualFontWeight(800); + } + + // Unequal weights + // Light-Normal 300-400 + &.pi-text-viewer__font-weight--300-400 { + @include textViewerUnequalFontWeight(300, 400); + } + // Light-Medium 300-600 + &.pi-text-viewer__font-weight--300-600 { + @include textViewerUnequalFontWeight(300, 600); + } + // Light-Medium 600-300 + &.pi-text-viewer__font-weight--600-300 { + @include textViewerUnequalFontWeight(600, 300); + } + // Normal-Light 400-300 + &.pi-text-viewer__font-weight--400-300 { + @include textViewerUnequalFontWeight(400, 300); + } + + // Light-Bold 300-700 + &.pi-text-viewer__font-weight--300-700 { + @include textViewerUnequalFontWeight(300, 700); + } + // Bold Light 700-300 + &.pi-text-viewer__font-weight--700-300 { + @include textViewerUnequalFontWeight(700, 300); + } + // Light-Black 300-800 + &.pi-text-viewer__font-weight--300-800 { + @include textViewerUnequalFontWeight(300, 800); + } + // Black Light 800-300 + &.pi-text-viewer__font-weight--800-300 { + @include textViewerUnequalFontWeight(800, 300); + } + // Normal-Bold 400-700 + &.pi-text-viewer__font-weight--400-700 { + @include textViewerUnequalFontWeight(400, 700); + } + // Bold-Normal 700-400 + &.pi-text-viewer__font-weight--700-400 { + @include textViewerUnequalFontWeight(700, 400); + } + + // Normal-Black 400-800 + &.pi-text-viewer__font-weight--400-800 { + @include textViewerUnequalFontWeight(400, 800); + } + // Black-Normal 800-400 + &.pi-text-viewer__font-weight--800-400 { + @include textViewerUnequalFontWeight(800, 400); + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_icon-appearance.scss b/libs/ui/src/lib/ui/text/styles/_icon-appearance.scss index c9bb042..bdb0f8c 100644 --- a/libs/ui/src/lib/ui/text/styles/_icon-appearance.scss +++ b/libs/ui/src/lib/ui/text/styles/_icon-appearance.scss @@ -1,12 +1,12 @@ -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Icon style - &.pi-text-viewer__icon-appearance--fill-stroke, - &.pi-text-viewer__icon-appearance--stroke { - .mat-icon { - border: 1px solid; - } - } - } -} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Icon style + &.pi-text-viewer__icon-appearance--fill-stroke, + &.pi-text-viewer__icon-appearance--stroke { + .mat-icon { + border: 1px solid; + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_icon-color.scss b/libs/ui/src/lib/ui/text/styles/_icon-color.scss index 0c311b5..a34c13b 100644 --- a/libs/ui/src/lib/ui/text/styles/_icon-color.scss +++ b/libs/ui/src/lib/ui/text/styles/_icon-color.scss @@ -1,100 +1,100 @@ -// Default icon -@mixin textViewerDefaultIconColor($color) { - & > .mat-icon { - color: var(--pi-color-#{$color}); - } -} - -// Stroke icon -@mixin textViewerFillStrokeIconColor($color) { - &.pi-text-viewer__icon-appearance--fill-stroke { - .mat-icon { - color: var(--pi-color-#{$color}); - background-color: var(--pi-color-#{$color}-25); - border-color: var(--pi-color-#{$color}-75); - } - } -} - -@mixin textViewerDefaultStrokeIconColor($color) { - &.pi-text-viewer__icon-appearance--stroke { - .mat-icon { - color: var(--pi-color-#{$color}); - border-color: var(--pi-color-#{$color}-300); - } - } -} - -// Fill icon -@mixin textViewerFillIconColor($color) { - &.pi-text-viewer__icon-appearance--fill { - .mat-icon { - color: var(--pi-color-#{$color}); - background-color: var(--pi-color-#{$color}-50); - } - } -} - -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Primary - &.pi-text-viewer__icon-color--primary { - @include textViewerDefaultIconColor(primary); - @include textViewerDefaultStrokeIconColor(primary); - @include textViewerFillStrokeIconColor(primary); - @include textViewerFillIconColor(primary); - } - // Accent - &.pi-text-viewer__icon-color--accent { - @include textViewerDefaultIconColor(accent); - @include textViewerDefaultStrokeIconColor(accent); - @include textViewerFillStrokeIconColor(accent); - @include textViewerFillIconColor(accent); - } - // Warn - &.pi-text-viewer__icon-color--warn { - @include textViewerDefaultIconColor(warn); - @include textViewerDefaultStrokeIconColor(warn); - @include textViewerFillStrokeIconColor(warn); - @include textViewerFillIconColor(warn); - } - // Highlighted - &.pi-text-viewer__icon-color--highlighted { - @include textViewerDefaultIconColor(highlighted); - @include textViewerDefaultStrokeIconColor(highlighted); - @include textViewerFillStrokeIconColor(highlighted); - @include textViewerFillIconColor(highlighted); - } - // success - &.pi-text-viewer__icon-color--success { - @include textViewerDefaultIconColor(success); - @include textViewerDefaultStrokeIconColor(success); - @include textViewerFillStrokeIconColor(success); - @include textViewerFillIconColor(success); - } - // grey - &.pi-text-viewer__icon-color--grey { - @include textViewerDefaultIconColor(grey-300); - @include textViewerDefaultStrokeIconColor(grey); - @include textViewerFillStrokeIconColor(grey); - @include textViewerFillIconColor(grey); - } - // black - &.pi-text-viewer__icon-color--black { - @include textViewerDefaultStrokeIconColor(grey-900); - @include textViewerDefaultIconColor(grey-900); - } - - // White - &.pi-text-viewer__icon-color--white { - @include textViewerDefaultIconColor(white); - &.pi-text-viewer__icon-appearance--fill-stroke { - .mat-icon { - background-color: var(--pi-color-white); - color: var(--pi-color-primary); - } - } - } - } -} +// Default icon +@mixin textViewerDefaultIconColor($color) { + & > .mat-icon { + color: var(--pi-color-#{$color}); + } +} + +// Stroke icon +@mixin textViewerFillStrokeIconColor($color) { + &.pi-text-viewer__icon-appearance--fill-stroke { + .mat-icon { + color: var(--pi-color-#{$color}); + background-color: var(--pi-color-#{$color}-25); + border-color: var(--pi-color-#{$color}-75); + } + } +} + +@mixin textViewerDefaultStrokeIconColor($color) { + &.pi-text-viewer__icon-appearance--stroke { + .mat-icon { + color: var(--pi-color-#{$color}); + border-color: var(--pi-color-#{$color}-300); + } + } +} + +// Fill icon +@mixin textViewerFillIconColor($color) { + &.pi-text-viewer__icon-appearance--fill { + .mat-icon { + color: var(--pi-color-#{$color}); + background-color: var(--pi-color-#{$color}-50); + } + } +} + +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Primary + &.pi-text-viewer__icon-color--primary { + @include textViewerDefaultIconColor(primary); + @include textViewerDefaultStrokeIconColor(primary); + @include textViewerFillStrokeIconColor(primary); + @include textViewerFillIconColor(primary); + } + // Accent + &.pi-text-viewer__icon-color--accent { + @include textViewerDefaultIconColor(accent); + @include textViewerDefaultStrokeIconColor(accent); + @include textViewerFillStrokeIconColor(accent); + @include textViewerFillIconColor(accent); + } + // Warn + &.pi-text-viewer__icon-color--warn { + @include textViewerDefaultIconColor(warn); + @include textViewerDefaultStrokeIconColor(warn); + @include textViewerFillStrokeIconColor(warn); + @include textViewerFillIconColor(warn); + } + // Highlighted + &.pi-text-viewer__icon-color--highlighted { + @include textViewerDefaultIconColor(highlighted); + @include textViewerDefaultStrokeIconColor(highlighted); + @include textViewerFillStrokeIconColor(highlighted); + @include textViewerFillIconColor(highlighted); + } + // success + &.pi-text-viewer__icon-color--success { + @include textViewerDefaultIconColor(success); + @include textViewerDefaultStrokeIconColor(success); + @include textViewerFillStrokeIconColor(success); + @include textViewerFillIconColor(success); + } + // grey + &.pi-text-viewer__icon-color--grey { + @include textViewerDefaultIconColor(grey-300); + @include textViewerDefaultStrokeIconColor(grey); + @include textViewerFillStrokeIconColor(grey); + @include textViewerFillIconColor(grey); + } + // black + &.pi-text-viewer__icon-color--black { + @include textViewerDefaultStrokeIconColor(grey-900); + @include textViewerDefaultIconColor(grey-900); + } + + // White + &.pi-text-viewer__icon-color--white { + @include textViewerDefaultIconColor(white); + &.pi-text-viewer__icon-appearance--fill-stroke { + .mat-icon { + background-color: var(--pi-color-white); + color: var(--pi-color-primary); + } + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_icon-size.scss b/libs/ui/src/lib/ui/text/styles/_icon-size.scss index 6ca69b5..777c82e 100644 --- a/libs/ui/src/lib/ui/text/styles/_icon-size.scss +++ b/libs/ui/src/lib/ui/text/styles/_icon-size.scss @@ -1,70 +1,70 @@ -// Default icon -@mixin textViewerIconSize($size, $gap) { - & > .mat-icon { - height: var(--pi-spacing-#{$size}); - width: var(--pi-spacing-#{$size}); - } - gap: var(--pi-spacing-#{$gap}); -} - -// Stroke icon -@mixin textViewerFillStrokeIconSize($size, $padding, $border-radius) { - &.pi-text-viewer__icon-appearance--fill, - &.pi-text-viewer__icon-appearance--fill-stroke { - .mat-icon { - height: var(--pi-spacing-#{$size}); - width: var(--pi-spacing-#{$size}); - padding: var(--pi-spacing-#{$padding}); - border-radius: var(--pi-border-radius-#{$border-radius}); - } - } -} - -@mixin textViewerDefaultStrokeIconSize($size, $padding, $border-radius) { - &.pi-text-viewer__icon-appearance--stroke { - .mat-icon { - height: var(--pi-spacing-#{$size}); - width: var(--pi-spacing-#{$size}); - padding: var(--pi-spacing-#{$padding}); - border-radius: var(--pi-border-radius-#{$border-radius}); - } - } -} - -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Icon size - &.pi-text-viewer__icon-size--x-small { - @include textViewerIconSize(x-small, xx-small); - @include textViewerDefaultStrokeIconSize(medium, xxxxx-small, medium); - .pi-text-viewer__icon-appearance--stroke { - label { - display: flex; - } - } - } - &.pi-text-viewer__icon-size--small { - @include textViewerIconSize(medium, xx-small); - } - &.pi-text-viewer__icon-size--medium { - @include textViewerIconSize(large, small); - } - &.pi-text-viewer__icon-size--large { - @include textViewerFillStrokeIconSize(xxx-large, xx-small, medium); - @include textViewerIconSize(x-large, medium); - &.pi-text-viewer__font-weight--300-700, - &.pi-text-viewer__font-weight--700-300, - &.pi-text-viewer__font-weight--300-600, - &.pi-text-viewer__font-weight--600-300 { - & > .mat-icon { - min-width: var(--pi-spacing-xxx-large); - } - } - } - &.pi-text-viewer__icon-size--x-large { - @include textViewerFillStrokeIconSize(xxxx-large, small, medium); - @include textViewerIconSize(xx-large, medium); - } - } -} +// Default icon +@mixin textViewerIconSize($size, $gap) { + & > .mat-icon { + height: var(--pi-spacing-#{$size}); + width: var(--pi-spacing-#{$size}); + } + gap: var(--pi-spacing-#{$gap}); +} + +// Stroke icon +@mixin textViewerFillStrokeIconSize($size, $padding, $border-radius) { + &.pi-text-viewer__icon-appearance--fill, + &.pi-text-viewer__icon-appearance--fill-stroke { + .mat-icon { + height: var(--pi-spacing-#{$size}); + width: var(--pi-spacing-#{$size}); + padding: var(--pi-spacing-#{$padding}); + border-radius: var(--pi-border-radius-#{$border-radius}); + } + } +} + +@mixin textViewerDefaultStrokeIconSize($size, $padding, $border-radius) { + &.pi-text-viewer__icon-appearance--stroke { + .mat-icon { + height: var(--pi-spacing-#{$size}); + width: var(--pi-spacing-#{$size}); + padding: var(--pi-spacing-#{$padding}); + border-radius: var(--pi-border-radius-#{$border-radius}); + } + } +} + +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Icon size + &.pi-text-viewer__icon-size--x-small { + @include textViewerIconSize(x-small, xx-small); + @include textViewerDefaultStrokeIconSize(medium, xxxxx-small, medium); + .pi-text-viewer__icon-appearance--stroke { + label { + display: flex; + } + } + } + &.pi-text-viewer__icon-size--small { + @include textViewerIconSize(medium, xx-small); + } + &.pi-text-viewer__icon-size--medium { + @include textViewerIconSize(large, small); + } + &.pi-text-viewer__icon-size--large { + @include textViewerFillStrokeIconSize(xxx-large, xx-small, medium); + @include textViewerIconSize(x-large, medium); + &.pi-text-viewer__font-weight--300-700, + &.pi-text-viewer__font-weight--700-300, + &.pi-text-viewer__font-weight--300-600, + &.pi-text-viewer__font-weight--600-300 { + & > .mat-icon { + min-width: var(--pi-spacing-xxx-large); + } + } + } + &.pi-text-viewer__icon-size--x-large { + @include textViewerFillStrokeIconSize(xxxx-large, small, medium); + @include textViewerIconSize(xx-large, medium); + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/_justify.scss b/libs/ui/src/lib/ui/text/styles/_justify.scss index 7de4066..9193772 100644 --- a/libs/ui/src/lib/ui/text/styles/_justify.scss +++ b/libs/ui/src/lib/ui/text/styles/_justify.scss @@ -1,43 +1,43 @@ -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - // Justify - // Flex start - &.pi-text-viewer__justify--flex-start { - justify-content: flex-start; - } - // Flex end - &.pi-text-viewer__justify--flex-end { - justify-content: flex-end; - text-align: right; - } - // Center - &.pi-text-viewer__justify--center { - justify-content: center; - & > article { - text-align: center; - } - } - // Space between - &.pi-text-viewer__justify--space-between { - justify-content: space-between; - width: 100%; - & > article { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - } - } - // Space evenly - &.pi-text-viewer__justify--space-evenly { - justify-content: space-evenly; - width: 100%; - & > article { - display: flex; - justify-content: space-evenly; - width: 100%; - } - } - } -} +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + // Justify + // Flex start + &.pi-text-viewer__justify--flex-start { + justify-content: flex-start; + } + // Flex end + &.pi-text-viewer__justify--flex-end { + justify-content: flex-end; + text-align: right; + } + // Center + &.pi-text-viewer__justify--center { + justify-content: center; + & > article { + text-align: center; + } + } + // Space between + &.pi-text-viewer__justify--space-between { + justify-content: space-between; + width: 100%; + & > article { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + } + // Space evenly + &.pi-text-viewer__justify--space-evenly { + justify-content: space-evenly; + width: 100%; + & > article { + display: flex; + justify-content: space-evenly; + width: 100%; + } + } + } +} diff --git a/libs/ui/src/lib/ui/text/styles/base-text-viewer.component.scss b/libs/ui/src/lib/ui/text/styles/base-text-viewer.component.scss index 0cf0093..62a93c6 100644 --- a/libs/ui/src/lib/ui/text/styles/base-text-viewer.component.scss +++ b/libs/ui/src/lib/ui/text/styles/base-text-viewer.component.scss @@ -1,35 +1,35 @@ -@use 'alignment'; -@use 'border-type'; -@use 'flex-direction'; -@use 'font-color'; -@use 'font-size'; -@use 'font-style'; -@use 'font-weight'; -@use 'icon-color'; -@use 'icon-size'; -@use 'icon-appearance'; -@use 'justify'; - -// Common text viewer styles -:host { - &.pi-text-viewer, - &.pi-text-viewer-link { - display: flex; - - label { - line-height: 115%; - } - span { - line-height: 130%; - } - - & > .mat-icon { - display: flex; - flex: 0 0 auto; - } - - label { - margin-bottom: unset; - } - } -} +@use 'alignment'; +@use 'border-type'; +@use 'flex-direction'; +@use 'font-color'; +@use 'font-size'; +@use 'font-style'; +@use 'font-weight'; +@use 'icon-color'; +@use 'icon-size'; +@use 'icon-appearance'; +@use 'justify'; + +// Common text viewer styles +:host { + &.pi-text-viewer, + &.pi-text-viewer-link { + display: flex; + + label { + line-height: 115%; + } + span { + line-height: 130%; + } + + & > .mat-icon { + display: flex; + flex: 0 0 auto; + } + + label { + margin-bottom: unset; + } + } +} diff --git a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html index b63d427..4ca6ea2 100644 --- a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html +++ b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html @@ -1,11 +1,11 @@ -
- - {{ isLongText ? (text() | slice : 0 : characterLimit()) : text() - }}... - -
{{ text() | slice : characterLimit() : text()?.length }}
-
- - +
+ + {{ isLongText ? (text() | slice : 0 : characterLimit()) : text() + }}... + +
{{ text() | slice : characterLimit() : text()?.length }}
+
+ + diff --git a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.scss b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.scss index 3cafccd..bd425a2 100644 --- a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.scss +++ b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.scss @@ -1,15 +1,15 @@ -:host { - span { - &:nth-child(3) { - display: inline-block; - } - } - & > article { - & > section { - display: inline; - } - } - & > button { - margin-top: var(--pi-spacing-medium); - } -} +:host { + span { + &:nth-child(3) { + display: inline-block; + } + } + & > article { + & > section { + display: inline; + } + } + & > button { + margin-top: var(--pi-spacing-medium); + } +} diff --git a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.ts b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.ts index 9e90c51..54f1921 100644 --- a/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.ts +++ b/libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.ts @@ -1,8 +1,8 @@ -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { DURATION, transitionAnimation } from '../../../styles'; import { NgIf, SlicePipe } from '@angular/common'; -import { PiGhostButtonDirective } from '../../button/button.directive'; - +import { PiGhostButtonDirective } from '../../button/button.directive'; + @Component({ selector: 'pi-text-area-expansion', templateUrl: './text-area-expansion.component.html', @@ -14,18 +14,18 @@ import { PiGhostButtonDirective } from '../../button/button.directive'; PiGhostButtonDirective, SlicePipe, ], -}) -export class PiTextAreaExpansionComponent { - readonly text = input(''); - readonly characterLimit = input(50); - - isCollapsed = true; - - get isLongText(): boolean { - return this.text()?.length > this.characterLimit(); - } - - alterToggle(): void { - this.isCollapsed = !this.isCollapsed; - } -} +}) +export class PiTextAreaExpansionComponent { + readonly text = input(''); + readonly characterLimit = input(50); + + isCollapsed = true; + + get isLongText(): boolean { + return this.text()?.length > this.characterLimit(); + } + + alterToggle(): void { + this.isCollapsed = !this.isCollapsed; + } +} diff --git a/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.html b/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.html index a9543f7..2ed745b 100644 --- a/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.html +++ b/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.html @@ -1,25 +1,25 @@ - - + + diff --git a/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.scss b/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.scss index 7000c75..220c1fc 100644 --- a/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.scss +++ b/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.scss @@ -1,98 +1,98 @@ -@mixin textViewerLinkColor($color) { - &:not(:hover) { - a { - color: var(--pi-color-#{$color}); - span, - .mat-icon { - color: var(--pi-color-#{$color}); - } - } - } - - &:hover { - a { - text-decoration: underline; - color: var(--pi-color-#{$color}-900); - span, - .mat-icon { - color: var(--pi-color-#{$color}-900); - } - } - } -} - -@mixin textViewerLinkGrey { - &:not(:hover) { - a { - color: var(--pi-color-grey-300); - span, - .mat-icon { - color: var(--pi-color-grey-300); - } - } - } - - &:hover { - a { - color: var(--pi-color-grey); - span, - .mat-icon { - color: var(--pi-color-grey); - } - } - } -} - -:host { - display: flex; - gap: var(--pi-spacing-x-small); - - &:hover { - transition: var(--pi-animation); - a, - label, - .mat-icon { - cursor: pointer; - } - a { - text-decoration: underline; - } - } - label { - margin-bottom: unset; - color: var(--pi-color-grey-900); - } - label + a { - margin-left: var(--pi-spacing-xxx-small); - } - - &:not(.pi-color__white) { - // Icon & Link Color - // Default & Primary - &:not(.pi-text-viewer-link__color--accent):not(.pi-text-viewer-link__color--highlighted):not( - .pi-text-viewer-link__color--white - ):not(.pi-text-viewer-link__color--grey) { - @include textViewerLinkColor(primary); - } - &.pi-text-viewer-link__color--primary { - @include textViewerLinkColor(primary); - } - // Accent - &.pi-text-viewer-link__color--accent { - @include textViewerLinkColor(accent); - } - // Highlighted - &.pi-text-viewer-link__color--highlighted { - @include textViewerLinkColor(highlighted); - } - } - // white - &.pi-text-viewer-link__color--white { - @include textViewerLinkColor(white); - } - - // grey - &.pi-text-viewer-link__color--grey { - @include textViewerLinkGrey; - } -} +@mixin textViewerLinkColor($color) { + &:not(:hover) { + a { + color: var(--pi-color-#{$color}); + span, + .mat-icon { + color: var(--pi-color-#{$color}); + } + } + } + + &:hover { + a { + text-decoration: underline; + color: var(--pi-color-#{$color}-900); + span, + .mat-icon { + color: var(--pi-color-#{$color}-900); + } + } + } +} + +@mixin textViewerLinkGrey { + &:not(:hover) { + a { + color: var(--pi-color-grey-300); + span, + .mat-icon { + color: var(--pi-color-grey-300); + } + } + } + + &:hover { + a { + color: var(--pi-color-grey); + span, + .mat-icon { + color: var(--pi-color-grey); + } + } + } +} + +:host { + display: flex; + gap: var(--pi-spacing-x-small); + + &:hover { + transition: var(--pi-animation); + a, + label, + .mat-icon { + cursor: pointer; + } + a { + text-decoration: underline; + } + } + label { + margin-bottom: unset; + color: var(--pi-color-grey-900); + } + label + a { + margin-left: var(--pi-spacing-xxx-small); + } + + &:not(.pi-color__white) { + // Icon & Link Color + // Default & Primary + &:not(.pi-text-viewer-link__color--accent):not(.pi-text-viewer-link__color--highlighted):not( + .pi-text-viewer-link__color--white + ):not(.pi-text-viewer-link__color--grey) { + @include textViewerLinkColor(primary); + } + &.pi-text-viewer-link__color--primary { + @include textViewerLinkColor(primary); + } + // Accent + &.pi-text-viewer-link__color--accent { + @include textViewerLinkColor(accent); + } + // Highlighted + &.pi-text-viewer-link__color--highlighted { + @include textViewerLinkColor(highlighted); + } + } + // white + &.pi-text-viewer-link__color--white { + @include textViewerLinkColor(white); + } + + // grey + &.pi-text-viewer-link__color--grey { + @include textViewerLinkGrey; + } +} diff --git a/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.ts b/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.ts index f51c978..785a42a 100644 --- a/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.ts +++ b/libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.ts @@ -1,16 +1,16 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { Params, RouterLink, RouterLinkActive } from '@angular/router'; -import { - alignment, - display, - flexDirection, - fontSize, - justify -} from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { Params, RouterLink, RouterLinkActive } from '@angular/router'; +import { + alignment, + display, + flexDirection, + fontSize, + justify +} from '../../../styles'; import { PiBaseTextViewerComponent } from '../base-text-viewer.component'; import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-text-viewer-link', templateUrl: './text-viewer-link.component.html', @@ -24,38 +24,38 @@ import { MatIcon } from '@angular/material/icon'; RouterLink, RouterLinkActive, ], -}) -export class PiTextViewerLinkComponent extends PiBaseTextViewerComponent { - @HostBinding('class') get textViewerLinkClasses(): string { +}) +export class PiTextViewerLinkComponent extends PiBaseTextViewerComponent { + @HostBinding('class') get textViewerLinkClasses(): string { const color = this.color(); - const colorClass = color !== undefined && `pi-text-viewer-link__color--${color}`; - return ['pi-text-viewer-link', colorClass].join(' '); - } - - // Content - - readonly link = input(); - readonly route = input(); - readonly target = input('_self'); - readonly queryParams = input(); - - - // Skin - override readonly alignment = input('center'); - override readonly flexDirection = input('row'); - override readonly fontSize = input('s'); - override readonly justify = input('flex-start'); - readonly display = input('flex'); - - template: 'link' | 'route' | 'onClick'; - - getTemplate(): 'link' | 'route' | 'onClick' { - if (this.route()) { - return 'route'; - } else if (this.link()) { - return 'link'; - } else { - return 'onClick'; - } - } -} + const colorClass = color !== undefined && `pi-text-viewer-link__color--${color}`; + return ['pi-text-viewer-link', colorClass].join(' '); + } + + // Content + + readonly link = input(); + readonly route = input(); + readonly target = input('_self'); + readonly queryParams = input(); + + + // Skin + override readonly alignment = input('center'); + override readonly flexDirection = input('row'); + override readonly fontSize = input('s'); + override readonly justify = input('flex-start'); + readonly display = input('flex'); + + template!: 'link' | 'route' | 'onClick'; + + getTemplate(): 'link' | 'route' | 'onClick' { + if (this.route()) { + return 'route'; + } else if (this.link()) { + return 'link'; + } else { + return 'onClick'; + } + } +} diff --git a/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.html b/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.html index a391a33..36fec32 100644 --- a/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.html +++ b/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.html @@ -1,7 +1,7 @@ - -
- - - {{ value() }} - -
+ +
+ + + {{ value() }} + +
diff --git a/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.ts b/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.ts index ef42f52..09b0d25 100644 --- a/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.ts +++ b/libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.ts @@ -1,19 +1,19 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; - -import { ComponentFamilyClass } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; + +import { ComponentFamilyClass } from '../../../styles'; import { PiBaseTextViewerComponent } from '../base-text-viewer.component'; import { NgIf } from '@angular/common'; -import { MatIcon } from '@angular/material/icon'; - +import { MatIcon } from '@angular/material/icon'; + @Component({ selector: 'pi-text-viewer', templateUrl: './text-viewer.component.html', styleUrls: ['../styles/base-text-viewer.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatIcon], -}) -export class PiTextViewerComponent extends PiBaseTextViewerComponent { - @HostBinding('class') get textViewerClasses(): string { - return ['pi-text-viewer'].join(' '); - } -} +}) +export class PiTextViewerComponent extends PiBaseTextViewerComponent { + @HostBinding('class') get textViewerClasses(): string { + return ['pi-text-viewer'].join(' '); + } +} diff --git a/libs/ui/src/lib/ui/tooltip/index.ts b/libs/ui/src/lib/ui/tooltip/index.ts index 4654fe3..bb22235 100644 --- a/libs/ui/src/lib/ui/tooltip/index.ts +++ b/libs/ui/src/lib/ui/tooltip/index.ts @@ -1,2 +1,2 @@ - + export * from './tooltip.directive'; \ No newline at end of file diff --git a/libs/ui/src/lib/ui/tooltip/tooltip.directive.ts b/libs/ui/src/lib/ui/tooltip/tooltip.directive.ts index 792df5b..d7884e5 100644 --- a/libs/ui/src/lib/ui/tooltip/tooltip.directive.ts +++ b/libs/ui/src/lib/ui/tooltip/tooltip.directive.ts @@ -6,58 +6,58 @@ import { OnInit, Renderer2, input -} from '@angular/core'; -import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; - +} from '@angular/core'; +import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; + @Directive({ selector: '[pi-tooltip]', providers: [MatTooltip], -}) -export class PiTooltipDirective implements OnInit, OnDestroy { - @HostBinding('class') className = 'pi-tooltip-dispatcher'; - - readonly tooltipText = input(); - readonly tooltipType = input<'info' | 'error'>('info'); - readonly tooltipColor = input<'white' | 'grey' | 'dark'>('white'); - readonly tooltipPosition = input('right'); - - private mouseoverListener: () => void; - private mouseoutListener: () => void; - private clickListener: () => void; - - constructor(private tooltip: MatTooltip, private el: ElementRef, private renderer: Renderer2) {} - - ngOnInit(): void { - this.tooltip.tooltipClass = ['pi-tooltip', this.typeClass, this.colorClass].join(' '); - - this.mouseoverListener = this.renderer.listen(this.el.nativeElement, 'mouseover', () => { - this.tooltip.message = this.tooltipText(); - this.tooltip.show(); - }); - - this.mouseoutListener = this.renderer.listen(this.el.nativeElement, 'mouseout', () => { - this.tooltip.hide(); - }); - - this.clickListener = this.renderer.listen(this.el.nativeElement, 'click', (event) => { - event.stopPropagation(); - this.tooltip.toggle(); - }); - } - - ngOnDestroy() { - this.mouseoverListener(); - this.mouseoutListener(); - this.clickListener(); - } - - get colorClass(): string | undefined { +}) +export class PiTooltipDirective implements OnInit, OnDestroy { + @HostBinding('class') className = 'pi-tooltip-dispatcher'; + + readonly tooltipText = input(); + readonly tooltipType = input<'info' | 'error'>('info'); + readonly tooltipColor = input<'white' | 'grey' | 'dark'>('white'); + readonly tooltipPosition = input('right'); + + private mouseoverListener!: () => void; + private mouseoutListener!: () => void; + private clickListener!: () => void; + + constructor(private tooltip: MatTooltip, private el: ElementRef, private renderer: Renderer2) {} + + ngOnInit(): void { + this.tooltip.tooltipClass = ['pi-tooltip', this.typeClass, this.colorClass].join(' '); + + this.mouseoverListener = this.renderer.listen(this.el.nativeElement, 'mouseover', () => { + this.tooltip.message = this.tooltipText(); + this.tooltip.show(); + }); + + this.mouseoutListener = this.renderer.listen(this.el.nativeElement, 'mouseout', () => { + this.tooltip.hide(); + }); + + this.clickListener = this.renderer.listen(this.el.nativeElement, 'click', (event) => { + event.stopPropagation(); + this.tooltip.toggle(); + }); + } + + ngOnDestroy() { + this.mouseoverListener(); + this.mouseoutListener(); + this.clickListener(); + } + + get colorClass(): string | undefined { const tooltipColor = this.tooltipColor(); - return tooltipColor && `pi-tooltip__${tooltipColor}`; - } - - get typeClass(): string | undefined { + return tooltipColor && `pi-tooltip__${tooltipColor}`; + } + + get typeClass(): string | undefined { const tooltipType = this.tooltipType(); - return tooltipType && `pi-tooltip__type--${tooltipType}`; - } -} + return tooltipType && `pi-tooltip__type--${tooltipType}`; + } +} diff --git a/libs/ui/src/lib/ui/wrapper/action/action.wrapper.ts b/libs/ui/src/lib/ui/wrapper/action/action.wrapper.ts index 02c8838..f314074 100644 --- a/libs/ui/src/lib/ui/wrapper/action/action.wrapper.ts +++ b/libs/ui/src/lib/ui/wrapper/action/action.wrapper.ts @@ -1,33 +1,33 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { WrapperTypeClass } from '../../../styles'; -import { PiBaseWrapper } from '../base.wrapper'; - +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { WrapperTypeClass } from '../../../styles'; +import { PiBaseWrapper } from '../base.wrapper'; + @Component({ selector: 'pi-action-wrapper', template: '', changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class PiActionWrapper extends PiBaseWrapper { - @HostBinding('class') get classes(): string { - return [ - WrapperTypeClass.Action, - this.maxWidthClass, - this.flexDirectionClass, - this.justifyClass, - this.alignmentClass, - this.hasPaddingClass, - this.gapClass, - ].join(' '); - } - @HostBinding('class.pi-wrapper__action--position-fixed') get fixedClass(): string | boolean { - return this.position() === 'fixed'; - } - - @HostBinding('class.pi-wrapper__action--position-fixed-mobile') get fixedMobileClass(): - | string - | boolean { - return this.position() === 'fixed-mobile'; - } - - readonly position = input<'default' | 'fixed' | 'fixed-mobile'>(); -} +}) +export class PiActionWrapper extends PiBaseWrapper { + @HostBinding('class') get classes(): string { + return [ + WrapperTypeClass.Action, + this.maxWidthClass, + this.flexDirectionClass, + this.justifyClass, + this.alignmentClass, + this.hasPaddingClass, + this.gapClass, + ].join(' '); + } + @HostBinding('class.pi-wrapper__action--position-fixed') get fixedClass(): string | boolean { + return this.position() === 'fixed'; + } + + @HostBinding('class.pi-wrapper__action--position-fixed-mobile') get fixedMobileClass(): + | string + | boolean { + return this.position() === 'fixed-mobile'; + } + + readonly position = input<'default' | 'fixed' | 'fixed-mobile'>(); +} diff --git a/libs/ui/src/lib/ui/wrapper/base.wrapper.ts b/libs/ui/src/lib/ui/wrapper/base.wrapper.ts index a5dbe06..a183b75 100644 --- a/libs/ui/src/lib/ui/wrapper/base.wrapper.ts +++ b/libs/ui/src/lib/ui/wrapper/base.wrapper.ts @@ -1,79 +1,79 @@ -// Angular -import { Directive, OnInit, input } from '@angular/core'; -import { itemsWidth } from '../../styles'; - -import { - alignment, - flexDirection, - gap, - grid, - justify, - maxWidth, -} from '../../styles'; - -@Directive() -export abstract class PiBaseWrapper implements OnInit { - readonly alignment = input('center'); - readonly flexDirection = input('row'); - readonly gap = input.required(); - readonly grid = input('half'); - readonly hasBackground = input(false); - readonly hasPadding = input(false); - readonly justify = input('center'); - readonly maxWidth = input('edge-to-edge'); - readonly itemsWidth = input(); - - ngOnInit(): void { - this.alignmentClass; - this.flexDirectionClass; - this.gridClass; - this.hasBackgroundClass; - this.hasPaddingClass; - this.justifyClass; - this.itemsWidthClass; - this.maxWidthClass; - } - - protected get maxWidthClass(): string | undefined { +// Angular +import { Directive, OnInit, input } from '@angular/core'; +import { itemsWidth } from '../../styles'; + +import { + alignment, + flexDirection, + gap, + grid, + justify, + maxWidth, +} from '../../styles'; + +@Directive() +export abstract class PiBaseWrapper implements OnInit { + readonly alignment = input('center'); + readonly flexDirection = input('row'); + readonly gap = input.required(); + readonly grid = input('half'); + readonly hasBackground = input(false); + readonly hasPadding = input(false); + readonly justify = input('center'); + readonly maxWidth = input('edge-to-edge'); + readonly itemsWidth = input(); + + ngOnInit(): void { + this.alignmentClass; + this.flexDirectionClass; + this.gridClass; + this.hasBackgroundClass; + this.hasPaddingClass; + this.justifyClass; + this.itemsWidthClass; + this.maxWidthClass; + } + + protected get maxWidthClass(): string | undefined { const maxWidthValue = this.maxWidth(); - return maxWidthValue && `pi-wrapper__${maxWidthValue}`; - } - - protected get alignmentClass(): string | undefined { + return maxWidthValue && `pi-wrapper__${maxWidthValue}`; + } + + protected get alignmentClass(): string | undefined { const alignmentValue = this.alignment(); - return alignmentValue && `pi-wrapper__align-items--${alignmentValue}`; - } - - protected get justifyClass(): string | undefined { + return alignmentValue && `pi-wrapper__align-items--${alignmentValue}`; + } + + protected get justifyClass(): string | undefined { const justifyValue = this.justify(); - return justifyValue && `pi-wrapper__justify--${justifyValue}`; - } - - protected get gapClass(): string | undefined { + return justifyValue && `pi-wrapper__justify--${justifyValue}`; + } + + protected get gapClass(): string | undefined { const gapValue = this.gap(); - return gapValue && `pi-wrapper__gap--${gapValue}`; - } - - protected get gridClass(): string | undefined { + return gapValue && `pi-wrapper__gap--${gapValue}`; + } + + protected get gridClass(): string | undefined { const gridValue = this.grid(); - return gridValue !== 'none' ? `pi-wrapper__grid--${gridValue}` : 'pi-wrapper__full-grid'; - } - - protected get flexDirectionClass(): string | undefined { + return gridValue !== 'none' ? `pi-wrapper__grid--${gridValue}` : 'pi-wrapper__full-grid'; + } + + protected get flexDirectionClass(): string | undefined { const flexDirectionValue = this.flexDirection(); - return flexDirectionValue && `pi-wrapper__flex-direction--${flexDirectionValue}`; - } - - protected get hasBackgroundClass(): string | boolean { - return this.hasBackground() ? 'pi-wrapper__has-background' : ''; - } - - protected get hasPaddingClass(): string | boolean { - return this.hasPadding() ? 'pi-wrapper__has-padding' : ''; - } - - protected get itemsWidthClass(): string | undefined { + return flexDirectionValue && `pi-wrapper__flex-direction--${flexDirectionValue}`; + } + + protected get hasBackgroundClass(): string | boolean { + return this.hasBackground() ? 'pi-wrapper__has-background' : ''; + } + + protected get hasPaddingClass(): string | boolean { + return this.hasPadding() ? 'pi-wrapper__has-padding' : ''; + } + + protected get itemsWidthClass(): string | undefined { const itemsWidthValue = this.itemsWidth(); - return itemsWidthValue && `pi-wrapper__items-width--${itemsWidthValue}`; - } -} + return itemsWidthValue && `pi-wrapper__items-width--${itemsWidthValue}`; + } +} diff --git a/libs/ui/src/lib/ui/wrapper/definitions.ts b/libs/ui/src/lib/ui/wrapper/definitions.ts index dac6f63..6d319e1 100644 --- a/libs/ui/src/lib/ui/wrapper/definitions.ts +++ b/libs/ui/src/lib/ui/wrapper/definitions.ts @@ -1,7 +1,7 @@ -import { Params } from '@angular/router'; - -export type backLink = { - route: string; - label: string; - queryParams?: Params; -}; +import { Params } from '@angular/router'; + +export type backLink = { + route: string; + label: string; + queryParams?: Params; +}; diff --git a/libs/ui/src/lib/ui/wrapper/directives/flex-wrapper.directive.ts b/libs/ui/src/lib/ui/wrapper/directives/flex-wrapper.directive.ts index 95778c3..c281731 100644 --- a/libs/ui/src/lib/ui/wrapper/directives/flex-wrapper.directive.ts +++ b/libs/ui/src/lib/ui/wrapper/directives/flex-wrapper.directive.ts @@ -1,40 +1,40 @@ -import { Directive, HostBinding, input } from '@angular/core'; -import { justify, padding } from '../../../styles'; -import { PiBaseWrapper } from '../base.wrapper'; - -// Flex -@Directive({ selector: '[pi-flex]', }) -export class PiFlexDirective extends PiBaseWrapper { - @HostBinding('class') get classes(): string { +import { Directive, HostBinding, input } from '@angular/core'; +import { justify, padding } from '../../../styles'; +import { PiBaseWrapper } from '../base.wrapper'; + +// Flex +@Directive({ selector: '[pi-flex]', }) +export class PiFlexDirective extends PiBaseWrapper { + @HostBinding('class') get classes(): string { const flexWrap = this.flexWrap(); - const flexWrapClass = - flexWrap === 'wrap' ? `pi-wrapper__flex-direction--${flexWrap}` : ''; - return [ - 'pi-wrapper', - 'pi-wrapper__flex', - this.alignmentClass, - this.borderClass, - this.flexDirectionClass, - this.gapClass, - this.itemsWidthClass, - this.justifyClass, - this.maxWidthClass, - this.paddingClass, - flexWrapClass, - ].join(' '); - } - override readonly justify = input('flex-start'); - readonly flexWrap = input<'wrap' | 'no-wrap'>('no-wrap'); - readonly padding = input('xl'); - readonly border = input.required<'top' | 'bottom'>(); - - protected get borderClass(): string | undefined { + const flexWrapClass = + flexWrap === 'wrap' ? `pi-wrapper__flex-direction--${flexWrap}` : ''; + return [ + 'pi-wrapper', + 'pi-wrapper__flex', + this.alignmentClass, + this.borderClass, + this.flexDirectionClass, + this.gapClass, + this.itemsWidthClass, + this.justifyClass, + this.maxWidthClass, + this.paddingClass, + flexWrapClass, + ].join(' '); + } + override readonly justify = input('flex-start'); + readonly flexWrap = input<'wrap' | 'no-wrap'>('no-wrap'); + readonly padding = input('xl'); + readonly border = input.required<'top' | 'bottom'>(); + + protected get borderClass(): string | undefined { const border = this.border(); - return border ? `pi-wrapper__border--${border}` : ''; - } - - protected get paddingClass(): string | undefined { + return border ? `pi-wrapper__border--${border}` : ''; + } + + protected get paddingClass(): string | undefined { const paddingValue = this.padding(); - return paddingValue ? `pi-wrapper__padding--${paddingValue}` : ''; - } -} + return paddingValue ? `pi-wrapper__padding--${paddingValue}` : ''; + } +} diff --git a/libs/ui/src/lib/ui/wrapper/directives/grid-wrapper.directive.ts b/libs/ui/src/lib/ui/wrapper/directives/grid-wrapper.directive.ts index 3ab1cc2..db614ca 100644 --- a/libs/ui/src/lib/ui/wrapper/directives/grid-wrapper.directive.ts +++ b/libs/ui/src/lib/ui/wrapper/directives/grid-wrapper.directive.ts @@ -1,105 +1,105 @@ -import { Directive, HostBinding, OnInit, input } from '@angular/core'; -import { grid } from '../../../styles'; - -@Directive() -export abstract class PiBaseGridWrapper { - readonly alignment = input<'start' | 'center' | 'end'>(); - readonly alignSelf = input<'start' | 'center' | 'end'>(); - readonly gap = input<'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'xxs' | 's' | 'none'>('xl'); - readonly fill = input<'fit-content' | 'fill-available'>('fit-content'); - readonly maxWidth = input<'full-width' | 'edge-to-edge'>(); - readonly isResponsive = input(false); - readonly justifyItems = input<'start' | 'center' | 'end'>(); - - protected get alignmentClass(): string | undefined { +import { Directive, HostBinding, OnInit, input } from '@angular/core'; +import { grid } from '../../../styles'; + +@Directive() +export abstract class PiBaseGridWrapper { + readonly alignment = input<'start' | 'center' | 'end'>(); + readonly alignSelf = input<'start' | 'center' | 'end'>(); + readonly gap = input<'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'xxs' | 's' | 'none'>('xl'); + readonly fill = input<'fit-content' | 'fill-available'>('fit-content'); + readonly maxWidth = input<'full-width' | 'edge-to-edge'>(); + readonly isResponsive = input(false); + readonly justifyItems = input<'start' | 'center' | 'end'>(); + + protected get alignmentClass(): string | undefined { const alignment = this.alignment(); - return alignment && `pi-wrapper__align-items--${alignment}`; - } - - protected get alignSelfClass(): string | undefined { + return alignment && `pi-wrapper__align-items--${alignment}`; + } + + protected get alignSelfClass(): string | undefined { const alignSelf = this.alignSelf(); - return alignSelf && `pi-wrapper__align-self--${alignSelf}`; - } - - protected get gapClass(): string | undefined { + return alignSelf && `pi-wrapper__align-self--${alignSelf}`; + } + + protected get gapClass(): string | undefined { const gap = this.gap(); - return gap && `pi-wrapper__gap--${gap}`; - } - - protected get fillClass(): string | false | undefined { + return gap && `pi-wrapper__gap--${gap}`; + } + + protected get fillClass(): string | false | undefined { const fill = this.fill(); - return fill !== 'fit-content' && `pi-wrapper__fill--${fill}`; - } - - protected get isResponsiveClass(): boolean | string { - return this.isResponsive() ? 'is-responsive' : ''; - } - - protected get justifyItemsClass(): string | undefined { + return fill !== 'fit-content' && `pi-wrapper__fill--${fill}`; + } + + protected get isResponsiveClass(): boolean | string { + return this.isResponsive() ? 'is-responsive' : ''; + } + + protected get justifyItemsClass(): string | undefined { const justifyItems = this.justifyItems(); - return justifyItems && `pi-wrapper__justify-items--${justifyItems}`; - } - protected get maxWidthClass(): string | undefined { + return justifyItems && `pi-wrapper__justify-items--${justifyItems}`; + } + protected get maxWidthClass(): string | undefined { const maxWidth = this.maxWidth(); - return maxWidth && `pi-wrapper__max-width--${maxWidth}`; - } -} - -@Directive({ selector: '[pi-grid-two]', }) -export class PiGridTwoDirective extends PiBaseGridWrapper { - @HostBinding('class') get classes(): string { - return [ - 'pi-wrapper pi-wrapper__grid pi-wrapper__grid--two', - this.alignmentClass, - this.gapClass, - this.fillClass, - this.justifyItemsClass, - ].join(' '); - } -} -// 4 elements -@Directive({ selector: '[pi-grid-four]', }) -export class PiGridFourDirective extends PiBaseGridWrapper { - @HostBinding('class') get classes(): string { + return maxWidth && `pi-wrapper__max-width--${maxWidth}`; + } +} + +@Directive({ selector: '[pi-grid-two]', }) +export class PiGridTwoDirective extends PiBaseGridWrapper { + @HostBinding('class') get classes(): string { + return [ + 'pi-wrapper pi-wrapper__grid pi-wrapper__grid--two', + this.alignmentClass, + this.gapClass, + this.fillClass, + this.justifyItemsClass, + ].join(' '); + } +} +// 4 elements +@Directive({ selector: '[pi-grid-four]', }) +export class PiGridFourDirective extends PiBaseGridWrapper { + @HostBinding('class') get classes(): string { const gridValue = this.grid(); - const gridClass = gridValue && `pi-wrapper__grid--four-${gridValue}`; - return [ - 'pi-wrapper pi-wrapper__grid pi-wrapper__grid--four', - gridClass, - this.alignmentClass, - this.gapClass, - this.fillClass, - this.isResponsiveClass, - this.justifyItemsClass, - ].join(' '); - } - readonly grid = input<'1-1-1-1' | '0-1-1-1' | '1-0-1-1' | '1-1-0-1' | '1-1-1-0'>('1-1-1-1'); -} - -// Custom grid -@Directive({ selector: '[pi-grid]', }) -export class PiGridDirective extends PiBaseGridWrapper { - @HostBinding('class') get classes(): string { + const gridClass = gridValue && `pi-wrapper__grid--four-${gridValue}`; + return [ + 'pi-wrapper pi-wrapper__grid pi-wrapper__grid--four', + gridClass, + this.alignmentClass, + this.gapClass, + this.fillClass, + this.isResponsiveClass, + this.justifyItemsClass, + ].join(' '); + } + readonly grid = input<'1-1-1-1' | '0-1-1-1' | '1-0-1-1' | '1-1-0-1' | '1-1-1-0'>('1-1-1-1'); +} + +// Custom grid +@Directive({ selector: '[pi-grid]', }) +export class PiGridDirective extends PiBaseGridWrapper { + @HostBinding('class') get classes(): string { const columns = this.columns(); - const columnsClass = columns && `pi-wrapper__grid--columns-${columns}`; + const columnsClass = columns && `pi-wrapper__grid--columns-${columns}`; const gridValue = this.grid(); - const gridClass = gridValue && `pi-wrapper__grid--${gridValue}`; - return [ - 'pi-wrapper pi-wrapper__grid', - columnsClass, - gridClass, - this.isResponsiveClass, - this.alignmentClass, - this.alignSelfClass, - this.gapClass, - this.fillClass, - this.isResponsiveClass, - this.justifyItemsClass, - this.maxWidthClass, - ].join(' '); - } - - readonly columns = input(); - readonly grid = input(); - override readonly isResponsive = input(true); -} + const gridClass = gridValue && `pi-wrapper__grid--${gridValue}`; + return [ + 'pi-wrapper pi-wrapper__grid', + columnsClass, + gridClass, + this.isResponsiveClass, + this.alignmentClass, + this.alignSelfClass, + this.gapClass, + this.fillClass, + this.isResponsiveClass, + this.justifyItemsClass, + this.maxWidthClass, + ].join(' '); + } + + readonly columns = input(); + readonly grid = input(); + override readonly isResponsive = input(true); +} diff --git a/libs/ui/src/lib/ui/wrapper/directives/position-wrapper.directive.ts b/libs/ui/src/lib/ui/wrapper/directives/position-wrapper.directive.ts index d384126..74dd09b 100644 --- a/libs/ui/src/lib/ui/wrapper/directives/position-wrapper.directive.ts +++ b/libs/ui/src/lib/ui/wrapper/directives/position-wrapper.directive.ts @@ -1,18 +1,18 @@ -import { Directive, HostBinding, input } from '@angular/core'; -import { PiBaseWrapper } from '../base.wrapper'; - -// Fixed wrapper -@Directive({ selector: '[pi-fixed]', }) -export class PiFixedDirective { - @HostBinding('class') get classes(): string { - const FixedClass = 'is-fixed'; +import { Directive, HostBinding, input } from '@angular/core'; +import { PiBaseWrapper } from '../base.wrapper'; + +// Fixed wrapper +@Directive({ selector: '[pi-fixed]', }) +export class PiFixedDirective { + @HostBinding('class') get classes(): string { + const FixedClass = 'is-fixed'; const position = this.position(); - const positionClass = position ? `is-fixed--${position}` : ''; - return [ - FixedClass, - positionClass - ].join(' '); - } - - readonly position = input<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>(); -} + const positionClass = position ? `is-fixed--${position}` : ''; + return [ + FixedClass, + positionClass + ].join(' '); + } + + readonly position = input<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>(); +} diff --git a/libs/ui/src/lib/ui/wrapper/form/form.wrapper.html b/libs/ui/src/lib/ui/wrapper/form/form.wrapper.html index 88aa38b..5688d5a 100644 --- a/libs/ui/src/lib/ui/wrapper/form/form.wrapper.html +++ b/libs/ui/src/lib/ui/wrapper/form/form.wrapper.html @@ -1,4 +1,4 @@ -

{{ title() }}

-
- -
+

{{ title() }}

+
+ +
diff --git a/libs/ui/src/lib/ui/wrapper/form/form.wrapper.ts b/libs/ui/src/lib/ui/wrapper/form/form.wrapper.ts index 333ba39..7e2b565 100644 --- a/libs/ui/src/lib/ui/wrapper/form/form.wrapper.ts +++ b/libs/ui/src/lib/ui/wrapper/form/form.wrapper.ts @@ -1,31 +1,31 @@ -import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; -import { FormGroup, ReactiveFormsModule } from '@angular/forms'; - -import { grid, WrapperTypeClass } from '../../../styles'; +import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; +import { FormGroup, ReactiveFormsModule } from '@angular/forms'; + +import { grid, WrapperTypeClass } from '../../../styles'; import { PiBaseWrapper } from '../base.wrapper'; -import { NgIf } from '@angular/common'; - +import { NgIf } from '@angular/common'; + @Component({ selector: 'pi-form-wrapper', templateUrl: './form.wrapper.html', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, ReactiveFormsModule], -}) -export class PiFormWrapper extends PiBaseWrapper { - @HostBinding('class') get classes(): string { - return [ - WrapperTypeClass.Form, - this.alignmentClass, - this.flexDirectionClass, - this.gridClass, - this.justifyClass, - this.maxWidthClass, - ].join(' '); - } - - readonly formGroup = input.required(); - readonly title = input(); - readonly subtitle = input(); - - override readonly grid = input('none'); -} +}) +export class PiFormWrapper extends PiBaseWrapper { + @HostBinding('class') get classes(): string { + return [ + WrapperTypeClass.Form, + this.alignmentClass, + this.flexDirectionClass, + this.gridClass, + this.justifyClass, + this.maxWidthClass, + ].join(' '); + } + + readonly formGroup = input.required(); + readonly title = input(); + readonly subtitle = input(); + + override readonly grid = input('none'); +} diff --git a/libs/ui/src/lib/ui/wrapper/header/header.wrapper.html b/libs/ui/src/lib/ui/wrapper/header/header.wrapper.html index 5542237..d1438eb 100644 --- a/libs/ui/src/lib/ui/wrapper/header/header.wrapper.html +++ b/libs/ui/src/lib/ui/wrapper/header/header.wrapper.html @@ -1,18 +1,18 @@ -
- - - - -
- - - - +
+ + + + +
+ + + + diff --git a/libs/ui/src/lib/ui/wrapper/header/header.wrapper.ts b/libs/ui/src/lib/ui/wrapper/header/header.wrapper.ts index 04526a8..eebb172 100644 --- a/libs/ui/src/lib/ui/wrapper/header/header.wrapper.ts +++ b/libs/ui/src/lib/ui/wrapper/header/header.wrapper.ts @@ -1,30 +1,30 @@ -import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core'; -import { alignment, WrapperTypeClass } from '../../../styles'; - -import { PiBaseWrapper } from '../base.wrapper'; +import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core'; +import { alignment, WrapperTypeClass } from '../../../styles'; + +import { PiBaseWrapper } from '../base.wrapper'; import { backLink } from '../definitions'; import { NgIf } from '@angular/common'; import { PiTextViewerComponent } from '../../text/text-viewer/text-viewer.component'; -import { RouterLink, RouterLinkActive } from '@angular/router'; - +import { RouterLink, RouterLinkActive } from '@angular/router'; + @Directive({ selector: 'pi-header-wrapper-left-content', host: { class: 'pi-header-wrapper-content pi-header-wrapper-content__left' }, -}) -export class PiHeaderWrapperLeftContentDirective {} - +}) +export class PiHeaderWrapperLeftContentDirective {} + @Directive({ selector: 'pi-header-wrapper-center-content', host: { class: 'pi-header-wrapper-content pi-header-wrapper-content__center' }, -}) -export class PiHeaderWrapperCenterContentDirective {} - +}) +export class PiHeaderWrapperCenterContentDirective {} + @Directive({ selector: 'pi-header-wrapper-right-content', host: { class: 'pi-header-wrapper-content pi-header-wrapper-content__right' }, -}) -export class PiHeaderWrapperRightContentDirective {} - +}) +export class PiHeaderWrapperRightContentDirective {} + @Component({ selector: 'pi-header-wrapper', templateUrl: './header.wrapper.html', @@ -35,21 +35,21 @@ export class PiHeaderWrapperRightContentDirective {} RouterLink, RouterLinkActive, ], -}) -export class PiHeaderWrapper extends PiBaseWrapper { - @HostBinding('class') get classes(): string { - return [ - WrapperTypeClass.Header, - this.maxWidthClass, - this.alignmentClass, - this.gapClass, - this.gridClass, - this.flexDirectionClass, - this.justifyClass, - ].join(' '); - } - - readonly backLink = input(); - - override readonly alignment = input('flex-end'); -} +}) +export class PiHeaderWrapper extends PiBaseWrapper { + @HostBinding('class') get classes(): string { + return [ + WrapperTypeClass.Header, + this.maxWidthClass, + this.alignmentClass, + this.gapClass, + this.gridClass, + this.flexDirectionClass, + this.justifyClass, + ].join(' '); + } + + readonly backLink = input(); + + override readonly alignment = input('flex-end'); +} diff --git a/libs/ui/src/lib/ui/wrapper/index.ts b/libs/ui/src/lib/ui/wrapper/index.ts index bfd77cb..a438cdb 100644 --- a/libs/ui/src/lib/ui/wrapper/index.ts +++ b/libs/ui/src/lib/ui/wrapper/index.ts @@ -1,12 +1,12 @@ -export * from './directives/flex-wrapper.directive'; -export * from './directives/grid-wrapper.directive'; -export * from './directives/position-wrapper.directive'; - -export * from './action/action.wrapper'; -export * from './header/header.wrapper'; -export * from './form/form.wrapper'; -export * from './list/list.wrapper'; -export * from './main/main.wrapper'; - - -export * from './definitions'; +export * from './directives/flex-wrapper.directive'; +export * from './directives/grid-wrapper.directive'; +export * from './directives/position-wrapper.directive'; + +export * from './action/action.wrapper'; +export * from './header/header.wrapper'; +export * from './form/form.wrapper'; +export * from './list/list.wrapper'; +export * from './main/main.wrapper'; + + +export * from './definitions'; diff --git a/libs/ui/src/lib/ui/wrapper/list/list.wrapper.html b/libs/ui/src/lib/ui/wrapper/list/list.wrapper.html index cf2206b..56745b2 100644 --- a/libs/ui/src/lib/ui/wrapper/list/list.wrapper.html +++ b/libs/ui/src/lib/ui/wrapper/list/list.wrapper.html @@ -1,23 +1,23 @@ - - -
- -
- - - - - + + +
+ +
+ + + + + diff --git a/libs/ui/src/lib/ui/wrapper/list/list.wrapper.ts b/libs/ui/src/lib/ui/wrapper/list/list.wrapper.ts index 4b823c9..110f6c9 100644 --- a/libs/ui/src/lib/ui/wrapper/list/list.wrapper.ts +++ b/libs/ui/src/lib/ui/wrapper/list/list.wrapper.ts @@ -4,44 +4,44 @@ import { HostBinding, input, output -} from '@angular/core'; -import { WrapperTypeClass, flexDirection } from '../../../styles'; -import { ListMode } from '../../../util/list-configs'; +} from '@angular/core'; +import { WrapperTypeClass, flexDirection } from '../../../styles'; +import { ListMode } from '../../../util/list-configs'; import { PiBaseWrapper } from '../base.wrapper'; -import { InfiniteScrollDirective } from 'ngx-infinite-scroll'; - +import { InfiniteScrollDirective } from 'ngx-infinite-scroll'; + @Component({ selector: 'pi-list-wrapper', templateUrl: './list.wrapper.html', changeDetection: ChangeDetectionStrategy.OnPush, imports: [InfiniteScrollDirective], -}) -export class PiListWrapper extends PiBaseWrapper { - @HostBinding('class') get classes(): string { - const hasScrollClass = this.hasScroll() ? 'has-scroll' : ''; +}) +export class PiListWrapper extends PiBaseWrapper { + @HostBinding('class') get classes(): string { + const hasScrollClass = this.hasScroll() ? 'has-scroll' : ''; const gridType = this.gridType(); - const gridTypeClass = gridType !== 'flex' && `pi-wrapper__grid-type--${gridType}`; - return [ - WrapperTypeClass.List, - this.flexDirectionClass, - this.hasPaddingClass, - this.justifyClass, - this.maxWidthClass, - hasScrollClass, - gridTypeClass, - ].join(' '); - } - - page = 1; - limit = 12; - - readonly isLoading = input.required(); - readonly hasScroll = input(true); - readonly mode = input('list'); - - readonly gridType = input<'grid' | 'flex'>('flex'); - - override readonly flexDirection = input('column'); - - readonly scrollList = output(); -} + const gridTypeClass = gridType !== 'flex' && `pi-wrapper__grid-type--${gridType}`; + return [ + WrapperTypeClass.List, + this.flexDirectionClass, + this.hasPaddingClass, + this.justifyClass, + this.maxWidthClass, + hasScrollClass, + gridTypeClass, + ].join(' '); + } + + page = 1; + limit = 12; + + readonly isLoading = input.required(); + readonly hasScroll = input(true); + readonly mode = input('list'); + + readonly gridType = input<'grid' | 'flex'>('flex'); + + override readonly flexDirection = input('column'); + + readonly scrollList = output(); +} diff --git a/libs/ui/src/lib/ui/wrapper/main/main.wrapper.html b/libs/ui/src/lib/ui/wrapper/main/main.wrapper.html index 7b2a210..50a46be 100644 --- a/libs/ui/src/lib/ui/wrapper/main/main.wrapper.html +++ b/libs/ui/src/lib/ui/wrapper/main/main.wrapper.html @@ -1,5 +1,5 @@ -
- - - -
+
+ + + +
diff --git a/libs/ui/src/lib/ui/wrapper/main/main.wrapper.ts b/libs/ui/src/lib/ui/wrapper/main/main.wrapper.ts index c34a4bc..9262c99 100644 --- a/libs/ui/src/lib/ui/wrapper/main/main.wrapper.ts +++ b/libs/ui/src/lib/ui/wrapper/main/main.wrapper.ts @@ -1,54 +1,54 @@ -import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core'; -import { WrapperTypeClass } from '../../../styles'; -import { gap } from '../../../styles'; -import { PiBaseWrapper } from '../base.wrapper'; - -@Directive() -export abstract class PiMainWrapperBaseContentDirective { - @HostBinding('class') get classes(): string { - const isStickyClass = this.isSticky() === true ? 'is-sticky' : ''; - return ['pi-main-wrapper-content', isStickyClass].join(' '); - } - readonly isSticky = input(false); -} - +import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core'; +import { WrapperTypeClass } from '../../../styles'; +import { gap } from '../../../styles'; +import { PiBaseWrapper } from '../base.wrapper'; + +@Directive() +export abstract class PiMainWrapperBaseContentDirective { + @HostBinding('class') get classes(): string { + const isStickyClass = this.isSticky() === true ? 'is-sticky' : ''; + return ['pi-main-wrapper-content', isStickyClass].join(' '); + } + readonly isSticky = input(false); +} + @Directive({ selector: 'pi-main-wrapper-left-content', host: { class: 'pi-main-wrapper-content__left' }, -}) -export class PiMainWrapperLeftContentDirective extends PiMainWrapperBaseContentDirective {} - +}) +export class PiMainWrapperLeftContentDirective extends PiMainWrapperBaseContentDirective {} + @Directive({ selector: 'pi-main-wrapper-right-content', host: { class: 'pi-main-wrapper-content__right' }, -}) -export class PiMainWrapperRightContentDirective extends PiMainWrapperBaseContentDirective{} - +}) +export class PiMainWrapperRightContentDirective extends PiMainWrapperBaseContentDirective{} + @Component({ selector: 'pi-main-wrapper', templateUrl: './main.wrapper.html', changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class PiMainWrapper extends PiBaseWrapper { - @HostBinding('class') get classes(): string { +}) +export class PiMainWrapper extends PiBaseWrapper { + @HostBinding('class') get classes(): string { const type = this.type(); - const typeClass = type && `pi-wrapper__main--type-${type}`; - const isCenteredClass = this.isCentered() === true ? 'is-centered' : ''; - return [ - WrapperTypeClass.Main, - this.alignmentClass, - this.flexDirectionClass, - this.gapClass, - this.gridClass, - this.justifyClass, - this.maxWidthClass, - isCenteredClass, - typeClass, - ].join(' '); - } - - readonly isCentered = input(false); - readonly type = input<'' | 'document'>(''); - - override readonly gap = input('xxl'); -} + const typeClass = type && `pi-wrapper__main--type-${type}`; + const isCenteredClass = this.isCentered() === true ? 'is-centered' : ''; + return [ + WrapperTypeClass.Main, + this.alignmentClass, + this.flexDirectionClass, + this.gapClass, + this.gridClass, + this.justifyClass, + this.maxWidthClass, + isCenteredClass, + typeClass, + ].join(' '); + } + + readonly isCentered = input(false); + readonly type = input<'' | 'document'>(''); + + override readonly gap = input('xxl'); +} diff --git a/libs/ui/src/lib/util/affix/affix.directive.ts b/libs/ui/src/lib/util/affix/affix.directive.ts index d49ac34..071aff9 100644 --- a/libs/ui/src/lib/util/affix/affix.directive.ts +++ b/libs/ui/src/lib/util/affix/affix.directive.ts @@ -1,35 +1,35 @@ -import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core'; -import { unit } from '../models'; - -@Directive() -export abstract class PiBaseAffixDirective implements OnInit { - @HostBinding('class') get classes(): string { - return ['pi-affix', `pi-affix__appearance--${this.appearance()}`].join(' '); - } - - readonly unit = input(); - readonly appearance = input<'ghost' | 'fill'>('ghost'); - - constructor(private renderer: Renderer2, private el: ElementRef) {} - - ngOnInit() { +import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core'; +import { unit } from '../models'; + +@Directive() +export abstract class PiBaseAffixDirective implements OnInit { + @HostBinding('class') get classes(): string { + return ['pi-affix', `pi-affix__appearance--${this.appearance()}`].join(' '); + } + + readonly unit = input(); + readonly appearance = input<'ghost' | 'fill'>('ghost'); + + constructor(private renderer: Renderer2, private el: ElementRef) {} + + ngOnInit() { const unitValue = this.unit(); - if (unitValue) { - const span = this.renderer.createElement('span'); - const text = this.renderer.createText(unitValue); - - this.renderer.appendChild(span, text); - this.renderer.appendChild(this.el.nativeElement, span); - } - } -} - -@Directive({ selector: 'pi-prefix', }) -export class PiPrefixDirective extends PiBaseAffixDirective { - @HostBinding('class') className = 'pi-affix__prefix'; -} - -@Directive({ selector: 'pi-suffix', }) -export class PiSuffixDirective extends PiBaseAffixDirective { - @HostBinding('class') className = 'pi-affix__suffix'; -} + if (unitValue) { + const span = this.renderer.createElement('span'); + const text = this.renderer.createText(unitValue); + + this.renderer.appendChild(span, text); + this.renderer.appendChild(this.el.nativeElement, span); + } + } +} + +@Directive({ selector: 'pi-prefix', }) +export class PiPrefixDirective extends PiBaseAffixDirective { + @HostBinding('class') className = 'pi-affix__prefix'; +} + +@Directive({ selector: 'pi-suffix', }) +export class PiSuffixDirective extends PiBaseAffixDirective { + @HostBinding('class') className = 'pi-affix__suffix'; +} diff --git a/libs/ui/src/lib/util/affix/index.ts b/libs/ui/src/lib/util/affix/index.ts index b917fc0..ac55e69 100644 --- a/libs/ui/src/lib/util/affix/index.ts +++ b/libs/ui/src/lib/util/affix/index.ts @@ -1,3 +1,3 @@ -export * from './affix.directive'; - - +export * from './affix.directive'; + + diff --git a/libs/ui/src/lib/util/amplitude/amplitude.service.ts b/libs/ui/src/lib/util/amplitude/amplitude.service.ts index f7066e4..2c76d18 100644 --- a/libs/ui/src/lib/util/amplitude/amplitude.service.ts +++ b/libs/ui/src/lib/util/amplitude/amplitude.service.ts @@ -1,44 +1,44 @@ -import { isPlatformBrowser } from '@angular/common'; -import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class AmplitudeService { - private amp: any; - private ampEnabled = false; - - constructor(@Inject(PLATFORM_ID) public platformId: object) { - if (isPlatformBrowser(this.platformId)) { - this.amp = (window as any).amplitude; - if (this.amp) this.ampEnabled = true; - } - } - - trackEvent(eventName: string, extraParam?: any): void { - if (!this.ampEnabled) { - this.enableCheck(); - return; - } - this.amp.logEvent(eventName, extraParam); - console.log('Event tracked: ', eventName, extraParam); - } - - identifyUser(tag: string, data: unknown): void { - const identify1: unknown = new this.amp.Identify().set(tag, data); - this.amp.identify(identify1); - } - - identifyUserMultiple(data: unknown): void { - const identify: unknown = new this.amp.setUserProperties(data); - this.amp.identify(identify); - } - - setUserId(userId: string): void { - this.amp.setUserId(userId); - } - - private enableCheck(): void { - if (!this.ampEnabled) console.log('Amplitude is not working'); - } -} +import { isPlatformBrowser } from '@angular/common'; +import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class AmplitudeService { + private amp: any; + private ampEnabled = false; + + constructor(@Inject(PLATFORM_ID) public platformId: object) { + if (isPlatformBrowser(this.platformId)) { + this.amp = (window as any).amplitude; + if (this.amp) this.ampEnabled = true; + } + } + + trackEvent(eventName: string, extraParam?: any): void { + if (!this.ampEnabled) { + this.enableCheck(); + return; + } + this.amp.logEvent(eventName, extraParam); + console.log('Event tracked: ', eventName, extraParam); + } + + identifyUser(tag: string, data: unknown): void { + const identify1: unknown = new this.amp.Identify().set(tag, data); + this.amp.identify(identify1); + } + + identifyUserMultiple(data: unknown): void { + const identify: unknown = new this.amp.setUserProperties(data); + this.amp.identify(identify); + } + + setUserId(userId: string): void { + this.amp.setUserId(userId); + } + + private enableCheck(): void { + if (!this.ampEnabled) console.log('Amplitude is not working'); + } +} diff --git a/libs/ui/src/lib/util/amplitude/events.ts b/libs/ui/src/lib/util/amplitude/events.ts index 655394e..72d3ff9 100644 --- a/libs/ui/src/lib/util/amplitude/events.ts +++ b/libs/ui/src/lib/util/amplitude/events.ts @@ -1,70 +1,70 @@ -export const AMP_EVENTS: Record = { - // PUBLIC EVENTS - APP_OPENED: 'App Opened', - GOOGLE_SIGNIN_SUCCESS: 'Sign in with Google Success', - LOGIN_SUCCESS: 'Login Success', - USER_REGISTERED: 'User Registered', - WEB_OPENED: 'Web Opened', - - // AUTHENTICATION - EMAIL_PASSWORD_PAGE_VIEWED: 'Email and Password Page Viewed', - PERSONAL_INFORMATION_PAGE_VIEWED: 'Personal Information and User Type Page Viewed', - PERSONAL_INFO_UPDATED: 'Personal Information Updated', - - // PRIVATE EVENTS - // COMPANY FORM - COMPANY_DETAILS_VIEWED: 'Company Details Viewed', - COMPANY_LIST_VIEWED: 'Company List Viewed', - COMPANY_MODIFIED: 'Company Modified', - COMPANY_REGISTERED: 'Company Registered', - - // DEALS - CONNECTED_COMPANY: 'Connected Company', - DEAL_ACCEPTED: 'Deal Accepted', - DEAL_VIEWED: 'Deal Viewed', - DEALBOX_VIEWED: 'Dealbox Viewed', - - // QA - QA_SESSION_CREATED: 'QA Session Created', - QUESTION_ADDED: 'Question Added', - QUESTION_ANSWERED: 'Question Answered', - QUESTIONS_SENT: 'Questions Sent', - ANSWERS_SENT: 'Answers Sent', - - - // INVESTOR FORM - SUBSCRIBE: 'Subscribe', - SUBSCRIBE_PRICING_PAGE_VIEWED: 'Subscribe Pricing Page Viewed', - USER_SUBSCRIBED: 'User Subscribed', - THESIS_SAVED: 'Thesis Saved', - THESIS_FORM_VIEWED: 'Thesis Form Viewed', - SUBSCRIBE_PRICING_VIEW: 'Subscribe Pricing Page Viewed', - - // COMPANY PUBLIC - BASIC_PANEL_SAVED: 'Basic Panel Saved', - PROFIT_LOSS_PANEL_SAVED: ' Profit And Loss Panel Saved', - BALANCE_PANEL_SAVED: 'Balance Panel Saved', - BUSINESS_PLAN_PANEL_SAVED: 'Business Plan Panel Saved', - TEAM_PANEL_SAVED: 'Team Panel Saved', - INVESTMENT_TRANSACTION_SAVED: 'Investment Transaction Panel Saved', - PRODUCTS_CLIENTS_SAVED: 'Products And Clients Panel Saved', - MY_COMPANY_OPENED: 'My Company Opened', - - TEASER_TYPEFORM_OPENED: 'Teaser Typeform Opened', - TEASER_TYPEFORM_MODAL_OPENED: 'Teaser Typeform Modal Opened', - TEASER_TYPEFORM_MODAL_CLOSED: 'Teaser Typeform Modal Closed', - - // INVESTOR LIST - INVESTOR_LIST_VIEWED: 'Investor List Viewed', - TEASER_DOWNLOADED: 'Teaser Downloaded', - - // ADVISOR - ADVISOR_COMPANY_CREATION_FORM_PAGE_VIEWED: 'Advisor Company Creation Form Page Viewed', - ADVISOR_COMPANY_REGISTERED: 'Advisor Company Registered', - ADVISOR_COMPANY_MODIFIED: 'Advisor Company Modified', - - - // WEB - VALORAR_MI_EMPRESA_TYPEFORM_MODAL_OPENED: 'Valorar Mi Empresa Typeform Modal Opened', - VENDER_MI_EMPRESA_TYPEFORM_MODAL_OPENED: 'Vender Mi Empresa Typeform Modal Opened' -}; +export const AMP_EVENTS: Record = { + // PUBLIC EVENTS + APP_OPENED: 'App Opened', + GOOGLE_SIGNIN_SUCCESS: 'Sign in with Google Success', + LOGIN_SUCCESS: 'Login Success', + USER_REGISTERED: 'User Registered', + WEB_OPENED: 'Web Opened', + + // AUTHENTICATION + EMAIL_PASSWORD_PAGE_VIEWED: 'Email and Password Page Viewed', + PERSONAL_INFORMATION_PAGE_VIEWED: 'Personal Information and User Type Page Viewed', + PERSONAL_INFO_UPDATED: 'Personal Information Updated', + + // PRIVATE EVENTS + // COMPANY FORM + COMPANY_DETAILS_VIEWED: 'Company Details Viewed', + COMPANY_LIST_VIEWED: 'Company List Viewed', + COMPANY_MODIFIED: 'Company Modified', + COMPANY_REGISTERED: 'Company Registered', + + // DEALS + CONNECTED_COMPANY: 'Connected Company', + DEAL_ACCEPTED: 'Deal Accepted', + DEAL_VIEWED: 'Deal Viewed', + DEALBOX_VIEWED: 'Dealbox Viewed', + + // QA + QA_SESSION_CREATED: 'QA Session Created', + QUESTION_ADDED: 'Question Added', + QUESTION_ANSWERED: 'Question Answered', + QUESTIONS_SENT: 'Questions Sent', + ANSWERS_SENT: 'Answers Sent', + + + // INVESTOR FORM + SUBSCRIBE: 'Subscribe', + SUBSCRIBE_PRICING_PAGE_VIEWED: 'Subscribe Pricing Page Viewed', + USER_SUBSCRIBED: 'User Subscribed', + THESIS_SAVED: 'Thesis Saved', + THESIS_FORM_VIEWED: 'Thesis Form Viewed', + SUBSCRIBE_PRICING_VIEW: 'Subscribe Pricing Page Viewed', + + // COMPANY PUBLIC + BASIC_PANEL_SAVED: 'Basic Panel Saved', + PROFIT_LOSS_PANEL_SAVED: ' Profit And Loss Panel Saved', + BALANCE_PANEL_SAVED: 'Balance Panel Saved', + BUSINESS_PLAN_PANEL_SAVED: 'Business Plan Panel Saved', + TEAM_PANEL_SAVED: 'Team Panel Saved', + INVESTMENT_TRANSACTION_SAVED: 'Investment Transaction Panel Saved', + PRODUCTS_CLIENTS_SAVED: 'Products And Clients Panel Saved', + MY_COMPANY_OPENED: 'My Company Opened', + + TEASER_TYPEFORM_OPENED: 'Teaser Typeform Opened', + TEASER_TYPEFORM_MODAL_OPENED: 'Teaser Typeform Modal Opened', + TEASER_TYPEFORM_MODAL_CLOSED: 'Teaser Typeform Modal Closed', + + // INVESTOR LIST + INVESTOR_LIST_VIEWED: 'Investor List Viewed', + TEASER_DOWNLOADED: 'Teaser Downloaded', + + // ADVISOR + ADVISOR_COMPANY_CREATION_FORM_PAGE_VIEWED: 'Advisor Company Creation Form Page Viewed', + ADVISOR_COMPANY_REGISTERED: 'Advisor Company Registered', + ADVISOR_COMPANY_MODIFIED: 'Advisor Company Modified', + + + // WEB + VALORAR_MI_EMPRESA_TYPEFORM_MODAL_OPENED: 'Valorar Mi Empresa Typeform Modal Opened', + VENDER_MI_EMPRESA_TYPEFORM_MODAL_OPENED: 'Vender Mi Empresa Typeform Modal Opened' +}; diff --git a/libs/ui/src/lib/util/amplitude/index.ts b/libs/ui/src/lib/util/amplitude/index.ts index 7609ab0..487dd29 100644 --- a/libs/ui/src/lib/util/amplitude/index.ts +++ b/libs/ui/src/lib/util/amplitude/index.ts @@ -1,5 +1,5 @@ -// Amplitude services -export * from './amplitude.service'; - -// Events -export * from './events'; +// Amplitude services +export * from './amplitude.service'; + +// Events +export * from './events'; diff --git a/libs/ui/src/lib/util/color/directives/colors.directive.ts b/libs/ui/src/lib/util/color/directives/colors.directive.ts index ffaffc9..8863a1c 100644 --- a/libs/ui/src/lib/util/color/directives/colors.directive.ts +++ b/libs/ui/src/lib/util/color/directives/colors.directive.ts @@ -1,92 +1,92 @@ -import { Directive, HostBinding, OnInit, input } from '@angular/core'; -import { density, mode, opacity, styleType } from '../../../styles'; - -@Directive() -export abstract class PiBaseColor implements OnInit { - @HostBinding('class') get commonClasses(): string { - return [this.densityClass, this.modeClass].join(' '); - } - readonly density = input(''); - readonly opacity = input('100'); - readonly mode = input('dark'); - - ngOnInit(): void { - this.densityClass; - } - protected get densityClass(): string { +import { Directive, HostBinding, OnInit, input } from '@angular/core'; +import { density, mode, opacity, styleType } from '../../../styles'; + +@Directive() +export abstract class PiBaseColor implements OnInit { + @HostBinding('class') get commonClasses(): string { + return [this.densityClass, this.modeClass].join(' '); + } + readonly density = input(''); + readonly opacity = input('100'); + readonly mode = input('dark'); + + ngOnInit(): void { + this.densityClass; + } + protected get densityClass(): string { const densityValue = this.density(); - return !!densityValue ? `pi-color__density--${densityValue}` : ''; - } - protected get modeClass(): string { + return !!densityValue ? `pi-color__density--${densityValue}` : ''; + } + protected get modeClass(): string { const modeValue = this.mode(); - return modeValue && `pi-color__mode--${modeValue}`; - } -} - -@Directive({ selector: '[pi-dynamic-color]', }) -export class PiDynamicColorDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return this.colorClass; - } - - readonly color = input.required(); - - protected get colorClass(): string { + return modeValue && `pi-color__mode--${modeValue}`; + } +} + +@Directive({ selector: '[pi-dynamic-color]', }) +export class PiDynamicColorDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return this.colorClass; + } + + readonly color = input.required(); + + protected get colorClass(): string { const color = this.color(); - return !!color && `pi-color__${color}`; - } -} - -@Directive({ selector: '[pi-primary]', }) -export class PiColorPrimaryDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__primary'; - } -} - -@Directive({ selector: '[pi-accent]', }) -export class PiColorAccentDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__accent'; - } -} - -@Directive({ selector: '[pi-warn]', }) -export class PiColorWarnDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__warn'; - } -} -@Directive({ selector: '[pi-success]', }) -export class PiColorSuccessDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__success'; - } -} - -@Directive({ selector: '[pi-highlighted]', }) -export class PiColorHighlightedDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__highlighted'; - } -} - -@Directive({ selector: '[pi-white]', }) -export class PiColorWhiteDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__white'; - } -} -@Directive({ selector: '[pi-grey]', }) -export class PiColorGreyDirective extends PiBaseColor { - @HostBinding('class') get classes(): string { - return 'pi-color__grey'; - } -} - -@Directive({ selector: '[pi-black]', }) -export class PiColorBlackDirective { - @HostBinding('class') get classes(): string { - return 'pi-color__black'; - } -} + return !!color && `pi-color__${color}`; + } +} + +@Directive({ selector: '[pi-primary]', }) +export class PiColorPrimaryDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__primary'; + } +} + +@Directive({ selector: '[pi-accent]', }) +export class PiColorAccentDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__accent'; + } +} + +@Directive({ selector: '[pi-warn]', }) +export class PiColorWarnDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__warn'; + } +} +@Directive({ selector: '[pi-success]', }) +export class PiColorSuccessDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__success'; + } +} + +@Directive({ selector: '[pi-highlighted]', }) +export class PiColorHighlightedDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__highlighted'; + } +} + +@Directive({ selector: '[pi-white]', }) +export class PiColorWhiteDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__white'; + } +} +@Directive({ selector: '[pi-grey]', }) +export class PiColorGreyDirective extends PiBaseColor { + @HostBinding('class') get classes(): string { + return 'pi-color__grey'; + } +} + +@Directive({ selector: '[pi-black]', }) +export class PiColorBlackDirective { + @HostBinding('class') get classes(): string { + return 'pi-color__black'; + } +} diff --git a/libs/ui/src/lib/util/color/entities/color.type.ts b/libs/ui/src/lib/util/color/entities/color.type.ts index d3f5a12..8b13789 100644 --- a/libs/ui/src/lib/util/color/entities/color.type.ts +++ b/libs/ui/src/lib/util/color/entities/color.type.ts @@ -1 +1 @@ - + diff --git a/libs/ui/src/lib/util/color/index.ts b/libs/ui/src/lib/util/color/index.ts index 2d7e12a..8ac315f 100644 --- a/libs/ui/src/lib/util/color/index.ts +++ b/libs/ui/src/lib/util/color/index.ts @@ -1,3 +1,3 @@ - - -export * from './directives/colors.directive'; + + +export * from './directives/colors.directive'; diff --git a/libs/ui/src/lib/util/common/common.ts b/libs/ui/src/lib/util/common/common.ts index b9b3b05..ca70603 100644 --- a/libs/ui/src/lib/util/common/common.ts +++ b/libs/ui/src/lib/util/common/common.ts @@ -1,159 +1,159 @@ -// Angular -import { HttpParams } from '@angular/common/http'; -import { Inject, PLATFORM_ID } from '@angular/core'; - -// Shared -import { Params } from '../models'; -import { timer } from 'rxjs'; -export class Commons { - constructor(@Inject(PLATFORM_ID) public platformId: object) {} - - static followUrl($event: MouseEvent, item: { url: string }): void { - Commons.followExternalUrl($event, item); - } - - static followExternalUrl( - $event: MouseEvent, - item: { url: string; externalLink?: boolean } - ): void { - if ( - item && - item.url && - (item.externalLink || $event.button === 1 || ($event.button === 0 && $event.ctrlKey)) - ) { - Commons.openExternalUrl(item.url); - } - } - - static openExternalSelfUrl(url: string): void { - Commons.openExternalUrl(url, '_self'); - } - - static openExternalUrlWithoutParams(url: string, target?: string): void { - window.open(url, target || '_blank'); - } - - - static openExternalUrl(url: string, target?: string): void { - window.open(url + window.location.search, target || '_blank'); - } - - static downloadPDFBase64(pdf: string, name: string): void { - const linkSource = `data:application/pdf;base64,${pdf}`; - const downloadLink: HTMLAnchorElement = document.createElement('a'); - const fileName: string = name; - downloadLink.href = linkSource; - downloadLink.download = fileName; - downloadLink.click(); - } - - static downloadPDF(url: string, name: string, target?: string): void { - const targetLink = target || '_self'; - let link = document.createElement('a'); - link.href = url; - link.download = name; - link.target = targetLink; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - link = null; - } - - static getDefaultLanguage(): string { - return navigator.language.split('-')[0] as string; - } - - static getFullName(user: { name: string; lastName: string }): string { - if (!user || !user.name) { - return ' '; - } - if (!user.lastName) { - return user.name; - } - return `${user.name} ${user.lastName}`; - } - - static setParamsToQueryUrl(obj: Params): string { - let params: string = ''; - for (const key in obj) { - if (obj[key]) { - const element = obj[key]; - params = params + '&' + key + '=' + element; - } - } - return params; - } - - static isEmpty(obj: unknown): boolean { - if (!obj) { - return true; - } - return JSON.stringify(obj) === JSON.stringify({}); - } - - static isNotEmpty(obj: unknown): boolean { - return !this.isEmpty(obj); - } - - static isStringEmpty = (str: string) => !str?.length; - - static buildRangeString( - minValue: number, - maxValue: number, - unit: string, - defaultLocale?: string - ): string { - if (!!minValue && !!maxValue) { - return `${minValue}${unit} - ${maxValue}${unit}`; - } - if (!!minValue) { - return `>${minValue}${unit}`; - } - if (!!maxValue) { - return `<${maxValue}${unit}`; - } - return defaultLocale; - } - - static removeEmptyValuesFromObject(obj: unknown): unknown { - return Object.fromEntries( - Object.entries(obj).filter( - ([_, v]) => v != null && v !== '' && (v as Array).length !== 0 - ) - ); - } - - static removeNullValuesFromQueryParams(params: HttpParams) { - const paramsKeysAux = params.keys(); - paramsKeysAux.forEach((key) => { - const value = params.get(key); - if (value === null || value === undefined || value === '' || value === 'null') { - params['map'].delete(key); - } - }); - return params; - } - - static removeDiacriticsFromString(str: string): string { - return str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); - } - - static getScrollParent(node: HTMLElement): HTMLElement { - if (node == null) { - return null; - } - if (node.scrollHeight > node.clientHeight) { - return node; - } else { - return this.getScrollParent(node.parentNode as HTMLElement); - } - } - - static createIntervalUsingTimer(delayValue1: number, delayValue2: number) { - return timer(delayValue1, delayValue2); - } - - static isNotNullish(value: unknown): boolean { - return value !== undefined && value !== null; - } -} +// Angular +import { HttpParams } from '@angular/common/http'; +import { Inject, PLATFORM_ID } from '@angular/core'; + +// Shared +import { Params } from '../models'; +import { timer } from 'rxjs'; +export class Commons { + constructor(@Inject(PLATFORM_ID) public platformId: object) {} + + static followUrl($event: MouseEvent, item: { url: string }): void { + Commons.followExternalUrl($event, item); + } + + static followExternalUrl( + $event: MouseEvent, + item: { url: string; externalLink?: boolean } + ): void { + if ( + item && + item.url && + (item.externalLink || $event.button === 1 || ($event.button === 0 && $event.ctrlKey)) + ) { + Commons.openExternalUrl(item.url); + } + } + + static openExternalSelfUrl(url: string): void { + Commons.openExternalUrl(url, '_self'); + } + + static openExternalUrlWithoutParams(url: string, target?: string): void { + window.open(url, target || '_blank'); + } + + + static openExternalUrl(url: string, target?: string): void { + window.open(url + window.location.search, target || '_blank'); + } + + static downloadPDFBase64(pdf: string, name: string): void { + const linkSource = `data:application/pdf;base64,${pdf}`; + const downloadLink: HTMLAnchorElement = document.createElement('a'); + const fileName: string = name; + downloadLink.href = linkSource; + downloadLink.download = fileName; + downloadLink.click(); + } + + static downloadPDF(url: string, name: string, target?: string): void { + const targetLink = target || '_self'; + let link: HTMLAnchorElement | null = document.createElement('a'); + link.href = url; + link.download = name; + link.target = targetLink; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + link = null; + } + + static getDefaultLanguage(): string { + return navigator.language.split('-')[0] as string; + } + + static getFullName(user: { name: string; lastName: string }): string { + if (!user || !user.name) { + return ' '; + } + if (!user.lastName) { + return user.name; + } + return `${user.name} ${user.lastName}`; + } + + static setParamsToQueryUrl(obj: Params): string { + let params: string = ''; + for (const key in obj) { + if (obj[key]) { + const element = obj[key]; + params = params + '&' + key + '=' + element; + } + } + return params; + } + + static isEmpty(obj: unknown): boolean { + if (!obj) { + return true; + } + return JSON.stringify(obj) === JSON.stringify({}); + } + + static isNotEmpty(obj: unknown): boolean { + return !this.isEmpty(obj); + } + + static isStringEmpty = (str: string) => !str?.length; + + static buildRangeString( + minValue: number, + maxValue: number, + unit: string, + defaultLocale = '' + ): string { + if (!!minValue && !!maxValue) { + return `${minValue}${unit} - ${maxValue}${unit}`; + } + if (!!minValue) { + return `>${minValue}${unit}`; + } + if (!!maxValue) { + return `<${maxValue}${unit}`; + } + return defaultLocale; + } + + static removeEmptyValuesFromObject(obj: object): unknown { + return Object.fromEntries( + Object.entries(obj).filter( + ([_, v]) => v != null && v !== '' && (v as Array).length !== 0 + ) + ); + } + + static removeNullValuesFromQueryParams(params: HttpParams) { + const paramsKeysAux = params.keys(); + paramsKeysAux.forEach((key) => { + const value = params.get(key); + if (value === null || value === undefined || value === '' || value === 'null') { + params['map'].delete(key); + } + }); + return params; + } + + static removeDiacriticsFromString(str: string): string { + return str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + } + + static getScrollParent(node: HTMLElement): HTMLElement | null { + if (node == null) { + return null; + } + if (node.scrollHeight > node.clientHeight) { + return node; + } else { + return this.getScrollParent(node.parentNode as HTMLElement); + } + } + + static createIntervalUsingTimer(delayValue1: number, delayValue2: number) { + return timer(delayValue1, delayValue2); + } + + static isNotNullish(value: unknown): boolean { + return value !== undefined && value !== null; + } +} diff --git a/libs/ui/src/lib/util/common/index.ts b/libs/ui/src/lib/util/common/index.ts index 3adb498..155f95d 100644 --- a/libs/ui/src/lib/util/common/index.ts +++ b/libs/ui/src/lib/util/common/index.ts @@ -1,4 +1,4 @@ -// Common -export * from './common'; -export * from './sector'; -export * from './select-options'; +// Common +export * from './common'; +export * from './sector'; +export * from './select-options'; diff --git a/libs/ui/src/lib/util/common/sector.ts b/libs/ui/src/lib/util/common/sector.ts index f532540..722f3a4 100644 --- a/libs/ui/src/lib/util/common/sector.ts +++ b/libs/ui/src/lib/util/common/sector.ts @@ -1,26 +1,26 @@ -// Angular -import { Inject, PLATFORM_ID } from '@angular/core'; -import { Sector } from '../models'; -import { SectorType, SectorUidMatchLocale } from '../models'; - -export class SectorCommons { - constructor(@Inject(PLATFORM_ID) public platformId: object) {} - - static getSectorLocaleFromUid(uid: string): string { - const sectorLocale: string = SectorUidMatchLocale[uid as SectorType]; - return `common.sectors.${sectorLocale}`; - } - - static getLocaleListFromUidList(sectorUids: Array): Array { - return sectorUids?.map((uid) => SectorCommons.getSectorLocaleFromUid(uid)); - } - - static convertUidListToSectorList(sectorUids: Array, sectors: Array): Array { - return sectors?.filter((sector) => sectorUids?.includes(sector.sectorUid)); - } - - static convertSectorListToUidList(sectors: Array): Array { - return sectors?.map((sector) => sector?.sectorUid); - } -} - +// Angular +import { Inject, PLATFORM_ID } from '@angular/core'; +import { Sector } from '../models'; +import { SectorType, SectorUidMatchLocale } from '../models'; + +export class SectorCommons { + constructor(@Inject(PLATFORM_ID) public platformId: object) {} + + static getSectorLocaleFromUid(uid: string): string { + const sectorLocale: string = SectorUidMatchLocale[uid as SectorType]; + return `common.sectors.${sectorLocale}`; + } + + static getLocaleListFromUidList(sectorUids: Array): Array { + return sectorUids?.map((uid) => SectorCommons.getSectorLocaleFromUid(uid)); + } + + static convertUidListToSectorList(sectorUids: Array, sectors: Array): Array { + return sectors?.filter((sector) => sectorUids?.includes(sector.sectorUid)); + } + + static convertSectorListToUidList(sectors: Array): Array { + return sectors?.map((sector) => sector?.sectorUid); + } +} + diff --git a/libs/ui/src/lib/util/common/select-options.ts b/libs/ui/src/lib/util/common/select-options.ts index 51e375c..92d4c8d 100644 --- a/libs/ui/src/lib/util/common/select-options.ts +++ b/libs/ui/src/lib/util/common/select-options.ts @@ -1,21 +1,21 @@ -import { Inject, PLATFORM_ID } from '@angular/core'; -import { SelectOption } from '../../ui/select'; - -export class SelectOptionsCommons { - constructor(@Inject(PLATFORM_ID) public platformId: object) {} - - static convertStringstoSelectOptions( - values: Array, - options: Array - ): Array { - return options?.filter((item) => values?.includes(item.value)); - } - - static convertSelectOptionstoStrings(options: Array): Array { - return options?.map((item) => item?.value); - } - - static getSelectOptionValue(value: string, options: Array): any { - return options?.find((item) => item?.value == value); - } -} +import { Inject, PLATFORM_ID } from '@angular/core'; +import { SelectOption } from '../../ui/select'; + +export class SelectOptionsCommons { + constructor(@Inject(PLATFORM_ID) public platformId: object) {} + + static convertStringstoSelectOptions( + values: Array, + options: Array + ): Array { + return options?.filter((item) => values?.includes(item.value)); + } + + static convertSelectOptionstoStrings(options: Array): Array { + return options?.map((item) => item?.value); + } + + static getSelectOptionValue(value: string, options: Array): any { + return options?.find((item) => item?.value == value); + } +} diff --git a/libs/ui/src/lib/util/dato-cms/graphql.module.ts b/libs/ui/src/lib/util/dato-cms/graphql.module.ts index 8f6408c..45f99a2 100644 --- a/libs/ui/src/lib/util/dato-cms/graphql.module.ts +++ b/libs/ui/src/lib/util/dato-cms/graphql.module.ts @@ -1 +1 @@ -export const datoCms = "https://graphql.datocms.com/"; // our GraphQL API +export const datoCms = "https://graphql.datocms.com/"; // our GraphQL API diff --git a/libs/ui/src/lib/util/dato-cms/index.ts b/libs/ui/src/lib/util/dato-cms/index.ts index 5461bc4..ef59679 100644 --- a/libs/ui/src/lib/util/dato-cms/index.ts +++ b/libs/ui/src/lib/util/dato-cms/index.ts @@ -1 +1 @@ -export * from './util-dato-cms.module'; +export * from './util-dato-cms.module'; diff --git a/libs/ui/src/lib/util/device-configs/application/device-configs.facade.ts b/libs/ui/src/lib/util/device-configs/application/device-configs.facade.ts index 74bf175..4beffb6 100644 --- a/libs/ui/src/lib/util/device-configs/application/device-configs.facade.ts +++ b/libs/ui/src/lib/util/device-configs/application/device-configs.facade.ts @@ -1,37 +1,38 @@ -// Angular -import { Injectable, inject } from '@angular/core'; - -// Ngrx -import { Store } from '@ngrx/store'; - -// Rxjs -import { Observable } from 'rxjs'; - -// State -import { Browser, Device, Size } from '../entities/device-configs.model'; -import * as fromActions from '../state/device-configs.actions'; -import * as fromState from '../state/device-configs.reducer'; -import * as fromSelectors from '../state/device-configs.selectors'; - -@Injectable({ providedIn: 'root' }) -export class DeviceConfigsFacade { - // `inject()` en vez de parámetro de constructor: los inicializadores de - // propiedad de abajo se evalúan antes que los parámetros del constructor. - private readonly store = inject>(Store); - - // Device - readonly device$: Observable = this.store.select(fromSelectors.getDevice); - readonly size$: Observable = this.store.select(fromSelectors.getSize); - readonly isSmallDevice$: Observable = this.store.select(fromSelectors.getIsSmallDevice); - - // Browser - readonly browser$: Observable = this.store.select(fromSelectors.getBrowser); - - getBrowser(): void { - this.store.dispatch(fromActions.BrowserActions.getBrowser()); - } - - setDevice(device: Device): void { - this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device })); - } -} +// Angular +import { Injectable, inject } from '@angular/core'; + +// Ngrx +import { Store } from '@ngrx/store'; + +// Rxjs +import { Observable } from 'rxjs'; + +// State +import { Browser, Device, Size } from '../entities/device-configs.model'; +import * as fromActions from '../state/device-configs.actions'; +import * as fromState from '../state/device-configs.reducer'; +import * as fromSelectors from '../state/device-configs.selectors'; + +@Injectable({ providedIn: 'root' }) +export class DeviceConfigsFacade { + // `inject()` en vez de parámetro de constructor: los inicializadores de + // propiedad de abajo se evalúan antes que los parámetros del constructor. + private readonly store = inject>(Store); + + // Device + readonly device$: Observable = this.store.select(fromSelectors.getDevice); + // `null` hasta que se resuelve el tamaño (así lo declara el estado inicial) + readonly size$: Observable = this.store.select(fromSelectors.getSize); + readonly isSmallDevice$: Observable = this.store.select(fromSelectors.getIsSmallDevice); + + // Browser + readonly browser$: Observable = this.store.select(fromSelectors.getBrowser); + + getBrowser(): void { + this.store.dispatch(fromActions.BrowserActions.getBrowser()); + } + + setDevice(device: Device): void { + this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device })); + } +} diff --git a/libs/ui/src/lib/util/device-configs/entities/breakpoints.ts b/libs/ui/src/lib/util/device-configs/entities/breakpoints.ts index 8b0f290..4f423ec 100644 --- a/libs/ui/src/lib/util/device-configs/entities/breakpoints.ts +++ b/libs/ui/src/lib/util/device-configs/entities/breakpoints.ts @@ -1,19 +1,19 @@ -// BreakPoint Observer -// Main Breakpoints -export const MaxMobileBreakpoint = '(max-width: 640px)'; -export const MinTabletBreakpoint = '(min-width: 640px)'; -export const MaxTabletBreakpoint = '(max-width: 1240px)'; -export const MinDesktopBreakpoint = '(min-width: 1240px)'; - -// Inner Breakpoints -export const MinTabletSmallBreakpoint = '(min-width: 640px)'; -export const MaxTabletSmallBreakpoint = '(max-width: 992px)'; -export const MinTabletLargeBreakpoint = '(min-width: 992px)'; -export const MaxTabletLargeBreakpoint = '(max-width: 1240px)'; - -export const MinDesktopSmallBreakpoint = '(min-width: 1240px)'; -export const MaxDesktopSmallBreakpoint = '(max-width: 1440px)'; -export const MinDesktopMediumBreakpoint = '(min-width: 1440px)'; -export const MaxDesktopMediumBreakpoint = '(max-width: 1920px)'; - -export const MinDesktopLargeBreakpoint = '(min-width: 1920px)'; +// BreakPoint Observer +// Main Breakpoints +export const MaxMobileBreakpoint = '(max-width: 640px)'; +export const MinTabletBreakpoint = '(min-width: 640px)'; +export const MaxTabletBreakpoint = '(max-width: 1240px)'; +export const MinDesktopBreakpoint = '(min-width: 1240px)'; + +// Inner Breakpoints +export const MinTabletSmallBreakpoint = '(min-width: 640px)'; +export const MaxTabletSmallBreakpoint = '(max-width: 992px)'; +export const MinTabletLargeBreakpoint = '(min-width: 992px)'; +export const MaxTabletLargeBreakpoint = '(max-width: 1240px)'; + +export const MinDesktopSmallBreakpoint = '(min-width: 1240px)'; +export const MaxDesktopSmallBreakpoint = '(max-width: 1440px)'; +export const MinDesktopMediumBreakpoint = '(min-width: 1440px)'; +export const MaxDesktopMediumBreakpoint = '(max-width: 1920px)'; + +export const MinDesktopLargeBreakpoint = '(min-width: 1920px)'; diff --git a/libs/ui/src/lib/util/device-configs/entities/device-configs.model.ts b/libs/ui/src/lib/util/device-configs/entities/device-configs.model.ts index f390f89..7003f3d 100644 --- a/libs/ui/src/lib/util/device-configs/entities/device-configs.model.ts +++ b/libs/ui/src/lib/util/device-configs/entities/device-configs.model.ts @@ -1,5 +1,5 @@ -export type Device = 'MOBILE' | 'TABLET' | 'DESKTOP'; - -export type Size = 'SMALL' | 'MEDIUM' | 'LARGE'; - -export type Browser = 'EXPLORER' | 'FIREFOX' | 'EDGE' | 'CHROME' | 'SAFARI' | 'UNKNOWN'; +export type Device = 'MOBILE' | 'TABLET' | 'DESKTOP'; + +export type Size = 'SMALL' | 'MEDIUM' | 'LARGE'; + +export type Browser = 'EXPLORER' | 'FIREFOX' | 'EDGE' | 'CHROME' | 'SAFARI' | 'UNKNOWN'; diff --git a/libs/ui/src/lib/util/device-configs/index.ts b/libs/ui/src/lib/util/device-configs/index.ts index e22ae1a..25525b3 100644 --- a/libs/ui/src/lib/util/device-configs/index.ts +++ b/libs/ui/src/lib/util/device-configs/index.ts @@ -1,18 +1,18 @@ -// Application -export * from './application/device-configs.facade'; - -// Entities -export * from './entities/breakpoints'; -export * from './entities/device-configs.model'; - -// Services -export * from './services/device-configs.service'; - -// State -export * from './state/device-configs.actions'; -export * from './state/device-configs.effects'; -export * from './state/device-configs.selectors'; -export * from './state/device-configs.reducer'; -import * as DeviceTypeActions from './state/device-configs.actions'; -import * as DeviceTypeSelectors from './state/device-configs.selectors'; -export { DeviceTypeActions, DeviceTypeSelectors }; +// Application +export * from './application/device-configs.facade'; + +// Entities +export * from './entities/breakpoints'; +export * from './entities/device-configs.model'; + +// Services +export * from './services/device-configs.service'; + +// State +export * from './state/device-configs.actions'; +export * from './state/device-configs.effects'; +export * from './state/device-configs.selectors'; +export * from './state/device-configs.reducer'; +import * as DeviceTypeActions from './state/device-configs.actions'; +import * as DeviceTypeSelectors from './state/device-configs.selectors'; +export { DeviceTypeActions, DeviceTypeSelectors }; diff --git a/libs/ui/src/lib/util/device-configs/services/device-configs.service.ts b/libs/ui/src/lib/util/device-configs/services/device-configs.service.ts index a3f0bb4..38a6dfd 100644 --- a/libs/ui/src/lib/util/device-configs/services/device-configs.service.ts +++ b/libs/ui/src/lib/util/device-configs/services/device-configs.service.ts @@ -1,176 +1,176 @@ -import { BreakpointObserver } from '@angular/cdk/layout'; -import { DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; - -import { Store } from '@ngrx/store'; - -// Entities -import { - MaxDesktopMediumBreakpoint, - MaxDesktopSmallBreakpoint, - MaxMobileBreakpoint, - MaxTabletBreakpoint, - MaxTabletLargeBreakpoint, - MaxTabletSmallBreakpoint, - MinDesktopBreakpoint, - MinDesktopLargeBreakpoint, - MinDesktopMediumBreakpoint, - MinDesktopSmallBreakpoint, - MinTabletBreakpoint, - MinTabletLargeBreakpoint, - MinTabletSmallBreakpoint, -} from '../entities/breakpoints'; -import { Browser } from '../entities/device-configs.model'; - -// State -import * as fromActions from '../state/device-configs.actions'; -import { DeviceConfigsState } from '../state/device-configs.reducer'; - -@Injectable({ - providedIn: 'root', -}) -export class DeviceConfigsService { - private htmlTag!: HTMLElement; - - constructor( - private store: Store, - private breakpointObserver: BreakpointObserver, - @Inject(DOCUMENT) private document: Document, - @Inject(PLATFORM_ID) public platformId: Object - ) { - this.deviceConfigsHandler(); - } - - getUserBrowser(): Browser { - const userAgent = window.navigator.userAgent; - if (/MSIE|Trident/.test(userAgent)) { - return 'EXPLORER'; - } else if (/Firefox/.test(userAgent)) { - return'FIREFOX'; - } else if (/Edg|Edge/.test(userAgent)) { - return 'EDGE'; - } else if (/Chrome/.test(userAgent) && !/Edg|Edge/.test(userAgent)) { - return 'CHROME'; - } else if (/Safari/.test(userAgent) && !/Edg|Edge/.test(userAgent)) { - return 'SAFARI'; - } else { - return 'UNKNOWN'; - } - } - - private deviceConfigsHandler(): void { - if (isPlatformBrowser(this.platformId)) { - this.htmlTag = this.document?.documentElement; - this.breakpointObserver - .observe([ - MaxMobileBreakpoint, - MinTabletBreakpoint, - MaxTabletBreakpoint, - MinDesktopBreakpoint, - // Inner - MinTabletSmallBreakpoint, - MaxTabletSmallBreakpoint, - MinTabletLargeBreakpoint, - MaxTabletLargeBreakpoint, - MinDesktopSmallBreakpoint, - MaxDesktopSmallBreakpoint, - MinDesktopMediumBreakpoint, - MaxDesktopMediumBreakpoint, - MinDesktopLargeBreakpoint, - ]) - .subscribe((result) => { - if (result.matches) { - // Mobile - if (result.breakpoints[MaxMobileBreakpoint]) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device: 'MOBILE' })); - this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'SMALL' })); - this.setClassIsMobile(); - } - // Tablet - if ( - result.breakpoints[MinTabletBreakpoint] && - result.breakpoints[MaxTabletBreakpoint] - ) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device: 'TABLET' })); - this.setClassIsTablet(); - // Tablet S - if ( - result.breakpoints[MinTabletSmallBreakpoint] && - result.breakpoints[MaxTabletSmallBreakpoint] - ) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'SMALL' })); - this.setClassIsTabletSmall(); - } - // Tablet L - if ( - result.breakpoints[MinTabletLargeBreakpoint] && - result.breakpoints[MaxTabletLargeBreakpoint] - ) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'LARGE' })); - this.setClassIsTabletLarge(); - } - } - - // Desktop - if (result.breakpoints[MinDesktopBreakpoint]) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device: 'DESKTOP' })); - this.setClassIsDesktop(); - // Desktop S - if ( - result.breakpoints[MinDesktopSmallBreakpoint] && - result.breakpoints[MaxDesktopSmallBreakpoint] - ) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'SMALL' })); - this.setClassIsDesktopSmall(); - } - // Desktop M - if ( - result.breakpoints[MinDesktopMediumBreakpoint] && - result.breakpoints[MaxDesktopMediumBreakpoint] - ) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'MEDIUM' })); - this.setClassIsDesktopMedium(); - } - // Desktop L - if (result.breakpoints[MinDesktopLargeBreakpoint]) { - this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'LARGE' })); - this.setClassIsDesktopLarge(); - } - } - } - }); - } - } - - private setClassIsMobile(): void { - this.htmlTag.setAttribute('class', 'is-mobile'); - } - - private setClassIsTablet(): void { - this.htmlTag.setAttribute('class', 'is-tablet'); - } - - private setClassIsTabletSmall(): void { - this.htmlTag.setAttribute('class', 'is-tablet is-tablet__small'); - } - - private setClassIsTabletLarge(): void { - this.htmlTag.setAttribute('class', 'is-tablet is-tablet__large'); - } - - private setClassIsDesktop(): void { - this.htmlTag.setAttribute('class', 'is-desktop'); - } - - private setClassIsDesktopSmall(): void { - this.htmlTag.setAttribute('class', 'is-desktop is-desktop__small'); - } - - private setClassIsDesktopMedium(): void { - this.htmlTag.setAttribute('class', 'is-desktop is-desktop__medium'); - } - - private setClassIsDesktopLarge(): void { - this.htmlTag.setAttribute('class', 'is-desktop is-desktop__large'); - } -} +import { BreakpointObserver } from '@angular/cdk/layout'; +import { DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; + +import { Store } from '@ngrx/store'; + +// Entities +import { + MaxDesktopMediumBreakpoint, + MaxDesktopSmallBreakpoint, + MaxMobileBreakpoint, + MaxTabletBreakpoint, + MaxTabletLargeBreakpoint, + MaxTabletSmallBreakpoint, + MinDesktopBreakpoint, + MinDesktopLargeBreakpoint, + MinDesktopMediumBreakpoint, + MinDesktopSmallBreakpoint, + MinTabletBreakpoint, + MinTabletLargeBreakpoint, + MinTabletSmallBreakpoint, +} from '../entities/breakpoints'; +import { Browser } from '../entities/device-configs.model'; + +// State +import * as fromActions from '../state/device-configs.actions'; +import { DeviceConfigsState } from '../state/device-configs.reducer'; + +@Injectable({ + providedIn: 'root', +}) +export class DeviceConfigsService { + private htmlTag!: HTMLElement; + + constructor( + private store: Store, + private breakpointObserver: BreakpointObserver, + @Inject(DOCUMENT) private document: Document, + @Inject(PLATFORM_ID) public platformId: Object + ) { + this.deviceConfigsHandler(); + } + + getUserBrowser(): Browser { + const userAgent = window.navigator.userAgent; + if (/MSIE|Trident/.test(userAgent)) { + return 'EXPLORER'; + } else if (/Firefox/.test(userAgent)) { + return'FIREFOX'; + } else if (/Edg|Edge/.test(userAgent)) { + return 'EDGE'; + } else if (/Chrome/.test(userAgent) && !/Edg|Edge/.test(userAgent)) { + return 'CHROME'; + } else if (/Safari/.test(userAgent) && !/Edg|Edge/.test(userAgent)) { + return 'SAFARI'; + } else { + return 'UNKNOWN'; + } + } + + private deviceConfigsHandler(): void { + if (isPlatformBrowser(this.platformId)) { + this.htmlTag = this.document?.documentElement; + this.breakpointObserver + .observe([ + MaxMobileBreakpoint, + MinTabletBreakpoint, + MaxTabletBreakpoint, + MinDesktopBreakpoint, + // Inner + MinTabletSmallBreakpoint, + MaxTabletSmallBreakpoint, + MinTabletLargeBreakpoint, + MaxTabletLargeBreakpoint, + MinDesktopSmallBreakpoint, + MaxDesktopSmallBreakpoint, + MinDesktopMediumBreakpoint, + MaxDesktopMediumBreakpoint, + MinDesktopLargeBreakpoint, + ]) + .subscribe((result) => { + if (result.matches) { + // Mobile + if (result.breakpoints[MaxMobileBreakpoint]) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device: 'MOBILE' })); + this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'SMALL' })); + this.setClassIsMobile(); + } + // Tablet + if ( + result.breakpoints[MinTabletBreakpoint] && + result.breakpoints[MaxTabletBreakpoint] + ) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device: 'TABLET' })); + this.setClassIsTablet(); + // Tablet S + if ( + result.breakpoints[MinTabletSmallBreakpoint] && + result.breakpoints[MaxTabletSmallBreakpoint] + ) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'SMALL' })); + this.setClassIsTabletSmall(); + } + // Tablet L + if ( + result.breakpoints[MinTabletLargeBreakpoint] && + result.breakpoints[MaxTabletLargeBreakpoint] + ) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'LARGE' })); + this.setClassIsTabletLarge(); + } + } + + // Desktop + if (result.breakpoints[MinDesktopBreakpoint]) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceType({ device: 'DESKTOP' })); + this.setClassIsDesktop(); + // Desktop S + if ( + result.breakpoints[MinDesktopSmallBreakpoint] && + result.breakpoints[MaxDesktopSmallBreakpoint] + ) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'SMALL' })); + this.setClassIsDesktopSmall(); + } + // Desktop M + if ( + result.breakpoints[MinDesktopMediumBreakpoint] && + result.breakpoints[MaxDesktopMediumBreakpoint] + ) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'MEDIUM' })); + this.setClassIsDesktopMedium(); + } + // Desktop L + if (result.breakpoints[MinDesktopLargeBreakpoint]) { + this.store.dispatch(fromActions.DeviceActions.saveDeviceSize({ size: 'LARGE' })); + this.setClassIsDesktopLarge(); + } + } + } + }); + } + } + + private setClassIsMobile(): void { + this.htmlTag.setAttribute('class', 'is-mobile'); + } + + private setClassIsTablet(): void { + this.htmlTag.setAttribute('class', 'is-tablet'); + } + + private setClassIsTabletSmall(): void { + this.htmlTag.setAttribute('class', 'is-tablet is-tablet__small'); + } + + private setClassIsTabletLarge(): void { + this.htmlTag.setAttribute('class', 'is-tablet is-tablet__large'); + } + + private setClassIsDesktop(): void { + this.htmlTag.setAttribute('class', 'is-desktop'); + } + + private setClassIsDesktopSmall(): void { + this.htmlTag.setAttribute('class', 'is-desktop is-desktop__small'); + } + + private setClassIsDesktopMedium(): void { + this.htmlTag.setAttribute('class', 'is-desktop is-desktop__medium'); + } + + private setClassIsDesktopLarge(): void { + this.htmlTag.setAttribute('class', 'is-desktop is-desktop__large'); + } +} diff --git a/libs/ui/src/lib/util/device-configs/state/device-configs.actions.ts b/libs/ui/src/lib/util/device-configs/state/device-configs.actions.ts index cccd46e..4cc7144 100644 --- a/libs/ui/src/lib/util/device-configs/state/device-configs.actions.ts +++ b/libs/ui/src/lib/util/device-configs/state/device-configs.actions.ts @@ -1,22 +1,22 @@ -import { createActionGroup, emptyProps, props } from '@ngrx/store'; - -// Entities -import { Device, Size, Browser } from '../entities/device-configs.model'; - - -export const DeviceActions = createActionGroup({ - source: '[Main] Get Device Breakpoints', - events: { - 'Save Device Type': props<{ device: Device }>(), - 'Save Device Size': props<{ size: Size }>() - }, -}); - -export const BrowserActions = createActionGroup({ - source: '[Main] Get Browser', - events: { - 'Get Browser': emptyProps(), - 'Get Browser Success': props<{ response: Browser }>(), - 'Get Browser Error': emptyProps(), - }, -}); +import { createActionGroup, emptyProps, props } from '@ngrx/store'; + +// Entities +import { Device, Size, Browser } from '../entities/device-configs.model'; + + +export const DeviceActions = createActionGroup({ + source: '[Main] Get Device Breakpoints', + events: { + 'Save Device Type': props<{ device: Device }>(), + 'Save Device Size': props<{ size: Size }>() + }, +}); + +export const BrowserActions = createActionGroup({ + source: '[Main] Get Browser', + events: { + 'Get Browser': emptyProps(), + 'Get Browser Success': props<{ response: Browser }>(), + 'Get Browser Error': emptyProps(), + }, +}); diff --git a/libs/ui/src/lib/util/device-configs/state/device-configs.effects.ts b/libs/ui/src/lib/util/device-configs/state/device-configs.effects.ts index cc789a6..62e5a40 100644 --- a/libs/ui/src/lib/util/device-configs/state/device-configs.effects.ts +++ b/libs/ui/src/lib/util/device-configs/state/device-configs.effects.ts @@ -1,35 +1,35 @@ -import { Injectable } from '@angular/core'; - -// Rxjs -import { of } from 'rxjs'; -import { catchError, exhaustMap, map } from 'rxjs/operators'; - -// Ngrx -import { Actions, createEffect, ofType } from '@ngrx/effects'; - -// Actions -import * as fromActions from './device-configs.actions'; - -// Service -import { DeviceConfigsService } from '../services/device-configs.service'; - -@Injectable() -export class DeviceConfigsEffects { - constructor(private deviceConfigsService: DeviceConfigsService, private actions: Actions) {} - - getBrowser$ = createEffect(() => { - return this.actions.pipe( - ofType(fromActions.BrowserActions.getBrowser), - exhaustMap(() => - of(this.deviceConfigsService.getUserBrowser()).pipe( - map((response) => { - return fromActions.BrowserActions.getBrowserSuccess({ response }); - }), - catchError(() => { - return of(fromActions.BrowserActions.getBrowserError()); - }) - ) - ) - ); - }); -} +import { Injectable } from '@angular/core'; + +// Rxjs +import { of } from 'rxjs'; +import { catchError, exhaustMap, map } from 'rxjs/operators'; + +// Ngrx +import { Actions, createEffect, ofType } from '@ngrx/effects'; + +// Actions +import * as fromActions from './device-configs.actions'; + +// Service +import { DeviceConfigsService } from '../services/device-configs.service'; + +@Injectable() +export class DeviceConfigsEffects { + constructor(private deviceConfigsService: DeviceConfigsService, private actions: Actions) {} + + getBrowser$ = createEffect(() => { + return this.actions.pipe( + ofType(fromActions.BrowserActions.getBrowser), + exhaustMap(() => + of(this.deviceConfigsService.getUserBrowser()).pipe( + map((response) => { + return fromActions.BrowserActions.getBrowserSuccess({ response }); + }), + catchError(() => { + return of(fromActions.BrowserActions.getBrowserError()); + }) + ) + ) + ); + }); +} diff --git a/libs/ui/src/lib/util/device-configs/state/device-configs.reducer.ts b/libs/ui/src/lib/util/device-configs/state/device-configs.reducer.ts index a3ff10b..1727a84 100644 --- a/libs/ui/src/lib/util/device-configs/state/device-configs.reducer.ts +++ b/libs/ui/src/lib/util/device-configs/state/device-configs.reducer.ts @@ -1,32 +1,32 @@ -import { createReducer, on } from '@ngrx/store'; -import * as fromActions from './device-configs.actions'; - -import { Device, Size, Browser } from '../entities/device-configs.model'; - -export const featureKey = 'CORE_deviceConfigs'; - -export interface DeviceConfigsState { - device: Device; - size: Size; - browser: Browser -} - -export const initialState: DeviceConfigsState = { - device: 'DESKTOP', - size: null, - browser: 'UNKNOWN' -}; - -export const deviceConfigsReducer = createReducer( - initialState, - on(fromActions.DeviceActions.saveDeviceType, (state, action) => { - return { ...state, device: action.device }; - }), - - on(fromActions.DeviceActions.saveDeviceSize, (state, action) => { - return { ...state, size: action.size }; - }), - on(fromActions.BrowserActions.getBrowserSuccess, (state, action) => { - return { ...state, browser: action.response }; - }) -); +import { createReducer, on } from '@ngrx/store'; +import * as fromActions from './device-configs.actions'; + +import { Device, Size, Browser } from '../entities/device-configs.model'; + +export const featureKey = 'CORE_deviceConfigs'; + +export interface DeviceConfigsState { + device: Device; + size: Size | null; + browser: Browser +} + +export const initialState: DeviceConfigsState = { + device: 'DESKTOP', + size: null, + browser: 'UNKNOWN' +}; + +export const deviceConfigsReducer = createReducer( + initialState, + on(fromActions.DeviceActions.saveDeviceType, (state, action) => { + return { ...state, device: action.device }; + }), + + on(fromActions.DeviceActions.saveDeviceSize, (state, action) => { + return { ...state, size: action.size }; + }), + on(fromActions.BrowserActions.getBrowserSuccess, (state, action) => { + return { ...state, browser: action.response }; + }) +); diff --git a/libs/ui/src/lib/util/device-configs/state/device-configs.selectors.ts b/libs/ui/src/lib/util/device-configs/state/device-configs.selectors.ts index b4547c2..97af5b0 100644 --- a/libs/ui/src/lib/util/device-configs/state/device-configs.selectors.ts +++ b/libs/ui/src/lib/util/device-configs/state/device-configs.selectors.ts @@ -1,19 +1,19 @@ -import { createSelector, createFeatureSelector } from '@ngrx/store'; - -import * as fromReducer from './device-configs.reducer'; - -export const getFeatureState = createFeatureSelector( - fromReducer.featureKey -); - -// Device Breakpoints -export const getDevice = createSelector(getFeatureState, (state) => state.device); -export const getSize = createSelector(getFeatureState, (state) => state.size); - -// Mobile & Tablet S -export const getIsSmallDevice = createSelector(getFeatureState, (state) => { - return state.device !== 'DESKTOP' && state.size !== 'LARGE'; -}); - -// Browser -export const getBrowser = createSelector(getFeatureState, (state) => state.browser); +import { createSelector, createFeatureSelector } from '@ngrx/store'; + +import * as fromReducer from './device-configs.reducer'; + +export const getFeatureState = createFeatureSelector( + fromReducer.featureKey +); + +// Device Breakpoints +export const getDevice = createSelector(getFeatureState, (state) => state.device); +export const getSize = createSelector(getFeatureState, (state) => state.size); + +// Mobile & Tablet S +export const getIsSmallDevice = createSelector(getFeatureState, (state) => { + return state.device !== 'DESKTOP' && state.size !== 'LARGE'; +}); + +// Browser +export const getBrowser = createSelector(getFeatureState, (state) => state.browser); diff --git a/libs/ui/src/lib/util/environments/environment.dev.ts b/libs/ui/src/lib/util/environments/environment.dev.ts index 97edbd7..fe6bc02 100644 --- a/libs/ui/src/lib/util/environments/environment.dev.ts +++ b/libs/ui/src/lib/util/environments/environment.dev.ts @@ -1,26 +1,26 @@ -export const environment: any = { - production: false, - mandatorySignIn: false, - authenticationFlowType: 'USER_SRP_AUTH', - identityPoolId: 'eu-west-1:25f8388c-3826-4d38-acaa-0bfcb3f6251f', - region: 'eu-west-1', - identityPoolRegion: 'eu-west-1', - userPoolId: 'eu-west-1_vYyt3eApk', - userPoolWebClientId: '4bss36r712padssbhco9vg2uej', - API: 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/', - CREATE_LEAD_INVESTOR: - 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/lead/investor', - COGNITO_ID: '4bss36r712padssbhco9vg2uej', - INTERCOM_IDENTITY_VERIFICATION_SECRET: 'jpIdk_gk6pGDaJkTOMpfEWzhaoTKCi6zpR-GbkRi', - DATO_KEY: 'Bearer ca9c292a00a5ca85e7b08e5a04185a', - DATO_DEV_ENVIRONMENT: 'development', - DATO_PROD_ENVIRONMENT: 'master', - oauth: { - domain: 'staging-oauth.deale.es', - scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'], - redirectSignIn: 'https://staging-app.deale.es/auth', - redirectSignOut: 'https://staging-app.deale.es/auth', - responseType: 'code', - }, - federationTarget: 'COGNITO_USER_POOLS', -}; +export const environment: any = { + production: false, + mandatorySignIn: false, + authenticationFlowType: 'USER_SRP_AUTH', + identityPoolId: 'eu-west-1:25f8388c-3826-4d38-acaa-0bfcb3f6251f', + region: 'eu-west-1', + identityPoolRegion: 'eu-west-1', + userPoolId: 'eu-west-1_vYyt3eApk', + userPoolWebClientId: '4bss36r712padssbhco9vg2uej', + API: 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/', + CREATE_LEAD_INVESTOR: + 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/lead/investor', + COGNITO_ID: '4bss36r712padssbhco9vg2uej', + INTERCOM_IDENTITY_VERIFICATION_SECRET: 'jpIdk_gk6pGDaJkTOMpfEWzhaoTKCi6zpR-GbkRi', + DATO_KEY: 'Bearer ca9c292a00a5ca85e7b08e5a04185a', + DATO_DEV_ENVIRONMENT: 'development', + DATO_PROD_ENVIRONMENT: 'master', + oauth: { + domain: 'staging-oauth.deale.es', + scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'], + redirectSignIn: 'https://staging-app.deale.es/auth', + redirectSignOut: 'https://staging-app.deale.es/auth', + responseType: 'code', + }, + federationTarget: 'COGNITO_USER_POOLS', +}; diff --git a/libs/ui/src/lib/util/environments/environment.prod.ts b/libs/ui/src/lib/util/environments/environment.prod.ts index c5b5ca3..eb56de2 100644 --- a/libs/ui/src/lib/util/environments/environment.prod.ts +++ b/libs/ui/src/lib/util/environments/environment.prod.ts @@ -1,25 +1,25 @@ -export const environment: any = { - production: true, - identityPoolId: 'eu-west-1:571db516-5c84-40bd-bd16-aeb121805dea', - region: 'eu-west-1', - identityPoolRegion: 'eu-west-1', - userPoolId: 'eu-west-1_nZwcGc84a', - userPoolWebClientId: '31k1diku58oftoddd35l5ablri', - mandatorySignIn: false, - authenticationFlowType: 'USER_SRP_AUTH', - API: 'https://9e02sawl11.execute-api.eu-west-1.amazonaws.com/prod/', - CREATE_LEAD_INVESTOR: 'https://9e02sawl11.execute-api.eu-west-1.amazonaws.com/prod/lead/investor', - COGNITO_ID: '31k1diku58oftoddd35l5ablri', - INTERCOM_IDENTITY_VERIFICATION_SECRET: "jpIdk_gk6pGDaJkTOMpfEWzhaoTKCi6zpR-GbkRi", - DATO_KEY: 'Bearer ca9c292a00a5ca85e7b08e5a04185a', - DATO_DEV_ENVIRONMENT: 'development', - DATO_PROD_ENVIRONMENT: 'master', - oauth: { - domain: 'oauth.deale.es', - scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'], - redirectSignIn: 'https://app.deale.es/auth', - redirectSignOut: 'https://app.deale.es/auth', - responseType: 'code', - }, - federationTarget: 'COGNITO_USER_POOLS', -}; +export const environment: any = { + production: true, + identityPoolId: 'eu-west-1:571db516-5c84-40bd-bd16-aeb121805dea', + region: 'eu-west-1', + identityPoolRegion: 'eu-west-1', + userPoolId: 'eu-west-1_nZwcGc84a', + userPoolWebClientId: '31k1diku58oftoddd35l5ablri', + mandatorySignIn: false, + authenticationFlowType: 'USER_SRP_AUTH', + API: 'https://9e02sawl11.execute-api.eu-west-1.amazonaws.com/prod/', + CREATE_LEAD_INVESTOR: 'https://9e02sawl11.execute-api.eu-west-1.amazonaws.com/prod/lead/investor', + COGNITO_ID: '31k1diku58oftoddd35l5ablri', + INTERCOM_IDENTITY_VERIFICATION_SECRET: "jpIdk_gk6pGDaJkTOMpfEWzhaoTKCi6zpR-GbkRi", + DATO_KEY: 'Bearer ca9c292a00a5ca85e7b08e5a04185a', + DATO_DEV_ENVIRONMENT: 'development', + DATO_PROD_ENVIRONMENT: 'master', + oauth: { + domain: 'oauth.deale.es', + scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'], + redirectSignIn: 'https://app.deale.es/auth', + redirectSignOut: 'https://app.deale.es/auth', + responseType: 'code', + }, + federationTarget: 'COGNITO_USER_POOLS', +}; diff --git a/libs/ui/src/lib/util/environments/environment.ts b/libs/ui/src/lib/util/environments/environment.ts index 68d242d..a922c2c 100644 --- a/libs/ui/src/lib/util/environments/environment.ts +++ b/libs/ui/src/lib/util/environments/environment.ts @@ -1,39 +1,39 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment: any = { - production: false, - mandatorySignIn: false, - authenticationFlowType: 'USER_SRP_AUTH', - identityPoolId: 'eu-west-1:25f8388c-3826-4d38-acaa-0bfcb3f6251f', - region: 'eu-west-1', - identityPoolRegion: 'eu-west-1', - userPoolId: 'eu-west-1_vYyt3eApk', - userPoolWebClientId: '4bss36r712padssbhco9vg2uej', - API: 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/', - CREATE_LEAD_INVESTOR: - 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/lead/investor', - COGNITO_ID: '4bss36r712padssbhco9vg2uej', - INTERCOM_IDENTITY_VERIFICATION_SECRET: 'jpIdk_gk6pGDaJkTOMpfEWzhaoTKCi6zpR-GbkRi', - DATO_KEY: 'Bearer ca9c292a00a5ca85e7b08e5a04185a', - DATO_DEV_ENVIRONMENT: 'development', - DATO_PROD_ENVIRONMENT: 'master', - oauth: { - domain: 'staging-oauth.deale.es', - scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'], - redirectSignIn: 'https://staging-app.deale.es/auth', - redirectSignOut: 'https://staging-app.deale.es/auth', - responseType: 'code', - }, - federationTarget: 'COGNITO_USER_POOLS', -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment: any = { + production: false, + mandatorySignIn: false, + authenticationFlowType: 'USER_SRP_AUTH', + identityPoolId: 'eu-west-1:25f8388c-3826-4d38-acaa-0bfcb3f6251f', + region: 'eu-west-1', + identityPoolRegion: 'eu-west-1', + userPoolId: 'eu-west-1_vYyt3eApk', + userPoolWebClientId: '4bss36r712padssbhco9vg2uej', + API: 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/', + CREATE_LEAD_INVESTOR: + 'https://d1u3b69g4c.execute-api.eu-west-1.amazonaws.com/staging/lead/investor', + COGNITO_ID: '4bss36r712padssbhco9vg2uej', + INTERCOM_IDENTITY_VERIFICATION_SECRET: 'jpIdk_gk6pGDaJkTOMpfEWzhaoTKCi6zpR-GbkRi', + DATO_KEY: 'Bearer ca9c292a00a5ca85e7b08e5a04185a', + DATO_DEV_ENVIRONMENT: 'development', + DATO_PROD_ENVIRONMENT: 'master', + oauth: { + domain: 'staging-oauth.deale.es', + scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'], + redirectSignIn: 'https://staging-app.deale.es/auth', + redirectSignOut: 'https://staging-app.deale.es/auth', + responseType: 'code', + }, + federationTarget: 'COGNITO_USER_POOLS', +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/libs/ui/src/lib/util/environments/index.ts b/libs/ui/src/lib/util/environments/index.ts index 309b845..5d04aeb 100644 --- a/libs/ui/src/lib/util/environments/index.ts +++ b/libs/ui/src/lib/util/environments/index.ts @@ -1 +1 @@ -export * from './environment'; +export * from './environment'; diff --git a/libs/ui/src/lib/util/form-control/form-control.ts b/libs/ui/src/lib/util/form-control/form-control.ts index b8c27e7..beb94a2 100644 --- a/libs/ui/src/lib/util/form-control/form-control.ts +++ b/libs/ui/src/lib/util/form-control/form-control.ts @@ -1,52 +1,52 @@ -import { Injectable, Injector } from '@angular/core'; -import { ControlContainer, ControlValueAccessor } from '@angular/forms'; - -@Injectable() -export class PiFormControl implements ControlValueAccessor { - value: number | string | Array | boolean; - - onChange = (value: number | string | Array | boolean) => {}; - - onTouched = () => {}; - - disabled = false; - focused = false; - touched = false; - - constructor(protected injector: Injector) {} - - get controlContainer(): any { - return this.injector.get(ControlContainer); - } - - writeValue(value: number | string | Array | boolean) { - this.value = value; - } - - registerOnChange(onChange: any) { - this.onChange = onChange; - } - - registerOnTouched(onTouched: any) { - this.onTouched = onTouched; - } - - markAsTouched() { - if (!this.touched) { - this.onTouched(); - this.touched = true; - } - } - - setDisabledState(disabled: boolean) { - this.disabled = disabled; - } - - onFocus(): void { - this.focused = true; - } - - onBlur(): void { - this.focused = false; - } -} +import { Injectable, Injector } from '@angular/core'; +import { ControlContainer, ControlValueAccessor } from '@angular/forms'; + +@Injectable() +export class PiFormControl implements ControlValueAccessor { + value!: number | string | Array | boolean; + + onChange = (value: number | string | Array | boolean) => {}; + + onTouched = () => {}; + + disabled = false; + focused = false; + touched = false; + + constructor(protected injector: Injector) {} + + get controlContainer(): any { + return this.injector.get(ControlContainer); + } + + writeValue(value: number | string | Array | boolean) { + this.value = value; + } + + registerOnChange(onChange: any) { + this.onChange = onChange; + } + + registerOnTouched(onTouched: any) { + this.onTouched = onTouched; + } + + markAsTouched() { + if (!this.touched) { + this.onTouched(); + this.touched = true; + } + } + + setDisabledState(disabled: boolean) { + this.disabled = disabled; + } + + onFocus(): void { + this.focused = true; + } + + onBlur(): void { + this.focused = false; + } +} diff --git a/libs/ui/src/lib/util/form-control/index.ts b/libs/ui/src/lib/util/form-control/index.ts index ef845da..75b8858 100644 --- a/libs/ui/src/lib/util/form-control/index.ts +++ b/libs/ui/src/lib/util/form-control/index.ts @@ -1 +1 @@ -export * from './form-control'; +export * from './form-control'; diff --git a/libs/ui/src/lib/util/icon-registry/icon-registry.service.ts b/libs/ui/src/lib/util/icon-registry/icon-registry.service.ts index 347ca82..a6a717c 100644 --- a/libs/ui/src/lib/util/icon-registry/icon-registry.service.ts +++ b/libs/ui/src/lib/util/icon-registry/icon-registry.service.ts @@ -1,29 +1,29 @@ -import { Injectable } from '@angular/core'; -import { MatIconRegistry } from '@angular/material/icon'; -import { DomSanitizer } from '@angular/platform-browser'; -import { customIcons } from './icons.data'; - -@Injectable({ - providedIn: 'root', -}) -export class IconRegistryService { - constructor( - private matIconRegistry: MatIconRegistry, - private domSanitizer: DomSanitizer - ) {} - - init(): void { - this.registerIcons(customIcons, 'assets/icons/'); - } - - registerIcons(icons: Array, path: string) { - icons.forEach((icon) => { - this.matIconRegistry.addSvgIcon( - icon, - this.domSanitizer.bypassSecurityTrustResourceUrl(path + icon + '.svg') - ); - }); - } -} - - +import { Injectable } from '@angular/core'; +import { MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; +import { customIcons } from './icons.data'; + +@Injectable({ + providedIn: 'root', +}) +export class IconRegistryService { + constructor( + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer + ) {} + + init(): void { + this.registerIcons(customIcons, 'assets/icons/'); + } + + registerIcons(icons: Array, path: string) { + icons.forEach((icon) => { + this.matIconRegistry.addSvgIcon( + icon, + this.domSanitizer.bypassSecurityTrustResourceUrl(path + icon + '.svg') + ); + }); + } +} + + diff --git a/libs/ui/src/lib/util/icon-registry/icons.data.ts b/libs/ui/src/lib/util/icon-registry/icons.data.ts index a0d04e8..4137a51 100644 --- a/libs/ui/src/lib/util/icon-registry/icons.data.ts +++ b/libs/ui/src/lib/util/icon-registry/icons.data.ts @@ -1,167 +1,167 @@ -export const customIcons = [ - 'add-stroked', - 'add', - 'agriculture', - 'arrow-back', - 'arrow-down', - 'arrow-forward', - 'arrow-secondary-back', - 'arrow-secondary-down', - 'arrow-secondary-forward', - 'arrow-secondary-up', - 'arrow-up', - 'arrow-up-rounded', - 'attachment', - 'bankruptcy', - 'biotech', - 'briefcase', - 'box', - 'buildings', - 'calendar', - 'calendar-plus', - 'calendly', - 'caret', - 'chat', - 'check-rounded', - 'check', - 'chemistry-and-materials', - 'chevron-back', - 'chevron-down', - 'chevron-forward', - 'chevron-up', - 'choose', - 'circle', - 'click', - 'clip', - 'close-rounded', - 'close', - 'coin', - 'coins', - 'connect', - 'construction', - 'consumer', - 'dashboard', - 'dealbox', - 'details', - 'diagram', - 'dialog', - 'distribution', - 'document', - 'document-add', - 'document-search', - 'document-euro', - 'document-substract', - 'dollar', - 'double-chevron-back', - 'download-teaser', - 'download', - 'due-diligence', - 'e-commerce', - 'ebitda', - 'edit', - 'education', - 'email', - 'email-plus', - 'enter', - 'entertainment', - 'estimation-time', - 'euro', - 'exclamation', - 'exclusivity', - 'expand', - 'eye-off', - 'eye', - 'file-coins', - 'filter', - 'financial-services', - 'flag-grey', - 'focus', - 'globe', - 'google', - 'graphic', - 'grid', - 'hamburguer', - 'headquarters', - 'healthcare', - 'hospitality', - 'industrial', - 'info', - 'it-internet', - 'legal', - 'light-bulb', - 'link', - 'linkedin', - 'list', - 'location', - 'lock', - 'login', - 'logistics', - 'manufacturing', - 'marketing-media', - 'meeting', - 'messages', - 'messages-left', - 'messy-coin-stack', - 'metric-down-arrow', - 'metric-up-arrow', - 'mining', - 'mobility', - 'money-transfer', - 'more', - 'my-company', - 'nif-company', - 'notification-off', - 'notification-on', - 'operations', - 'opportunities', - 'optimum', - 'other-services', - 'percentage', - 'person-lines', - 'phone', - 'phone-arrow', - 'physical', - 'play-arrow', - 'premium', - 'pricing', - 'professional-services', - 'public-administration', - 'purchase-mandates', - 'question', - 'raw-materials', - 'real-estate', - 'search', - 'select', - 'sell-mandates', - 'send-information', - 'shareholders', - 'signature', - 'sort', - 'star-primary', - 'star-fill', - 'star-outline', - 'substract-stroked', - 'substract', - 'support', - 'telecomunications', - 'telephone', - 'telephone-fill', - 'time-detail', - 'time-zone', - 'transmission', - 'transport-logistics', - 'trash', - 'twitter', - 'upload', - 'user-profile', - 'user-profile-advisor', - 'user-profile-company', - 'user', - 'utilities', - 'verification-list', - 'verified-money', - 'website', - 'whatsapp', - 'youtube', - 'zoom', -]; +export const customIcons = [ + 'add-stroked', + 'add', + 'agriculture', + 'arrow-back', + 'arrow-down', + 'arrow-forward', + 'arrow-secondary-back', + 'arrow-secondary-down', + 'arrow-secondary-forward', + 'arrow-secondary-up', + 'arrow-up', + 'arrow-up-rounded', + 'attachment', + 'bankruptcy', + 'biotech', + 'briefcase', + 'box', + 'buildings', + 'calendar', + 'calendar-plus', + 'calendly', + 'caret', + 'chat', + 'check-rounded', + 'check', + 'chemistry-and-materials', + 'chevron-back', + 'chevron-down', + 'chevron-forward', + 'chevron-up', + 'choose', + 'circle', + 'click', + 'clip', + 'close-rounded', + 'close', + 'coin', + 'coins', + 'connect', + 'construction', + 'consumer', + 'dashboard', + 'dealbox', + 'details', + 'diagram', + 'dialog', + 'distribution', + 'document', + 'document-add', + 'document-search', + 'document-euro', + 'document-substract', + 'dollar', + 'double-chevron-back', + 'download-teaser', + 'download', + 'due-diligence', + 'e-commerce', + 'ebitda', + 'edit', + 'education', + 'email', + 'email-plus', + 'enter', + 'entertainment', + 'estimation-time', + 'euro', + 'exclamation', + 'exclusivity', + 'expand', + 'eye-off', + 'eye', + 'file-coins', + 'filter', + 'financial-services', + 'flag-grey', + 'focus', + 'globe', + 'google', + 'graphic', + 'grid', + 'hamburguer', + 'headquarters', + 'healthcare', + 'hospitality', + 'industrial', + 'info', + 'it-internet', + 'legal', + 'light-bulb', + 'link', + 'linkedin', + 'list', + 'location', + 'lock', + 'login', + 'logistics', + 'manufacturing', + 'marketing-media', + 'meeting', + 'messages', + 'messages-left', + 'messy-coin-stack', + 'metric-down-arrow', + 'metric-up-arrow', + 'mining', + 'mobility', + 'money-transfer', + 'more', + 'my-company', + 'nif-company', + 'notification-off', + 'notification-on', + 'operations', + 'opportunities', + 'optimum', + 'other-services', + 'percentage', + 'person-lines', + 'phone', + 'phone-arrow', + 'physical', + 'play-arrow', + 'premium', + 'pricing', + 'professional-services', + 'public-administration', + 'purchase-mandates', + 'question', + 'raw-materials', + 'real-estate', + 'search', + 'select', + 'sell-mandates', + 'send-information', + 'shareholders', + 'signature', + 'sort', + 'star-primary', + 'star-fill', + 'star-outline', + 'substract-stroked', + 'substract', + 'support', + 'telecomunications', + 'telephone', + 'telephone-fill', + 'time-detail', + 'time-zone', + 'transmission', + 'transport-logistics', + 'trash', + 'twitter', + 'upload', + 'user-profile', + 'user-profile-advisor', + 'user-profile-company', + 'user', + 'utilities', + 'verification-list', + 'verified-money', + 'website', + 'whatsapp', + 'youtube', + 'zoom', +]; diff --git a/libs/ui/src/lib/util/icon-registry/index.ts b/libs/ui/src/lib/util/icon-registry/index.ts index 3352b26..42bea6e 100644 --- a/libs/ui/src/lib/util/icon-registry/index.ts +++ b/libs/ui/src/lib/util/icon-registry/index.ts @@ -1,3 +1,3 @@ -export * from './util-icon-registry.module'; - -export * from './icon-registry.service'; +export * from './util-icon-registry.module'; + +export * from './icon-registry.service'; diff --git a/libs/ui/src/lib/util/icon-registry/util-icon-registry.module.ts b/libs/ui/src/lib/util/icon-registry/util-icon-registry.module.ts index 272b8b7..a4bacd6 100644 --- a/libs/ui/src/lib/util/icon-registry/util-icon-registry.module.ts +++ b/libs/ui/src/lib/util/icon-registry/util-icon-registry.module.ts @@ -1,16 +1,16 @@ -import { APP_INITIALIZER, NgModule } from '@angular/core'; -import { IconRegistryService } from './icon-registry.service'; - -@NgModule({ - providers: [ - { - provide: APP_INITIALIZER, - useFactory: (iconRegistryService: IconRegistryService) => { - return () => iconRegistryService.init(); - }, - deps: [IconRegistryService], - multi: true, - }, - ], -}) -export class PiSharedUtilIconRegistryModule {} +import { APP_INITIALIZER, NgModule } from '@angular/core'; +import { IconRegistryService } from './icon-registry.service'; + +@NgModule({ + providers: [ + { + provide: APP_INITIALIZER, + useFactory: (iconRegistryService: IconRegistryService) => { + return () => iconRegistryService.init(); + }, + deps: [IconRegistryService], + multi: true, + }, + ], +}) +export class PiSharedUtilIconRegistryModule {} diff --git a/libs/ui/src/lib/util/infinite-scroll/infinite-scroll.data.ts b/libs/ui/src/lib/util/infinite-scroll/infinite-scroll.data.ts index 2a77ceb..ddfe0db 100644 --- a/libs/ui/src/lib/util/infinite-scroll/infinite-scroll.data.ts +++ b/libs/ui/src/lib/util/infinite-scroll/infinite-scroll.data.ts @@ -1,6 +1,6 @@ -export enum INFINITE_SCROLL { - page = 1, - limit = 12, - throttle = 50, - scrollDistance = 2, -} +export enum INFINITE_SCROLL { + page = 1, + limit = 12, + throttle = 50, + scrollDistance = 2, +} diff --git a/libs/ui/src/lib/util/list-configs/application/list-configs.facade.ts b/libs/ui/src/lib/util/list-configs/application/list-configs.facade.ts index 04632e0..130b4ff 100644 --- a/libs/ui/src/lib/util/list-configs/application/list-configs.facade.ts +++ b/libs/ui/src/lib/util/list-configs/application/list-configs.facade.ts @@ -1,30 +1,30 @@ -// Angular -import { Injectable, inject } from '@angular/core'; - -// Ngrx -import { Store } from '@ngrx/store'; - -// Rxjs -import { Observable } from 'rxjs'; - -// State -import * as fromSelectors from '../state/list-configs.selectors'; -import * as fromActions from '../state/list-configs.actions'; -import * as fromState from '../state/list-configs.reducer'; - -@Injectable({ providedIn: 'root' }) -export class ListConfigsFacade { - // `inject()` en vez de parámetro de constructor: los inicializadores de - // propiedad de abajo se evalúan antes que los parámetros del constructor. - private readonly store = inject>(Store); - - readonly mode$: Observable = this.store.select(fromSelectors.getListMode); - - setListMode(payload: fromState.ListMode): void { - this.store.dispatch(fromActions.setListMode({ payload })); - } - - resetListMode(): void { - this.store.dispatch(fromActions.resetListMode()); - } -} +// Angular +import { Injectable, inject } from '@angular/core'; + +// Ngrx +import { Store } from '@ngrx/store'; + +// Rxjs +import { Observable } from 'rxjs'; + +// State +import * as fromSelectors from '../state/list-configs.selectors'; +import * as fromActions from '../state/list-configs.actions'; +import * as fromState from '../state/list-configs.reducer'; + +@Injectable({ providedIn: 'root' }) +export class ListConfigsFacade { + // `inject()` en vez de parámetro de constructor: los inicializadores de + // propiedad de abajo se evalúan antes que los parámetros del constructor. + private readonly store = inject>(Store); + + readonly mode$: Observable = this.store.select(fromSelectors.getListMode); + + setListMode(payload: fromState.ListMode): void { + this.store.dispatch(fromActions.setListMode({ payload })); + } + + resetListMode(): void { + this.store.dispatch(fromActions.resetListMode()); + } +} diff --git a/libs/ui/src/lib/util/list-configs/index.ts b/libs/ui/src/lib/util/list-configs/index.ts index 6ffe730..37d7ada 100644 --- a/libs/ui/src/lib/util/list-configs/index.ts +++ b/libs/ui/src/lib/util/list-configs/index.ts @@ -1,7 +1,7 @@ -// Facade -export * from './application/list-configs.facade'; - -// State -export * from './state/list-configs.actions'; -export * from './state/list-configs.selectors'; -export * from './state/list-configs.reducer'; +// Facade +export * from './application/list-configs.facade'; + +// State +export * from './state/list-configs.actions'; +export * from './state/list-configs.selectors'; +export * from './state/list-configs.reducer'; diff --git a/libs/ui/src/lib/util/list-configs/state/list-configs.actions.ts b/libs/ui/src/lib/util/list-configs/state/list-configs.actions.ts index 3fc0204..e335c11 100644 --- a/libs/ui/src/lib/util/list-configs/state/list-configs.actions.ts +++ b/libs/ui/src/lib/util/list-configs/state/list-configs.actions.ts @@ -1,15 +1,15 @@ -import { createAction, props } from '@ngrx/store'; - -import { ListMode } from './list-configs.reducer'; - -export enum ListModeActionsType { - SET_LIST_MODE = '[Main] Set List Mode', - RESET_LIST_MODE = '[Main] Reset List Mode', -} - -export const setListMode = createAction( - ListModeActionsType.SET_LIST_MODE, - props<{ payload: ListMode }>() -); - -export const resetListMode = createAction(ListModeActionsType.RESET_LIST_MODE); +import { createAction, props } from '@ngrx/store'; + +import { ListMode } from './list-configs.reducer'; + +export enum ListModeActionsType { + SET_LIST_MODE = '[Main] Set List Mode', + RESET_LIST_MODE = '[Main] Reset List Mode', +} + +export const setListMode = createAction( + ListModeActionsType.SET_LIST_MODE, + props<{ payload: ListMode }>() +); + +export const resetListMode = createAction(ListModeActionsType.RESET_LIST_MODE); diff --git a/libs/ui/src/lib/util/list-configs/state/list-configs.reducer.ts b/libs/ui/src/lib/util/list-configs/state/list-configs.reducer.ts index 5a6978c..c7b0296 100644 --- a/libs/ui/src/lib/util/list-configs/state/list-configs.reducer.ts +++ b/libs/ui/src/lib/util/list-configs/state/list-configs.reducer.ts @@ -1,25 +1,25 @@ -import { createReducer, on } from '@ngrx/store'; - -import { resetListMode, setListMode } from './list-configs.actions'; - -export const featureKey = 'CORE_listConfigs'; - -export interface ListConfigsState { - mode: ListMode; -} - -export type ListMode = 'grid' | 'list'; - -export const initialState: ListConfigsState = { - mode: 'list', -}; - -export const listConfigsReducer = createReducer( - initialState, - on(setListMode, (state, action) => { - return { ...state, mode: action.payload }; - }), - on(resetListMode, (state) => { - return { ...initialState }; - }) -); +import { createReducer, on } from '@ngrx/store'; + +import { resetListMode, setListMode } from './list-configs.actions'; + +export const featureKey = 'CORE_listConfigs'; + +export interface ListConfigsState { + mode: ListMode; +} + +export type ListMode = 'grid' | 'list'; + +export const initialState: ListConfigsState = { + mode: 'list', +}; + +export const listConfigsReducer = createReducer( + initialState, + on(setListMode, (state, action) => { + return { ...state, mode: action.payload }; + }), + on(resetListMode, (state) => { + return { ...initialState }; + }) +); diff --git a/libs/ui/src/lib/util/list-configs/state/list-configs.selectors.ts b/libs/ui/src/lib/util/list-configs/state/list-configs.selectors.ts index 6e2ad4c..e66ae74 100644 --- a/libs/ui/src/lib/util/list-configs/state/list-configs.selectors.ts +++ b/libs/ui/src/lib/util/list-configs/state/list-configs.selectors.ts @@ -1,9 +1,9 @@ -import { createFeatureSelector, createSelector } from '@ngrx/store'; - -import * as fromReducer from './list-configs.reducer'; - -export const getFeatureState = createFeatureSelector( - fromReducer.featureKey -); - -export const getListMode = createSelector(getFeatureState, (state) => state.mode); +import { createFeatureSelector, createSelector } from '@ngrx/store'; + +import * as fromReducer from './list-configs.reducer'; + +export const getFeatureState = createFeatureSelector( + fromReducer.featureKey +); + +export const getListMode = createSelector(getFeatureState, (state) => state.mode); diff --git a/libs/ui/src/lib/util/loaders/aplication/loader.facade.ts b/libs/ui/src/lib/util/loaders/aplication/loader.facade.ts index ac37929..f2ed9c6 100644 --- a/libs/ui/src/lib/util/loaders/aplication/loader.facade.ts +++ b/libs/ui/src/lib/util/loaders/aplication/loader.facade.ts @@ -1,30 +1,30 @@ -// Angular -import { Injectable, inject } from '@angular/core'; - -// RxJS -import { Observable, Subscribable } from 'rxjs'; - -// NgRx -import { Store, select } from '@ngrx/store'; - -// Store -import * as LoaderSelectors from '../state/loader.selectors'; -import * as LoaderActions from '../state/loader.actions'; - -@Injectable() -export class LoaderFacade { - // `inject()` en vez de parámetro de constructor: los inicializadores de - // propiedad de abajo se evalúan antes que los parámetros del constructor. - private readonly store = inject(Store); - - loader$: Observable = this.store.pipe(select(LoaderSelectors.getLoader)); - showLoader$?: Observable | Subscribable | Promise; - - showLoader() { - this.store.dispatch(LoaderActions.showLoader()); - } - - hideLoader() { - this.store.dispatch(LoaderActions.hideLoader()); - } -} +// Angular +import { Injectable, inject } from '@angular/core'; + +// RxJS +import { Observable, Subscribable } from 'rxjs'; + +// NgRx +import { Store, select } from '@ngrx/store'; + +// Store +import * as LoaderSelectors from '../state/loader.selectors'; +import * as LoaderActions from '../state/loader.actions'; + +@Injectable() +export class LoaderFacade { + // `inject()` en vez de parámetro de constructor: los inicializadores de + // propiedad de abajo se evalúan antes que los parámetros del constructor. + private readonly store = inject(Store); + + loader$: Observable = this.store.pipe(select(LoaderSelectors.getLoader)); + showLoader$?: Observable | Subscribable | Promise; + + showLoader() { + this.store.dispatch(LoaderActions.showLoader()); + } + + hideLoader() { + this.store.dispatch(LoaderActions.hideLoader()); + } +} diff --git a/libs/ui/src/lib/util/loaders/index.ts b/libs/ui/src/lib/util/loaders/index.ts index c3fe237..1f3b5d2 100644 --- a/libs/ui/src/lib/util/loaders/index.ts +++ b/libs/ui/src/lib/util/loaders/index.ts @@ -1,11 +1,11 @@ -// Module -export * from './util-loader.module'; - -// Facade -export * from './aplication/loader.facade'; - -// State -export * from './state/loader.actions'; -export * from './state/loader.reducer'; -export * from './state/loader.selectors'; - +// Module +export * from './util-loader.module'; + +// Facade +export * from './aplication/loader.facade'; + +// State +export * from './state/loader.actions'; +export * from './state/loader.reducer'; +export * from './state/loader.selectors'; + diff --git a/libs/ui/src/lib/util/loaders/state/loader.actions.ts b/libs/ui/src/lib/util/loaders/state/loader.actions.ts index 54e7262..8d1166b 100644 --- a/libs/ui/src/lib/util/loaders/state/loader.actions.ts +++ b/libs/ui/src/lib/util/loaders/state/loader.actions.ts @@ -1,6 +1,6 @@ -// NgRx -import { createAction } from '@ngrx/store'; - -export const showLoader = createAction('[Loader] Show Loader'); - -export const hideLoader = createAction('[Loader] Hide Loader'); +// NgRx +import { createAction } from '@ngrx/store'; + +export const showLoader = createAction('[Loader] Show Loader'); + +export const hideLoader = createAction('[Loader] Hide Loader'); diff --git a/libs/ui/src/lib/util/loaders/state/loader.reducer.ts b/libs/ui/src/lib/util/loaders/state/loader.reducer.ts index a313284..f1360f9 100644 --- a/libs/ui/src/lib/util/loaders/state/loader.reducer.ts +++ b/libs/ui/src/lib/util/loaders/state/loader.reducer.ts @@ -1,37 +1,37 @@ -// NgRx -import { createReducer, on, Action } from '@ngrx/store'; - -// Store -import * as LoaderActions from './loader.actions'; - -export const loadersKey = 'CORE_loaderState'; - -export interface LoaderState { - loader: boolean; -} - -export const initialLoaderState: LoaderState = { - loader: false, -}; - -export const loaderReducer = createReducer( - initialLoaderState, - - on(LoaderActions.showLoader, (state) => { - return { - ...state, - loader: true, - }; - }), - - on(LoaderActions.hideLoader, (state) => { - return { - ...state, - loader: false, - }; - }) -); - -export function loaderReducerFunction(state: LoaderState | undefined, action: Action) { - return loaderReducer(state, action); -} +// NgRx +import { createReducer, on, Action } from '@ngrx/store'; + +// Store +import * as LoaderActions from './loader.actions'; + +export const loadersKey = 'CORE_loaderState'; + +export interface LoaderState { + loader: boolean; +} + +export const initialLoaderState: LoaderState = { + loader: false, +}; + +export const loaderReducer = createReducer( + initialLoaderState, + + on(LoaderActions.showLoader, (state) => { + return { + ...state, + loader: true, + }; + }), + + on(LoaderActions.hideLoader, (state) => { + return { + ...state, + loader: false, + }; + }) +); + +export function loaderReducerFunction(state: LoaderState | undefined, action: Action) { + return loaderReducer(state, action); +} diff --git a/libs/ui/src/lib/util/loaders/state/loader.selectors.ts b/libs/ui/src/lib/util/loaders/state/loader.selectors.ts index 5607199..77cf756 100644 --- a/libs/ui/src/lib/util/loaders/state/loader.selectors.ts +++ b/libs/ui/src/lib/util/loaders/state/loader.selectors.ts @@ -1,11 +1,11 @@ -// NgRx -import { createFeatureSelector, createSelector } from '@ngrx/store'; - -// Store -import { loadersKey, LoaderState } from './loader.reducer'; - -export const selectLoaderState = createFeatureSelector(loadersKey); - -export const getLoader = createSelector(selectLoaderState, (state) => { - return state.loader; -}); +// NgRx +import { createFeatureSelector, createSelector } from '@ngrx/store'; + +// Store +import { loadersKey, LoaderState } from './loader.reducer'; + +export const selectLoaderState = createFeatureSelector(loadersKey); + +export const getLoader = createSelector(selectLoaderState, (state) => { + return state.loader; +}); diff --git a/libs/ui/src/lib/util/loaders/util-loader.module.ts b/libs/ui/src/lib/util/loaders/util-loader.module.ts index 4175e07..7c07d66 100644 --- a/libs/ui/src/lib/util/loaders/util-loader.module.ts +++ b/libs/ui/src/lib/util/loaders/util-loader.module.ts @@ -1,13 +1,13 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { StoreModule } from '@ngrx/store'; - -import * as fromReducer from './state/loader.reducer'; - -@NgModule({ - imports: [ - CommonModule, - StoreModule.forFeature(fromReducer.loadersKey, fromReducer.loaderReducerFunction), - ], -}) -export class PiSharedUtilLoadersModule {} +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { StoreModule } from '@ngrx/store'; + +import * as fromReducer from './state/loader.reducer'; + +@NgModule({ + imports: [ + CommonModule, + StoreModule.forFeature(fromReducer.loadersKey, fromReducer.loaderReducerFunction), + ], +}) +export class PiSharedUtilLoadersModule {} diff --git a/libs/ui/src/lib/util/local-storage/index.ts b/libs/ui/src/lib/util/local-storage/index.ts index b67632b..fbe728f 100644 --- a/libs/ui/src/lib/util/local-storage/index.ts +++ b/libs/ui/src/lib/util/local-storage/index.ts @@ -1 +1 @@ -export * from './local-storage.service'; +export * from './local-storage.service'; diff --git a/libs/ui/src/lib/util/local-storage/local-storage.service.ts b/libs/ui/src/lib/util/local-storage/local-storage.service.ts index 92808f7..c667575 100644 --- a/libs/ui/src/lib/util/local-storage/local-storage.service.ts +++ b/libs/ui/src/lib/util/local-storage/local-storage.service.ts @@ -1,26 +1,26 @@ -// Angular -import { isPlatformBrowser } from '@angular/common'; -import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; - -@Injectable({ providedIn: 'root' }) -export class LocalStorageService { - constructor(@Inject(PLATFORM_ID) public platformId: Object) {} - - getItem(tag: string) { - if (isPlatformBrowser(this.platformId)) { - const value = (window as any).localStorage.getItem(tag); - if (value) return JSON.parse(value); - } - return undefined; - } - - setItem(tag: string, value: any) { - if (isPlatformBrowser(this.platformId)) - (window as Window).localStorage.setItem(tag, JSON.stringify(value)); - } - - deleteItem(tag: string) { - if (isPlatformBrowser(this.platformId)) - (window as Window).localStorage.removeItem(tag); - } -} +// Angular +import { isPlatformBrowser } from '@angular/common'; +import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; + +@Injectable({ providedIn: 'root' }) +export class LocalStorageService { + constructor(@Inject(PLATFORM_ID) public platformId: Object) {} + + getItem(tag: string) { + if (isPlatformBrowser(this.platformId)) { + const value = (window as any).localStorage.getItem(tag); + if (value) return JSON.parse(value); + } + return undefined; + } + + setItem(tag: string, value: any) { + if (isPlatformBrowser(this.platformId)) + (window as Window).localStorage.setItem(tag, JSON.stringify(value)); + } + + deleteItem(tag: string) { + if (isPlatformBrowser(this.platformId)) + (window as Window).localStorage.removeItem(tag); + } +} diff --git a/libs/ui/src/lib/util/menu/base.menu.component.ts b/libs/ui/src/lib/util/menu/base.menu.component.ts index b20a355..902d4fa 100644 --- a/libs/ui/src/lib/util/menu/base.menu.component.ts +++ b/libs/ui/src/lib/util/menu/base.menu.component.ts @@ -1,40 +1,40 @@ -// Angular -import { Directive, HostBinding, TemplateRef, input, contentChild } from '@angular/core'; - -// Style definitions -import { MenuEntry, MenuItemText } from './entities/menu-entry.model'; - -@Directive() -export abstract class PiBaseMenuComponent { - @HostBinding('class') baseClassName = 'pi-menu pi-menu__parent'; - - isMouseOver = false; - - readonly label = input(); - - readonly menuItems = input>([]); - - /** - * Parent Menu - */ - readonly parentMenuTemplateRef = contentChild>('parentMenuTemplate'); - - /** - * Children Menu (Level 1) - */ - readonly childMenuTemplateRef = contentChild>('childMenuTemplate'); - - /** - * Additional Children Menu (Level 1) - */ - readonly childAsideMenuTemplateRef = contentChild>('childAsideMenuTemplate'); - - /** - * Additional Children Menu (Level 1) - */ - readonly asideMenuTemplateRef = contentChild>('asideMenuTemplate'); - - trackByFn(index: number, item: MenuEntry): MenuItemText | string | undefined { - return item.label; - } -} +// Angular +import { Directive, HostBinding, TemplateRef, input, contentChild } from '@angular/core'; + +// Style definitions +import { MenuEntry, MenuItemText } from './entities/menu-entry.model'; + +@Directive() +export abstract class PiBaseMenuComponent { + @HostBinding('class') baseClassName = 'pi-menu pi-menu__parent'; + + isMouseOver = false; + + readonly label = input(); + + readonly menuItems = input>([]); + + /** + * Parent Menu + */ + readonly parentMenuTemplateRef = contentChild>('parentMenuTemplate'); + + /** + * Children Menu (Level 1) + */ + readonly childMenuTemplateRef = contentChild>('childMenuTemplate'); + + /** + * Additional Children Menu (Level 1) + */ + readonly childAsideMenuTemplateRef = contentChild>('childAsideMenuTemplate'); + + /** + * Additional Children Menu (Level 1) + */ + readonly asideMenuTemplateRef = contentChild>('asideMenuTemplate'); + + trackByFn(index: number, item: MenuEntry): MenuItemText | string | undefined { + return item.label; + } +} diff --git a/libs/ui/src/lib/util/menu/directives/base-menu-item.directive.ts b/libs/ui/src/lib/util/menu/directives/base-menu-item.directive.ts index 7bae4ff..4560a4c 100644 --- a/libs/ui/src/lib/util/menu/directives/base-menu-item.directive.ts +++ b/libs/ui/src/lib/util/menu/directives/base-menu-item.directive.ts @@ -1,57 +1,57 @@ -import { - Directive, - ElementRef, - HostBinding, - HostListener, - Renderer2 -} from '@angular/core'; - -@Directive() -export abstract class PiBaseMenuEventItem { - @HostBinding('class') className = 'pi-menu-event-item'; - - constructor( - protected el: ElementRef, - protected renderer: Renderer2 - ) {} - - @HostListener('click') - onClick() { - if (!this.isChildrenVisible()) { - this.setIsVisible(); - } else { - this.setIsHidden(); - } - } - - - @HostListener('document:click', ['$event']) - onDocumentClick(event: MouseEvent) { - if (!this.el.nativeElement.contains(event.target)) { - this.setIsHidden(); - } - } - - protected setIsVisible(): void { - const parent = this.el.nativeElement as HTMLElement; - const children = (parent.children as HTMLCollection).item(1) ?? null; - - parent && this.renderer.addClass(parent, 'is-selected'); - children && this.renderer.addClass(children, 'is-visible'); - } - - protected setIsHidden(): void { - const parent = this.el.nativeElement; - const children = (parent.children as HTMLCollection).item(1) ?? null; - - parent && this.renderer.removeClass(parent, 'is-selected'); - children && this.renderer.removeClass(children, 'is-visible'); - } - - protected isChildrenVisible(): boolean { - const parent = this.el.nativeElement as HTMLElement; - const children = (parent.children as HTMLCollection).item(1) ?? null; - - return children?.classList.contains('is-visible'); - } -} +import { + Directive, + ElementRef, + HostBinding, + HostListener, + Renderer2 +} from '@angular/core'; + +@Directive() +export abstract class PiBaseMenuEventItem { + @HostBinding('class') className = 'pi-menu-event-item'; + + constructor( + protected el: ElementRef, + protected renderer: Renderer2 + ) {} + + @HostListener('click') + onClick() { + if (!this.isChildrenVisible()) { + this.setIsVisible(); + } else { + this.setIsHidden(); + } + } + + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + if (!this.el.nativeElement.contains(event.target)) { + this.setIsHidden(); + } + } + + protected setIsVisible(): void { + const parent = this.el.nativeElement as HTMLElement; + const children = (parent.children as HTMLCollection).item(1) ?? null; + + parent && this.renderer.addClass(parent, 'is-selected'); + children && this.renderer.addClass(children, 'is-visible'); + } + + protected setIsHidden(): void { + const parent = this.el.nativeElement; + const children = (parent.children as HTMLCollection).item(1) ?? null; + + parent && this.renderer.removeClass(parent, 'is-selected'); + children && this.renderer.removeClass(children, 'is-visible'); + } + + protected isChildrenVisible(): boolean { + const parent = this.el.nativeElement as HTMLElement; + const children = (parent.children as HTMLCollection).item(1) ?? null; + + return children?.classList.contains('is-visible') ?? false; + } +} diff --git a/libs/ui/src/lib/util/menu/directives/menu-children.directive.ts b/libs/ui/src/lib/util/menu/directives/menu-children.directive.ts index 0b81850..3cb0cff 100644 --- a/libs/ui/src/lib/util/menu/directives/menu-children.directive.ts +++ b/libs/ui/src/lib/util/menu/directives/menu-children.directive.ts @@ -1,12 +1,12 @@ -import { Directive, ElementRef, HostBinding, HostListener, Renderer2 } from '@angular/core'; - -@Directive({ selector: '[pi-menu-event-children]', }) -export class PiMenuEventChildrenDirective { - @HostBinding('class') className = 'pi-menu pi-menu__children'; - constructor(private el: ElementRef, private renderer: Renderer2) {} - - @HostListener('click') onClickMenuItem() { - const menuChildren = this.el.nativeElement; - this.renderer.removeClass(menuChildren, 'is-visible'); - } -} +import { Directive, ElementRef, HostBinding, HostListener, Renderer2 } from '@angular/core'; + +@Directive({ selector: '[pi-menu-event-children]', }) +export class PiMenuEventChildrenDirective { + @HostBinding('class') className = 'pi-menu pi-menu__children'; + constructor(private el: ElementRef, private renderer: Renderer2) {} + + @HostListener('click') onClickMenuItem() { + const menuChildren = this.el.nativeElement; + this.renderer.removeClass(menuChildren, 'is-visible'); + } +} diff --git a/libs/ui/src/lib/util/menu/directives/menu-entry.directive.ts b/libs/ui/src/lib/util/menu/directives/menu-entry.directive.ts index 51db42d..e0bd8d9 100644 --- a/libs/ui/src/lib/util/menu/directives/menu-entry.directive.ts +++ b/libs/ui/src/lib/util/menu/directives/menu-entry.directive.ts @@ -1,13 +1,13 @@ -import { Directive, HostBinding, input } from '@angular/core'; -import { MenuEntryContext } from '../entities/menu-entry.model'; - -@Directive({ selector: '[pi-menu-entry]', }) -export class PiMenuEntryDirective { - @HostBinding('class') get classes(): string { +import { Directive, HostBinding, input } from '@angular/core'; +import { MenuEntryContext } from '../entities/menu-entry.model'; + +@Directive({ selector: '[pi-menu-entry]', }) +export class PiMenuEntryDirective { + @HostBinding('class') get classes(): string { const context = this.context(); - const contextClass = context && `pi-menu-entry__context--${context}`; - return ['pi-menu-entry', contextClass].join(' '); - } - - readonly context = input('parent-menu'); -} + const contextClass = context && `pi-menu-entry__context--${context}`; + return ['pi-menu-entry', contextClass].join(' '); + } + + readonly context = input('parent-menu'); +} diff --git a/libs/ui/src/lib/util/menu/entities/menu-entry.model.ts b/libs/ui/src/lib/util/menu/entities/menu-entry.model.ts index 9e7a9cb..847e988 100644 --- a/libs/ui/src/lib/util/menu/entities/menu-entry.model.ts +++ b/libs/ui/src/lib/util/menu/entities/menu-entry.model.ts @@ -1,46 +1,46 @@ -import { styleType } from '../../../styles'; - -export type MenuEntry = Partial<{ - id: number; - icon?: MenuItemIcon | string; - label?: MenuItemText | string; - route?: string | null; - link?: string; - userProfile?: string; - rights?: Array; - // Parent & Child Level 1 - entries?: Array; - // Child Additional Level 1 - asideEntries?: Array; - state?: boolean; - data?: any; - isDisabled?: boolean; - isActive?: boolean; - anchor?: string; - color?: styleType; -}>; - -export type Rights = { - id: number; - name: string; -}; - -export interface MenuItemIcon { - name: string; - color?: styleType; -} - -export interface MenuItemText { - name: string; - description?: string; -} - -export interface FooterLink { - id: number; - icon?: string; - label?: string; - link?: string; -} - -// Defines where the menu entry belongs -export type MenuEntryContext = 'parent-menu' | 'children-menu' | 'children-submenu' | 'aside-menu'; +import { styleType } from '../../../styles'; + +export type MenuEntry = Partial<{ + id: number; + icon?: MenuItemIcon | string; + label?: MenuItemText | string; + route?: string | null; + link?: string; + userProfile?: string; + rights?: Array; + // Parent & Child Level 1 + entries?: Array; + // Child Additional Level 1 + asideEntries?: Array; + state?: boolean; + data?: any; + isDisabled?: boolean; + isActive?: boolean; + anchor?: string; + color?: styleType; +}>; + +export type Rights = { + id: number; + name: string; +}; + +export interface MenuItemIcon { + name: string; + color?: styleType; +} + +export interface MenuItemText { + name: string; + description?: string; +} + +export interface FooterLink { + id: number; + icon?: string; + label?: string; + link?: string; +} + +// Defines where the menu entry belongs +export type MenuEntryContext = 'parent-menu' | 'children-menu' | 'children-submenu' | 'aside-menu'; diff --git a/libs/ui/src/lib/util/menu/index.ts b/libs/ui/src/lib/util/menu/index.ts index eaa0396..0e1f553 100644 --- a/libs/ui/src/lib/util/menu/index.ts +++ b/libs/ui/src/lib/util/menu/index.ts @@ -1,9 +1,9 @@ - - -export * from './entities/menu-entry.model'; - -export * from './base.menu.component'; - -export * from './directives/base-menu-item.directive'; -export * from './directives/menu-children.directive'; -export * from './directives/menu-entry.directive'; + + +export * from './entities/menu-entry.model'; + +export * from './base.menu.component'; + +export * from './directives/base-menu-item.directive'; +export * from './directives/menu-children.directive'; +export * from './directives/menu-entry.directive'; diff --git a/libs/ui/src/lib/util/models/date.ts b/libs/ui/src/lib/util/models/date.ts index a4a7b42..e4a1fdd 100644 --- a/libs/ui/src/lib/util/models/date.ts +++ b/libs/ui/src/lib/util/models/date.ts @@ -1,5 +1,5 @@ -export interface Date { - day: string; - month: string; - weekDay?: string; -} +export interface Date { + day: string; + month: string; + weekDay?: string; +} diff --git a/libs/ui/src/lib/util/models/index.ts b/libs/ui/src/lib/util/models/index.ts index ccbc568..6535625 100644 --- a/libs/ui/src/lib/util/models/index.ts +++ b/libs/ui/src/lib/util/models/index.ts @@ -1,7 +1,7 @@ -export * from './chart-data'; -export * from './faqs'; -export * from './params'; -export * from './pricing'; -export * from './sector'; -export * from './unit'; -export * from './date'; +export * from './chart-data'; +export * from './faqs'; +export * from './params'; +export * from './pricing'; +export * from './sector'; +export * from './unit'; +export * from './date'; diff --git a/libs/ui/src/lib/util/models/pricing.ts b/libs/ui/src/lib/util/models/pricing.ts index 3da2648..33fb3d1 100644 --- a/libs/ui/src/lib/util/models/pricing.ts +++ b/libs/ui/src/lib/util/models/pricing.ts @@ -1,59 +1,59 @@ -import { mode, theming } from '../../styles'; - -export enum UserType { - INVESTOR = 'INVESTOR', - COMPANY = 'COMPANY', - ADVISOR = 'ADVISOR', - ADMIN = 'ADMIN', -} - -export enum PricingPlanType { - FREE = 'FREE', - BASIC = 'BASIC', - PREMIUM = 'PREMIUM', -} - -export enum BillingCycleType { - MONTHLY = 'MONTHLY', - YEARLY = 'YEARLY', - BIANNUAL = 'BIANNUAL', - QUARTERLY = 'QUARTERLY', -} - -export interface PricingCardLocales { - cta?: string; - icon: string; - priceSuffix: string; - subtitle: string; - title: string; -} - -export interface PricingPlan { - billingCycle: BillingCycleType; - price: number; - planType: PricingPlanType; - mode: mode; - color: theming; - featureOverview: Array; - priceHelpText?: Array; -} - -export interface PricingPlanCompleteInfo extends PricingPlan, PricingCardLocales {} - -export interface BillingCycleOption { - value: BillingCycleType; - label: string; - discount?: number; -} - -export interface Feature { - isEnabledFor: Array; - localeKey: string; - categoryLocaleKey?: string; -} - -export interface Phase { - icon: string; - features: Array; - localeKey: string; -} +import { mode, theming } from '../../styles'; + +export enum UserType { + INVESTOR = 'INVESTOR', + COMPANY = 'COMPANY', + ADVISOR = 'ADVISOR', + ADMIN = 'ADMIN', +} + +export enum PricingPlanType { + FREE = 'FREE', + BASIC = 'BASIC', + PREMIUM = 'PREMIUM', +} + +export enum BillingCycleType { + MONTHLY = 'MONTHLY', + YEARLY = 'YEARLY', + BIANNUAL = 'BIANNUAL', + QUARTERLY = 'QUARTERLY', +} + +export interface PricingCardLocales { + cta?: string; + icon: string; + priceSuffix: string; + subtitle: string; + title: string; +} + +export interface PricingPlan { + billingCycle: BillingCycleType; + price: number; + planType: PricingPlanType; + mode: mode; + color: theming; + featureOverview: Array; + priceHelpText?: Array; +} + +export interface PricingPlanCompleteInfo extends PricingPlan, PricingCardLocales {} + +export interface BillingCycleOption { + value: BillingCycleType; + label: string; + discount?: number; +} + +export interface Feature { + isEnabledFor: Array; + localeKey: string; + categoryLocaleKey?: string; +} + +export interface Phase { + icon: string; + features: Array; + localeKey: string; +} diff --git a/libs/ui/src/lib/util/models/sector.ts b/libs/ui/src/lib/util/models/sector.ts index 0bb6d52..dd3de13 100644 --- a/libs/ui/src/lib/util/models/sector.ts +++ b/libs/ui/src/lib/util/models/sector.ts @@ -1,54 +1,54 @@ -export enum SectorUidMatchLocale { - AGRICULTURE_FORESTRY_FISHING = 'agricultureAndOthers', - CONSTRUCTION = 'construction', - CONSUMER = 'consumer', - DISTRIBUTION_WHOLESALE_TRADE = 'distributionWholesaleTrade', - E_COMMERCE = 'ecommerce', - EDUCATION = 'education', - ENTERTAINMENT = 'entertainment', - FINANCIAL_SERVICES_INSURANCE = 'financialServicesInsurance', - HEALTHCARE = 'healthcare', - HOSPITALITY = 'hospitality', - IT_INTERNET = 'itInternet', - LEGAL_ACCOUNTING_MANAGEMENT_SERVICES = 'legalAccountingManagementServices', - MANUFACTURING = 'manufacturing', - MARKETING_MEDIA = 'marketingMedia', - MINING_OTHER_CHEMICAL_MATERIALS_EXTRACTION = 'miningAndChemicals', - MOBILITY = 'mobility', - OTHER_SERVICES = 'otherServices', - PHYSICAL_AND_LIFE_SCIENCES = 'scientificServices', - PUBLIC_ADMINISTRATION = 'publicAdministration', - REAL_ESTATE = 'realEstate', - TELECOMUNICATIONS = 'telecommunications', - TRANSPORT_LOGISTICS = 'transportLogistics', - UTILITIES = 'utilities', -} - -export enum SectorType { - AGRICULTURE_FORESTRY_FISHING = 'AGRICULTURE_FORESTRY_FISHING', - CONSTRUCTION = 'CONSTRUCTION', - CONSUMER = 'CONSUMER', - DISTRIBUTION_WHOLESALE_TRADE = 'DISTRIBUTION_WHOLESALE_TRADE', - E_COMMERCE = 'E_COMMERCE', - EDUCATION = 'EDUCATION', - ENTERTAINMENT = 'ENTERTAINMENT', - FINANCIAL_SERVICES_INSURANCE = 'FINANCIAL_SERVICES_INSURANCE', - HEALTHCARE = 'HEALTHCARE', - HOSPITALITY = 'HOSPITALITY', - IT_INTERNET = 'IT_INTERNET', - LEGAL_ACCOUNTING_MANAGEMENT_SERVICES = 'LEGAL_ACCOUNTING_MANAGEMENT_SERVICES', - MANUFACTURING = 'MANUFACTURING', - MARKETING_MEDIA = 'MARKETING_MEDIA', - MINING_OTHER_CHEMICAL_MATERIALS_EXTRACTION = 'MINING_OTHER_CHEMICAL_MATERIALS_EXTRACTION', - MOBILITY = 'MOBILITY', - OTHER_SERVICES = 'OTHER_SERVICES', - PHYSICAL_AND_LIFE_SCIENCES = 'PHYSICAL_AND_LIFE_SCIENCES', - PUBLIC_ADMINISTRATION = 'PUBLIC_ADMINISTRATION', - REAL_ESTATE = 'REAL_ESTATE', - TELECOMUNICATIONS = 'TELECOMUNICATIONS', - TRANSPORT_LOGISTICS = 'TRANSPORT_LOGISTICS', - UTILITIES = 'UTILITIES', -} +export enum SectorUidMatchLocale { + AGRICULTURE_FORESTRY_FISHING = 'agricultureAndOthers', + CONSTRUCTION = 'construction', + CONSUMER = 'consumer', + DISTRIBUTION_WHOLESALE_TRADE = 'distributionWholesaleTrade', + E_COMMERCE = 'ecommerce', + EDUCATION = 'education', + ENTERTAINMENT = 'entertainment', + FINANCIAL_SERVICES_INSURANCE = 'financialServicesInsurance', + HEALTHCARE = 'healthcare', + HOSPITALITY = 'hospitality', + IT_INTERNET = 'itInternet', + LEGAL_ACCOUNTING_MANAGEMENT_SERVICES = 'legalAccountingManagementServices', + MANUFACTURING = 'manufacturing', + MARKETING_MEDIA = 'marketingMedia', + MINING_OTHER_CHEMICAL_MATERIALS_EXTRACTION = 'miningAndChemicals', + MOBILITY = 'mobility', + OTHER_SERVICES = 'otherServices', + PHYSICAL_AND_LIFE_SCIENCES = 'scientificServices', + PUBLIC_ADMINISTRATION = 'publicAdministration', + REAL_ESTATE = 'realEstate', + TELECOMUNICATIONS = 'telecommunications', + TRANSPORT_LOGISTICS = 'transportLogistics', + UTILITIES = 'utilities', +} + +export enum SectorType { + AGRICULTURE_FORESTRY_FISHING = 'AGRICULTURE_FORESTRY_FISHING', + CONSTRUCTION = 'CONSTRUCTION', + CONSUMER = 'CONSUMER', + DISTRIBUTION_WHOLESALE_TRADE = 'DISTRIBUTION_WHOLESALE_TRADE', + E_COMMERCE = 'E_COMMERCE', + EDUCATION = 'EDUCATION', + ENTERTAINMENT = 'ENTERTAINMENT', + FINANCIAL_SERVICES_INSURANCE = 'FINANCIAL_SERVICES_INSURANCE', + HEALTHCARE = 'HEALTHCARE', + HOSPITALITY = 'HOSPITALITY', + IT_INTERNET = 'IT_INTERNET', + LEGAL_ACCOUNTING_MANAGEMENT_SERVICES = 'LEGAL_ACCOUNTING_MANAGEMENT_SERVICES', + MANUFACTURING = 'MANUFACTURING', + MARKETING_MEDIA = 'MARKETING_MEDIA', + MINING_OTHER_CHEMICAL_MATERIALS_EXTRACTION = 'MINING_OTHER_CHEMICAL_MATERIALS_EXTRACTION', + MOBILITY = 'MOBILITY', + OTHER_SERVICES = 'OTHER_SERVICES', + PHYSICAL_AND_LIFE_SCIENCES = 'PHYSICAL_AND_LIFE_SCIENCES', + PUBLIC_ADMINISTRATION = 'PUBLIC_ADMINISTRATION', + REAL_ESTATE = 'REAL_ESTATE', + TELECOMUNICATIONS = 'TELECOMUNICATIONS', + TRANSPORT_LOGISTICS = 'TRANSPORT_LOGISTICS', + UTILITIES = 'UTILITIES', +} /** * Movido aquí desde `deale-saas/util/models` (lib de aplicación, fuera del diff --git a/libs/ui/src/lib/util/models/unit.ts b/libs/ui/src/lib/util/models/unit.ts index 9845970..b77a851 100644 --- a/libs/ui/src/lib/util/models/unit.ts +++ b/libs/ui/src/lib/util/models/unit.ts @@ -1 +1 @@ -export type unit = '€' | '%' | '$' | 'M' | 'x' | ''; +export type unit = '€' | '%' | '$' | 'M' | 'x' | ''; diff --git a/libs/ui/src/lib/util/pipes/index.ts b/libs/ui/src/lib/util/pipes/index.ts index 0573aa0..49d8b8b 100644 --- a/libs/ui/src/lib/util/pipes/index.ts +++ b/libs/ui/src/lib/util/pipes/index.ts @@ -1,4 +1,4 @@ -// pipes - - -export * from './pipes'; +// pipes + + +export * from './pipes'; diff --git a/libs/ui/src/lib/util/pipes/pipes.ts b/libs/ui/src/lib/util/pipes/pipes.ts index 47b3133..0567666 100644 --- a/libs/ui/src/lib/util/pipes/pipes.ts +++ b/libs/ui/src/lib/util/pipes/pipes.ts @@ -1,67 +1,67 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'numberFormat', }) -export class NumberFormatPipe implements PipeTransform { - transform(value: unknown, ...args: Array): unknown { - return new Intl.NumberFormat('de-DE').format(+value); - } -} - -@Pipe({ name: 'replace' }) -export class ReplacePipe implements PipeTransform { - transform(value: string, strToReplace: string, replacementStr: string): string { - if (!value || !strToReplace || !replacementStr) { - return value; - } - - return value.replace(new RegExp(strToReplace, 'g'), replacementStr); - } -} - -@Pipe({ name: 'sanitizerAltImage', }) -export class SanitizerAltImagePipe implements PipeTransform { - transform(name: string): string { - return this.sanitizeAltImage(name); - } - - private sanitizeAltImage(name: string): string { - return name.split('.').slice(0, -1).join('.').replace(/-/g, ' '); - } -} - -@Pipe({ name: 'firstWord', }) -export class FirstWordPipe implements PipeTransform { - transform(value: string): string { - if (!value) { - return ''; - } - return value.split(' ')[0]; - } -} - -@Pipe({ name: 'truncate' }) -export class TruncatePipe implements PipeTransform { - transform(text: string, length: number = 20, suffix: string = '...'): string { - if (text.length > length) { - const truncated: string = text.substring(0, length).trim() + suffix; - return truncated; - } - return text; - } -} - -@Pipe({ name: 'maxTwoDecimals' }) -export class MaxTwoDecimalsPipe implements PipeTransform { - transform(value: unknown, ...args: Array): unknown { - return Math.round(+value * 100) / 100; - } -} - -@Pipe({ name: 'anonymize' }) -export class AnonymizePipe implements PipeTransform { - transform(text?: string, length = 1, char = '*') { - return text?.split(' ').map(word => - word.split('').map((letter, index) => (index < length ? letter : char)).join('') - ).join(' ') - } -} +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ name: 'numberFormat', }) +export class NumberFormatPipe implements PipeTransform { + transform(value: unknown, ...args: Array): unknown { + return new Intl.NumberFormat('de-DE').format(Number(value)); + } +} + +@Pipe({ name: 'replace' }) +export class ReplacePipe implements PipeTransform { + transform(value: string, strToReplace: string, replacementStr: string): string { + if (!value || !strToReplace || !replacementStr) { + return value; + } + + return value.replace(new RegExp(strToReplace, 'g'), replacementStr); + } +} + +@Pipe({ name: 'sanitizerAltImage', }) +export class SanitizerAltImagePipe implements PipeTransform { + transform(name: string): string { + return this.sanitizeAltImage(name); + } + + private sanitizeAltImage(name: string): string { + return name.split('.').slice(0, -1).join('.').replace(/-/g, ' '); + } +} + +@Pipe({ name: 'firstWord', }) +export class FirstWordPipe implements PipeTransform { + transform(value: string): string { + if (!value) { + return ''; + } + return value.split(' ')[0]; + } +} + +@Pipe({ name: 'truncate' }) +export class TruncatePipe implements PipeTransform { + transform(text: string, length: number = 20, suffix: string = '...'): string { + if (text.length > length) { + const truncated: string = text.substring(0, length).trim() + suffix; + return truncated; + } + return text; + } +} + +@Pipe({ name: 'maxTwoDecimals' }) +export class MaxTwoDecimalsPipe implements PipeTransform { + transform(value: unknown, ...args: Array): unknown { + return Math.round(Number(value) * 100) / 100; + } +} + +@Pipe({ name: 'anonymize' }) +export class AnonymizePipe implements PipeTransform { + transform(text?: string, length = 1, char = '*') { + return text?.split(' ').map(word => + word.split('').map((letter, index) => (index < length ? letter : char)).join('') + ).join(' ') + } +} diff --git a/libs/ui/src/lib/util/router-store/custom-route-serializer.ts b/libs/ui/src/lib/util/router-store/custom-route-serializer.ts index 863ad58..88d9a82 100644 --- a/libs/ui/src/lib/util/router-store/custom-route-serializer.ts +++ b/libs/ui/src/lib/util/router-store/custom-route-serializer.ts @@ -1,31 +1,31 @@ -// Angular -import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; - -// Router -import { RouterStateUrl } from './state/router.reducer'; - -// Ngrx -import * as fromRouter from '@ngrx/router-store'; - -export class CustomSerializer implements fromRouter.RouterStateSerializer { - serialize(routerState: RouterStateSnapshot): RouterStateUrl { - const { url } = routerState; - const { queryParams } = routerState.root; - - let route: ActivatedRouteSnapshot = routerState.root; - - while (route.firstChild) { - route = route.firstChild; - } - const { params, routeConfig } = route; - - // Only return an object including the URL, params and query params - // instead of the entire snapshot - return { - url, - params, - queryParams, - title: typeof routeConfig?.title === 'string' ? routeConfig.title : '', - }; - } -} +// Angular +import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; + +// Router +import { RouterStateUrl } from './state/router.reducer'; + +// Ngrx +import * as fromRouter from '@ngrx/router-store'; + +export class CustomSerializer implements fromRouter.RouterStateSerializer { + serialize(routerState: RouterStateSnapshot): RouterStateUrl { + const { url } = routerState; + const { queryParams } = routerState.root; + + let route: ActivatedRouteSnapshot = routerState.root; + + while (route.firstChild) { + route = route.firstChild; + } + const { params, routeConfig } = route; + + // Only return an object including the URL, params and query params + // instead of the entire snapshot + return { + url, + params, + queryParams, + title: typeof routeConfig?.title === 'string' ? routeConfig.title : '', + }; + } +} diff --git a/libs/ui/src/lib/util/router-store/error-handler.ts b/libs/ui/src/lib/util/router-store/error-handler.ts index fb40462..5446335 100644 --- a/libs/ui/src/lib/util/router-store/error-handler.ts +++ b/libs/ui/src/lib/util/router-store/error-handler.ts @@ -1,11 +1,11 @@ -import { ErrorHandler, Injectable, Injector } from '@angular/core'; -import { Router } from '@angular/router'; - -@Injectable() -export class GlobalErrorHandler implements ErrorHandler { - constructor(private injector: Injector) { } - handleError(error: any) { - const router = this.injector.get(Router); - console.error(error.stack.toString()); - } +import { ErrorHandler, Injectable, Injector } from '@angular/core'; +import { Router } from '@angular/router'; + +@Injectable() +export class GlobalErrorHandler implements ErrorHandler { + constructor(private injector: Injector) { } + handleError(error: any) { + const router = this.injector.get(Router); + console.error(error.stack.toString()); + } } \ No newline at end of file diff --git a/libs/ui/src/lib/util/router-store/index.ts b/libs/ui/src/lib/util/router-store/index.ts index f754106..b07e710 100644 --- a/libs/ui/src/lib/util/router-store/index.ts +++ b/libs/ui/src/lib/util/router-store/index.ts @@ -1,10 +1,10 @@ -export * from './util-router-store.module'; - -// State -export * from './state/router.actions'; -export * from './state/router.effects'; -export * from './state/router.reducer'; -export * from './state/router.selectors'; - -// Error handler -export * from './error-handler'; +export * from './util-router-store.module'; + +// State +export * from './state/router.actions'; +export * from './state/router.effects'; +export * from './state/router.reducer'; +export * from './state/router.selectors'; + +// Error handler +export * from './error-handler'; diff --git a/libs/ui/src/lib/util/router-store/state/router.effects.ts b/libs/ui/src/lib/util/router-store/state/router.effects.ts index 055cb7b..3b29230 100644 --- a/libs/ui/src/lib/util/router-store/state/router.effects.ts +++ b/libs/ui/src/lib/util/router-store/state/router.effects.ts @@ -1,74 +1,74 @@ -import { Actions, createEffect, ofType } from '@ngrx/effects'; - -import * as RouterActions from './router.actions'; - -import { map, tap } from 'rxjs/operators'; - -import { Injectable } from '@angular/core'; -import { Location } from '@angular/common'; -import { Router } from '@angular/router'; - -@Injectable() -export class RouterEffects { - navigateTo$ = createEffect( - () => { - return this.action$.pipe( - ofType(RouterActions.navigateTo), - map((action) => { - return action.payload; - }), - tap(({ path, query: queryParams, extras }) => { - this._router.navigate(path, { queryParams, ...extras }); - }) - ); - }, - { dispatch: false } - ); - - navigateRefreshTo$ = createEffect( - () => { - return this.action$.pipe( - ofType(RouterActions.navigateRefreshTo), - map((action) => { - return action.payload; - }), - tap(({ path, query: queryParams, extras }) => { - this._router.routeReuseStrategy.shouldReuseRoute = () => false; - this._router.onSameUrlNavigation = 'reload'; - this._router.navigate(path, { queryParams, ...extras }); - }) - ); - }, - { dispatch: false } - ); - - navigateBack$ = createEffect( - () => { - return this.action$.pipe( - ofType(RouterActions.navigateBack), - tap(() => { - this._location.back(); - }) - ); - }, - { dispatch: false } - ); - - navigateForward$ = createEffect( - () => { - return this.action$.pipe( - ofType(RouterActions.navigateForward), - tap(() => { - this._location.forward(); - }) - ); - }, - { dispatch: false } - ); - - constructor( - private _location: Location, - private action$: Actions, - private _router: Router - ) {} -} +import { Actions, createEffect, ofType } from '@ngrx/effects'; + +import * as RouterActions from './router.actions'; + +import { map, tap } from 'rxjs/operators'; + +import { Injectable } from '@angular/core'; +import { Location } from '@angular/common'; +import { Router } from '@angular/router'; + +@Injectable() +export class RouterEffects { + navigateTo$ = createEffect( + () => { + return this.action$.pipe( + ofType(RouterActions.navigateTo), + map((action) => { + return action.payload; + }), + tap(({ path, query: queryParams, extras }) => { + this._router.navigate(path, { queryParams, ...extras }); + }) + ); + }, + { dispatch: false } + ); + + navigateRefreshTo$ = createEffect( + () => { + return this.action$.pipe( + ofType(RouterActions.navigateRefreshTo), + map((action) => { + return action.payload; + }), + tap(({ path, query: queryParams, extras }) => { + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate(path, { queryParams, ...extras }); + }) + ); + }, + { dispatch: false } + ); + + navigateBack$ = createEffect( + () => { + return this.action$.pipe( + ofType(RouterActions.navigateBack), + tap(() => { + this._location.back(); + }) + ); + }, + { dispatch: false } + ); + + navigateForward$ = createEffect( + () => { + return this.action$.pipe( + ofType(RouterActions.navigateForward), + tap(() => { + this._location.forward(); + }) + ); + }, + { dispatch: false } + ); + + constructor( + private _location: Location, + private action$: Actions, + private _router: Router + ) {} +} diff --git a/libs/ui/src/lib/util/router-store/state/router.reducer.ts b/libs/ui/src/lib/util/router-store/state/router.reducer.ts index e28e8fb..98b8d03 100644 --- a/libs/ui/src/lib/util/router-store/state/router.reducer.ts +++ b/libs/ui/src/lib/util/router-store/state/router.reducer.ts @@ -1,16 +1,16 @@ -import * as fromRouter from '@ngrx/router-store'; - -import { Params } from '@angular/router'; - -export const coreRouterFeatureKey = 'CORE_router'; - -export interface RouterStateUrl { - url: string; - queryParams: Params; - params: Params; - title: string; -} - -export interface RouterState { - routerReducer: fromRouter.RouterReducerState; -} +import * as fromRouter from '@ngrx/router-store'; + +import { Params } from '@angular/router'; + +export const coreRouterFeatureKey = 'CORE_router'; + +export interface RouterStateUrl { + url: string; + queryParams: Params; + params: Params; + title: string; +} + +export interface RouterState { + routerReducer: fromRouter.RouterReducerState; +} diff --git a/libs/ui/src/lib/util/router-store/state/router.selectors.ts b/libs/ui/src/lib/util/router-store/state/router.selectors.ts index a8729d8..646522b 100644 --- a/libs/ui/src/lib/util/router-store/state/router.selectors.ts +++ b/libs/ui/src/lib/util/router-store/state/router.selectors.ts @@ -1,15 +1,15 @@ -import { createFeatureSelector, createSelector } from '@ngrx/store'; - -import * as fromRouter from '@ngrx/router-store'; - -import * as fromReducer from './router.reducer'; - -export const getRouterState = createFeatureSelector< - fromRouter.RouterReducerState ->(fromReducer.coreRouterFeatureKey); - -export const getTitle = createSelector(getRouterState, (state) => { - return state?.state?.title -}); - -export const getRoute = createSelector(getRouterState, (state) => state?.state?.url); +import { createFeatureSelector, createSelector } from '@ngrx/store'; + +import * as fromRouter from '@ngrx/router-store'; + +import * as fromReducer from './router.reducer'; + +export const getRouterState = createFeatureSelector< + fromRouter.RouterReducerState +>(fromReducer.coreRouterFeatureKey); + +export const getTitle = createSelector(getRouterState, (state) => { + return state?.state?.title +}); + +export const getRoute = createSelector(getRouterState, (state) => state?.state?.url); diff --git a/libs/ui/src/lib/util/router-store/util-router-store.module.ts b/libs/ui/src/lib/util/router-store/util-router-store.module.ts index 5422a49..262269d 100644 --- a/libs/ui/src/lib/util/router-store/util-router-store.module.ts +++ b/libs/ui/src/lib/util/router-store/util-router-store.module.ts @@ -1,16 +1,16 @@ -import { ErrorHandler, NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { RouterState, StoreRouterConnectingModule } from '@ngrx/router-store'; -import { CustomSerializer } from './custom-route-serializer'; - -@NgModule({ - imports: [ - CommonModule, - StoreRouterConnectingModule.forRoot({ - routerState: RouterState.Minimal, - serializer: CustomSerializer, - }), - ], -}) -export class PiSharedUtilRouterStoreModule {} +import { ErrorHandler, NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { RouterState, StoreRouterConnectingModule } from '@ngrx/router-store'; +import { CustomSerializer } from './custom-route-serializer'; + +@NgModule({ + imports: [ + CommonModule, + StoreRouterConnectingModule.forRoot({ + routerState: RouterState.Minimal, + serializer: CustomSerializer, + }), + ], +}) +export class PiSharedUtilRouterStoreModule {} diff --git a/libs/ui/src/lib/util/schema/index.ts b/libs/ui/src/lib/util/schema/index.ts index 6508cb2..2e5607a 100644 --- a/libs/ui/src/lib/util/schema/index.ts +++ b/libs/ui/src/lib/util/schema/index.ts @@ -1 +1 @@ -export * from './schema.service'; +export * from './schema.service'; diff --git a/libs/ui/src/lib/util/schema/schema.service.ts b/libs/ui/src/lib/util/schema/schema.service.ts index f53741e..c0d29e7 100644 --- a/libs/ui/src/lib/util/schema/schema.service.ts +++ b/libs/ui/src/lib/util/schema/schema.service.ts @@ -1,20 +1,20 @@ -// Angular -import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable, Renderer2 } from '@angular/core'; - -@Injectable({ - providedIn: 'root', -}) -export class SchemaService { - script: HTMLScriptElement; - - constructor(@Inject(DOCUMENT) private doc: Document) {} - - loadJsScript(renderer: Renderer2, data: any): HTMLScriptElement { - const script = renderer.createElement('script'); - script.type = 'application/ld+json'; - script.text = `${JSON.stringify(data)}`; - renderer.appendChild(this.doc.body, script); - return script; - } -} +// Angular +import { DOCUMENT } from '@angular/common'; +import { Inject, Injectable, Renderer2 } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class SchemaService { + script!: HTMLScriptElement; + + constructor(@Inject(DOCUMENT) private doc: Document) {} + + loadJsScript(renderer: Renderer2, data: any): HTMLScriptElement { + const script = renderer.createElement('script'); + script.type = 'application/ld+json'; + script.text = `${JSON.stringify(data)}`; + renderer.appendChild(this.doc.body, script); + return script; + } +} diff --git a/libs/ui/src/lib/util/scroll-to/index.ts b/libs/ui/src/lib/util/scroll-to/index.ts index 1ee2991..bf63c4f 100644 --- a/libs/ui/src/lib/util/scroll-to/index.ts +++ b/libs/ui/src/lib/util/scroll-to/index.ts @@ -1,5 +1,5 @@ -export * from './scroll-to.module'; - -export * from './scroll-to.directive'; - +export * from './scroll-to.module'; + +export * from './scroll-to.directive'; + export * from './scroll-to.service'; \ No newline at end of file diff --git a/libs/ui/src/lib/util/scroll-to/scroll-to.module.ts b/libs/ui/src/lib/util/scroll-to/scroll-to.module.ts index 410c54c..86c6357 100644 --- a/libs/ui/src/lib/util/scroll-to/scroll-to.module.ts +++ b/libs/ui/src/lib/util/scroll-to/scroll-to.module.ts @@ -1,11 +1,11 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { PiScrollToElementDirective } from './scroll-to.directive'; -import { PiSharedUtilScrollService } from './scroll-to.service'; - +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { PiScrollToElementDirective } from './scroll-to.directive'; +import { PiSharedUtilScrollService } from './scroll-to.service'; + @NgModule({ imports: [CommonModule, PiScrollToElementDirective], exports: [PiScrollToElementDirective], providers: [PiSharedUtilScrollService], -}) -export class PiSharedUtilScrollToModule {} +}) +export class PiSharedUtilScrollToModule {} diff --git a/libs/ui/src/lib/util/status/entities/status.model.ts b/libs/ui/src/lib/util/status/entities/status.model.ts index d63b78d..8e6e455 100644 --- a/libs/ui/src/lib/util/status/entities/status.model.ts +++ b/libs/ui/src/lib/util/status/entities/status.model.ts @@ -1 +1 @@ -export type status = 'success' | 'error' | 'pending' | 'info' | 'disabled'; +export type status = 'success' | 'error' | 'pending' | 'info' | 'disabled'; diff --git a/libs/ui/src/lib/util/status/index.ts b/libs/ui/src/lib/util/status/index.ts index 5c4cc32..fe9bb2a 100644 --- a/libs/ui/src/lib/util/status/index.ts +++ b/libs/ui/src/lib/util/status/index.ts @@ -1,5 +1,5 @@ - - -export * from './directives/status.directive'; - -export * from './entities/status.model'; + + +export * from './directives/status.directive'; + +export * from './entities/status.model'; diff --git a/libs/ui/src/lib/util/translate/custom-initializer.ts b/libs/ui/src/lib/util/translate/custom-initializer.ts index 9b25584..51b3cce 100644 --- a/libs/ui/src/lib/util/translate/custom-initializer.ts +++ b/libs/ui/src/lib/util/translate/custom-initializer.ts @@ -1,7 +1,7 @@ -import { TranslateService } from '@ngx-translate/core'; - -export function appInitializerFactory(translateService: TranslateService) { - return () => { - translateService.use('es'); - }; -} +import { TranslateService } from '@ngx-translate/core'; + +export function appInitializerFactory(translateService: TranslateService) { + return () => { + translateService.use('es'); + }; +} diff --git a/libs/ui/src/lib/util/translate/i18n.service.ts b/libs/ui/src/lib/util/translate/i18n.service.ts index 5220688..c03ff3a 100644 --- a/libs/ui/src/lib/util/translate/i18n.service.ts +++ b/libs/ui/src/lib/util/translate/i18n.service.ts @@ -1,27 +1,27 @@ -import { Injectable } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; -import { Observable } from 'rxjs'; - -@Injectable({ - providedIn: 'root', -}) -export class I18nService { - constructor(private translateService: TranslateService) {} - - setLanguage(lang: string): Observable { - return new Observable((observer) => { - this.translateService.use(lang).subscribe({ - next: () => { - observer.next(undefined); - observer.complete(); - }, - - error: (error: any) => observer.error(error), - }); - }); - } - - getTranslation(key: string): Observable { - return this.translateService.get(key); - } -} +import { Injectable } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class I18nService { + constructor(private translateService: TranslateService) {} + + setLanguage(lang: string): Observable { + return new Observable((observer) => { + this.translateService.use(lang).subscribe({ + next: () => { + observer.next(undefined); + observer.complete(); + }, + + error: (error: any) => observer.error(error), + }); + }); + } + + getTranslation(key: string): Observable { + return this.translateService.get(key); + } +} diff --git a/libs/ui/src/lib/util/translate/index.ts b/libs/ui/src/lib/util/translate/index.ts index d44b5b2..4543e5f 100644 --- a/libs/ui/src/lib/util/translate/index.ts +++ b/libs/ui/src/lib/util/translate/index.ts @@ -1,18 +1,18 @@ -export * from './translate.module'; - -// Initializer -export * from './custom-initializer'; - -// Data -export * from './translate.data'; - -// Model -export * from './translate.model'; - -// Translate server -export * from './loaders/translate-browser.loader'; -export * from './loaders/translate-server.loader'; - - -// Service -export * from './i18n.service'; +export * from './translate.module'; + +// Initializer +export * from './custom-initializer'; + +// Data +export * from './translate.data'; + +// Model +export * from './translate.model'; + +// Translate server +export * from './loaders/translate-browser.loader'; +export * from './loaders/translate-server.loader'; + + +// Service +export * from './i18n.service'; diff --git a/libs/ui/src/lib/util/translate/loaders/translate-server.loader.ts b/libs/ui/src/lib/util/translate/loaders/translate-server.loader.ts index 34d94bf..b325a64 100644 --- a/libs/ui/src/lib/util/translate/loaders/translate-server.loader.ts +++ b/libs/ui/src/lib/util/translate/loaders/translate-server.loader.ts @@ -1,39 +1,39 @@ -import { Observable } from 'rxjs'; -import { TranslateLoader } from '@ngx-translate/core'; -import { makeStateKey, StateKey, TransferState } from '@angular/core'; -import { join } from 'path'; -import { readFileSync } from 'fs'; - -export class TranslateServerLoader implements TranslateLoader { - constructor( - private transferState: TransferState, - private prefix: string = 'i18n', - private suffix: string = '.json' - ) {} - - public getTranslation(lang: string): Observable { - return new Observable((observer) => { - const assets_folder = join( - process.cwd(), - 'dist', - 'deale-website', // Your project name here - 'browser', - 'assets', - this.prefix - ); - - const jsonData = JSON.parse(readFileSync(`${assets_folder}/${lang}${this.suffix}`, 'utf8')); - - // Here we save the translations in the transfer-state - const key: StateKey = makeStateKey('transfer-translate-' + lang); - this.transferState.set(key, jsonData); - - observer.next(jsonData); - observer.complete(); - }); - } -} - -export function translateServerLoaderFactory(transferState: TransferState) { - return new TranslateServerLoader(transferState); -} +import { Observable } from 'rxjs'; +import { TranslateLoader } from '@ngx-translate/core'; +import { makeStateKey, StateKey, TransferState } from '@angular/core'; +import { join } from 'path'; +import { readFileSync } from 'fs'; + +export class TranslateServerLoader implements TranslateLoader { + constructor( + private transferState: TransferState, + private prefix: string = 'i18n', + private suffix: string = '.json' + ) {} + + public getTranslation(lang: string): Observable { + return new Observable((observer) => { + const assets_folder = join( + process.cwd(), + 'dist', + 'deale-website', // Your project name here + 'browser', + 'assets', + this.prefix + ); + + const jsonData = JSON.parse(readFileSync(`${assets_folder}/${lang}${this.suffix}`, 'utf8')); + + // Here we save the translations in the transfer-state + const key: StateKey = makeStateKey('transfer-translate-' + lang); + this.transferState.set(key, jsonData); + + observer.next(jsonData); + observer.complete(); + }); + } +} + +export function translateServerLoaderFactory(transferState: TransferState) { + return new TranslateServerLoader(transferState); +} diff --git a/libs/ui/src/lib/util/translate/translate.data.ts b/libs/ui/src/lib/util/translate/translate.data.ts index 6a46afc..1d39d96 100644 --- a/libs/ui/src/lib/util/translate/translate.data.ts +++ b/libs/ui/src/lib/util/translate/translate.data.ts @@ -1,10 +1,10 @@ -import { LanguageProps } from './translate.model'; - -export const LANGUAGES: Map = new Map([ - ['es', { languageCombo: 'common.languages.spanish', rtl: false, currency: 'EUR' }], - ['en', { languageCombo: 'common.languages.english', rtl: false, currency: 'USD' }], - ['ca', { languageCombo: 'common.languages.catalan', rtl: false, currency: 'EUR' }], - ['de', { languageCombo: 'common.languages.german', rtl: false, currency: 'EUR' }], - ['it', { languageCombo: 'common.languages.italian', rtl: false, currency: 'EUR' }], - ['fr', { languageCombo: 'common.languages.french', rtl: false, currency: 'EUR' }], -]); +import { LanguageProps } from './translate.model'; + +export const LANGUAGES: Map = new Map([ + ['es', { languageCombo: 'common.languages.spanish', rtl: false, currency: 'EUR' }], + ['en', { languageCombo: 'common.languages.english', rtl: false, currency: 'USD' }], + ['ca', { languageCombo: 'common.languages.catalan', rtl: false, currency: 'EUR' }], + ['de', { languageCombo: 'common.languages.german', rtl: false, currency: 'EUR' }], + ['it', { languageCombo: 'common.languages.italian', rtl: false, currency: 'EUR' }], + ['fr', { languageCombo: 'common.languages.french', rtl: false, currency: 'EUR' }], +]); diff --git a/libs/ui/src/lib/util/translate/translate.model.ts b/libs/ui/src/lib/util/translate/translate.model.ts index 3752c6c..5ad59aa 100644 --- a/libs/ui/src/lib/util/translate/translate.model.ts +++ b/libs/ui/src/lib/util/translate/translate.model.ts @@ -1,10 +1,10 @@ -export interface LanguageProps { - languageCombo: string; - rtl: boolean; - currency: string; -} - -export interface Language { - locale: string; - value: string; -} +export interface LanguageProps { + languageCombo: string; + rtl: boolean; + currency: string; +} + +export interface Language { + locale: string; + value: string; +} diff --git a/libs/ui/src/lib/util/validator/definitions.ts b/libs/ui/src/lib/util/validator/definitions.ts index 3061837..4c14891 100644 --- a/libs/ui/src/lib/util/validator/definitions.ts +++ b/libs/ui/src/lib/util/validator/definitions.ts @@ -1,18 +1,18 @@ -export const TextFieldMaxLength = 300; -export const dniPattern = /^[\d]{8}[A-Za-z]{1}$/; -export const niePattern = /^[A-Za-z]{1}[\d]{7}[A-Za-z]{1}$/; -export const nifPattern = /^([A-Za-z][0-9]{8}|[0-9]{8}[A-Za-z])$/; -export const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/; -export const emailPattern = - /^[A-Za-z0-9.+\-_]*@[A-Za-z0-9.\-_]*\.[A-Za-z]{1,20}$/; -export const phonePattern = /^(\+34|0034|34)?[ -]*(6|7|8|9)[ -]*([0-9][ -]*){8}$/; -export const passwordPattern = /^.{8,}$/; -export const fieldNamePattern = /^[A-Za-z0-9_]*$/; -export const onlyPositiveNumberPattern = /^[1-9]+[0-9]*$/; -export const positiveNumbersWithDecimals = /^\d+([.,]\d{0,2})?$/; -export const positiveNumbersIncludingZero = /^(0|\d+|\d+.\d+)$/; -export const onlyNumbersPattern = /^[0-9]*$/; -export const onlyNumbersDecimalsPattern = /^[0-9]*(\\,[0-9]{0,2})?$/; -export const repeatedPattern = /^(?!.*(\w)\1{3,}).+$/; -export const cognitoPhonePattern = /^\+[1-9]\d{10,14}$/; -export const monthYearPattern = /^(0[1-9]|1[0-2])\/([0-9]{2})$/; +export const TextFieldMaxLength = 300; +export const dniPattern = /^[\d]{8}[A-Za-z]{1}$/; +export const niePattern = /^[A-Za-z]{1}[\d]{7}[A-Za-z]{1}$/; +export const nifPattern = /^([A-Za-z][0-9]{8}|[0-9]{8}[A-Za-z])$/; +export const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/; +export const emailPattern = + /^[A-Za-z0-9.+\-_]*@[A-Za-z0-9.\-_]*\.[A-Za-z]{1,20}$/; +export const phonePattern = /^(\+34|0034|34)?[ -]*(6|7|8|9)[ -]*([0-9][ -]*){8}$/; +export const passwordPattern = /^.{8,}$/; +export const fieldNamePattern = /^[A-Za-z0-9_]*$/; +export const onlyPositiveNumberPattern = /^[1-9]+[0-9]*$/; +export const positiveNumbersWithDecimals = /^\d+([.,]\d{0,2})?$/; +export const positiveNumbersIncludingZero = /^(0|\d+|\d+.\d+)$/; +export const onlyNumbersPattern = /^[0-9]*$/; +export const onlyNumbersDecimalsPattern = /^[0-9]*(\\,[0-9]{0,2})?$/; +export const repeatedPattern = /^(?!.*(\w)\1{3,}).+$/; +export const cognitoPhonePattern = /^\+[1-9]\d{10,14}$/; +export const monthYearPattern = /^(0[1-9]|1[0-2])\/([0-9]{2})$/; diff --git a/libs/ui/src/lib/util/validator/index.ts b/libs/ui/src/lib/util/validator/index.ts index 351bdc7..05d1708 100644 --- a/libs/ui/src/lib/util/validator/index.ts +++ b/libs/ui/src/lib/util/validator/index.ts @@ -1,2 +1,2 @@ -export * from './definitions'; -export * from './utils'; +export * from './definitions'; +export * from './utils'; diff --git a/libs/ui/src/lib/util/validator/utils.ts b/libs/ui/src/lib/util/validator/utils.ts index 1b87664..9afa126 100644 --- a/libs/ui/src/lib/util/validator/utils.ts +++ b/libs/ui/src/lib/util/validator/utils.ts @@ -1,263 +1,263 @@ -import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms'; -import { environment } from '../environments'; -import { - dniPattern, - emailPattern, - urlPattern, - niePattern, - nifPattern, - onlyNumbersDecimalsPattern, - onlyNumbersPattern, - onlyPositiveNumberPattern, - passwordPattern, - phonePattern, - positiveNumbersWithDecimals, - positiveNumbersIncludingZero, - repeatedPattern, - cognitoPhonePattern, - monthYearPattern, -} from './definitions'; - -export function validateRequired(control: AbstractControl): ValidationErrors | null { - const value: string = control.value as string; - if (value === null || value === undefined || value === '' || value.length === 0) { - return { message: ['common.validator.requiredField'] }; - } - return null; -} - -export function validateRequiredIfDirty(control: AbstractControl): ValidationErrors | null { - const value: string = control.value as string; - if (value === null || value === undefined || value === '' || value.length === 0 || value === 'undefined') { - if (control.dirty) { - return { message: ['common.validator.requiredField'] }; - } - return null; - } - return null; -} - -export function validateNotZero(control: AbstractControl): ValidationErrors | null { - const value: number = control.value as number; - if (value === 0) { - return { message: ['common.validator.requiredField'] }; - } - return null; -} - -export function validateRequiredWithoutMessage(control: AbstractControl): ValidationErrors | null { - const value: boolean = control.value as boolean; - if (!value) { - return { message: [''] }; - } - return null; -} - -export function validatePassword(control: AbstractControl): ValidationErrors | null { - const password: string = control.value as string; - if (password && !passwordPattern.test(password)) { - return { message: ['common.validator.minimumPasswordCharacters'] }; - } - return null; -} - -export function validateEmail(control: AbstractControl): ValidationErrors | null { - const email: string = control.value as string; - if (email && !emailPattern.test(email)) { - return { message: ['common.validator.enterValidEmail'] }; - } - return null; -} - -export function validateUrl(control: AbstractControl): ValidationErrors | null { - const url: string = control.value as string; - if (url && !urlPattern.test(url)) { - return { message: ['common.validator.enterValidUrl'] }; - } - return null; -} - -export function validatePhone(control: AbstractControl): ValidationErrors | null { - const phone: string = control.value as string; - if (phone && !phonePattern.test(phone)) { - return { message: ['common.validator.enterValidPhoneNumber'] }; - } - return null; -} - -export function validateCognitoPhone(control: AbstractControl): ValidationErrors | null { - const phone: string = control.value as string; - if (phone && !cognitoPhonePattern.test(phone)) { - return { message: ['common.validator.enterValidPhoneNumber'] }; - } - return null; -} - -export function validateMaxLength(maxLength: number): ValidatorFn { - return (control: AbstractControl): ValidationErrors | null => { - const maxChars: string = control.value as string; - if (maxChars && maxChars.length > maxLength) { - return { - message: [ - 'common.validator.noMoreThanCharacters.1', - `${maxLength}`, - 'common.validator.noMoreThanCharacters.2', - ], - }; - } - return null; - }; -} - -export function validateMinLength(minLength: number): ValidatorFn { - return (control: AbstractControl): ValidationErrors | null => { - const minChars: string = control.value as string; - if (minChars && minChars.length <= minLength) { - return { - message: [ - 'common.validator.noLessThanCharacters.1', - `${minLength}`, - 'common.validator.noLessThanCharacters.2', - ], - }; - } - return null; - }; -} - -export function validateMaximumNumber(maximum: number): ValidatorFn { - return (control: AbstractControl): ValidationErrors | null => { - const num: number = control.value as number; - if (maximum && num > Number(maximum)) { - return { - message: ['common.validator.noMoreThanMaxNumber.1', `${maximum}`], - }; - } - return null; - }; -} - -export function validateMinimumNumber(minimum: number): ValidatorFn { - return (control: AbstractControl): ValidationErrors | null => { - const num: number = control.value as number; - if (minimum && num < Number(minimum)) { - return { message: ['common.validator.noLessThanMinNumbers', minimum] }; - } - return null; - }; -} - -export function validatePositiveNumber(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && !onlyPositiveNumberPattern.test(num)) { - return { message: ['common.validator.onlyPositiveNumbers'] }; - } - return null; -} - -export function validateNif(control: AbstractControl): ValidationErrors | null { - const nif: string = control.value as string; - if (nif && !nifPattern.test(nif)) { - return { message: ['common.validator.letterAndNumberNIF'] }; - } - return null; -} - -export function validateNifInvestor(control: AbstractControl): ValidationErrors | null { - const nif: string = control.value as string; - if (nif && !nifPattern.test(nif) && !dniPattern.test(nif) && !niePattern.test(nif)) { - return { message: ['common.validator.incorrectNIF'] }; - } - return null; -} - -export function validateNifProd(control: AbstractControl): ValidationErrors | null { - const nif: string = control.value as string; - if (environment.production) { - if (nif && (nif === 'A00000000' || nif === 'B00000000')) { - return { message: ['common.validator.invalidNIF'] }; - } - } - return null; -} - -export function validateOnlyNumbers(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && !onlyNumbersPattern.test(num)) { - return { message: ['common.validator.onlyNumbers'] }; - } - return null; -} - -export function validateOnlyNumbersWithDecimals(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && !onlyNumbersDecimalsPattern.test(num)) { - return { message: ['common.validator.numbersWithDecimals'] }; - } - return null; -} - -export function validatePositiveNumbersWithDecimals( - control: AbstractControl -): ValidationErrors | null { - const num: string = control.value as string; - if (num && !positiveNumbersWithDecimals.test(num)) { - return { message: ['common.validator.numbersWithDecimals'] }; - } - return null; -} - -export function validatePositiveNumbersIncludingZero(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && !positiveNumbersIncludingZero.test(num)) { - return { message: ['common.validator.positiveNumbersIncludingZero']} - } - return null; -} - -export function validateNotOnlyNumbers(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && onlyNumbersPattern.test(num)) { - return { message: ['common.validator.notOnlyNumbers'] }; - } - return null; -} - -export function notRepeatedChar(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && !repeatedPattern.test(num)) { - return { message: ['common.validator.incorrectName'] }; - } - return null; -} - -export function validateMultipleChoiceRequired(control: AbstractControl): ValidationErrors | null { - const choices: { [key: string]: boolean } = control.value as { - [key: string]: boolean; - }; - let selected: boolean = false; - - selected = !!choices ? Object.entries(choices)?.some(([key, value]) => value) : null; - - if (choices && !selected) { - return { message: ['common.validator.atLeastOneOption'] }; - } - return null; -} - -export function rangeValidator(control: AbstractControl): ValidationErrors | null { - const from = Number(control.get('from').value); - const to = Number(control.get('to').value); - if (!from || !to) return null; - return from <= to - ? null - : { message: ['common.validator.minNotSuperiorToMax'] }; -} - -export function validateMonthYear(control: AbstractControl): ValidationErrors | null { - const num: string = control.value as string; - if (num && !monthYearPattern.test(num)) { - return { message: ['common.validator.monthYear'] }; - } - return null; -} +import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms'; +import { environment } from '../environments'; +import { + dniPattern, + emailPattern, + urlPattern, + niePattern, + nifPattern, + onlyNumbersDecimalsPattern, + onlyNumbersPattern, + onlyPositiveNumberPattern, + passwordPattern, + phonePattern, + positiveNumbersWithDecimals, + positiveNumbersIncludingZero, + repeatedPattern, + cognitoPhonePattern, + monthYearPattern, +} from './definitions'; + +export function validateRequired(control: AbstractControl): ValidationErrors | null { + const value: string = control.value as string; + if (value === null || value === undefined || value === '' || value.length === 0) { + return { message: ['common.validator.requiredField'] }; + } + return null; +} + +export function validateRequiredIfDirty(control: AbstractControl): ValidationErrors | null { + const value: string = control.value as string; + if (value === null || value === undefined || value === '' || value.length === 0 || value === 'undefined') { + if (control.dirty) { + return { message: ['common.validator.requiredField'] }; + } + return null; + } + return null; +} + +export function validateNotZero(control: AbstractControl): ValidationErrors | null { + const value: number = control.value as number; + if (value === 0) { + return { message: ['common.validator.requiredField'] }; + } + return null; +} + +export function validateRequiredWithoutMessage(control: AbstractControl): ValidationErrors | null { + const value: boolean = control.value as boolean; + if (!value) { + return { message: [''] }; + } + return null; +} + +export function validatePassword(control: AbstractControl): ValidationErrors | null { + const password: string = control.value as string; + if (password && !passwordPattern.test(password)) { + return { message: ['common.validator.minimumPasswordCharacters'] }; + } + return null; +} + +export function validateEmail(control: AbstractControl): ValidationErrors | null { + const email: string = control.value as string; + if (email && !emailPattern.test(email)) { + return { message: ['common.validator.enterValidEmail'] }; + } + return null; +} + +export function validateUrl(control: AbstractControl): ValidationErrors | null { + const url: string = control.value as string; + if (url && !urlPattern.test(url)) { + return { message: ['common.validator.enterValidUrl'] }; + } + return null; +} + +export function validatePhone(control: AbstractControl): ValidationErrors | null { + const phone: string = control.value as string; + if (phone && !phonePattern.test(phone)) { + return { message: ['common.validator.enterValidPhoneNumber'] }; + } + return null; +} + +export function validateCognitoPhone(control: AbstractControl): ValidationErrors | null { + const phone: string = control.value as string; + if (phone && !cognitoPhonePattern.test(phone)) { + return { message: ['common.validator.enterValidPhoneNumber'] }; + } + return null; +} + +export function validateMaxLength(maxLength: number): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const maxChars: string = control.value as string; + if (maxChars && maxChars.length > maxLength) { + return { + message: [ + 'common.validator.noMoreThanCharacters.1', + `${maxLength}`, + 'common.validator.noMoreThanCharacters.2', + ], + }; + } + return null; + }; +} + +export function validateMinLength(minLength: number): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const minChars: string = control.value as string; + if (minChars && minChars.length <= minLength) { + return { + message: [ + 'common.validator.noLessThanCharacters.1', + `${minLength}`, + 'common.validator.noLessThanCharacters.2', + ], + }; + } + return null; + }; +} + +export function validateMaximumNumber(maximum: number): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const num: number = control.value as number; + if (maximum && num > Number(maximum)) { + return { + message: ['common.validator.noMoreThanMaxNumber.1', `${maximum}`], + }; + } + return null; + }; +} + +export function validateMinimumNumber(minimum: number): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const num: number = control.value as number; + if (minimum && num < Number(minimum)) { + return { message: ['common.validator.noLessThanMinNumbers', minimum] }; + } + return null; + }; +} + +export function validatePositiveNumber(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && !onlyPositiveNumberPattern.test(num)) { + return { message: ['common.validator.onlyPositiveNumbers'] }; + } + return null; +} + +export function validateNif(control: AbstractControl): ValidationErrors | null { + const nif: string = control.value as string; + if (nif && !nifPattern.test(nif)) { + return { message: ['common.validator.letterAndNumberNIF'] }; + } + return null; +} + +export function validateNifInvestor(control: AbstractControl): ValidationErrors | null { + const nif: string = control.value as string; + if (nif && !nifPattern.test(nif) && !dniPattern.test(nif) && !niePattern.test(nif)) { + return { message: ['common.validator.incorrectNIF'] }; + } + return null; +} + +export function validateNifProd(control: AbstractControl): ValidationErrors | null { + const nif: string = control.value as string; + if (environment.production) { + if (nif && (nif === 'A00000000' || nif === 'B00000000')) { + return { message: ['common.validator.invalidNIF'] }; + } + } + return null; +} + +export function validateOnlyNumbers(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && !onlyNumbersPattern.test(num)) { + return { message: ['common.validator.onlyNumbers'] }; + } + return null; +} + +export function validateOnlyNumbersWithDecimals(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && !onlyNumbersDecimalsPattern.test(num)) { + return { message: ['common.validator.numbersWithDecimals'] }; + } + return null; +} + +export function validatePositiveNumbersWithDecimals( + control: AbstractControl +): ValidationErrors | null { + const num: string = control.value as string; + if (num && !positiveNumbersWithDecimals.test(num)) { + return { message: ['common.validator.numbersWithDecimals'] }; + } + return null; +} + +export function validatePositiveNumbersIncludingZero(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && !positiveNumbersIncludingZero.test(num)) { + return { message: ['common.validator.positiveNumbersIncludingZero']} + } + return null; +} + +export function validateNotOnlyNumbers(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && onlyNumbersPattern.test(num)) { + return { message: ['common.validator.notOnlyNumbers'] }; + } + return null; +} + +export function notRepeatedChar(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && !repeatedPattern.test(num)) { + return { message: ['common.validator.incorrectName'] }; + } + return null; +} + +export function validateMultipleChoiceRequired(control: AbstractControl): ValidationErrors | null { + const choices: { [key: string]: boolean } = control.value as { + [key: string]: boolean; + }; + let selected: boolean = false; + + selected = !!choices ? Object.entries(choices)?.some(([key, value]) => value) : false; + + if (choices && !selected) { + return { message: ['common.validator.atLeastOneOption'] }; + } + return null; +} + +export function rangeValidator(control: AbstractControl): ValidationErrors | null { + const from = Number(control.get('from')?.value); + const to = Number(control.get('to')?.value); + if (!from || !to) return null; + return from <= to + ? null + : { message: ['common.validator.minNotSuperiorToMax'] }; +} + +export function validateMonthYear(control: AbstractControl): ValidationErrors | null { + const num: string = control.value as string; + if (num && !monthYearPattern.test(num)) { + return { message: ['common.validator.monthYear'] }; + } + return null; +} diff --git a/libs/ui/src/lib/util/value/directives/value.directive.ts b/libs/ui/src/lib/util/value/directives/value.directive.ts index 6fec6e2..133886d 100644 --- a/libs/ui/src/lib/util/value/directives/value.directive.ts +++ b/libs/ui/src/lib/util/value/directives/value.directive.ts @@ -1,18 +1,18 @@ -import { Directive, HostBinding, input } from '@angular/core'; - -@Directive({ selector: '[pi-value]', }) -export class PiValueDirective { - @HostBinding('class') get classes(): string | boolean { - return ['pi-value', this.value() > 0 ? 'is-positive' : 'is-negative'].join(' '); - } - - readonly value = input.required(); - - checkValue(): string { - if (this.value() > 0) { - return 'is-positive'; - } else { - return 'is-negative'; - } - } -} +import { Directive, HostBinding, input } from '@angular/core'; + +@Directive({ selector: '[pi-value]', }) +export class PiValueDirective { + @HostBinding('class') get classes(): string | boolean { + return ['pi-value', this.value() > 0 ? 'is-positive' : 'is-negative'].join(' '); + } + + readonly value = input.required(); + + checkValue(): string { + if (this.value() > 0) { + return 'is-positive'; + } else { + return 'is-negative'; + } + } +} diff --git a/libs/ui/src/lib/util/value/index.ts b/libs/ui/src/lib/util/value/index.ts index e3e4178..94185c8 100644 --- a/libs/ui/src/lib/util/value/index.ts +++ b/libs/ui/src/lib/util/value/index.ts @@ -1,3 +1,3 @@ - - -export * from './directives/value.directive'; + + +export * from './directives/value.directive'; diff --git a/libs/ui/src/lib/util/view-title/index.ts b/libs/ui/src/lib/util/view-title/index.ts index 087b61d..afcc5c4 100644 --- a/libs/ui/src/lib/util/view-title/index.ts +++ b/libs/ui/src/lib/util/view-title/index.ts @@ -1 +1 @@ -export * from './view-title.service'; +export * from './view-title.service'; diff --git a/libs/ui/src/lib/util/view-title/view-title.service.ts b/libs/ui/src/lib/util/view-title/view-title.service.ts index 1d0f2c3..e4d5f55 100644 --- a/libs/ui/src/lib/util/view-title/view-title.service.ts +++ b/libs/ui/src/lib/util/view-title/view-title.service.ts @@ -1,20 +1,20 @@ -import { RouterStateSnapshot, TitleStrategy } from '@angular/router'; -import { Title } from '@angular/platform-browser'; -import { Injectable } from '@angular/core'; - -import { TranslateService } from '@ngx-translate/core'; - -@Injectable({ - providedIn: 'root', -}) -export class ViewTitleService extends TitleStrategy { - constructor(private _title: Title, private _translate: TranslateService) { - super(); - } - - updateTitle(snapshot: RouterStateSnapshot): void { - const title = this.buildTitle(snapshot); - - if (title) this._title.setTitle(`Deale SaaS Platform | ${this._translate.instant(title)}`); - } -} +import { RouterStateSnapshot, TitleStrategy } from '@angular/router'; +import { Title } from '@angular/platform-browser'; +import { Injectable } from '@angular/core'; + +import { TranslateService } from '@ngx-translate/core'; + +@Injectable({ + providedIn: 'root', +}) +export class ViewTitleService extends TitleStrategy { + constructor(private _title: Title, private _translate: TranslateService) { + super(); + } + + updateTitle(snapshot: RouterStateSnapshot): void { + const title = this.buildTitle(snapshot); + + if (title) this._title.setTitle(`Deale SaaS Platform | ${this._translate.instant(title)}`); + } +}