diff --git a/apps/ftu-ui-small-wc/src/app/app.component.ts b/apps/ftu-ui-small-wc/src/app/app.component.ts index 2bcaa6fa8..c64b0a7e7 100644 --- a/apps/ftu-ui-small-wc/src/app/app.component.ts +++ b/apps/ftu-ui-small-wc/src/app/app.component.ts @@ -246,9 +246,7 @@ export class AppComponent implements OnInit, OnChanges { */ private updateSelectedIllustration(): void { const { selectedIllustration } = this; - console.log('fooo', selectedIllustration); const selected = selectedIllustrationInput(selectedIllustration); - console.log('bar'); if (selected === undefined || selected === '') { this.setDefaultSelectedIllustration(); } else { diff --git a/libs/design-system/assets/icons/organ/bladder.svg b/libs/design-system/assets/icons/organ/bladder.svg new file mode 100644 index 000000000..edfe71e7e --- /dev/null +++ b/libs/design-system/assets/icons/organ/bladder.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/blood.svg b/libs/design-system/assets/icons/organ/blood.svg new file mode 100644 index 000000000..d750cf71b --- /dev/null +++ b/libs/design-system/assets/icons/organ/blood.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/bone_marrow.svg b/libs/design-system/assets/icons/organ/bone_marrow.svg new file mode 100644 index 000000000..ec08bd152 --- /dev/null +++ b/libs/design-system/assets/icons/organ/bone_marrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/brain.svg b/libs/design-system/assets/icons/organ/brain.svg new file mode 100644 index 000000000..e5b7ea5c8 --- /dev/null +++ b/libs/design-system/assets/icons/organ/brain.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/breast.svg b/libs/design-system/assets/icons/organ/breast.svg new file mode 100644 index 000000000..17a100aee --- /dev/null +++ b/libs/design-system/assets/icons/organ/breast.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/extrapulmonary_bronchus.svg b/libs/design-system/assets/icons/organ/extrapulmonary_bronchus.svg new file mode 100644 index 000000000..f29e770ef --- /dev/null +++ b/libs/design-system/assets/icons/organ/extrapulmonary_bronchus.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/eye.svg b/libs/design-system/assets/icons/organ/eye.svg new file mode 100644 index 000000000..4fe18cc14 --- /dev/null +++ b/libs/design-system/assets/icons/organ/eye.svg @@ -0,0 +1,4 @@ + + + + diff --git a/libs/design-system/assets/icons/organ/fallopian_tube_left.svg b/libs/design-system/assets/icons/organ/fallopian_tube_left.svg new file mode 100644 index 000000000..d2e6f3893 --- /dev/null +++ b/libs/design-system/assets/icons/organ/fallopian_tube_left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/libs/design-system/assets/icons/organ/fallopian_tube_right.svg b/libs/design-system/assets/icons/organ/fallopian_tube_right.svg new file mode 100644 index 000000000..e5ca37677 --- /dev/null +++ b/libs/design-system/assets/icons/organ/fallopian_tube_right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/libs/design-system/assets/icons/organ/heart.svg b/libs/design-system/assets/icons/organ/heart.svg new file mode 100644 index 000000000..01b11f5e3 --- /dev/null +++ b/libs/design-system/assets/icons/organ/heart.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/kidney_left.svg b/libs/design-system/assets/icons/organ/kidney_left.svg new file mode 100644 index 000000000..34cee869b --- /dev/null +++ b/libs/design-system/assets/icons/organ/kidney_left.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/kidney_right.svg b/libs/design-system/assets/icons/organ/kidney_right.svg new file mode 100644 index 000000000..a5685e37f --- /dev/null +++ b/libs/design-system/assets/icons/organ/kidney_right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/kidneys.svg b/libs/design-system/assets/icons/organ/kidneys.svg new file mode 100644 index 000000000..72321a3fa --- /dev/null +++ b/libs/design-system/assets/icons/organ/kidneys.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/knee.svg b/libs/design-system/assets/icons/organ/knee.svg new file mode 100644 index 000000000..7cd91533c --- /dev/null +++ b/libs/design-system/assets/icons/organ/knee.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/large_intestine.svg b/libs/design-system/assets/icons/organ/large_intestine.svg new file mode 100644 index 000000000..1f82bf5a2 --- /dev/null +++ b/libs/design-system/assets/icons/organ/large_intestine.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/larynx.svg b/libs/design-system/assets/icons/organ/larynx.svg new file mode 100644 index 000000000..2cde08130 --- /dev/null +++ b/libs/design-system/assets/icons/organ/larynx.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/liver.svg b/libs/design-system/assets/icons/organ/liver.svg new file mode 100644 index 000000000..6ddde56fb --- /dev/null +++ b/libs/design-system/assets/icons/organ/liver.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/lung_left.svg b/libs/design-system/assets/icons/organ/lung_left.svg new file mode 100644 index 000000000..32b166583 --- /dev/null +++ b/libs/design-system/assets/icons/organ/lung_left.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/lung_right.svg b/libs/design-system/assets/icons/organ/lung_right.svg new file mode 100644 index 000000000..f2170051b --- /dev/null +++ b/libs/design-system/assets/icons/organ/lung_right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/lungs.svg b/libs/design-system/assets/icons/organ/lungs.svg new file mode 100644 index 000000000..fd3b0e462 --- /dev/null +++ b/libs/design-system/assets/icons/organ/lungs.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/lymph_nodes.svg b/libs/design-system/assets/icons/organ/lymph_nodes.svg new file mode 100644 index 000000000..eb8bab20e --- /dev/null +++ b/libs/design-system/assets/icons/organ/lymph_nodes.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/neurons.svg b/libs/design-system/assets/icons/organ/neurons.svg new file mode 100644 index 000000000..0a8190a47 --- /dev/null +++ b/libs/design-system/assets/icons/organ/neurons.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/ovaries.svg b/libs/design-system/assets/icons/organ/ovaries.svg new file mode 100644 index 000000000..9eab40daf --- /dev/null +++ b/libs/design-system/assets/icons/organ/ovaries.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/ovary_left.svg b/libs/design-system/assets/icons/organ/ovary_left.svg new file mode 100644 index 000000000..cf3e56d4f --- /dev/null +++ b/libs/design-system/assets/icons/organ/ovary_left.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/libs/design-system/assets/icons/organ/ovary_right.svg b/libs/design-system/assets/icons/organ/ovary_right.svg new file mode 100644 index 000000000..9ddf92770 --- /dev/null +++ b/libs/design-system/assets/icons/organ/ovary_right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/libs/design-system/assets/icons/organ/palatine_tonsil.svg b/libs/design-system/assets/icons/organ/palatine_tonsil.svg new file mode 100644 index 000000000..a0ecb260e --- /dev/null +++ b/libs/design-system/assets/icons/organ/palatine_tonsil.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/pancreas.svg b/libs/design-system/assets/icons/organ/pancreas.svg new file mode 100644 index 000000000..0276e000d --- /dev/null +++ b/libs/design-system/assets/icons/organ/pancreas.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/pelvis.svg b/libs/design-system/assets/icons/organ/pelvis.svg new file mode 100644 index 000000000..dffbcc0d5 --- /dev/null +++ b/libs/design-system/assets/icons/organ/pelvis.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/peripehral_nervous_system.svg b/libs/design-system/assets/icons/organ/peripehral_nervous_system.svg new file mode 100644 index 000000000..4af7edc69 --- /dev/null +++ b/libs/design-system/assets/icons/organ/peripehral_nervous_system.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/placenta.svg b/libs/design-system/assets/icons/organ/placenta.svg new file mode 100644 index 000000000..b6e55fffe --- /dev/null +++ b/libs/design-system/assets/icons/organ/placenta.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/prostate.svg b/libs/design-system/assets/icons/organ/prostate.svg new file mode 100644 index 000000000..269edb5aa --- /dev/null +++ b/libs/design-system/assets/icons/organ/prostate.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/skin.svg b/libs/design-system/assets/icons/organ/skin.svg new file mode 100644 index 000000000..daf2e70ea --- /dev/null +++ b/libs/design-system/assets/icons/organ/skin.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/small_intestine.svg b/libs/design-system/assets/icons/organ/small_intestine.svg new file mode 100644 index 000000000..e5b716c20 --- /dev/null +++ b/libs/design-system/assets/icons/organ/small_intestine.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/spinal_cord.svg b/libs/design-system/assets/icons/organ/spinal_cord.svg new file mode 100644 index 000000000..f84dd0b0a --- /dev/null +++ b/libs/design-system/assets/icons/organ/spinal_cord.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/spleen.svg b/libs/design-system/assets/icons/organ/spleen.svg new file mode 100644 index 000000000..555912c22 --- /dev/null +++ b/libs/design-system/assets/icons/organ/spleen.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/stomach.svg b/libs/design-system/assets/icons/organ/stomach.svg new file mode 100644 index 000000000..b935eb10c --- /dev/null +++ b/libs/design-system/assets/icons/organ/stomach.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/thymus.svg b/libs/design-system/assets/icons/organ/thymus.svg new file mode 100644 index 000000000..b1fc5c32e --- /dev/null +++ b/libs/design-system/assets/icons/organ/thymus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/trachea.svg b/libs/design-system/assets/icons/organ/trachea.svg new file mode 100644 index 000000000..858ed1d70 --- /dev/null +++ b/libs/design-system/assets/icons/organ/trachea.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/ureter_left.svg b/libs/design-system/assets/icons/organ/ureter_left.svg new file mode 100644 index 000000000..62d4a7dec --- /dev/null +++ b/libs/design-system/assets/icons/organ/ureter_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/design-system/assets/icons/organ/ureter_right.svg b/libs/design-system/assets/icons/organ/ureter_right.svg new file mode 100644 index 000000000..f33be8e78 --- /dev/null +++ b/libs/design-system/assets/icons/organ/ureter_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/design-system/assets/icons/organ/uterus.svg b/libs/design-system/assets/icons/organ/uterus.svg new file mode 100644 index 000000000..433b29463 --- /dev/null +++ b/libs/design-system/assets/icons/organ/uterus.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/vasculature_thick.svg b/libs/design-system/assets/icons/organ/vasculature_thick.svg new file mode 100644 index 000000000..0dc5e3f6b --- /dev/null +++ b/libs/design-system/assets/icons/organ/vasculature_thick.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/organ/vasculature_thin.svg b/libs/design-system/assets/icons/organ/vasculature_thin.svg new file mode 100644 index 000000000..ec9978a4d --- /dev/null +++ b/libs/design-system/assets/icons/organ/vasculature_thin.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/button/src/index.ts b/libs/design-system/button/src/index.ts index 5204f3a6a..f490402b8 100644 --- a/libs/design-system/button/src/index.ts +++ b/libs/design-system/button/src/index.ts @@ -1,7 +1,5 @@ -export * from './lib/button-styles/button-styles.component'; export * from './lib/providers'; export * from './lib/button.module'; - export * from './lib/button-size/button-size.directive'; export * from './lib/directives/call-to-action-button.directive'; export * from './lib/directives/nav-item-button.directive'; diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss index 19000d55b..0443e4b94 100644 --- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss +++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss @@ -20,6 +20,7 @@ $y-multiplier: 0.4566; // Basic Primary & Secondary :is(a, button)[mat-button] { min-width: unset; + white-space: nowrap; font: var(--sys-title-small); --mdc-text-button-label-text-color: var(--sys-on-tertiary-fixed); --mat-text-button-state-layer-color: var(--sys-on-tertiary-fixed); diff --git a/libs/design-system/button/src/lib/button.module.ts b/libs/design-system/button/src/lib/button.module.ts index 45c03b08b..e403563ff 100644 --- a/libs/design-system/button/src/lib/button.module.ts +++ b/libs/design-system/button/src/lib/button.module.ts @@ -2,12 +2,12 @@ import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { ButtonSizeDirective } from './button-size/button-size.directive'; import { CallToActionButtonDirective } from './directives/call-to-action-button.directive'; +import { NavigationItemButtonDirective } from './directives/nav-item-button.directive'; +import { NavigationCategoryButtonDirective } from './directives/navigation-category-button.directive'; import { PrimaryButtonDirective } from './directives/primary-button.directive'; import { SecondaryButtonDirective } from './directives/secondary-button.directive'; -import { NavigationCategoryButtonDirective } from './directives/navigation-category-button.directive'; -import { NavigationItemButtonDirective } from './directives/nav-item-button.directive'; -import { ButtonSizeDirective } from './button-size/button-size.directive'; /** Module exporting button and related utilities */ @NgModule({ diff --git a/libs/design-system/dialog/README.md b/libs/design-system/dialog/README.md new file mode 100644 index 000000000..89dbe6e7e --- /dev/null +++ b/libs/design-system/dialog/README.md @@ -0,0 +1,3 @@ +# @hra-ui/design-system/dialog + +Secondary entry point of `@hra-ui/design-system`. It can be used by importing from `@hra-ui/design-system/dialog`. diff --git a/libs/design-system/dialog/ng-package.json b/libs/design-system/dialog/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/dialog/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/dialog/src/dialog.service.ts b/libs/design-system/dialog/src/dialog.service.ts new file mode 100644 index 000000000..66aee1b21 --- /dev/null +++ b/libs/design-system/dialog/src/dialog.service.ts @@ -0,0 +1,24 @@ +import { inject, Injectable } from '@angular/core'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { DialogData, NoticeComponent } from './lib/notice/notice.component'; + +/** Service to open dialog */ +@Injectable({ + providedIn: 'root', +}) +export class DialogService { + /** Instance of MatDialog */ + private readonly matDialog = inject(MatDialog); + + /** Opens the dialog with necessary data and config */ + openNotice(title: string, message: string, action?: DialogData['action']): MatDialogRef { + return this.matDialog.open(NoticeComponent, { + data: { + title, + message, + action, + } satisfies DialogData, + panelClass: 'hra-dialog-panel', + }); + } +} diff --git a/libs/design-system/dialog/src/index.ts b/libs/design-system/dialog/src/index.ts new file mode 100644 index 000000000..7f3929399 --- /dev/null +++ b/libs/design-system/dialog/src/index.ts @@ -0,0 +1 @@ +export * from './lib/notice/notice.component'; diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.html b/libs/design-system/dialog/src/lib/notice/notice.component.html new file mode 100644 index 000000000..43c56b774 --- /dev/null +++ b/libs/design-system/dialog/src/lib/notice/notice.component.html @@ -0,0 +1,17 @@ +
+
+ {{ data.title }} +
+ +
+{{ data.message }} + + @if (data.action) { + + } + + diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.scss b/libs/design-system/dialog/src/lib/notice/notice.component.scss new file mode 100644 index 000000000..d1b2ee7aa --- /dev/null +++ b/libs/design-system/dialog/src/lib/notice/notice.component.scss @@ -0,0 +1,53 @@ +:host { + --mdc-dialog-container-color: white; + display: block; + min-width: 20rem; + max-width: 29.5rem; + + &:has(.action) { + --mat-dialog-actions-alignment: space-between; + } + + .mat-mdc-dialog-title { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; + margin-bottom: 1rem; + + .title { + margin-top: 1.75rem; + margin-left: 2rem; + } + + button[mat-icon-button] { + margin: 0.875rem; + } + } + + .mat-mdc-dialog-title::before { + display: none; + } + + .mat-mdc-dialog-content { + --mdc-dialog-supporting-text-tracking: var(--sys-body-large-tracking); + padding: 0 2rem; + font: var(--sys-body-large); + color: var(--sys-primary); + } + + .mat-mdc-dialog-actions { + padding: 1rem 2rem; + min-height: auto; + } +} + +::ng-deep { + .hra-dialog-panel { + .mat-mdc-dialog-surface { + --mdc-dialog-container-color: var(--sys-on-primary); + --mdc-dialog-container-shape: 0; + border-radius: 0.5rem; + } + } +} diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.spec.ts b/libs/design-system/dialog/src/lib/notice/notice.component.spec.ts new file mode 100644 index 000000000..1d7cee91f --- /dev/null +++ b/libs/design-system/dialog/src/lib/notice/notice.component.spec.ts @@ -0,0 +1,73 @@ +import { TestBed } from '@angular/core/testing'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { render, screen } from '@testing-library/angular'; +import { DialogService } from '../../dialog.service'; +import { NoticeComponent } from './notice.component'; +import userEvent from '@testing-library/user-event'; + +describe('DialogComponent', () => { + let service: DialogService; + const TITLE = 'Test Title'; + const MESSAGE = 'Test Message'; + beforeEach(async () => { + await render(NoticeComponent, { + providers: [ + { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: MatDialogRef, useValue: {} }, + ], + }); + + service = TestBed.inject(DialogService); + }); + + it('Title and Message should be present when dialog is opened', async () => { + service.openNotice(TITLE, MESSAGE); + + const title = await screen.findByText(TITLE); + expect(title).toBeInTheDocument(); + + const message = await screen.findByText(MESSAGE); + expect(message).toBeInTheDocument(); + + const dismiss = await screen.findByRole('button', { name: 'Dismiss' }); + expect(dismiss).toBeInTheDocument(); + }); + + it('Action button should be visible', async () => { + const callback = jest.fn(); + service.openNotice(TITLE, MESSAGE, { + label: 'Action Button', + callback: callback, + }); + + const actionButton = await screen.findByRole('button', { name: 'Action Button' }); + expect(actionButton).toBeInTheDocument(); + + await userEvent.click(actionButton); + expect(callback).toHaveBeenCalledTimes(1); + }); + + it('Dialog should close when clicked on dismiss button', async () => { + const user = userEvent.setup(); + service.openNotice(TITLE, MESSAGE); + + const dialogTitle = await screen.findByText(TITLE); + + const dismiss = await screen.findByRole('button', { name: 'Dismiss' }); + await user.click(dismiss); + + expect(dialogTitle).not.toBeInTheDocument(); + }); + + it('Dialog should close when clicked on close button', async () => { + const user = userEvent.setup(); + service.openNotice(TITLE, MESSAGE); + + const dialogTitle = await screen.findByText(TITLE); + + const dismiss = await screen.findAllByTestId('close-icon'); + await user.click(dismiss[1]); + + expect(dialogTitle).not.toBeInTheDocument(); + }); +}); diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.stories.ts b/libs/design-system/dialog/src/lib/notice/notice.component.stories.ts new file mode 100644 index 000000000..9fe682619 --- /dev/null +++ b/libs/design-system/dialog/src/lib/notice/notice.component.stories.ts @@ -0,0 +1,80 @@ +import { Component, inject, input, output } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { provideDesignSystem } from '@hra-ui/design-system'; +import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular'; +import { DialogService } from '../../dialog.service'; + +@Component({ + selector: 'hra-dialog-demo', + standalone: true, + imports: [MatButtonModule], + template: ` `, +}) +class DialogDemoComponent { + readonly title = input(''); + readonly message = input(''); + readonly actionLabel = input(); + readonly actionClick = output(); + + readonly dialogService = inject(DialogService); + + openDialog() { + const actionLabel = this.actionLabel(); + const action = + actionLabel !== undefined + ? { + label: actionLabel, + callback: () => this.actionClick.emit(), + } + : undefined; + this.dialogService.openNotice(this.title(), this.message(), action); + } +} + +const meta: Meta = { + component: DialogDemoComponent, + title: 'DialogDemoComponent', + args: { + title: 'Dialog Title', + message: 'Dialog Message', + }, + argTypes: { + title: { + control: 'text', + }, + message: { + control: 'text', + }, + actionLabel: { + control: 'text', + }, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Explorer-Components?node-id=1115-364', + }, + }, + decorators: [ + applicationConfig({ + providers: [provideDesignSystem()], + }), + ], +}; +export default meta; +type Story = StoryObj; + +export const WithAction: Story = { + args: { + title: 'No Data', + message: 'We currently do not have cell type data for this biomarker. Please email us to discuss your dataset.', + actionLabel: 'Copy Email', + }, +}; + +export const WithoutAction: Story = { + args: { + title: 'Heads up!', + message: 'This website is optimized for Chrome or Firefox on a minimum resolution of 1280x832.', + }, +}; diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.ts b/libs/design-system/dialog/src/lib/notice/notice.component.ts new file mode 100644 index 000000000..66f3e7582 --- /dev/null +++ b/libs/design-system/dialog/src/lib/notice/notice.component.ts @@ -0,0 +1,52 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { + MAT_DIALOG_DATA, + MatDialogActions, + MatDialogClose, + MatDialogContent, + MatDialogTitle, +} from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { ButtonSizeDirective } from '@hra-ui/design-system/button'; +import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; + +/** Interface for Dialog Data */ +export interface DialogData { + /** Title of the dialog */ + title: string; + /** Message of the dialog */ + message: string; + /** Action Button Object */ + action?: { + /** Label for the action button */ + label: string; + /** Callback function for the action button */ + callback: () => void; + }; +} + +/** Notice Component */ +@Component({ + selector: 'hra-notice', + standalone: true, + imports: [ + CommonModule, + IconButtonSizeDirective, + MatIconModule, + ButtonSizeDirective, + MatButtonModule, + MatDialogActions, + MatDialogTitle, + MatDialogContent, + MatDialogClose, + ], + templateUrl: './notice.component.html', + styleUrl: './notice.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NoticeComponent { + /** Instance of Mat Dialog Data */ + protected readonly data: DialogData = inject(MAT_DIALOG_DATA); +} diff --git a/libs/design-system/snackbar/README.md b/libs/design-system/snackbar/README.md new file mode 100644 index 000000000..0f9543b1b --- /dev/null +++ b/libs/design-system/snackbar/README.md @@ -0,0 +1,3 @@ +# @hra-ui/design-system/snackbar + +Secondary entry point of `@hra-ui/design-system`. It can be used by importing from `@hra-ui/design-system/snackbar`. diff --git a/libs/design-system/snackbar/ng-package.json b/libs/design-system/snackbar/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/snackbar/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/snackbar/src/index.ts b/libs/design-system/snackbar/src/index.ts new file mode 100644 index 000000000..555147194 --- /dev/null +++ b/libs/design-system/snackbar/src/index.ts @@ -0,0 +1 @@ +export * from './lib/snackbar.component'; diff --git a/libs/design-system/snackbar/src/lib/snackbar.component.html b/libs/design-system/snackbar/src/lib/snackbar.component.html new file mode 100644 index 000000000..2b814fdf6 --- /dev/null +++ b/libs/design-system/snackbar/src/lib/snackbar.component.html @@ -0,0 +1,22 @@ +{{ data.message }} +
+
+ @if (data.action) { + + + + } + @if (data.close) { + + } +
diff --git a/libs/design-system/snackbar/src/lib/snackbar.component.scss b/libs/design-system/snackbar/src/lib/snackbar.component.scss new file mode 100644 index 000000000..ab5f8d50a --- /dev/null +++ b/libs/design-system/snackbar/src/lib/snackbar.component.scss @@ -0,0 +1,74 @@ +:host { + display: flex; + align-items: center; + font: var(--sys-label-medium); + gap: 0.25rem; + + .label { + padding: 1rem; + } + + &:has([matSnackBarActions]) { + .label { + padding: 0.875rem 0.25rem 0.875rem 1rem; + } + + &:has(.position-end) { + .label { + padding: 0.875rem 1rem 0.5rem 1rem; + } + } + } + + &:has(button[mat-icon-button]) { + .label { + padding: 0.8438rem 1rem; + } + } + + &:has(.position-end) { + flex-direction: column; + gap: 0; + + [matSnackBarActions] { + margin-bottom: 0.25rem; + } + + [matSnackBarLabel] { + padding-top: 0.875rem; + padding-bottom: 0.5rem; + } + + .actions { + align-self: flex-end; + } + } + + .actions { + display: flex; + align-items: center; + + .position-end { + align-self: flex-end; + } + + [matSnackBarActions]:not(:has(+ button[mat-icon-button])) { + margin-right: 0.5rem; + } + } +} + +::ng-deep .hra-snackbar-panel { + --mdc-snackbar-container-color: var(--sys-surface-container); + --mdc-snackbar-supporting-text-color: var(--sys-secondary); + max-width: 21.5rem; + + .mat-mdc-snackbar-surface { + padding: 0; + box-shadow: 0px 5px 16px 0px rgb(from var(--sys-secondary) r g b / 0.24); + + .mat-mdc-snack-bar-label { + padding: 0; + } + } +} diff --git a/libs/design-system/snackbar/src/lib/snackbar.component.spec.ts b/libs/design-system/snackbar/src/lib/snackbar.component.spec.ts new file mode 100644 index 000000000..d5fff4692 --- /dev/null +++ b/libs/design-system/snackbar/src/lib/snackbar.component.spec.ts @@ -0,0 +1,37 @@ +import { TestBed } from '@angular/core/testing'; +import { provideNoopAnimations } from '@angular/platform-browser/animations'; +import { screen } from '@testing-library/angular'; +import { SnackbarService } from './snackbar.service'; + +describe('SnackbarComponent', () => { + let service: SnackbarService; + const MESSAGE = 'Test message'; + beforeEach(async () => { + TestBed.configureTestingModule({ + providers: [provideNoopAnimations()], + }); + + service = TestBed.inject(SnackbarService); + }); + + it('should open snackbar and show details', async () => { + service.open(MESSAGE, 'Action', true, 'end'); + const label = screen.findAllByText(MESSAGE); + const action = screen.findAllByText('Action'); + expect(label).resolves.toBeInTheDocument(); + expect(action).resolves.toBeInTheDocument(); + }); + + it('should open snackbar with close button hidden', async () => { + service.open(MESSAGE, 'Action'); + await screen.findByText(MESSAGE); + const closeButton = screen.queryByTestId('close-btn'); + expect(closeButton).not.toBeInTheDocument(); + + const actionButton = screen.getByText('Action'); + expect(actionButton).toBeInTheDocument(); + + const actionsContainer = actionButton.closest('.actions'); + expect(actionsContainer).not.toHaveStyle('align-self: flex-end'); + }); +}); diff --git a/libs/design-system/snackbar/src/lib/snackbar.component.stories.ts b/libs/design-system/snackbar/src/lib/snackbar.component.stories.ts new file mode 100644 index 000000000..f43ad48cb --- /dev/null +++ b/libs/design-system/snackbar/src/lib/snackbar.component.stories.ts @@ -0,0 +1,155 @@ +import { Component, importProvidersFrom, inject, input } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { SnackbarService } from './snackbar.service'; +import { provideDesignSystem } from '@hra-ui/design-system'; +import { ButtonPosition, SnackbarData } from './snackbar.component'; + +@Component({ + selector: 'hra-snackbar-demo', + standalone: true, + imports: [MatButtonModule], + template: ` + + `, +}) +class SnackbarDemoComponent { + readonly message = input(''); + readonly action = input(''); + readonly close = input(false); + readonly actionButtonPosition = input('start'); + readonly duration = input(); + readonly snackbar = inject(SnackbarService); + + getSnackBarConfig() { + if (this.close() === false) { + return { + duration: this.duration(), + }; + } else { + return {}; + } + } +} + +const meta: Meta = { + component: SnackbarDemoComponent, + title: 'SnackBar', + argTypes: { + message: { + type: 'string', + }, + action: { + type: 'string', + }, + duration: { + type: 'number', + }, + }, + args: { + message: 'test message', + action: 'test action', + duration: 6000, + }, + decorators: [ + applicationConfig({ + providers: [importProvidersFrom(BrowserAnimationsModule), provideDesignSystem()], + }), + moduleMetadata({ + imports: [MatButtonModule, MatSnackBarModule], + }), + ], +}; +export default meta; +type Story = StoryObj; + +export const SingleLineSnackbar: Story = { + args: { + message: 'Single-line snackbar', + action: '', + close: false, + }, +}; + +export const SingleLineSnackbarWithAction: Story = { + args: { + message: 'Single-line snackbar with action', + action: 'Action', + close: false, + }, +}; + +export const TwoLineSnackbarWithOutAction: Story = { + args: { + message: 'Two-line snackbar without action. This is some extra text', + action: '', + close: false, + }, +}; + +export const TwoLineSnackbarWithAction: Story = { + args: { + message: 'Two-line snackbar with action. This is some extra text', + action: 'Action', + close: false, + } satisfies SnackbarData, +}; + +export const TwoLineSnackbarWithLongerAction: Story = { + args: { + message: + 'Two-line snackbar with action. This is some extra text along with some more additional textTwo-line snackbar with action. This is some extra text along with some more additional textTwo-line snackbar with action. This is some extra text along with some more additional textTwo-line snackbar with action. This is some extra text along with some more additional text', + action: 'Action', + close: false, + actionButtonPosition: 'end', + } satisfies SnackbarData, +}; + +export const SingleLineSnackbarWithClose: Story = { + args: { + message: 'Single-line snackbar with close', + action: '', + close: true, + }, +}; + +export const SingleLineSnackbarWithActionAndClose: Story = { + args: { + message: 'Single-line with action & close', + action: 'Action', + close: true, + }, +}; + +export const TwoLineSnackbarWithoutActionAndClose: Story = { + args: { + message: 'Two-line snackbar without action, with close', + action: '', + close: true, + }, +}; + +export const TwoLineSnackbarWithActionAndClose: Story = { + args: { + message: 'Two-line snackbar with action and close', + action: 'Action', + close: true, + }, +}; + +export const TwoLineSnackbarWithLongerActionAndClose: Story = { + args: { + message: + 'Two-line snackbar with action. This is some extra text along with some more additional textTwo-line snackbar with action. This is some extra text along with some more additional textTwo-line snackbar with action. This is some extra text along with some more additional textTwo-line snackbar with action. This is some extra text along with some more additional text', + action: 'Action', + close: true, + actionButtonPosition: 'end', + } satisfies SnackbarData, +}; diff --git a/libs/design-system/snackbar/src/lib/snackbar.component.ts b/libs/design-system/snackbar/src/lib/snackbar.component.ts new file mode 100644 index 000000000..c443519eb --- /dev/null +++ b/libs/design-system/snackbar/src/lib/snackbar.component.ts @@ -0,0 +1,38 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { MatIconModule } from '@angular/material/icon'; +import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar'; +import { ButtonModule } from '@hra-ui/design-system/button'; +import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; + +/** Type for button position */ +export type ButtonPosition = 'start' | 'end'; + +/** interface for snackbar data */ +export interface SnackbarData { + /** Message in the snackbar */ + message: string; + /** Action button */ + action?: string; + /** Flag to show/hide the close button */ + close?: boolean; + /** Position of the action button */ + actionButtonPosition?: ButtonPosition; +} + +/** Snackbar component */ +@Component({ + selector: 'hra-snackbar', + standalone: true, + imports: [CommonModule, MatIconModule, ButtonModule, IconButtonSizeDirective, MatIconModule], + templateUrl: './snackbar.component.html', + styleUrl: './snackbar.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SnackbarComponent { + /** Reference to the MatSnackbarRef */ + protected readonly snackbarRef = inject(MatSnackBarRef); + + /** Injection token for the snackbar data*/ + protected readonly data: SnackbarData = inject(MAT_SNACK_BAR_DATA); +} diff --git a/libs/design-system/snackbar/src/lib/snackbar.service.ts b/libs/design-system/snackbar/src/lib/snackbar.service.ts new file mode 100644 index 000000000..f82243c35 --- /dev/null +++ b/libs/design-system/snackbar/src/lib/snackbar.service.ts @@ -0,0 +1,30 @@ +import { inject, Injectable } from '@angular/core'; +import { MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar'; +import { ButtonPosition, SnackbarComponent, SnackbarData } from './snackbar.component'; + +export type SnackbarConfig = Omit; + +/** Service for snackbar. Opens the snackbar and configures it */ +@Injectable({ + providedIn: 'root', +}) +export class SnackbarService { + /** Reference to the MatSnackbar */ + readonly matSnackbar = inject(MatSnackBar); + + /** Opens the snackbar with provided config */ + open( + message: string, + action: string, + close = false, + actionButtonPosition: ButtonPosition = 'start', + config?: SnackbarConfig, + ): MatSnackBarRef { + return this.matSnackbar.openFromComponent(SnackbarComponent, { + announcementMessage: message, + ...config, + data: { message, action, close, actionButtonPosition } satisfies SnackbarData, + panelClass: ['hra-snackbar-panel'], + }); + } +} diff --git a/libs/design-system/src/lib/material-symbols.stories.ts b/libs/design-system/src/lib/material-symbols.stories.ts index a11b6d468..d65ab6091 100644 --- a/libs/design-system/src/lib/material-symbols.stories.ts +++ b/libs/design-system/src/lib/material-symbols.stories.ts @@ -1,20 +1,13 @@ -import { provideHttpClient } from '@angular/common/http'; import { MatIconModule } from '@angular/material/icon'; -import { provideIcons } from '@hra-ui/cdk/icons'; import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { provideDesignSystem } from './providers'; + const meta: Meta = { title: 'MaterialSymbols', decorators: [ applicationConfig({ - providers: [ - provideHttpClient(), - provideIcons({ - fontIcons: { - defaultClasses: ['material-symbols-rounded'], - }, - }), - ], + providers: [provideDesignSystem()], }), moduleMetadata({ imports: [MatIconModule], @@ -70,3 +63,80 @@ export const CustomSymbols: Story = { template: ``, }), }; + +export const OrganIcons: Story = { + args: { + name: 'organ:blood', + color: 'black', + size: 4, + }, + argTypes: { + name: { + control: 'select', + options: [ + 'organ:bladder', + 'organ:blood', + 'organ:bone_marrow', + 'organ:brain', + 'organ:breast', + 'organ:eye', + 'organ:fallopian_tube_left', + 'organ:fallopian_tube_right', + 'organ:heart', + 'organ:kidney_left', + 'organ:kidney_right', + 'organ:kidneys', + 'organ:knee', + 'organ:large_intestine', + 'organ:liver', + 'organ:lung_left', + 'organ:lung_right', + 'organ:lungs', + 'organ:lymph_nodes', + 'organ:neurons', + 'organ:ovaries', + 'organ:ovary_left', + 'organ:ovary_right', + 'organ:pancreas', + 'organ:pelvis', + 'organ:peripehral_nervous_system', + 'organ:placenta', + 'organ:prostate', + 'organ:skin', + 'organ:small_intestine', + 'organ:spinal_cord', + 'organ:spleen', + 'organ:stomach', + 'organ:thymus', + 'organ:ureter_left', + 'organ:ureter_right', + 'organ:uterus', + 'organ:vasculature_thick', + 'organ:vasculature_thin', + 'organ:extrapulmonary_bronchus', + 'organ:larynx', + 'organ:palatine_tonsil', + 'organ:trachea', + ], + }, + color: { + control: 'select', + options: ['black', 'red', 'blue', 'green'], + }, + size: { + control: 'select', + options: [2, 4, 6], + }, + }, + render: (args) => ({ + props: args, + template: ``, + styles: [ + `mat-icon { + --mat-icon-color: ${args['color']}; + height: ${args['size']}rem; + width: ${args['size']}rem; + }`, + ], + }), +}; diff --git a/package-lock.json b/package-lock.json index 65dd2616d..5c14239e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,7 +66,7 @@ "express-fileupload": "^1.4.0", "file-saver": "^2.0.5", "helmet": "^7.1.0", - "hra-node-dist-vis": "github:cns-iu/hra-node-dist-vis#8bcf91002633fe0fd2edb663b65bf927bb4a323f", + "hra-node-dist-vis": "github:cns-iu/hra-node-dist-vis#7c9ca783d5e4b67593049a95f724e9177cde926d", "immer": "^10.1.1", "js-yaml": "^4.1.0", "jsonld": "^8.3.2", @@ -3711,6 +3711,7 @@ "version": "8.9.36", "resolved": "https://registry.npmjs.org/@deck.gl/extensions/-/extensions-8.9.36.tgz", "integrity": "sha512-BoHjJOK9Ue/zH+YkXiFli7ebS+I21fyL4YeCUzw2a6OOo36SZV/4S0gZSSkaaltO72aZsDsvduWPAbmXY2slqA==", + "peer": true, "dependencies": { "@babel/runtime": "^7.0.0", "@luma.gl/shadertools": "^8.5.21" @@ -15242,9 +15243,9 @@ "dev": true }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dependencies": { "bytes": "3.1.2", "content-type": "~1.0.5", @@ -15254,7 +15255,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.11.0", + "qs": "6.13.0", "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -15289,11 +15290,11 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, "node_modules/body-parser/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -21098,36 +21099,36 @@ "dev": true }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", + "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", + "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", + "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -21157,13 +21158,21 @@ "ms": "2.0.0" } }, + "node_modules/express/node_modules/encodeurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/express/node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -21180,11 +21189,11 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, "node_modules/express/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -22954,13 +22963,13 @@ }, "node_modules/hra-node-dist-vis": { "version": "0.0.1", - "resolved": "git+ssh://git@github.com/cns-iu/hra-node-dist-vis.git#8bcf91002633fe0fd2edb663b65bf927bb4a323f", - "integrity": "sha512-/7VbTZ855z5AGX0USzOyuB2hZ6M+pxEmb40LXbOHtRzJXYn0K8SDHPy55eFc910y4UQJGLytxJrfwK0R+B+rSQ==", + "resolved": "git+ssh://git@github.com/cns-iu/hra-node-dist-vis.git#7c9ca783d5e4b67593049a95f724e9177cde926d", + "integrity": "sha512-wVdCvoUPdpJUhzqL+J37mT93OqdOAEwWN5QjexJbL5fsljSeKOMNDTTYwW8rbFX1k1T/UpyDhkRTbBBCwUSAfw==", "dependencies": { - "@deck.gl/carto": "^8.9.34", - "@deck.gl/core": "^8.9.34", - "@deck.gl/extensions": "^8.9.34", - "@deck.gl/layers": "^8.9.34", + "@deck.gl/carto": "8.8.27", + "@deck.gl/core": "8.8.27", + "@deck.gl/extensions": "8.8.27", + "@deck.gl/layers": "8.8.27", "@material/web": "^1.3.0", "@preact/signals-core": "^1.5.1", "@vivjs/layers": "^0.16.0", @@ -22970,131 +22979,20 @@ "hra-node-dist-vis": "src/distances.js" } }, - "node_modules/hra-node-dist-vis/node_modules/@deck.gl/carto": { - "version": "8.9.36", - "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.9.36.tgz", - "integrity": "sha512-lm05nWciAX6SikbjETgPexnjDA1KoyDadi5VOk3RazYUUMw55s6Qc84qKSyXK263Rg58eOGl4K4pyCPRdphFog==", - "dependencies": { - "@babel/runtime": "^7.0.0", - "@loaders.gl/gis": "^3.4.13", - "@loaders.gl/loader-utils": "^3.4.13", - "@loaders.gl/mvt": "^3.4.13", - "@loaders.gl/tiles": "^3.4.13", - "@luma.gl/constants": "^8.5.21", - "@math.gl/web-mercator": "^3.6.2", - "cartocolor": "^4.0.2", - "d3-array": "^3.2.0", - "d3-color": "^3.1.0", - "d3-format": "^3.1.0", - "d3-scale": "^4.0.0", - "h3-js": "^3.7.0", - "moment-timezone": "^0.5.33", - "pbf": "^3.2.1", - "quadbin": "^0.1.9" - }, - "peerDependencies": { - "@deck.gl/aggregation-layers": "^8.0.0", - "@deck.gl/core": "^8.0.0", - "@deck.gl/extensions": "^8.0.0", - "@deck.gl/geo-layers": "^8.0.0", - "@deck.gl/layers": "^8.0.0", - "@loaders.gl/core": "^3.4.13" - } - }, - "node_modules/hra-node-dist-vis/node_modules/@deck.gl/core": { - "version": "8.9.36", - "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.9.36.tgz", - "integrity": "sha512-mkIv4/fY1jE+iehqSJzUQi75l9cgfx2ZBa1s1AifgLu0TCkCZgRgISV3UnDBECDCmTZ9Cqk+oKq3OGay3Bz1RQ==", - "dependencies": { - "@babel/runtime": "^7.0.0", - "@loaders.gl/core": "^3.4.13", - "@loaders.gl/images": "^3.4.13", - "@luma.gl/constants": "^8.5.21", - "@luma.gl/core": "^8.5.21", - "@luma.gl/webgl": "^8.5.21", - "@math.gl/core": "^3.6.2", - "@math.gl/sun": "^3.6.2", - "@math.gl/web-mercator": "^3.6.2", - "@probe.gl/env": "^3.5.0", - "@probe.gl/log": "^3.5.0", - "@probe.gl/stats": "^3.5.0", - "gl-matrix": "^3.0.0", - "math.gl": "^3.6.2", - "mjolnir.js": "^2.7.0" - } - }, - "node_modules/hra-node-dist-vis/node_modules/@deck.gl/layers": { - "version": "8.9.36", - "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.9.36.tgz", - "integrity": "sha512-sr/QKELXZ4W0ZHb12QC2+EV1bZJOM6cU6kAfOJD5jOVixOcyccr+FnPPGn39VK9cl/VFY0S339ZPs9reyhDFVg==", + "node_modules/hra-node-dist-vis/node_modules/@deck.gl/extensions": { + "version": "8.8.27", + "resolved": "https://registry.npmjs.org/@deck.gl/extensions/-/extensions-8.8.27.tgz", + "integrity": "sha512-gjLHHuwoBt9dK8/iOBEgBzAtfqVZ4l7nh0aFcft/jemlusb7iNSuCz2UUYx2lUDl9IBFzkEeo1aayJCkSiEkfw==", "dependencies": { - "@babel/runtime": "^7.0.0", - "@loaders.gl/images": "^3.4.13", - "@loaders.gl/schema": "^3.4.13", - "@luma.gl/constants": "^8.5.21", - "@mapbox/tiny-sdf": "^2.0.5", - "@math.gl/core": "^3.6.2", - "@math.gl/polygon": "^3.6.2", - "@math.gl/web-mercator": "^3.6.2", - "earcut": "^2.2.4" + "@luma.gl/shadertools": "^8.5.16" }, "peerDependencies": { "@deck.gl/core": "^8.0.0", - "@loaders.gl/core": "^3.4.13", - "@luma.gl/core": "^8.0.0" - } - }, - "node_modules/hra-node-dist-vis/node_modules/@loaders.gl/core": { - "version": "3.4.15", - "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-3.4.15.tgz", - "integrity": "sha512-rPOOTuusWlRRNMWg7hymZBoFmPCXWThsA5ZYRfqqXnsgVeQIi8hzcAhJ7zDUIFAd/OSR8ravtqb0SH+3k6MOFQ==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "@loaders.gl/loader-utils": "3.4.15", - "@loaders.gl/worker-utils": "3.4.15", - "@probe.gl/log": "^3.5.0" - } - }, - "node_modules/hra-node-dist-vis/node_modules/@loaders.gl/math": { - "version": "3.4.15", - "resolved": "https://registry.npmjs.org/@loaders.gl/math/-/math-3.4.15.tgz", - "integrity": "sha512-zTN8BUU/1fcppyVc8WzvdZcCyNGVYmNinxcn/A+a7mi1ug4OBGwEsZOj09Wjg0/s52c/cAL3h9ylPIZdjntscQ==", - "dependencies": { - "@loaders.gl/images": "3.4.15", - "@loaders.gl/loader-utils": "3.4.15", - "@math.gl/core": "^3.5.1" - } - }, - "node_modules/hra-node-dist-vis/node_modules/@loaders.gl/tiles": { - "version": "3.4.15", - "resolved": "https://registry.npmjs.org/@loaders.gl/tiles/-/tiles-3.4.15.tgz", - "integrity": "sha512-o85aRSXq+YeVSK2ndW9aBwTMi5FhEsQ7k18J4DG+T5Oc+zz3tKui5X1SuBDiKbQN+kYtFpj0oYO1QG3ndNI6jg==", - "dependencies": { - "@loaders.gl/loader-utils": "3.4.15", - "@loaders.gl/math": "3.4.15", - "@math.gl/core": "^3.5.1", - "@math.gl/culling": "^3.5.1", - "@math.gl/geospatial": "^3.5.1", - "@math.gl/web-mercator": "^3.5.1", - "@probe.gl/stats": "^3.5.0" - }, - "peerDependencies": { - "@loaders.gl/core": "^3.4.0" - } - }, - "node_modules/hra-node-dist-vis/node_modules/@loaders.gl/worker-utils": { - "version": "3.4.15", - "resolved": "https://registry.npmjs.org/@loaders.gl/worker-utils/-/worker-utils-3.4.15.tgz", - "integrity": "sha512-zUUepOYRYmcYIcr/c4Mchox9h5fBFNkD81rsGnLlZyq19QvyHzN+93SVxrLc078gw93t2RKrVcOOZY13zT3t1w==", - "dependencies": { - "@babel/runtime": "^7.3.1" + "@luma.gl/constants": "^8.0.0", + "@luma.gl/core": "^8.0.0", + "gl-matrix": "^3.0.0" } }, - "node_modules/hra-node-dist-vis/node_modules/@mapbox/tiny-sdf": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz", - "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==" - }, "node_modules/html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -27538,12 +27436,12 @@ } }, "node_modules/jspreadsheet-ce": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/jspreadsheet-ce/-/jspreadsheet-ce-4.2.1.tgz", - "integrity": "sha512-kQ+bUwH0MEeyr3Ojdd+tB0BJik3NsnQlhC1E52uwrURvqBu3GnrDtRZZS3cAwtL0FzHBZDsJJB9afTdReBm6Hg==", + "version": "4.13.4", + "resolved": "https://registry.npmjs.org/jspreadsheet-ce/-/jspreadsheet-ce-4.13.4.tgz", + "integrity": "sha512-Rv1xbR5AKme7Nd+vCRsHS05+3h0CtcDYcGseXPOEOWV9Mq7k3z57comq+kjLXJZyEf3CR9kCzIPQsd6tN7Yn6w==", "dependencies": { "@jspreadsheet/formula": "^2.0.2", - "jsuites": "^5.3.0" + "jsuites": "^5.0.25" } }, "node_modules/jsprim": { @@ -29446,9 +29344,12 @@ "integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==" }, "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/merge-stream": { "version": "2.0.0", @@ -29956,9 +29857,9 @@ "optional": true }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -32668,9 +32569,9 @@ "dev": true }, "node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==" }, "node_modules/path-type": { "version": "4.0.0", @@ -35702,9 +35603,9 @@ } }, "node_modules/send": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", - "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", @@ -35830,19 +35731,27 @@ } }, "node_modules/serve-static": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", - "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.18.0" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" } }, + "node_modules/serve-static/node_modules/encodeurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", diff --git a/package.json b/package.json index e9b78bcf0..aff7f4242 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "express-fileupload": "^1.4.0", "file-saver": "^2.0.5", "helmet": "^7.1.0", - "hra-node-dist-vis": "github:cns-iu/hra-node-dist-vis#8bcf91002633fe0fd2edb663b65bf927bb4a323f", + "hra-node-dist-vis": "github:cns-iu/hra-node-dist-vis#7c9ca783d5e4b67593049a95f724e9177cde926d", "immer": "^10.1.1", "js-yaml": "^4.1.0", "jsonld": "^8.3.2", diff --git a/tsconfig.base.json b/tsconfig.base.json index 7fc9f905c..4740d4b44 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -83,6 +83,9 @@ "@hra-ui/design-system/button-toggle": [ "libs/design-system/button-toggle/src/index.ts" ], + "@hra-ui/design-system/dialog": [ + "libs/design-system/dialog/src/index.ts" + ], "@hra-ui/design-system/footer": [ "libs/design-system/footer/src/index.ts" ], @@ -110,6 +113,9 @@ "@hra-ui/design-system/select": [ "libs/design-system/select/src/index.ts" ], + "@hra-ui/design-system/snackbar": [ + "libs/design-system/snackbar/src/index.ts" + ], "@hra-ui/design-system/social-media-button": [ "libs/design-system/social-media-button/src/index.ts" ],