From 3b6fd01ccb04431669ec8de3865acba0b1234417 Mon Sep 17 00:00:00 2001 From: Chau Tran Date: Fri, 17 Nov 2023 12:30:50 -0600 Subject: [PATCH] chore: formatting with new prettier configf (#54) --- .eslintrc.json | 128 ++-- .lintstagedrc | 2 +- .prettierrc | 12 +- .vscode/extensions.json | 12 +- .vscode/settings.json | 2 +- apps/app/.eslintrc.json | 64 +- apps/app/index.html | 86 +-- apps/app/postcss.config.js | 12 +- apps/app/project.json | 148 ++-- apps/app/src/app.config.server.ts | 4 +- apps/app/src/app.config.ts | 22 +- apps/app/src/app/app.component.spec.ts | 20 +- apps/app/src/app/app.component.ts | 28 +- .../app/pages/(components)/components.page.ts | 86 +-- .../components/(accordion)/accordion.page.ts | 136 ++-- .../(accordion)/accordion.preview.ts | 102 +-- .../(alert)/alert--destructive.example.ts | 46 +- .../components/(alert)/alert.page.ts | 168 ++--- .../components/(alert)/alert.preview.ts | 53 +- .../(alert-dialog)/alert-dialog.page.ts | 134 ++-- .../(alert-dialog)/alert-dialog.preview.ts | 108 +-- .../(aspect-ratio)/aspect-ratio.page.ts | 122 ++-- .../(aspect-ratio)/aspect-ratio.preview.ts | 20 +- .../components/(avatar)/avatar.page.ts | 122 ++-- .../components/(avatar)/avatar.preview.ts | 18 +- .../(badge)/badge--destructive.example.ts | 10 +- .../(badge)/badge--outline.example.ts | 10 +- .../(badge)/badge--secondary.example.ts | 10 +- .../components/(badge)/badge.page.ts | 198 ++--- .../components/(badge)/badge.preview.ts | 12 +- .../(button)/button--anchor.example.ts | 12 +- .../(button)/button--destructive.example.ts | 10 +- .../(button)/button--ghost.example.ts | 10 +- .../(button)/button--icon.example.ts | 18 +- .../(button)/button--link.example.ts | 10 +- .../(button)/button--loading.example.ts | 23 +- .../(button)/button--outline.example.ts | 10 +- .../(button)/button--secondary.example.ts | 10 +- .../(button)/button--with-icon.example.ts | 26 +- .../components/(button)/button.page.ts | 330 ++++----- .../components/(button)/button.preview.ts | 10 +- .../(card)/card--notifications.example.ts | 158 ++-- .../components/(card)/card.page.ts | 142 ++-- .../components/(card)/card.preview.ts | 94 +-- .../(collapsible)/collapsible.page.ts | 122 ++-- .../(collapsible)/collapsible.preview.ts | 24 +- .../components/(combobox)/combobox.page.ts | 125 ++-- .../components/(combobox)/combobox.preview.ts | 186 ++--- .../(command)/command--dialog.example.ts | 230 +++--- .../components/(command)/command.page.ts | 182 ++--- .../components/(command)/command.preview.ts | 120 ++-- .../(context-menu)/context-menu.page.ts | 136 ++-- .../(context-menu)/context-menu.preview.ts | 218 +++--- .../(dialog)/dialog-context-menu.preview.ts | 190 ++--- .../components/(dialog)/dialog.page.ts | 214 +++--- .../components/(dialog)/dialog.preview.ts | 142 ++-- .../(dropdown-menu)/dropdown-menu.page.ts | 152 ++-- .../(dropdown-menu)/dropdown-menu.preview.ts | 340 ++++----- .../dropdown-with-state.preview.ts | 210 +++--- .../(hover-card)/hover-card.page.ts | 122 ++-- .../(hover-card)/hover-card.preview.ts | 18 +- .../(input)/input--button.preview.ts | 20 +- .../(input)/input--disabled.preview.ts | 10 +- .../components/(input)/input--file.preview.ts | 10 +- .../(input)/input--label.preview.ts | 16 +- .../components/(input)/input.page.ts | 224 +++--- .../components/(input)/input.preview.ts | 10 +- .../components/(label)/label.page.ts | 114 +-- .../components/(label)/label.preview.ts | 18 +- .../components/(menubar)/menubar.page.ts | 126 ++-- .../components/(menubar)/menubar.preview.ts | 350 ++++----- .../components/(popover)/popover.page.ts | 114 +-- .../components/(popover)/popover.preview.ts | 96 +-- .../progress--indeterminate.preview.ts | 16 +- .../components/(progress)/progress.page.ts | 166 ++--- .../components/(progress)/progress.preview.ts | 24 +- .../(radio-group)/radio-group.page.ts | 126 ++-- .../(radio-group)/radio-group.preview.ts | 66 +- .../(scroll-area)/scroll-area.page.ts | 126 ++-- .../(scroll-area)/scroll-area.preview.ts | 30 +- .../components/(separator)/separator.page.ts | 114 +-- .../(separator)/separator.preview.ts | 40 +- .../components/(sheet)/sheet--side.preview.ts | 154 ++-- .../components/(sheet)/sheet.page.ts | 152 ++-- .../components/(sheet)/sheet.preview.ts | 144 ++-- .../components/(skeleton)/skeleton.page.ts | 114 +-- .../components/(skeleton)/skeleton.preview.ts | 24 +- .../components/(switch)/switch.page.ts | 120 ++-- .../components/(switch)/switch.preview.ts | 34 +- .../(tabs)/tabs--vertical.preview.ts | 204 +++--- .../components/(tabs)/tabs.page.ts | 170 ++--- .../components/(tabs)/tabs.preview.ts | 180 ++--- .../components/(textarea)/textarea.page.ts | 143 ++-- .../components/(textarea)/textarea.preview.ts | 16 +- .../(toggle)/toggle--disabled.preview.ts | 24 +- .../(toggle)/toggle--large.preview.ts | 24 +- .../(toggle)/toggle--outline.preview.ts | 24 +- .../(toggle)/toggle--small.preview.ts | 24 +- .../(toggle)/toggle--with-text.preview.ts | 26 +- .../components/(toggle)/toggle.page.ts | 230 +++--- .../components/(toggle)/toggle.preview.ts | 22 +- .../components/[...not-found].page.ts | 28 +- .../(components)/components/index.page.ts | 4 +- .../components/installation-cs.component.ts | 14 +- .../(documentation)/documentation.page.ts | 18 +- .../(ui)/(typography)/typography.page.ts | 130 ++-- .../(ui)/(typography)/typography.preview.ts | 96 +-- .../documentation/(ui)/dark-mode.page.ts | 90 +-- .../documentation/(ui)/figma.page.ts | 138 ++-- .../documentation/(ui)/installation.page.ts | 64 +- .../documentation/(ui)/theming.page.ts | 470 ++++++------ .../documentation/[...not-found].page.ts | 28 +- .../documentation/about.page.ts | 340 ++++----- .../documentation/changelog.page.ts | 52 +- .../(documentation)/documentation/cli.page.ts | 60 +- .../documentation/index.page.ts | 4 +- .../documentation/introduction.page.ts | 308 ++++---- .../src/app/pages/(examples)/examples.page.ts | 56 +- .../pages/(examples)/examples/index.page.ts | 4 +- .../(examples)/examples/notes/(notes).page.ts | 362 +++++----- .../components/note-skeleton.component.ts | 62 +- .../notes/components/note.component.ts | 139 ++-- .../notes/components/notes-empty.component.ts | 46 +- .../examples/typography/(typography).page.ts | 238 +++--- apps/app/src/app/pages/(home).page.ts | 222 +++--- .../th-item-placeholder.component.ts | 22 +- .../(home)/components/th-item.component.ts | 32 +- .../components/three-hundred.component.ts | 69 +- apps/app/src/app/pages/(stack)/stack.page.ts | 22 +- .../architecture-diagram.component.ts | 264 +++---- .../(stack)/stack/(overview)/overview.page.ts | 194 ++--- .../architecture-diagram-analog.component.ts | 264 +++---- .../architecture-diagram-angular.component.ts | 264 +++---- .../architecture-diagram-drizzle.component.ts | 264 +++---- .../architecture-diagram-nx.component.ts | 264 +++---- ...architecture-diagram-supabase.component.ts | 264 +++---- .../architecture-diagram-trpc.component.ts | 264 +++---- .../stack/(technologies)/technologies.page.ts | 269 +++---- .../(stack)/stack/[...not-found].page.ts | 28 +- .../src/app/pages/(stack)/stack/index.page.ts | 4 +- .../pages/(stack)/stack/installation.page.ts | 677 +++++++++--------- apps/app/src/app/pages/[...not-found].page.ts | 42 +- apps/app/src/app/pages/alpha.page.ts | 4 +- .../shared/breadcrumbs/breadcrumb.service.ts | 125 ++-- .../breadcrumbs/breadcrumbs.component.ts | 88 +-- .../app/shared/code/code-preview.directive.ts | 10 +- .../app/src/app/shared/code/code.component.ts | 284 ++++---- .../src/app/shared/footer/footer.component.ts | 38 +- .../header/header-dark-mode.component.ts | 109 +-- .../header/header-mobile-nav.component.ts | 138 ++-- .../header/header-theme-picker.component.ts | 112 +-- .../src/app/shared/header/header.component.ts | 100 +-- .../input-error/input-error.component.ts | 38 +- .../input-error/input-error.directive.ts | 50 +- .../shared/layout/coming-soon.component.ts | 14 +- .../app/shared/layout/container.directive.ts | 10 +- .../shared/layout/main-section.directive.ts | 10 +- .../page-bottom-nav-placeholder.component.ts | 6 +- .../page-bottom-nav-link.component.ts | 54 +- .../page-bottom-nav.component.ts | 14 +- .../page-nav/page-nav-link.component.ts | 43 +- .../page-nav/page-nav-outlet.component.ts | 20 +- .../layout/page-nav/page-nav.component.ts | 54 +- .../src/app/shared/layout/page.component.ts | 30 +- .../shared/layout/section-intro.component.ts | 26 +- .../layout/section-sub-heading.component.ts | 32 +- .../side-nav-coming-soon.component.ts | 18 +- .../side-nav/side-nav-content.component.ts | 211 +++--- .../side-nav/side-nav-heading.directive.ts | 8 +- .../side-nav/side-nav-link.directive.ts | 52 +- .../side-nav/side-nav-links.directive.ts | 14 +- .../layout/side-nav/side-nav.component.ts | 20 +- .../src/app/shared/layout/tabs.component.ts | 66 +- apps/app/src/app/shared/meta/meta.util.ts | 96 +-- .../src/app/shared/spartan-logo.component.ts | 54 +- .../app/shared/spartan-nav-link.directive.ts | 38 +- apps/app/src/app/shared/theme.service.ts | 108 +-- apps/app/src/db.ts | 12 +- apps/app/src/main.server.ts | 18 +- apps/app/src/main.ts | 4 +- apps/app/src/server/routes/trpc/[trpc].ts | 8 +- apps/app/src/server/trpc/routers/index.ts | 2 +- apps/app/src/server/trpc/routers/notes.ts | 46 +- apps/app/src/server/trpc/trpc.ts | 4 +- apps/app/src/styles.css | 326 ++++----- apps/app/src/test-setup.ts | 2 +- apps/app/src/trpc-client.ts | 12 +- apps/app/tailwind.config.js | 14 +- apps/app/tsconfig.app.json | 20 +- apps/app/tsconfig.editor.json | 10 +- apps/app/tsconfig.json | 62 +- apps/app/tsconfig.spec.json | 14 +- apps/app/vite.config.ts | 200 +++--- apps/ui-storybook-e2e/.eslintrc.json | 16 +- apps/ui-storybook-e2e/cypress.config.ts | 4 +- apps/ui-storybook-e2e/project.json | 56 +- .../src/fixtures/example.json | 4 +- .../alert-dialog/alert-dialog.cy.ts | 202 +++--- .../command/command--default.cy.ts | 266 +++---- .../src/integration/dialog/dialog.cy.ts | 168 ++--- .../src/integration/menu/context-menu.cy.ts | 46 +- .../src/integration/menu/dropdown-menu.cy.ts | 104 +-- .../src/integration/menu/menubar.cy.ts | 212 +++--- .../src/integration/popover/popover.cy.ts | 146 ++-- .../src/integration/progress/progress.cy.ts | 158 ++-- .../integration/radio-group/radio-group.cy.ts | 150 ++-- .../src/integration/separator/separator.cy.ts | 42 +- .../src/integration/sheet/sheet.cy.ts | 168 ++--- .../src/integration/switch/switch.cy.ts | 256 +++---- .../tabs/tabs--default--manual.cy.ts | 154 ++-- .../src/integration/tabs/tabs--default.cy.ts | 140 ++-- .../src/integration/tabs/tabs--vertical.cy.ts | 142 ++-- ...ggle--toggle-group-multiple-nullable.cy.ts | 422 +++++------ .../toggle--toggle-group-multiple.cy.ts | 482 ++++++------- ...toggle-group-single--dynamic-options.cy.ts | 436 +++++------ ...toggle--toggle-group-single-nullable.cy.ts | 262 +++---- .../toggle/toggle--toggle-group-single.cy.ts | 322 ++++----- apps/ui-storybook-e2e/src/support/commands.ts | 10 +- apps/ui-storybook-e2e/src/support/e2e.ts | 2 +- apps/ui-storybook-e2e/tsconfig.json | 16 +- commitlint.config.js | 106 +-- jest.config.ts | 2 +- libs/nx/.eslintrc.json | 46 +- libs/nx/executors.json | 2 +- libs/nx/generators.json | 24 +- libs/nx/jest.config.ts | 14 +- libs/nx/package.json | 32 +- libs/nx/project.json | 118 +-- libs/nx/src/generators/base/generator.ts | 36 +- .../base/lib/build-dependency-array.ts | 126 ++-- .../base/lib/get-target-library-directory.ts | 8 +- .../base/lib/initialize-angular-library.ts | 34 +- libs/nx/src/generators/base/schema.d.ts | 16 +- libs/nx/src/generators/base/schema.json | 30 +- libs/nx/src/generators/theme/generator.ts | 118 +-- .../libs/add-theme-to-application-styles.ts | 132 ++-- .../libs/supported-theme-generator-map.ts | 24 +- libs/nx/src/generators/theme/schema.json | 10 +- libs/nx/src/generators/ui/generator.ts | 242 +++---- .../ui/libs/ui-accordion-helm/generator.ts | 14 +- .../ui/libs/ui-alert-dialog-helm/generator.ts | 14 +- .../ui/libs/ui-alert-helm/generator.ts | 14 +- .../ui/libs/ui-aspect-ratio-helm/generator.ts | 14 +- .../ui/libs/ui-avatar-helm/generator.ts | 14 +- .../ui/libs/ui-badge-helm/generator.ts | 14 +- .../ui/libs/ui-button-helm/generator.ts | 14 +- .../ui/libs/ui-card-helm/generator.ts | 14 +- .../ui/libs/ui-command-helm/generator.ts | 14 +- .../ui/libs/ui-dialog-helm/generator.ts | 14 +- .../ui/libs/ui-hover-card-helm/generator.ts | 14 +- .../ui/libs/ui-icon-helm/generator.ts | 14 +- .../ui/libs/ui-input-helm/generator.ts | 14 +- .../ui/libs/ui-label-helm/generator.ts | 14 +- .../ui/libs/ui-menu-helm/generator.ts | 14 +- .../ui/libs/ui-popover-helm/generator.ts | 14 +- .../ui/libs/ui-progress-helm/generator.ts | 14 +- .../ui/libs/ui-radio-group-helm/generator.ts | 14 +- .../ui/libs/ui-scroll-area-helm/generator.ts | 14 +- .../ui/libs/ui-separator-helm/generator.ts | 14 +- .../ui/libs/ui-sheet-helm/generator.ts | 14 +- .../ui/libs/ui-skeleton-helm/generator.ts | 14 +- .../ui/libs/ui-spinner-helm/generator.ts | 14 +- .../ui/libs/ui-switch-helm/generator.ts | 14 +- .../ui/libs/ui-table-helm/generator.ts | 14 +- .../ui/libs/ui-tabs-helm/generator.ts | 14 +- .../ui/libs/ui-toggle-helm/generator.ts | 14 +- .../ui/libs/ui-typography-helm/generator.ts | 14 +- libs/nx/src/generators/ui/schema.d.ts | 10 +- libs/nx/src/generators/ui/schema.json | 48 +- .../generators/ui/supported-ui-libraries.json | 486 ++++++------- libs/nx/src/utils/get-project-names.ts | 16 +- libs/nx/src/utils/version-utils.ts | 30 +- libs/nx/tsconfig.json | 28 +- libs/nx/tsconfig.lib.json | 18 +- libs/nx/tsconfig.spec.json | 14 +- libs/tools/.eslintrc.json | 46 +- libs/tools/executors.json | 34 +- libs/tools/generators.json | 14 +- libs/tools/jest.config.ts | 14 +- libs/tools/package.json | 18 +- libs/tools/project.json | 116 +-- .../build-update-publish/executor.spec.ts | 36 +- .../release/build-update-publish/executor.ts | 14 +- .../release/build-update-publish/schema.json | 12 +- .../release/helpers/projects.helpers.spec.ts | 38 +- .../release/helpers/projects.helpers.ts | 14 +- .../release/npm-publish/executor.spec.ts | 28 +- .../executors/release/npm-publish/executor.ts | 12 +- .../executors/release/npm-publish/schema.json | 12 +- .../release/update-version/executor.spec.ts | 28 +- .../release/update-version/executor.ts | 12 +- .../release/update-version/schema.json | 12 +- .../hlm-to-nx-generator/generator.spec.ts | 22 +- .../hlm-to-nx-generator/generator.ts | 74 +- ...add-primitive-to-supported-ui-libraries.ts | 22 +- .../lib/file-management.ts | 56 +- .../lib/get-project-names.ts | 16 +- .../hlm-to-nx-generator/schema.d.ts | 2 +- .../hlm-to-nx-generator/schema.json | 10 +- libs/tools/tsconfig.json | 28 +- libs/tools/tsconfig.lib.json | 16 +- libs/tools/tsconfig.spec.json | 14 +- libs/ui/accordion/accordion.stories.ts | 20 +- libs/ui/accordion/brain/.eslintrc.json | 64 +- libs/ui/accordion/brain/jest.config.ts | 36 +- libs/ui/accordion/brain/ng-package.json | 10 +- libs/ui/accordion/brain/package.json | 24 +- libs/ui/accordion/brain/project.json | 98 +-- libs/ui/accordion/brain/src/index.ts | 16 +- .../lib/brn-accordion-content.component.ts | 102 +-- .../src/lib/brn-accordion-item.component.ts | 30 +- .../lib/brn-accordion-trigger.component.ts | 108 +-- .../brain/src/lib/brn-accordion.component.ts | 96 +-- libs/ui/accordion/brain/src/test-setup.ts | 8 +- libs/ui/accordion/brain/tsconfig.json | 54 +- libs/ui/accordion/brain/tsconfig.lib.json | 20 +- .../ui/accordion/brain/tsconfig.lib.prod.json | 14 +- libs/ui/accordion/brain/tsconfig.spec.json | 18 +- libs/ui/accordion/helm/.eslintrc.json | 64 +- libs/ui/accordion/helm/jest.config.ts | 36 +- libs/ui/accordion/helm/ng-package.json | 10 +- libs/ui/accordion/helm/package.json | 26 +- libs/ui/accordion/helm/project.json | 98 +-- libs/ui/accordion/helm/src/index.ts | 26 +- .../lib/hlm-accordion-content.directive.ts | 142 ++-- .../src/lib/hlm-accordion-icon.component.ts | 42 +- .../src/lib/hlm-accordion-item.directive.ts | 28 +- .../lib/hlm-accordion-trigger.directive.ts | 56 +- .../helm/src/lib/hlm-accordion.directive.ts | 28 +- libs/ui/accordion/helm/src/test-setup.ts | 8 +- libs/ui/accordion/helm/tsconfig.json | 54 +- libs/ui/accordion/helm/tsconfig.lib.json | 20 +- libs/ui/accordion/helm/tsconfig.lib.prod.json | 14 +- libs/ui/accordion/helm/tsconfig.spec.json | 18 +- libs/ui/alert-dialog/alert-dialog.stories.ts | 28 +- libs/ui/alert-dialog/brain/.eslintrc.json | 64 +- libs/ui/alert-dialog/brain/jest.config.ts | 36 +- libs/ui/alert-dialog/brain/ng-package.json | 10 +- libs/ui/alert-dialog/brain/package.json | 24 +- libs/ui/alert-dialog/brain/project.json | 98 +-- libs/ui/alert-dialog/brain/src/index.ts | 34 +- .../lib/brn-alert-dialog-close.directive.ts | 4 +- .../lib/brn-alert-dialog-content.directive.ts | 16 +- .../brn-alert-dialog-description.directive.ts | 10 +- .../lib/brn-alert-dialog-overlay.component.ts | 22 +- .../lib/brn-alert-dialog-title.directive.ts | 10 +- .../lib/brn-alert-dialog-trigger.directive.ts | 28 +- .../src/lib/brn-alert-dialog.component.ts | 38 +- libs/ui/alert-dialog/brain/src/test-setup.ts | 8 +- libs/ui/alert-dialog/brain/tsconfig.json | 54 +- libs/ui/alert-dialog/brain/tsconfig.lib.json | 20 +- .../alert-dialog/brain/tsconfig.lib.prod.json | 14 +- libs/ui/alert-dialog/brain/tsconfig.spec.json | 18 +- libs/ui/alert-dialog/helm/.eslintrc.json | 64 +- libs/ui/alert-dialog/helm/jest.config.ts | 36 +- libs/ui/alert-dialog/helm/ng-package.json | 10 +- libs/ui/alert-dialog/helm/package.json | 24 +- libs/ui/alert-dialog/helm/project.json | 98 +-- libs/ui/alert-dialog/helm/src/index.ts | 30 +- ...lm-alert-dialog-action-button.directive.ts | 6 +- ...lm-alert-dialog-cancel-button.directive.ts | 38 +- .../lib/hlm-alert-dialog-close.directive.ts | 32 +- .../lib/hlm-alert-dialog-content.directive.ts | 46 +- .../hlm-alert-dialog-description.directive.ts | 26 +- .../lib/hlm-alert-dialog-footer.component.ts | 32 +- .../lib/hlm-alert-dialog-header.component.ts | 32 +- .../lib/hlm-alert-dialog-overlay.directive.ts | 40 +- .../lib/hlm-alert-dialog-title.directive.ts | 26 +- libs/ui/alert-dialog/helm/src/test-setup.ts | 8 +- libs/ui/alert-dialog/helm/tsconfig.json | 54 +- libs/ui/alert-dialog/helm/tsconfig.lib.json | 20 +- .../alert-dialog/helm/tsconfig.lib.prod.json | 14 +- libs/ui/alert-dialog/helm/tsconfig.spec.json | 18 +- libs/ui/alert/alert.stories.ts | 24 +- libs/ui/alert/helm/.eslintrc.json | 64 +- libs/ui/alert/helm/jest.config.ts | 36 +- libs/ui/alert/helm/ng-package.json | 10 +- libs/ui/alert/helm/package.json | 26 +- libs/ui/alert/helm/project.json | 98 +-- libs/ui/alert/helm/src/index.ts | 20 +- .../lib/hlm-alert-description.directive.ts | 30 +- .../helm/src/lib/hlm-alert-icon.directive.ts | 14 +- .../helm/src/lib/hlm-alert-title.directive.ts | 30 +- .../alert/helm/src/lib/hlm-alert.directive.ts | 98 +-- libs/ui/alert/helm/src/test-setup.ts | 8 +- libs/ui/alert/helm/tsconfig.json | 54 +- libs/ui/alert/helm/tsconfig.lib.json | 20 +- libs/ui/alert/helm/tsconfig.lib.prod.json | 14 +- libs/ui/alert/helm/tsconfig.spec.json | 18 +- libs/ui/aspect-ratio/aspect-ratio.stories.ts | 48 +- libs/ui/aspect-ratio/helm/.eslintrc.json | 64 +- libs/ui/aspect-ratio/helm/jest.config.ts | 36 +- libs/ui/aspect-ratio/helm/ng-package.json | 10 +- libs/ui/aspect-ratio/helm/package.json | 24 +- libs/ui/aspect-ratio/helm/project.json | 98 +-- libs/ui/aspect-ratio/helm/src/index.ts | 4 +- .../lib/helm-aspect-ratio.directive.spec.ts | 106 +-- .../src/lib/helm-aspect-ratio.directive.ts | 92 +-- libs/ui/aspect-ratio/helm/src/test-setup.ts | 8 +- libs/ui/aspect-ratio/helm/tsconfig.json | 54 +- libs/ui/aspect-ratio/helm/tsconfig.lib.json | 20 +- .../aspect-ratio/helm/tsconfig.lib.prod.json | 14 +- libs/ui/aspect-ratio/helm/tsconfig.spec.json | 18 +- libs/ui/avatar/avatar.stories.ts | 18 +- libs/ui/avatar/brain/.eslintrc.json | 64 +- libs/ui/avatar/brain/jest.config.ts | 36 +- libs/ui/avatar/brain/ng-package.json | 10 +- libs/ui/avatar/brain/package.json | 24 +- libs/ui/avatar/brain/project.json | 98 +-- libs/ui/avatar/brain/src/index.ts | 4 +- .../src/lib/brn-avatar.component.spec.ts | 106 +-- .../brain/src/lib/brn-avatar.component.ts | 30 +- .../brn-avatar-fallback.directive.spec.ts | 29 +- .../fallback/brn-avatar-fallback.directive.ts | 34 +- .../image/brn-avatar-image.directive.spec.ts | 102 +-- .../lib/image/brn-avatar-image.directive.ts | 32 +- .../brain/src/lib/util/hex-color-for.spec.ts | 30 +- .../brain/src/lib/util/hex-color-for.ts | 26 +- .../brain/src/lib/util/initials.pipe.spec.ts | 94 +-- .../brain/src/lib/util/initials.pipe.ts | 26 +- .../brain/src/lib/util/is-bright.spec.ts | 36 +- .../ui/avatar/brain/src/lib/util/is-bright.ts | 12 +- libs/ui/avatar/brain/src/test-setup.ts | 8 +- libs/ui/avatar/brain/tsconfig.json | 54 +- libs/ui/avatar/brain/tsconfig.lib.json | 20 +- libs/ui/avatar/brain/tsconfig.lib.prod.json | 14 +- libs/ui/avatar/brain/tsconfig.spec.json | 18 +- libs/ui/avatar/helm/.eslintrc.json | 64 +- libs/ui/avatar/helm/jest.config.ts | 36 +- libs/ui/avatar/helm/ng-package.json | 10 +- libs/ui/avatar/helm/package.json | 28 +- libs/ui/avatar/helm/project.json | 98 +-- libs/ui/avatar/helm/src/index.ts | 6 +- .../hlm-avatar-fallback.directive.spec.ts | 104 +-- .../fallback/hlm-avatar-fallback.directive.ts | 46 +- .../helm/src/lib/hlm-avatar.component.spec.ts | 104 +-- .../helm/src/lib/hlm-avatar.component.ts | 80 +-- .../image/hlm-avatar-image.directive.spec.ts | 54 +- .../lib/image/hlm-avatar-image.directive.ts | 42 +- libs/ui/avatar/helm/src/test-setup.ts | 8 +- libs/ui/avatar/helm/tsconfig.json | 54 +- libs/ui/avatar/helm/tsconfig.lib.json | 20 +- libs/ui/avatar/helm/tsconfig.lib.prod.json | 14 +- libs/ui/avatar/helm/tsconfig.spec.json | 18 +- libs/ui/badge/badge.stories.ts | 60 +- libs/ui/badge/helm/.eslintrc.json | 64 +- libs/ui/badge/helm/jest.config.ts | 36 +- libs/ui/badge/helm/ng-package.json | 10 +- libs/ui/badge/helm/package.json | 26 +- libs/ui/badge/helm/project.json | 98 +-- libs/ui/badge/helm/src/index.ts | 4 +- .../badge/helm/src/lib/hlm-badge.directive.ts | 130 ++-- libs/ui/badge/helm/src/test-setup.ts | 8 +- libs/ui/badge/helm/tsconfig.json | 54 +- libs/ui/badge/helm/tsconfig.lib.json | 20 +- libs/ui/badge/helm/tsconfig.lib.prod.json | 14 +- libs/ui/badge/helm/tsconfig.spec.json | 18 +- libs/ui/button/button.stories.ts | 48 +- libs/ui/button/helm/.eslintrc.json | 64 +- libs/ui/button/helm/jest.config.ts | 36 +- libs/ui/button/helm/ng-package.json | 10 +- libs/ui/button/helm/package.json | 26 +- libs/ui/button/helm/project.json | 98 +-- libs/ui/button/helm/src/index.ts | 4 +- .../helm/src/lib/hlm-button.directive.ts | 110 +-- libs/ui/button/helm/src/test-setup.ts | 8 +- libs/ui/button/helm/tsconfig.json | 54 +- libs/ui/button/helm/tsconfig.lib.json | 20 +- libs/ui/button/helm/tsconfig.lib.prod.json | 14 +- libs/ui/button/helm/tsconfig.spec.json | 18 +- libs/ui/card/card.stories.ts | 32 +- libs/ui/card/helm/.eslintrc.json | 64 +- libs/ui/card/helm/jest.config.ts | 36 +- libs/ui/card/helm/ng-package.json | 10 +- libs/ui/card/helm/package.json | 26 +- libs/ui/card/helm/project.json | 98 +-- libs/ui/card/helm/src/index.ts | 32 +- .../src/lib/hlm-card-content.directive.ts | 30 +- .../src/lib/hlm-card-description.directive.ts | 32 +- .../helm/src/lib/hlm-card-footer.directive.ts | 56 +- .../helm/src/lib/hlm-card-header.directive.ts | 56 +- .../helm/src/lib/hlm-card-title.directive.ts | 30 +- .../card/helm/src/lib/hlm-card.directive.ts | 36 +- libs/ui/card/helm/src/test-setup.ts | 8 +- libs/ui/card/helm/tsconfig.json | 54 +- libs/ui/card/helm/tsconfig.lib.json | 20 +- libs/ui/card/helm/tsconfig.lib.prod.json | 14 +- libs/ui/card/helm/tsconfig.spec.json | 18 +- libs/ui/collapsible/brain/.eslintrc.json | 64 +- libs/ui/collapsible/brain/jest.config.ts | 36 +- libs/ui/collapsible/brain/ng-package.json | 10 +- libs/ui/collapsible/brain/package.json | 20 +- libs/ui/collapsible/brain/project.json | 98 +-- libs/ui/collapsible/brain/src/index.ts | 18 +- .../lib/brn-collapsible-content.component.ts | 82 +-- .../lib/brn-collapsible-trigger.directive.ts | 42 +- .../src/lib/brn-collapsible.component.spec.ts | 252 +++---- .../src/lib/brn-collapsible.component.ts | 62 +- libs/ui/collapsible/brain/src/test-setup.ts | 10 +- libs/ui/collapsible/brain/tsconfig.json | 54 +- libs/ui/collapsible/brain/tsconfig.lib.json | 20 +- .../collapsible/brain/tsconfig.lib.prod.json | 14 +- libs/ui/collapsible/brain/tsconfig.spec.json | 18 +- libs/ui/collapsible/collapsible.stories.ts | 20 +- libs/ui/combobox/combobox.stories.ts | 208 +++--- libs/ui/command/brain/.eslintrc.json | 64 +- libs/ui/command/brain/jest.config.ts | 38 +- libs/ui/command/brain/ng-package.json | 10 +- libs/ui/command/brain/package.json | 28 +- libs/ui/command/brain/project.json | 98 +-- libs/ui/command/brain/src/index.ts | 30 +- .../src/lib/brn-command-empty.directive.ts | 24 +- .../src/lib/brn-command-group.component.ts | 36 +- .../src/lib/brn-command-input.directive.ts | 24 +- .../src/lib/brn-command-item.directive.ts | 26 +- .../src/lib/brn-command-list.component.ts | 26 +- .../src/lib/brn-command-loader.directive.ts | 24 +- .../lib/brn-command-separator.component.ts | 24 +- .../brain/src/lib/brn-command.component.ts | 10 +- libs/ui/command/brain/src/test-setup.ts | 8 +- libs/ui/command/brain/tsconfig.json | 54 +- libs/ui/command/brain/tsconfig.lib.json | 20 +- libs/ui/command/brain/tsconfig.lib.prod.json | 14 +- libs/ui/command/brain/tsconfig.spec.json | 18 +- libs/ui/command/command.stories.ts | 212 +++--- libs/ui/command/helm/.eslintrc.json | 64 +- libs/ui/command/helm/jest.config.ts | 38 +- libs/ui/command/helm/ng-package.json | 10 +- libs/ui/command/helm/package.json | 24 +- libs/ui/command/helm/project.json | 98 +-- libs/ui/command/helm/src/index.ts | 52 +- ...m-command-dialog-close-button.directive.ts | 40 +- .../src/lib/hlm-command-dialog.directive.ts | 54 +- .../src/lib/hlm-command-empty.directive.ts | 28 +- .../src/lib/hlm-command-group.directive.ts | 38 +- .../hlm-command-input-wrapper.component.ts | 36 +- .../src/lib/hlm-command-input.directive.ts | 34 +- .../lib/hlm-command-item-icon.directive.ts | 38 +- .../src/lib/hlm-command-item.directive.ts | 46 +- .../src/lib/hlm-command-list.directive.ts | 28 +- .../src/lib/hlm-command-loader.directive.ts | 4 +- .../lib/hlm-command-separator.directive.ts | 10 +- .../src/lib/hlm-command-shortcut.component.ts | 32 +- .../helm/src/lib/hlm-command.directive.ts | 34 +- libs/ui/command/helm/src/test-setup.ts | 8 +- libs/ui/command/helm/tsconfig.json | 54 +- libs/ui/command/helm/tsconfig.lib.json | 20 +- libs/ui/command/helm/tsconfig.lib.prod.json | 14 +- libs/ui/command/helm/tsconfig.spec.json | 18 +- libs/ui/core/.eslintrc.json | 64 +- libs/ui/core/hlm-tailwind-preset.js | 136 ++-- libs/ui/core/jest.config.ts | 38 +- libs/ui/core/ng-package.json | 12 +- libs/ui/core/package.json | 40 +- libs/ui/core/project.json | 98 +-- libs/ui/core/src/index.ts | 6 +- .../brain/custom-element-class-settable.ts | 4 +- libs/ui/core/src/lib/brain/exposes-side.ts | 4 +- libs/ui/core/src/lib/brain/exposes-state.ts | 4 +- .../core/src/lib/brain/rx-host-integration.ts | 90 +-- .../src/lib/brain/table-classes-settable.ts | 4 +- libs/ui/core/src/lib/brain/zone-free.ts | 20 +- libs/ui/core/src/lib/helm/hlm.ts | 4 +- libs/ui/core/src/test-setup.ts | 8 +- libs/ui/core/tsconfig.json | 54 +- libs/ui/core/tsconfig.lib.json | 20 +- libs/ui/core/tsconfig.lib.prod.json | 14 +- libs/ui/core/tsconfig.spec.json | 18 +- libs/ui/dialog/brain/.eslintrc.json | 64 +- libs/ui/dialog/brain/jest.config.ts | 36 +- libs/ui/dialog/brain/ng-package.json | 10 +- libs/ui/dialog/brain/package.json | 24 +- libs/ui/dialog/brain/project.json | 98 +-- libs/ui/dialog/brain/src/index.ts | 34 +- .../src/lib/brn-dialog-close.directive.ts | 30 +- .../src/lib/brn-dialog-content.directive.ts | 46 +- .../lib/brn-dialog-description.directive.ts | 24 +- .../src/lib/brn-dialog-overlay.component.ts | 40 +- .../src/lib/brn-dialog-title.directive.ts | 24 +- .../src/lib/brn-dialog-trigger.directive.ts | 50 +- .../brain/src/lib/brn-dialog.component.ts | 420 +++++------ .../brain/src/lib/brn-dialog.service.ts | 344 ++++----- libs/ui/dialog/brain/src/test-setup.ts | 8 +- libs/ui/dialog/brain/tsconfig.json | 54 +- libs/ui/dialog/brain/tsconfig.lib.json | 20 +- libs/ui/dialog/brain/tsconfig.lib.prod.json | 14 +- libs/ui/dialog/brain/tsconfig.spec.json | 18 +- libs/ui/dialog/dialog.stories.ts | 46 +- libs/ui/dialog/helm/.eslintrc.json | 64 +- libs/ui/dialog/helm/jest.config.ts | 36 +- libs/ui/dialog/helm/ng-package.json | 10 +- libs/ui/dialog/helm/package.json | 24 +- libs/ui/dialog/helm/project.json | 98 +-- libs/ui/dialog/helm/src/index.ts | 18 +- .../src/lib/hlm-dialog-close.directive.ts | 32 +- .../src/lib/hlm-dialog-content.directive.ts | 50 +- .../lib/hlm-dialog-description.directive.ts | 26 +- .../src/lib/hlm-dialog-footer.component.ts | 32 +- .../src/lib/hlm-dialog-header.component.ts | 32 +- .../src/lib/hlm-dialog-overlay.directive.ts | 40 +- .../src/lib/hlm-dialog-title.directive.ts | 26 +- libs/ui/dialog/helm/src/test-setup.ts | 8 +- libs/ui/dialog/helm/tsconfig.json | 54 +- libs/ui/dialog/helm/tsconfig.lib.json | 20 +- libs/ui/dialog/helm/tsconfig.lib.prod.json | 14 +- libs/ui/dialog/helm/tsconfig.spec.json | 18 +- libs/ui/hover-card/brain/.eslintrc.json | 64 +- libs/ui/hover-card/brain/jest.config.ts | 36 +- libs/ui/hover-card/brain/ng-package.json | 10 +- libs/ui/hover-card/brain/package.json | 22 +- libs/ui/hover-card/brain/project.json | 98 +-- libs/ui/hover-card/brain/src/index.ts | 14 +- .../lib/brn-hover-card-content.directive.ts | 34 +- .../src/lib/brn-hover-card-content.service.ts | 264 +++---- .../lib/brn-hover-card-trigger.directive.ts | 174 ++--- .../brain/src/lib/brn-hover-card.component.ts | 28 +- .../brain/src/lib/createHoverObservable.ts | 40 +- libs/ui/hover-card/brain/src/test-setup.ts | 8 +- libs/ui/hover-card/brain/tsconfig.json | 54 +- libs/ui/hover-card/brain/tsconfig.lib.json | 20 +- .../hover-card/brain/tsconfig.lib.prod.json | 14 +- libs/ui/hover-card/brain/tsconfig.spec.json | 18 +- libs/ui/hover-card/helm/.eslintrc.json | 64 +- libs/ui/hover-card/helm/jest.config.ts | 36 +- libs/ui/hover-card/helm/ng-package.json | 10 +- libs/ui/hover-card/helm/package.json | 24 +- libs/ui/hover-card/helm/project.json | 98 +-- libs/ui/hover-card/helm/src/index.ts | 6 +- .../lib/hlm-hover-card-content.directive.ts | 56 +- libs/ui/hover-card/helm/src/test-setup.ts | 8 +- libs/ui/hover-card/helm/tsconfig.json | 54 +- libs/ui/hover-card/helm/tsconfig.lib.json | 20 +- .../ui/hover-card/helm/tsconfig.lib.prod.json | 14 +- libs/ui/hover-card/helm/tsconfig.spec.json | 18 +- libs/ui/hover-card/hover-card.stories.ts | 84 +-- libs/ui/icon/helm/.eslintrc.json | 64 +- libs/ui/icon/helm/jest.config.ts | 38 +- libs/ui/icon/helm/ng-package.json | 10 +- libs/ui/icon/helm/package.json | 28 +- libs/ui/icon/helm/project.json | 98 +-- libs/ui/icon/helm/src/index.ts | 4 +- .../helm/src/lib/hlm-icon.component.spec.ts | 98 +-- .../icon/helm/src/lib/hlm-icon.component.ts | 132 ++-- libs/ui/icon/helm/src/test-setup.ts | 8 +- libs/ui/icon/helm/tsconfig.json | 54 +- libs/ui/icon/helm/tsconfig.lib.json | 20 +- libs/ui/icon/helm/tsconfig.lib.prod.json | 14 +- libs/ui/icon/helm/tsconfig.spec.json | 18 +- libs/ui/icon/icon.stories.ts | 74 +- libs/ui/input/helm/.eslintrc.json | 64 +- libs/ui/input/helm/jest.config.ts | 38 +- libs/ui/input/helm/ng-package.json | 10 +- libs/ui/input/helm/package.json | 26 +- libs/ui/input/helm/project.json | 98 +-- libs/ui/input/helm/src/index.ts | 8 +- .../helm/src/lib/hlm-input-error.directive.ts | 32 +- .../input/helm/src/lib/hlm-input.directive.ts | 100 +-- libs/ui/input/helm/src/test-setup.ts | 8 +- libs/ui/input/helm/tsconfig.json | 54 +- libs/ui/input/helm/tsconfig.lib.json | 20 +- libs/ui/input/helm/tsconfig.lib.prod.json | 14 +- libs/ui/input/helm/tsconfig.spec.json | 18 +- libs/ui/input/input.stories.ts | 58 +- libs/ui/label/helm/.eslintrc.json | 64 +- libs/ui/label/helm/jest.config.ts | 38 +- libs/ui/label/helm/ng-package.json | 10 +- libs/ui/label/helm/package.json | 26 +- libs/ui/label/helm/project.json | 98 +-- libs/ui/label/helm/src/index.ts | 4 +- .../label/helm/src/lib/hlm-label.directive.ts | 96 +-- libs/ui/label/helm/src/test-setup.ts | 8 +- libs/ui/label/helm/tsconfig.json | 54 +- libs/ui/label/helm/tsconfig.lib.json | 20 +- libs/ui/label/helm/tsconfig.lib.prod.json | 14 +- libs/ui/label/helm/tsconfig.spec.json | 18 +- libs/ui/label/label.stories.ts | 30 +- libs/ui/menu/brain/.eslintrc.json | 64 +- libs/ui/menu/brain/jest.config.ts | 36 +- libs/ui/menu/brain/ng-package.json | 10 +- libs/ui/menu/brain/package.json | 22 +- libs/ui/menu/brain/project.json | 98 +-- libs/ui/menu/brain/src/index.ts | 44 +- .../lib/brn-context-menu-trigger.directive.ts | 68 +- .../brain/src/lib/brn-menu-bar.directive.ts | 8 +- .../brain/src/lib/brn-menu-group.directive.ts | 8 +- .../lib/brn-menu-item-checkbox.directive.ts | 46 +- .../src/lib/brn-menu-item-radio.directive.ts | 46 +- .../brain/src/lib/brn-menu-item.directive.ts | 28 +- .../src/lib/brn-menu-trigger.directive.ts | 60 +- .../menu/brain/src/lib/brn-menu.directive.ts | 8 +- libs/ui/menu/brain/src/test-setup.ts | 10 +- libs/ui/menu/brain/tsconfig.json | 54 +- libs/ui/menu/brain/tsconfig.lib.json | 20 +- libs/ui/menu/brain/tsconfig.lib.prod.json | 14 +- libs/ui/menu/brain/tsconfig.spec.json | 18 +- libs/ui/menu/context-menu.stories.ts | 26 +- libs/ui/menu/dropdown-menu-bar.stories.ts | 42 +- libs/ui/menu/dropdown-menu.stories.ts | 270 +++---- libs/ui/menu/helm/.eslintrc.json | 64 +- libs/ui/menu/helm/jest.config.ts | 36 +- libs/ui/menu/helm/ng-package.json | 10 +- libs/ui/menu/helm/package.json | 28 +- libs/ui/menu/helm/project.json | 98 +-- libs/ui/menu/helm/src/index.ts | 60 +- .../src/lib/hlm-menu-bar-item.directive.ts | 34 +- .../helm/src/lib/hlm-menu-bar.directive.ts | 28 +- .../src/lib/hlm-menu-item-check.component.ts | 38 +- .../src/lib/hlm-menu-item-icon.directive.ts | 38 +- .../src/lib/hlm-menu-item-radio.component.ts | 38 +- .../hlm-menu-item-sub-indicator.component.ts | 38 +- .../helm/src/lib/hlm-menu-item.directive.ts | 48 +- .../helm/src/lib/hlm-menu-label.component.ts | 44 +- .../src/lib/hlm-menu-separator.component.ts | 30 +- .../src/lib/hlm-menu-shortcut.component.ts | 32 +- .../menu/helm/src/lib/hlm-menu.directive.ts | 66 +- .../helm/src/lib/hlm-sub-menu.directive.ts | 34 +- libs/ui/menu/helm/src/test-setup.ts | 8 +- libs/ui/menu/helm/tsconfig.json | 54 +- libs/ui/menu/helm/tsconfig.lib.json | 20 +- libs/ui/menu/helm/tsconfig.lib.prod.json | 14 +- libs/ui/menu/helm/tsconfig.spec.json | 18 +- libs/ui/popover/brain/.eslintrc.json | 64 +- libs/ui/popover/brain/jest.config.ts | 36 +- libs/ui/popover/brain/ng-package.json | 10 +- libs/ui/popover/brain/package.json | 24 +- libs/ui/popover/brain/project.json | 98 +-- libs/ui/popover/brain/src/index.ts | 20 +- .../src/lib/brn-popover-close.directive.ts | 4 +- .../src/lib/brn-popover-content.directive.ts | 16 +- .../src/lib/brn-popover-trigger.directive.ts | 42 +- .../brain/src/lib/brn-popover.component.ts | 134 ++-- libs/ui/popover/brain/src/test-setup.ts | 8 +- libs/ui/popover/brain/tsconfig.json | 54 +- libs/ui/popover/brain/tsconfig.lib.json | 20 +- libs/ui/popover/brain/tsconfig.lib.prod.json | 14 +- libs/ui/popover/brain/tsconfig.spec.json | 18 +- libs/ui/popover/helm/.eslintrc.json | 64 +- libs/ui/popover/helm/jest.config.ts | 36 +- libs/ui/popover/helm/ng-package.json | 10 +- libs/ui/popover/helm/package.json | 24 +- libs/ui/popover/helm/project.json | 98 +-- libs/ui/popover/helm/src/index.ts | 6 +- .../src/lib/hlm-popover-close.directive.ts | 32 +- .../src/lib/hlm-popover-content.directive.ts | 50 +- libs/ui/popover/helm/src/test-setup.ts | 8 +- libs/ui/popover/helm/tsconfig.json | 54 +- libs/ui/popover/helm/tsconfig.lib.json | 20 +- libs/ui/popover/helm/tsconfig.lib.prod.json | 14 +- libs/ui/popover/helm/tsconfig.spec.json | 18 +- libs/ui/popover/popover.stories.ts | 52 +- libs/ui/progress/brain/.eslintrc.json | 64 +- libs/ui/progress/brain/jest.config.ts | 36 +- libs/ui/progress/brain/ng-package.json | 10 +- libs/ui/progress/brain/package.json | 20 +- libs/ui/progress/brain/project.json | 98 +-- libs/ui/progress/brain/src/index.ts | 8 +- .../lib/brn-progress-indicator.component.ts | 24 +- .../brain/src/lib/brn-progress.component.ts | 100 +-- libs/ui/progress/brain/src/test-setup.ts | 8 +- libs/ui/progress/brain/tsconfig.json | 54 +- libs/ui/progress/brain/tsconfig.lib.json | 20 +- libs/ui/progress/brain/tsconfig.lib.prod.json | 14 +- libs/ui/progress/brain/tsconfig.spec.json | 18 +- libs/ui/progress/helm/.eslintrc.json | 64 +- libs/ui/progress/helm/jest.config.ts | 36 +- libs/ui/progress/helm/ng-package.json | 10 +- libs/ui/progress/helm/package.json | 24 +- libs/ui/progress/helm/project.json | 98 +-- libs/ui/progress/helm/src/index.ts | 8 +- .../lib/hlm-progress-indicator.directive.ts | 84 +-- .../helm/src/lib/hlm-progress.directive.ts | 26 +- libs/ui/progress/helm/src/test-setup.ts | 8 +- libs/ui/progress/helm/tsconfig.json | 54 +- libs/ui/progress/helm/tsconfig.lib.json | 20 +- libs/ui/progress/helm/tsconfig.lib.prod.json | 14 +- libs/ui/progress/helm/tsconfig.spec.json | 18 +- libs/ui/progress/progress.stories.ts | 28 +- libs/ui/radio-group/brain/.eslintrc.json | 64 +- libs/ui/radio-group/brain/jest.config.ts | 36 +- libs/ui/radio-group/brain/ng-package.json | 10 +- libs/ui/radio-group/brain/package.json | 24 +- libs/ui/radio-group/brain/project.json | 98 +-- libs/ui/radio-group/brain/src/index.ts | 6 +- .../brain/src/lib/brn-radio-change.ts | 7 +- .../src/lib/brn-radio-group.component.ts | 404 +++++------ .../brain/src/lib/brn-radio.component.ts | 636 ++++++++-------- libs/ui/radio-group/brain/src/test-setup.ts | 8 +- libs/ui/radio-group/brain/tsconfig.json | 54 +- libs/ui/radio-group/brain/tsconfig.lib.json | 20 +- .../radio-group/brain/tsconfig.lib.prod.json | 14 +- libs/ui/radio-group/brain/tsconfig.spec.json | 18 +- libs/ui/radio-group/helm/.eslintrc.json | 64 +- libs/ui/radio-group/helm/jest.config.ts | 36 +- libs/ui/radio-group/helm/ng-package.json | 10 +- libs/ui/radio-group/helm/package.json | 24 +- libs/ui/radio-group/helm/project.json | 98 +-- libs/ui/radio-group/helm/src/index.ts | 8 +- .../helm/src/lib/hlm-radio-group.directive.ts | 28 +- .../src/lib/hlm-radio-indicator.component.ts | 48 +- .../helm/src/lib/hlm-radio.directive.ts | 28 +- libs/ui/radio-group/helm/src/test-setup.ts | 8 +- libs/ui/radio-group/helm/tsconfig.json | 54 +- libs/ui/radio-group/helm/tsconfig.lib.json | 20 +- .../radio-group/helm/tsconfig.lib.prod.json | 14 +- libs/ui/radio-group/helm/tsconfig.spec.json | 18 +- libs/ui/radio-group/radio-group.stories.ts | 111 +-- libs/ui/scroll-area/helm/.eslintrc.json | 64 +- libs/ui/scroll-area/helm/jest.config.ts | 38 +- libs/ui/scroll-area/helm/ng-package.json | 10 +- libs/ui/scroll-area/helm/package.json | 26 +- libs/ui/scroll-area/helm/project.json | 98 +-- libs/ui/scroll-area/helm/src/index.ts | 4 +- .../helm/src/lib/hlm-scroll-area.component.ts | 84 +-- libs/ui/scroll-area/helm/src/test-setup.ts | 8 +- libs/ui/scroll-area/helm/tsconfig.json | 54 +- libs/ui/scroll-area/helm/tsconfig.lib.json | 20 +- .../scroll-area/helm/tsconfig.lib.prod.json | 14 +- libs/ui/scroll-area/helm/tsconfig.spec.json | 18 +- libs/ui/scroll-area/scroll-area.stories.ts | 58 +- libs/ui/separator/brain/.eslintrc.json | 64 +- libs/ui/separator/brain/jest.config.ts | 36 +- libs/ui/separator/brain/ng-package.json | 10 +- libs/ui/separator/brain/package.json | 20 +- libs/ui/separator/brain/project.json | 98 +-- libs/ui/separator/brain/src/index.ts | 4 +- .../brain/src/lib/brn-separator.component.ts | 36 +- libs/ui/separator/brain/src/test-setup.ts | 8 +- libs/ui/separator/brain/tsconfig.json | 54 +- libs/ui/separator/brain/tsconfig.lib.json | 20 +- .../ui/separator/brain/tsconfig.lib.prod.json | 14 +- libs/ui/separator/brain/tsconfig.spec.json | 18 +- libs/ui/separator/helm/.eslintrc.json | 64 +- libs/ui/separator/helm/jest.config.ts | 36 +- libs/ui/separator/helm/ng-package.json | 10 +- libs/ui/separator/helm/package.json | 24 +- libs/ui/separator/helm/project.json | 98 +-- libs/ui/separator/helm/src/index.ts | 4 +- .../helm/src/lib/hlm-separator.directive.ts | 52 +- libs/ui/separator/helm/src/test-setup.ts | 8 +- libs/ui/separator/helm/tsconfig.json | 54 +- libs/ui/separator/helm/tsconfig.lib.json | 20 +- libs/ui/separator/helm/tsconfig.lib.prod.json | 14 +- libs/ui/separator/helm/tsconfig.spec.json | 18 +- libs/ui/separator/separator.stories.ts | 20 +- libs/ui/sheet/brain/.eslintrc.json | 64 +- libs/ui/sheet/brain/jest.config.ts | 36 +- libs/ui/sheet/brain/ng-package.json | 10 +- libs/ui/sheet/brain/package.json | 24 +- libs/ui/sheet/brain/project.json | 98 +-- libs/ui/sheet/brain/src/index.ts | 34 +- .../src/lib/brn-sheet-close.directive.ts | 4 +- .../src/lib/brn-sheet-content.directive.ts | 26 +- .../lib/brn-sheet-description.directive.ts | 10 +- .../src/lib/brn-sheet-overlay.component.ts | 22 +- .../src/lib/brn-sheet-title.directive.ts | 10 +- .../src/lib/brn-sheet-trigger.directive.ts | 38 +- .../brain/src/lib/brn-sheet.component.ts | 66 +- libs/ui/sheet/brain/src/test-setup.ts | 8 +- libs/ui/sheet/brain/tsconfig.json | 54 +- libs/ui/sheet/brain/tsconfig.lib.json | 20 +- libs/ui/sheet/brain/tsconfig.lib.prod.json | 14 +- libs/ui/sheet/brain/tsconfig.spec.json | 18 +- libs/ui/sheet/helm/.eslintrc.json | 64 +- libs/ui/sheet/helm/jest.config.ts | 36 +- libs/ui/sheet/helm/ng-package.json | 10 +- libs/ui/sheet/helm/package.json | 26 +- libs/ui/sheet/helm/project.json | 98 +-- libs/ui/sheet/helm/src/index.ts | 16 +- .../helm/src/lib/hlm-sheet-close.directive.ts | 32 +- .../src/lib/hlm-sheet-content.directive.ts | 88 +-- .../lib/hlm-sheet-description.directive.ts | 26 +- .../src/lib/hlm-sheet-footer.component.ts | 32 +- .../src/lib/hlm-sheet-header.component.ts | 32 +- .../src/lib/hlm-sheet-overlay.directive.ts | 40 +- .../helm/src/lib/hlm-sheet-title.directive.ts | 26 +- libs/ui/sheet/helm/src/test-setup.ts | 8 +- libs/ui/sheet/helm/tsconfig.json | 54 +- libs/ui/sheet/helm/tsconfig.lib.json | 20 +- libs/ui/sheet/helm/tsconfig.lib.prod.json | 14 +- libs/ui/sheet/helm/tsconfig.spec.json | 18 +- libs/ui/sheet/sheet.stories.ts | 38 +- libs/ui/skeleton/helm/.eslintrc.json | 64 +- libs/ui/skeleton/helm/jest.config.ts | 38 +- libs/ui/skeleton/helm/ng-package.json | 10 +- libs/ui/skeleton/helm/package.json | 24 +- libs/ui/skeleton/helm/project.json | 98 +-- libs/ui/skeleton/helm/src/index.ts | 4 +- .../helm/src/lib/hlm-skeleton.component.ts | 30 +- libs/ui/skeleton/helm/src/test-setup.ts | 8 +- libs/ui/skeleton/helm/tsconfig.json | 54 +- libs/ui/skeleton/helm/tsconfig.lib.json | 20 +- libs/ui/skeleton/helm/tsconfig.lib.prod.json | 14 +- libs/ui/skeleton/helm/tsconfig.spec.json | 18 +- libs/ui/skeleton/skeleton.stories.ts | 18 +- libs/ui/spinner/helm/.eslintrc.json | 64 +- libs/ui/spinner/helm/jest.config.ts | 38 +- libs/ui/spinner/helm/ng-package.json | 10 +- libs/ui/spinner/helm/package.json | 20 +- libs/ui/spinner/helm/project.json | 86 +-- libs/ui/spinner/helm/src/index.ts | 4 +- .../helm/src/lib/hlm-spinner.component.ts | 108 +-- libs/ui/spinner/helm/src/test-setup.ts | 8 +- libs/ui/spinner/helm/tsconfig.json | 54 +- libs/ui/spinner/helm/tsconfig.lib.json | 20 +- libs/ui/spinner/helm/tsconfig.lib.prod.json | 14 +- libs/ui/spinner/helm/tsconfig.spec.json | 18 +- libs/ui/storybook/.storybook/main.js | 36 +- libs/ui/storybook/.storybook/preview.js | 30 +- libs/ui/storybook/.storybook/tailwind.css | 108 +-- libs/ui/storybook/.storybook/tsconfig.json | 26 +- libs/ui/storybook/postcss.config.js | 12 +- libs/ui/storybook/project.json | 98 +-- libs/ui/storybook/tailwind.config.js | 14 +- libs/ui/storybook/tsconfig.json | 54 +- libs/ui/storybook/tsconfig.lib.json | 34 +- libs/ui/switch/brain/.eslintrc.json | 64 +- libs/ui/switch/brain/jest.config.ts | 38 +- libs/ui/switch/brain/ng-package.json | 10 +- libs/ui/switch/brain/package.json | 28 +- libs/ui/switch/brain/project.json | 98 +-- libs/ui/switch/brain/src/index.ts | 8 +- .../lib/brn-switch-ng-model.component.spec.ts | 30 +- .../brain/src/lib/brn-switch-ng-model.spec.ts | 98 +-- .../src/lib/brn-switch-thumb.component.ts | 10 +- .../src/lib/brn-switch.component.spec.ts | 462 ++++++------ .../brain/src/lib/brn-switch.component.ts | 436 +++++------ libs/ui/switch/brain/src/test-setup.ts | 10 +- libs/ui/switch/brain/tsconfig.json | 54 +- libs/ui/switch/brain/tsconfig.lib.json | 20 +- libs/ui/switch/brain/tsconfig.lib.prod.json | 14 +- libs/ui/switch/brain/tsconfig.spec.json | 18 +- libs/ui/switch/helm/.eslintrc.json | 64 +- libs/ui/switch/helm/jest.config.ts | 38 +- libs/ui/switch/helm/ng-package.json | 10 +- libs/ui/switch/helm/package.json | 24 +- libs/ui/switch/helm/project.json | 98 +-- libs/ui/switch/helm/src/index.ts | 8 +- .../src/lib/hlm-switch-thumb.directive.ts | 34 +- .../helm/src/lib/hlm-switch.directive.ts | 34 +- libs/ui/switch/helm/src/test-setup.ts | 8 +- libs/ui/switch/helm/tsconfig.json | 54 +- libs/ui/switch/helm/tsconfig.lib.json | 20 +- libs/ui/switch/helm/tsconfig.lib.prod.json | 14 +- libs/ui/switch/helm/tsconfig.spec.json | 18 +- libs/ui/switch/switch.stories.ts | 34 +- libs/ui/table/brain/.eslintrc.json | 78 +- libs/ui/table/brain/jest.config.ts | 38 +- libs/ui/table/brain/ng-package.json | 10 +- libs/ui/table/brain/package.json | 24 +- libs/ui/table/brain/project.json | 98 +-- libs/ui/table/brain/src/index.ts | 24 +- .../brain/src/lib/brn-cell-def.directive.ts | 14 +- .../brain/src/lib/brn-column-def.component.ts | 112 +-- .../table/brain/src/lib/brn-column-manager.ts | 64 +- .../brain/src/lib/brn-footer-def.directive.ts | 14 +- .../brain/src/lib/brn-header-def.directive.ts | 14 +- .../brain/src/lib/brn-paginator.directive.ts | 286 ++++---- .../brain/src/lib/brn-table.component.ts | 242 +++---- libs/ui/table/brain/src/test-setup.ts | 8 +- libs/ui/table/brain/tsconfig.json | 54 +- libs/ui/table/brain/tsconfig.lib.json | 20 +- libs/ui/table/brain/tsconfig.lib.prod.json | 14 +- libs/ui/table/brain/tsconfig.spec.json | 18 +- libs/ui/table/helm/.eslintrc.json | 78 +- libs/ui/table/helm/jest.config.ts | 38 +- libs/ui/table/helm/ng-package.json | 10 +- libs/ui/table/helm/package.json | 20 +- libs/ui/table/helm/project.json | 86 +-- libs/ui/table/helm/src/index.ts | 18 +- .../table/helm/src/lib/hlm-table.component.ts | 42 +- .../table/helm/src/lib/hlm-table.directive.ts | 20 +- .../ui/table/helm/src/lib/hlm-td.component.ts | 58 +- .../ui/table/helm/src/lib/hlm-th.component.ts | 64 +- .../table/helm/src/lib/hlm-trow.component.ts | 48 +- libs/ui/table/helm/src/test-setup.ts | 8 +- libs/ui/table/helm/tsconfig.json | 54 +- libs/ui/table/helm/tsconfig.lib.json | 20 +- libs/ui/table/helm/tsconfig.lib.prod.json | 14 +- libs/ui/table/helm/tsconfig.spec.json | 18 +- libs/ui/table/table.stories.ts | 600 ++++++++-------- libs/ui/tabs/brain/.eslintrc.json | 64 +- libs/ui/tabs/brain/jest.config.ts | 36 +- libs/ui/tabs/brain/ng-package.json | 10 +- libs/ui/tabs/brain/package.json | 24 +- libs/ui/tabs/brain/project.json | 98 +-- libs/ui/tabs/brain/src/index.ts | 20 +- .../src/lib/brn-tabs-content.directive.ts | 50 +- .../brain/src/lib/brn-tabs-list.component.ts | 138 ++-- .../src/lib/brn-tabs-trigger.directive.ts | 80 +-- .../tabs/brain/src/lib/brn-tabs.component.ts | 110 +-- libs/ui/tabs/brain/src/test-setup.ts | 10 +- libs/ui/tabs/brain/tsconfig.json | 54 +- libs/ui/tabs/brain/tsconfig.lib.json | 20 +- libs/ui/tabs/brain/tsconfig.lib.prod.json | 14 +- libs/ui/tabs/brain/tsconfig.spec.json | 18 +- libs/ui/tabs/helm/.eslintrc.json | 64 +- libs/ui/tabs/helm/jest.config.ts | 36 +- libs/ui/tabs/helm/ng-package.json | 10 +- libs/ui/tabs/helm/package.json | 26 +- libs/ui/tabs/helm/project.json | 98 +-- libs/ui/tabs/helm/src/index.ts | 8 +- .../src/lib/hlm-tabs-content.directive.ts | 36 +- .../helm/src/lib/hlm-tabs-list.directive.ts | 68 +- .../src/lib/hlm-tabs-trigger.directive.ts | 36 +- libs/ui/tabs/helm/src/test-setup.ts | 8 +- libs/ui/tabs/helm/tsconfig.json | 54 +- libs/ui/tabs/helm/tsconfig.lib.json | 20 +- libs/ui/tabs/helm/tsconfig.lib.prod.json | 14 +- libs/ui/tabs/helm/tsconfig.spec.json | 18 +- libs/ui/tabs/tabs.stories.ts | 82 +-- libs/ui/toggle/brain/.eslintrc.json | 64 +- libs/ui/toggle/brain/jest.config.ts | 36 +- libs/ui/toggle/brain/ng-package.json | 10 +- libs/ui/toggle/brain/package.json | 24 +- libs/ui/toggle/brain/project.json | 98 +-- libs/ui/toggle/brain/src/index.ts | 12 +- .../src/lib/brn-toggle-group.component.ts | 557 +++++++------- .../src/lib/brn-toggle.directive.spec.ts | 166 ++--- .../brain/src/lib/brn-toggle.directive.ts | 134 ++-- .../toggle-group-can-be-nullable-provider.ts | 6 +- .../toggle/brain/src/lib/toggle-syncable.ts | 4 +- libs/ui/toggle/brain/src/test-setup.ts | 10 +- libs/ui/toggle/brain/tsconfig.json | 54 +- libs/ui/toggle/brain/tsconfig.lib.json | 20 +- libs/ui/toggle/brain/tsconfig.lib.prod.json | 14 +- libs/ui/toggle/brain/tsconfig.spec.json | 18 +- libs/ui/toggle/helm/.eslintrc.json | 64 +- libs/ui/toggle/helm/jest.config.ts | 36 +- libs/ui/toggle/helm/ng-package.json | 10 +- libs/ui/toggle/helm/package.json | 26 +- libs/ui/toggle/helm/project.json | 98 +-- libs/ui/toggle/helm/src/index.ts | 12 +- .../src/lib/hlm-toggle-group.directive.ts | 34 +- .../helm/src/lib/hlm-toggle.directive.ts | 100 +-- libs/ui/toggle/helm/src/test-setup.ts | 8 +- libs/ui/toggle/helm/tsconfig.json | 54 +- libs/ui/toggle/helm/tsconfig.lib.json | 20 +- libs/ui/toggle/helm/tsconfig.lib.prod.json | 14 +- libs/ui/toggle/helm/tsconfig.spec.json | 18 +- libs/ui/toggle/toggle.stories.ts | 276 +++---- libs/ui/typography/helm/.eslintrc.json | 64 +- libs/ui/typography/helm/jest.config.ts | 38 +- libs/ui/typography/helm/ng-package.json | 10 +- libs/ui/typography/helm/package.json | 24 +- libs/ui/typography/helm/project.json | 98 +-- .../helm/src/lib/hlm-blockquote.directive.ts | 26 +- .../helm/src/lib/hlm-code.directive.ts | 26 +- .../helm/src/lib/hlm-h1.directive.ts | 26 +- .../helm/src/lib/hlm-h2.directive.ts | 28 +- .../helm/src/lib/hlm-h3.directive.ts | 26 +- .../helm/src/lib/hlm-h4.directive.ts | 26 +- .../helm/src/lib/hlm-large.directive.ts | 26 +- .../helm/src/lib/hlm-lead.directive.ts | 26 +- .../helm/src/lib/hlm-muted.directive.ts | 26 +- .../helm/src/lib/hlm-p.directive.ts | 26 +- .../helm/src/lib/hlm-small.directive.ts | 26 +- .../helm/src/lib/hlm-ul.directive.ts | 26 +- libs/ui/typography/helm/src/test-setup.ts | 8 +- libs/ui/typography/helm/tsconfig.json | 54 +- libs/ui/typography/helm/tsconfig.lib.json | 20 +- .../ui/typography/helm/tsconfig.lib.prod.json | 14 +- libs/ui/typography/helm/tsconfig.spec.json | 18 +- libs/ui/typography/typography.stories.ts | 18 +- nx.json | 138 ++-- package.json | 350 ++++----- project.json | 22 +- release.config.js | 76 +- tools/scripts/publish.mjs | 26 +- tools/tsconfig.tools.json | 20 +- tsconfig.base.json | 140 ++-- yarn.lock | 17 +- 1071 files changed, 29932 insertions(+), 29635 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 3040733e6..3c9bfcbcf 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,66 +1,66 @@ { - "root": true, - "ignorePatterns": ["**/*"], - "plugins": ["@nx"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": { - "@nx/enforce-module-boundaries": [ - "error", - { - "enforceBuildableLibDependency": true, - "allow": [], - "depConstraints": [ - { - "sourceTag": "*", - "onlyDependOnLibsWithTags": ["*"] - } - ] - } - ] - } - }, - { - "files": ["*.ts", "*.tsx"], - "extends": ["plugin:@nx/typescript"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "extends": ["plugin:@nx/javascript"], - "rules": {} - }, - { - "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"], - "env": { - "jest": true - }, - "rules": {} - }, - { - "files": "*.json", - "parser": "jsonc-eslint-parser", - "rules": { - "@nx/dependency-checks": [ - "error", - { - "buildTargets": ["build"], - "checkMissingDependencies": true, - "checkObsoleteDependencies": true, - "checkVersionMismatches": true, - "ignoredDependencies": [ - "jest-preset-angular", - "jest-axe", - "@testing-library/jest-dom", - "rxjs", - "@spartan-ng/ui-icon-helm", - "@spartan-ng/ui-button-helm", - "@spartan-ng/ui-avatar-brain" - ] - } - ] - } - } - ] + "root": true, + "ignorePatterns": ["**/*"], + "plugins": ["@nx"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@nx/enforce-module-boundaries": [ + "error", + { + "enforceBuildableLibDependency": true, + "allow": [], + "depConstraints": [ + { + "sourceTag": "*", + "onlyDependOnLibsWithTags": ["*"] + } + ] + } + ] + } + }, + { + "files": ["*.ts", "*.tsx"], + "extends": ["plugin:@nx/typescript"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "extends": ["plugin:@nx/javascript"], + "rules": {} + }, + { + "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"], + "env": { + "jest": true + }, + "rules": {} + }, + { + "files": "*.json", + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/dependency-checks": [ + "error", + { + "buildTargets": ["build"], + "checkMissingDependencies": true, + "checkObsoleteDependencies": true, + "checkVersionMismatches": true, + "ignoredDependencies": [ + "jest-preset-angular", + "jest-axe", + "@testing-library/jest-dom", + "rxjs", + "@spartan-ng/ui-icon-helm", + "@spartan-ng/ui-button-helm", + "@spartan-ng/ui-avatar-brain" + ] + } + ] + } + } + ] } diff --git a/.lintstagedrc b/.lintstagedrc index 6bfb64324..1ffa907d9 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,3 +1,3 @@ { - "*.{js,ts,css,scss,html,json,md,yml}": "prettier --write" + "*.{js,ts,css,scss,html,json,md,yml}": "prettier --write" } diff --git a/.prettierrc b/.prettierrc index 8d3dfb047..afba5b6bc 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,8 @@ { - "printWidth": 120, - "singleQuote": true, - "useTabs": false, - "tabWidth": 2, - "semi": true, - "bracketSpacing": true + "printWidth": 120, + "singleQuote": true, + "useTabs": true, + "bracketSpacing": true, + "htmlWhitespaceSensitivity": "ignore", + "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"] } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 64553b175..9b64338e9 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,8 +1,8 @@ { - "recommendations": [ - "nrwl.angular-console", - "esbenp.prettier-vscode", - "firsttris.vscode-jest-runner", - "dbaeumer.vscode-eslint" - ] + "recommendations": [ + "nrwl.angular-console", + "esbenp.prettier-vscode", + "firsttris.vscode-jest-runner", + "dbaeumer.vscode-eslint" + ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 1471fb96f..18d2899a9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "eslint.validate": ["json"] + "eslint.validate": ["json"] } diff --git a/apps/app/.eslintrc.json b/apps/app/.eslintrc.json index 77092012c..fa4ee2019 100644 --- a/apps/app/.eslintrc.json +++ b/apps/app/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "spartan", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "spartan", - "style": "kebab-case" - } - ] - } - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "spartan", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "spartan", + "style": "kebab-case" + } + ] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/apps/app/index.html b/apps/app/index.html index adb8d95f6..0ccdfa56f 100644 --- a/apps/app/index.html +++ b/apps/app/index.html @@ -1,45 +1,45 @@ - + - - - spartan - Cutting-edge tools powering Angular full-stack development - - - - - - - - - - - + + + spartan - Cutting-edge tools powering Angular full-stack development + + + + + + + + + + + diff --git a/apps/app/postcss.config.js b/apps/app/postcss.config.js index cbdd9c22c..0491b6b27 100644 --- a/apps/app/postcss.config.js +++ b/apps/app/postcss.config.js @@ -1,10 +1,10 @@ const { join } = require('path'); module.exports = { - plugins: { - tailwindcss: { - config: join(__dirname, 'tailwind.config.js'), - }, - autoprefixer: {}, - }, + plugins: { + tailwindcss: { + config: join(__dirname, 'tailwind.config.js'), + }, + autoprefixer: {}, + }, }; diff --git a/apps/app/project.json b/apps/app/project.json index ffbe2ed34..bc59280f1 100644 --- a/apps/app/project.json +++ b/apps/app/project.json @@ -1,76 +1,76 @@ { - "name": "app", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/app/src", - "targets": { - "build": { - "dependsOn": ["^build"], - "executor": "@nx/vite:build", - "outputs": [ - "{options.outputPath}", - "{workspaceRoot}/dist/apps/app/.nitro", - "{workspaceRoot}/dist/apps/app/ssr", - "{workspaceRoot}/dist/apps/app/analog" - ], - "options": { - "configFile": "apps/app/vite.config.ts", - "outputPath": "dist/apps/app/client" - }, - "defaultConfiguration": "production", - "configurations": { - "development": { - "mode": "development" - }, - "production": { - "sourcemap": false, - "mode": "production" - } - } - }, - "vercel-build": { - "executor": "nx:run-commands", - "options": { - "cwd": "", - "command": "yarn prisma generate" - }, - "dependsOn": ["build"] - }, - "serve": { - "executor": "@nx/vite:dev-server", - "defaultConfiguration": "development", - "options": { - "buildTarget": "app:build", - "port": 4200 - }, - "configurations": { - "development": { - "buildTarget": "app:build:development", - "hmr": true - }, - "production": { - "buildTarget": "app:build:production" - } - } - }, - "extract-i18n": { - "executor": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "app:build" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/app/**/*.ts", "apps/app/**/*.html"] - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["{projectRoot}/coverage"] - } - }, - "tags": [], - "implicitDependencies": [] + "name": "app", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/app/src", + "targets": { + "build": { + "dependsOn": ["^build"], + "executor": "@nx/vite:build", + "outputs": [ + "{options.outputPath}", + "{workspaceRoot}/dist/apps/app/.nitro", + "{workspaceRoot}/dist/apps/app/ssr", + "{workspaceRoot}/dist/apps/app/analog" + ], + "options": { + "configFile": "apps/app/vite.config.ts", + "outputPath": "dist/apps/app/client" + }, + "defaultConfiguration": "production", + "configurations": { + "development": { + "mode": "development" + }, + "production": { + "sourcemap": false, + "mode": "production" + } + } + }, + "vercel-build": { + "executor": "nx:run-commands", + "options": { + "cwd": "", + "command": "yarn prisma generate" + }, + "dependsOn": ["build"] + }, + "serve": { + "executor": "@nx/vite:dev-server", + "defaultConfiguration": "development", + "options": { + "buildTarget": "app:build", + "port": 4200 + }, + "configurations": { + "development": { + "buildTarget": "app:build:development", + "hmr": true + }, + "production": { + "buildTarget": "app:build:production" + } + } + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "app:build" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/app/**/*.ts", "apps/app/**/*.html"] + } + }, + "test": { + "executor": "@nx/vite:test", + "outputs": ["{projectRoot}/coverage"] + } + }, + "tags": [], + "implicitDependencies": [] } diff --git a/apps/app/src/app.config.server.ts b/apps/app/src/app.config.server.ts index 7e1ac121d..c41a55193 100644 --- a/apps/app/src/app.config.server.ts +++ b/apps/app/src/app.config.server.ts @@ -1,10 +1,10 @@ import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'; +import { provideClientHydration } from '@angular/platform-browser'; import { provideServerRendering } from '@angular/platform-server'; import { appConfig } from './app.config'; -import { provideClientHydration } from '@angular/platform-browser'; const serverConfig: ApplicationConfig = { - providers: [provideServerRendering(), provideClientHydration()], + providers: [provideServerRendering(), provideClientHydration()], }; export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/apps/app/src/app.config.ts b/apps/app/src/app.config.ts index 7b5017f0c..112117cbd 100644 --- a/apps/app/src/app.config.ts +++ b/apps/app/src/app.config.ts @@ -1,17 +1,17 @@ +import { provideFileRouter } from '@analogjs/router'; import { ApplicationConfig } from '@angular/core'; import { provideClientHydration } from '@angular/platform-browser'; -import { provideFileRouter } from '@analogjs/router'; -import { provideTrpcClient } from './trpc-client'; import { PreloadAllModules, withInMemoryScrolling, withNavigationErrorHandler, withPreloading } from '@angular/router'; +import { provideTrpcClient } from './trpc-client'; export const appConfig: ApplicationConfig = { - providers: [ - provideFileRouter( - withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), - withNavigationErrorHandler(console.log), - withPreloading(PreloadAllModules) - ), - provideClientHydration(), - provideTrpcClient(), - ], + providers: [ + provideFileRouter( + withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), + withNavigationErrorHandler(console.log), + withPreloading(PreloadAllModules), + ), + provideClientHydration(), + provideTrpcClient(), + ], }; diff --git a/apps/app/src/app/app.component.spec.ts b/apps/app/src/app/app.component.spec.ts index f41b352bb..f2c2ae3b0 100644 --- a/apps/app/src/app/app.component.spec.ts +++ b/apps/app/src/app/app.component.spec.ts @@ -3,15 +3,15 @@ import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [RouterTestingModule, AppComponent], - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RouterTestingModule, AppComponent], + }).compileComponents(); + }); - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); }); diff --git a/apps/app/src/app/app.component.ts b/apps/app/src/app/app.component.ts index 0b7a8693f..af8dc0cbb 100644 --- a/apps/app/src/app/app.component.ts +++ b/apps/app/src/app/app.component.ts @@ -1,21 +1,21 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { HeaderComponent } from './shared/header/header.component'; import { FooterComponent } from './shared/footer/footer.component'; +import { HeaderComponent } from './shared/header/header.component'; @Component({ - selector: 'spartan-root', - standalone: true, - imports: [RouterOutlet, HeaderComponent, FooterComponent], - host: { - class: 'text-foreground block antialiased', - }, - template: ` - -
- -
- - `, + selector: 'spartan-root', + standalone: true, + imports: [RouterOutlet, HeaderComponent, FooterComponent], + host: { + class: 'text-foreground block antialiased', + }, + template: ` + +
+ +
+ + `, }) export class AppComponent {} diff --git a/apps/app/src/app/pages/(components)/components.page.ts b/apps/app/src/app/pages/(components)/components.page.ts index f10fabebe..a422a3d1b 100644 --- a/apps/app/src/app/pages/(components)/components.page.ts +++ b/apps/app/src/app/pages/(components)/components.page.ts @@ -1,55 +1,55 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { PageComponent } from '~/app/shared/layout/page.component'; +import { provideIcons } from '@ng-icons/core'; +import { radixRocket } from '@ng-icons/radix-icons'; import { - HlmAlertDescriptionDirective, - HlmAlertDirective, - HlmAlertIconDirective, - HlmAlertTitleDirective, + HlmAlertDescriptionDirective, + HlmAlertDirective, + HlmAlertIconDirective, + HlmAlertTitleDirective, } from '@spartan-ng/ui-alert-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixRocket } from '@ng-icons/radix-icons'; +import { PageComponent } from '~/app/shared/layout/page.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - meta: metaWith( - 'spartan/ui - Components', - 'spartan/ui provides unstyled components that are accessible by default. It also gives you beautiful shadcn-like styling options.' - ), - data: { - breadcrumb: 'Components', - }, - title: 'spartan/ui - Components', + meta: metaWith( + 'spartan/ui - Components', + 'spartan/ui provides unstyled components that are accessible by default. It also gives you beautiful shadcn-like styling options.', + ), + data: { + breadcrumb: 'Components', + }, + title: 'spartan/ui - Components', }; @Component({ - selector: 'spartan-components', - standalone: true, - imports: [ - PageComponent, - HlmAlertDirective, - HlmAlertTitleDirective, - HlmAlertDescriptionDirective, - HlmIconComponent, - HlmAlertIconDirective, - ], - providers: [provideIcons({ radixRocket })], - template: ` -
- -

Components are in alpha

-

- Try them out! We'd love to hear your feedback! Expect breaking changes! - Become the one making those changes on GitHub! -

-
- - `, + selector: 'spartan-components', + standalone: true, + imports: [ + PageComponent, + HlmAlertDirective, + HlmAlertTitleDirective, + HlmAlertDescriptionDirective, + HlmIconComponent, + HlmAlertIconDirective, + ], + providers: [provideIcons({ radixRocket })], + template: ` +
+ +

Components are in alpha

+

+ Try them out! We'd love to hear your feedback! Expect breaking changes! + + Become the one making those changes on GitHub! + +

+
+ + `, }) export default class ComponentsPageComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(accordion)/accordion.page.ts b/apps/app/src/app/pages/(components)/components/(accordion)/accordion.page.ts index 953fcdd3a..a5e653615 100644 --- a/apps/app/src/app/pages/(components)/components/(accordion)/accordion.page.ts +++ b/apps/app/src/app/pages/(components)/components/(accordion)/accordion.page.ts @@ -1,87 +1,87 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { AccordionPreviewComponent, codeImports, codeSkeleton, codeString } from './accordion.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Accordion' }, - meta: metaWith( - 'spartan/ui - Accordion', - 'A vertically stacked set of interactive headings that each reveal a section of content.' - ), - title: 'spartan/ui - Accordion', + data: { breadcrumb: 'Accordion' }, + meta: metaWith( + 'spartan/ui - Accordion', + 'A vertically stacked set of interactive headings that each reveal a section of content.', + ), + title: 'spartan/ui - Accordion', }; @Component({ - selector: 'spartan-accordion', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - AccordionPreviewComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-accordion', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + AccordionPreviewComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class AccordionPageComponent { - code = codeString; - imports = codeImports; - skeleton = codeSkeleton; - protected readonly codeSkeleton = codeSkeleton; + code = codeString; + imports = codeImports; + skeleton = codeSkeleton; + protected readonly codeSkeleton = codeSkeleton; } diff --git a/apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts b/apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts index 83533df40..dd5fc35f0 100644 --- a/apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts @@ -1,63 +1,63 @@ import { Component } from '@angular/core'; import { - BrnAccordionComponent, - BrnAccordionContentComponent, - BrnAccordionItemComponent, - BrnAccordionTriggerComponent, + BrnAccordionComponent, + BrnAccordionContentComponent, + BrnAccordionItemComponent, + BrnAccordionTriggerComponent, } from '@spartan-ng/ui-accordion-brain'; import { - HlmAccordionContentDirective, - HlmAccordionDirective, - HlmAccordionIconComponent, - HlmAccordionItemDirective, - HlmAccordionTriggerDirective, + HlmAccordionContentDirective, + HlmAccordionDirective, + HlmAccordionIconComponent, + HlmAccordionItemDirective, + HlmAccordionTriggerDirective, } from '@spartan-ng/ui-accordion-helm'; @Component({ - selector: 'spartan-accordion-preview', - standalone: true, - imports: [ - BrnAccordionComponent, - BrnAccordionContentComponent, - BrnAccordionItemComponent, - BrnAccordionTriggerComponent, - HlmAccordionDirective, - HlmAccordionItemDirective, - HlmAccordionTriggerDirective, - HlmAccordionContentDirective, - HlmAccordionIconComponent, - ], - template: ` - - - - Is it accessible? - - - Yes. It adheres to the WAI-ARIA design pattern. - + selector: 'spartan-accordion-preview', + standalone: true, + imports: [ + BrnAccordionComponent, + BrnAccordionContentComponent, + BrnAccordionItemComponent, + BrnAccordionTriggerComponent, + HlmAccordionDirective, + HlmAccordionItemDirective, + HlmAccordionTriggerDirective, + HlmAccordionContentDirective, + HlmAccordionIconComponent, + ], + template: ` + + + + Is it accessible? + + + Yes. It adheres to the WAI-ARIA design pattern. + - - - Is it styled - - - - Yes. It comes with default styles that match the other components' aesthetics. - - + + + Is it styled + + + + Yes. It comes with default styles that match the other components' aesthetics. + + - - - Is it animated? - - - - Yes. It's animated by default, but you can disable it if you prefer. - - - - `, + + + Is it animated? + + + + Yes. It's animated by default, but you can disable it if you prefer. + + + + `, }) export class AccordionPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(alert)/alert--destructive.example.ts b/apps/app/src/app/pages/(components)/components/(alert)/alert--destructive.example.ts index eb2d54a11..a55636125 100644 --- a/apps/app/src/app/pages/(components)/components/(alert)/alert--destructive.example.ts +++ b/apps/app/src/app/pages/(components)/components/(alert)/alert--destructive.example.ts @@ -1,32 +1,32 @@ import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixExclamationTriangle } from '@ng-icons/radix-icons'; import { - HlmAlertDescriptionDirective, - HlmAlertDirective, - HlmAlertIconDirective, - HlmAlertTitleDirective, + HlmAlertDescriptionDirective, + HlmAlertDirective, + HlmAlertIconDirective, + HlmAlertTitleDirective, } from '@spartan-ng/ui-alert-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixExclamationTriangle } from '@ng-icons/radix-icons'; @Component({ - selector: 'spartan-alert-destructive', - standalone: true, - imports: [ - HlmAlertDirective, - HlmAlertDescriptionDirective, - HlmAlertIconDirective, - HlmAlertTitleDirective, - HlmIconComponent, - ], - providers: [provideIcons({ radixExclamationTriangle })], - template: ` -
- -

Unexpected Error

-

Your session has expired. Please log in again.

-
- `, + selector: 'spartan-alert-destructive', + standalone: true, + imports: [ + HlmAlertDirective, + HlmAlertDescriptionDirective, + HlmAlertIconDirective, + HlmAlertTitleDirective, + HlmIconComponent, + ], + providers: [provideIcons({ radixExclamationTriangle })], + template: ` +
+ +

Unexpected Error

+

Your session has expired. Please log in again.

+
+ `, }) export class AlertDestructiveComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(alert)/alert.page.ts b/apps/app/src/app/pages/(components)/components/(alert)/alert.page.ts index 3c6811ff3..da55c2e3f 100644 --- a/apps/app/src/app/pages/(components)/components/(alert)/alert.page.ts +++ b/apps/app/src/app/pages/(components)/components/(alert)/alert.page.ts @@ -1,105 +1,105 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { + AlertDestructiveComponent, + destructiveCode, +} from '~/app/pages/(components)/components/(alert)/alert--destructive.example'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { AlertPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './alert.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; -import { - AlertDestructiveComponent, - destructiveCode, -} from '~/app/pages/(components)/components/(alert)/alert--destructive.example'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Alert' }, - meta: metaWith('spartan/ui - Alert', 'Displays a callout for user attention.'), - title: 'spartan/ui - Alert', + data: { breadcrumb: 'Alert' }, + meta: metaWith('spartan/ui - Alert', 'Displays a callout for user attention.'), + title: 'spartan/ui - Alert', }; @Component({ - selector: 'spartan-alert', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - AlertPreviewComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - AlertDestructiveComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-alert', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + AlertPreviewComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + AlertDestructiveComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

Destructive

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

Destructive

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class AlertPageComponent { - readonly defaultCode = defaultCode; - readonly defaultSkeleton = defaultSkeleton; - readonly defaultImports = defaultImports; + readonly defaultCode = defaultCode; + readonly defaultSkeleton = defaultSkeleton; + readonly defaultImports = defaultImports; - readonly destructiveCode = destructiveCode; + readonly destructiveCode = destructiveCode; } diff --git a/apps/app/src/app/pages/(components)/components/(alert)/alert.preview.ts b/apps/app/src/app/pages/(components)/components/(alert)/alert.preview.ts index d1f34e883..1523d7fdc 100644 --- a/apps/app/src/app/pages/(components)/components/(alert)/alert.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(alert)/alert.preview.ts @@ -1,35 +1,36 @@ import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixCube } from '@ng-icons/radix-icons'; import { - HlmAlertDescriptionDirective, - HlmAlertDirective, - HlmAlertIconDirective, - HlmAlertTitleDirective, + HlmAlertDescriptionDirective, + HlmAlertDirective, + HlmAlertIconDirective, + HlmAlertTitleDirective, } from '@spartan-ng/ui-alert-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixCube } from '@ng-icons/radix-icons'; @Component({ - selector: 'spartan-alert-preview', - standalone: true, - imports: [ - HlmAlertDirective, - HlmAlertDescriptionDirective, - HlmAlertIconDirective, - HlmAlertTitleDirective, - HlmIconComponent, - ], - providers: [provideIcons({ radixCube })], - template: ` -
- -

Introducing spartan/ui!

-

- spartan/ui is made up of unstyled UI providers, the spartan/ui/brain.
- On top we add spartan/ui/helm(et) with shadcn-like styles. -

-
- `, + selector: 'spartan-alert-preview', + standalone: true, + imports: [ + HlmAlertDirective, + HlmAlertDescriptionDirective, + HlmAlertIconDirective, + HlmAlertTitleDirective, + HlmIconComponent, + ], + providers: [provideIcons({ radixCube })], + template: ` +
+ +

Introducing spartan/ui!

+

+ spartan/ui is made up of unstyled UI providers, the spartan/ui/brain. +
+ On top we add spartan/ui/helm(et) with shadcn-like styles. +

+
+ `, }) export class AlertPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.page.ts b/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.page.ts index 7337017c5..f11324fab 100644 --- a/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.page.ts +++ b/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.page.ts @@ -1,86 +1,86 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { AlertDialogPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './alert-dialog.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Alert Dialog' }, - meta: metaWith( - 'spartan/ui - Alert Dialog', - 'A modal dialog that interrupts the user with important content and expects a response.' - ), - title: 'spartan/ui - Alert Dialog', + data: { breadcrumb: 'Alert Dialog' }, + meta: metaWith( + 'spartan/ui - Alert Dialog', + 'A modal dialog that interrupts the user with important content and expects a response.', + ), + title: 'spartan/ui - Alert Dialog', }; @Component({ - selector: 'spartan-alert-dialog', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - AlertDialogPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-alert-dialog', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + AlertDialogPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class AlertPageComponent { - readonly defaultCode = defaultCode; - readonly defaultSkeleton = defaultSkeleton; - readonly defaultImports = defaultImports; + readonly defaultCode = defaultCode; + readonly defaultSkeleton = defaultSkeleton; + readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.preview.ts b/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.preview.ts index 74fe22aa8..783bc52e0 100644 --- a/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(alert-dialog)/alert-dialog.preview.ts @@ -1,67 +1,67 @@ import { Component } from '@angular/core'; import { - BrnAlertDialogCloseDirective, - BrnAlertDialogComponent, - BrnAlertDialogContentDirective, - BrnAlertDialogDescriptionDirective, - BrnAlertDialogOverlayComponent, - BrnAlertDialogTitleDirective, - BrnAlertDialogTriggerDirective, + BrnAlertDialogCloseDirective, + BrnAlertDialogComponent, + BrnAlertDialogContentDirective, + BrnAlertDialogDescriptionDirective, + BrnAlertDialogOverlayComponent, + BrnAlertDialogTitleDirective, + BrnAlertDialogTriggerDirective, } from '@spartan-ng/ui-alertdialog-brain'; import { - HlmAlertDialogActionButtonDirective, - HlmAlertDialogCancelButtonDirective, - HlmAlertDialogContentDirective, - HlmAlertDialogDescriptionDirective, - HlmAlertDialogFooterComponent, - HlmAlertDialogHeaderComponent, - HlmAlertDialogOverlayDirective, - HlmAlertDialogTitleDirective, + HlmAlertDialogActionButtonDirective, + HlmAlertDialogCancelButtonDirective, + HlmAlertDialogContentDirective, + HlmAlertDialogDescriptionDirective, + HlmAlertDialogFooterComponent, + HlmAlertDialogHeaderComponent, + HlmAlertDialogOverlayDirective, + HlmAlertDialogTitleDirective, } from '@spartan-ng/ui-alertdialog-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-alert-dialog-preview', - standalone: true, - imports: [ - BrnAlertDialogComponent, - BrnAlertDialogOverlayComponent, - BrnAlertDialogTriggerDirective, - BrnAlertDialogContentDirective, - BrnAlertDialogCloseDirective, - BrnAlertDialogTitleDirective, - BrnAlertDialogDescriptionDirective, + selector: 'spartan-alert-dialog-preview', + standalone: true, + imports: [ + BrnAlertDialogComponent, + BrnAlertDialogOverlayComponent, + BrnAlertDialogTriggerDirective, + BrnAlertDialogContentDirective, + BrnAlertDialogCloseDirective, + BrnAlertDialogTitleDirective, + BrnAlertDialogDescriptionDirective, - HlmAlertDialogOverlayDirective, - HlmAlertDialogContentDirective, - HlmAlertDialogHeaderComponent, - HlmAlertDialogFooterComponent, - HlmAlertDialogTitleDirective, - HlmAlertDialogDescriptionDirective, - HlmAlertDialogCancelButtonDirective, - HlmAlertDialogActionButtonDirective, + HlmAlertDialogOverlayDirective, + HlmAlertDialogContentDirective, + HlmAlertDialogHeaderComponent, + HlmAlertDialogFooterComponent, + HlmAlertDialogTitleDirective, + HlmAlertDialogDescriptionDirective, + HlmAlertDialogCancelButtonDirective, + HlmAlertDialogActionButtonDirective, - HlmButtonDirective, - ], - template: ` - - - -
- -

Are you absolutely sure?

-

- This action cannot be undone. This will permanently delete your account and remove your data from our - servers. -

- - - - - -
- - `, + HlmButtonDirective, + ], + template: ` + + + +
+ +

Are you absolutely sure?

+

+ This action cannot be undone. This will permanently delete your account and remove your data from our + servers. +

+ + + + + +
+ + `, }) export class AlertDialogPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.page.ts b/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.page.ts index 8903fd8d1..ae6b1f81a 100644 --- a/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.page.ts +++ b/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.page.ts @@ -1,80 +1,80 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { AspectRatioPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './aspect-ratio.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Aspect Ratio' }, - meta: metaWith('spartan/ui - Aspect Ratio', 'Displays content within a desired ratio.'), - title: 'spartan/ui - Aspect Ratio', + data: { breadcrumb: 'Aspect Ratio' }, + meta: metaWith('spartan/ui - Aspect Ratio', 'Displays content within a desired ratio.'), + title: 'spartan/ui - Aspect Ratio', }; @Component({ - selector: 'spartan-aspect-ratio', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - AspectRatioPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-aspect-ratio', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + AspectRatioPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class AlertPageComponent { - readonly defaultCode = defaultCode; - readonly defaultSkeleton = defaultSkeleton; - readonly defaultImports = defaultImports; + readonly defaultCode = defaultCode; + readonly defaultSkeleton = defaultSkeleton; + readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.preview.ts b/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.preview.ts index 877a419e6..f125d4a32 100644 --- a/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(aspect-ratio)/aspect-ratio.preview.ts @@ -2,16 +2,16 @@ import { Component } from '@angular/core'; import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm'; @Component({ - selector: 'spartan-aspect-ratio-preview', - standalone: true, - imports: [HlmAspectRatioDirective], - template: ` -
-
- Mountain views -
-
- `, + selector: 'spartan-aspect-ratio-preview', + standalone: true, + imports: [HlmAspectRatioDirective], + template: ` +
+
+ Mountain views +
+
+ `, }) export class AspectRatioPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(avatar)/avatar.page.ts b/apps/app/src/app/pages/(components)/components/(avatar)/avatar.page.ts index e21e34e22..45bbfaf8e 100644 --- a/apps/app/src/app/pages/(components)/components/(avatar)/avatar.page.ts +++ b/apps/app/src/app/pages/(components)/components/(avatar)/avatar.page.ts @@ -1,80 +1,80 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { AvatarPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './avatar.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Avatar' }, - meta: metaWith('spartan/ui - Avatar', 'An image element with a fallback for representing the user.'), - title: 'spartan/ui - Avatar', + data: { breadcrumb: 'Avatar' }, + meta: metaWith('spartan/ui - Avatar', 'An image element with a fallback for representing the user.'), + title: 'spartan/ui - Avatar', }; @Component({ - selector: 'spartan-avatar', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - AvatarPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-avatar', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + AvatarPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class AvatarPageComponent { - readonly defaultCode = defaultCode; - readonly defaultSkeleton = defaultSkeleton; - readonly defaultImports = defaultImports; + readonly defaultCode = defaultCode; + readonly defaultSkeleton = defaultSkeleton; + readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(avatar)/avatar.preview.ts b/apps/app/src/app/pages/(components)/components/(avatar)/avatar.preview.ts index 360089071..010511a1b 100644 --- a/apps/app/src/app/pages/(components)/components/(avatar)/avatar.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(avatar)/avatar.preview.ts @@ -2,15 +2,15 @@ import { Component } from '@angular/core'; import { HlmAvatarComponent, HlmAvatarFallbackDirective, HlmAvatarImageDirective } from '@spartan-ng/ui-avatar-helm'; @Component({ - selector: 'spartan-avatar-preview', - standalone: true, - imports: [HlmAvatarImageDirective, HlmAvatarComponent, HlmAvatarFallbackDirective], - template: ` - - spartan logo. Resembling a spartanic shield - RG - - `, + selector: 'spartan-avatar-preview', + standalone: true, + imports: [HlmAvatarImageDirective, HlmAvatarComponent, HlmAvatarFallbackDirective], + template: ` + + spartan logo. Resembling a spartanic shield + RG + + `, }) export class AvatarPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(badge)/badge--destructive.example.ts b/apps/app/src/app/pages/(components)/components/(badge)/badge--destructive.example.ts index 2cab048fd..586810876 100644 --- a/apps/app/src/app/pages/(components)/components/(badge)/badge--destructive.example.ts +++ b/apps/app/src/app/pages/(components)/components/(badge)/badge--destructive.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; @Component({ - selector: 'spartan-badge-destructive', - standalone: true, - imports: [HlmBadgeDirective], - template: `
Destructive
`, + selector: 'spartan-badge-destructive', + standalone: true, + imports: [HlmBadgeDirective], + template: ` +
Destructive
+ `, }) export class BadgeDestructiveComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(badge)/badge--outline.example.ts b/apps/app/src/app/pages/(components)/components/(badge)/badge--outline.example.ts index a61da62d0..c7470d769 100644 --- a/apps/app/src/app/pages/(components)/components/(badge)/badge--outline.example.ts +++ b/apps/app/src/app/pages/(components)/components/(badge)/badge--outline.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; @Component({ - selector: 'spartan-badge-outline', - standalone: true, - imports: [HlmBadgeDirective], - template: `
Outline
`, + selector: 'spartan-badge-outline', + standalone: true, + imports: [HlmBadgeDirective], + template: ` +
Outline
+ `, }) export class BadgeOutlineExampleComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(badge)/badge--secondary.example.ts b/apps/app/src/app/pages/(components)/components/(badge)/badge--secondary.example.ts index e7a5464e7..e8373374e 100644 --- a/apps/app/src/app/pages/(components)/components/(badge)/badge--secondary.example.ts +++ b/apps/app/src/app/pages/(components)/components/(badge)/badge--secondary.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; @Component({ - selector: 'spartan-badge-secondary', - standalone: true, - imports: [HlmBadgeDirective], - template: `
Secondary
`, + selector: 'spartan-badge-secondary', + standalone: true, + imports: [HlmBadgeDirective], + template: ` +
Secondary
+ `, }) export class BadgeSecondaryExampleComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(badge)/badge.page.ts b/apps/app/src/app/pages/(components)/components/(badge)/badge.page.ts index e0e7af273..bc19312d9 100644 --- a/apps/app/src/app/pages/(components)/components/(badge)/badge.page.ts +++ b/apps/app/src/app/pages/(components)/components/(badge)/badge.page.ts @@ -1,122 +1,122 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; -import { BadgePreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './badge.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { BadgeDestructiveComponent, destructiveCode } from './badge--destructive.example'; import { BadgeOutlineExampleComponent, outlineCode } from './badge--outline.example'; import { BadgeSecondaryExampleComponent, secondaryCode } from './badge--secondary.example'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { BadgePreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './badge.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Badge' }, - meta: metaWith('spartan/ui - Badge', 'Makes a component look like a badge.'), - title: 'spartan/ui - Badge', + data: { breadcrumb: 'Badge' }, + meta: metaWith('spartan/ui - Badge', 'Makes a component look like a badge.'), + title: 'spartan/ui - Badge', }; @Component({ - selector: 'spartan-badge', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - BadgePreviewComponent, - BadgeDestructiveComponent, - BadgeOutlineExampleComponent, - BadgeSecondaryExampleComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-badge', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + BadgePreviewComponent, + BadgeDestructiveComponent, + BadgeOutlineExampleComponent, + BadgeSecondaryExampleComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

Secondary

- -
- -
- - -

Outline

- -
- -
- - -

Destructive

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

Secondary

+ +
+ +
+ + +

Outline

+ +
+ +
+ + +

Destructive

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class BadgePageComponent { - readonly defaultCode = defaultCode; - readonly defaultSkeleton = defaultSkeleton; - readonly defaultImports = defaultImports; + readonly defaultCode = defaultCode; + readonly defaultSkeleton = defaultSkeleton; + readonly defaultImports = defaultImports; - readonly secondaryCode = secondaryCode; - readonly outlineCode = outlineCode; - readonly destructiveCode = destructiveCode; + readonly secondaryCode = secondaryCode; + readonly outlineCode = outlineCode; + readonly destructiveCode = destructiveCode; } diff --git a/apps/app/src/app/pages/(components)/components/(badge)/badge.preview.ts b/apps/app/src/app/pages/(components)/components/(badge)/badge.preview.ts index f9d7a1c29..f456caf93 100644 --- a/apps/app/src/app/pages/(components)/components/(badge)/badge.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(badge)/badge.preview.ts @@ -2,12 +2,12 @@ import { Component } from '@angular/core'; import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; @Component({ - selector: 'spartan-badge-preview', - standalone: true, - imports: [HlmBadgeDirective], - template: ` - This is madness. This is spartan. - `, + selector: 'spartan-badge-preview', + standalone: true, + imports: [HlmBadgeDirective], + template: ` + This is madness. This is spartan. + `, }) export class BadgePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--anchor.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--anchor.example.ts index 31ebfd668..a7fa2b77a 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--anchor.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--anchor.example.ts @@ -2,12 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-anchor', - standalone: true, - imports: [HlmButtonDirective], - template: ` - Star on GitHub - `, + selector: 'spartan-button-anchor', + standalone: true, + imports: [HlmButtonDirective], + template: ` + Star on GitHub + `, }) export class ButtonAnchorComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--destructive.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--destructive.example.ts index 70a0e59ba..8ca0695bc 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--destructive.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--destructive.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-destructive', - standalone: true, - imports: [HlmButtonDirective], - template: ` `, + selector: 'spartan-button-destructive', + standalone: true, + imports: [HlmButtonDirective], + template: ` + + `, }) export class ButtonDestructiveComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--ghost.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--ghost.example.ts index d55450971..bb32aa397 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--ghost.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--ghost.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-ghost', - standalone: true, - imports: [HlmButtonDirective], - template: ` `, + selector: 'spartan-button-ghost', + standalone: true, + imports: [HlmButtonDirective], + template: ` + + `, }) export class ButtonGhostComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--icon.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--icon.example.ts index 907894649..db49d4a94 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--icon.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--icon.example.ts @@ -1,16 +1,18 @@ import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixChevronRight } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; @Component({ - selector: 'spartan-button-icon', - standalone: true, - imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent], - providers: [provideIcons({ radixChevronRight })], - template: ` `, + selector: 'spartan-button-icon', + standalone: true, + imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent], + providers: [provideIcons({ radixChevronRight })], + template: ` + + `, }) export class ButtonIconComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--link.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--link.example.ts index 99e740842..fc8c5c439 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--link.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--link.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-link', - standalone: true, - imports: [HlmButtonDirective], - template: ` `, + selector: 'spartan-button-link', + standalone: true, + imports: [HlmButtonDirective], + template: ` + + `, }) export class ButtonLinkComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--loading.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--loading.example.ts index f8145c14d..f1ce60e53 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--loading.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--loading.example.ts @@ -1,18 +1,21 @@ import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixSymbol } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; @Component({ - selector: 'spartan-button-loading', - standalone: true, - imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent], - providers: [provideIcons({ radixSymbol })], - template: ` - - `, + selector: 'spartan-button-loading', + standalone: true, + imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent], + providers: [provideIcons({ radixSymbol })], + template: ` + + `, }) export class ButtonLoadingComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--outline.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--outline.example.ts index 54d9484ba..0fb7e7593 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--outline.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--outline.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-outline', - standalone: true, - imports: [HlmButtonDirective], - template: ` `, + selector: 'spartan-button-outline', + standalone: true, + imports: [HlmButtonDirective], + template: ` + + `, }) export class ButtonOutlineComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--secondary.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--secondary.example.ts index ff2720f1a..b887618d4 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--secondary.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--secondary.example.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-secondary', - standalone: true, - imports: [HlmButtonDirective], - template: ` `, + selector: 'spartan-button-secondary', + standalone: true, + imports: [HlmButtonDirective], + template: ` + + `, }) export class ButtonSecondaryComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button--with-icon.example.ts b/apps/app/src/app/pages/(components)/components/(button)/button--with-icon.example.ts index 729e36d71..35ba2e309 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button--with-icon.example.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button--with-icon.example.ts @@ -1,21 +1,21 @@ import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixEnvelopeClosed } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; @Component({ - selector: 'spartan-button-with-icon', - standalone: true, - imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent], - providers: [provideIcons({ radixEnvelopeClosed })], - template: ` - - `, + selector: 'spartan-button-with-icon', + standalone: true, + imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent], + providers: [provideIcons({ radixEnvelopeClosed })], + template: ` + + `, }) export class ButtonWithIconComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(button)/button.page.ts b/apps/app/src/app/pages/(components)/components/(button)/button.page.ts index 1b3b5ae69..fa97e0668 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button.page.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button.page.ts @@ -1,188 +1,188 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { ButtonAnchorComponent, anchorCode } from '~/app/pages/(components)/components/(button)/button--anchor.example'; +import { + ButtonLoadingComponent, + loadingCode, +} from '~/app/pages/(components)/components/(button)/button--loading.example'; +import { + ButtonWithIconComponent, + withIconCode, +} from '~/app/pages/(components)/components/(button)/button--with-icon.example'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; -import { ButtonPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './button.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { ButtonDestructiveComponent, destructiveCode } from './button--destructive.example'; -import { ButtonOutlineComponent, outlineCode } from './button--outline.example'; -import { ButtonSecondaryComponent, secondaryCode } from './button--secondary.example'; import { ButtonGhostComponent, ghostCode } from './button--ghost.example'; -import { ButtonLinkComponent, linkCode } from './button--link.example'; import { ButtonIconComponent, iconCode } from './button--icon.example'; -import { - ButtonWithIconComponent, - withIconCode, -} from '~/app/pages/(components)/components/(button)/button--with-icon.example'; -import { - ButtonLoadingComponent, - loadingCode, -} from '~/app/pages/(components)/components/(button)/button--loading.example'; -import { anchorCode, ButtonAnchorComponent } from '~/app/pages/(components)/components/(button)/button--anchor.example'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { ButtonLinkComponent, linkCode } from './button--link.example'; +import { ButtonOutlineComponent, outlineCode } from './button--outline.example'; +import { ButtonSecondaryComponent, secondaryCode } from './button--secondary.example'; +import { ButtonPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './button.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Button' }, - meta: metaWith('spartan/ui - Button', 'Displays a button or a component that looks like a button.'), - title: 'spartan/ui - Button', + data: { breadcrumb: 'Button' }, + meta: metaWith('spartan/ui - Button', 'Displays a button or a component that looks like a button.'), + title: 'spartan/ui - Button', }; @Component({ - selector: 'spartan-button', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - ButtonPreviewComponent, - ButtonDestructiveComponent, - ButtonOutlineComponent, - ButtonSecondaryComponent, - ButtonGhostComponent, - ButtonLinkComponent, - ButtonIconComponent, - ButtonWithIconComponent, - ButtonLoadingComponent, - ButtonAnchorComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-button', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + ButtonPreviewComponent, + ButtonDestructiveComponent, + ButtonOutlineComponent, + ButtonSecondaryComponent, + ButtonGhostComponent, + ButtonLinkComponent, + ButtonIconComponent, + ButtonWithIconComponent, + ButtonLoadingComponent, + ButtonAnchorComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

Secondary

- -
- -
- - -

Destructive

- -
- -
- - -

Outline

- -
- -
- - -

Ghost

- -
- -
- - -

Link

- -
- -
- - -

Icon

- -
- -
- - -

With Icon

- -
- -
- - -

Loading

- -
- -
- - -

As Anchor

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

Secondary

+ +
+ +
+ + +

Destructive

+ +
+ +
+ + +

Outline

+ +
+ +
+ + +

Ghost

+ +
+ +
+ + +

Link

+ +
+ +
+ + +

Icon

+ +
+ +
+ + +

With Icon

+ +
+ +
+ + +

Loading

+ +
+ +
+ + +

As Anchor

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class ButtonPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; - protected readonly secondaryCode = secondaryCode; - protected readonly outlineCode = outlineCode; - protected readonly destructiveCode = destructiveCode; - protected readonly ghostCode = ghostCode; - protected readonly linkCode = linkCode; - protected readonly iconCode = iconCode; - protected readonly withIconCode = withIconCode; - protected readonly loadingCode = loadingCode; - protected readonly anchorCode = anchorCode; + protected readonly secondaryCode = secondaryCode; + protected readonly outlineCode = outlineCode; + protected readonly destructiveCode = destructiveCode; + protected readonly ghostCode = ghostCode; + protected readonly linkCode = linkCode; + protected readonly iconCode = iconCode; + protected readonly withIconCode = withIconCode; + protected readonly loadingCode = loadingCode; + protected readonly anchorCode = anchorCode; } diff --git a/apps/app/src/app/pages/(components)/components/(button)/button.preview.ts b/apps/app/src/app/pages/(components)/components/(button)/button.preview.ts index f189e1059..7b3c37413 100644 --- a/apps/app/src/app/pages/(components)/components/(button)/button.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(button)/button.preview.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-button-preview', - standalone: true, - imports: [HlmButtonDirective], - template: ` `, + selector: 'spartan-button-preview', + standalone: true, + imports: [HlmButtonDirective], + template: ` + + `, }) export class ButtonPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(card)/card--notifications.example.ts b/apps/app/src/app/pages/(components)/components/(card)/card--notifications.example.ts index e9e28de4d..d5292cc1a 100644 --- a/apps/app/src/app/pages/(components)/components/(card)/card--notifications.example.ts +++ b/apps/app/src/app/pages/(components)/components/(card)/card--notifications.example.ts @@ -1,93 +1,93 @@ +import { NgForOf } from '@angular/common'; import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixBell, radixCheck } from '@ng-icons/radix-icons'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixBell, radixCheck } from '@ng-icons/radix-icons'; import { BrnSwitchComponent, BrnSwitchThumbComponent } from '@spartan-ng/ui-switch-brain'; import { HlmSwitchDirective, HlmSwitchThumbDirective } from '@spartan-ng/ui-switch-helm'; -import { NgForOf } from '@angular/common'; @Component({ - selector: 'spartan-card-notifications', - standalone: true, - imports: [ - HlmButtonDirective, - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, - HlmIconComponent, - BrnSwitchComponent, - BrnSwitchThumbComponent, - HlmSwitchThumbDirective, - HlmSwitchDirective, - NgForOf, - ], - providers: [provideIcons({ radixCheck, radixBell })], - template: ` -
-
-

Notifications

-

You have 3 unread notifications

-
-
-
- -
-

Push Notifications

-

Send notifications to device.

-
- - - -
-
-
- -
-

{{ notification.title }}

-

{{ notification.description }}

-
-
-
-
-
- -
-
- `, + selector: 'spartan-card-notifications', + standalone: true, + imports: [ + HlmButtonDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, + HlmIconComponent, + BrnSwitchComponent, + BrnSwitchThumbComponent, + HlmSwitchThumbDirective, + HlmSwitchDirective, + NgForOf, + ], + providers: [provideIcons({ radixCheck, radixBell })], + template: ` +
+
+

Notifications

+

You have 3 unread notifications

+
+
+
+ +
+

Push Notifications

+

Send notifications to device.

+
+ + + +
+
+
+ +
+

{{ notification.title }}

+

{{ notification.description }}

+
+
+
+
+
+ +
+
+ `, }) export class CardNotificationsComponent { - protected notifications = [ - { - title: 'Your call has been confirmed.', - description: '1 hour ago', - }, - { - title: 'You have a new message!', - description: '1 hour ago', - }, - { - title: 'Your subscription is expiring soon!', - description: '2 hours ago', - }, - ]; + protected notifications = [ + { + title: 'Your call has been confirmed.', + description: '1 hour ago', + }, + { + title: 'You have a new message!', + description: '1 hour ago', + }, + { + title: 'Your subscription is expiring soon!', + description: '2 hours ago', + }, + ]; } export const cardNotificationsCode = ` diff --git a/apps/app/src/app/pages/(components)/components/(card)/card.page.ts b/apps/app/src/app/pages/(components)/components/(card)/card.page.ts index 93e8031e1..bdb535488 100644 --- a/apps/app/src/app/pages/(components)/components/(card)/card.page.ts +++ b/apps/app/src/app/pages/(components)/components/(card)/card.page.ts @@ -1,91 +1,91 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; +import { CardNotificationsComponent, cardNotificationsCode } from './card--notifications.example'; import { CardPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './card.preview'; -import { cardNotificationsCode, CardNotificationsComponent } from './card--notifications.example'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Card' }, - meta: metaWith('spartan/ui - Card', 'Displays a card with header, content, and footer.'), - title: 'spartan/ui - Card', + data: { breadcrumb: 'Card' }, + meta: metaWith('spartan/ui - Card', 'Displays a card with header, content, and footer.'), + title: 'spartan/ui - Card', }; @Component({ - selector: 'spartan-card', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - CardPreviewComponent, - CardNotificationsComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-card', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + CardPreviewComponent, + CardNotificationsComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples - -
- -
- - + Examples + +
+ +
+ + - - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class CardPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly cardNotificationsCode = cardNotificationsCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly cardNotificationsCode = cardNotificationsCode; } diff --git a/apps/app/src/app/pages/(components)/components/(card)/card.preview.ts b/apps/app/src/app/pages/(components)/components/(card)/card.preview.ts index 9fd97fefd..3b2a5536b 100644 --- a/apps/app/src/app/pages/(components)/components/(card)/card.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(card)/card.preview.ts @@ -1,57 +1,57 @@ import { Component } from '@angular/core'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; @Component({ - selector: 'spartan-card-preview', - standalone: true, - imports: [ - HlmCardDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, - HlmCardDescriptionDirective, - HlmCardContentDirective, - HlmLabelDirective, - HlmInputDirective, - HlmCardFooterDirective, - HlmButtonDirective, - ], - template: ` -
-
-

Create new project

-

Deploy your new project in one-click.

-
-

- + selector: 'spartan-card-preview', + standalone: true, + imports: [ + HlmCardDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, + HlmCardDescriptionDirective, + HlmCardContentDirective, + HlmLabelDirective, + HlmInputDirective, + HlmCardFooterDirective, + HlmButtonDirective, + ], + template: ` +

+
+

Create new project

+

Deploy your new project in one-click.

+
+

+ - -

-
- - -
-
- `, + +

+
+ + +
+
+ `, }) export class CardPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.page.ts b/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.page.ts index e49b50376..d38634b05 100644 --- a/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.page.ts +++ b/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.page.ts @@ -1,80 +1,80 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { CollapsiblePreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './collapsible.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Collapsible' }, - meta: metaWith('spartan/ui - Collapsible', 'An interactive component which expands/collapses a panel.'), - title: 'spartan/ui - Collapsible', + data: { breadcrumb: 'Collapsible' }, + meta: metaWith('spartan/ui - Collapsible', 'An interactive component which expands/collapses a panel.'), + title: 'spartan/ui - Collapsible', }; @Component({ - selector: 'spartan-collapsible', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - CollapsiblePreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-collapsible', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + CollapsiblePreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class CollapsiblePageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.preview.ts b/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.preview.ts index e31329c21..fcf8b8c68 100644 --- a/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(collapsible)/collapsible.preview.ts @@ -1,21 +1,21 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnCollapsibleComponent, - BrnCollapsibleContentComponent, - BrnCollapsibleTriggerDirective, + BrnCollapsibleComponent, + BrnCollapsibleContentComponent, + BrnCollapsibleTriggerDirective, } from '@spartan-ng/ui-collapsible-brain'; @Component({ - selector: 'spartan-collapsible-preview', - standalone: true, - imports: [ - BrnCollapsibleComponent, - BrnCollapsibleTriggerDirective, - HlmButtonDirective, - BrnCollapsibleContentComponent, - ], - template: ` + selector: 'spartan-collapsible-preview', + standalone: true, + imports: [ + BrnCollapsibleComponent, + BrnCollapsibleTriggerDirective, + HlmButtonDirective, + BrnCollapsibleContentComponent, + ], + template: `

@peduarte starred 3 repositories

diff --git a/apps/app/src/app/pages/(components)/components/(combobox)/combobox.page.ts b/apps/app/src/app/pages/(components)/components/(combobox)/combobox.page.ts index d8de5692a..270ccb073 100644 --- a/apps/app/src/app/pages/(components)/components/(combobox)/combobox.page.ts +++ b/apps/app/src/app/pages/(components)/components/(combobox)/combobox.page.ts @@ -1,80 +1,83 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { ComboboxPreviewComponent, defaultCode } from './combobox.preview'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Combobox' }, - meta: metaWith('spartan/ui - Combobox', 'Autocomplete input and command palette with a list of suggestions.'), - title: 'spartan/ui - Combobox', + data: { breadcrumb: 'Combobox' }, + meta: metaWith('spartan/ui - Combobox', 'Autocomplete input and command palette with a list of suggestions.'), + title: 'spartan/ui - Combobox', }; @Component({ - selector: 'spartan-combobox', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - ComboboxPreviewComponent, - ], - template: ` -
- + selector: 'spartan-combobox', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + ComboboxPreviewComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation -

- The Combobox is built using a composition of the brn-popover and the - brn-command components. -

-

See installation instructions for the Popover and the Command components.

+ Installation +

+ The Combobox is built using a composition of the + brn-popover + and the + brn-command + components. +

+

See installation instructions for the Popover and the Command components.

- Usage -
- -
+ Usage +
+ +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class ComboboxPageComponent { - protected readonly defaultCode = defaultCode; + protected readonly defaultCode = defaultCode; } diff --git a/apps/app/src/app/pages/(components)/components/(combobox)/combobox.preview.ts b/apps/app/src/app/pages/(components)/components/(combobox)/combobox.preview.ts index f8ae67059..eb3c6ac08 100644 --- a/apps/app/src/app/pages/(components)/components/(combobox)/combobox.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(combobox)/combobox.preview.ts @@ -1,111 +1,111 @@ +import { NgForOf } from '@angular/common'; import { Component, signal } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixCaretSort, radixCheck, radixMagnifyingGlass } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { BrnCommandImports } from '@spartan-ng/ui-command-brain'; import { HlmCommandImports } from '@spartan-ng/ui-command-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnPopoverComponent, - BrnPopoverContentDirective, - BrnPopoverTriggerDirective, + BrnPopoverComponent, + BrnPopoverContentDirective, + BrnPopoverTriggerDirective, } from '@spartan-ng/ui-popover-brain'; import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm'; -import { NgForOf } from '@angular/common'; -import { provideIcons } from '@ng-icons/core'; -import { radixCaretSort, radixCheck, radixMagnifyingGlass } from '@ng-icons/radix-icons'; type Framework = { label: string; value: string }; @Component({ - selector: 'spartan-combobox-preview', - standalone: true, - imports: [ - BrnCommandImports, - HlmCommandImports, - HlmIconComponent, - HlmButtonDirective, - BrnPopoverComponent, - BrnPopoverTriggerDirective, - HlmPopoverContentDirective, - BrnPopoverContentDirective, - NgForOf, - ], - providers: [provideIcons({ radixCaretSort, radixMagnifyingGlass, radixCheck })], - template: ` - - - - - - - -
No results found.
- - - - - - - - `, + selector: 'spartan-combobox-preview', + standalone: true, + imports: [ + BrnCommandImports, + HlmCommandImports, + HlmIconComponent, + HlmButtonDirective, + BrnPopoverComponent, + BrnPopoverTriggerDirective, + HlmPopoverContentDirective, + BrnPopoverContentDirective, + NgForOf, + ], + providers: [provideIcons({ radixCaretSort, radixMagnifyingGlass, radixCheck })], + template: ` + + + + + + + +
No results found.
+ + + + + + + + `, }) export class ComboboxPreviewComponent { - public frameworks = [ - { - label: 'AnalogJs', - value: 'analogjs', - }, - { - label: 'Angular', - value: 'angular', - }, - { - label: 'Vue', - value: 'vue', - }, - { - label: 'Nuxt', - value: 'nuxt', - }, - { - label: 'React', - value: 'react', - }, - { - label: 'NextJs', - value: 'nextjs', - }, - ]; - public currentFramework = signal(undefined); - public state = signal<'closed' | 'open'>('closed'); + public frameworks = [ + { + label: 'AnalogJs', + value: 'analogjs', + }, + { + label: 'Angular', + value: 'angular', + }, + { + label: 'Vue', + value: 'vue', + }, + { + label: 'Nuxt', + value: 'nuxt', + }, + { + label: 'React', + value: 'react', + }, + { + label: 'NextJs', + value: 'nextjs', + }, + ]; + public currentFramework = signal(undefined); + public state = signal<'closed' | 'open'>('closed'); - stateChanged(state: 'open' | 'closed') { - this.state.set(state); - } + stateChanged(state: 'open' | 'closed') { + this.state.set(state); + } - commandSelected(framework: Framework) { - this.state.set('closed'); - if (this.currentFramework()?.value === framework.value) { - this.currentFramework.set(undefined); - } else { - this.currentFramework.set(framework); - } - } + commandSelected(framework: Framework) { + this.state.set('closed'); + if (this.currentFramework()?.value === framework.value) { + this.currentFramework.set(undefined); + } else { + this.currentFramework.set(framework); + } + } } export const defaultCode = ` diff --git a/apps/app/src/app/pages/(components)/components/(command)/command--dialog.example.ts b/apps/app/src/app/pages/(components)/components/(command)/command--dialog.example.ts index cec71d0e7..750934a56 100644 --- a/apps/app/src/app/pages/(components)/components/(command)/command--dialog.example.ts +++ b/apps/app/src/app/pages/(components)/components/(command)/command--dialog.example.ts @@ -1,129 +1,133 @@ import { Component, HostListener, signal } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { + radixCalendar, + radixCardStack, + radixCross1, + radixFace, + radixGear, + radixPerson, + radixPlus, +} from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { BrnCommandImports } from '@spartan-ng/ui-command-brain'; import { HlmCommandImports } from '@spartan-ng/ui-command-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnDialogCloseDirective, - BrnDialogComponent, - BrnDialogContentDirective, - BrnDialogOverlayComponent, - BrnDialogTriggerDirective, + BrnDialogCloseDirective, + BrnDialogComponent, + BrnDialogContentDirective, + BrnDialogOverlayComponent, + BrnDialogTriggerDirective, } from '@spartan-ng/ui-dialog-brain'; import { HlmDialogOverlayDirective } from '@spartan-ng/ui-dialog-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { HlmCodeDirective } from '@spartan-ng/ui-typography-helm'; -import { provideIcons } from '@ng-icons/core'; -import { - radixCalendar, - radixCardStack, - radixCross1, - radixFace, - radixGear, - radixPerson, - radixPlus, -} from '@ng-icons/radix-icons'; @Component({ - selector: 'spartan-command-dialog', - standalone: true, - providers: [ - provideIcons({ - radixCross1, - radixCalendar, - radixFace, - radixPlus, - radixPerson, - radixCardStack, - radixGear, - }), - ], - imports: [ - BrnCommandImports, - HlmCommandImports, - HlmIconComponent, - HlmButtonDirective, + selector: 'spartan-command-dialog', + standalone: true, + providers: [ + provideIcons({ + radixCross1, + radixCalendar, + radixFace, + radixPlus, + radixPerson, + radixCardStack, + radixGear, + }), + ], + imports: [ + BrnCommandImports, + HlmCommandImports, + HlmIconComponent, + HlmButtonDirective, - BrnDialogComponent, - BrnDialogCloseDirective, - BrnDialogTriggerDirective, - BrnDialogContentDirective, - BrnDialogOverlayComponent, - HlmDialogOverlayDirective, - HlmCodeDirective, - ], - template: ` -
-

Press ⌘ + K

-

- Last command: {{ command() || 'none' }} -

-
- - - - - - - - -
No results found.
- - - - - - - - - - - - - - - - `, + BrnDialogComponent, + BrnDialogCloseDirective, + BrnDialogTriggerDirective, + BrnDialogContentDirective, + BrnDialogOverlayComponent, + HlmDialogOverlayDirective, + HlmCodeDirective, + ], + template: ` +
+

+ Press + ⌘ + K +

+

+ Last command: + {{ command() || 'none' }} +

+
+ + + + + + + + +
No results found.
+ + + + + + + + + + + + + + + + `, }) export class CommandDialogComponent { - public command = signal(''); - public state = signal<'closed' | 'open'>('closed'); - @HostListener('window:keydown', ['$event']) - onKeyDown(event: KeyboardEvent) { - if ((event.metaKey || event.ctrlKey) && (event.key === 'k' || event.key === 'K')) { - this.state.set('open'); - } - } - stateChanged(state: 'open' | 'closed') { - this.state.set(state); - } + public command = signal(''); + public state = signal<'closed' | 'open'>('closed'); + @HostListener('window:keydown', ['$event']) + onKeyDown(event: KeyboardEvent) { + if ((event.metaKey || event.ctrlKey) && (event.key === 'k' || event.key === 'K')) { + this.state.set('open'); + } + } + stateChanged(state: 'open' | 'closed') { + this.state.set(state); + } - commandSelected(selected: string) { - this.state.set('closed'); - this.command.set(selected); - } + commandSelected(selected: string) { + this.state.set('closed'); + this.command.set(selected); + } } export const commandDialogCode = ` `; diff --git a/apps/app/src/app/pages/(components)/components/(command)/command.page.ts b/apps/app/src/app/pages/(components)/components/(command)/command.page.ts index 003e8bea5..e1684a688 100644 --- a/apps/app/src/app/pages/(components)/components/(command)/command.page.ts +++ b/apps/app/src/app/pages/(components)/components/(command)/command.page.ts @@ -1,112 +1,114 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { RouterLink } from '@angular/router'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; +import { CommandDialogComponent, commandDialogCode } from './command--dialog.example'; import { CommandPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './command.preview'; -import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { commandDialogCode, CommandDialogComponent } from './command--dialog.example'; -import { RouterLink } from '@angular/router'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Command' }, - meta: metaWith('spartan/ui - Command', 'Fast, composable, command menu for Angular.'), - title: 'spartan/ui - Command', + data: { breadcrumb: 'Command' }, + meta: metaWith('spartan/ui - Command', 'Fast, composable, command menu for Angular.'), + title: 'spartan/ui - Command', }; @Component({ - selector: 'spartan-command', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - CommandPreviewComponent, - HlmButtonDirective, - CommandDialogComponent, - RouterLink, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-command', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + CommandPreviewComponent, + HlmButtonDirective, + CommandDialogComponent, + RouterLink, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - About -

- The command primitive is built upon the incredible work of - ng-neat/cmdk. -

+ About +

+ The command primitive is built upon the incredible work of + ng-neat/cmdk. +

- Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Dialog

- -
- -
- - + Examples +

Dialog

+ +
+ +
+ + -

Combobox

-

- You can use the brn-command component as a combobox. See the - Combobox page for more - information. -

+

Combobox

+

+ You can use the + brn-command + component as a combobox. See the + Combobox + page for more information. +

- - - - -
- - - - - - - `, + + + + +
+ + + + + + + `, }) export default class ComboboxPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly commandDialogCode = commandDialogCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly commandDialogCode = commandDialogCode; } diff --git a/apps/app/src/app/pages/(components)/components/(command)/command.preview.ts b/apps/app/src/app/pages/(components)/components/(command)/command.preview.ts index ce560002c..786754af5 100644 --- a/apps/app/src/app/pages/(components)/components/(command)/command.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(command)/command.preview.ts @@ -1,69 +1,69 @@ import { Component } from '@angular/core'; -import { BrnCommandImports } from '@spartan-ng/ui-command-brain'; -import { HlmCommandImports } from '@spartan-ng/ui-command-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { provideIcons } from '@ng-icons/core'; import { - radixCalendar, - radixCardStack, - radixFace, - radixGear, - radixMagnifyingGlass, - radixPerson, - radixPlus, + radixCalendar, + radixCardStack, + radixFace, + radixGear, + radixMagnifyingGlass, + radixPerson, + radixPlus, } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { BrnCommandImports } from '@spartan-ng/ui-command-brain'; +import { HlmCommandImports } from '@spartan-ng/ui-command-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; @Component({ - selector: 'spartan-command-preview', - standalone: true, - imports: [BrnCommandImports, HlmCommandImports, HlmIconComponent, HlmButtonDirective], - providers: [ - provideIcons({ radixMagnifyingGlass, radixCalendar, radixFace, radixPlus, radixPerson, radixCardStack, radixGear }), - ], - template: ` - - - - - -
No results found.
- - - - - - - - - - - - - - - `, + selector: 'spartan-command-preview', + standalone: true, + imports: [BrnCommandImports, HlmCommandImports, HlmIconComponent, HlmButtonDirective], + providers: [ + provideIcons({ radixMagnifyingGlass, radixCalendar, radixFace, radixPlus, radixPerson, radixCardStack, radixGear }), + ], + template: ` + + + + + +
No results found.
+ + + + + + + + + + + + + + + `, }) export class CommandPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.page.ts b/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.page.ts index 407e6be3e..84eae26dc 100644 --- a/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.page.ts +++ b/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.page.ts @@ -1,87 +1,87 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { ContextMenuPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './context-menu.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Context Menu' }, - meta: metaWith( - 'spartan/ui - Context Menu', - 'Displays a menu to the user — such as a set of actions or functions — triggered by a right-click.' - ), - title: 'spartan/ui - Context Menu', + data: { breadcrumb: 'Context Menu' }, + meta: metaWith( + 'spartan/ui - Context Menu', + 'Displays a menu to the user — such as a set of actions or functions — triggered by a right-click.', + ), + title: 'spartan/ui - Context Menu', }; @Component({ - selector: 'spartan-command', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - ContextMenuPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-command', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + ContextMenuPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class ComboboxPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.preview.ts b/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.preview.ts index 28de367bb..f0a4a40a6 100644 --- a/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(context-menu)/context-menu.preview.ts @@ -1,129 +1,129 @@ import { Component } from '@angular/core'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { - BrnContextMenuTriggerDirective, - BrnMenuDirective, - BrnMenuGroupDirective, - BrnMenuItemCheckboxDirective, - BrnMenuItemDirective, - BrnMenuItemRadioDirective, - BrnMenuTriggerDirective, + BrnContextMenuTriggerDirective, + BrnMenuDirective, + BrnMenuGroupDirective, + BrnMenuItemCheckboxDirective, + BrnMenuItemDirective, + BrnMenuItemRadioDirective, + BrnMenuTriggerDirective, } from '@spartan-ng/ui-menu-brain'; import { - HlmMenuDirective, - HlmMenuItemCheckComponent, - HlmMenuItemDirective, - HlmMenuItemIconDirective, - HlmMenuItemRadioComponent, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuSeparatorComponent, - HlmMenuShortcutComponent, - HlmSubMenuDirective, + HlmMenuDirective, + HlmMenuItemCheckComponent, + HlmMenuItemDirective, + HlmMenuItemIconDirective, + HlmMenuItemRadioComponent, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuSeparatorComponent, + HlmMenuShortcutComponent, + HlmSubMenuDirective, } from '@spartan-ng/ui-menu-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; @Component({ - selector: 'spartan-context-menu-preview', - standalone: true, - imports: [ - BrnMenuDirective, - BrnMenuItemDirective, - BrnMenuTriggerDirective, - BrnContextMenuTriggerDirective, - BrnMenuGroupDirective, - BrnMenuItemCheckboxDirective, - BrnMenuItemRadioDirective, + selector: 'spartan-context-menu-preview', + standalone: true, + imports: [ + BrnMenuDirective, + BrnMenuItemDirective, + BrnMenuTriggerDirective, + BrnContextMenuTriggerDirective, + BrnMenuGroupDirective, + BrnMenuItemCheckboxDirective, + BrnMenuItemRadioDirective, - HlmMenuDirective, - HlmSubMenuDirective, - HlmMenuItemDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuShortcutComponent, - HlmMenuSeparatorComponent, - HlmMenuItemIconDirective, - HlmMenuItemCheckComponent, - HlmMenuItemRadioComponent, + HlmMenuDirective, + HlmSubMenuDirective, + HlmMenuItemDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuShortcutComponent, + HlmMenuSeparatorComponent, + HlmMenuItemIconDirective, + HlmMenuItemCheckComponent, + HlmMenuItemRadioComponent, - HlmButtonDirective, - HlmIconComponent, - ], - template: ` -
- Right click here -
+ HlmButtonDirective, + HlmIconComponent, + ], + template: ` +
+ Right click here +
- -
-
- + +
+
+ - + - + - -
+ +
- + -
- - -
+
+ + +
- - People - -
- - -
-
- + + People + +
+ + +
+
+ - -
- - - - - -
- - `, + +
+ + + + + +
+ + `, }) export class ContextMenuPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(dialog)/dialog-context-menu.preview.ts b/apps/app/src/app/pages/(components)/components/(dialog)/dialog-context-menu.preview.ts index 682f98475..be04dd34b 100644 --- a/apps/app/src/app/pages/(components)/components/(dialog)/dialog-context-menu.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(dialog)/dialog-context-menu.preview.ts @@ -1,112 +1,112 @@ import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixCross1 } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnDialogCloseDirective, - BrnDialogComponent, - BrnDialogContentDirective, - BrnDialogDescriptionDirective, - BrnDialogOverlayComponent, - BrnDialogTitleDirective, - BrnDialogTriggerDirective, + BrnDialogCloseDirective, + BrnDialogComponent, + BrnDialogContentDirective, + BrnDialogDescriptionDirective, + BrnDialogOverlayComponent, + BrnDialogTitleDirective, + BrnDialogTriggerDirective, } from '@spartan-ng/ui-dialog-brain'; import { - HlmDialogCloseDirective, - HlmDialogContentDirective, - HlmDialogDescriptionDirective, - HlmDialogFooterComponent, - HlmDialogHeaderComponent, - HlmDialogOverlayDirective, - HlmDialogTitleDirective, + HlmDialogCloseDirective, + HlmDialogContentDirective, + HlmDialogDescriptionDirective, + HlmDialogFooterComponent, + HlmDialogHeaderComponent, + HlmDialogOverlayDirective, + HlmDialogTitleDirective, } from '@spartan-ng/ui-dialog-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { HlmMenuDirective, HlmMenuItemDirective, HlmMenuShortcutComponent } from '@spartan-ng/ui-menu-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { BrnContextMenuTriggerDirective, BrnMenuDirective, BrnMenuGroupDirective } from '@spartan-ng/ui-menu-brain'; +import { HlmMenuDirective, HlmMenuItemDirective, HlmMenuShortcutComponent } from '@spartan-ng/ui-menu-helm'; @Component({ - selector: 'spartan-dialog-context-menu', - standalone: true, - imports: [ - BrnDialogComponent, - BrnDialogOverlayComponent, - BrnDialogTriggerDirective, - BrnDialogContentDirective, - BrnDialogCloseDirective, - BrnDialogTitleDirective, - BrnDialogDescriptionDirective, - HlmDialogOverlayDirective, - HlmDialogContentDirective, - HlmDialogHeaderComponent, - HlmDialogFooterComponent, - HlmDialogTitleDirective, - HlmDialogDescriptionDirective, - HlmDialogCloseDirective, - HlmLabelDirective, - HlmButtonDirective, - HlmInputDirective, - HlmIconComponent, - HlmButtonDirective, - HlmIconComponent, - HlmMenuItemDirective, - HlmMenuShortcutComponent, - BrnMenuGroupDirective, - BrnMenuDirective, - BrnContextMenuTriggerDirective, - HlmMenuDirective, - ], - providers: [provideIcons({ radixCross1 })], - template: ` -
- Right click here -
+ selector: 'spartan-dialog-context-menu', + standalone: true, + imports: [ + BrnDialogComponent, + BrnDialogOverlayComponent, + BrnDialogTriggerDirective, + BrnDialogContentDirective, + BrnDialogCloseDirective, + BrnDialogTitleDirective, + BrnDialogDescriptionDirective, + HlmDialogOverlayDirective, + HlmDialogContentDirective, + HlmDialogHeaderComponent, + HlmDialogFooterComponent, + HlmDialogTitleDirective, + HlmDialogDescriptionDirective, + HlmDialogCloseDirective, + HlmLabelDirective, + HlmButtonDirective, + HlmInputDirective, + HlmIconComponent, + HlmButtonDirective, + HlmIconComponent, + HlmMenuItemDirective, + HlmMenuShortcutComponent, + BrnMenuGroupDirective, + BrnMenuDirective, + BrnContextMenuTriggerDirective, + HlmMenuDirective, + ], + providers: [provideIcons({ radixCross1 })], + template: ` +
+ Right click here +
- -
-
- + +
+
+ - + - - - -
- -

Print this page

-

- Are you sure you want to print this page? Only print if absolutely necessary! The less we print, the - less paper we need, the better it is for our environment! -

- - - - - - -
- -
-
- - `, + + + +
+ +

Print this page

+

+ Are you sure you want to print this page? Only print if absolutely necessary! The less we print, the + less paper we need, the better it is for our environment! +

+ + + + + + +
+ +
+
+ + `, }) export class DialogContextMenuPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts b/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts index eccf1d32e..886a240ba 100644 --- a/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts +++ b/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts @@ -1,126 +1,128 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixExclamationTriangle } from '@ng-icons/radix-icons'; +import { + HlmAlertDescriptionDirective, + HlmAlertDirective, + HlmAlertIconDirective, + HlmAlertTitleDirective, +} from '@spartan-ng/ui-alert-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { defaultCode, defaultImports, defaultSkeleton, DialogPreviewComponent } from './dialog.preview'; -import { contextMenuCode, DialogContextMenuPreviewComponent } from './dialog-context-menu.preview'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; -import { - HlmAlertDescriptionDirective, - HlmAlertDirective, - HlmAlertIconDirective, - HlmAlertTitleDirective, -} from '@spartan-ng/ui-alert-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixExclamationTriangle } from '@ng-icons/radix-icons'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; +import { DialogContextMenuPreviewComponent, contextMenuCode } from './dialog-context-menu.preview'; +import { DialogPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './dialog.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Dialog' }, - meta: metaWith( - 'spartan/ui - Dialog', - 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.' - ), - title: 'spartan/ui - Dialog', + data: { breadcrumb: 'Dialog' }, + meta: metaWith( + 'spartan/ui - Dialog', + 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.', + ), + title: 'spartan/ui - Dialog', }; @Component({ - selector: 'spartan-dialog', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - DialogPreviewComponent, - DialogPreviewComponent, - DialogContextMenuPreviewComponent, - HlmAlertDirective, - HlmAlertDescriptionDirective, - HlmIconComponent, - HlmAlertIconDirective, - HlmAlertTitleDirective, - InstallationCsComponent, - ], - providers: [provideIcons({ radixExclamationTriangle })], - template: ` -
- + selector: 'spartan-dialog', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + DialogPreviewComponent, + DialogPreviewComponent, + DialogContextMenuPreviewComponent, + HlmAlertDirective, + HlmAlertDescriptionDirective, + HlmIconComponent, + HlmAlertIconDirective, + HlmAlertTitleDirective, + InstallationCsComponent, + ], + providers: [provideIcons({ radixExclamationTriangle })], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Inside Menu -

- You can nest dialogs inside context or dropdown menus. Make sure to wrap the menu-item inside the - brn-dialog component and apply the - BrnDialogTrigger directive. Another option is to use the - brnDialogTriggerFor alternative, which takes in a reference to the brn-dialog. - That way you can avoid nesting the template. -

-
- -

Note

-

- Using brnDialogTriggerFor outside of the current menu seems to close the menu when dismissing the dialog. -

-
- -
- -
- - + Inside Menu +

+ You can nest dialogs inside context or dropdown menus. Make sure to wrap the menu-item inside the + brn-dialog + component and apply the + BrnDialogTrigger + directive. Another option is to use the + brnDialogTriggerFor + alternative, which takes in a reference to the brn-dialog. That way you can avoid nesting the template. +

+
+ +

Note

+

+ Using brnDialogTriggerFor outside of the current menu seems to close the menu when dismissing the dialog. +

+
+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class DialogPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly contextMenuCode = contextMenuCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly contextMenuCode = contextMenuCode; } diff --git a/apps/app/src/app/pages/(components)/components/(dialog)/dialog.preview.ts b/apps/app/src/app/pages/(components)/components/(dialog)/dialog.preview.ts index 2cc379795..a314bfe4e 100644 --- a/apps/app/src/app/pages/(components)/components/(dialog)/dialog.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(dialog)/dialog.preview.ts @@ -1,84 +1,84 @@ import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixCross1 } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnDialogCloseDirective, - BrnDialogComponent, - BrnDialogContentDirective, - BrnDialogDescriptionDirective, - BrnDialogOverlayComponent, - BrnDialogTitleDirective, - BrnDialogTriggerDirective, + BrnDialogCloseDirective, + BrnDialogComponent, + BrnDialogContentDirective, + BrnDialogDescriptionDirective, + BrnDialogOverlayComponent, + BrnDialogTitleDirective, + BrnDialogTriggerDirective, } from '@spartan-ng/ui-dialog-brain'; import { - HlmDialogCloseDirective, - HlmDialogContentDirective, - HlmDialogDescriptionDirective, - HlmDialogFooterComponent, - HlmDialogHeaderComponent, - HlmDialogOverlayDirective, - HlmDialogTitleDirective, + HlmDialogCloseDirective, + HlmDialogContentDirective, + HlmDialogDescriptionDirective, + HlmDialogFooterComponent, + HlmDialogHeaderComponent, + HlmDialogOverlayDirective, + HlmDialogTitleDirective, } from '@spartan-ng/ui-dialog-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; @Component({ - selector: 'spartan-dialog-preview', - standalone: true, - imports: [ - BrnDialogComponent, - BrnDialogOverlayComponent, - BrnDialogTriggerDirective, - BrnDialogContentDirective, - BrnDialogCloseDirective, - BrnDialogTitleDirective, - BrnDialogDescriptionDirective, - HlmDialogOverlayDirective, - HlmDialogContentDirective, - HlmDialogHeaderComponent, - HlmDialogFooterComponent, - HlmDialogTitleDirective, - HlmDialogDescriptionDirective, - HlmDialogCloseDirective, - HlmLabelDirective, - HlmButtonDirective, - HlmInputDirective, - HlmIconComponent, - HlmButtonDirective, - HlmIconComponent, - ], - providers: [provideIcons({ radixCross1 })], - template: ` - - - -
- -

Edit profile

-

Make changes to your profile here. Click save when you're done.

- -
-
- - -
-
- - -
-
- - - - -
- - `, + selector: 'spartan-dialog-preview', + standalone: true, + imports: [ + BrnDialogComponent, + BrnDialogOverlayComponent, + BrnDialogTriggerDirective, + BrnDialogContentDirective, + BrnDialogCloseDirective, + BrnDialogTitleDirective, + BrnDialogDescriptionDirective, + HlmDialogOverlayDirective, + HlmDialogContentDirective, + HlmDialogHeaderComponent, + HlmDialogFooterComponent, + HlmDialogTitleDirective, + HlmDialogDescriptionDirective, + HlmDialogCloseDirective, + HlmLabelDirective, + HlmButtonDirective, + HlmInputDirective, + HlmIconComponent, + HlmButtonDirective, + HlmIconComponent, + ], + providers: [provideIcons({ radixCross1 })], + template: ` + + + +
+ +

Edit profile

+

Make changes to your profile here. Click save when you're done.

+ +
+
+ + +
+
+ + +
+
+ + + + +
+ + `, }) export class DialogPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.page.ts b/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.page.ts index ad5af35c6..4c4c2bb4e 100644 --- a/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.page.ts +++ b/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.page.ts @@ -1,98 +1,98 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, DropdownPreviewComponent } from './dropdown-menu.preview'; import { dropdownWithStateCode, DropdownWithStatePreviewComponent } from './dropdown-with-state.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Dropdown' }, - meta: metaWith( - 'spartan/ui - Dropdown', - 'Displays a menu to the user — such as a set of actions or functions — triggered by a button.' - ), - title: 'spartan/ui - Dropdown', + data: { breadcrumb: 'Dropdown' }, + meta: metaWith( + 'spartan/ui - Dropdown', + 'Displays a menu to the user — such as a set of actions or functions — triggered by a button.', + ), + title: 'spartan/ui - Dropdown', }; @Component({ - selector: 'spartan-dropdown-menu', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - DropdownPreviewComponent, - DropdownPreviewComponent, - DropdownWithStatePreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-dropdown-menu', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + DropdownPreviewComponent, + DropdownPreviewComponent, + DropdownWithStatePreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Stateful

- -
- -
- - + Examples +

Stateful

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class DropdownPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly dropdownWithStateCode = dropdownWithStateCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly dropdownWithStateCode = dropdownWithStateCode; } diff --git a/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.preview.ts b/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.preview.ts index 68765f907..67592f402 100644 --- a/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-menu.preview.ts @@ -1,183 +1,183 @@ import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { - radixAvatar, - radixCardStack, - radixChatBubble, - radixCode, - radixEnvelopeClosed, - radixExit, - radixFace, - radixGear, - radixGithubLogo, - radixKeyboard, - radixPerson, - radixPlus, - radixPlusCircled, - radixQuestionMarkCircled, + radixAvatar, + radixCardStack, + radixChatBubble, + radixCode, + radixEnvelopeClosed, + radixExit, + radixFace, + radixGear, + radixGithubLogo, + radixKeyboard, + radixPerson, + radixPlus, + radixPlusCircled, + radixQuestionMarkCircled, } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { - BrnMenuDirective, - BrnMenuGroupDirective, - BrnMenuItemDirective, - BrnMenuTriggerDirective, + BrnMenuDirective, + BrnMenuGroupDirective, + BrnMenuItemDirective, + BrnMenuTriggerDirective, } from '@spartan-ng/ui-menu-brain'; import { - HlmMenuDirective, - HlmMenuItemDirective, - HlmMenuItemIconDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuSeparatorComponent, - HlmMenuShortcutComponent, - HlmSubMenuDirective, + HlmMenuDirective, + HlmMenuItemDirective, + HlmMenuItemIconDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuSeparatorComponent, + HlmMenuShortcutComponent, + HlmSubMenuDirective, } from '@spartan-ng/ui-menu-helm'; @Component({ - selector: 'spartan-dropdown-preview', - standalone: true, - imports: [ - BrnMenuDirective, - BrnMenuItemDirective, - BrnMenuTriggerDirective, - BrnMenuGroupDirective, - - HlmMenuDirective, - HlmSubMenuDirective, - HlmMenuItemDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuShortcutComponent, - HlmMenuSeparatorComponent, - HlmMenuItemIconDirective, - - HlmButtonDirective, - HlmIconComponent, - ], - providers: [ - provideIcons({ - radixPerson, - radixCardStack, - radixGear, - radixKeyboard, - radixAvatar, - radixFace, - radixPlus, - radixGithubLogo, - radixQuestionMarkCircled, - radixCode, - radixExit, - radixEnvelopeClosed, - radixChatBubble, - radixPlusCircled, - }), - ], - template: ` -
- -
- -
- My Account - -
- - - - - - - -
- - - -
- - - - - -
- - - -
- - - - - -
- - - - -
- - - -
- - - - - -
- - `, + selector: 'spartan-dropdown-preview', + standalone: true, + imports: [ + BrnMenuDirective, + BrnMenuItemDirective, + BrnMenuTriggerDirective, + BrnMenuGroupDirective, + + HlmMenuDirective, + HlmSubMenuDirective, + HlmMenuItemDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuShortcutComponent, + HlmMenuSeparatorComponent, + HlmMenuItemIconDirective, + + HlmButtonDirective, + HlmIconComponent, + ], + providers: [ + provideIcons({ + radixPerson, + radixCardStack, + radixGear, + radixKeyboard, + radixAvatar, + radixFace, + radixPlus, + radixGithubLogo, + radixQuestionMarkCircled, + radixCode, + radixExit, + radixEnvelopeClosed, + radixChatBubble, + radixPlusCircled, + }), + ], + template: ` +
+ +
+ +
+ My Account + +
+ + + + + + + +
+ + + +
+ + + + + +
+ + + +
+ + + + + +
+ + + + +
+ + + +
+ + + + + +
+ + `, }) export class DropdownPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-with-state.preview.ts b/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-with-state.preview.ts index 7493cd6b6..450f11c84 100644 --- a/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-with-state.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(dropdown-menu)/dropdown-with-state.preview.ts @@ -1,130 +1,130 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixReset } from '@ng-icons/radix-icons'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { - HlmMenuDirective, - HlmMenuItemCheckComponent, - HlmMenuItemDirective, - HlmMenuItemIconDirective, - HlmMenuItemRadioComponent, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuSeparatorComponent, - HlmMenuShortcutComponent, - HlmSubMenuDirective, -} from '@spartan-ng/ui-menu-helm'; -import { - BrnMenuDirective, - BrnMenuGroupDirective, - BrnMenuItemCheckboxDirective, - BrnMenuItemDirective, - BrnMenuItemRadioDirective, - BrnMenuTriggerDirective, + BrnMenuDirective, + BrnMenuGroupDirective, + BrnMenuItemCheckboxDirective, + BrnMenuItemDirective, + BrnMenuItemRadioDirective, + BrnMenuTriggerDirective, } from '@spartan-ng/ui-menu-brain'; -import { NgFor } from '@angular/common'; -import { provideIcons } from '@ng-icons/core'; -import { radixReset } from '@ng-icons/radix-icons'; +import { + HlmMenuDirective, + HlmMenuItemCheckComponent, + HlmMenuItemDirective, + HlmMenuItemIconDirective, + HlmMenuItemRadioComponent, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuSeparatorComponent, + HlmMenuShortcutComponent, + HlmSubMenuDirective, +} from '@spartan-ng/ui-menu-helm'; @Component({ - selector: 'spartan-dropdown-with-state', - standalone: true, - imports: [ - BrnMenuDirective, - BrnMenuItemDirective, - BrnMenuTriggerDirective, - BrnMenuGroupDirective, - BrnMenuItemRadioDirective, - BrnMenuItemCheckboxDirective, + selector: 'spartan-dropdown-with-state', + standalone: true, + imports: [ + BrnMenuDirective, + BrnMenuItemDirective, + BrnMenuTriggerDirective, + BrnMenuGroupDirective, + BrnMenuItemRadioDirective, + BrnMenuItemCheckboxDirective, - HlmMenuDirective, - HlmSubMenuDirective, - HlmMenuItemDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuShortcutComponent, - HlmMenuSeparatorComponent, - HlmMenuItemIconDirective, + HlmMenuDirective, + HlmSubMenuDirective, + HlmMenuItemDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuShortcutComponent, + HlmMenuSeparatorComponent, + HlmMenuItemIconDirective, - HlmButtonDirective, - HlmIconComponent, + HlmButtonDirective, + HlmIconComponent, - NgFor, - HlmMenuItemCheckComponent, - HlmMenuItemRadioComponent, - ], - providers: [provideIcons({ radixReset })], - template: ` -
- -
- -
-
- Appearance + NgFor, + HlmMenuItemCheckComponent, + HlmMenuItemRadioComponent, + ], + providers: [provideIcons({ radixReset })], + template: ` +
+ +
+ +
+
+ Appearance - + - + - -
+ +
- + - Panel Position + Panel Position -
- -
+
+ +
- + - -
- - `, + +
+ + `, }) export class DropdownWithStatePreviewComponent { - isStatusBar = false; - isPanel = false; - isActivityBar = false; + isStatusBar = false; + isPanel = false; + isActivityBar = false; - panelPositions = ['Top', 'Bottom', 'Right', 'Left'] as const; - selectedPosition: (typeof this.panelPositions)[number] | undefined = 'Bottom'; + panelPositions = ['Top', 'Bottom', 'Right', 'Left'] as const; + selectedPosition: (typeof this.panelPositions)[number] | undefined = 'Bottom'; - reset() { - this.isStatusBar = false; - this.isPanel = false; - this.isActivityBar = false; - this.selectedPosition = 'Bottom'; - } + reset() { + this.isStatusBar = false; + this.isPanel = false; + this.isActivityBar = false; + this.selectedPosition = 'Bottom'; + } } export const dropdownWithStateCode = ` diff --git a/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.page.ts b/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.page.ts index 4580ef34d..7b1f57d9b 100644 --- a/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.page.ts +++ b/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.page.ts @@ -1,80 +1,80 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, HoverCardPreviewComponent } from './hover-card.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Hover Card' }, - meta: metaWith('spartan/ui - Hover Card', 'For sighted users to preview content available behind a link.'), - title: 'spartan/ui - Hover Card', + data: { breadcrumb: 'Hover Card' }, + meta: metaWith('spartan/ui - Hover Card', 'For sighted users to preview content available behind a link.'), + title: 'spartan/ui - Hover Card', }; @Component({ - selector: 'spartan-hover-card', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - HoverCardPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-hover-card', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageBottomNavPlaceholderComponent, + HoverCardPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class CardPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.preview.ts b/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.preview.ts index 79357b0a6..5a8613930 100644 --- a/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(hover-card)/hover-card.preview.ts @@ -1,18 +1,18 @@ import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixCalendar } from '@ng-icons/radix-icons'; +import { HlmAvatarModule } from '@spartan-ng/ui-avatar-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { BrnHoverCardModule } from '@spartan-ng/ui-hovercard-brain'; import { HlmHoverCardModule } from '@spartan-ng/ui-hovercard-helm'; -import { HlmAvatarModule } from '@spartan-ng/ui-avatar-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixCalendar } from '@ng-icons/radix-icons'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; @Component({ - selector: 'spartan-hover-card-preview', - standalone: true, - imports: [BrnHoverCardModule, HlmHoverCardModule, HlmButtonDirective, HlmIconComponent, HlmAvatarModule], - providers: [provideIcons({ radixCalendar })], - template: ` + selector: 'spartan-hover-card-preview', + standalone: true, + imports: [BrnHoverCardModule, HlmHoverCardModule, HlmButtonDirective, HlmIconComponent, HlmAvatarModule], + providers: [provideIcons({ radixCalendar })], + template: `
diff --git a/apps/app/src/app/pages/(components)/components/(input)/input--button.preview.ts b/apps/app/src/app/pages/(components)/components/(input)/input--button.preview.ts index d2b05437a..3cee158c2 100644 --- a/apps/app/src/app/pages/(components)/components/(input)/input--button.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(input)/input--button.preview.ts @@ -1,17 +1,17 @@ import { Component } from '@angular/core'; -import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; @Component({ - selector: 'spartan-input-button', - standalone: true, - imports: [HlmInputDirective, HlmButtonDirective], - template: ` -
- - -
- `, + selector: 'spartan-input-button', + standalone: true, + imports: [HlmInputDirective, HlmButtonDirective], + template: ` +
+ + +
+ `, }) export class InputButtonPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(input)/input--disabled.preview.ts b/apps/app/src/app/pages/(components)/components/(input)/input--disabled.preview.ts index 5f48496b8..2a56aaed0 100644 --- a/apps/app/src/app/pages/(components)/components/(input)/input--disabled.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(input)/input--disabled.preview.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; @Component({ - selector: 'spartan-input-disabled', - standalone: true, - imports: [HlmInputDirective], - template: ``, + selector: 'spartan-input-disabled', + standalone: true, + imports: [HlmInputDirective], + template: ` + + `, }) export class InputDisabledPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(input)/input--file.preview.ts b/apps/app/src/app/pages/(components)/components/(input)/input--file.preview.ts index 5987d9e96..487fa92c9 100644 --- a/apps/app/src/app/pages/(components)/components/(input)/input--file.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(input)/input--file.preview.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; @Component({ - selector: 'spartan-input-file', - standalone: true, - imports: [HlmInputDirective], - template: ``, + selector: 'spartan-input-file', + standalone: true, + imports: [HlmInputDirective], + template: ` + + `, }) export class InputFilePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(input)/input--label.preview.ts b/apps/app/src/app/pages/(components)/components/(input)/input--label.preview.ts index 3c8fe1120..dec91c0c9 100644 --- a/apps/app/src/app/pages/(components)/components/(input)/input--label.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(input)/input--label.preview.ts @@ -3,13 +3,15 @@ import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; @Component({ - selector: 'spartan-input-label', - standalone: true, - imports: [HlmInputDirective, HlmLabelDirective], - template: ` `, + selector: 'spartan-input-label', + standalone: true, + imports: [HlmInputDirective, HlmLabelDirective], + template: ` + + `, }) export class InputLabelPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(input)/input.page.ts b/apps/app/src/app/pages/(components)/components/(input)/input.page.ts index 8dfbb8e4a..189f2f759 100644 --- a/apps/app/src/app/pages/(components)/components/(input)/input.page.ts +++ b/apps/app/src/app/pages/(components)/components/(input)/input.page.ts @@ -1,134 +1,134 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { fileCode, InputFilePreviewComponent } from '~/app/pages/(components)/components/(input)/input--file.preview'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { defaultCode, defaultImports, defaultSkeleton, InputPreviewComponent } from './input.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; -import { fileCode, InputFilePreviewComponent } from '~/app/pages/(components)/components/(input)/input--file.preview'; +import { metaWith } from '~/app/shared/meta/meta.util'; +import { buttonCode, InputButtonPreviewComponent } from './input--button.preview'; import { disabledCode, InputDisabledPreviewComponent } from './input--disabled.preview'; import { InputLabelPreviewComponent, labelCode } from './input--label.preview'; -import { buttonCode, InputButtonPreviewComponent } from './input--button.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { defaultCode, defaultImports, defaultSkeleton, InputPreviewComponent } from './input.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Input' }, - meta: metaWith( - 'spartan/ui - Input', - 'Gives an input field or a component a distinct look that indicates its input capabilities.' - ), - title: 'spartan/ui - Input', + data: { breadcrumb: 'Input' }, + meta: metaWith( + 'spartan/ui - Input', + 'Gives an input field or a component a distinct look that indicates its input capabilities.', + ), + title: 'spartan/ui - Input', }; @Component({ - selector: 'spartan-input', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - InputPreviewComponent, - InputFilePreviewComponent, - InputDisabledPreviewComponent, - InputLabelPreviewComponent, - InputButtonPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-input', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + InputPreviewComponent, + InputFilePreviewComponent, + InputDisabledPreviewComponent, + InputLabelPreviewComponent, + InputButtonPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

File

- -
- -
- - -

Disabled

- -
- -
- - -

With Label

- -
- -
- - -

With Button

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

File

+ +
+ +
+ + +

Disabled

+ +
+ +
+ + +

With Label

+ +
+ +
+ + +

With Button

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class InputPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly fileCode = fileCode; - protected readonly disabledCode = disabledCode; - protected readonly labelCode = labelCode; - protected readonly buttonCode = buttonCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly fileCode = fileCode; + protected readonly disabledCode = disabledCode; + protected readonly labelCode = labelCode; + protected readonly buttonCode = buttonCode; } diff --git a/apps/app/src/app/pages/(components)/components/(input)/input.preview.ts b/apps/app/src/app/pages/(components)/components/(input)/input.preview.ts index 7bad15610..405092f4c 100644 --- a/apps/app/src/app/pages/(components)/components/(input)/input.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(input)/input.preview.ts @@ -2,10 +2,12 @@ import { Component } from '@angular/core'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; @Component({ - selector: 'spartan-input-preview', - standalone: true, - imports: [HlmInputDirective], - template: ``, + selector: 'spartan-input-preview', + standalone: true, + imports: [HlmInputDirective], + template: ` + + `, }) export class InputPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(label)/label.page.ts b/apps/app/src/app/pages/(components)/components/(label)/label.page.ts index 549574b91..06b12ebb6 100644 --- a/apps/app/src/app/pages/(components)/components/(label)/label.page.ts +++ b/apps/app/src/app/pages/(components)/components/(label)/label.page.ts @@ -1,77 +1,77 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, LabelPreviewComponent } from './label.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Label' }, - meta: metaWith('spartan/ui - Label', 'Gives the label a distinct look.'), - title: 'spartan/ui - Label', + data: { breadcrumb: 'Label' }, + meta: metaWith('spartan/ui - Label', 'Gives the label a distinct look.'), + title: 'spartan/ui - Label', }; @Component({ - selector: 'spartan-label', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - LabelPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-label', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + LabelPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(label)/label.preview.ts b/apps/app/src/app/pages/(components)/components/(label)/label.preview.ts index 4f09fc2fa..440d5438b 100644 --- a/apps/app/src/app/pages/(components)/components/(label)/label.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(label)/label.preview.ts @@ -3,15 +3,15 @@ import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; @Component({ - selector: 'spartan-label-preview', - standalone: true, - imports: [HlmLabelDirective, HlmInputDirective], - template: ` - - `, + selector: 'spartan-label-preview', + standalone: true, + imports: [HlmLabelDirective, HlmInputDirective], + template: ` + + `, }) export class LabelPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(menubar)/menubar.page.ts b/apps/app/src/app/pages/(components)/components/(menubar)/menubar.page.ts index 98688faa0..29c45ba80 100644 --- a/apps/app/src/app/pages/(components)/components/(menubar)/menubar.page.ts +++ b/apps/app/src/app/pages/(components)/components/(menubar)/menubar.page.ts @@ -1,83 +1,83 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, MenubarPreviewComponent } from './menubar.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Menubar' }, - meta: metaWith( - 'spartan/ui - Menubar', - 'A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.' - ), - title: 'spartan/ui - Menubar', + data: { breadcrumb: 'Menubar' }, + meta: metaWith( + 'spartan/ui - Menubar', + 'A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.', + ), + title: 'spartan/ui - Menubar', }; @Component({ - selector: 'spartan-menubar', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - MenubarPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-menubar', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + MenubarPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(menubar)/menubar.preview.ts b/apps/app/src/app/pages/(components)/components/(menubar)/menubar.preview.ts index 01d130a30..afdce88d8 100644 --- a/apps/app/src/app/pages/(components)/components/(menubar)/menubar.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(menubar)/menubar.preview.ts @@ -1,185 +1,185 @@ import { Component } from '@angular/core'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnMenuBarDirective, - BrnMenuDirective, - BrnMenuGroupDirective, - BrnMenuItemCheckboxDirective, - BrnMenuItemDirective, - BrnMenuItemRadioDirective, - BrnMenuTriggerDirective, + BrnMenuBarDirective, + BrnMenuDirective, + BrnMenuGroupDirective, + BrnMenuItemCheckboxDirective, + BrnMenuItemDirective, + BrnMenuItemRadioDirective, + BrnMenuTriggerDirective, } from '@spartan-ng/ui-menu-brain'; import { - HlmMenuBarDirective, - HlmMenuBarItemDirective, - HlmMenuDirective, - HlmMenuItemCheckComponent, - HlmMenuItemDirective, - HlmMenuItemIconDirective, - HlmMenuItemRadioComponent, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuSeparatorComponent, - HlmMenuShortcutComponent, - HlmSubMenuDirective, + HlmMenuBarDirective, + HlmMenuBarItemDirective, + HlmMenuDirective, + HlmMenuItemCheckComponent, + HlmMenuItemDirective, + HlmMenuItemIconDirective, + HlmMenuItemRadioComponent, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuSeparatorComponent, + HlmMenuShortcutComponent, + HlmSubMenuDirective, } from '@spartan-ng/ui-menu-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Component({ - selector: 'spartan-menubar-preview', - standalone: true, - imports: [ - BrnMenuBarDirective, - BrnMenuDirective, - BrnMenuItemDirective, - BrnMenuTriggerDirective, - BrnMenuGroupDirective, - BrnMenuItemCheckboxDirective, - BrnMenuItemRadioDirective, - - HlmMenuDirective, - HlmMenuBarDirective, - HlmSubMenuDirective, - HlmMenuItemDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuShortcutComponent, - HlmMenuSeparatorComponent, - HlmMenuItemIconDirective, - HlmMenuBarItemDirective, - HlmMenuItemCheckComponent, - HlmMenuItemRadioComponent, - - HlmButtonDirective, - ], - template: ` -
- - - - -
- - -
-
- - - -
- - - - - - - - -
- - -
- - - -
- - - -
-
- - -
- - - - - - - - - - -
- - -
- - - - - -
- - - -
- - - - - - - - - -
- - - -
- - - - - - - -
- - `, + selector: 'spartan-menubar-preview', + standalone: true, + imports: [ + BrnMenuBarDirective, + BrnMenuDirective, + BrnMenuItemDirective, + BrnMenuTriggerDirective, + BrnMenuGroupDirective, + BrnMenuItemCheckboxDirective, + BrnMenuItemRadioDirective, + + HlmMenuDirective, + HlmMenuBarDirective, + HlmSubMenuDirective, + HlmMenuItemDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuShortcutComponent, + HlmMenuSeparatorComponent, + HlmMenuItemIconDirective, + HlmMenuBarItemDirective, + HlmMenuItemCheckComponent, + HlmMenuItemRadioComponent, + + HlmButtonDirective, + ], + template: ` +
+ + + + +
+ + +
+
+ + + +
+ + + + + + + + +
+ + +
+ + + +
+ + + +
+
+ + +
+ + + + + + + + + + +
+ + +
+ + + + + +
+ + + +
+ + + + + + + + + +
+ + + +
+ + + + + + + +
+ + `, }) export class MenubarPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(popover)/popover.page.ts b/apps/app/src/app/pages/(components)/components/(popover)/popover.page.ts index 69df033c7..b111f6ddf 100644 --- a/apps/app/src/app/pages/(components)/components/(popover)/popover.page.ts +++ b/apps/app/src/app/pages/(components)/components/(popover)/popover.page.ts @@ -1,77 +1,77 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, PopoverPreviewComponent } from './popover.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Popover' }, - meta: metaWith('spartan/ui - Popover', 'Displays rich content in a portal, triggered by a button.'), - title: 'spartan/ui - Popover', + data: { breadcrumb: 'Popover' }, + meta: metaWith('spartan/ui - Popover', 'Displays rich content in a portal, triggered by a button.'), + title: 'spartan/ui - Popover', }; @Component({ - selector: 'spartan-popover', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PopoverPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-popover', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PopoverPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(popover)/popover.preview.ts b/apps/app/src/app/pages/(components)/components/(popover)/popover.preview.ts index c45d930aa..8509f0576 100644 --- a/apps/app/src/app/pages/(components)/components/(popover)/popover.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(popover)/popover.preview.ts @@ -1,58 +1,58 @@ import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { - BrnPopoverCloseDirective, - BrnPopoverComponent, - BrnPopoverContentDirective, - BrnPopoverTriggerDirective, + BrnPopoverCloseDirective, + BrnPopoverComponent, + BrnPopoverContentDirective, + BrnPopoverTriggerDirective, } from '@spartan-ng/ui-popover-brain'; import { HlmPopoverCloseDirective, HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; -import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; @Component({ - selector: 'spartan-popover-preview', - standalone: true, - imports: [ - BrnPopoverComponent, - BrnPopoverTriggerDirective, - BrnPopoverContentDirective, - BrnPopoverCloseDirective, - HlmPopoverContentDirective, - HlmPopoverCloseDirective, - HlmButtonDirective, - HlmLabelDirective, - HlmInputDirective, - ], - template: ` - - -
-
-

Dimensions

-

Set the dimensions for the layer.

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- - `, + selector: 'spartan-popover-preview', + standalone: true, + imports: [ + BrnPopoverComponent, + BrnPopoverTriggerDirective, + BrnPopoverContentDirective, + BrnPopoverCloseDirective, + HlmPopoverContentDirective, + HlmPopoverCloseDirective, + HlmButtonDirective, + HlmLabelDirective, + HlmInputDirective, + ], + template: ` + + +
+
+

Dimensions

+

Set the dimensions for the layer.

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + `, }) export class PopoverPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(progress)/progress--indeterminate.preview.ts b/apps/app/src/app/pages/(components)/components/(progress)/progress--indeterminate.preview.ts index a533e247a..29f5fa61d 100644 --- a/apps/app/src/app/pages/(components)/components/(progress)/progress--indeterminate.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(progress)/progress--indeterminate.preview.ts @@ -3,14 +3,14 @@ import { BrnProgressComponent, BrnProgressIndicatorComponent } from '@spartan-ng import { HlmProgressDirective, HlmProgressIndicatorDirective } from '@spartan-ng/ui-progress-helm'; @Component({ - selector: 'spartan-progress-indeterminate', - standalone: true, - imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective, HlmProgressDirective], - template: ` - - - - `, + selector: 'spartan-progress-indeterminate', + standalone: true, + imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective, HlmProgressDirective], + template: ` + + + + `, }) export class ProgressIndeterminatePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(progress)/progress.page.ts b/apps/app/src/app/pages/(components)/components/(progress)/progress.page.ts index 4cab094c2..737b38433 100644 --- a/apps/app/src/app/pages/(components)/components/(progress)/progress.page.ts +++ b/apps/app/src/app/pages/(components)/components/(progress)/progress.page.ts @@ -1,104 +1,104 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { defaultCode, defaultImports, defaultSkeleton, ProgressPreviewComponent } from './progress.preview'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { indeterminateCode, ProgressIndeterminatePreviewComponent } from './progress--indeterminate.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { defaultCode, defaultImports, defaultSkeleton, ProgressPreviewComponent } from './progress.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Progress' }, - meta: metaWith( - 'spartan/ui - Progress', - 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.' - ), - title: 'spartan/ui - Progress', + data: { breadcrumb: 'Progress' }, + meta: metaWith( + 'spartan/ui - Progress', + 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.', + ), + title: 'spartan/ui - Progress', }; @Component({ - selector: 'spartan-progress', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - ProgressPreviewComponent, - ProgressIndeterminatePreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-progress', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + ProgressPreviewComponent, + ProgressIndeterminatePreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

Indeterminate

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

Indeterminate

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly indeterminateCode = indeterminateCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly indeterminateCode = indeterminateCode; } diff --git a/apps/app/src/app/pages/(components)/components/(progress)/progress.preview.ts b/apps/app/src/app/pages/(components)/components/(progress)/progress.preview.ts index c1d3cae89..319f031a7 100644 --- a/apps/app/src/app/pages/(components)/components/(progress)/progress.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(progress)/progress.preview.ts @@ -3,21 +3,21 @@ import { BrnProgressComponent, BrnProgressIndicatorComponent } from '@spartan-ng import { HlmProgressDirective, HlmProgressIndicatorDirective } from '@spartan-ng/ui-progress-helm'; @Component({ - selector: 'spartan-progress-preview', - standalone: true, - imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective, HlmProgressDirective], - template: ` - - - - `, + selector: 'spartan-progress-preview', + standalone: true, + imports: [BrnProgressComponent, BrnProgressIndicatorComponent, HlmProgressIndicatorDirective, HlmProgressDirective], + template: ` + + + + `, }) export class ProgressPreviewComponent implements OnInit { - value = 0; + value = 0; - ngOnInit() { - setTimeout(() => (this.value = 33), 2000); - } + ngOnInit() { + setTimeout(() => (this.value = 33), 2000); + } } export const defaultCode = ` diff --git a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts index cc1c767d0..890b11e58 100644 --- a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts +++ b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts @@ -1,83 +1,83 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, RadioGroupPreviewComponent } from './radio-group.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Radio Group' }, - meta: metaWith( - 'spartan/ui - Radio Group', - 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.' - ), - title: 'spartan/ui - Radio Group', + data: { breadcrumb: 'Radio Group' }, + meta: metaWith( + 'spartan/ui - Radio Group', + 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.', + ), + title: 'spartan/ui - Radio Group', }; @Component({ - selector: 'spartan-radio-group', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - RadioGroupPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-radio-group', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + RadioGroupPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts index 3dc5618b0..884e27934 100644 --- a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts @@ -5,41 +5,41 @@ import { HlmRadioDirective, HlmRadioGroupDirective, HlmRadioIndicatorComponent } import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm'; @Component({ - selector: 'spartan-radio-group-preview', - standalone: true, - imports: [ - FormsModule, - BrnRadioGroupComponent, - BrnRadioComponent, - HlmRadioIndicatorComponent, - HlmRadioDirective, - HlmRadioGroupDirective, - HlmSmallDirective, - ], - template: ` - Choose a version - - - - v16.1.4 - - - - v16.0.0 - - - - v15.8.0 - - - - v15.2.0 - - - `, + selector: 'spartan-radio-group-preview', + standalone: true, + imports: [ + FormsModule, + BrnRadioGroupComponent, + BrnRadioComponent, + HlmRadioIndicatorComponent, + HlmRadioDirective, + HlmRadioGroupDirective, + HlmSmallDirective, + ], + template: ` + Choose a version + + + + v16.1.4 + + + + v16.0.0 + + + + v15.8.0 + + + + v15.2.0 + + + `, }) export class RadioGroupPreviewComponent { - version: string | null = '16.1.4'; + version: string | null = '16.1.4'; } export const defaultCode = ` diff --git a/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.page.ts b/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.page.ts index 689a6ee70..0eadf4ec7 100644 --- a/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.page.ts +++ b/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.page.ts @@ -1,83 +1,83 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { radixExclamationTriangle } from '@ng-icons/radix-icons'; +import { provideIcons } from '@spartan-ng/ui-icon-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, ScrollAreaPreviewComponent } from './scroll-area.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; -import { provideIcons } from '@spartan-ng/ui-icon-helm'; -import { radixExclamationTriangle } from '@ng-icons/radix-icons'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Scroll Area' }, - meta: metaWith('spartan/ui - Scroll Area', 'Augments native scroll functionality for custom, cross-browser styling.'), - title: 'spartan/ui - Scroll Area', + data: { breadcrumb: 'Scroll Area' }, + meta: metaWith('spartan/ui - Scroll Area', 'Augments native scroll functionality for custom, cross-browser styling.'), + title: 'spartan/ui - Scroll Area', }; @Component({ - selector: 'spartan-scroll-area', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - ScrollAreaPreviewComponent, - InstallationCsComponent, - ], - providers: [provideIcons({ radixExclamationTriangle })], - template: ` -
- + selector: 'spartan-scroll-area', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + ScrollAreaPreviewComponent, + InstallationCsComponent, + ], + providers: [provideIcons({ radixExclamationTriangle })], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.preview.ts b/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.preview.ts index 0b9481dc8..a428e7ef6 100644 --- a/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.preview.ts @@ -1,24 +1,26 @@ -import { Component } from '@angular/core'; import { NgFor } from '@angular/common'; +import { Component } from '@angular/core'; import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm'; @Component({ - selector: 'spartan-scroll-area-preview', - standalone: true, - imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaComponent], - template: ` -
-

Tags

-
- {{ tag }} -
-
-
- `, + selector: 'spartan-scroll-area-preview', + standalone: true, + imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaComponent], + template: ` + +
+

Tags

+
+ {{ tag }} +
+
+
+ + `, }) export class ScrollAreaPreviewComponent { - tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`); + tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`); } export const defaultCode = ` diff --git a/apps/app/src/app/pages/(components)/components/(separator)/separator.page.ts b/apps/app/src/app/pages/(components)/components/(separator)/separator.page.ts index ee9c50f5c..68e96931e 100644 --- a/apps/app/src/app/pages/(components)/components/(separator)/separator.page.ts +++ b/apps/app/src/app/pages/(components)/components/(separator)/separator.page.ts @@ -1,77 +1,77 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, SeparatorPreviewComponent } from './separator.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Separator' }, - meta: metaWith('spartan/ui - Separator', 'Visually or semantically separates content.'), - title: 'spartan/ui - Separator', + data: { breadcrumb: 'Separator' }, + meta: metaWith('spartan/ui - Separator', 'Visually or semantically separates content.'), + title: 'spartan/ui - Separator', }; @Component({ - selector: 'spartan-separator', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - SeparatorPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-separator', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + SeparatorPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(separator)/separator.preview.ts b/apps/app/src/app/pages/(components)/components/(separator)/separator.preview.ts index 03e4a600e..0cfef3cd5 100644 --- a/apps/app/src/app/pages/(components)/components/(separator)/separator.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(separator)/separator.preview.ts @@ -1,27 +1,27 @@ import { Component } from '@angular/core'; -import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm'; import { BrnSeparatorComponent } from '@spartan-ng/ui-separator-brain'; +import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm'; @Component({ - selector: 'spartan-separator-preview', - standalone: true, - imports: [HlmSeparatorDirective, BrnSeparatorComponent], - template: ` -
-
-

Radix Primitives

-

An open-source UI component library.

-
- -
-
Blog
- -
Docs
- -
Source
-
-
- `, + selector: 'spartan-separator-preview', + standalone: true, + imports: [HlmSeparatorDirective, BrnSeparatorComponent], + template: ` +
+
+

Radix Primitives

+

An open-source UI component library.

+
+ +
+
Blog
+ +
Docs
+ +
Source
+
+
+ `, }) export class SeparatorPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(sheet)/sheet--side.preview.ts b/apps/app/src/app/pages/(components)/components/(sheet)/sheet--side.preview.ts index 944050ec4..d38b4de8a 100644 --- a/apps/app/src/app/pages/(components)/components/(sheet)/sheet--side.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(sheet)/sheet--side.preview.ts @@ -1,87 +1,87 @@ import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixCross1 } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { - BrnSheetCloseDirective, - BrnSheetComponent, - BrnSheetContentDirective, - BrnSheetDescriptionDirective, - BrnSheetOverlayComponent, - BrnSheetTitleDirective, - BrnSheetTriggerDirective, + BrnSheetCloseDirective, + BrnSheetComponent, + BrnSheetContentDirective, + BrnSheetDescriptionDirective, + BrnSheetOverlayComponent, + BrnSheetTitleDirective, + BrnSheetTriggerDirective, } from '@spartan-ng/ui-sheet-brain'; import { - HlmSheetCloseDirective, - HlmSheetContentDirective, - HlmSheetDescriptionDirective, - HlmSheetFooterComponent, - HlmSheetHeaderComponent, - HlmSheetOverlayDirective, - HlmSheetTitleDirective, + HlmSheetCloseDirective, + HlmSheetContentDirective, + HlmSheetDescriptionDirective, + HlmSheetFooterComponent, + HlmSheetHeaderComponent, + HlmSheetOverlayDirective, + HlmSheetTitleDirective, } from '@spartan-ng/ui-sheet-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixCross1 } from '@ng-icons/radix-icons'; @Component({ - selector: 'spartan-sheet-side', - standalone: true, - imports: [ - BrnSheetComponent, - BrnSheetOverlayComponent, - BrnSheetTriggerDirective, - BrnSheetContentDirective, - BrnSheetCloseDirective, - BrnSheetTitleDirective, - BrnSheetDescriptionDirective, - HlmSheetOverlayDirective, - HlmSheetContentDirective, - HlmSheetHeaderComponent, - HlmSheetFooterComponent, - HlmSheetTitleDirective, - HlmSheetDescriptionDirective, - HlmSheetCloseDirective, - HlmButtonDirective, - HlmInputDirective, - HlmIconComponent, - HlmLabelDirective, - ], - providers: [provideIcons({ radixCross1 })], - template: ` - - -
- - - - -
-
- -

Edit Profile

-

Make changes to your profile here. Click save when you're done.

- -
-
- - -
-
- - -
-
- - - - -
- - `, + selector: 'spartan-sheet-side', + standalone: true, + imports: [ + BrnSheetComponent, + BrnSheetOverlayComponent, + BrnSheetTriggerDirective, + BrnSheetContentDirective, + BrnSheetCloseDirective, + BrnSheetTitleDirective, + BrnSheetDescriptionDirective, + HlmSheetOverlayDirective, + HlmSheetContentDirective, + HlmSheetHeaderComponent, + HlmSheetFooterComponent, + HlmSheetTitleDirective, + HlmSheetDescriptionDirective, + HlmSheetCloseDirective, + HlmButtonDirective, + HlmInputDirective, + HlmIconComponent, + HlmLabelDirective, + ], + providers: [provideIcons({ radixCross1 })], + template: ` + + +
+ + + + +
+
+ +

Edit Profile

+

Make changes to your profile here. Click save when you're done.

+ +
+
+ + +
+
+ + +
+
+ + + + +
+ + `, }) export class SheetSidePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(sheet)/sheet.page.ts b/apps/app/src/app/pages/(components)/components/(sheet)/sheet.page.ts index da3694ba1..6af56b313 100644 --- a/apps/app/src/app/pages/(components)/components/(sheet)/sheet.page.ts +++ b/apps/app/src/app/pages/(components)/components/(sheet)/sheet.page.ts @@ -1,97 +1,97 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { defaultCode, defaultImports, defaultSkeleton, SheetPreviewComponent } from './sheet.preview'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { SheetSidePreviewComponent, sideCode } from './sheet--side.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { SheetPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './sheet.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Sheet' }, - meta: metaWith( - 'spartan/ui - Sheet', - 'Extends the Dialog component to display content that complements the main content of the screen.' - ), - title: 'spartan/ui - Sheet', + data: { breadcrumb: 'Sheet' }, + meta: metaWith( + 'spartan/ui - Sheet', + 'Extends the Dialog component to display content that complements the main content of the screen.', + ), + title: 'spartan/ui - Sheet', }; @Component({ - selector: 'spartan-sheet', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - SheetPreviewComponent, - SheetSidePreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-sheet', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + SheetPreviewComponent, + SheetSidePreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Sides

- -
- -
- - + Examples +

Sides

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class LabelPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly sideCode = sideCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly sideCode = sideCode; } diff --git a/apps/app/src/app/pages/(components)/components/(sheet)/sheet.preview.ts b/apps/app/src/app/pages/(components)/components/(sheet)/sheet.preview.ts index 30ed09055..a063e9a50 100644 --- a/apps/app/src/app/pages/(components)/components/(sheet)/sheet.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(sheet)/sheet.preview.ts @@ -1,82 +1,82 @@ import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import { radixCross1 } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { - BrnSheetCloseDirective, - BrnSheetComponent, - BrnSheetContentDirective, - BrnSheetDescriptionDirective, - BrnSheetOverlayComponent, - BrnSheetTitleDirective, - BrnSheetTriggerDirective, + BrnSheetCloseDirective, + BrnSheetComponent, + BrnSheetContentDirective, + BrnSheetDescriptionDirective, + BrnSheetOverlayComponent, + BrnSheetTitleDirective, + BrnSheetTriggerDirective, } from '@spartan-ng/ui-sheet-brain'; import { - HlmSheetCloseDirective, - HlmSheetContentDirective, - HlmSheetDescriptionDirective, - HlmSheetFooterComponent, - HlmSheetHeaderComponent, - HlmSheetOverlayDirective, - HlmSheetTitleDirective, + HlmSheetCloseDirective, + HlmSheetContentDirective, + HlmSheetDescriptionDirective, + HlmSheetFooterComponent, + HlmSheetHeaderComponent, + HlmSheetOverlayDirective, + HlmSheetTitleDirective, } from '@spartan-ng/ui-sheet-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixCross1 } from '@ng-icons/radix-icons'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; @Component({ - selector: 'spartan-sheet-preview', - standalone: true, - imports: [ - BrnSheetComponent, - BrnSheetOverlayComponent, - BrnSheetTriggerDirective, - BrnSheetContentDirective, - BrnSheetCloseDirective, - BrnSheetTitleDirective, - BrnSheetDescriptionDirective, - HlmSheetOverlayDirective, - HlmSheetContentDirective, - HlmSheetHeaderComponent, - HlmSheetFooterComponent, - HlmSheetTitleDirective, - HlmSheetDescriptionDirective, - HlmSheetCloseDirective, - HlmButtonDirective, - HlmInputDirective, - HlmIconComponent, - HlmLabelDirective, - ], - providers: [provideIcons({ radixCross1 })], - template: ` - - - -
- -

Edit Profile

-

Make changes to your profile here. Click save when you're done.

- -
-
- - -
-
- - -
-
- - - - -
- - `, + selector: 'spartan-sheet-preview', + standalone: true, + imports: [ + BrnSheetComponent, + BrnSheetOverlayComponent, + BrnSheetTriggerDirective, + BrnSheetContentDirective, + BrnSheetCloseDirective, + BrnSheetTitleDirective, + BrnSheetDescriptionDirective, + HlmSheetOverlayDirective, + HlmSheetContentDirective, + HlmSheetHeaderComponent, + HlmSheetFooterComponent, + HlmSheetTitleDirective, + HlmSheetDescriptionDirective, + HlmSheetCloseDirective, + HlmButtonDirective, + HlmInputDirective, + HlmIconComponent, + HlmLabelDirective, + ], + providers: [provideIcons({ radixCross1 })], + template: ` + + + +
+ +

Edit Profile

+

Make changes to your profile here. Click save when you're done.

+ +
+
+ + +
+
+ + +
+
+ + + + +
+ + `, }) export class SheetPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.page.ts b/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.page.ts index 75f6eae1a..39b744ae9 100644 --- a/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.page.ts +++ b/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.page.ts @@ -1,77 +1,77 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, SkeletonPreviewComponent } from './skeleton.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Skeleton' }, - meta: metaWith('spartan/ui - Skeleton', 'Use to show a placeholder while content is loading.'), - title: 'spartan/ui - Skeleton', + data: { breadcrumb: 'Skeleton' }, + meta: metaWith('spartan/ui - Skeleton', 'Use to show a placeholder while content is loading.'), + title: 'spartan/ui - Skeleton', }; @Component({ - selector: 'spartan-skeleton', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - SkeletonPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-skeleton', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + SkeletonPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class SkeletonPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.preview.ts b/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.preview.ts index b8b2a79be..279a42d21 100644 --- a/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(skeleton)/skeleton.preview.ts @@ -2,18 +2,18 @@ import { Component } from '@angular/core'; import { HlmSkeletonComponent } from '@spartan-ng/ui-skeleton-helm'; @Component({ - selector: 'spartan-skeleton-preview', - standalone: true, - imports: [HlmSkeletonComponent], - template: ` -
- -
- - -
-
- `, + selector: 'spartan-skeleton-preview', + standalone: true, + imports: [HlmSkeletonComponent], + template: ` +
+ +
+ + +
+
+ `, }) export class SkeletonPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(switch)/switch.page.ts b/apps/app/src/app/pages/(components)/components/(switch)/switch.page.ts index e3f7e39ca..753cff6eb 100644 --- a/apps/app/src/app/pages/(components)/components/(switch)/switch.page.ts +++ b/apps/app/src/app/pages/(components)/components/(switch)/switch.page.ts @@ -1,80 +1,80 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { defaultCode, defaultImports, defaultSkeleton, SwitchPreviewComponent } from './switch.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Switch' }, - meta: metaWith('spartan/ui - Switch', 'A control that allows the user to toggle between checked and not checked.'), - title: 'spartan/ui - Switch', + data: { breadcrumb: 'Switch' }, + meta: metaWith('spartan/ui - Switch', 'A control that allows the user to toggle between checked and not checked.'), + title: 'spartan/ui - Switch', }; @Component({ - selector: 'spartan-switch', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - SwitchPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-switch', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + SwitchPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class SkeletonPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(switch)/switch.preview.ts b/apps/app/src/app/pages/(components)/components/(switch)/switch.preview.ts index 6995b9dad..9e771e4ae 100644 --- a/apps/app/src/app/pages/(components)/components/(switch)/switch.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(switch)/switch.preview.ts @@ -4,23 +4,23 @@ import { BrnSwitchComponent, BrnSwitchThumbComponent } from '@spartan-ng/ui-swit import { HlmSwitchDirective, HlmSwitchThumbDirective } from '@spartan-ng/ui-switch-helm'; @Component({ - selector: 'spartan-switch-preview', - standalone: true, - imports: [ - HlmLabelDirective, - BrnSwitchComponent, - BrnSwitchThumbComponent, - HlmSwitchDirective, - HlmSwitchThumbDirective, - ], - template: ` - - `, + selector: 'spartan-switch-preview', + standalone: true, + imports: [ + HlmLabelDirective, + BrnSwitchComponent, + BrnSwitchThumbComponent, + HlmSwitchDirective, + HlmSwitchThumbDirective, + ], + template: ` + + `, }) export class SwitchPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(tabs)/tabs--vertical.preview.ts b/apps/app/src/app/pages/(components)/components/(tabs)/tabs--vertical.preview.ts index 893f07593..b7a39cba4 100644 --- a/apps/app/src/app/pages/(components)/components/(tabs)/tabs--vertical.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(tabs)/tabs--vertical.preview.ts @@ -1,114 +1,114 @@ import { Component } from '@angular/core'; +import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnTabsComponent, - BrnTabsContentDirective, - BrnTabsListComponent, - BrnTabsTriggerDirective, -} from '@spartan-ng/ui-tabs-brain'; -import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm'; -import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; +import { + BrnTabsComponent, + BrnTabsContentDirective, + BrnTabsListComponent, + BrnTabsTriggerDirective, +} from '@spartan-ng/ui-tabs-brain'; +import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm'; @Component({ - selector: 'spartan-tabs-vertical', - standalone: true, - imports: [ - BrnTabsComponent, - BrnTabsListComponent, - BrnTabsTriggerDirective, - BrnTabsContentDirective, + selector: 'spartan-tabs-vertical', + standalone: true, + imports: [ + BrnTabsComponent, + BrnTabsListComponent, + BrnTabsTriggerDirective, + BrnTabsContentDirective, - HlmTabsListDirective, - HlmTabsTriggerDirective, - HlmTabsContentDirective, + HlmTabsListDirective, + HlmTabsTriggerDirective, + HlmTabsContentDirective, - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, - HlmLabelDirective, - HlmInputDirective, - HlmButtonDirective, - HlmBadgeDirective, - ], - host: { - class: 'block w-full max-w-lg min-h-[400px]', - }, - template: ` - - - - - - -
-
-
-

Account

-

Make changes to your account here. Click save when you're done.

-
-

- - -

-
- -
-
-
-
-
-
-

Password

-

Change your password here. After saving, you'll be logged out.

-
-

- - -

-
- -
-
-
-
-
-
-

Delete Account

-

Are you sure you want to delete your account? You cannot undo this action.

-
-
- -
-
-
- - `, + HlmLabelDirective, + HlmInputDirective, + HlmButtonDirective, + HlmBadgeDirective, + ], + host: { + class: 'block w-full max-w-lg min-h-[400px]', + }, + template: ` + + + + + + +
+
+
+

Account

+

Make changes to your account here. Click save when you're done.

+
+

+ + +

+
+ +
+
+
+
+
+
+

Password

+

Change your password here. After saving, you'll be logged out.

+
+

+ + +

+
+ +
+
+
+
+
+
+

Delete Account

+

Are you sure you want to delete your account? You cannot undo this action.

+
+
+ +
+
+
+ + `, }) export class TabsVerticalPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts b/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts index 11359ab07..fb9f002e6 100644 --- a/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts +++ b/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts @@ -1,107 +1,107 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { InputPreviewComponent } from '~/app/pages/(components)/components/(input)/input.preview'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { defaultCode, defaultImports, defaultSkeleton, TabsPreviewComponent } from './tabs.preview'; -import { InputPreviewComponent } from '~/app/pages/(components)/components/(input)/input.preview'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { TabsVerticalPreviewComponent, verticalCode } from './tabs--vertical.preview'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { TabsPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './tabs.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Tabs' }, - meta: metaWith( - 'spartan/ui - Tabs', - 'A set of layered sections of content—known as tab panels—that are displayed one at a time.' - ), - title: 'spartan/ui - Tabs', + data: { breadcrumb: 'Tabs' }, + meta: metaWith( + 'spartan/ui - Tabs', + 'A set of layered sections of content—known as tab panels—that are displayed one at a time.', + ), + title: 'spartan/ui - Tabs', }; @Component({ - selector: 'spartan-tabs-page', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - TabsPreviewComponent, - InputPreviewComponent, - TabsVerticalPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-tabs-page', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + TabsPreviewComponent, + InputPreviewComponent, + TabsVerticalPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

Vertical

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

Vertical

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class TabsPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; - protected readonly verticalCode = verticalCode; + protected readonly verticalCode = verticalCode; } diff --git a/apps/app/src/app/pages/(components)/components/(tabs)/tabs.preview.ts b/apps/app/src/app/pages/(components)/components/(tabs)/tabs.preview.ts index 50444e2fd..dc21cab99 100644 --- a/apps/app/src/app/pages/(components)/components/(tabs)/tabs.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(tabs)/tabs.preview.ts @@ -1,102 +1,102 @@ import { Component } from '@angular/core'; +import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - BrnTabsComponent, - BrnTabsContentDirective, - BrnTabsListComponent, - BrnTabsTriggerDirective, -} from '@spartan-ng/ui-tabs-brain'; -import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm'; -import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; -import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; +import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; +import { + BrnTabsComponent, + BrnTabsContentDirective, + BrnTabsListComponent, + BrnTabsTriggerDirective, +} from '@spartan-ng/ui-tabs-brain'; +import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm'; @Component({ - selector: 'spartan-tabs-preview', - standalone: true, - imports: [ - BrnTabsComponent, - BrnTabsListComponent, - BrnTabsTriggerDirective, - BrnTabsContentDirective, + selector: 'spartan-tabs-preview', + standalone: true, + imports: [ + BrnTabsComponent, + BrnTabsListComponent, + BrnTabsTriggerDirective, + BrnTabsContentDirective, - HlmTabsListDirective, - HlmTabsTriggerDirective, - HlmTabsContentDirective, + HlmTabsListDirective, + HlmTabsTriggerDirective, + HlmTabsContentDirective, - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, - HlmLabelDirective, - HlmInputDirective, - HlmButtonDirective, - HlmBadgeDirective, - ], - host: { - class: 'block w-full max-w-lg', - }, - template: ` - - - - - -
-
-
-

Account

-

Make changes to your account here. Click save when you're done.

-
-

- - -

-
- -
-
-
-
-
-
-

Password

-

Change your password here. After saving, you'll be logged out.

-
-

- - -

-
- -
-
-
- - `, + HlmLabelDirective, + HlmInputDirective, + HlmButtonDirective, + HlmBadgeDirective, + ], + host: { + class: 'block w-full max-w-lg', + }, + template: ` + + + + + +
+
+
+

Account

+

Make changes to your account here. Click save when you're done.

+
+

+ + +

+
+ +
+
+
+
+
+
+

Password

+

Change your password here. After saving, you'll be logged out.

+
+

+ + +

+
+ +
+
+
+ + `, }) export class TabsPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(textarea)/textarea.page.ts b/apps/app/src/app/pages/(components)/components/(textarea)/textarea.page.ts index ef2fa9993..651e90b71 100644 --- a/apps/app/src/app/pages/(components)/components/(textarea)/textarea.page.ts +++ b/apps/app/src/app/pages/(components)/components/(textarea)/textarea.page.ts @@ -1,91 +1,92 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { defaultCode, defaultImports, defaultSkeleton, TextAreaPreviewComponent } from './textarea.preview'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; +import { TextAreaPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './textarea.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Textarea' }, - meta: metaWith( - 'spartan/ui - Textarea', - 'Gives a textarea field or a component a distinct look that indicates its input capabilities.' - ), - title: 'spartan/ui - Textarea', + data: { breadcrumb: 'Textarea' }, + meta: metaWith( + 'spartan/ui - Textarea', + 'Gives a textarea field or a component a distinct look that indicates its input capabilities.', + ), + title: 'spartan/ui - Textarea', }; @Component({ - selector: 'spartan-textarea', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - TextAreaPreviewComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-textarea', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + TextAreaPreviewComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Note -

- To get that same distinct look of a spartan/ui input we can simply apply the same - hlmInput directive we would apply to other input elements. -

+ Note +

+ To get that same distinct look of a spartan/ui input we can simply apply the same + hlmInput + directive we would apply to other input elements. +

- Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class TextAreaPageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; } diff --git a/apps/app/src/app/pages/(components)/components/(textarea)/textarea.preview.ts b/apps/app/src/app/pages/(components)/components/(textarea)/textarea.preview.ts index 2ec4ae8ba..46a511305 100644 --- a/apps/app/src/app/pages/(components)/components/(textarea)/textarea.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(textarea)/textarea.preview.ts @@ -2,13 +2,15 @@ import { Component } from '@angular/core'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; @Component({ - selector: 'spartan-textarea-preview', - standalone: true, - host: { - class: 'w-full', - }, - imports: [HlmInputDirective], - template: ` `, + selector: 'spartan-textarea-preview', + standalone: true, + host: { + class: 'w-full', + }, + imports: [HlmInputDirective], + template: ` + + `, }) export class TextAreaPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--disabled.preview.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--disabled.preview.ts index a4a06f4be..cf7fa9b92 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--disabled.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--disabled.preview.ts @@ -1,20 +1,20 @@ import { Component } from '@angular/core'; -import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; -import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixUnderline } from '@ng-icons/radix-icons'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; +import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; @Component({ - selector: 'spartan-toggle-disabled', - standalone: true, - imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], - providers: [provideIcons({ radixUnderline })], - template: ` - - `, + selector: 'spartan-toggle-disabled', + standalone: true, + imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], + providers: [provideIcons({ radixUnderline })], + template: ` + + `, }) export class ToggleDisabledPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--large.preview.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--large.preview.ts index 2263fa5b8..ba40a1997 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--large.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--large.preview.ts @@ -1,20 +1,20 @@ import { Component } from '@angular/core'; -import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; -import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixFontItalic } from '@ng-icons/radix-icons'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; +import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; @Component({ - selector: 'spartan-toggle-large', - standalone: true, - imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], - providers: [provideIcons({ radixFontItalic })], - template: ` - - `, + selector: 'spartan-toggle-large', + standalone: true, + imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], + providers: [provideIcons({ radixFontItalic })], + template: ` + + `, }) export class ToggleLargePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--outline.preview.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--outline.preview.ts index 8020fc90e..ada8c0dad 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--outline.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--outline.preview.ts @@ -1,20 +1,20 @@ import { Component } from '@angular/core'; -import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; -import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixFontItalic } from '@ng-icons/radix-icons'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; +import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; @Component({ - selector: 'spartan-toggle-outline', - standalone: true, - imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], - providers: [provideIcons({ radixFontItalic })], - template: ` - - `, + selector: 'spartan-toggle-outline', + standalone: true, + imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], + providers: [provideIcons({ radixFontItalic })], + template: ` + + `, }) export class ToggleOutlinePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--small.preview.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--small.preview.ts index 9235168fe..a4217e3d8 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--small.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--small.preview.ts @@ -1,20 +1,20 @@ import { Component } from '@angular/core'; -import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; -import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixFontItalic } from '@ng-icons/radix-icons'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; +import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; @Component({ - selector: 'spartan-toggle-small', - standalone: true, - imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], - providers: [provideIcons({ radixFontItalic })], - template: ` - - `, + selector: 'spartan-toggle-small', + standalone: true, + imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], + providers: [provideIcons({ radixFontItalic })], + template: ` + + `, }) export class ToggleSmallPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--with-text.preview.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--with-text.preview.ts index 4e9e65070..33f58092b 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle--with-text.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle--with-text.preview.ts @@ -1,21 +1,21 @@ import { Component } from '@angular/core'; -import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; -import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixFontItalic } from '@ng-icons/radix-icons'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; +import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; @Component({ - selector: 'spartan-toggle-with-text', - standalone: true, - imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], - providers: [provideIcons({ radixFontItalic })], - template: ` - - `, + selector: 'spartan-toggle-with-text', + standalone: true, + imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], + providers: [provideIcons({ radixFontItalic })], + template: ` + + `, }) export class ToggleWithTextPreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle.page.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle.page.ts index 15ab74c24..dd12c8e21 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle.page.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle.page.ts @@ -1,140 +1,140 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { Component } from '@angular/core'; +import { hlmH4 } from '@spartan-ng/ui-typography-helm'; +import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { hlmH4 } from '@spartan-ng/ui-typography-helm'; -import { defaultCode, defaultImports, defaultSkeleton, TogglePreviewComponent } from './toggle.preview'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { disabledCode, ToggleDisabledPreviewComponent } from './toggle--disabled.preview'; import { largeCode, ToggleLargePreviewComponent } from './toggle--large.preview'; import { outlineCode, ToggleOutlinePreviewComponent } from './toggle--outline.preview'; import { smallCode, ToggleSmallPreviewComponent } from './toggle--small.preview'; import { ToggleWithTextPreviewComponent, withTextCode } from './toggle--with-text.preview'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; -import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component'; +import { defaultCode, defaultImports, defaultSkeleton, TogglePreviewComponent } from './toggle.preview'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Toggle' }, - meta: metaWith('spartan/ui - Toggle', 'A two-state button that can be either on or off.'), - title: 'spartan/ui - Toggle', + data: { breadcrumb: 'Toggle' }, + meta: metaWith('spartan/ui - Toggle', 'A two-state button that can be either on or off.'), + title: 'spartan/ui - Toggle', }; @Component({ - selector: 'spartan-input', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - TogglePreviewComponent, - ToggleDisabledPreviewComponent, - ToggleLargePreviewComponent, - ToggleOutlinePreviewComponent, - ToggleSmallPreviewComponent, - ToggleWithTextPreviewComponent, - PageBottomNavPlaceholderComponent, - InstallationCsComponent, - ], - template: ` -
- + selector: 'spartan-input', + standalone: true, + imports: [ + MainSectionDirective, + CodeComponent, + SectionIntroComponent, + SectionSubHeadingComponent, + TabsComponent, + CodePreviewDirective, + PageNavLinkComponent, + PageNavComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + TogglePreviewComponent, + ToggleDisabledPreviewComponent, + ToggleLargePreviewComponent, + ToggleOutlinePreviewComponent, + ToggleSmallPreviewComponent, + ToggleWithTextPreviewComponent, + PageBottomNavPlaceholderComponent, + InstallationCsComponent, + ], + template: ` +
+ - -
- -
- - + +
+ +
+ + - Installation - - - - + Installation + + + + - Usage -
- - -
+ Usage +
+ + +
- Examples -

Default

- -
- -
- - -

Outline

- -
- -
- - -

With Text

- -
- -
- - -

Small

- -
- -
- - -

Large

- -
- -
- - -

Disabled

- -
- -
- - + Examples +

Default

+ +
+ +
+ + +

Outline

+ +
+ +
+ + +

With Text

+ +
+ +
+ + +

Small

+ +
+ +
+ + +

Large

+ +
+ +
+ + +

Disabled

+ +
+ +
+ + - - - - -
- - - - - - `, + + + + +
+ + + + + + `, }) export default class TogglePageComponent { - protected readonly defaultCode = defaultCode; - protected readonly defaultSkeleton = defaultSkeleton; - protected readonly defaultImports = defaultImports; - protected readonly disabledCode = disabledCode; - protected readonly largeCode = largeCode; - protected readonly outlineCode = outlineCode; - protected readonly smallCode = smallCode; - protected readonly withTextCode = withTextCode; + protected readonly defaultCode = defaultCode; + protected readonly defaultSkeleton = defaultSkeleton; + protected readonly defaultImports = defaultImports; + protected readonly disabledCode = disabledCode; + protected readonly largeCode = largeCode; + protected readonly outlineCode = outlineCode; + protected readonly smallCode = smallCode; + protected readonly withTextCode = withTextCode; } diff --git a/apps/app/src/app/pages/(components)/components/(toggle)/toggle.preview.ts b/apps/app/src/app/pages/(components)/components/(toggle)/toggle.preview.ts index 137f075a6..de6bd3128 100644 --- a/apps/app/src/app/pages/(components)/components/(toggle)/toggle.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(toggle)/toggle.preview.ts @@ -1,20 +1,20 @@ import { Component } from '@angular/core'; -import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; -import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; import { provideIcons } from '@ng-icons/core'; import { radixFontItalic } from '@ng-icons/radix-icons'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain'; +import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm'; @Component({ - selector: 'spartan-toggle-preview', - standalone: true, - imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], - providers: [provideIcons({ radixFontItalic })], - template: ` - - `, + selector: 'spartan-toggle-preview', + standalone: true, + imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent], + providers: [provideIcons({ radixFontItalic })], + template: ` + + `, }) export class TogglePreviewComponent {} diff --git a/apps/app/src/app/pages/(components)/components/[...not-found].page.ts b/apps/app/src/app/pages/(components)/components/[...not-found].page.ts index 2f96c0367..268153b7d 100644 --- a/apps/app/src/app/pages/(components)/components/[...not-found].page.ts +++ b/apps/app/src/app/pages/(components)/components/[...not-found].page.ts @@ -1,25 +1,25 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; import { hlmMuted } from '@spartan-ng/ui-typography-helm'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Not Found' }, - meta: metaWith('spartan/ui - Page not found', 'Seems like you got lost browsing spartan/ui.'), - title: 'spartan/ui - Page not found', + data: { breadcrumb: 'Not Found' }, + meta: metaWith('spartan/ui - Page not found', 'Seems like you got lost browsing spartan/ui.'), + title: 'spartan/ui - Page not found', }; @Component({ - selector: 'spartan-components-not-found', - standalone: true, - imports: [MainSectionDirective], - template: ` -
-
-

Coming soon...

-
-
- `, + selector: 'spartan-components-not-found', + standalone: true, + imports: [MainSectionDirective], + template: ` +
+
+

Coming soon...

+
+
+ `, }) export default class ComponentsNotFoundPageComponent {} diff --git a/apps/app/src/app/pages/(components)/components/index.page.ts b/apps/app/src/app/pages/(components)/components/index.page.ts index da726a4d3..bbe8a5022 100644 --- a/apps/app/src/app/pages/(components)/components/index.page.ts +++ b/apps/app/src/app/pages/(components)/components/index.page.ts @@ -1,6 +1,6 @@ import { RouteMeta } from '@analogjs/router'; export const routeMeta: RouteMeta = { - redirectTo: '/components/accordion', - pathMatch: 'full', + redirectTo: '/components/accordion', + pathMatch: 'full', }; diff --git a/apps/app/src/app/pages/(components)/components/installation-cs.component.ts b/apps/app/src/app/pages/(components)/components/installation-cs.component.ts index a3da1bc82..48a005dfa 100644 --- a/apps/app/src/app/pages/(components)/components/installation-cs.component.ts +++ b/apps/app/src/app/pages/(components)/components/installation-cs.component.ts @@ -1,11 +1,13 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-installation-cs', - standalone: true, - host: { - class: 'p-20 flex items-center justify-center ', - }, - template: `Coming soon...`, + selector: 'spartan-installation-cs', + standalone: true, + host: { + class: 'p-20 flex items-center justify-center ', + }, + template: ` + Coming soon... + `, }) export class InstallationCsComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation.page.ts b/apps/app/src/app/pages/(documentation)/documentation.page.ts index cbfee36c3..7904d7098 100644 --- a/apps/app/src/app/pages/(documentation)/documentation.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation.page.ts @@ -1,16 +1,18 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; +import { Component } from '@angular/core'; import { PageComponent } from '~/app/shared/layout/page.component'; export const routeMeta: RouteMeta = { - data: { - breadcrumb: 'Docs', - }, + data: { + breadcrumb: 'Docs', + }, }; @Component({ - selector: 'spartan-documentation', - standalone: true, - imports: [PageComponent], - template: ` `, + selector: 'spartan-documentation', + standalone: true, + imports: [PageComponent], + template: ` + + `, }) export default class ExamplesPageComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.page.ts index a37e1cf1d..18b225322 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.page.ts @@ -1,69 +1,69 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { + hlmBlockquote, + hlmCode, + hlmH1, + hlmH2, + hlmH3, + hlmH4, + hlmLarge, + hlmLead, + hlmMuted, + hlmP, + hlmSmall, + hlmUl, +} from '@spartan-ng/ui-typography-helm'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { CodeComponent } from '~/app/shared/code/code.component'; -import { - hlmBlockquote, - hlmCode, - hlmH1, - hlmH2, - hlmH3, - hlmH4, - hlmLarge, - hlmLead, - hlmMuted, - hlmP, - hlmSmall, - hlmUl, -} from '@spartan-ng/ui-typography-helm'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; import TypographyPreviewComponent, { - blockquoteCode, - codeCode, - h1Code, - h2Code, - h3Code, - h4Code, - largeCode, - leadCode, - listCode, - mutedCode, - pCode, - smallCode, - themingCode, + blockquoteCode, + codeCode, + h1Code, + h2Code, + h3Code, + h4Code, + largeCode, + leadCode, + listCode, + mutedCode, + pCode, + smallCode, + themingCode, } from './typography.preview'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Typography' }, - meta: metaWith('spartan - Typography', 'Styles for headings, paragraphs, lists... etc.'), - title: 'spartan - Typography', + data: { breadcrumb: 'Typography' }, + meta: metaWith('spartan - Typography', 'Styles for headings, paragraphs, lists... etc.'), + title: 'spartan - Typography', }; @Component({ - selector: 'spartan-dark-mode', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - SectionSubHeadingComponent, - CodeComponent, - TabsComponent, - TypographyPreviewComponent, - CodePreviewDirective, - PageNavLinkComponent, - ], - template: ` + selector: 'spartan-dark-mode', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageNavComponent, + SectionSubHeadingComponent, + CodeComponent, + TabsComponent, + TypographyPreviewComponent, + CodePreviewDirective, + PageNavLinkComponent, + ], + template: `
@@ -199,17 +199,17 @@ export const routeMeta: RouteMeta = { `, }) export default class TypographyPageComponent { - protected readonly themingCode = themingCode; - protected readonly h1Code = h1Code; - protected readonly h2Code = h2Code; - protected readonly h3Code = h3Code; - protected readonly h4Code = h4Code; - protected readonly pCode = pCode; - protected readonly blockquoteCode = blockquoteCode; - protected readonly listCode = listCode; - protected readonly codeCode = codeCode; - protected readonly mutedCode = mutedCode; - protected readonly smallCode = smallCode; - protected readonly largeCode = largeCode; - protected readonly leadCode = leadCode; + protected readonly themingCode = themingCode; + protected readonly h1Code = h1Code; + protected readonly h2Code = h2Code; + protected readonly h3Code = h3Code; + protected readonly h4Code = h4Code; + protected readonly pCode = pCode; + protected readonly blockquoteCode = blockquoteCode; + protected readonly listCode = listCode; + protected readonly codeCode = codeCode; + protected readonly mutedCode = mutedCode; + protected readonly smallCode = smallCode; + protected readonly largeCode = largeCode; + protected readonly leadCode = leadCode; } diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.preview.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.preview.ts index a6a7f6830..482f3998a 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.preview.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/(typography)/typography.preview.ts @@ -2,54 +2,54 @@ import { Component } from '@angular/core'; import { hlmBlockquote, hlmH1, hlmH2, hlmH3, hlmLead, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; @Component({ - selector: 'spartan-typography-preview', - standalone: true, - template: ` -

The Joke Tax Chronicles

-

- Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, - his advisors came to him with a problem: the kingdom was running out of money. -

-

The King's Plan

-

- The king thought long and hard, and finally came up with a brilliant plan : he would tax the jokes in the kingdom. -

-
- "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." -
-

The Joke Tax

-

The king's subjects were not amused. They grumbled and complained, but the king was firm:

-
    -
  • 1st level of puns: 5 gold coins
    • -
  • 2nd level of jokes: 10 gold coins
    • -
  • 3rd level of one-liners : 20 gold coins
    • -
-

- As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused - to let the king's foolishness get him down: a court jester named Jokester. -

-

Jokester's Revolt

-

- Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the - king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. -

-

- And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they - couldn't help but laugh. And once they started laughing, they couldn't stop. -

-

The People's Rebellion

-

- The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the - entire kingdom was in on the joke. -

-

- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. - Jokester was declared a hero, and the kingdom lived happily ever after. -

-

- The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas. -

- `, + selector: 'spartan-typography-preview', + standalone: true, + template: ` +

The Joke Tax Chronicles

+

+ Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, + his advisors came to him with a problem: the kingdom was running out of money. +

+

The King's Plan

+

+ The king thought long and hard, and finally came up with a brilliant plan : he would tax the jokes in the kingdom. +

+
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." +
+

The Joke Tax

+

The king's subjects were not amused. They grumbled and complained, but the king was firm:

+
    +
  • 1st level of puns: 5 gold coins
    • +
  • 2nd level of jokes: 10 gold coins
    • +
  • 3rd level of one-liners : 20 gold coins
    • +
+

+ As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused + to let the king's foolishness get him down: a court jester named Jokester. +

+

Jokester's Revolt

+

+ Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the + king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. +

+

+ And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they + couldn't help but laugh. And once they started laughing, they couldn't stop. +

+

The People's Rebellion

+

+ The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the + entire kingdom was in on the joke. +

+

+ The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. + Jokester was declared a hero, and the kingdom lived happily ever after. +

+

+ The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas. +

+ `, }) export default class TypographyPreviewComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts index 918ccf7be..c9ae12bdf 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts @@ -1,57 +1,59 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; -import { CodeComponent } from '~/app/shared/code/code.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Dark Mode' }, - meta: metaWith('spartan - Dark Mode', 'Adding dark mode to your site.'), - title: 'spartan - Dark Mode', + data: { breadcrumb: 'Dark Mode' }, + meta: metaWith('spartan - Dark Mode', 'Adding dark mode to your site.'), + title: 'spartan - Dark Mode', }; @Component({ - selector: 'spartan-dark-mode', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - SectionSubHeadingComponent, - CodeComponent, - ], - template: ` -
- -
-

- spartan/ui is built on TailwindCSS with custom CSS variables. These variables - change based on whether or not a dark class is applied to the root element of - your page. -

-

- Here is a comprehensive guide on how to toggle that class with Angular: - Dark mode with Analog & Tailwind -

-
- - - - -
- `, + selector: 'spartan-dark-mode', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageNavComponent, + SectionSubHeadingComponent, + CodeComponent, + ], + template: ` +
+ +
+

+ spartan/ui + is built on TailwindCSS with custom CSS variables. These variables change based on whether or not a + dark + class is applied to the root element of your page. +

+

+ Here is a comprehensive guide on how to toggle that class with Angular: + + Dark mode with Analog & Tailwind + +

+
+ + + + +
+ `, }) export default class DarkModePageComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts index 14d152b36..b3a4a0226 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts @@ -1,81 +1,85 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; -import { CodeComponent } from '~/app/shared/code/code.component'; -import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Figma' }, - meta: metaWith( - 'spartan - Figma', - 'Every component recreated in Figma. With customizable props, typography and icons.' - ), - title: 'spartan - Figma', + data: { breadcrumb: 'Figma' }, + meta: metaWith( + 'spartan - Figma', + 'Every component recreated in Figma. With customizable props, typography and icons.', + ), + title: 'spartan - Figma', }; @Component({ - selector: 'spartan-figma', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - SectionSubHeadingComponent, - CodeComponent, - HlmAspectRatioDirective, - PageNavLinkComponent, - ], - template: ` -
- -
-

- Since spartan/ui proudly & shamelessly piggy backs on top of the incredible - work by shadcn, it can leverage their (non Angular specific) ecosystem. -

-

- That means we get access to incredibly work like - Pietro Schirano's - Figma UI Kit! -

-
- -
-
- Grab a copy - https://www.figma.com/community/file/1203061493325953101 - - - - -
+ selector: 'spartan-figma', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageNavComponent, + SectionSubHeadingComponent, + CodeComponent, + HlmAspectRatioDirective, + PageNavLinkComponent, + ], + template: ` +
+ +
+

+ Since + spartan/ui + proudly & shamelessly piggy backs on top of the incredible work by + shadcn, + it can leverage their (non Angular specific) ecosystem. +

+

+ That means we get access to incredibly work like + + Pietro Schirano's + + Figma UI Kit! +

+
+ +
+
+ Grab a copy + + https://www.figma.com/community/file/1203061493325953101 + + + + + +
- - - - `, + + + + `, }) export default class FigmaPageComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts index 6f9cec7a1..56c00f95d 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts @@ -1,46 +1,46 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { radixChevronRight, radixExclamationTriangle } from '@ng-icons/radix-icons'; +import { HlmAlertModule } from '@spartan-ng/ui-alert-helm'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; -import { CodeComponent } from '~/app/shared/code/code.component'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; -import { RouterLink } from '@angular/router'; -import { radixChevronRight, radixExclamationTriangle } from '@ng-icons/radix-icons'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { HlmAlertModule } from '@spartan-ng/ui-alert-helm'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Installation' }, - meta: metaWith('spartan - Installation', 'Getting up and running with spartan'), - title: 'spartan - Installation', + data: { breadcrumb: 'Installation' }, + meta: metaWith('spartan - Installation', 'Getting up and running with spartan'), + title: 'spartan - Installation', }; @Component({ - selector: 'spartan-installation', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - SectionSubHeadingComponent, - CodeComponent, - HlmButtonDirective, - HlmIconComponent, - RouterLink, - PageNavLinkComponent, - HlmAlertModule, - ], - providers: [provideIcons({ radixChevronRight, radixExclamationTriangle })], - template: ` + selector: 'spartan-installation', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageNavComponent, + SectionSubHeadingComponent, + CodeComponent, + HlmButtonDirective, + HlmIconComponent, + RouterLink, + PageNavLinkComponent, + HlmAlertModule, + ], + providers: [provideIcons({ radixChevronRight, radixExclamationTriangle })], + template: `
diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts index 9d317fef0..49ad18e3e 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts @@ -1,236 +1,250 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { HlmAlertDirective } from '@spartan-ng/ui-alert-helm'; +import { hlmCode, hlmH4, hlmP, hlmSmall } from '@spartan-ng/ui-typography-helm'; +import { CodeComponent } from '~/app/shared/code/code.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { hlmCode, hlmH4, hlmP, hlmSmall } from '@spartan-ng/ui-typography-helm'; -import { CodeComponent } from '~/app/shared/code/code.component'; -import { HlmAlertDirective } from '@spartan-ng/ui-alert-helm'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Theming' }, - meta: metaWith('spartan - Theming', 'Using CSS Variables for theming.'), - title: 'spartan - Theming', + data: { breadcrumb: 'Theming' }, + meta: metaWith('spartan - Theming', 'Using CSS Variables for theming.'), + title: 'spartan - Theming', }; @Component({ - selector: 'spartan-theming', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - SectionSubHeadingComponent, - CodeComponent, - HlmAlertDirective, - PageNavLinkComponent, - ], - template: ` -
- -
-

- spartan/ui is built on TailwindCSS with custom CSS variables: -

- -
- Convention -
-

- As shadcn, we use a simple background and - foreground convention for colors. The - background variable is used for the background color of the component and the - foreground variable is used for the text color. -

-
- The background suffix is omitted when the variable is used for the background - color of the component. -
-

Given the following CSS variables:

- +
+

+ spartan/ui + is built on TailwindCSS with custom CSS variables: +

+ +
+ Convention +
+

+ As shadcn, we use a simple + background + and + foreground + convention for colors. The + background + variable is used for the background color of the component and the + foreground + variable is used for the text color. +

+
+ The + background + suffix is omitted when the variable is used for the background color of the component. +
+

Given the following CSS variables:

+ -

- The background color of the following component will be - hsl(var(--primary)) and the foreground color - will be hsl(var(--primary-foreground)). -

- -
-

- CSS variables must be defined without color space function. - See the - - Tailwind CSS documentation - - for more information. -

-
-
+ /> +

+ The + background + color of the following component will be + hsl(var(--primary)) + and the + foreground + color will be + hsl(var(--primary-foreground)) + . +

+ +
+

+ CSS variables must be defined without color space function. + See the + + Tailwind CSS documentation + + for more information. +

+
+
- List of variables -
-

Here's the list of variables available for customization:

-
-
-
-
- Default background color of <body>,... etc. - List of variables +
+

Here's the list of variables available for customization:

+
+
+
+
+ Default background color of <body>,... etc. + -
+ /> +
-
- Muted backgrounds such as <hlm-sekleton/> - + Muted backgrounds such as <hlm-sekleton/> + -
+ /> +
-
- Background color for <div hlmCard>...</> - + Background color for <div hlmCard>...</> + -
+ /> +
-
- Background color for popovers such as <brn-popover>...</> - + Background color for popovers such as <brn-popover>...</> + -
+ /> +
-
- Default border color - + Default border color + -
+ /> +
-
- Border color for inputs such as <input hlmInput />, <textarea hlmInput >...</> - + Border color for inputs such as <input hlmInput />, <textarea hlmInput >...</> + -
+ /> +
-
- Primary colors for <button hlmBtn /> - + Primary colors for <button hlmBtn /> + -
+ /> +
-
- Secondary colors for <button hlmBtn /> - + Secondary colors for <button hlmBtn /> + -
+ /> + -
- Used for accents such as hover effects on <brnMenuItem hlm/> - + Used for accents such as hover effects on <brnMenuItem hlm/> + -
+ /> + -
- Used for destructive actions such as <button hlmBtn variant="destructive" /> - + Used for destructive actions such as <button hlmBtn variant="destructive" /> + -
+ /> + -
- Used for focus ring - + Used for focus ring + -
+ /> + -
- Border radius for card, input and buttons - + Border radius for card, input and buttons + -
- - - - Adding new colors -
-

- To add new colors, you need to add them to your CSS file and to your - tailwind.config.js file. -

-

app/src/styles.css

- Adding new colors +
+

+ To add new colors, you need to add them to your CSS file and to your + tailwind.config.js + file. +

+

app/src/styles.css

+ -

tailwind.config.js

- -

- You can now use the - warning utility class in your components. -

- Warning ' - /> -
+ /> +
- Other color formats -
-

- We recommend using - HSL colors - for theming but you can also use other color formats if you prefer. -

-

- See the - Tailwind CSS documentation - for more information on using rgb, rgba or - hsl colors. -

-
- - - - - + Other color formats +
+

+ We recommend using + + HSL colors + + for theming but you can also use other color formats if you prefer. +

+

+ See the + + Tailwind CSS documentation + + for more information on using + rgb + , + rgba + or + hsl + colors. +

+
+ + + + + - - - - - - - `, + + + + + + + `, }) export default class ThemingPageComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation/[...not-found].page.ts b/apps/app/src/app/pages/(documentation)/documentation/[...not-found].page.ts index 73743f4c5..0e32e9882 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/[...not-found].page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/[...not-found].page.ts @@ -1,25 +1,25 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; import { hlmMuted } from '@spartan-ng/ui-typography-helm'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Not Found' }, - meta: metaWith('spartan - Page not found', 'Seems like you got lost browsing spartan'), - title: 'spartan - Page not found', + data: { breadcrumb: 'Not Found' }, + meta: metaWith('spartan - Page not found', 'Seems like you got lost browsing spartan'), + title: 'spartan - Page not found', }; @Component({ - selector: 'spartan-docs-not-found', - standalone: true, - imports: [MainSectionDirective], - template: ` -
-
-

Coming soon...

-
-
- `, + selector: 'spartan-docs-not-found', + standalone: true, + imports: [MainSectionDirective], + template: ` +
+
+

Coming soon...

+
+
+ `, }) export default class DocumentationNotFoundPageComponent {} diff --git a/apps/app/src/app/pages/(documentation)/documentation/about.page.ts b/apps/app/src/app/pages/(documentation)/documentation/about.page.ts index 3d8ac9af0..a31e1c4ff 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/about.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/about.page.ts @@ -1,190 +1,196 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlmCode, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; +import { ComingSoonComponent } from '~/app/shared/layout/coming-soon.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { ComingSoonComponent } from '~/app/shared/layout/coming-soon.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { hlmCode, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'About' }, - meta: metaWith('spartan - About', 'Powered by amazing open source projects.'), - title: 'spartan - About', + data: { breadcrumb: 'About' }, + meta: metaWith('spartan - About', 'Powered by amazing open source projects.'), + title: 'spartan - About', }; const aboutLink = 'h-6 underline text-base px-0.5'; @Component({ - selector: 'spartan-about', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - ComingSoonComponent, - SectionSubHeadingComponent, - PageNavLinkComponent, - HlmButtonDirective, - ], - template: ` -
- + selector: 'spartan-about', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageNavComponent, + ComingSoonComponent, + SectionSubHeadingComponent, + PageNavLinkComponent, + HlmButtonDirective, + ], + template: ` +
+ - About -
-

- spartan.ng - is a project by - goetzrobin. -

-
+ About +
+

+ spartan.ng + is a project by + goetzrobin + . +

+
- - - spartans - - - - - -
-
    -
  • - goetzrobin - - working on spartan/stack & spartan/ui. -
    • -
  • - mihajm - - working on spartan/ui. -
    • -
  • - AdditionAddict - - supporting spartan/stack & spartan/ui. -
    • -
-
+ + + spartans + + + + + +
+ +
- Credits -
-

- First and foremost, credit goes to the incredible - Brandon Roberts and - shadcn. -

+ Credits +
+

+ First and foremost, credit goes to the incredible + Brandon Roberts + and + shadcn. +

-

- Brandon's AnalogJs is the absolute backbone of the spartan/stack and brings incredible value to the Angular - ecosystem. -

-

- The UI library shadcn has created is simply beautiful and spartan/ui tries its best to emulate its style and - quality. -

-

Other awesome work we are building upon is:

-
    -
  • - AnalogJs - - The full-stack Angular meta-framework. -
    • -
  • - ui.shadcn.com - - Styles for UI primitives. -
    • -
  • - Radix - - Patterns & inspiration for accessible unstyled UI primitives. -
    • -
  • - Angular Material - - An incredible CDK, patterns & inspiration for accessible unstyled ui primitives. -
    • -
  • - ng-neat/cmdk - - The backbone of brn-command, which simply wraps around its awesomeness. -
    • -
  • - ng-signal-forms - - Form library based on Angular signals, which makes working with even the most complex scenarios a breeze. -
    • -
  • - ngx-scrollbar - - Custom overlay-scrollbars with native scrolling mechanism. -
    • -
  • - ng-icons - - The ultimate icon library for Angular. -
    • -
-
+

+ Brandon's AnalogJs is the absolute backbone of the spartan/stack and brings incredible value to the Angular + ecosystem. +

+

+ The UI library shadcn has created is simply beautiful and spartan/ui tries its best to emulate its style and + quality. +

+

Other awesome work we are building upon is:

+
    +
  • + AnalogJs + - The full-stack Angular meta-framework. +
    • +
  • + ui.shadcn.com + - Styles for UI primitives. +
    • +
  • + Radix + - Patterns & inspiration for accessible unstyled UI primitives. +
    • +
  • + + Angular Material + + - An incredible CDK, patterns & inspiration for accessible unstyled ui primitives. +
    • +
  • + + ng-neat/cmdk + + - The backbone of + brn-command + , which simply wraps around its awesomeness. +
    • +
  • + + ng-signal-forms + + - Form library based on Angular signals, which makes working with even the most complex scenarios a breeze. +
    • +
  • + + ngx-scrollbar + + - Custom overlay-scrollbars with native scrolling mechanism. +
    • +
  • + + ng-icons + + - The ultimate icon library for Angular. +
    • +
+
- License -
-

- MIT © {{ currentYear }} - - goetzrobin -

-
+ License +
+

+ MIT © {{ currentYear }} - + + goetzrobin + +

+
- - - - -
+ + + + +
- - - - - - - `, + + + + + + + `, }) export default class ChangelogPageComponent { - currentYear = new Date().getFullYear(); + currentYear = new Date().getFullYear(); } diff --git a/apps/app/src/app/pages/(documentation)/documentation/changelog.page.ts b/apps/app/src/app/pages/(documentation)/documentation/changelog.page.ts index d71d90a4c..4163a27fa 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/changelog.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/changelog.page.ts @@ -1,40 +1,40 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlmCode, hlmH4, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; +import { ComingSoonComponent } from '~/app/shared/layout/coming-soon.component'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { ComingSoonComponent } from '~/app/shared/layout/coming-soon.component'; -import { hlmCode, hlmH4, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { RouterLink } from '@angular/router'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Changelog' }, - meta: metaWith('spartan - Changelog', 'Latest updates and announcements.'), - title: 'spartan - Changelog', + data: { breadcrumb: 'Changelog' }, + meta: metaWith('spartan - Changelog', 'Latest updates and announcements.'), + title: 'spartan - Changelog', }; @Component({ - selector: 'spartan-changelog', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - ComingSoonComponent, - SectionSubHeadingComponent, - PageNavLinkComponent, - RouterLink, - HlmButtonDirective, - ], - template: ` + selector: 'spartan-changelog', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + PageBottomNavComponent, + PageBottomNavLinkComponent, + PageNavComponent, + ComingSoonComponent, + SectionSubHeadingComponent, + PageNavLinkComponent, + RouterLink, + HlmButtonDirective, + ], + template: `
diff --git a/apps/app/src/app/pages/(documentation)/documentation/index.page.ts b/apps/app/src/app/pages/(documentation)/documentation/index.page.ts index 1fff667dc..084418011 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/index.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/index.page.ts @@ -1,6 +1,6 @@ import { RouteMeta } from '@analogjs/router'; export const routeMeta: RouteMeta = { - redirectTo: '/documentation/introduction', - pathMatch: 'full', + redirectTo: '/documentation/introduction', + pathMatch: 'full', }; diff --git a/apps/app/src/app/pages/(documentation)/documentation/introduction.page.ts b/apps/app/src/app/pages/(documentation)/documentation/introduction.page.ts index b09fb7eba..41666de0e 100644 --- a/apps/app/src/app/pages/(documentation)/documentation/introduction.page.ts +++ b/apps/app/src/app/pages/(documentation)/documentation/introduction.page.ts @@ -1,164 +1,184 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { RouterLink } from '@angular/router'; +import { provideIcons } from '@ng-icons/core'; +import { radixChevronRight } from '@ng-icons/radix-icons'; import { - BrnAccordionComponent, - BrnAccordionContentComponent, - BrnAccordionItemComponent, - BrnAccordionTriggerComponent, + BrnAccordionComponent, + BrnAccordionContentComponent, + BrnAccordionItemComponent, + BrnAccordionTriggerComponent, } from '@spartan-ng/ui-accordion-brain'; import { - HlmAccordionContentDirective, - HlmAccordionDirective, - HlmAccordionIconComponent, - HlmAccordionItemDirective, - HlmAccordionTriggerDirective, + HlmAccordionContentDirective, + HlmAccordionDirective, + HlmAccordionIconComponent, + HlmAccordionItemDirective, + HlmAccordionTriggerDirective, } from '@spartan-ng/ui-accordion-helm'; -import { RouterLink } from '@angular/router'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; -import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixChevronRight } from '@ng-icons/radix-icons'; +import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Introduction' }, - meta: metaWith( - 'spartan - Introduction', - 'spartan is a collection of tools to superpower your Angular full-stack development.' - ), - title: 'spartan - Introduction', + data: { breadcrumb: 'Introduction' }, + meta: metaWith( + 'spartan - Introduction', + 'spartan is a collection of tools to superpower your Angular full-stack development.', + ), + title: 'spartan - Introduction', }; @Component({ - selector: 'spartan-docs-intro', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - SectionSubHeadingComponent, - PageNavComponent, - BrnAccordionComponent, - BrnAccordionContentComponent, - BrnAccordionItemComponent, - BrnAccordionTriggerComponent, - HlmAccordionContentDirective, - HlmAccordionDirective, - HlmAccordionIconComponent, - HlmAccordionItemDirective, - HlmAccordionTriggerDirective, - RouterLink, - PageNavComponent, - PageNavLinkComponent, - PageBottomNavLinkComponent, - PageBottomNavComponent, - PageBottomNavPlaceholderComponent, - HlmButtonDirective, - HlmIconComponent, - ], - providers: [provideIcons({ radixChevronRight })], - template: ` -
- -

- spartan allows you to build next-level, full-stack applications with AnalogJs. -

-

It provides an opinionated stack with a single command and a set of accessible UI primitives.

- spartan/stack -

- The spartan/stack is a collection of technologies that provide you with a - typesafe developer experience from the template all the way to the database. -

-

- While we keep updating the stack to provide the best available technologies, - spartan/stack is currently made up of the following: - Supabase, Angular, - tRPC, Tailwind, - AnalogJs, Nx, and - Drizzle -

-
- Check out spartan/stack - -
- spartan/ui -

- spartan/ui is built on the - spartan/ui/brain library that provides accessible, but unstyled primitives that - build the foundation of an inclusive user interface. -

-

- On top we put spartan/ui/helm library that gives our primitives a beautifully - designed shadcn look. -

-
- Check out spartan/ui - -
- FAQ - - - - What is spartan/stack - - - - It is a collection of full-stack technologies that power end-to-end type-safe Angular development. - - + selector: 'spartan-docs-intro', + standalone: true, + imports: [ + MainSectionDirective, + SectionIntroComponent, + SectionSubHeadingComponent, + PageNavComponent, + BrnAccordionComponent, + BrnAccordionContentComponent, + BrnAccordionItemComponent, + BrnAccordionTriggerComponent, + HlmAccordionContentDirective, + HlmAccordionDirective, + HlmAccordionIconComponent, + HlmAccordionItemDirective, + HlmAccordionTriggerDirective, + RouterLink, + PageNavComponent, + PageNavLinkComponent, + PageBottomNavLinkComponent, + PageBottomNavComponent, + PageBottomNavPlaceholderComponent, + HlmButtonDirective, + HlmIconComponent, + ], + providers: [provideIcons({ radixChevronRight })], + template: ` +
+ +

+ spartan + allows you to build next-level, full-stack applications with AnalogJs. +

+

It provides an opinionated stack with a single command and a set of accessible UI primitives.

+ spartan/stack +

+ The + spartan/stack + is a collection of technologies that provide you with a typesafe developer experience from the template all the + way to the database. +

+

+ While we keep updating the stack to provide the best available technologies, + spartan/stack + is currently made up of the following: + Supabase + , + Angular + , + tRPC + , + Tailwind + , + AnalogJs + , + Nx + , and + Drizzle +

+
+ + Check out spartan/stack + + +
+ spartan/ui +

+ spartan/ui + is built on the + spartan/ui/brain + library that provides accessible, but unstyled primitives that build the foundation of an inclusive user + interface. +

+

+ On top we put + spartan/ui/helm + library that gives our primitives a beautifully designed + shadcn + look. +

+
+ + Check out spartan/ui + + +
+ FAQ + + + + What is spartan/stack + + + + It is a collection of full-stack technologies that power end-to-end type-safe Angular development. + + - - - What is spartan/ui - - - - A collection of Angular UI primitives that are both beautiful and accessible. - - + + + What is spartan/ui + + + + A collection of Angular UI primitives that are both beautiful and accessible. + + - - - What is spartan/ui/brain - - - - A collection of unstyled UI primitives that provide accessibility out of the box. - - + + + What is spartan/ui/brain + + + + A collection of unstyled UI primitives that provide accessibility out of the box. + + - - - What is spartan/ui/helm - - - - Directives, sometimes additional components, that give spartan/brain a shadcn look. - - - + + + What is spartan/ui/helm + + + + Directives, sometimes additional components, that give spartan/brain a shadcn look. + + + - - - - -
+ + + + +
- - - - - - `, + + + + + + `, }) export default class DocsIntroPageComponent {} diff --git a/apps/app/src/app/pages/(examples)/examples.page.ts b/apps/app/src/app/pages/(examples)/examples.page.ts index c9c1bf577..befc9feec 100644 --- a/apps/app/src/app/pages/(examples)/examples.page.ts +++ b/apps/app/src/app/pages/(examples)/examples.page.ts @@ -1,41 +1,41 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; import { RouterLink, RouterOutlet } from '@angular/router'; -import { hlmH1, hlmLead } from '@spartan-ng/ui-typography-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlmH1, hlmLead } from '@spartan-ng/ui-typography-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { NavLinkDirective } from '~/app/shared/spartan-nav-link.directive'; export const routeMeta: RouteMeta = { - meta: metaWith('Examples - SPARTAN', 'Examples built with the SPARTAN stack and its UI primitives'), + meta: metaWith('Examples - SPARTAN', 'Examples built with the SPARTAN stack and its UI primitives'), }; @Component({ - selector: 'spartan-examples', - standalone: true, - imports: [RouterOutlet, HlmButtonDirective, RouterLink, NavLinkDirective], - host: { - class: 'block p-4 pt-6 sm:pb-16 sm:pt-12', - }, - template: ` -

Check out some examples.

-

- Dashboard, cards, authentication. Some examples built using the components. Use this as a guide to build your own. -

-
- Get Started - Components -
+ selector: 'spartan-examples', + standalone: true, + imports: [RouterOutlet, HlmButtonDirective, RouterLink, NavLinkDirective], + host: { + class: 'block p-4 pt-6 sm:pb-16 sm:pt-12', + }, + template: ` +

Check out some examples.

+

+ Dashboard, cards, authentication. Some examples built using the components. Use this as a guide to build your own. +

+
+ Get Started + Components +
- -
- -
- `, + +
+ +
+ `, }) export default class ExamplesPageComponent {} diff --git a/apps/app/src/app/pages/(examples)/examples/index.page.ts b/apps/app/src/app/pages/(examples)/examples/index.page.ts index 072af83d0..fed33c23d 100644 --- a/apps/app/src/app/pages/(examples)/examples/index.page.ts +++ b/apps/app/src/app/pages/(examples)/examples/index.page.ts @@ -1,6 +1,6 @@ import { RouteMeta } from '@analogjs/router'; export const routeMeta: RouteMeta = { - redirectTo: '/examples/notes', - pathMatch: 'full', + redirectTo: '/examples/notes', + pathMatch: 'full', }; diff --git a/apps/app/src/app/pages/(examples)/examples/notes/(notes).page.ts b/apps/app/src/app/pages/(examples)/examples/notes/(notes).page.ts index 32521540b..75fd8d515 100644 --- a/apps/app/src/app/pages/(examples)/examples/notes/(notes).page.ts +++ b/apps/app/src/app/pages/(examples)/examples/notes/(notes).page.ts @@ -1,212 +1,214 @@ -import { Component, computed, inject, signal } from '@angular/core'; +import { RouteMeta } from '@analogjs/router'; +import { waitFor } from '@analogjs/trpc'; import { AsyncPipe, DatePipe, JsonPipe, NgFor, NgIf } from '@angular/common'; +import { Component, computed, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { RouteMeta } from '@analogjs/router'; +import { RouterLink } from '@angular/router'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { HlmInputDirective } from '@spartan-ng/ui-input-helm'; -import { RouterLink } from '@angular/router'; import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; import { SignalFormBuilder, SignalInputDirective, V, withErrorComponent } from 'ng-signal-forms'; -import { waitFor } from '@analogjs/trpc'; -import { catchError, Observable, of, Subject, switchMap, take, tap } from 'rxjs'; -import { injectTRPCClient } from '~/trpc-client'; -import { Note } from '~/db'; -import { SpartanInputErrorDirective } from '~/app/shared/input-error/input-error.directive'; +import { Observable, Subject, catchError, of, switchMap, take, tap } from 'rxjs'; import { InputErrorComponent } from '~/app/shared/input-error/input-error.component'; +import { SpartanInputErrorDirective } from '~/app/shared/input-error/input-error.directive'; import { metaWith } from '~/app/shared/meta/meta.util'; -import { NoteComponent } from './components/note.component'; +import { Note } from '~/db'; +import { injectTRPCClient } from '~/trpc-client'; import { NoteSkeletonComponent } from './components/note-skeleton.component'; +import { NoteComponent } from './components/note.component'; import { NotesEmptyComponent } from './components/notes-empty.component'; export const routeMeta: RouteMeta = { - meta: metaWith('spartan/examples - Notes', 'A notes example displaying the SPARTAN stack and new UI primitives'), - title: 'spartan/examples - Notes', + meta: metaWith('spartan/examples - Notes', 'A notes example displaying the SPARTAN stack and new UI primitives'), + title: 'spartan/examples - Notes', }; @Component({ - selector: 'spartan-notes-example', - standalone: true, - imports: [ - AsyncPipe, - FormsModule, - NgFor, - DatePipe, - NgIf, - JsonPipe, + selector: 'spartan-notes-example', + standalone: true, + imports: [ + AsyncPipe, + FormsModule, + NgFor, + DatePipe, + NgIf, + JsonPipe, - RouterLink, - SignalInputDirective, - SpartanInputErrorDirective, + RouterLink, + SignalInputDirective, + SpartanInputErrorDirective, - HlmButtonDirective, - HlmLabelDirective, - HlmInputDirective, + HlmButtonDirective, + HlmLabelDirective, + HlmInputDirective, - NoteComponent, - NoteSkeletonComponent, - NotesEmptyComponent, - HlmSpinnerComponent, - ], - providers: [withErrorComponent(InputErrorComponent)], - host: { - class: 'block p-2 sm:p-4 pb-16', - }, - template: ` -
- + NoteComponent, + NoteSkeletonComponent, + NotesEmptyComponent, + HlmSpinnerComponent, + ], + providers: [withErrorComponent(InputErrorComponent)], + host: { + class: 'block p-2 sm:p-4 pb-16', + }, + template: ` + + - + - -
-
- - - - + + +
+ + + + - -
- `, + +
+ `, }) export default class NotesExamplePageComponent { - private _trpc = injectTRPCClient(); - private _sfb = inject(SignalFormBuilder); - private _refreshNotes$ = new Subject(); - private _notes$ = this._refreshNotes$.pipe( - switchMap(() => this._trpc.note.list.query()), - tap((result) => - this.state.update((state) => ({ - ...state, - status: 'success', - notes: result, - error: null, - })) - ), - catchError((err) => { - this.state.update((state) => ({ - ...state, - notes: [], - status: 'error', - error: err, - })); - return of([]); - }) - ); + private _trpc = injectTRPCClient(); + private _sfb = inject(SignalFormBuilder); + private _refreshNotes$ = new Subject(); + private _notes$ = this._refreshNotes$.pipe( + switchMap(() => this._trpc.note.list.query()), + tap((result) => + this.state.update((state) => ({ + ...state, + status: 'success', + notes: result, + error: null, + })), + ), + catchError((err) => { + this.state.update((state) => ({ + ...state, + notes: [], + status: 'error', + error: err, + })); + return of([]); + }), + ); - public state = signal<{ - status: 'idle' | 'loading' | 'success' | 'error'; - notes: Note[]; - error: unknown | null; - updatedFrom: 'initial' | 'create' | 'delete'; - idBeingDeleted?: number; - }>({ - status: 'idle', - notes: [], - error: null, - updatedFrom: 'initial', - }); - public initialLoad = computed(() => this.state().status === 'loading' && this.state().updatedFrom === 'initial'); - public createLoad = computed(() => this.state().status === 'loading' && this.state().updatedFrom === 'create'); - public deleteIdInProgress = computed(() => - this.state().status === 'loading' && this.state().updatedFrom === 'delete' ? this.state().idBeingDeleted : undefined - ); - public noNotes = computed(() => this.state().notes.length === 0); - public showNotesArray = computed( - () => this.state().updatedFrom === 'delete' || this.state().notes.length > 0 || this.state().status === 'success' - ); + public state = signal<{ + status: 'idle' | 'loading' | 'success' | 'error'; + notes: Note[]; + error: unknown | null; + updatedFrom: 'initial' | 'create' | 'delete'; + idBeingDeleted?: number; + }>({ + status: 'idle', + notes: [], + error: null, + updatedFrom: 'initial', + }); + public initialLoad = computed(() => this.state().status === 'loading' && this.state().updatedFrom === 'initial'); + public createLoad = computed(() => this.state().status === 'loading' && this.state().updatedFrom === 'create'); + public deleteIdInProgress = computed(() => + this.state().status === 'loading' && this.state().updatedFrom === 'delete' + ? this.state().idBeingDeleted + : undefined, + ); + public noNotes = computed(() => this.state().notes.length === 0); + public showNotesArray = computed( + () => this.state().updatedFrom === 'delete' || this.state().notes.length > 0 || this.state().status === 'success', + ); - public form = this._sfb.createFormGroup(() => ({ - title: this._sfb.createFormField('', { - validators: [ - { - validator: V.required(), - message: () => 'Make sure to give your note a title', - }, - ], - }), - content: this._sfb.createFormField('', { - validators: [ - { - validator: V.required(), - message: () => 'Add some content to your note', - }, - ], - }), - })); + public form = this._sfb.createFormGroup(() => ({ + title: this._sfb.createFormField('', { + validators: [ + { + validator: V.required(), + message: () => 'Make sure to give your note a title', + }, + ], + }), + content: this._sfb.createFormField('', { + validators: [ + { + validator: V.required(), + message: () => 'Add some content to your note', + }, + ], + }), + })); - constructor() { - this._notes$.subscribe(); - void waitFor(this._notes$); - this.updateNotes('initial'); - } + constructor() { + this._notes$.subscribe(); + void waitFor(this._notes$); + this.updateNotes('initial'); + } - public noteTrackBy = (index: number, note: Note) => { - return note.id; - }; + public noteTrackBy = (index: number, note: Note) => { + return note.id; + }; - public createNote() { - if (this.form.state() !== 'VALID') { - this.form.markAllAsTouched(); - return; - } - const { title, content } = this.form.value(); - this.updateNotes('create', this._trpc.note.create.mutate({ title, content })); - this.form.reset(); - } + public createNote() { + if (this.form.state() !== 'VALID') { + this.form.markAllAsTouched(); + return; + } + const { title, content } = this.form.value(); + this.updateNotes('create', this._trpc.note.create.mutate({ title, content })); + this.form.reset(); + } - public deleteNote(id: number) { - this.updateNotes('delete', this._trpc.note.remove.mutate({ id }), id); - } + public deleteNote(id: number) { + this.updateNotes('delete', this._trpc.note.remove.mutate({ id }), id); + } - private updateNotes( - updatedFrom: 'initial' | 'create' | 'delete', - operation?: Observable, - idBeingDeleted?: number - ) { - this.state.update((state) => ({ - status: 'loading', - notes: state.notes, - error: null, - updatedFrom, - idBeingDeleted, - })); - if (!operation) { - this._refreshNotes$.next(); - return; - } - operation.pipe(take(1)).subscribe(() => this._refreshNotes$.next()); - } + private updateNotes( + updatedFrom: 'initial' | 'create' | 'delete', + operation?: Observable, + idBeingDeleted?: number, + ) { + this.state.update((state) => ({ + status: 'loading', + notes: state.notes, + error: null, + updatedFrom, + idBeingDeleted, + })); + if (!operation) { + this._refreshNotes$.next(); + return; + } + operation.pipe(take(1)).subscribe(() => this._refreshNotes$.next()); + } } diff --git a/apps/app/src/app/pages/(examples)/examples/notes/components/note-skeleton.component.ts b/apps/app/src/app/pages/(examples)/examples/notes/components/note-skeleton.component.ts index 662861efe..787cf2b5a 100644 --- a/apps/app/src/app/pages/(examples)/examples/notes/components/note-skeleton.component.ts +++ b/apps/app/src/app/pages/(examples)/examples/notes/components/note-skeleton.component.ts @@ -1,39 +1,39 @@ import { Component } from '@angular/core'; import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, } from '@spartan-ng/ui-card-helm'; import { HlmSkeletonComponent } from '@spartan-ng/ui-skeleton-helm'; @Component({ - selector: 'analog-trpc-note-skeleton', - standalone: true, - host: { - class: 'block', - }, - hostDirectives: [HlmCardDirective], - imports: [ - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmSkeletonComponent, - ], - template: ` -
- - -
-
- - -
-
- -
- `, + selector: 'analog-trpc-note-skeleton', + standalone: true, + host: { + class: 'block', + }, + hostDirectives: [HlmCardDirective], + imports: [ + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmSkeletonComponent, + ], + template: ` +
+ + +
+
+ + +
+
+ +
+ `, }) export class NoteSkeletonComponent {} diff --git a/apps/app/src/app/pages/(examples)/examples/notes/components/note.component.ts b/apps/app/src/app/pages/(examples)/examples/notes/components/note.component.ts index 7baa79864..dce43effa 100644 --- a/apps/app/src/app/pages/(examples)/examples/notes/components/note.component.ts +++ b/apps/app/src/app/pages/(examples)/examples/notes/components/note.component.ts @@ -1,80 +1,81 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; import { DatePipe, NgForOf, NgIf } from '@angular/common'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm'; -import { RouterLink } from '@angular/router'; import { Note } from '~/db'; -import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; @Component({ - selector: 'analog-trpc-note', - standalone: true, - hostDirectives: [HlmCardDirective], - host: { - class: 'block', - }, - imports: [ - DatePipe, - HlmButtonDirective, - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardFooterDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, - HlmSpinnerComponent, - NgForOf, - NgIf, - RouterLink, - HlmBadgeDirective, - ], - template: ` -
-

{{ note.title }}

-

- Created at: {{ note.createdAt | date }} -

- -
-

- {{ note.content }} -

-
- Read more -
- `, + selector: 'analog-trpc-note', + standalone: true, + hostDirectives: [HlmCardDirective], + host: { + class: 'block', + }, + imports: [ + DatePipe, + HlmButtonDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardFooterDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, + HlmSpinnerComponent, + NgForOf, + NgIf, + RouterLink, + HlmBadgeDirective, + ], + template: ` +
+

{{ note.title }}

+

+ Created at: + {{ note.createdAt | date }} +

+ +
+

+ {{ note.content }} +

+
+ Read more +
+ `, }) export class NoteComponent { - @Input() deletionInProgress = false; - @Input({ required: true }) note!: Note; - @Output() deleteClicked = new EventEmitter(); + @Input() deletionInProgress = false; + @Input({ required: true }) note!: Note; + @Output() deleteClicked = new EventEmitter(); } diff --git a/apps/app/src/app/pages/(examples)/examples/notes/components/notes-empty.component.ts b/apps/app/src/app/pages/(examples)/examples/notes/components/notes-empty.component.ts index 24905c23c..55801ae3f 100644 --- a/apps/app/src/app/pages/(examples)/examples/notes/components/notes-empty.component.ts +++ b/apps/app/src/app/pages/(examples)/examples/notes/components/notes-empty.component.ts @@ -1,30 +1,30 @@ import { Component } from '@angular/core'; import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; @Component({ - selector: 'analog-trpc-notes-empty', - standalone: true, - host: { - class: 'block', - }, - hostDirectives: [ - { - directive: HlmCardDirective, - inputs: ['class'], - }, - ], - imports: [HlmCardContentDirective, HlmCardDescriptionDirective, HlmCardHeaderDirective, HlmCardTitleDirective], - template: ` -
-

No notes yet!

-

Add a new one and see them appear here...

-
- `, + selector: 'analog-trpc-notes-empty', + standalone: true, + host: { + class: 'block', + }, + hostDirectives: [ + { + directive: HlmCardDirective, + inputs: ['class'], + }, + ], + imports: [HlmCardContentDirective, HlmCardDescriptionDirective, HlmCardHeaderDirective, HlmCardTitleDirective], + template: ` +
+

No notes yet!

+

Add a new one and see them appear here...

+
+ `, }) export class NotesEmptyComponent {} diff --git a/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts b/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts index 20e7a925b..8c268da17 100644 --- a/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts +++ b/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts @@ -1,128 +1,128 @@ -import { Component } from '@angular/core'; import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; -import { hlmBlockquote, hlmH1, hlmH2, hlmH3, hlmLead, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; +import { Component } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlmBlockquote, hlmH1, hlmH2, hlmH3, hlmLead, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - meta: metaWith( - 'spartan/examples - Typography', - "SPARTAN comes with helpful directives that enforce consistent styling across your application's typography." - ), - title: 'spartan/examples - Typography', + meta: metaWith( + 'spartan/examples - Typography', + "SPARTAN comes with helpful directives that enforce consistent styling across your application's typography.", + ), + title: 'spartan/examples - Typography', }; @Component({ - selector: 'spartan-typography', - standalone: true, - imports: [HlmButtonDirective], - host: { - class: 'block p-2 sm:p-4 pb-16', - }, - template: ` -

The Joke Tax Chronicles

-

- Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, - his advisors came to him with a problem: the kingdom was running out of money. -

-

The King's Plan

-

- The king thought long and hard, and finally came up with - a brilliant plan - : he would tax the jokes in the kingdom. -

-
- "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." -
-

The Joke Tax

-

The king's subjects were not amused. They grumbled and complained, but the king was firm:

-
    -
  • 1st level of puns: 5 gold coins
    • -
  • 2nd level of jokes: 10 gold coins
    • -
  • 3rd level of one-liners : 20 gold coins
    • -
-

- As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused - to let the king's foolishness get him down: a court jester named Jokester. -

-

Jokester's Revolt

-

- Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the - king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. -

-

- And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they - couldn't help but laugh. And once they started laughing, they couldn't stop. -

-

The People's Rebellion

-

- The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the - entire kingdom was in on the joke. -

- -
- - - - - - - - - - - - - - - - - - - - - -
- King's Treasury - - People's happiness -
- Empty - - Overflowing -
- Modest - - Satisfied -
- Full - - Ecstatic -
-
-

- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. - Jokester was declared a hero, and the kingdom lived happily ever after. -

-

- The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas. -

- `, + selector: 'spartan-typography', + standalone: true, + imports: [HlmButtonDirective], + host: { + class: 'block p-2 sm:p-4 pb-16', + }, + template: ` +

The Joke Tax Chronicles

+

+ Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, + his advisors came to him with a problem: the kingdom was running out of money. +

+

The King's Plan

+

+ The king thought long and hard, and finally came up with + a brilliant plan + : he would tax the jokes in the kingdom. +

+
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." +
+

The Joke Tax

+

The king's subjects were not amused. They grumbled and complained, but the king was firm:

+
    +
  • 1st level of puns: 5 gold coins
    • +
  • 2nd level of jokes: 10 gold coins
    • +
  • 3rd level of one-liners : 20 gold coins
    • +
+

+ As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused + to let the king's foolishness get him down: a court jester named Jokester. +

+

Jokester's Revolt

+

+ Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the + king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. +

+

+ And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they + couldn't help but laugh. And once they started laughing, they couldn't stop. +

+

The People's Rebellion

+

+ The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the + entire kingdom was in on the joke. +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ King's Treasury + + People's happiness +
+ Empty + + Overflowing +
+ Modest + + Satisfied +
+ Full + + Ecstatic +
+
+

+ The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. + Jokester was declared a hero, and the kingdom lived happily ever after. +

+

+ The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas. +

+ `, }) export default class TypographyPageComponent {} diff --git a/apps/app/src/app/pages/(home).page.ts b/apps/app/src/app/pages/(home).page.ts index d28ec5370..87c255f6e 100644 --- a/apps/app/src/app/pages/(home).page.ts +++ b/apps/app/src/app/pages/(home).page.ts @@ -1,27 +1,27 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { RouterLink } from '@angular/router'; +import { provideIcons } from '@ng-icons/core'; +import { radixLayers, radixMix, radixStar } from '@ng-icons/radix-icons'; import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { - HlmCardContentDirective, - HlmCardDescriptionDirective, - HlmCardDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, + HlmCardContentDirective, + HlmCardDescriptionDirective, + HlmCardDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, } from '@spartan-ng/ui-card-helm'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixLayers, radixMix, radixStar } from '@ng-icons/radix-icons'; +import { metaWith } from '~/app/shared/meta/meta.util'; import { ThreeHundredComponent } from './(home)/components/three-hundred.component'; export const routeMeta: RouteMeta = { - meta: metaWith( - 'spartan - Cutting-edge tools powering Angular full-stack development', - 'Build next-level, full-stack applications with AnalogJs and the spartan/stack. Make them accessible and look incredible with spartan/ui.' - ), - title: 'spartan - Cutting-edge tools powering Angular full-stack development', + meta: metaWith( + 'spartan - Cutting-edge tools powering Angular full-stack development', + 'Build next-level, full-stack applications with AnalogJs and the spartan/stack. Make them accessible and look incredible with spartan/ui.', + ), + title: 'spartan - Cutting-edge tools powering Angular full-stack development', }; const container = 'mx-auto flex flex-col items-center gap-4 text-center'; @@ -29,104 +29,106 @@ const subHeading = 'font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl' const lead = 'leading-normal text-muted-foreground sm:text-xl sm:leading-8'; @Component({ - selector: 'spartan-home', - standalone: true, - imports: [ - HlmButtonDirective, - RouterLink, - HlmBadgeDirective, - HlmCardDirective, - HlmCardHeaderDirective, - HlmCardTitleDirective, - HlmCardDescriptionDirective, - HlmCardContentDirective, - HlmIconComponent, - ThreeHundredComponent, - ], - host: { - class: 'block p-4 pb-12 pt-6 sm:pb-24 sm:pt-12', - }, - providers: [provideIcons({ radixLayers, radixMix, radixStar })], - template: ` -
-
- This is madness. This is spartan. -

- Cutting-edge tools powering Angular full-stack development. -

-

- Build next-level, full-stack applications with AnalogJs and the spartan/stack. Make them accessible and look - incredible with spartan/ui. -

-
- Get StartedStar on GitHub - - -
-
-
+ selector: 'spartan-home', + standalone: true, + imports: [ + HlmButtonDirective, + RouterLink, + HlmBadgeDirective, + HlmCardDirective, + HlmCardHeaderDirective, + HlmCardTitleDirective, + HlmCardDescriptionDirective, + HlmCardContentDirective, + HlmIconComponent, + ThreeHundredComponent, + ], + host: { + class: 'block p-4 pb-12 pt-6 sm:pb-24 sm:pt-12', + }, + providers: [provideIcons({ radixLayers, radixMix, radixStar })], + template: ` +
+
+ + This is madness. This is spartan. + +

+ Cutting-edge tools powering Angular full-stack development. +

+

+ Build next-level, full-stack applications with AnalogJs and the spartan/stack. Make them accessible and look + incredible with spartan/ui. +

+
+ Get Started + + Star on GitHub + + +
+
+
-
-
-

The Tools

-

- spartan provides you with an opinionated stack set up with a single command and a set of accessible UI - primitives. -

-
-
- -
- -

spartan/stack

-

- Opinionated full-stack based on Supabase, Angular, tRPC, Tailwind, AnalogJs, Nx and Drizzle. -

-
- +
+
+

The Tools

+

+ spartan provides you with an opinionated stack set up with a single command and a set of accessible UI + primitives. +

+
+
+ +
+ +

spartan/stack

+

+ Opinionated full-stack based on Supabase, Angular, tRPC, Tailwind, AnalogJs, Nx and Drizzle. +

+
+ - -
- -

spartan/ui

-

Accessible, composable UI primitives that come styled or unstyled.

-
- -
-
+ +
+ +

spartan/ui

+

Accessible, composable UI primitives that come styled or unstyled.

+
+ +
+
-
-
-

The 300

-

- Ready to make a difference? Join the first 300 and help shape the future of UI development with Angular & - spartan. -

-
-
- -

- Contribute code, share insights, or sponsor on GitHub. Let's build something extraordinary together! -

- Claim your spot in the 300 today! - -
-
- `, +
+
+

The 300

+

+ Ready to make a difference? Join the first 300 and help shape the future of UI development with Angular & + spartan. +

+
+
+ +

+ Contribute code, share insights, or sponsor on GitHub. Let's build something extraordinary together! +

+ + Claim your spot in the 300 today! + +
+
+ `, }) export default class HomePageComponent {} diff --git a/apps/app/src/app/pages/(home)/components/th-item-placeholder.component.ts b/apps/app/src/app/pages/(home)/components/th-item-placeholder.component.ts index bbda90600..7eb6beccc 100644 --- a/apps/app/src/app/pages/(home)/components/th-item-placeholder.component.ts +++ b/apps/app/src/app/pages/(home)/components/th-item-placeholder.component.ts @@ -2,15 +2,17 @@ import { Component } from '@angular/core'; import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component'; @Component({ - selector: 'spartan-th-item-placeholder', - standalone: true, - imports: [SpartanLogoComponent], - host: { - class: 'inline-flex flex-col justify-center items-center', - }, - template: ` -
`, + selector: 'spartan-th-item-placeholder', + standalone: true, + imports: [SpartanLogoComponent], + host: { + class: 'inline-flex flex-col justify-center items-center', + }, + template: ` + +
+ `, }) export class ThreeHundredItemPlaceholderComponent {} diff --git a/apps/app/src/app/pages/(home)/components/th-item.component.ts b/apps/app/src/app/pages/(home)/components/th-item.component.ts index 56ce4e3d7..37f45ad48 100644 --- a/apps/app/src/app/pages/(home)/components/th-item.component.ts +++ b/apps/app/src/app/pages/(home)/components/th-item.component.ts @@ -2,20 +2,24 @@ import { Component, Input } from '@angular/core'; import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component'; @Component({ - selector: 'spartan-th-item', - standalone: true, - imports: [SpartanLogoComponent], - host: { - class: 'inline-flex flex-col justify-center items-center', - }, - template: ` `, + selector: 'spartan-th-item', + standalone: true, + imports: [SpartanLogoComponent], + host: { + class: 'inline-flex flex-col justify-center items-center', + }, + template: ` + + + + + `, }) export class ThreeHundredItemComponent { - @Input() - href = ''; + @Input() + href = ''; } diff --git a/apps/app/src/app/pages/(home)/components/three-hundred.component.ts b/apps/app/src/app/pages/(home)/components/three-hundred.component.ts index ffc45300a..4ad476a4d 100644 --- a/apps/app/src/app/pages/(home)/components/three-hundred.component.ts +++ b/apps/app/src/app/pages/(home)/components/three-hundred.component.ts @@ -1,41 +1,42 @@ import { Component } from '@angular/core'; -import { ThreeHundredItemComponent } from './th-item.component'; import { ThreeHundredItemPlaceholderComponent } from './th-item-placeholder.component'; +import { ThreeHundredItemComponent } from './th-item.component'; @Component({ - selector: 'spartan-three-hundred', - standalone: true, - imports: [ThreeHundredItemComponent, ThreeHundredItemPlaceholderComponent], - host: { - class: 'grid gap-2 grid-cols-5 md:grid-cols-10', - }, - template: ` - @for (contributor of _contributors;track contributor) { - {{ contributor }} - } @for (item of _rest;track item) { - - } - `, + selector: 'spartan-three-hundred', + standalone: true, + imports: [ThreeHundredItemComponent, ThreeHundredItemPlaceholderComponent], + host: { + class: 'grid gap-2 grid-cols-5 md:grid-cols-10', + }, + template: ` + @for (contributor of _contributors; track contributor) { + {{ contributor }} + } + @for (item of _rest; track item) { + + } + `, }) export class ThreeHundredComponent { - protected readonly _contributors = [ - 'goetzrobin', - 'mihajm', - 'ajitzero', - 'arturgawlik', - 'deepakrudrapaul', - 'evanfuture', - 'AdditionAddict', - 'Altamimi-Dev', - 'ferat', - 'jeremy-js-devweb', - 'heddendorp', - 'tutkli', - 'Pascalmh', - 'okkindel', - 'marcjulian', - 'elite-benni', - 'oidre', - ]; - protected readonly _rest = Array(300 - this._contributors.length).map((x, i) => i); + protected readonly _contributors = [ + 'goetzrobin', + 'mihajm', + 'ajitzero', + 'arturgawlik', + 'deepakrudrapaul', + 'evanfuture', + 'AdditionAddict', + 'Altamimi-Dev', + 'ferat', + 'jeremy-js-devweb', + 'heddendorp', + 'tutkli', + 'Pascalmh', + 'okkindel', + 'marcjulian', + 'elite-benni', + 'oidre', + ]; + protected readonly _rest = Array(300 - this._contributors.length).map((x, i) => i); } diff --git a/apps/app/src/app/pages/(stack)/stack.page.ts b/apps/app/src/app/pages/(stack)/stack.page.ts index 483833080..648e757c7 100644 --- a/apps/app/src/app/pages/(stack)/stack.page.ts +++ b/apps/app/src/app/pages/(stack)/stack.page.ts @@ -1,20 +1,22 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; import { PageComponent } from '~/app/shared/layout/page.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - meta: metaWith('spartan/stack - The stack', "spartan's opinionated full-stack..."), - data: { - breadcrumb: 'Stack', - }, - title: 'spartan/stack - The stack', + meta: metaWith('spartan/stack - The stack', "spartan's opinionated full-stack..."), + data: { + breadcrumb: 'Stack', + }, + title: 'spartan/stack - The stack', }; @Component({ - selector: 'spartan-stack', - standalone: true, - imports: [PageComponent], - template: ` `, + selector: 'spartan-stack', + standalone: true, + imports: [PageComponent], + template: ` + + `, }) export default class StackPageComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(overview)/components/architecture-diagram.component.ts b/apps/app/src/app/pages/(stack)/stack/(overview)/components/architecture-diagram.component.ts index fbf2cff7a..3a8c69d74 100644 --- a/apps/app/src/app/pages/(stack)/stack/(overview)/components/architecture-diagram.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(overview)/components/architecture-diagram.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(overview)/overview.page.ts b/apps/app/src/app/pages/(stack)/stack/(overview)/overview.page.ts index f584466ef..fc6dc6a96 100644 --- a/apps/app/src/app/pages/(stack)/stack/(overview)/overview.page.ts +++ b/apps/app/src/app/pages/(stack)/stack/(overview)/overview.page.ts @@ -1,116 +1,118 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlmCode, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; +import { ArchitectureDiagramComponent } from '~/app/pages/(stack)/stack/(overview)/components/architecture-diagram.component'; +import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { PageBottomNavPlaceholderComponent } from '~/app/shared/layout/page-bottom-nav-placeholder.component'; -import { ArchitectureDiagramComponent } from '~/app/pages/(stack)/stack/(overview)/components/architecture-diagram.component'; -import { hlmCode, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Overview' }, - meta: metaWith( - 'spartan/stack - Overview', - 'The spartan/stack is an opinionated full-stack that consists of multiple technologies providing e2e type safety to Angular developers.' - ), - title: 'spartan/stack - Overview', + data: { breadcrumb: 'Overview' }, + meta: metaWith( + 'spartan/stack - Overview', + 'The spartan/stack is an opinionated full-stack that consists of multiple technologies providing e2e type safety to Angular developers.', + ), + title: 'spartan/stack - Overview', }; const stackLink = 'h-6 underline text-base px-0.5'; @Component({ - selector: 'spartan-accordion', - standalone: true, - imports: [ - MainSectionDirective, - CodeComponent, - SectionIntroComponent, - SectionSubHeadingComponent, - TabsComponent, - CodePreviewDirective, - PageNavLinkComponent, - PageNavComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageBottomNavPlaceholderComponent, - ArchitectureDiagramComponent, - HlmButtonDirective, - ], - template: ` -
- + /> - + - Motivation -

- The spartan/stack streamlines the setup of end-to-end typesafe Angular - full-stack applications. It is opinionated and based on insights from working with Angular and Typescript within - a full-stack environment for a long time. The spartan/stack helps you build your - applications faster and better. -

+ Motivation +

+ The + spartan/stack + streamlines the setup of end-to-end typesafe Angular full-stack applications. It is opinionated and based on + insights from working with Angular and Typescript within a full-stack environment for a long time. The + spartan/stack + helps you build your applications faster and better. +

- The Stack -

The stack to provides the best available cutting-edge technologies. These are currently:

-
    -
  • - Supabase - - Hosted, scalable database solution. Opensource and super easy to set up. -
    • -
  • - Angular - - Google's frontend framework. Powerful & reliable. -
    • -
  • - tRPC - - Typesafe client-server exchanges preventing bugs before even hitting "save". -
    • -
  • - TailwindCSS - - Utility-first CSS framework with great design baked into it. -
    • -
  • - AnalogJs - - Fullstack Angular with Vite, file-based routing, and a Nitro server! -
    • -
  • - Nx - - Monorepo & development tooling that will blow your mind. -
    • -
  • - Drizzle - - Great typescript ORM for typesafe DB interactions. Even better memes. -
    • -
+ The Stack +

The stack to provides the best available cutting-edge technologies. These are currently:

+
    +
  • + + Supabase + + - Hosted, scalable database solution. Opensource and super easy to set up. +
    • +
  • + Angular + - Google's frontend framework. Powerful & reliable. +
    • +
  • + tRPC + - Typesafe client-server exchanges preventing bugs before even hitting "save". +
    • +
  • + + TailwindCSS + + - Utility-first CSS framework with great design baked into it. +
    • +
  • + + AnalogJs + + - Fullstack Angular with Vite, file-based routing, and a Nitro server! +
    • +
  • + Nx + - Monorepo & development tooling that will blow your mind. +
    • +
  • + Drizzle + - Great typescript ORM for typesafe DB interactions. Even better memes. +
    • +
- - - - -
- - - - - `, + + + + +
+ + + + + `, }) export default class AccordionPageComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-analog.component.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-analog.component.ts index 21ce945fc..0ed39fca2 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-analog.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-analog.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram-analog', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram-analog', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramAnalogComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-angular.component.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-angular.component.ts index e33acfed9..557bb5ffc 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-angular.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-angular.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram-angular', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram-angular', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramAngularComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-drizzle.component.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-drizzle.component.ts index f931f99e3..53681c91e 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-drizzle.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-drizzle.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram-drizzle', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram-drizzle', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramDrizzleComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-nx.component.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-nx.component.ts index dc0ec9a23..63044a657 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-nx.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-nx.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram-nx', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram-nx', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramNxComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-supabase.component.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-supabase.component.ts index 6cd8114f5..df55f99b9 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-supabase.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-supabase.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram-supabase', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram-supabase', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramSupabaseComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-trpc.component.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-trpc.component.ts index 6de0abbaf..7899b2c15 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-trpc.component.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-trpc.component.ts @@ -1,137 +1,137 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-architecture-diagram-trpc', - standalone: true, - host: { - class: 'block overflow-hidden rounded-xl border border-border', - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + selector: 'spartan-architecture-diagram-trpc', + standalone: true, + host: { + class: 'block overflow-hidden rounded-xl border border-border', + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, }) export class ArchitectureDiagramTrpcComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/(technologies)/technologies.page.ts b/apps/app/src/app/pages/(stack)/stack/(technologies)/technologies.page.ts index d44bb7393..f90426f75 100644 --- a/apps/app/src/app/pages/(stack)/stack/(technologies)/technologies.page.ts +++ b/apps/app/src/app/pages/(stack)/stack/(technologies)/technologies.page.ts @@ -1,155 +1,162 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { ArchitectureDiagramAngularComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-angular.component'; import { ArchitectureDiagramAnalogComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-analog.component'; -import { ArchitectureDiagramTrpcComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-trpc.component'; +import { ArchitectureDiagramAngularComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-angular.component'; import { ArchitectureDiagramDrizzleComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-drizzle.component'; -import { ArchitectureDiagramSupabaseComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-supabase.component'; import { ArchitectureDiagramNxComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-nx.component'; +import { ArchitectureDiagramSupabaseComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-supabase.component'; +import { ArchitectureDiagramTrpcComponent } from '~/app/pages/(stack)/stack/(technologies)/components/architecture-diagram-trpc.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Technologies' }, - meta: metaWith('spartan/stack - Technologies', 'The spartan/stack'), - title: 'spartan/stack - Technologies', + data: { breadcrumb: 'Technologies' }, + meta: metaWith('spartan/stack - Technologies', 'The spartan/stack'), + title: 'spartan/stack - Technologies', }; @Component({ - selector: 'spartan-technologies', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - SectionSubHeadingComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - PageNavLinkComponent, - ArchitectureDiagramAngularComponent, - ArchitectureDiagramAnalogComponent, - ArchitectureDiagramTrpcComponent, - ArchitectureDiagramDrizzleComponent, - ArchitectureDiagramSupabaseComponent, - ArchitectureDiagramNxComponent, - ], - template: ` -
- + /> - Nx - -

- Let's start with the workspace. The location where your code will reside and the features that meet the needs of - your users will be implemented. -

-

- Nx is a next-generation build system that offers first-class monorepo support and strong integrations for all - well-known JavaScript frameworks. It enables you to use frontend frameworks like Angular or backend frameworks - like NestJs to architect, test, and build your project at any size. -

+ Nx + +

+ Let's start with the workspace. The location where your code will reside and the features that meet the needs of + your users will be implemented. +

+

+ Nx is a next-generation build system that offers first-class monorepo support and strong integrations for all + well-known JavaScript frameworks. It enables you to use frontend frameworks like Angular or backend frameworks + like NestJs to architect, test, and build your project at any size. +

- AnalogJs - -

- AnalogJs is a meta-framework for Angular. It provides you with all the benefits of Angular but extends its - capabilities with even more: -

+ AnalogJs + +

+ AnalogJs is a meta-framework for Angular. It provides you with all the benefits of Angular but extends its + capabilities with even more: +

-

- AnalogJs uses Vite for serving and building as well as Vitest for testing. Vite is a next-generation JavaScript - bundler that is super fast. It also gives us access to the Vite ecosystem with hundreds of very powerful - plugins. -

+

+ AnalogJs uses Vite for serving and building as well as Vitest for testing. Vite is a next-generation JavaScript + bundler that is super fast. It also gives us access to the Vite ecosystem with hundreds of very powerful + plugins. +

-

- Another incredible advantage of AnalogJs is that it comes equipped to handle both Server-Side Rendering (SSR) - and Static Site Generation (SSG) for Angular applications. With AnalogJs, Angular can easily power marketing - websites, blog pages, and more! As AnalogJs is SSR by default, no further configuration is necessary. -

-

- Last but not least, AnalogJs supports API (server) routes and file-based routing for Angular apps. In an - AnalogJs application, the folder hierarchy and filenames determine the routing. You won't ever need to declare a - route array again. -

+

+ Another incredible advantage of AnalogJs is that it comes equipped to handle both Server-Side Rendering (SSR) + and Static Site Generation (SSG) for Angular applications. With AnalogJs, Angular can easily power marketing + websites, blog pages, and more! As AnalogJs is SSR by default, no further configuration is necessary. +

+

+ Last but not least, AnalogJs supports API (server) routes and file-based routing for Angular apps. In an + AnalogJs application, the folder hierarchy and filenames determine the routing. You won't ever need to declare a + route array again. +

- Angular - -

- Angular has opinionated routing solutions, a strong HttpClient for making asynchronous web queries, and, my - personal favorite, an outstanding dependency injection system. Angular provides programmers with all the - resources they need to create outstanding applications right out of the box. -

+ Angular + +

+ Angular has opinionated routing solutions, a strong HttpClient for making asynchronous web queries, and, my + personal favorite, an outstanding dependency injection system. Angular provides programmers with all the + resources they need to create outstanding applications right out of the box. +

- tRPC - -

- tRPC stands for TypeScript Remote Procedure Call, and is a lightweight library for remotely calling backend - functions on the client side. It makes communication between the backend and frontend incredibly easy, taking - advantage of TypeScript inference to automatically warn you of errors on your client before you even save the - change on your server file! Using tRPC will feel like using an SDK for your API's server code, giving you - confidence in your endpoints. -

+ tRPC + +

+ tRPC stands for TypeScript Remote Procedure Call, and is a lightweight library for remotely calling backend + functions on the client side. It makes communication between the backend and frontend incredibly easy, taking + advantage of TypeScript inference to automatically warn you of errors on your client before you even save the + change on your server file! Using tRPC will feel like using an SDK for your API's server code, giving you + confidence in your endpoints. +

- Drizzle - -

- We're just a few steps away from having complete type safety from our database to the template generating the - DOM. Drizzle is the tool that will bring us there. Drizzle is a Node.js and TypeScript ORM. It allows you to - create performant SQL queries with autocompletion powered by TypeScript. They also have incredible memes! -

+ Drizzle + +

+ We're just a few steps away from having complete type safety from our database to the template generating the + DOM. Drizzle is the tool that will bring us there. Drizzle is a Node.js and TypeScript ORM. It allows you to + create performant SQL queries with autocompletion powered by TypeScript. They also have incredible memes! +

- Supabase - -

- PostgreSQL is one of the world's most scalable databases. It is a sophisticated object-relational system - applying SQL. Postgres allows you to securely store vast quantities of complex data. It enables developers to - build the most sophisticated programs, carry out administrative operations, and establish integral environments. - It is an open-source technology trusted by millions of developers. -

-

- It turns out that every Supabase project is powered by a dedicated PostgreSQL database. Supabase is a fantastic - open-source Firebase replacement powered by the aforementioned Postgres database. It also provides a lot more - features as your project expands and becomes more involved. -

+ Supabase + +

+ PostgreSQL is one of the world's most scalable databases. It is a sophisticated object-relational system + applying SQL. Postgres allows you to securely store vast quantities of complex data. It enables developers to + build the most sophisticated programs, carry out administrative operations, and establish integral environments. + It is an open-source technology trusted by millions of developers. +

+

+ It turns out that every Supabase project is powered by a dedicated PostgreSQL database. Supabase is a fantastic + open-source Firebase replacement powered by the aforementioned Postgres database. It also provides a lot more + features as your project expands and becomes more involved. +

- TailwindCSS -

- Finally, every good application needs a great UI. Although it's easier said than done, there are tools that help - us do our best work. Tailwind is one of those essential tools for me. Tailwind is "a utility-first CSS framework - packed with classes like flex, pt-4, - text-center and rotate-90." -

-

- These utility classes let you modify the layout, color, spacing, font, shadows, and more to create a distinctive - component design without leaving your HTML or adding any additional CSS code. -

+ TailwindCSS +

+ Finally, every good application needs a great UI. Although it's easier said than done, there are tools that help + us do our best work. Tailwind is one of those essential tools for me. Tailwind is "a utility-first CSS framework + packed with classes like + flex + , + pt-4 + , + text-center + and + rotate-90 + ." +

+

+ These utility classes let you modify the layout, color, spacing, font, shadows, and more to create a distinctive + component design without leaving your HTML or adding any additional CSS code. +

- - - - -
- - - - - - - - - - `, + + + + +
+ + + + + + + + + + `, }) export default class AccordionPageComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts b/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts index 511e522dc..e1575bd36 100644 --- a/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts +++ b/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts @@ -1,25 +1,25 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; import { hlmMuted } from '@spartan-ng/ui-typography-helm'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Not Found' }, - meta: metaWith('spartan/stack - Page not found', 'Seems like you got lost browsing the spartan/stack.'), - title: 'spartan/stack - Page not found', + data: { breadcrumb: 'Not Found' }, + meta: metaWith('spartan/stack - Page not found', 'Seems like you got lost browsing the spartan/stack.'), + title: 'spartan/stack - Page not found', }; @Component({ - selector: 'spartan-stack-not-found', - standalone: true, - imports: [MainSectionDirective], - template: ` -
-
-

Coming soon...

-
-
- `, + selector: 'spartan-stack-not-found', + standalone: true, + imports: [MainSectionDirective], + template: ` +
+
+

Coming soon...

+
+
+ `, }) export default class ComponentsNotFoundPageComponent {} diff --git a/apps/app/src/app/pages/(stack)/stack/index.page.ts b/apps/app/src/app/pages/(stack)/stack/index.page.ts index cba4a94a0..bebace707 100644 --- a/apps/app/src/app/pages/(stack)/stack/index.page.ts +++ b/apps/app/src/app/pages/(stack)/stack/index.page.ts @@ -1,6 +1,6 @@ import { RouteMeta } from '@analogjs/router'; export const routeMeta: RouteMeta = { - redirectTo: '/stack/overview', - pathMatch: 'full', + redirectTo: '/stack/overview', + pathMatch: 'full', }; diff --git a/apps/app/src/app/pages/(stack)/stack/installation.page.ts b/apps/app/src/app/pages/(stack)/stack/installation.page.ts index d5721ce1e..0bd2fb0dd 100644 --- a/apps/app/src/app/pages/(stack)/stack/installation.page.ts +++ b/apps/app/src/app/pages/(stack)/stack/installation.page.ts @@ -1,135 +1,143 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; -import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; -import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; -import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; -import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; -import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm'; -import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; -import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; -import { CodeComponent } from '~/app/shared/code/code.component'; -import { TabsComponent } from '~/app/shared/layout/tabs.component'; -import { HlmAlertModule } from '@spartan-ng/ui-alert-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { RouterLink } from '@angular/router'; import { provideIcons } from '@ng-icons/core'; import { radixChevronRight, radixExclamationTriangle } from '@ng-icons/radix-icons'; +import { HlmAlertModule } from '@spartan-ng/ui-alert-helm'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm'; import { AccordionPreviewComponent } from '~/app/pages/(components)/components/(accordion)/accordion.preview'; import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive'; -import { RouterLink } from '@angular/router'; +import { CodeComponent } from '~/app/shared/code/code.component'; +import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; +import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component'; +import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component'; +import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component'; +import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component'; +import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component'; +import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component'; +import { TabsComponent } from '~/app/shared/layout/tabs.component'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Installation' }, - meta: metaWith('spartan/stack - Installation', 'Get up and running with the spartan/stack.'), - title: 'spartan/stack - Installation', + data: { breadcrumb: 'Installation' }, + meta: metaWith('spartan/stack - Installation', 'Get up and running with the spartan/stack.'), + title: 'spartan/stack - Installation', }; @Component({ - selector: 'spartan-stack-installation', - standalone: true, - imports: [ - MainSectionDirective, - SectionIntroComponent, - SectionSubHeadingComponent, - PageBottomNavComponent, - PageBottomNavLinkComponent, - PageNavComponent, - PageNavLinkComponent, - CodeComponent, - TabsComponent, - HlmAlertModule, - HlmIconComponent, - HlmButtonDirective, - AccordionPreviewComponent, - CodePreviewDirective, - RouterLink, - ], - providers: [provideIcons({ radixExclamationTriangle, radixChevronRight })], - template: ` -
- - - Setting up your Nx workspace - -

- The spartan/stack starts with an Nx workspace. Even better, AnalogJs comes with - first-class Nx support and a preset, which will set up our favorite meta-framework for you out of the box! -

- -

Enter the following command:

- - - -

You will be asked to choose a folder name for your workspace:

- -

Pick whichever fits your project the best!

- -

Then, you will be prompted to answer the following questions:

- -

- Give your application a meaningful name (we will refer to this as - [YOUR_APP_NAME] in this guide) and press y/Y to - answer both questions about adding TailwindCSS and tRPC to your application. -

- - AnalogJs, Angular, TailwindCSS, and tRPC - -

- With this simple command, you will have a working Nx workspace that includes an example AnalogJs application, - with TailwindCSS and tRPC already set up! -

- -

Watch the video below to become more familiar with the AnalogJs setup.

- -
-
- -
-
- - Drizzle -

- Currently, we use an in-memory array to store the notes of our example application. Let's persist our data in an - actual database. To interact with our DB, we will use the Drizzle ORM. Let's first install the necessary - dependencies: -

- - -
- -

Dealing with postgres & CommonJs

-

- postgres is a CommonJs package, which directly exposes an augmented function. - Therefore, we need to adjust our [YOUR_APP_NAME]/tsconfig.json file to tell - the TS compiler how to deal with it properly. Add the following line to - compilerOptions: -

- -
- -

- Finally, we need to set up our DB connection and create a typescript schema that matches our database structure. - We will add a [YOUR_APP_NAME]/src/db.ts file with the following content: -

- - + + Setting up your Nx workspace + +

+ The + spartan/stack + starts with an Nx workspace. Even better, AnalogJs comes with first-class Nx support and a preset, which will + set up our favorite meta-framework for you out of the box! +

+ +

Enter the following command:

+ + + +

You will be asked to choose a folder name for your workspace:

+ +

Pick whichever fits your project the best!

+ +

Then, you will be prompted to answer the following questions:

+ +

+ Give your application a meaningful name (we will refer to this as + [YOUR_APP_NAME] + in this guide) and press + y/Y + to answer both questions about adding TailwindCSS and tRPC to your application. +

+ + AnalogJs, Angular, TailwindCSS, and tRPC + +

+ With this simple command, you will have a working Nx workspace that includes an example AnalogJs application, + with TailwindCSS and tRPC already set up! +

+ +

Watch the video below to become more familiar with the AnalogJs setup.

+ +
+
+ +
+
+ + Drizzle +

+ Currently, we use an in-memory array to store the notes of our example application. Let's persist our data in an + actual database. To interact with our DB, we will use the Drizzle ORM. Let's first install the necessary + dependencies: +

+ + +
+ +

Dealing with postgres & CommonJs

+

+ postgres + is a CommonJs package, which directly exposes an augmented function. Therefore, we need to adjust our + [YOUR_APP_NAME]/tsconfig.json + file to tell the TS compiler how to deal with it properly. Add the following line to + compilerOptions + : +

+ +
+ +

+ Finally, we need to set up our DB connection and create a typescript schema that matches our database structure. + We will add a + [YOUR_APP_NAME]/src/db.ts + file with the following content: +

+ + - -

- We first declare our notes table and make Drizzle aware of all its columns and their respective types. We then - declare some helper types we will use when retrieving and creating our Notes. Finally, we initialize our - Postgres client and pass it to Drizzle -

- -

- This is where the spartan/stack starts to flex its muscles. We can now use this - schema in our component. Go to - [YOUR_APP_NAME]/src/app/pages/analog-welcome.component.ts and replace the - following line: -

- - - -

with:

- - - -

- Excellent! We are only a few steps away from end-to-end type-safety for our Angular application. We take this - opportunity and delete the boilerplate file:[YOUR_APP_NAME]/src/note.ts. -

-

Our types now come directly from our database!

-

- We continue and set up our backend to use Drizzle to read, create, and delete our notes. Adjust the - [YOUR_APP_NAME]/src/server/trpc/routers/notes.ts file to get the below output: -

- + We first declare our notes table and make Drizzle aware of all its columns and their respective types. We then + declare some helper types we will use when retrieving and creating our Notes. Finally, we initialize our + Postgres client and pass it to Drizzle +

+ +

+ This is where the + spartan/stack + starts to flex its muscles. We can now use this schema in our component. Go to + [YOUR_APP_NAME]/src/app/pages/analog-welcome.component.ts + and replace the following line: +

+ + + +

with:

+ + + +

+ Excellent! We are only a few steps away from end-to-end type-safety for our Angular application. We take this + opportunity and delete the boilerplate file: + [YOUR_APP_NAME]/src/note.ts + . +

+

Our types now come directly from our database!

+

+ We continue and set up our backend to use Drizzle to read, create, and delete our notes. Adjust the + [YOUR_APP_NAME]/src/server/trpc/routers/notes.ts + file to get the below output: +

+ - -

- Awesome! This is all we need to persist our data. Now that we are using type-safe database interactions and also - leverage Drizzle's generated schemas in your components only one thing is missing: - A database! -

- - Supabase -

- We will use Supabase as our database infrastructure provider. There are two ways to get up and running with - Supabase: -

- -
    -
  1. Connecting directly to your managed instance on supabase.com
    2. -
  2. Locally using Docker
    3. -
- - -
-

Option 1: Connecting to supabase.com instance

-

- This way is super easy! Simply by creating your account, you will also have set up your first project. This - means that you are ready to connect to your projects database already! -

-

- Let's connect our application to our Supabase Postgres instance: Add a - .env file at the root of your Nx workspace and add the following code - snippet: -

- - - -
- -

Make sure to add .env to your .gitignore file.

-

- You do not want to accidentally commit your secrets to GitHub. To exclude the file from git add a new line - to the - .gitignore-file and add .env on a new - line. -

-
-
- -
-

Option 2: Connecting to local Supabase instance

-

- Supabase also allows you to run a version of their system locally! To get up and running you can follow this - guide! They do a great job explaining how to get started and there is plenty of resources to help you if you - get stuck. If you want the quick and dirty way and are on a Mac. Here is what I did to get up and running: -

-

Install supabase CLI

- -

Log into CLI

- -

- Create your access token from - - https://app.supabase.com/account/tokens - - and paste it into your terminal window. -

- -

Create Supabase project

- + Awesome! This is all we need to persist our data. Now that we are using type-safe database interactions and also + leverage Drizzle's generated schemas in your components only one thing is missing: + A database! +

+ + Supabase +

+ We will use Supabase as our database infrastructure provider. There are two ways to get up and running with + Supabase: +

+ +
    +
  1. Connecting directly to your managed instance on supabase.com
    2. +
  2. Locally using Docker
    3. +
+ + +
+

Option 1: Connecting to supabase.com instance

+

+ This way is super easy! Simply by creating your account, you will also have set up your first project. This + means that you are ready to connect to your projects database already! +

+

+ Let's connect our application to our Supabase Postgres instance: Add a + .env + file at the root of your Nx workspace and add the following code snippet: +

+ + + +
+ +

Make sure to add .env to your .gitignore file.

+

+ You do not want to accidentally commit your secrets to GitHub. To exclude the file from git add a new line + to the + .gitignore + -file and add + .env + on a new line. +

+
+
+ +
+

Option 2: Connecting to local Supabase instance

+

+ Supabase also allows you to run a version of their system locally! To get up and running you can follow this + guide! They do a great job explaining how to get started and there is plenty of resources to help you if you + get stuck. If you want the quick and dirty way and are on a Mac. Here is what I did to get up and running: +

+

Install supabase CLI

+ +

Log into CLI

+ +

+ Create your access token from + + https://app.supabase.com/account/tokens + + and paste it into your terminal window. +

+ +

Create Supabase project

+ - - -

Start Supabase services

- - - -
- -

Important: Make sure Docker is running

-

- Make sure Docker is running and configured correctly! I had Docker already installed and running. However, - my setup is not compatible with the config Supabase expects by default. -

-
- -

To get it to work for now I ran:

- -

- The previous step can take a while as all the docker images have to be downloaded first. However, once - everything completes you will see a console output that looks like this: -

- - Start Supabase services + + + +
+ +

Important: Make sure Docker is running

+

+ Make sure Docker is running and configured correctly! I had Docker already installed and running. However, + my setup is not compatible with the config Supabase expects by default. +

+
+ +

To get it to work for now I ran:

+ +

+ The previous step can take a while as all the docker images have to be downloaded first. However, once + everything completes you will see a console output that looks like this: +

+ + -

- Take your cyber-security hat off for a minute (we are working locally after all) and copy the connection - string: -

- - - -

- Add a .env file at the root of your Nx workspace and add the connection - string like so: -

- - -

Perfect! You should be able to connect to your local Supabase Postgres instance now!

-
- - - Setting up the Schema -

- While Drizzle is adding support for automatic database migrations, I like to keep them explicit and run the - commands directly against the DB. Until spartan/stack comes with an automated solution like liquibase, let's - manually run the following command in the SQL-Editor to create our notes table: -

- + Take your cyber-security hat off for a minute (we are working locally after all) and copy the connection + string: +

+ + + +

+ Add a + .env + file at the root of your Nx workspace and add the connection string like so: +

+ + +

Perfect! You should be able to connect to your local Supabase Postgres instance now!

+
+ + + Setting up the Schema +

+ While Drizzle is adding support for automatic database migrations, I like to keep them explicit and run the + commands directly against the DB. Until spartan/stack comes with an automated solution like liquibase, let's + manually run the following command in the SQL-Editor to create our notes table: +

+ - - Local Development - -

You can now serve the local development server by running the above command.

- - Build for Production - -

- Finally, let's build a production bundle of our application. Run the command above. By default, AnalogJs will - build a NodeJs-compatible output, which you can run with the following command: -

- -

- AnalogJs also supports multiple build presets, which makes it easy to deploy your application to most of the - major cloud providers. This includes Vercel, Cloudflare, Azure, AWS, and more. -

-
- Check out the AnalogJs docs for more info - - -
- - Next Steps -

- Now that you know how to develop and build your application for production, you are ready to take it to the next - level. Why don't you make it beautiful and accessible for everyone with spartan/ui? -

- - - - - -
- - - - - - - - - - - `, + /> + + Local Development + +

You can now serve the local development server by running the above command.

+ + Build for Production + +

+ Finally, let's build a production bundle of our application. Run the command above. By default, AnalogJs will + build a NodeJs-compatible output, which you can run with the following command: +

+ +

+ AnalogJs also supports multiple build presets, which makes it easy to deploy your application to most of the + major cloud providers. This includes Vercel, Cloudflare, Azure, AWS, and more. +

+
+ + Check out the AnalogJs docs for more info + + +
+ + Next Steps +

+ Now that you know how to develop and build your application for production, you are ready to take it to the next + level. Why don't you make it beautiful and accessible for everyone with spartan/ui? +

+ + + + + + + + + + + + + + + + + `, }) export default class InstallationPageComponent {} diff --git a/apps/app/src/app/pages/[...not-found].page.ts b/apps/app/src/app/pages/[...not-found].page.ts index 05d3bbe79..290efaccb 100644 --- a/apps/app/src/app/pages/[...not-found].page.ts +++ b/apps/app/src/app/pages/[...not-found].page.ts @@ -1,31 +1,31 @@ import { RouteMeta } from '@analogjs/router'; -import { metaWith } from '~/app/shared/meta/meta.util'; import { Component } from '@angular/core'; -import { hlmH3, hlmMuted } from '@spartan-ng/ui-typography-helm'; -import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { RouterLink } from '@angular/router'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm'; +import { hlmH3, hlmMuted } from '@spartan-ng/ui-typography-helm'; +import { metaWith } from '~/app/shared/meta/meta.util'; export const routeMeta: RouteMeta = { - data: { breadcrumb: 'Not Found' }, - meta: metaWith('spartan - Page not found', 'Seems like you got lost browsing spartan.'), - title: 'spartan - Page not found', + data: { breadcrumb: 'Not Found' }, + meta: metaWith('spartan - Page not found', 'Seems like you got lost browsing spartan.'), + title: 'spartan - Page not found', }; @Component({ - selector: 'spartan-not-found', - standalone: true, - imports: [HlmSeparatorDirective, HlmButtonDirective, RouterLink], - host: { - class: 'h-full flex flex-col items-center justify-center', - }, - template: ` -
-

404

-
-

This page could not be found

-
- Back home - `, + selector: 'spartan-not-found', + standalone: true, + imports: [HlmSeparatorDirective, HlmButtonDirective, RouterLink], + host: { + class: 'h-full flex flex-col items-center justify-center', + }, + template: ` +
+

404

+
+

This page could not be found

+
+ Back home + `, }) export default class NotFoundComponent {} diff --git a/apps/app/src/app/pages/alpha.page.ts b/apps/app/src/app/pages/alpha.page.ts index daa12f16d..a16b78bc9 100644 --- a/apps/app/src/app/pages/alpha.page.ts +++ b/apps/app/src/app/pages/alpha.page.ts @@ -1,6 +1,6 @@ import { RouteMeta } from '@analogjs/router'; export const routeMeta: RouteMeta = { - redirectTo: '/documentation/changelog#initial-alpha', - pathMatch: 'full', + redirectTo: '/documentation/changelog#initial-alpha', + pathMatch: 'full', }; diff --git a/apps/app/src/app/shared/breadcrumbs/breadcrumb.service.ts b/apps/app/src/app/shared/breadcrumbs/breadcrumb.service.ts index c4e2b9f82..db5aca7a6 100644 --- a/apps/app/src/app/shared/breadcrumbs/breadcrumb.service.ts +++ b/apps/app/src/app/shared/breadcrumbs/breadcrumb.service.ts @@ -1,82 +1,85 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; import { ActivatedRoute, Data, NavigationEnd, Router } from '@angular/router'; +import { BehaviorSubject } from 'rxjs'; import { filter } from 'rxjs/operators'; import { Breadcrumb } from './breadcrumbs.component'; // The breadcrumb can be defined as a static string or as a function to construct the breadcrumb element out of the route data const getLabel = (data: Data | undefined): string => { - if (!data) return ''; - return typeof data['breadcrumb'] === 'function' ? data['breadcrumb'](data) : data['breadcrumb']; + if (!data) return ''; + return typeof data['breadcrumb'] === 'function' ? data['breadcrumb'](data) : data['breadcrumb']; }; @Injectable({ - providedIn: 'root', + providedIn: 'root', }) export class BreadcrumbService { - private readonly _breadcrumbs$ = new BehaviorSubject([]); + private readonly _breadcrumbs$ = new BehaviorSubject([]); - // Observable exposing the breadcrumb hierarchy - readonly breadcrumbs$ = this._breadcrumbs$.asObservable(); + // Observable exposing the breadcrumb hierarchy + readonly breadcrumbs$ = this._breadcrumbs$.asObservable(); - constructor(private router: Router, private activatedRoute: ActivatedRoute) { - this.router.events - .pipe( - // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end - filter((event) => event instanceof NavigationEnd) - ) - .subscribe(() => { - // Construct the breadcrumb hierarchy - const breadcrumbs = this.buildBreadcrumbs(this.activatedRoute.root); - // Emit the new hierarchy - this._breadcrumbs$.next(breadcrumbs); - }); - } + constructor( + private router: Router, + private activatedRoute: ActivatedRoute, + ) { + this.router.events + .pipe( + // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end + filter((event) => event instanceof NavigationEnd), + ) + .subscribe(() => { + // Construct the breadcrumb hierarchy + const breadcrumbs = this.buildBreadcrumbs(this.activatedRoute.root); + // Emit the new hierarchy + this._breadcrumbs$.next(breadcrumbs); + }); + } - public updateCurrentBreadcrumbData(newData: Partial) { - const newBreadcrumbs = [...this._breadcrumbs$.getValue()]; - newBreadcrumbs[newBreadcrumbs.length - 1] = { - ...newBreadcrumbs[newBreadcrumbs.length - 1], - ...newData, - }; - this._breadcrumbs$.next(newBreadcrumbs); - } + public updateCurrentBreadcrumbData(newData: Partial) { + const newBreadcrumbs = [...this._breadcrumbs$.getValue()]; + newBreadcrumbs[newBreadcrumbs.length - 1] = { + ...newBreadcrumbs[newBreadcrumbs.length - 1], + ...newData, + }; + this._breadcrumbs$.next(newBreadcrumbs); + } - private buildBreadcrumbs(route: ActivatedRoute, url = '', breadcrumbs: Breadcrumb[] = []): Breadcrumb[] { - //If no routeConfig is available we are on the root path - const label = getLabel(route?.routeConfig?.data); - let path = route?.routeConfig?.path ?? ''; + private buildBreadcrumbs(route: ActivatedRoute, url = '', breadcrumbs: Breadcrumb[] = []): Breadcrumb[] { + //If no routeConfig is available we are on the root path + const label = getLabel(route?.routeConfig?.data); + let path = route?.routeConfig?.path ?? ''; - // If the route is dynamic route such as ':id', remove it - const routeParts = path.split('/'); - routeParts.forEach((part) => { - const isDynamicRoute = part.startsWith(':'); - if (isDynamicRoute && !!route.snapshot) { - const paramName = part.split(':')[1]; - path = path.replace(part, route.snapshot.params[paramName]); - } - }); + // If the route is dynamic route such as ':id', remove it + const routeParts = path.split('/'); + routeParts.forEach((part) => { + const isDynamicRoute = part.startsWith(':'); + if (isDynamicRoute && !!route.snapshot) { + const paramName = part.split(':')[1]; + path = path.replace(part, route.snapshot.params[paramName]); + } + }); - // replace wildcard operators with empty string - path = path.replace(/\*/g, ''); + // replace wildcard operators with empty string + path = path.replace(/\*/g, ''); - //In the routeConfig the complete path is not available, - //so we rebuild it each time - const nextUrl = path ? `${url}/${path}` : url; + //In the routeConfig the complete path is not available, + //so we rebuild it each time + const nextUrl = path ? `${url}/${path}` : url; - const breadcrumb: Breadcrumb = { - label: label, - url: nextUrl, - loading: !!route.snapshot.data['loading'], - loadingLabel: route.snapshot.data['loadingLabel'] ?? 'Loading...', - }; - // Only adding route with non-empty label - const newBreadcrumbs = breadcrumb.label ? [...breadcrumbs, breadcrumb] : [...breadcrumbs]; - if (route.firstChild) { - //If we are not on our current path yet, - //there will be more children to look after, to build our breadcrumb - return this.buildBreadcrumbs(route.firstChild, nextUrl, newBreadcrumbs); - } - return newBreadcrumbs; - } + const breadcrumb: Breadcrumb = { + label: label, + url: nextUrl, + loading: !!route.snapshot.data['loading'], + loadingLabel: route.snapshot.data['loadingLabel'] ?? 'Loading...', + }; + // Only adding route with non-empty label + const newBreadcrumbs = breadcrumb.label ? [...breadcrumbs, breadcrumb] : [...breadcrumbs]; + if (route.firstChild) { + //If we are not on our current path yet, + //there will be more children to look after, to build our breadcrumb + return this.buildBreadcrumbs(route.firstChild, nextUrl, newBreadcrumbs); + } + return newBreadcrumbs; + } } diff --git a/apps/app/src/app/shared/breadcrumbs/breadcrumbs.component.ts b/apps/app/src/app/shared/breadcrumbs/breadcrumbs.component.ts index 739400f25..3d7eb2307 100644 --- a/apps/app/src/app/shared/breadcrumbs/breadcrumbs.component.ts +++ b/apps/app/src/app/shared/breadcrumbs/breadcrumbs.component.ts @@ -1,55 +1,57 @@ -import { ChangeDetectionStrategy, Component, HostBinding, inject, ViewEncapsulation } from '@angular/core'; -import { provideIcons } from '@ng-icons/core'; +import { NgForOf, NgIf } from '@angular/common'; +import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { RouterLink } from '@angular/router'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { provideIcons } from '@ng-icons/core'; import { radixChevronRight } from '@ng-icons/radix-icons'; -import { NgForOf, NgIf } from '@angular/common'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { BreadcrumbService } from '~/app/shared/breadcrumbs/breadcrumb.service'; -import { toSignal } from '@angular/core/rxjs-interop'; export interface Breadcrumb { - label: string; - url: string; - loading: boolean; - loadingLabel?: string; + label: string; + url: string; + loading: boolean; + loadingLabel?: string; } @Component({ - selector: 'spartan-breadcrumbs', - standalone: true, - imports: [RouterLink, HlmIconComponent, NgIf, NgForOf], - providers: [provideIcons({ radixChevronRight })], - template: ` - - - - `, - encapsulation: ViewEncapsulation.Emulated, - changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'spartan-breadcrumbs', + standalone: true, + imports: [RouterLink, HlmIconComponent, NgIf, NgForOf], + providers: [provideIcons({ radixChevronRight })], + template: ` + + + + `, + encapsulation: ViewEncapsulation.Emulated, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class BreadcrumbsComponent { - public breadcrumbs = toSignal(inject(BreadcrumbService).breadcrumbs$); + public breadcrumbs = toSignal(inject(BreadcrumbService).breadcrumbs$); - @HostBinding('class') - public class = ''; + @HostBinding('class') + public class = ''; } diff --git a/apps/app/src/app/shared/code/code-preview.directive.ts b/apps/app/src/app/shared/code/code-preview.directive.ts index 825df3067..6ccdbaeb6 100644 --- a/apps/app/src/app/shared/code/code-preview.directive.ts +++ b/apps/app/src/app/shared/code/code-preview.directive.ts @@ -1,10 +1,10 @@ import { Directive } from '@angular/core'; @Directive({ - selector: '[spartanCodePreview]', - standalone: true, - host: { - class: 'preview flex min-h-[350px] w-full justify-center p-10 items-center', - }, + selector: '[spartanCodePreview]', + standalone: true, + host: { + class: 'preview flex min-h-[350px] w-full justify-center p-10 items-center', + }, }) export class CodePreviewDirective {} diff --git a/apps/app/src/app/shared/code/code.component.ts b/apps/app/src/app/shared/code/code.component.ts index af434052b..4baa854bc 100644 --- a/apps/app/src/app/shared/code/code.component.ts +++ b/apps/app/src/app/shared/code/code.component.ts @@ -1,15 +1,22 @@ import { booleanAttribute, Component, inject, Input, ViewEncapsulation } from '@angular/core'; import { - BrnTabsComponent, - BrnTabsContentDirective, - BrnTabsListComponent, - BrnTabsTriggerDirective, + BrnTabsComponent, + BrnTabsContentDirective, + BrnTabsListComponent, + BrnTabsTriggerDirective, } from '@spartan-ng/ui-tabs-brain'; import { HlmTabsContentDirective } from '@spartan-ng/ui-tabs-helm'; import { marked } from 'marked'; import { gfmHeadingId } from 'marked-gfm-heading-id'; import { markedHighlight } from 'marked-highlight'; +import { Clipboard } from '@angular/cdk/clipboard'; +import { NgIf } from '@angular/common'; +import { provideIcons } from '@ng-icons/core'; +import { radixCheck, radixClipboard } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; import 'prismjs'; import 'prismjs/components/prism-bash'; import 'prismjs/components/prism-css'; @@ -17,163 +24,156 @@ import 'prismjs/components/prism-javascript'; import 'prismjs/components/prism-json'; import 'prismjs/components/prism-markup'; import 'prismjs/components/prism-typescript'; -import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixCheck, radixClipboard } from '@ng-icons/radix-icons'; -import { Clipboard } from '@angular/cdk/clipboard'; -import { NgIf } from '@angular/common'; declare const Prism: typeof import('prismjs'); @Component({ - selector: 'spartan-code', - standalone: true, - imports: [ - BrnTabsComponent, - BrnTabsListComponent, - BrnTabsTriggerDirective, - HlmTabsContentDirective, - BrnTabsContentDirective, - HlmScrollAreaComponent, - HlmButtonDirective, - HlmIconComponent, - NgIf, - ], - providers: [provideIcons({ radixClipboard, radixCheck })], - host: { - class: 'spartan-scroll relative block font-mono rounded-md text-sm text-white bg-zinc-950 dark:bg-zinc-900', - }, - template: ` - -
-
-
- `, - styles: [ - ` - .spartan-scroll .token.class-name { - opacity: 1; - } + selector: 'spartan-code', + standalone: true, + imports: [ + BrnTabsComponent, + BrnTabsListComponent, + BrnTabsTriggerDirective, + HlmTabsContentDirective, + BrnTabsContentDirective, + HlmScrollAreaComponent, + HlmButtonDirective, + HlmIconComponent, + NgIf, + ], + providers: [provideIcons({ radixClipboard, radixCheck })], + host: { + class: 'spartan-scroll relative block font-mono rounded-md text-sm text-white bg-zinc-950 dark:bg-zinc-900', + }, + template: ` + +
+
+
+ `, + styles: [ + ` + .spartan-scroll .token.class-name { + opacity: 1; + } - .spartan-scroll .token.property, - .spartan-scroll .token.tag, - .spartan-scroll .token.boolean, - .spartan-scroll .token.number, - .spartan-scroll .token.constant, - .spartan-scroll .token.symbol, - .spartan-scroll .token.deleted, - .spartan-scroll .token.selector, - .spartan-scroll .token.attr-name, - .spartan-scroll .token.string, - .spartan-scroll .token.char, - .spartan-scroll .token.builtin, - .spartan-scroll .token.inserted, - .spartan-scroll .token.atrule, - .spartan-scroll .token.attr-value, - .spartan-scroll .token.function, - .spartan-scroll .token.regex, - .spartan-scroll .token.important, - .spartan-scroll .token.variable { - opacity: 0.533; - } + .spartan-scroll .token.property, + .spartan-scroll .token.tag, + .spartan-scroll .token.boolean, + .spartan-scroll .token.number, + .spartan-scroll .token.constant, + .spartan-scroll .token.symbol, + .spartan-scroll .token.deleted, + .spartan-scroll .token.selector, + .spartan-scroll .token.attr-name, + .spartan-scroll .token.string, + .spartan-scroll .token.char, + .spartan-scroll .token.builtin, + .spartan-scroll .token.inserted, + .spartan-scroll .token.atrule, + .spartan-scroll .token.attr-value, + .spartan-scroll .token.function, + .spartan-scroll .token.regex, + .spartan-scroll .token.important, + .spartan-scroll .token.variable { + opacity: 0.533; + } - .spartan-scroll .token.operator, - .spartan-scroll .token.entity, - .spartan-scroll .token.url, - .spartan-scroll .token.keyword, - .spartan-scroll .language-css .token.string, - .spartan-scroll .style .token.string { - opacity: 0.733; - } - `, - ], - encapsulation: ViewEncapsulation.None, + .spartan-scroll .token.operator, + .spartan-scroll .token.entity, + .spartan-scroll .token.url, + .spartan-scroll .token.keyword, + .spartan-scroll .language-css .token.string, + .spartan-scroll .style .token.string { + opacity: 0.733; + } + `, + ], + encapsulation: ViewEncapsulation.None, }) export class CodeComponent { - private readonly _clipboard = inject(Clipboard); - private readonly marked: typeof marked; - protected _content = ''; - protected copied = false; + private readonly _clipboard = inject(Clipboard); + private readonly marked: typeof marked; + protected _content = ''; + protected copied = false; - protected _disableCopy = false; - @Input({ transform: booleanAttribute }) - set disableCopy(value: boolean) { - this._disableCopy = value; - } + protected _disableCopy = false; + @Input({ transform: booleanAttribute }) + set disableCopy(value: boolean) { + this._disableCopy = value; + } - private _language: 'ts' | 'sh' = 'ts'; - @Input() - set language(value: 'ts' | 'sh') { - this._language = value; - } + private _language: 'ts' | 'sh' = 'ts'; + @Input() + set language(value: 'ts' | 'sh') { + this._language = value; + } - private _code: string | null | undefined; - @Input() - set code(value: string | null | undefined) { - this._code = value; - (this._language === 'sh' - ? this.marked.parse(value?.trim() ?? '') - : (this.marked.parse(`\`\`\`typescript\n${value?.trim() ?? ''}\n\`\`\``) as any) - ).then((content: string) => { - this._content = content; - }); - } + private _code: string | null | undefined; + @Input() + set code(value: string | null | undefined) { + this._code = value; + (this._language === 'sh' + ? this.marked.parse(value?.trim() ?? '') + : (this.marked.parse(`\`\`\`typescript\n${value?.trim() ?? ''}\n\`\`\``) as any) + ).then((content: string) => { + this._content = content; + }); + } - constructor() { - const renderer = new marked.Renderer(); - renderer.code = (code, lang) => { - if (!lang) { - return '
' + code + '
'; - } - const langClass = 'language-' + lang; - return '
' + code + '
'; - }; + constructor() { + const renderer = new marked.Renderer(); + renderer.code = (code, lang) => { + if (!lang) { + return '
' + code + '
'; + } + const langClass = 'language-' + lang; + return '
' + code + '
'; + }; - marked.use( - gfmHeadingId(), - markedHighlight({ - async: true, - highlight: (code, lang) => { - lang = lang || 'typescript'; - if (!Prism.languages[lang]) { - console.warn(`Notice: + marked.use( + gfmHeadingId(), + markedHighlight({ + async: true, + highlight: (code, lang) => { + lang = lang || 'typescript'; + if (!Prism.languages[lang]) { + console.warn(`Notice: --------------------------------------------------------------------------------------- The requested language '${lang}' is not available with the provided setup. To enable, import your main.ts as: import 'prismjs/components/prism-${lang}'; --------------------------------------------------------------------------------------- `); - return code; - } - return Prism.highlight(code, Prism.languages[lang], lang); - }, - }), - { - renderer, - pedantic: false, - gfm: true, - breaks: false, - mangle: false, - } - ); + return code; + } + return Prism.highlight(code, Prism.languages[lang], lang); + }, + }), + { + renderer, + pedantic: false, + gfm: true, + breaks: false, + mangle: false, + }, + ); - this.marked = marked; - } + this.marked = marked; + } - copyToClipBoard() { - if (!this._code) return; - this._clipboard.copy(this._code); - this.copied = true; - setTimeout(() => (this.copied = false), 3000); - } + copyToClipBoard() { + if (!this._code) return; + this._clipboard.copy(this._code); + this.copied = true; + setTimeout(() => (this.copied = false), 3000); + } } diff --git a/apps/app/src/app/shared/footer/footer.component.ts b/apps/app/src/app/shared/footer/footer.component.ts index cc18ff923..f2fc807f7 100644 --- a/apps/app/src/app/shared/footer/footer.component.ts +++ b/apps/app/src/app/shared/footer/footer.component.ts @@ -3,23 +3,25 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { hlmMuted } from '@spartan-ng/ui-typography-helm'; @Component({ - selector: 'spartan-footer', - standalone: true, - imports: [HlmButtonDirective], - host: { - class: 'block border-t bg-background/95 bg-blur-lg border-border px-4 py-8', - }, - template: ``, + selector: 'spartan-footer', + standalone: true, + imports: [HlmButtonDirective], + host: { + class: 'block border-t bg-background/95 bg-blur-lg border-border px-4 py-8', + }, + template: ` + + `, }) export class FooterComponent {} diff --git a/apps/app/src/app/shared/header/header-dark-mode.component.ts b/apps/app/src/app/shared/header/header-dark-mode.component.ts index 8d3718f24..e31276fc3 100644 --- a/apps/app/src/app/shared/header/header-dark-mode.component.ts +++ b/apps/app/src/app/shared/header/header-dark-mode.component.ts @@ -1,64 +1,65 @@ +import { AsyncPipe } from '@angular/common'; import { Component, inject } from '@angular/core'; -import { DarkMode, ThemeService } from '../theme.service'; -import { - BrnPopoverComponent, - BrnPopoverContentDirective, - BrnPopoverTriggerDirective, -} from '@spartan-ng/ui-popover-brain'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixMoon } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { BrnMenuDirective, BrnMenuItemCheckboxDirective, BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain'; import { HlmMenuDirective, HlmMenuItemCheckComponent, HlmMenuItemDirective } from '@spartan-ng/ui-menu-helm'; -import { AsyncPipe } from '@angular/common'; +import { + BrnPopoverComponent, + BrnPopoverContentDirective, + BrnPopoverTriggerDirective, +} from '@spartan-ng/ui-popover-brain'; +import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm'; +import { DarkMode, ThemeService } from '../theme.service'; @Component({ - selector: 'spartan-dark-mode', - standalone: true, - imports: [ - BrnPopoverComponent, - BrnPopoverTriggerDirective, - HlmButtonDirective, - HlmIconComponent, - HlmPopoverContentDirective, - BrnPopoverContentDirective, - BrnMenuTriggerDirective, - BrnMenuDirective, - HlmMenuDirective, - BrnMenuItemCheckboxDirective, - AsyncPipe, - HlmMenuItemDirective, - HlmMenuItemCheckComponent, - ], - providers: [provideIcons({ radixMoon })], - template: ` - - -
- - - -
- - `, + selector: 'spartan-dark-mode', + standalone: true, + imports: [ + BrnPopoverComponent, + BrnPopoverTriggerDirective, + HlmButtonDirective, + HlmIconComponent, + HlmPopoverContentDirective, + BrnPopoverContentDirective, + BrnMenuTriggerDirective, + BrnMenuDirective, + HlmMenuDirective, + BrnMenuItemCheckboxDirective, + AsyncPipe, + HlmMenuItemDirective, + HlmMenuItemCheckComponent, + ], + providers: [provideIcons({ radixMoon })], + template: ` + + +
+ + + +
+ + `, }) export class HeaderDarkModeComponent { - private _themeService = inject(ThemeService); - theme$ = this._themeService.darkMode$; - public setTheme(theme: DarkMode) { - this._themeService.setDarkMode(theme); - } + private _themeService = inject(ThemeService); + theme$ = this._themeService.darkMode$; + public setTheme(theme: DarkMode) { + this._themeService.setDarkMode(theme); + } } diff --git a/apps/app/src/app/shared/header/header-mobile-nav.component.ts b/apps/app/src/app/shared/header/header-mobile-nav.component.ts index 8a1c25a01..99d420edb 100644 --- a/apps/app/src/app/shared/header/header-mobile-nav.component.ts +++ b/apps/app/src/app/shared/header/header-mobile-nav.component.ts @@ -1,82 +1,82 @@ import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { provideIcons } from '@ng-icons/core'; +import { radixCross1, radixViewVertical } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; import { - BrnSheetCloseDirective, - BrnSheetComponent, - BrnSheetContentDirective, - BrnSheetOverlayComponent, - BrnSheetTriggerDirective, + BrnSheetCloseDirective, + BrnSheetComponent, + BrnSheetContentDirective, + BrnSheetOverlayComponent, + BrnSheetTriggerDirective, } from '@spartan-ng/ui-sheet-brain'; import { HlmSheetCloseDirective, HlmSheetContentDirective, HlmSheetOverlayDirective } from '@spartan-ng/ui-sheet-helm'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; -import { provideIcons } from '@ng-icons/core'; -import { radixCross1, radixViewVertical } from '@ng-icons/radix-icons'; import { SideNavContentComponent } from '~/app/shared/layout/side-nav/side-nav-content.component'; -import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; -import { RouterLink } from '@angular/router'; -import { NavLinkDirective } from '~/app/shared/spartan-nav-link.directive'; import { SideNavLinkDirective } from '~/app/shared/layout/side-nav/side-nav-link.directive'; import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component'; +import { NavLinkDirective } from '~/app/shared/spartan-nav-link.directive'; @Component({ - selector: 'spartan-mobile-nav', - standalone: true, - imports: [ - BrnSheetComponent, - BrnSheetOverlayComponent, - BrnSheetTriggerDirective, - BrnSheetContentDirective, - BrnSheetCloseDirective, + selector: 'spartan-mobile-nav', + standalone: true, + imports: [ + BrnSheetComponent, + BrnSheetOverlayComponent, + BrnSheetTriggerDirective, + BrnSheetContentDirective, + BrnSheetCloseDirective, - HlmSheetCloseDirective, - HlmSheetOverlayDirective, - HlmSheetContentDirective, + HlmSheetCloseDirective, + HlmSheetOverlayDirective, + HlmSheetContentDirective, - HlmButtonDirective, - HlmIconComponent, - SideNavContentComponent, - HlmScrollAreaComponent, - RouterLink, - NavLinkDirective, - SideNavLinkDirective, - SpartanLogoComponent, - ], - providers: [provideIcons({ radixViewVertical, radixCross1 })], - template: ` - - - -
- -
- - - - spartan/ui -
- -
- - Documentation - - Stack - - Components - - - Examples - -
- - -
- - `, + HlmButtonDirective, + HlmIconComponent, + SideNavContentComponent, + HlmScrollAreaComponent, + RouterLink, + NavLinkDirective, + SideNavLinkDirective, + SpartanLogoComponent, + ], + providers: [provideIcons({ radixViewVertical, radixCross1 })], + template: ` + + + +
+ +
+ + + + spartan/ui +
+ +
+ + Documentation + + Stack + + Components + + + Examples + +
+ + +
+ + `, }) export class HeaderMobileNavComponent {} diff --git a/apps/app/src/app/shared/header/header-theme-picker.component.ts b/apps/app/src/app/shared/header/header-theme-picker.component.ts index 249fc7758..2fe04cf99 100644 --- a/apps/app/src/app/shared/header/header-theme-picker.component.ts +++ b/apps/app/src/app/shared/header/header-theme-picker.component.ts @@ -1,66 +1,66 @@ +import { AsyncPipe, NgForOf, TitleCasePipe } from '@angular/common'; import { Component, inject } from '@angular/core'; -import { AppThemes, Theme, ThemeService } from '../theme.service'; -import { - BrnPopoverComponent, - BrnPopoverContentDirective, - BrnPopoverTriggerDirective, -} from '@spartan-ng/ui-popover-brain'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixColorWheel } from '@ng-icons/radix-icons'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { BrnMenuDirective, BrnMenuItemCheckboxDirective, BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain'; import { HlmMenuDirective, HlmMenuItemCheckComponent, HlmMenuItemDirective } from '@spartan-ng/ui-menu-helm'; -import { AsyncPipe, NgForOf, TitleCasePipe } from '@angular/common'; +import { + BrnPopoverComponent, + BrnPopoverContentDirective, + BrnPopoverTriggerDirective, +} from '@spartan-ng/ui-popover-brain'; +import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm'; +import { AppThemes, Theme, ThemeService } from '../theme.service'; @Component({ - selector: 'spartan-theme-picker', - standalone: true, - imports: [ - BrnPopoverComponent, - BrnPopoverTriggerDirective, - HlmButtonDirective, - HlmIconComponent, - HlmPopoverContentDirective, - BrnPopoverContentDirective, - BrnMenuTriggerDirective, - BrnMenuDirective, - HlmMenuDirective, - BrnMenuItemCheckboxDirective, - AsyncPipe, - HlmMenuItemDirective, - HlmMenuItemCheckComponent, - NgForOf, - TitleCasePipe, - ], - providers: [provideIcons({ radixColorWheel })], - template: ` - - -
- -
- - `, + selector: 'spartan-theme-picker', + standalone: true, + imports: [ + BrnPopoverComponent, + BrnPopoverTriggerDirective, + HlmButtonDirective, + HlmIconComponent, + HlmPopoverContentDirective, + BrnPopoverContentDirective, + BrnMenuTriggerDirective, + BrnMenuDirective, + HlmMenuDirective, + BrnMenuItemCheckboxDirective, + AsyncPipe, + HlmMenuItemDirective, + HlmMenuItemCheckComponent, + NgForOf, + TitleCasePipe, + ], + providers: [provideIcons({ radixColorWheel })], + template: ` + + +
+ +
+ + `, }) export class HeaderThemePickerComponent { - private readonly _themeService = inject(ThemeService); - protected readonly _currentTheme = this._themeService.theme; - protected readonly _supportedThemes = AppThemes; - public setTheme(theme: Theme) { - this._themeService.setTheme(theme); - } + private readonly _themeService = inject(ThemeService); + protected readonly _currentTheme = this._themeService.theme; + protected readonly _supportedThemes = AppThemes; + public setTheme(theme: Theme) { + this._themeService.setTheme(theme); + } } diff --git a/apps/app/src/app/shared/header/header.component.ts b/apps/app/src/app/shared/header/header.component.ts index 822e9441c..a2da379c8 100644 --- a/apps/app/src/app/shared/header/header.component.ts +++ b/apps/app/src/app/shared/header/header.component.ts @@ -1,63 +1,63 @@ import { Component } from '@angular/core'; import { RouterLink } from '@angular/router'; -import { NavLinkDirective } from '../spartan-nav-link.directive'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixGithubLogo, radixTwitterLogo } from '@ng-icons/radix-icons'; -import { HeaderThemePickerComponent } from './header-theme-picker.component'; -import { HeaderMobileNavComponent } from '~/app/shared/header/header-mobile-nav.component'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { HeaderDarkModeComponent } from '~/app/shared/header/header-dark-mode.component'; +import { HeaderMobileNavComponent } from '~/app/shared/header/header-mobile-nav.component'; import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component'; +import { NavLinkDirective } from '../spartan-nav-link.directive'; +import { HeaderThemePickerComponent } from './header-theme-picker.component'; @Component({ - selector: 'spartan-header', - standalone: true, - imports: [ - HlmButtonDirective, - RouterLink, - HlmIconComponent, - HeaderThemePickerComponent, - NavLinkDirective, - HeaderMobileNavComponent, - HeaderDarkModeComponent, - SpartanLogoComponent, - ], - providers: [provideIcons({ radixTwitterLogo, radixGithubLogo })], - host: { - class: 'block sticky w-full top-0 z-40 bg-background/95 bg-blur-lg p-2 sm:px-4 border-b border-border', - }, - template: ` -
- -
- - Twitter - - - - Github - - - - -
-
- `, +
+ + Twitter + + + + Github + + + + +
+ + `, }) export class HeaderComponent {} diff --git a/apps/app/src/app/shared/input-error/input-error.component.ts b/apps/app/src/app/shared/input-error/input-error.component.ts index 5448df319..22233571a 100644 --- a/apps/app/src/app/shared/input-error/input-error.component.ts +++ b/apps/app/src/app/shared/input-error/input-error.component.ts @@ -1,26 +1,28 @@ -import { Component, computed } from '@angular/core'; import { NgFor, NgIf } from '@angular/common'; -import { injectErrorField } from 'ng-signal-forms'; +import { Component, computed } from '@angular/core'; import { HlmInputErrorDirective } from '@spartan-ng/ui-input-helm'; +import { injectErrorField } from 'ng-signal-forms'; @Component({ - selector: 'spartan-input-error', - standalone: true, - imports: [NgIf, NgFor, HlmInputErrorDirective], - hostDirectives: [HlmInputErrorDirective], - host: { - class: 'block mt-1 min-h-[20px] mb-4', - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - '[class.invisible]': "touchedState() === 'UNTOUCHED'", - }, - template: `

{{ message }}

`, + selector: 'spartan-input-error', + standalone: true, + imports: [NgIf, NgFor, HlmInputErrorDirective], + hostDirectives: [HlmInputErrorDirective], + host: { + class: 'block mt-1 min-h-[20px] mb-4', + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + '[class.invisible]': "touchedState() === 'UNTOUCHED'", + }, + template: ` +

{{ message }}

+ `, }) export class InputErrorComponent { - private _formField = injectErrorField(); - public touchedState = this._formField.touchedState; - public errors = this._formField.errors; + private _formField = injectErrorField(); + public touchedState = this._formField.touchedState; + public errors = this._formField.errors; - public errorMessages = computed(() => - Object.values(this.errors() ?? {}).map((error) => error.message ?? 'Field invalid') - ); + public errorMessages = computed(() => + Object.values(this.errors() ?? {}).map((error) => error.message ?? 'Field invalid'), + ); } diff --git a/apps/app/src/app/shared/input-error/input-error.directive.ts b/apps/app/src/app/shared/input-error/input-error.directive.ts index 0a3663ed8..636ea89c0 100644 --- a/apps/app/src/app/shared/input-error/input-error.directive.ts +++ b/apps/app/src/app/shared/input-error/input-error.directive.ts @@ -1,33 +1,33 @@ import { Directive, effect, inject, Injector, OnInit } from '@angular/core'; -import { SignalInputDirective, SignalInputErrorDirective } from 'ng-signal-forms'; import { HlmLabelDirective } from '@spartan-ng/ui-label-helm'; +import { SignalInputDirective, SignalInputErrorDirective } from 'ng-signal-forms'; @Directive({ - // eslint-disable-next-line @angular-eslint/directive-selector - selector: '[ngModel][formField]', - hostDirectives: [SignalInputErrorDirective], - standalone: true, + // eslint-disable-next-line @angular-eslint/directive-selector + selector: '[ngModel][formField]', + hostDirectives: [SignalInputErrorDirective], + standalone: true, }) export class SpartanInputErrorDirective implements OnInit { - private _injector = inject(Injector); - private _label = inject(HlmLabelDirective, { skipSelf: true, optional: true }); - private readonly _signalInput = inject(SignalInputDirective, { optional: true }); + private _injector = inject(Injector); + private _label = inject(HlmLabelDirective, { skipSelf: true, optional: true }); + private readonly _signalInput = inject(SignalInputDirective, { optional: true }); - ngOnInit() { - effect( - () => { - if ( - this._signalInput?.formField?.touchedState() === 'TOUCHED' && - Object.values(this._signalInput?.formField?.errors() ?? {}).length > 0 - ) { - if (this._label) this._label.error = true; - } else { - if (this._label) this._label.error = 'auto'; - } - }, - { - injector: this._injector, - } - ); - } + ngOnInit() { + effect( + () => { + if ( + this._signalInput?.formField?.touchedState() === 'TOUCHED' && + Object.values(this._signalInput?.formField?.errors() ?? {}).length > 0 + ) { + if (this._label) this._label.error = true; + } else { + if (this._label) this._label.error = 'auto'; + } + }, + { + injector: this._injector, + }, + ); + } } diff --git a/apps/app/src/app/shared/layout/coming-soon.component.ts b/apps/app/src/app/shared/layout/coming-soon.component.ts index a97b74957..eb86de3a2 100644 --- a/apps/app/src/app/shared/layout/coming-soon.component.ts +++ b/apps/app/src/app/shared/layout/coming-soon.component.ts @@ -2,11 +2,13 @@ import { Component } from '@angular/core'; import { hlmMuted } from '@spartan-ng/ui-typography-helm'; @Component({ - selector: 'spartan-coming-soon', - standalone: true, - host: { - class: 'justify-center relative flex-1 flex items-center mb-8', - }, - template: `

Coming soon...

`, + selector: 'spartan-coming-soon', + standalone: true, + host: { + class: 'justify-center relative flex-1 flex items-center mb-8', + }, + template: ` +

Coming soon...

+ `, }) export class ComingSoonComponent {} diff --git a/apps/app/src/app/shared/layout/container.directive.ts b/apps/app/src/app/shared/layout/container.directive.ts index f69f6236a..c7a385ead 100644 --- a/apps/app/src/app/shared/layout/container.directive.ts +++ b/apps/app/src/app/shared/layout/container.directive.ts @@ -1,11 +1,11 @@ import { Directive, HostBinding } from '@angular/core'; @Directive({ - selector: '[spartanContainer]', - standalone: true, + selector: '[spartanContainer]', + standalone: true, }) export class ContainerDirective { - @HostBinding('class') - public class = - 'w-full mx-auto px-1 flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]'; + @HostBinding('class') + public class = + 'w-full mx-auto px-1 flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]'; } diff --git a/apps/app/src/app/shared/layout/main-section.directive.ts b/apps/app/src/app/shared/layout/main-section.directive.ts index 5aa5442eb..365009369 100644 --- a/apps/app/src/app/shared/layout/main-section.directive.ts +++ b/apps/app/src/app/shared/layout/main-section.directive.ts @@ -1,10 +1,10 @@ import { Directive } from '@angular/core'; @Directive({ - selector: '[spartanMainSection]', - standalone: true, - host: { - class: 'flex flex-col p-1 sm:p-0 w-full min-h-[calc(100vh-3.5rem)]', - }, + selector: '[spartanMainSection]', + standalone: true, + host: { + class: 'flex flex-col p-1 sm:p-0 w-full min-h-[calc(100vh-3.5rem)]', + }, }) export class MainSectionDirective {} diff --git a/apps/app/src/app/shared/layout/page-bottom-nav-placeholder.component.ts b/apps/app/src/app/shared/layout/page-bottom-nav-placeholder.component.ts index f4f29a742..b15666975 100644 --- a/apps/app/src/app/shared/layout/page-bottom-nav-placeholder.component.ts +++ b/apps/app/src/app/shared/layout/page-bottom-nav-placeholder.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-page-bottom-nav-placeholder', - standalone: true, - template: '', + selector: 'spartan-page-bottom-nav-placeholder', + standalone: true, + template: '', }) export class PageBottomNavPlaceholderComponent {} diff --git a/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component.ts b/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component.ts index 7e3f12f9a..1a505abbb 100644 --- a/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component.ts +++ b/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component.ts @@ -1,37 +1,37 @@ +import { NgIf } from '@angular/common'; import { Component, inject, Input } from '@angular/core'; import { ActivatedRoute, RouterLink } from '@angular/router'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; import { provideIcons } from '@ng-icons/core'; import { radixChevronLeft, radixChevronRight } from '@ng-icons/radix-icons'; -import { NgIf } from '@angular/common'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; @Component({ - selector: 'spartan-page-bottom-nav-link', - standalone: true, - imports: [RouterLink, NgIf, HlmButtonDirective, HlmIconComponent], - providers: [provideIcons({ radixChevronRight, radixChevronLeft })], - template: ` - - - {{ label }} - - - `, + selector: 'spartan-page-bottom-nav-link', + standalone: true, + imports: [RouterLink, NgIf, HlmButtonDirective, HlmIconComponent], + providers: [provideIcons({ radixChevronRight, radixChevronLeft })], + template: ` + + + {{ label }} + + + `, }) export class PageBottomNavLinkComponent { - protected activatedRoute = inject(ActivatedRoute); - @Input() - direction: 'previous' | 'next' = 'next'; - @Input() - href = ''; - @Input() - label = ''; + protected activatedRoute = inject(ActivatedRoute); + @Input() + direction: 'previous' | 'next' = 'next'; + @Input() + href = ''; + @Input() + label = ''; - protected isAbsolute() { - return this.href.startsWith('/'); - } - protected get routerLink() { - return this.isAbsolute() ? this.href : ['..', this.href]; - } + protected isAbsolute() { + return this.href.startsWith('/'); + } + protected get routerLink() { + return this.isAbsolute() ? this.href : ['..', this.href]; + } } diff --git a/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav.component.ts b/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav.component.ts index 3889b6e9c..e885d4041 100644 --- a/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav.component.ts +++ b/apps/app/src/app/shared/layout/page-bottom-nav/page-bottom-nav.component.ts @@ -1,11 +1,13 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-page-bottom-nav', - standalone: true, - host: { - class: 'mt-12 flex flex-row-reverse items-center justify-between', - }, - template: ``, + selector: 'spartan-page-bottom-nav', + standalone: true, + host: { + class: 'mt-12 flex flex-row-reverse items-center justify-between', + }, + template: ` + + `, }) export class PageBottomNavComponent {} diff --git a/apps/app/src/app/shared/layout/page-nav/page-nav-link.component.ts b/apps/app/src/app/shared/layout/page-nav/page-nav-link.component.ts index 93cb9a9a3..d02423bc0 100644 --- a/apps/app/src/app/shared/layout/page-nav/page-nav-link.component.ts +++ b/apps/app/src/app/shared/layout/page-nav/page-nav-link.component.ts @@ -2,27 +2,28 @@ import { Component, inject, Input } from '@angular/core'; import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router'; @Component({ - selector: 'spartan-page-nav-link', - standalone: true, - imports: [RouterLink, RouterLinkActive], - host: { - class: 'mt-0 pt-2', - role: 'listitem', - }, - template: ` - {{ label }} - `, + selector: 'spartan-page-nav-link', + standalone: true, + imports: [RouterLink, RouterLinkActive], + host: { + class: 'mt-0 pt-2', + role: 'listitem', + }, + template: ` + + {{ label }} + + `, }) export class PageNavLinkComponent { - protected activatedRoute = inject(ActivatedRoute); - @Input() - fragment = ''; - @Input() - label = ''; + protected activatedRoute = inject(ActivatedRoute); + @Input() + fragment = ''; + @Input() + label = ''; } diff --git a/apps/app/src/app/shared/layout/page-nav/page-nav-outlet.component.ts b/apps/app/src/app/shared/layout/page-nav/page-nav-outlet.component.ts index bc6cbb615..0497dbeb3 100644 --- a/apps/app/src/app/shared/layout/page-nav/page-nav-outlet.component.ts +++ b/apps/app/src/app/shared/layout/page-nav/page-nav-outlet.component.ts @@ -1,17 +1,19 @@ -import { Component, signal, TemplateRef } from '@angular/core'; import { NgTemplateOutlet } from '@angular/common'; +import { Component, signal, TemplateRef } from '@angular/core'; export const pageNavTmpl = signal | null>(null); @Component({ - selector: 'spartan-page-nav-outlet', - standalone: true, - host: { - class: 'hidden xl:block text-sm sticky top-14 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6', - }, - template: ` `, - imports: [NgTemplateOutlet], + selector: 'spartan-page-nav-outlet', + standalone: true, + host: { + class: 'hidden xl:block text-sm sticky top-14 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6', + }, + template: ` + + `, + imports: [NgTemplateOutlet], }) export class PageNavOutletComponent { - public pageNavTmpl = pageNavTmpl.asReadonly(); + public pageNavTmpl = pageNavTmpl.asReadonly(); } diff --git a/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts b/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts index 1393526f5..4810a9309 100644 --- a/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts +++ b/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts @@ -3,34 +3,34 @@ import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; import { pageNavTmpl } from '~/app/shared/layout/page-nav/page-nav-outlet.component'; @Component({ - selector: 'spartan-page-nav', - standalone: true, - imports: [HlmScrollAreaComponent], - host: { - class: 'hidden xl:block text-sm', - }, - template: ` - - -
-

On this page

-
    - -
-
- - - `, + selector: 'spartan-page-nav', + standalone: true, + imports: [HlmScrollAreaComponent], + host: { + class: 'hidden xl:block text-sm', + }, + template: ` + + +
+

On this page

+
    + +
+
+ + + `, }) export class PageNavComponent implements AfterViewInit, OnDestroy { - @ViewChild('pageNav', { static: true }) - pageNavTpl?: TemplateRef; + @ViewChild('pageNav', { static: true }) + pageNavTpl?: TemplateRef; - ngAfterViewInit() { - if (!this.pageNavTpl) return; - pageNavTmpl.set(this.pageNavTpl); - } - ngOnDestroy() { - pageNavTmpl.set(null); - } + ngAfterViewInit() { + if (!this.pageNavTpl) return; + pageNavTmpl.set(this.pageNavTpl); + } + ngOnDestroy() { + pageNavTmpl.set(null); + } } diff --git a/apps/app/src/app/shared/layout/page.component.ts b/apps/app/src/app/shared/layout/page.component.ts index 5e78b5c7b..b60a0a5bc 100644 --- a/apps/app/src/app/shared/layout/page.component.ts +++ b/apps/app/src/app/shared/layout/page.component.ts @@ -1,23 +1,25 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { ContainerDirective } from '~/app/shared/layout/container.directive'; -import { SideNavComponent } from '~/app/shared/layout/side-nav/side-nav.component'; import { BreadcrumbsComponent } from '~/app/shared/breadcrumbs/breadcrumbs.component'; +import { ContainerDirective } from '~/app/shared/layout/container.directive'; import { MainSectionDirective } from '~/app/shared/layout/main-section.directive'; import { PageNavOutletComponent } from '~/app/shared/layout/page-nav/page-nav-outlet.component'; +import { SideNavComponent } from '~/app/shared/layout/side-nav/side-nav.component'; @Component({ - selector: 'spartan-page', - standalone: true, - imports: [RouterOutlet, SideNavComponent, BreadcrumbsComponent, MainSectionDirective, PageNavOutletComponent], - hostDirectives: [ContainerDirective], - template: ` -
-
- - -
- -
`, + selector: 'spartan-page', + standalone: true, + imports: [RouterOutlet, SideNavComponent, BreadcrumbsComponent, MainSectionDirective, PageNavOutletComponent], + hostDirectives: [ContainerDirective], + template: ` + +
+
+ + +
+ +
+ `, }) export class PageComponent {} diff --git a/apps/app/src/app/shared/layout/section-intro.component.ts b/apps/app/src/app/shared/layout/section-intro.component.ts index 2beb51eb5..d5d855b5e 100644 --- a/apps/app/src/app/shared/layout/section-intro.component.ts +++ b/apps/app/src/app/shared/layout/section-intro.component.ts @@ -2,19 +2,19 @@ import { Component, Input } from '@angular/core'; import { hlmLead } from '@spartan-ng/ui-typography-helm'; @Component({ - selector: 'spartan-section-intro', - standalone: true, - host: { - class: 'mb-8 block space-y-2', - }, - template: ` -

{{ name }}

-

{{ lead }}

- `, + selector: 'spartan-section-intro', + standalone: true, + host: { + class: 'mb-8 block space-y-2', + }, + template: ` +

{{ name }}

+

{{ lead }}

+ `, }) export class SectionIntroComponent { - @Input() - name = ''; - @Input() - lead = ''; + @Input() + name = ''; + @Input() + lead = ''; } diff --git a/apps/app/src/app/shared/layout/section-sub-heading.component.ts b/apps/app/src/app/shared/layout/section-sub-heading.component.ts index a2575fe29..63c45033c 100644 --- a/apps/app/src/app/shared/layout/section-sub-heading.component.ts +++ b/apps/app/src/app/shared/layout/section-sub-heading.component.ts @@ -1,22 +1,22 @@ import { booleanAttribute, Component, Input } from '@angular/core'; @Component({ - selector: 'spartan-section-sub-heading', - standalone: true, - host: { - class: 'block pb-2', - '[class.-mt-12]': '_first', - }, - template: ` -

- -

- `, + selector: 'spartan-section-sub-heading', + standalone: true, + host: { + class: 'block pb-2', + '[class.-mt-12]': '_first', + }, + template: ` +

+ +

+ `, }) export class SectionSubHeadingComponent { - protected _first = false; - @Input({ transform: booleanAttribute }) - set first(value: boolean) { - this._first = value; - } + protected _first = false; + @Input({ transform: booleanAttribute }) + set first(value: boolean) { + this._first = value; + } } diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav-coming-soon.component.ts b/apps/app/src/app/shared/layout/side-nav/side-nav-coming-soon.component.ts index 4fa6098ea..488dc5bff 100644 --- a/apps/app/src/app/shared/layout/side-nav/side-nav-coming-soon.component.ts +++ b/apps/app/src/app/shared/layout/side-nav/side-nav-coming-soon.component.ts @@ -2,14 +2,14 @@ import { Component } from '@angular/core'; import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm'; @Component({ - selector: 'spartan-side-nav-cs', - standalone: true, - imports: [HlmBadgeDirective], - host: { - class: 'inline-block', - }, - template: `soon`, + selector: 'spartan-side-nav-cs', + standalone: true, + imports: [HlmBadgeDirective], + host: { + class: 'inline-block', + }, + template: ` + soon + `, }) export class SideNavComponent {} diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav-content.component.ts b/apps/app/src/app/shared/layout/side-nav/side-nav-content.component.ts index f97d20fc4..0009e265c 100644 --- a/apps/app/src/app/shared/layout/side-nav/side-nav-content.component.ts +++ b/apps/app/src/app/shared/layout/side-nav/side-nav-content.component.ts @@ -1,100 +1,135 @@ import { Component, EventEmitter, Output } from '@angular/core'; import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; +import { SideNavComponent } from './side-nav-coming-soon.component'; +import { SideNavHeadingDirective } from './side-nav-heading.directive'; import { SideNavLinkDirective } from './side-nav-link.directive'; import { SideNavLinksComponent } from './side-nav-links.directive'; -import { SideNavHeadingDirective } from './side-nav-heading.directive'; -import { SideNavComponent } from './side-nav-coming-soon.component'; @Component({ - selector: 'spartan-side-nav-content', - standalone: true, - imports: [ - HlmScrollAreaComponent, - SideNavLinkDirective, - SideNavLinksComponent, - SideNavHeadingDirective, - SideNavComponent, - ], - host: { - class: 'block px-1', - }, - template: `
-

Getting Started

- - Introduction - CLI - Changelog - About & Credits - -
+ selector: 'spartan-side-nav-content', + standalone: true, + imports: [ + HlmScrollAreaComponent, + SideNavLinkDirective, + SideNavLinksComponent, + SideNavHeadingDirective, + SideNavComponent, + ], + host: { + class: 'block px-1', + }, + template: ` +
+

Getting Started

+ + Introduction + CLI + Changelog + About & Credits + +
-
-

Stack

- - Overview - Technologies - Installation - -
+
+

Stack

+ + Overview + Technologies + Installation + +
-
-

UI

- - Installation - Theming - Dark mode - Typography - Figma - -
+
+

UI

+ + Installation + Theming + Dark mode + Typography + Figma + +
-
-

Components

- - Accordion - Alert - Alert Dialog - Aspect Ratio - Avatar - Badge - Button - Calendar - Card - Checkbox - Collapsible - Combobox - Command - Context Menu - Data Table - Date Picker - Dialog - Dropdown Menu - Form - Hover Card - Input - Label - Menubar - Navigation Menu - Popover - Progress - Radio Group - Scroll Area - Select - Separator - Sheet - Skeleton - Slider - Switch - Table - Tabs - Textarea - Toast - Toggle - Tooltip - -
`, +
+

Components

+ + Accordion + Alert + Alert Dialog + Aspect Ratio + Avatar + Badge + Button + + Calendar + + + Card + + Checkbox + + + Collapsible + Combobox + Command + Context Menu + + Data Table + + + + Date Picker + + + Dialog + Dropdown Menu + + Form + + + Hover Card + Input + Label + Menubar + + Navigation Menu + + + Popover + Progress + Radio Group + Scroll Area + + Select + + + Separator + Sheet + Skeleton + + Slider + + + Switch + + Table + + + Tabs + Textarea + + Toast + + + Toggle + + Tooltip + + + +
+ `, }) export class SideNavContentComponent { - @Output() - linkClicked = new EventEmitter(); + @Output() + linkClicked = new EventEmitter(); } diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav-heading.directive.ts b/apps/app/src/app/shared/layout/side-nav/side-nav-heading.directive.ts index b0a287077..80e39d317 100644 --- a/apps/app/src/app/shared/layout/side-nav/side-nav-heading.directive.ts +++ b/apps/app/src/app/shared/layout/side-nav/side-nav-heading.directive.ts @@ -1,10 +1,10 @@ import { Directive, HostBinding } from '@angular/core'; @Directive({ - selector: '[spartanSideNavHeading]', - standalone: true, + selector: '[spartanSideNavHeading]', + standalone: true, }) export class SideNavHeadingDirective { - @HostBinding('class') - public class = 'flex items-center justify-between mb-1 rounded-md px-2 py-1 font-semibold'; + @HostBinding('class') + public class = 'flex items-center justify-between mb-1 rounded-md px-2 py-1 font-semibold'; } diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav-link.directive.ts b/apps/app/src/app/shared/layout/side-nav/side-nav-link.directive.ts index cc983df09..29a216486 100644 --- a/apps/app/src/app/shared/layout/side-nav/side-nav-link.directive.ts +++ b/apps/app/src/app/shared/layout/side-nav/side-nav-link.directive.ts @@ -2,33 +2,33 @@ import { booleanAttribute, Directive, inject, Input } from '@angular/core'; import { RouterLink, RouterLinkActive } from '@angular/router'; @Directive({ - selector: '[spartanSideNavLink]', - standalone: true, - hostDirectives: [ - { - directive: RouterLink, - inputs: ['routerLink: spartanSideNavLink'], - }, - RouterLinkActive, - ], - host: { - '[tabindex]': '_disabled ? "-1" : "0"', - '[class.!text-zinc-300]': '_disabled', - '[class.dark:!text-zinc-700]': '_disabled', - '[class.pointer-events-none]': '_disabled', - class: - 'group relative flex w-full justify-between items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', - }, + selector: '[spartanSideNavLink]', + standalone: true, + hostDirectives: [ + { + directive: RouterLink, + inputs: ['routerLink: spartanSideNavLink'], + }, + RouterLinkActive, + ], + host: { + '[tabindex]': '_disabled ? "-1" : "0"', + '[class.!text-zinc-300]': '_disabled', + '[class.dark:!text-zinc-700]': '_disabled', + '[class.pointer-events-none]': '_disabled', + class: + 'group relative flex w-full justify-between items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', + }, }) export class SideNavLinkDirective { - private _rlActive = inject(RouterLinkActive); - protected _disabled = false; - @Input({ transform: booleanAttribute }) - set disabled(value: boolean) { - this._disabled = value; - } + private _rlActive = inject(RouterLinkActive); + protected _disabled = false; + @Input({ transform: booleanAttribute }) + set disabled(value: boolean) { + this._disabled = value; + } - constructor() { - this._rlActive.routerLinkActive = 'font-medium !text-foreground'; - } + constructor() { + this._rlActive.routerLinkActive = 'font-medium !text-foreground'; + } } diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav-links.directive.ts b/apps/app/src/app/shared/layout/side-nav/side-nav-links.directive.ts index d1f9954e0..0a7439ca5 100644 --- a/apps/app/src/app/shared/layout/side-nav/side-nav-links.directive.ts +++ b/apps/app/src/app/shared/layout/side-nav/side-nav-links.directive.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-side-nav-links', - standalone: true, - host: { - tabindex: '-1', - class: 'grid grid-flow-row auto-rows-max', - }, - template: '', + selector: 'spartan-side-nav-links', + standalone: true, + host: { + tabindex: '-1', + class: 'grid grid-flow-row auto-rows-max', + }, + template: '', }) export class SideNavLinksComponent {} diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav.component.ts b/apps/app/src/app/shared/layout/side-nav/side-nav.component.ts index fd7284549..bc9ba9e67 100644 --- a/apps/app/src/app/shared/layout/side-nav/side-nav.component.ts +++ b/apps/app/src/app/shared/layout/side-nav/side-nav.component.ts @@ -3,14 +3,16 @@ import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm'; import { SideNavContentComponent } from './side-nav-content.component'; @Component({ - selector: 'spartan-side-nav', - standalone: true, - imports: [HlmScrollAreaComponent, SideNavContentComponent], - host: { - class: 'fixed text-sm top-12 px-2 pt-6 pb-12 flex z-30 -ml-2 hidden w-full shrink-0 md:sticky md:block', - }, - template: ` - - `, + selector: 'spartan-side-nav', + standalone: true, + imports: [HlmScrollAreaComponent, SideNavContentComponent], + host: { + class: 'fixed text-sm top-12 px-2 pt-6 pb-12 flex z-30 -ml-2 hidden w-full shrink-0 md:sticky md:block', + }, + template: ` + + + + `, }) export class SideNavComponent {} diff --git a/apps/app/src/app/shared/layout/tabs.component.ts b/apps/app/src/app/shared/layout/tabs.component.ts index 25674c418..b14892901 100644 --- a/apps/app/src/app/shared/layout/tabs.component.ts +++ b/apps/app/src/app/shared/layout/tabs.component.ts @@ -1,43 +1,43 @@ import { Component, Input } from '@angular/core'; import { - BrnTabsComponent, - BrnTabsContentDirective, - BrnTabsListComponent, - BrnTabsTriggerDirective, + BrnTabsComponent, + BrnTabsContentDirective, + BrnTabsListComponent, + BrnTabsTriggerDirective, } from '@spartan-ng/ui-tabs-brain'; const tabBtn = - 'inline-flex items-center justify-center whitespace-nowrap py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none'; + 'inline-flex items-center justify-center whitespace-nowrap py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none'; const tabContent = - 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border border-border'; + 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border border-border'; @Component({ - selector: 'spartan-tabs', - standalone: true, - imports: [BrnTabsComponent, BrnTabsListComponent, BrnTabsTriggerDirective, BrnTabsContentDirective], - host: { - class: 'block', - }, - template: ` - - - - - -
- -
-
- -
- - `, + selector: 'spartan-tabs', + standalone: true, + imports: [BrnTabsComponent, BrnTabsListComponent, BrnTabsTriggerDirective, BrnTabsContentDirective], + host: { + class: 'block', + }, + template: ` + + + + + +
+ +
+
+ +
+ + `, }) export class TabsComponent { - @Input() - firstTab = ''; - @Input() - secondTab = ''; + @Input() + firstTab = ''; + @Input() + secondTab = ''; } diff --git a/apps/app/src/app/shared/meta/meta.util.ts b/apps/app/src/app/shared/meta/meta.util.ts index f3b0a552d..78cf6c536 100644 --- a/apps/app/src/app/shared/meta/meta.util.ts +++ b/apps/app/src/app/shared/meta/meta.util.ts @@ -1,51 +1,51 @@ export const metaWith = (title: string, description: string) => [ - { - name: 'description', - content: description, - }, - { - name: 'author', - content: 'Robin Goetz', - }, - { - property: 'og:title', - content: title, - }, - { - property: 'og:site_name', - content: 'SPARTAN', - }, - { - property: 'og:type', - content: 'website', - }, - { - property: 'og:url', - content: 'https://spartan-goetzrobin.vercel.app/', - }, - { - property: 'og:description', - content: description, - }, - { - property: 'og:image', - content: 'https://spartan-goetzrobin.vercel.app/assets/og-image.png', - }, + { + name: 'description', + content: description, + }, + { + name: 'author', + content: 'Robin Goetz', + }, + { + property: 'og:title', + content: title, + }, + { + property: 'og:site_name', + content: 'SPARTAN', + }, + { + property: 'og:type', + content: 'website', + }, + { + property: 'og:url', + content: 'https://spartan-goetzrobin.vercel.app/', + }, + { + property: 'og:description', + content: description, + }, + { + property: 'og:image', + content: 'https://spartan-goetzrobin.vercel.app/assets/og-image.png', + }, - { - property: 'twitter:card', - content: 'summary_large_image', - }, - { - property: 'twitter:title', - content: title, - }, - { - property: 'twitter:description', - content: description, - }, - { - property: 'twitter:image', - content: 'https://spartan-goetzrobin.vercel.app/assets/og-image.png', - }, + { + property: 'twitter:card', + content: 'summary_large_image', + }, + { + property: 'twitter:title', + content: title, + }, + { + property: 'twitter:description', + content: description, + }, + { + property: 'twitter:image', + content: 'https://spartan-goetzrobin.vercel.app/assets/og-image.png', + }, ]; diff --git a/apps/app/src/app/shared/spartan-logo.component.ts b/apps/app/src/app/shared/spartan-logo.component.ts index 69c1f5f03..4872611ca 100644 --- a/apps/app/src/app/shared/spartan-logo.component.ts +++ b/apps/app/src/app/shared/spartan-logo.component.ts @@ -1,32 +1,32 @@ import { Component } from '@angular/core'; @Component({ - selector: 'spartan-logo', - standalone: true, - host: { - class: 'flex items-center justify-center', - }, - template: ` - - - - - - - - `, + selector: 'spartan-logo', + standalone: true, + host: { + class: 'flex items-center justify-center', + }, + template: ` + + + + + + + + `, }) export class SpartanLogoComponent {} diff --git a/apps/app/src/app/shared/spartan-nav-link.directive.ts b/apps/app/src/app/shared/spartan-nav-link.directive.ts index d7ffea254..57c998fda 100644 --- a/apps/app/src/app/shared/spartan-nav-link.directive.ts +++ b/apps/app/src/app/shared/spartan-nav-link.directive.ts @@ -1,27 +1,27 @@ import { Directive, inject } from '@angular/core'; -import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; import { RouterLink, RouterLinkActive } from '@angular/router'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Directive({ - selector: '[spartanNavLink]', - standalone: true, - hostDirectives: [ - HlmButtonDirective, - { - directive: RouterLink, - inputs: ['routerLink: spartanNavLink'], - }, - RouterLinkActive, - ], + selector: '[spartanNavLink]', + standalone: true, + hostDirectives: [ + HlmButtonDirective, + { + directive: RouterLink, + inputs: ['routerLink: spartanNavLink'], + }, + RouterLinkActive, + ], }) export class NavLinkDirective { - private _hlmBtn = inject(HlmButtonDirective); - private _rlActive = inject(RouterLinkActive); + private _hlmBtn = inject(HlmButtonDirective); + private _rlActive = inject(RouterLinkActive); - constructor() { - this._hlmBtn.variant = 'link'; - this._hlmBtn.size = 'sm'; - this._hlmBtn.class = 'opacity-70 font-medium'; - this._rlActive.routerLinkActive = '!opacity-100'; - } + constructor() { + this._hlmBtn.variant = 'link'; + this._hlmBtn.size = 'sm'; + this._hlmBtn.class = 'opacity-70 font-medium'; + this._rlActive.routerLinkActive = '!opacity-100'; + } } diff --git a/apps/app/src/app/shared/theme.service.ts b/apps/app/src/app/shared/theme.service.ts index e960dbc03..b2f8d7f1d 100644 --- a/apps/app/src/app/shared/theme.service.ts +++ b/apps/app/src/app/shared/theme.service.ts @@ -1,8 +1,8 @@ -import { inject, Injectable, PLATFORM_ID, RendererFactory2, signal } from '@angular/core'; +import { MediaMatcher } from '@angular/cdk/layout'; import { DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { combineLatest, ReplaySubject } from 'rxjs'; +import { Injectable, PLATFORM_ID, RendererFactory2, inject, signal } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { MediaMatcher } from '@angular/cdk/layout'; +import { ReplaySubject, combineLatest } from 'rxjs'; const DarkModes = ['light', 'dark', 'system'] as const; export type DarkMode = (typeof DarkModes)[number]; @@ -11,63 +11,63 @@ export const AppThemes = ['default', 'gray', 'red', 'green'] as const; export type Theme = (typeof AppThemes)[number]; @Injectable({ - providedIn: 'root', + providedIn: 'root', }) export class ThemeService { - private _platformId = inject(PLATFORM_ID); - private _renderer = inject(RendererFactory2).createRenderer(null, null); - private _document = inject(DOCUMENT); - private _query = inject(MediaMatcher).matchMedia('(prefers-color-scheme: dark)'); - private _darkMode$ = new ReplaySubject<'light' | 'dark' | 'system'>(1); - private _systemDarkMode$ = new ReplaySubject<'light' | 'dark' | 'system'>(1); - public darkMode$ = this._darkMode$.asObservable(); + private _platformId = inject(PLATFORM_ID); + private _renderer = inject(RendererFactory2).createRenderer(null, null); + private _document = inject(DOCUMENT); + private _query = inject(MediaMatcher).matchMedia('(prefers-color-scheme: dark)'); + private _darkMode$ = new ReplaySubject<'light' | 'dark' | 'system'>(1); + private _systemDarkMode$ = new ReplaySubject<'light' | 'dark' | 'system'>(1); + public darkMode$ = this._darkMode$.asObservable(); - private _theme = signal(undefined); - public theme = this._theme.asReadonly(); + private _theme = signal(undefined); + public theme = this._theme.asReadonly(); - constructor() { - this._systemDarkMode$.next(this._query.matches ? 'dark' : 'light'); - this._query.onchange = (e: MediaQueryListEvent) => this._systemDarkMode$.next(e.matches ? 'dark' : 'light'); - this.syncInitialStateFromLocalStorage(); - this.toggleClassOnDarkModeChanges(); - } + constructor() { + this._systemDarkMode$.next(this._query.matches ? 'dark' : 'light'); + this._query.onchange = (e: MediaQueryListEvent) => this._systemDarkMode$.next(e.matches ? 'dark' : 'light'); + this.syncInitialStateFromLocalStorage(); + this.toggleClassOnDarkModeChanges(); + } - private syncInitialStateFromLocalStorage(): void { - if (isPlatformBrowser(this._platformId)) { - this._darkMode$.next((localStorage.getItem('darkMode') as DarkMode) ?? 'system'); - this.setTheme((localStorage.getItem('theme') as Theme) ?? 'default'); - } - } - private toggleClassOnDarkModeChanges(): void { - combineLatest([this.darkMode$, this._systemDarkMode$]) - .pipe(takeUntilDestroyed()) - .subscribe(([darkMode, systemDarkMode]) => { - if (darkMode === 'dark' || (darkMode === 'system' && systemDarkMode === 'dark')) { - this._renderer.addClass(this._document.documentElement, 'dark'); - } else { - if (this._document.documentElement.className.includes('dark')) { - this._renderer.removeClass(this._document.documentElement, 'dark'); - } - } - }); - } - public setDarkMode(newMode: DarkMode): void { - localStorage.setItem('darkMode', newMode); - this._darkMode$.next(newMode); - } + private syncInitialStateFromLocalStorage(): void { + if (isPlatformBrowser(this._platformId)) { + this._darkMode$.next((localStorage.getItem('darkMode') as DarkMode) ?? 'system'); + this.setTheme((localStorage.getItem('theme') as Theme) ?? 'default'); + } + } + private toggleClassOnDarkModeChanges(): void { + combineLatest([this.darkMode$, this._systemDarkMode$]) + .pipe(takeUntilDestroyed()) + .subscribe(([darkMode, systemDarkMode]) => { + if (darkMode === 'dark' || (darkMode === 'system' && systemDarkMode === 'dark')) { + this._renderer.addClass(this._document.documentElement, 'dark'); + } else { + if (this._document.documentElement.className.includes('dark')) { + this._renderer.removeClass(this._document.documentElement, 'dark'); + } + } + }); + } + public setDarkMode(newMode: DarkMode): void { + localStorage.setItem('darkMode', newMode); + this._darkMode$.next(newMode); + } - public setTheme(newTheme: Theme): void { - console.log(newTheme, this._theme()); - const oldTheme = this._theme(); - this._renderer.removeClass(this._document.body, `theme-${oldTheme}`); - this._theme.set(newTheme); + public setTheme(newTheme: Theme): void { + console.log(newTheme, this._theme()); + const oldTheme = this._theme(); + this._renderer.removeClass(this._document.body, `theme-${oldTheme}`); + this._theme.set(newTheme); - if (newTheme === 'default') { - localStorage.removeItem('theme'); - return; - } + if (newTheme === 'default') { + localStorage.removeItem('theme'); + return; + } - this._renderer.addClass(this._document.body, `theme-${newTheme}`); - localStorage.setItem('theme', newTheme); - } + this._renderer.addClass(this._document.body, `theme-${newTheme}`); + localStorage.setItem('theme', newTheme); + } } diff --git a/apps/app/src/db.ts b/apps/app/src/db.ts index 0547aa5b7..fc9fd904c 100644 --- a/apps/app/src/db.ts +++ b/apps/app/src/db.ts @@ -1,13 +1,13 @@ -import { drizzle } from 'drizzle-orm/postgres-js'; -import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core'; import { InferInsertModel, InferSelectModel } from 'drizzle-orm'; +import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core'; +import { drizzle } from 'drizzle-orm/postgres-js'; import postgres from 'postgres'; export const notes = pgTable('note', { - id: serial('id').primaryKey(), - title: text('title').notNull(), - content: text('content'), - createdAt: timestamp('created_at').defaultNow().notNull(), + id: serial('id').primaryKey(), + title: text('title').notNull(), + content: text('content'), + createdAt: timestamp('created_at').defaultNow().notNull(), }); export type Note = InferSelectModel; diff --git a/apps/app/src/main.server.ts b/apps/app/src/main.server.ts index b285944d8..560d365a0 100644 --- a/apps/app/src/main.server.ts +++ b/apps/app/src/main.server.ts @@ -1,20 +1,20 @@ -import 'zone.js/node'; import '@angular/platform-server/init'; +import 'zone.js/node'; import { enableProdMode } from '@angular/core'; -import { renderApplication } from '@angular/platform-server'; -import { AppComponent } from './app/app.component'; import { bootstrapApplication } from '@angular/platform-browser'; +import { renderApplication } from '@angular/platform-server'; import { config } from './app.config.server'; +import { AppComponent } from './app/app.component'; if (import.meta.env.PROD) { - enableProdMode(); + enableProdMode(); } const bootstrap = () => bootstrapApplication(AppComponent, config); export default async function render(url: string, document: string) { - const html = await renderApplication(bootstrap, { - document, - url, - }); - return html; + const html = await renderApplication(bootstrap, { + document, + url, + }); + return html; } diff --git a/apps/app/src/main.ts b/apps/app/src/main.ts index 5781a4992..dde9fa271 100644 --- a/apps/app/src/main.ts +++ b/apps/app/src/main.ts @@ -1,7 +1,7 @@ -import 'zone.js'; import { bootstrapApplication } from '@angular/platform-browser'; +import 'zone.js'; -import { AppComponent } from './app/app.component'; import { appConfig } from './app.config'; +import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/apps/app/src/server/routes/trpc/[trpc].ts b/apps/app/src/server/routes/trpc/[trpc].ts index 1dbb2168c..3294563f2 100644 --- a/apps/app/src/server/routes/trpc/[trpc].ts +++ b/apps/app/src/server/routes/trpc/[trpc].ts @@ -1,8 +1,8 @@ -import { appRouter } from '../../trpc/routers'; -import { createContext } from '../../trpc/context'; import { createTrpcNitroHandler } from '@analogjs/trpc'; +import { createContext } from '../../trpc/context'; +import { appRouter } from '../../trpc/routers'; // export API handler export default createTrpcNitroHandler({ - router: appRouter, - createContext, + router: appRouter, + createContext, }); diff --git a/apps/app/src/server/trpc/routers/index.ts b/apps/app/src/server/trpc/routers/index.ts index 49c415a63..2020a389c 100644 --- a/apps/app/src/server/trpc/routers/index.ts +++ b/apps/app/src/server/trpc/routers/index.ts @@ -2,7 +2,7 @@ import { router } from '../trpc'; import { noteRouter } from './notes'; export const appRouter = router({ - note: noteRouter, + note: noteRouter, }); // export type definition of API export type AppRouter = typeof appRouter; diff --git a/apps/app/src/server/trpc/routers/notes.ts b/apps/app/src/server/trpc/routers/notes.ts index 7969ea026..d383650e8 100644 --- a/apps/app/src/server/trpc/routers/notes.ts +++ b/apps/app/src/server/trpc/routers/notes.ts @@ -1,28 +1,28 @@ +import { eq } from 'drizzle-orm'; import { z } from 'zod'; -import { publicProcedure, router } from '../trpc'; import { db, notes } from '../../../db'; -import { eq } from 'drizzle-orm'; +import { publicProcedure, router } from '../trpc'; export const noteRouter = router({ - create: publicProcedure - .input( - z.object({ - title: z.string(), - content: z.string(), - }) - ) - .mutation( - async ({ input }) => await db.insert(notes).values({ content: input.content, title: input.title }).returning() - ), - list: publicProcedure.query(async () => { - const selectedNotes = await db.select().from(notes); - return selectedNotes.map((note) => ({ ...note, id: +note.id })); - }), - remove: publicProcedure - .input( - z.object({ - id: z.number(), - }) - ) - .mutation(async ({ input }) => await db.delete(notes).where(eq(notes.id, input.id)).returning()), + create: publicProcedure + .input( + z.object({ + title: z.string(), + content: z.string(), + }), + ) + .mutation( + async ({ input }) => await db.insert(notes).values({ content: input.content, title: input.title }).returning(), + ), + list: publicProcedure.query(async () => { + const selectedNotes = await db.select().from(notes); + return selectedNotes.map((note) => ({ ...note, id: +note.id })); + }), + remove: publicProcedure + .input( + z.object({ + id: z.number(), + }), + ) + .mutation(async ({ input }) => await db.delete(notes).where(eq(notes.id, input.id)).returning()), }); diff --git a/apps/app/src/server/trpc/trpc.ts b/apps/app/src/server/trpc/trpc.ts index 9812db699..c779236b9 100644 --- a/apps/app/src/server/trpc/trpc.ts +++ b/apps/app/src/server/trpc/trpc.ts @@ -1,9 +1,9 @@ import { initTRPC } from '@trpc/server'; -import { Context } from './context'; import superjson from 'superjson'; +import { Context } from './context'; const t = initTRPC.context().create({ - transformer: superjson, + transformer: superjson, }); /** * Unprotected procedure diff --git a/apps/app/src/styles.css b/apps/app/src/styles.css index b8ff4bef0..0e6e34451 100644 --- a/apps/app/src/styles.css +++ b/apps/app/src/styles.css @@ -5,194 +5,194 @@ @tailwind utilities; :root { - --font-sans: ''; + --font-sans: ''; } select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - -webkit-print-color-adjust: exact; - appearance: none; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + -webkit-print-color-adjust: exact; + appearance: none; } :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5.9% 10%; - --radius: 0.5rem; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; + --radius: 0.5rem; } .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; } :root .theme-gray { - --background: 0 0% 100%; - --foreground: 224 71.4% 4.1%; - --muted: 220 14.3% 95.9%; - --muted-foreground: 220 8.9% 46.1%; - --popover: 0 0% 100%; - --popover-foreground: 224 71.4% 4.1%; - --card: 0 0% 100%; - --card-foreground: 224 71.4% 4.1%; - --border: 220 13% 91%; - --input: 220 13% 91%; - --primary: 220.9 39.3% 11%; - --primary-foreground: 210 20% 98%; - --secondary: 220 14.3% 95.9%; - --secondary-foreground: 220.9 39.3% 11%; - --accent: 220 14.3% 95.9%; - --accent-foreground: 220.9 39.3% 11%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 20% 98%; - --ring: 224 71.4% 4.1%; - --radius: 0.5rem; + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + --border: 220 13% 91%; + --input: 220 13% 91%; + --primary: 220.9 39.3% 11%; + --primary-foreground: 210 20% 98%; + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 20% 98%; + --ring: 224 71.4% 4.1%; + --radius: 0.5rem; } .dark .theme-gray { - --background: 224 71.4% 4.1%; - --foreground: 210 20% 98%; - --muted: 215 27.9% 16.9%; - --muted-foreground: 217.9 10.6% 64.9%; - --popover: 224 71.4% 4.1%; - --popover-foreground: 210 20% 98%; - --card: 224 71.4% 4.1%; - --card-foreground: 210 20% 98%; - --border: 215 27.9% 16.9%; - --input: 215 27.9% 16.9%; - --primary: 210 20% 98%; - --primary-foreground: 220.9 39.3% 11%; - --secondary: 215 27.9% 16.9%; - --secondary-foreground: 210 20% 98%; - --accent: 215 27.9% 16.9%; - --accent-foreground: 210 20% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 20% 98%; - --ring: 216 12.2% 83.9%; + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + --primary: 210 20% 98%; + --primary-foreground: 220.9 39.3% 11%; + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + --ring: 216 12.2% 83.9%; } :root .theme-red { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --primary: 0 72.2% 50.6%; - --primary-foreground: 0 85.7% 97.3%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --ring: 0 72.2% 50.6%; - --radius: 0.5rem; + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --ring: 0 72.2% 50.6%; + --radius: 0.5rem; } .dark .theme-red { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --primary: 0 72.2% 50.6%; - --primary-foreground: 0 85.7% 97.3%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --ring: 0 72.2% 50.6%; + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --ring: 0 72.2% 50.6%; } :root .theme-green { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 142.1 76.2% 36.3%; - --primary-foreground: 355.7 100% 97.3%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 142.1 76.2% 36.3%; - --radius: 0.5rem; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 142.1 76.2% 36.3%; + --radius: 0.5rem; } .dark .theme-green { - --background: 20 14.3% 4.1%; - --foreground: 0 0% 95%; - --card: 24 9.8% 10%; - --card-foreground: 0 0% 95%; - --popover: 0 0% 9%; - --popover-foreground: 0 0% 95%; - --primary: 142.1 70.6% 45.3%; - --primary-foreground: 144.9 80.4% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 15%; - --muted-foreground: 240 5% 64.9%; - --accent: 12 6.5% 15.1%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 142.4 71.8% 29.2%; + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 15%; + --muted-foreground: 240 5% 64.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 142.4 71.8% 29.2%; } diff --git a/apps/app/src/test-setup.ts b/apps/app/src/test-setup.ts index 7010c5a45..cb4be2740 100644 --- a/apps/app/src/test-setup.ts +++ b/apps/app/src/test-setup.ts @@ -1,6 +1,6 @@ import '@analogjs/vite-plugin-angular/setup-vitest'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import { getTestBed } from '@angular/core/testing'; +import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); diff --git a/apps/app/src/trpc-client.ts b/apps/app/src/trpc-client.ts index c443b3692..6894f075c 100644 --- a/apps/app/src/trpc-client.ts +++ b/apps/app/src/trpc-client.ts @@ -1,15 +1,15 @@ -import { AppRouter } from './server/trpc/routers'; import { createTrpcClient } from '@analogjs/trpc'; import { inject } from '@angular/core'; import superjson from 'superjson'; +import { AppRouter } from './server/trpc/routers'; export const { provideTrpcClient, tRPCClient } = createTrpcClient({ - url: 'http://127.0.0.1:4200/api/trpc', - options: { - transformer: superjson, - }, + url: 'http://127.0.0.1:4200/api/trpc', + options: { + transformer: superjson, + }, }); export function injectTRPCClient() { - return inject(tRPCClient); + return inject(tRPCClient); } diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js index 2c26ea258..7b8d14574 100644 --- a/apps/app/tailwind.config.js +++ b/apps/app/tailwind.config.js @@ -3,11 +3,11 @@ const { join } = require('path'); /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: 'class', - presets: [require('../../libs/ui/core/hlm-tailwind-preset.js')], - content: [ - join(__dirname, 'index.html'), - join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), - ...createGlobPatternsForDependencies(__dirname), - ], + darkMode: 'class', + presets: [require('../../libs/ui/core/hlm-tailwind-preset.js')], + content: [ + join(__dirname, 'index.html'), + join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), + ...createGlobPatternsForDependencies(__dirname), + ], }; diff --git a/apps/app/tsconfig.app.json b/apps/app/tsconfig.app.json index 83e06df13..3a8bf5c93 100644 --- a/apps/app/tsconfig.app.json +++ b/apps/app/tsconfig.app.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "types": ["node"], - "target": "ES2022", - "useDefineForClassFields": false - }, - "files": ["src/main.ts", "src/main.server.ts"], - "include": ["src/**/*.d.ts", "src/app/routes/**/*.ts", "src/app/pages/**/*.page.ts"], - "exclude": ["**/*.test.ts", "**/*.spec.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["node"], + "target": "ES2022", + "useDefineForClassFields": false + }, + "files": ["src/main.ts", "src/main.server.ts"], + "include": ["src/**/*.d.ts", "src/app/routes/**/*.ts", "src/app/pages/**/*.page.ts"], + "exclude": ["**/*.test.ts", "**/*.spec.ts"] } diff --git a/apps/app/tsconfig.editor.json b/apps/app/tsconfig.editor.json index a3149979a..7f41163c1 100644 --- a/apps/app/tsconfig.editor.json +++ b/apps/app/tsconfig.editor.json @@ -1,7 +1,7 @@ { - "extends": "./tsconfig.json", - "include": ["**/*.ts"], - "compilerOptions": { - "types": ["node", "vitest/globals"] - } + "extends": "./tsconfig.json", + "include": ["**/*.ts"], + "compilerOptions": { + "types": ["node", "vitest/globals"] + } } diff --git a/apps/app/tsconfig.json b/apps/app/tsconfig.json index 0498f9817..3fbc0e507 100644 --- a/apps/app/tsconfig.json +++ b/apps/app/tsconfig.json @@ -1,33 +1,33 @@ { - "extends": "../../tsconfig.base.json", - "files": [], - "include": [], - "exclude": ["./src/server/**/*"], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" - }, - { - "path": "./tsconfig.editor.json" - } - ], - "compilerOptions": { - "target": "es2020", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "allowSyntheticDefaultImports": true - }, - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "exclude": ["./src/server/**/*"], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.spec.json" + }, + { + "path": "./tsconfig.editor.json" + } + ], + "compilerOptions": { + "target": "es2020", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "allowSyntheticDefaultImports": true + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/apps/app/tsconfig.spec.json b/apps/app/tsconfig.spec.json index 83e118dbc..6bfb5deea 100644 --- a/apps/app/tsconfig.spec.json +++ b/apps/app/tsconfig.spec.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "types": ["node", "vitest/globals"] - }, - "files": ["src/test-setup.ts", "src/polyfills.ts"], - "include": ["src/**/*.spec.ts", "**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["node", "vitest/globals"] + }, + "files": ["src/test-setup.ts", "src/polyfills.ts"], + "include": ["src/**/*.spec.ts", "**/*.d.ts"] } diff --git a/apps/app/vite.config.ts b/apps/app/vite.config.ts index 0cb9a8bc4..105af6af7 100644 --- a/apps/app/vite.config.ts +++ b/apps/app/vite.config.ts @@ -1,114 +1,114 @@ /// import analog from '@analogjs/platform'; -import { visualizer } from 'rollup-plugin-visualizer'; -import { defineConfig, Plugin, splitVendorChunkPlugin } from 'vite'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import replace from '@rollup/plugin-replace'; import * as path from 'path'; +import { visualizer } from 'rollup-plugin-visualizer'; +import { defineConfig, Plugin, splitVendorChunkPlugin } from 'vite'; // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { - return { - publicDir: 'src/public', - server: { - host: '127.0.0.1', - }, - optimizeDeps: { - include: ['@angular/common', '@angular/forms', 'isomorphic-fetch'], - }, - ssr: { - noExternal: [ - '@analogjs/trpc/**', - '@spartan-ng/**', - '@angular/cdk/**', - '@ng-icons/**', - 'ngx-scrollbar/**', - 'ng-signal-forms/**', - ], - }, - build: { - target: ['es2020'], - }, - resolve: { - alias: { - '~': path.resolve(__dirname, './src'), - }, - }, - plugins: [ - replace({ - preventAssignment: true, - 'http://127.0.0.1:4200': 'https://www.spartan.ng', - __LASTMOD__: new Date().toISOString(), - }), - analog({ - prerender: { - routes: [ - '/', + return { + publicDir: 'src/public', + server: { + host: '127.0.0.1', + }, + optimizeDeps: { + include: ['@angular/common', '@angular/forms', 'isomorphic-fetch'], + }, + ssr: { + noExternal: [ + '@analogjs/trpc/**', + '@spartan-ng/**', + '@angular/cdk/**', + '@ng-icons/**', + 'ngx-scrollbar/**', + 'ng-signal-forms/**', + ], + }, + build: { + target: ['es2020'], + }, + resolve: { + alias: { + '~': path.resolve(__dirname, './src'), + }, + }, + plugins: [ + replace({ + preventAssignment: true, + 'http://127.0.0.1:4200': 'https://www.spartan.ng', + __LASTMOD__: new Date().toISOString(), + }), + analog({ + prerender: { + routes: [ + '/', - '/documentation/introduction', - '/documentation/about', - '/documentation/cli', + '/documentation/introduction', + '/documentation/about', + '/documentation/cli', - '/components/accordion', - '/components/alert', - '/components/alert-dialog', - '/components/aspect-ratio', - '/components/avatar', - '/components/badge', - '/components/button', - '/components/card', - '/components/collapsible', - '/components/combobox', - '/components/command', - '/components/dialog', - '/components/dropdown-menu', - '/components/input', - '/components/label', - '/components/menubar', - '/components/popover', - '/components/progress', - '/components/radio-group', - '/components/scroll-area', - '/components/separator', - '/components/sheet', - '/components/skeleton', - '/components/switch', - '/components/tabs', - '/components/textarea', - '/components/toggle', + '/components/accordion', + '/components/alert', + '/components/alert-dialog', + '/components/aspect-ratio', + '/components/avatar', + '/components/badge', + '/components/button', + '/components/card', + '/components/collapsible', + '/components/combobox', + '/components/command', + '/components/dialog', + '/components/dropdown-menu', + '/components/input', + '/components/label', + '/components/menubar', + '/components/popover', + '/components/progress', + '/components/radio-group', + '/components/scroll-area', + '/components/separator', + '/components/sheet', + '/components/skeleton', + '/components/switch', + '/components/tabs', + '/components/textarea', + '/components/toggle', - '/stack/overview', - '/stack/technologies', - '/stack/installation', + '/stack/overview', + '/stack/technologies', + '/stack/installation', - '/examples/notes', - '/examples/typography', - ], - sitemap: { - host: 'https://www.spartan.ng', - }, - }, - nitro: { - preset: 'vercel', - serveStatic: false, - }, - }), - nxViteTsPaths(), - visualizer() as Plugin, - splitVendorChunkPlugin(), - ], - test: { - globals: true, - environment: 'jsdom', - setupFiles: ['src/test-setup.ts'], - include: ['**/*.spec.ts'], - cache: { - dir: `../../node_modules/.vitest`, - }, - }, - define: { - 'import.meta.vitest': mode !== 'production', - }, - }; + '/examples/notes', + '/examples/typography', + ], + sitemap: { + host: 'https://www.spartan.ng', + }, + }, + nitro: { + preset: 'vercel', + serveStatic: false, + }, + }), + nxViteTsPaths(), + visualizer() as Plugin, + splitVendorChunkPlugin(), + ], + test: { + globals: true, + environment: 'jsdom', + setupFiles: ['src/test-setup.ts'], + include: ['**/*.spec.ts'], + cache: { + dir: `../../node_modules/.vitest`, + }, + }, + define: { + 'import.meta.vitest': mode !== 'production', + }, + }; }); diff --git a/apps/ui-storybook-e2e/.eslintrc.json b/apps/ui-storybook-e2e/.eslintrc.json index 696cb8b12..f191014a1 100644 --- a/apps/ui-storybook-e2e/.eslintrc.json +++ b/apps/ui-storybook-e2e/.eslintrc.json @@ -1,10 +1,10 @@ { - "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - } - ] + "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + } + ] } diff --git a/apps/ui-storybook-e2e/cypress.config.ts b/apps/ui-storybook-e2e/cypress.config.ts index bc83e7cf4..baa65d92c 100644 --- a/apps/ui-storybook-e2e/cypress.config.ts +++ b/apps/ui-storybook-e2e/cypress.config.ts @@ -1,6 +1,6 @@ -import { defineConfig } from 'cypress'; import { nxE2EStorybookPreset } from '@nx/storybook/presets/cypress'; +import { defineConfig } from 'cypress'; export default defineConfig({ - e2e: nxE2EStorybookPreset(__dirname), + e2e: nxE2EStorybookPreset(__dirname), }); diff --git a/apps/ui-storybook-e2e/project.json b/apps/ui-storybook-e2e/project.json index 67625514f..6540bba47 100644 --- a/apps/ui-storybook-e2e/project.json +++ b/apps/ui-storybook-e2e/project.json @@ -1,30 +1,30 @@ { - "name": "ui-storybook-e2e", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/ui-storybook-e2e/src", - "projectType": "application", - "targets": { - "e2e": { - "executor": "@nx/cypress:cypress", - "options": { - "cypressConfig": "apps/ui-storybook-e2e/cypress.config.ts", - "devServerTarget": "ui-storybook:storybook", - "testingType": "e2e" - }, - "configurations": { - "ci": { - "devServerTarget": "ui-storybook:static-storybook:ci" - } - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/ui-storybook-e2e/**/*.{js,ts}"] - } - } - }, - "tags": [], - "implicitDependencies": ["ui-storybook"] + "name": "ui-storybook-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/ui-storybook-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nx/cypress:cypress", + "options": { + "cypressConfig": "apps/ui-storybook-e2e/cypress.config.ts", + "devServerTarget": "ui-storybook:storybook", + "testingType": "e2e" + }, + "configurations": { + "ci": { + "devServerTarget": "ui-storybook:static-storybook:ci" + } + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/ui-storybook-e2e/**/*.{js,ts}"] + } + } + }, + "tags": [], + "implicitDependencies": ["ui-storybook"] } diff --git a/apps/ui-storybook-e2e/src/fixtures/example.json b/apps/ui-storybook-e2e/src/fixtures/example.json index 294cbed6c..a081b851b 100644 --- a/apps/ui-storybook-e2e/src/fixtures/example.json +++ b/apps/ui-storybook-e2e/src/fixtures/example.json @@ -1,4 +1,4 @@ { - "name": "Using fixtures to represent data", - "email": "hello@cypress.io" + "name": "Using fixtures to represent data", + "email": "hello@cypress.io" } diff --git a/apps/ui-storybook-e2e/src/integration/alert-dialog/alert-dialog.cy.ts b/apps/ui-storybook-e2e/src/integration/alert-dialog/alert-dialog.cy.ts index 89ea89140..f10a1d013 100644 --- a/apps/ui-storybook-e2e/src/integration/alert-dialog/alert-dialog.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/alert-dialog/alert-dialog.cy.ts @@ -1,103 +1,103 @@ describe('alert-dialog', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=alert-dialog--default'); - cy.injectAxe(); - }); - - it('click on trigger should open, click on close should close, click outside should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - - cy.findByText(/delete account/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.findByText(/delete account/i).click(); - - cy.findAllByText(/are you absolutely sure/i).should('have.length', 1); - cy.findByRole('alertdialog'); - cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('alertdialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('alertdialog').should('have.attr', 'tabindex', '-1'); - - cy.findByRole('alertdialog').get('hlm-icon').click(); - cy.findAllByText(/delete account/i).should('have.length', 1); - cy.findAllByText(/delete account/i).should('have.focus'); - cy.findByText(/delete account/i).click(); - - // click outside of dialog - cy.get('.cdk-overlay-backdrop').click({ force: true }); - cy.findAllByText(/delete account/i).should('have.length', 2); - cy.findAllByText(/delete account/i).should('not.have.focus'); - - // click cancel button - cy.findByText(/cancel/i).click(); - cy.findAllByText(/delete account/i).should('have.length', 1); - cy.findAllByText(/delete account/i).should('have.focus'); - }); - - it('tab and enter on trigger should open, enter on close should close, escape should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - - cy.findByText(/delete account/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Enter'); - - cy.findAllByText(/are you absolutely sure/i).should('have.length', 1); - cy.findByRole('alertdialog'); - cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('alertdialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('alertdialog').should('have.attr', 'tabindex', '-1'); - - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findAllByText(/delete account/i).should('have.length', 1); - cy.findAllByText(/delete account/i).should('have.focus'); - cy.realPress('Enter'); - - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/delete account/i).should('have.length', 1); - cy.findAllByText(/delete account/i).should('have.focus'); - }); - - it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - - cy.findByText(/delete account/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Space'); - - cy.findAllByText(/are you absolutely sure/i).should('have.length', 1); - cy.findByRole('alertdialog'); - cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('alertdialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('alertdialog').should('have.attr', 'tabindex', '-1'); - - cy.realPress('Space'); - cy.findAllByText(/delete account/i).should('have.length', 1); - cy.findAllByText(/delete account/i).should('have.focus'); - cy.realPress('Space'); - - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/delete account/i).should('have.length', 1); - cy.findAllByText(/delete account/i).should('have.focus'); - }); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=alert-dialog--default'); + cy.injectAxe(); + }); + + it('click on trigger should open, click on close should close, click outside should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + + cy.findByText(/delete account/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.findByText(/delete account/i).click(); + + cy.findAllByText(/are you absolutely sure/i).should('have.length', 1); + cy.findByRole('alertdialog'); + cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('alertdialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('alertdialog').should('have.attr', 'tabindex', '-1'); + + cy.findByRole('alertdialog').get('hlm-icon').click(); + cy.findAllByText(/delete account/i).should('have.length', 1); + cy.findAllByText(/delete account/i).should('have.focus'); + cy.findByText(/delete account/i).click(); + + // click outside of dialog + cy.get('.cdk-overlay-backdrop').click({ force: true }); + cy.findAllByText(/delete account/i).should('have.length', 2); + cy.findAllByText(/delete account/i).should('not.have.focus'); + + // click cancel button + cy.findByText(/cancel/i).click(); + cy.findAllByText(/delete account/i).should('have.length', 1); + cy.findAllByText(/delete account/i).should('have.focus'); + }); + + it('tab and enter on trigger should open, enter on close should close, escape should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + + cy.findByText(/delete account/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Enter'); + + cy.findAllByText(/are you absolutely sure/i).should('have.length', 1); + cy.findByRole('alertdialog'); + cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('alertdialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('alertdialog').should('have.attr', 'tabindex', '-1'); + + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findAllByText(/delete account/i).should('have.length', 1); + cy.findAllByText(/delete account/i).should('have.focus'); + cy.realPress('Enter'); + + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/delete account/i).should('have.length', 1); + cy.findAllByText(/delete account/i).should('have.focus'); + }); + + it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + + cy.findByText(/delete account/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Space'); + + cy.findAllByText(/are you absolutely sure/i).should('have.length', 1); + cy.findByRole('alertdialog'); + cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('alertdialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('alertdialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('alertdialog').should('have.attr', 'tabindex', '-1'); + + cy.realPress('Space'); + cy.findAllByText(/delete account/i).should('have.length', 1); + cy.findAllByText(/delete account/i).should('have.focus'); + cy.realPress('Space'); + + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/delete account/i).should('have.length', 1); + cy.findAllByText(/delete account/i).should('have.focus'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/command/command--default.cy.ts b/apps/ui-storybook-e2e/src/integration/command/command--default.cy.ts index e548760f7..bb6772af3 100644 --- a/apps/ui-storybook-e2e/src/integration/command/command--default.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/command/command--default.cy.ts @@ -1,11 +1,11 @@ describe('command', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=command--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=command--default'); + cy.injectAxe(); + }); - it(` + it(` first option should be selected by default. Typing bil, should show and select only billing Typing BIL, should show and select only billing @@ -13,72 +13,72 @@ describe('command', () => { Typing CA should show calendar and calculator and select calendar because it comes first Click on billing should select billing `, () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').type('bil'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calendar/i).should('not.be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').clear(); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').type('bil'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calendar/i).should('not.be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').type('BIL'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calendar/i).should('not.be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').clear(); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').type('BIL'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calendar/i).should('not.be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').type('ca'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('not.be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').clear(); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').type('ca'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('not.be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').type('CA'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('not.be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').clear(); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').type('CA'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('not.be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/billing/i).click(); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); - }); + cy.findByText(/billing/i).click(); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); + }); - it(` + it(` first option should be selected by default. Typing bil, should show and select only billing Typing BIL, should show and select only billing @@ -87,76 +87,76 @@ describe('command', () => { Arrow down on billing should select billing Arrow up to calculator should select calculator `, () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').type('bil'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calendar/i).should('not.be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').clear(); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').type('bil'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calendar/i).should('not.be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').type('BIL'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calendar/i).should('not.be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/billing/i).should('be.visible'); - cy.get('input').clear(); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').type('BIL'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calendar/i).should('not.be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/billing/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').type('ca'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('not.be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').clear(); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').type('ca'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('not.be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').clear(); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').type('CA'); - cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); - cy.findByText(/calendar/i).should('be.visible'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/billing/i).should('not.be.visible'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('be.visible'); - cy.get('input').clear(); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').type('CA'); + cy.findByText(/calendar/i).should('have.attr', 'aria-selected', 'true'); + cy.findByText(/calendar/i).should('be.visible'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/billing/i).should('not.be.visible'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('be.visible'); + cy.get('input').clear(); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); - cy.realPress('ArrowUp'); - cy.realPress('ArrowUp'); - cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); - cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'true'); - }); - }); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'true'); + cy.realPress('ArrowUp'); + cy.realPress('ArrowUp'); + cy.findByText(/billing/i).should('have.attr', 'aria-selected', 'false'); + cy.findByText(/calculator/i).should('have.attr', 'aria-selected', 'true'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/dialog/dialog.cy.ts b/apps/ui-storybook-e2e/src/integration/dialog/dialog.cy.ts index 49595f81b..979970e71 100644 --- a/apps/ui-storybook-e2e/src/integration/dialog/dialog.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/dialog/dialog.cy.ts @@ -1,101 +1,101 @@ describe('dialog--default', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=dialog--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=dialog--default'); + cy.injectAxe(); + }); - it('click on trigger should open, click on close should close, click outside should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('click on trigger should open, click on close should close, click outside should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.findByText(/edit profile/i).click(); + cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.findByText(/edit profile/i).click(); - cy.findAllByText(/edit profile/i).should('have.length', 2); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/edit profile/i).should('have.length', 2); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.findByRole('dialog').get('hlm-icon').click(); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - cy.findByText(/edit profile/i).click(); + cy.findByRole('dialog').get('hlm-icon').click(); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + cy.findByText(/edit profile/i).click(); - // click outside of dialog - cy.get('.cdk-overlay-backdrop').click({ force: true }); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - }); + // click outside of dialog + cy.get('.cdk-overlay-backdrop').click({ force: true }); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + }); - it('tab and enter on trigger should open, enter on close should close, escape should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('tab and enter on trigger should open, enter on close should close, escape should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Enter'); + cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Enter'); - cy.findAllByText(/edit profile/i).should('have.length', 2); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/edit profile/i).should('have.length', 2); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - cy.realPress('Enter'); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + cy.realPress('Enter'); - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - }); + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + }); - it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Space'); + cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Space'); - cy.findAllByText(/edit profile/i).should('have.length', 2); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/edit profile/i).should('have.length', 2); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - cy.realPress('Space'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + cy.realPress('Space'); - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - }); - }); + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/menu/context-menu.cy.ts b/apps/ui-storybook-e2e/src/integration/menu/context-menu.cy.ts index ab1ad38fc..2bf383afb 100644 --- a/apps/ui-storybook-e2e/src/integration/menu/context-menu.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/menu/context-menu.cy.ts @@ -1,27 +1,27 @@ describe('context-menu', () => { - // we are using the angular cdk so we are just doing some sanity testing that all directives - // were ported over correctly - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=context-menu--default'); - cy.injectAxe(); - cy.viewport(1000, 1000); - }); + // we are using the angular cdk so we are just doing some sanity testing that all directives + // were ported over correctly + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=context-menu--default'); + cy.injectAxe(); + cy.viewport(1000, 1000); + }); - it('right click on area should open, hover over sub menu should open submenu, and click on open button again should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('right click on area should open, hover over sub menu should open submenu, and click on open button again should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/right click here/i).realClick({ button: 'right' }); - cy.findAllByRole('menu').should('have.length', 1); - cy.findByText(/more tools/i).realHover(); - cy.findAllByRole('menu').should('have.length', 2); - cy.findByText(/more/i).realHover(); - cy.findByText(/save page as/i).realClick(); - }); - }); + cy.findByText(/right click here/i).realClick({ button: 'right' }); + cy.findAllByRole('menu').should('have.length', 1); + cy.findByText(/more tools/i).realHover(); + cy.findAllByRole('menu').should('have.length', 2); + cy.findByText(/more/i).realHover(); + cy.findByText(/save page as/i).realClick(); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/menu/dropdown-menu.cy.ts b/apps/ui-storybook-e2e/src/integration/menu/dropdown-menu.cy.ts index cb9646654..53fdae1d7 100644 --- a/apps/ui-storybook-e2e/src/integration/menu/dropdown-menu.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/menu/dropdown-menu.cy.ts @@ -1,58 +1,58 @@ describe('dropdown-menu', () => { - // we are using the angular cdk so we are just doing some sanity testing that all directives - // were ported over correctly - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=dropdown-menu--default'); - cy.injectAxe(); - cy.viewport(1000, 1000); - }); + // we are using the angular cdk so we are just doing some sanity testing that all directives + // were ported over correctly + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=dropdown-menu--default'); + cy.injectAxe(); + cy.viewport(1000, 1000); + }); - it('click on open button should open, hover over sub menu should open submenu, and click on open button again should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('click on open button should open, hover over sub menu should open submenu, and click on open button again should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); - cy.findByText(/open/i).realClick(); - cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'true'); - cy.findByRole('menu'); - cy.findByText(/invite users/i).realHover(); - cy.findAllByRole('menu').should('have.length', 2); - cy.findByText(/more/i).realHover(); - cy.findByText(/open/i).realClick(); - cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); - }); + cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); + cy.findByText(/open/i).realClick(); + cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'true'); + cy.findByRole('menu'); + cy.findByText(/invite users/i).realHover(); + cy.findAllByRole('menu').should('have.length', 2); + cy.findByText(/more/i).realHover(); + cy.findByText(/open/i).realClick(); + cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); + }); - it('down on open button should open, up and down should navigate, right over sub menu should open submenu, and left on sub should close it, and escape ope should close dropdown completely', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('down on open button should open, up and down should navigate, right over sub menu should open submenu, and left on sub should close it, and escape ope should close dropdown completely', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); - cy.realPress('Tab'); - cy.findByText(/open/i).should('have.focus'); - cy.realPress('ArrowDown'); - cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'true'); - cy.findByRole('menu'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowRight'); - cy.findAllByRole('menu').should('have.length', 2); - cy.realPress('ArrowDown'); - cy.realPress('ArrowLeft'); - cy.realPress('Escape'); - cy.findByText(/open/i).should('have.focus'); - cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); - }); - }); + cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); + cy.realPress('Tab'); + cy.findByText(/open/i).should('have.focus'); + cy.realPress('ArrowDown'); + cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'true'); + cy.findByRole('menu'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowRight'); + cy.findAllByRole('menu').should('have.length', 2); + cy.realPress('ArrowDown'); + cy.realPress('ArrowLeft'); + cy.realPress('Escape'); + cy.findByText(/open/i).should('have.focus'); + cy.findByText(/open/i).should('have.attr', 'aria-expanded', 'false'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/menu/menubar.cy.ts b/apps/ui-storybook-e2e/src/integration/menu/menubar.cy.ts index 80ba2b040..3f71bcf8d 100644 --- a/apps/ui-storybook-e2e/src/integration/menu/menubar.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/menu/menubar.cy.ts @@ -1,122 +1,122 @@ describe('menubar', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=menubar--default'); - cy.injectAxe(); - cy.viewport(1000, 1000); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=menubar--default'); + cy.injectAxe(); + cy.viewport(1000, 1000); + }); - it('click on file should open menu and hovering around should open/close appropriate menus', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + it('click on file should open menu and hovering around should open/close appropriate menus', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('File').realClick(); - cy.findByText('File').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('File').realClick(); + cy.findByText('File').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').realHover(); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').realHover(); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Share').realHover(); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Share').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('Share').realHover(); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Share').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('View').realHover(); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').realHover(); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').realHover(); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('Profiles').realHover(); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('File').realClick(); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - }); + cy.findByText('File').realClick(); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + }); - it('arrowdown on file should open menu and arrow left/right around should open/close appropriate menus', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + it('arrowdown on file should open menu and arrow left/right around should open/close appropriate menus', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.realPress('Tab'); - cy.realPress('ArrowDown'); - cy.findByText('File').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.realPress('Tab'); + cy.realPress('ArrowDown'); + cy.findByText('File').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.realPress('ArrowRight'); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - // - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('ArrowRight'); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Share').should('have.attr', 'aria-expanded', 'true'); + cy.realPress('ArrowRight'); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + // + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('ArrowRight'); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Share').should('have.attr', 'aria-expanded', 'true'); - cy.realPress('ArrowLeft'); - cy.realPress('ArrowUp'); - cy.realPress('ArrowUp'); - cy.realPress('ArrowUp'); - cy.realPress('ArrowUp'); - cy.realPress('ArrowRight'); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'true'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.realPress('ArrowLeft'); + cy.realPress('ArrowUp'); + cy.realPress('ArrowUp'); + cy.realPress('ArrowUp'); + cy.realPress('ArrowUp'); + cy.realPress('ArrowRight'); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'true'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.realPress('ArrowRight'); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'true'); + cy.realPress('ArrowRight'); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'true'); - cy.realPress('Escape'); - cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); - cy.findByText('Profiles').should('be.focused'); + cy.realPress('Escape'); + cy.findByText('File').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Edit').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('View').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('have.attr', 'aria-expanded', 'false'); + cy.findByText('Profiles').should('be.focused'); - cy.realPress('ArrowRight'); - cy.findByText('File').should('be.focused'); - }); - }); + cy.realPress('ArrowRight'); + cy.findByText('File').should('be.focused'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/popover/popover.cy.ts b/apps/ui-storybook-e2e/src/integration/popover/popover.cy.ts index 06a9322d7..30aeb9159 100644 --- a/apps/ui-storybook-e2e/src/integration/popover/popover.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/popover/popover.cy.ts @@ -1,88 +1,88 @@ describe('popover--default', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=popover--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=popover--default'); + cy.injectAxe(); + }); - it('click on trigger should open, click on close should close, click outside should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('click on trigger should open, click on close should close, click outside should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/open popover/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.findByText(/open popover/i).click(); + cy.findByText(/open popover/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.findByText(/open popover/i).click(); - cy.findAllByText(/Dimensions/).should('have.length', 1); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('not.have.attr', 'aria-labelledby'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/Dimensions/).should('have.length', 1); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('not.have.attr', 'aria-labelledby'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - // click outside of dialog - cy.get('#storybook-root').click({ force: true }); - cy.findAllByText(/open popover/i).should('have.length', 1); - cy.findAllByText(/open popover/i).should('have.focus'); - }); + // click outside of dialog + cy.get('#storybook-root').click({ force: true }); + cy.findAllByText(/open popover/i).should('have.length', 1); + cy.findAllByText(/open popover/i).should('have.focus'); + }); - it('tab and enter on trigger should open, enter on close should close, escape should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('tab and enter on trigger should open, enter on close should close, escape should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/open popover/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Enter'); + cy.findByText(/open popover/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Enter'); - cy.findAllByText(/Dimensions/).should('have.length', 1); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('not.have.attr', 'aria-labelledby'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/Dimensions/).should('have.length', 1); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('not.have.attr', 'aria-labelledby'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Escape'); - cy.findAllByText(/open popover/i).should('have.length', 1); - cy.findAllByText(/open popover/i).should('have.focus'); - cy.realPress('Enter'); - }); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Escape'); + cy.findAllByText(/open popover/i).should('have.length', 1); + cy.findAllByText(/open popover/i).should('have.focus'); + cy.realPress('Enter'); + }); - it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/open popover/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Space'); + cy.findByText(/open popover/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Space'); - cy.findAllByText(/Dimensions/).should('have.length', 1); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('not.have.attr', 'aria-labelledby'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/Dimensions/).should('have.length', 1); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('not.have.attr', 'aria-labelledby'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Escape'); - cy.findAllByText(/open popover/i).should('have.length', 1); - cy.findAllByText(/open popover/i).should('have.focus'); - cy.realPress('Space'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Escape'); + cy.findAllByText(/open popover/i).should('have.length', 1); + cy.findAllByText(/open popover/i).should('have.focus'); + cy.realPress('Space'); - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/open popover/i).should('have.length', 1); - cy.findAllByText(/open popover/i).should('have.focus'); - }); - }); + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/open popover/i).should('have.length', 1); + cy.findAllByText(/open popover/i).should('have.focus'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/progress/progress.cy.ts b/apps/ui-storybook-e2e/src/integration/progress/progress.cy.ts index 378c8694c..84256f364 100644 --- a/apps/ui-storybook-e2e/src/integration/progress/progress.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/progress/progress.cy.ts @@ -1,87 +1,87 @@ describe('tabs--default', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=progress--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=progress--default'); + cy.injectAxe(); + }); - it('should give the correct roles and data values to indicators with values and indeterminate if null', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('should give the correct roles and data values to indicators with values and indeterminate if null', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findAllByRole('progressbar').should('have.length', 4); + cy.findAllByRole('progressbar').should('have.length', 4); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-labelledby', 'loading'); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-valuemax', 100); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-valuemin', 0); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'data-max', 100); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'data-value', 0); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-valuenow', 0); - cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'data-state', 'loading'); - cy.findByLabelText(/loading \(not started\)/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-max', 100); - cy.findByLabelText(/loading \(not started\)/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-value', 0); - cy.findByLabelText(/loading \(not started\)/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-state', 'loading'); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-labelledby', 'loading'); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-valuemax', 100); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-valuemin', 0); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'data-max', 100); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'data-value', 0); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'aria-valuenow', 0); + cy.findByLabelText(/loading \(not started\)/i).should('have.attr', 'data-state', 'loading'); + cy.findByLabelText(/loading \(not started\)/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-max', 100); + cy.findByLabelText(/loading \(not started\)/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-value', 0); + cy.findByLabelText(/loading \(not started\)/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-state', 'loading'); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-labelledby', 'loading-started'); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-valuemax', 100); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-valuemin', 0); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'data-max', 100); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'data-value', 30); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-valuenow', 30); - cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'data-state', 'loading'); - cy.findByLabelText(/loading \(started\)/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-max', 100); - cy.findByLabelText(/loading \(started\)/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-value', 30); - cy.findByLabelText(/loading \(started\)/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-state', 'loading'); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-labelledby', 'loading-started'); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-valuemax', 100); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-valuemin', 0); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'data-max', 100); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'data-value', 30); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'aria-valuenow', 30); + cy.findByLabelText(/loading \(started\)/i).should('have.attr', 'data-state', 'loading'); + cy.findByLabelText(/loading \(started\)/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-max', 100); + cy.findByLabelText(/loading \(started\)/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-value', 30); + cy.findByLabelText(/loading \(started\)/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-state', 'loading'); - cy.findByLabelText(/indeterminate/i).should('have.attr', 'aria-labelledby', 'indeterminate'); - cy.findByLabelText(/indeterminate/i).should('have.attr', 'aria-valuemax', 100); - cy.findByLabelText(/indeterminate/i).should('have.attr', 'aria-valuemin', 0); - cy.findByLabelText(/indeterminate/i).should('have.attr', 'data-max', 100); - cy.findByLabelText(/indeterminate/i).should('not.have.attr', 'data-value'); - cy.findByLabelText(/indeterminate/i).should('not.have.attr', 'aria-valuenow'); - cy.findByLabelText(/indeterminate/i).should('have.attr', 'data-state', 'indeterminate'); - cy.findByLabelText(/indeterminate/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-max', 100); - cy.findByLabelText(/indeterminate/i) - .find('brn-progress-indicator') - .should('not.have.attr', 'data-value'); - cy.findByLabelText(/indeterminate/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-state', 'indeterminate'); + cy.findByLabelText(/indeterminate/i).should('have.attr', 'aria-labelledby', 'indeterminate'); + cy.findByLabelText(/indeterminate/i).should('have.attr', 'aria-valuemax', 100); + cy.findByLabelText(/indeterminate/i).should('have.attr', 'aria-valuemin', 0); + cy.findByLabelText(/indeterminate/i).should('have.attr', 'data-max', 100); + cy.findByLabelText(/indeterminate/i).should('not.have.attr', 'data-value'); + cy.findByLabelText(/indeterminate/i).should('not.have.attr', 'aria-valuenow'); + cy.findByLabelText(/indeterminate/i).should('have.attr', 'data-state', 'indeterminate'); + cy.findByLabelText(/indeterminate/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-max', 100); + cy.findByLabelText(/indeterminate/i) + .find('brn-progress-indicator') + .should('not.have.attr', 'data-value'); + cy.findByLabelText(/indeterminate/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-state', 'indeterminate'); - cy.findByLabelText(/complete/i).should('have.attr', 'aria-labelledby', 'complete'); - cy.findByLabelText(/complete/i).should('have.attr', 'aria-valuemax', 100); - cy.findByLabelText(/complete/i).should('have.attr', 'aria-valuemin', 0); - cy.findByLabelText(/complete/i).should('have.attr', 'data-max', 100); - cy.findByLabelText(/complete/i).should('have.attr', 'data-value', 100); - cy.findByLabelText(/complete/i).should('have.attr', 'aria-valuenow', 100); - cy.findByLabelText(/complete/i).should('have.attr', 'data-state', 'complete'); - cy.findByLabelText(/complete/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-max', 100); - cy.findByLabelText(/complete/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-value', 100); - cy.findByLabelText(/complete/i) - .find('brn-progress-indicator') - .should('have.attr', 'data-state', 'complete'); - }); - }); + cy.findByLabelText(/complete/i).should('have.attr', 'aria-labelledby', 'complete'); + cy.findByLabelText(/complete/i).should('have.attr', 'aria-valuemax', 100); + cy.findByLabelText(/complete/i).should('have.attr', 'aria-valuemin', 0); + cy.findByLabelText(/complete/i).should('have.attr', 'data-max', 100); + cy.findByLabelText(/complete/i).should('have.attr', 'data-value', 100); + cy.findByLabelText(/complete/i).should('have.attr', 'aria-valuenow', 100); + cy.findByLabelText(/complete/i).should('have.attr', 'data-state', 'complete'); + cy.findByLabelText(/complete/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-max', 100); + cy.findByLabelText(/complete/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-value', 100); + cy.findByLabelText(/complete/i) + .find('brn-progress-indicator') + .should('have.attr', 'data-state', 'complete'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/radio-group/radio-group.cy.ts b/apps/ui-storybook-e2e/src/integration/radio-group/radio-group.cy.ts index be7c3516b..c27a2522d 100644 --- a/apps/ui-storybook-e2e/src/integration/radio-group/radio-group.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/radio-group/radio-group.cy.ts @@ -1,48 +1,48 @@ describe('radio-group', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=radio-group--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=radio-group--default'); + cy.injectAxe(); + }); - it(` + it(` 1. should display default version. 2. should update based on click of outside button setting to 16.0.0. 3. should uncheck all checked radios when reset to none. 4. should check correct version when clicked on 15.8.0 radio 5. should not change when clicked on disabled radio `, () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - //1 - cy.findByTestId('currentVersion').should('have.text', '16.1.4'); - //2 - cy.findByText('Set to v16.0.0').realClick(); - cy.findByTestId('currentVersion').should('have.text', '16.0.0'); - cy.findByLabelText('v16.0.0').should('be.checked'); - //3 - cy.findByText('Reset').realClick(); - cy.findByTestId('currentVersion').should('have.text', 'none'); - cy.findByLabelText('v16.0.0').should('not.be.checked'); - //4 - cy.findByText('v15.8.0').realClick(); - cy.findByLabelText('v15.8.0').should('be.checked'); - cy.findByLabelText('v16.0.0').should('not.be.checked'); - cy.findByTestId('currentVersion').should('have.text', '15.8.0'); - //5 - cy.findByText('v15.2.0').realClick(); - cy.findByLabelText('v15.2.0').should('not.be.checked'); - cy.findByLabelText('v16.0.0').should('not.be.checked'); - cy.findByLabelText('v15.8.0').should('be.checked'); - cy.findByTestId('currentVersion').should('have.text', '15.8.0'); - }); + //1 + cy.findByTestId('currentVersion').should('have.text', '16.1.4'); + //2 + cy.findByText('Set to v16.0.0').realClick(); + cy.findByTestId('currentVersion').should('have.text', '16.0.0'); + cy.findByLabelText('v16.0.0').should('be.checked'); + //3 + cy.findByText('Reset').realClick(); + cy.findByTestId('currentVersion').should('have.text', 'none'); + cy.findByLabelText('v16.0.0').should('not.be.checked'); + //4 + cy.findByText('v15.8.0').realClick(); + cy.findByLabelText('v15.8.0').should('be.checked'); + cy.findByLabelText('v16.0.0').should('not.be.checked'); + cy.findByTestId('currentVersion').should('have.text', '15.8.0'); + //5 + cy.findByText('v15.2.0').realClick(); + cy.findByLabelText('v15.2.0').should('not.be.checked'); + cy.findByLabelText('v16.0.0').should('not.be.checked'); + cy.findByLabelText('v15.8.0').should('be.checked'); + cy.findByTestId('currentVersion').should('have.text', '15.8.0'); + }); - it(` + it(` 1. should display default version. 2. should focus first radio when tabbed in. 3. should jump to next button when tabbed out and set version correctly when enter is hit on it @@ -51,46 +51,46 @@ describe('radio-group', () => { 6. should move checked radio with left and right arrows. 5. should not move to disabled radio `, () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - //1 - cy.findByTestId('currentVersion').should('have.text', '16.1.4'); - //2 - cy.realPress('Tab'); - cy.findByLabelText('v16.1.4').should('have.focus'); - cy.realPress('Tab'); - cy.findByText('Set to v16.0.0').should('have.focus'); - cy.realPress('Enter'); - cy.findByTestId('currentVersion').should('have.text', '16.0.0'); - cy.findByLabelText('v16.0.0').should('be.checked'); - //3 - cy.realPress(['Shift', 'Tab']); - cy.findByLabelText('v16.0.0').should('have.focus'); - cy.realPress('ArrowUp'); - cy.findByLabelText('v16.1.4').should('have.focus'); - cy.findByLabelText('v16.1.4').should('be.checked'); - cy.realPress('ArrowDown'); - cy.findByLabelText('v16.0.0').should('be.checked'); - cy.findByLabelText('v16.0.0').should('have.focus'); - //4 - cy.realPress('ArrowLeft'); - cy.findByLabelText('v16.1.4').should('have.focus'); - cy.findByLabelText('v16.1.4').should('be.checked'); - cy.realPress('ArrowRight'); - cy.findByLabelText('v16.0.0').should('be.checked'); - cy.findByLabelText('v16.0.0').should('have.focus'); - //5 - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); + //1 + cy.findByTestId('currentVersion').should('have.text', '16.1.4'); + //2 + cy.realPress('Tab'); + cy.findByLabelText('v16.1.4').should('have.focus'); + cy.realPress('Tab'); + cy.findByText('Set to v16.0.0').should('have.focus'); + cy.realPress('Enter'); + cy.findByTestId('currentVersion').should('have.text', '16.0.0'); + cy.findByLabelText('v16.0.0').should('be.checked'); + //3 + cy.realPress(['Shift', 'Tab']); + cy.findByLabelText('v16.0.0').should('have.focus'); + cy.realPress('ArrowUp'); + cy.findByLabelText('v16.1.4').should('have.focus'); + cy.findByLabelText('v16.1.4').should('be.checked'); + cy.realPress('ArrowDown'); + cy.findByLabelText('v16.0.0').should('be.checked'); + cy.findByLabelText('v16.0.0').should('have.focus'); + //4 + cy.realPress('ArrowLeft'); + cy.findByLabelText('v16.1.4').should('have.focus'); + cy.findByLabelText('v16.1.4').should('be.checked'); + cy.realPress('ArrowRight'); + cy.findByLabelText('v16.0.0').should('be.checked'); + cy.findByLabelText('v16.0.0').should('have.focus'); + //5 + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); - cy.findByLabelText('v15.2.0').should('not.have.focus'); - cy.findByLabelText('v16.1.4').should('have.focus'); - cy.findByLabelText('v16.1.4').should('be.checked'); - }); - }); + cy.findByLabelText('v15.2.0').should('not.have.focus'); + cy.findByLabelText('v16.1.4').should('have.focus'); + cy.findByLabelText('v16.1.4').should('be.checked'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/separator/separator.cy.ts b/apps/ui-storybook-e2e/src/integration/separator/separator.cy.ts index 8e31c8f50..415da49bf 100644 --- a/apps/ui-storybook-e2e/src/integration/separator/separator.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/separator/separator.cy.ts @@ -1,26 +1,26 @@ describe('separator', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=separator--default'); - cy.injectAxe(); + beforeEach(() => { + cy.visit('/iframe.html?id=separator--default'); + cy.injectAxe(); - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - }); + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + }); - it('should find one horizontal decorator and two vertical decorators, which are display only', () => { - cy.get('brn-separator').should('have.length', 3); - cy.findAllByRole('separator').should('have.length', 1); - cy.findAllByRole('separator').should('have.attr', 'data-orientation', 'horizontal'); - // not needed since it's the default - cy.findAllByRole('none').should('not.have.attr', 'aria-orientation', 'horizontal'); + it('should find one horizontal decorator and two vertical decorators, which are display only', () => { + cy.get('brn-separator').should('have.length', 3); + cy.findAllByRole('separator').should('have.length', 1); + cy.findAllByRole('separator').should('have.attr', 'data-orientation', 'horizontal'); + // not needed since it's the default + cy.findAllByRole('none').should('not.have.attr', 'aria-orientation', 'horizontal'); - cy.findAllByRole('none').should('have.length', 2); - cy.findAllByRole('none').should('have.attr', 'data-orientation', 'vertical'); - // horizontals are decorative so no aria functionalty included - cy.findAllByRole('none').should('not.have.attr', 'aria-orientation', 'vertical'); - }); + cy.findAllByRole('none').should('have.length', 2); + cy.findAllByRole('none').should('have.attr', 'data-orientation', 'vertical'); + // horizontals are decorative so no aria functionalty included + cy.findAllByRole('none').should('not.have.attr', 'aria-orientation', 'vertical'); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/sheet/sheet.cy.ts b/apps/ui-storybook-e2e/src/integration/sheet/sheet.cy.ts index b9fc0d958..96ccd08d5 100644 --- a/apps/ui-storybook-e2e/src/integration/sheet/sheet.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/sheet/sheet.cy.ts @@ -1,101 +1,101 @@ describe('sheet--default', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=sheet--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=sheet--default'); + cy.injectAxe(); + }); - it('click on trigger should open, click on close should close, click outside should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('click on trigger should open, click on close should close, click outside should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.findByText(/edit profile/i).click(); + cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.findByText(/edit profile/i).click(); - cy.findAllByText(/edit profile/i).should('have.length', 2); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/edit profile/i).should('have.length', 2); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.findByRole('dialog').get('hlm-icon').click(); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - cy.findByText(/edit profile/i).click(); + cy.findByRole('dialog').get('hlm-icon').click(); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + cy.findByText(/edit profile/i).click(); - // click outside of dialog - cy.get('.cdk-overlay-backdrop').click({ force: true }); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - }); + // click outside of dialog + cy.get('.cdk-overlay-backdrop').click({ force: true }); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + }); - it('tab and enter on trigger should open, enter on close should close, escape should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('tab and enter on trigger should open, enter on close should close, escape should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Enter'); + cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Enter'); - cy.findAllByText(/edit profile/i).should('have.length', 2); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/edit profile/i).should('have.length', 2); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - cy.realPress('Enter'); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + cy.realPress('Enter'); - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - }); + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + }); - it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); + it('tab and space on trigger should open, tabs should wrap, space on close should close', () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); - cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); - cy.realPress('Tab'); - cy.realPress('Space'); + cy.findByText(/edit profile/i).should('have.attr', 'aria-haspopup', 'dialog'); + cy.realPress('Tab'); + cy.realPress('Space'); - cy.findAllByText(/edit profile/i).should('have.length', 2); - cy.findByRole('dialog'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); - cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); - cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); + cy.findAllByText(/edit profile/i).should('have.length', 2); + cy.findByRole('dialog'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-labelledby', 'brn-dialog-title-0'); + cy.findByRole('dialog').should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog').should('have.attr', 'tabindex', '-1'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - cy.realPress('Space'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + cy.realPress('Space'); - // click escape when dialog open - cy.realPress('Escape'); - cy.findAllByText(/edit profile/i).should('have.length', 1); - cy.findAllByText(/edit profile/i).should('have.focus'); - }); - }); + // click escape when dialog open + cy.realPress('Escape'); + cy.findAllByText(/edit profile/i).should('have.length', 1); + cy.findAllByText(/edit profile/i).should('have.focus'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/switch/switch.cy.ts b/apps/ui-storybook-e2e/src/integration/switch/switch.cy.ts index 6d24df829..0ce701c69 100644 --- a/apps/ui-storybook-e2e/src/integration/switch/switch.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/switch/switch.cy.ts @@ -1,130 +1,130 @@ describe('switch', () => { - const verifySwitchSetup = () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByRole('switch').should('exist'); - cy.findByRole('switch').should('have.attr', 'type', 'checkbox'); - cy.findByRole('switch').should('have.id', 'testSwitch'); - }; - const verifySwitchOff = () => { - cy.findByLabelText(/test switch/i).should('have.attr', 'value', 'off'); - cy.get('brn-switch').should('have.attr', 'data-state', 'unchecked'); - }; - const verifySwitchOn = () => { - cy.findByLabelText(/test switch/i).should('have.attr', 'value', 'on'); - cy.get('brn-switch').should('have.attr', 'data-state', 'checked'); - }; - - const executeTabEnterTests = () => { - verifySwitchSetup(); - verifySwitchOff(); - - cy.realPress('Tab'); - cy.realPress('Enter'); - verifySwitchOn(); - - cy.realPress('Enter'); - verifySwitchOff(); - }; - const executeTabSpaceTests = () => { - verifySwitchSetup(); - verifySwitchOff(); - - cy.realPress('Tab'); - cy.realPress('Space'); - verifySwitchOn(); - - cy.realPress('Space'); - verifySwitchOff(); - }; - const executeClickOnLabelTests = () => { - verifySwitchSetup(); - verifySwitchOff(); - - cy.findByText(/test switch/i).click(); - verifySwitchOn(); - - cy.findByText(/test switch/i).click(); - verifySwitchOff(); - }; - - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=switch--default'); - cy.injectAxe(); - }); - - it('click interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', () => { - verifySwitchSetup(); - verifySwitchOff(); - - cy.get('brn-switch-thumb').click(); - verifySwitchOn(); - - cy.get('brn-switch').click(); - verifySwitchOff(); - }); - - it( - '[Tab][Enter] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - executeTabEnterTests - ); - - it( - '[Tab][Space] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - executeTabSpaceTests - ); - }); - - describe('inside label', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=switch--inside-label'); - cy.injectAxe(); - }); - - it( - 'click interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - executeClickOnLabelTests - ); - - it( - '[Tab][Enter] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - // this is the same as label does not change keyboard interaction - executeTabEnterTests - ); - - it( - '[Tab][Space] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - // this is the same as label does not change keyboard interaction - executeTabSpaceTests - ); - }); - - describe('labeled with aria-labelledby', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=switch--labeled-with-aria-labeled-by'); - cy.injectAxe(); - }); - - it( - 'click interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - executeClickOnLabelTests - ); - - it( - '[Tab][Enter] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - // this is the same as label does not change keyboard interaction - executeTabEnterTests - ); - - it( - '[Tab][Space] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', - // this is the same as label does not change keyboard interaction - executeTabSpaceTests - ); - }); + const verifySwitchSetup = () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByRole('switch').should('exist'); + cy.findByRole('switch').should('have.attr', 'type', 'checkbox'); + cy.findByRole('switch').should('have.id', 'testSwitch'); + }; + const verifySwitchOff = () => { + cy.findByLabelText(/test switch/i).should('have.attr', 'value', 'off'); + cy.get('brn-switch').should('have.attr', 'data-state', 'unchecked'); + }; + const verifySwitchOn = () => { + cy.findByLabelText(/test switch/i).should('have.attr', 'value', 'on'); + cy.get('brn-switch').should('have.attr', 'data-state', 'checked'); + }; + + const executeTabEnterTests = () => { + verifySwitchSetup(); + verifySwitchOff(); + + cy.realPress('Tab'); + cy.realPress('Enter'); + verifySwitchOn(); + + cy.realPress('Enter'); + verifySwitchOff(); + }; + const executeTabSpaceTests = () => { + verifySwitchSetup(); + verifySwitchOff(); + + cy.realPress('Tab'); + cy.realPress('Space'); + verifySwitchOn(); + + cy.realPress('Space'); + verifySwitchOff(); + }; + const executeClickOnLabelTests = () => { + verifySwitchSetup(); + verifySwitchOff(); + + cy.findByText(/test switch/i).click(); + verifySwitchOn(); + + cy.findByText(/test switch/i).click(); + verifySwitchOff(); + }; + + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=switch--default'); + cy.injectAxe(); + }); + + it('click interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', () => { + verifySwitchSetup(); + verifySwitchOff(); + + cy.get('brn-switch-thumb').click(); + verifySwitchOn(); + + cy.get('brn-switch').click(); + verifySwitchOff(); + }); + + it( + '[Tab][Enter] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + executeTabEnterTests, + ); + + it( + '[Tab][Space] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + executeTabSpaceTests, + ); + }); + + describe('inside label', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=switch--inside-label'); + cy.injectAxe(); + }); + + it( + 'click interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + executeClickOnLabelTests, + ); + + it( + '[Tab][Enter] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + // this is the same as label does not change keyboard interaction + executeTabEnterTests, + ); + + it( + '[Tab][Space] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + // this is the same as label does not change keyboard interaction + executeTabSpaceTests, + ); + }); + + describe('labeled with aria-labelledby', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=switch--labeled-with-aria-labeled-by'); + cy.injectAxe(); + }); + + it( + 'click interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + executeClickOnLabelTests, + ); + + it( + '[Tab][Enter] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + // this is the same as label does not change keyboard interaction + executeTabEnterTests, + ); + + it( + '[Tab][Space] interactions should render as unchecked, become checked on thumb click, become unchecked on switch click', + // this is the same as label does not change keyboard interaction + executeTabSpaceTests, + ); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/tabs/tabs--default--manual.cy.ts b/apps/ui-storybook-e2e/src/integration/tabs/tabs--default--manual.cy.ts index 70f9afec5..96eb3cc9d 100644 --- a/apps/ui-storybook-e2e/src/integration/tabs/tabs--default--manual.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/tabs/tabs--default--manual.cy.ts @@ -1,94 +1,94 @@ describe('tabs--default--manual', () => { - const verifyTabsSetup = () => { - // TODO: investigate why this fails - // cy.checkA11y('#storybook-root', { - // rules: { - // 'page-has-heading-one': { enabled: false }, - // 'landmark-one-main': { enabled: false }, - // }, - // }); + const verifyTabsSetup = () => { + // TODO: investigate why this fails + // cy.checkA11y('#storybook-root', { + // rules: { + // 'page-has-heading-one': { enabled: false }, + // 'landmark-one-main': { enabled: false }, + // }, + // }); - cy.findByRole('tablist').should('exist'); - cy.findByRole('tablist').should('have.attr', 'aria-label'); - cy.findByRole('tablist').should('have.attr', 'data-orientation', 'horizontal'); - cy.findByRole('tablist').should('have.attr', 'aria-orientation', 'horizontal'); - cy.findAllByRole('tab').should('have.length', 2); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-account'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-password'); - cy.findByRole('tabpanel').should('exist'); - }; + cy.findByRole('tablist').should('exist'); + cy.findByRole('tablist').should('have.attr', 'aria-label'); + cy.findByRole('tablist').should('have.attr', 'data-orientation', 'horizontal'); + cy.findByRole('tablist').should('have.attr', 'aria-orientation', 'horizontal'); + cy.findAllByRole('tab').should('have.length', 2); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-account'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-password'); + cy.findByRole('tabpanel').should('exist'); + }; - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=tabs--default&args=activationMode:manual'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=tabs--default&args=activationMode:manual'); + cy.injectAxe(); + }); - it('click interactions should render with first tab selected and change to second tab when second tab is clicked', () => { - verifyTabsSetup(); + it('click interactions should render with first tab selected and change to second tab when second tab is clicked', () => { + verifyTabsSetup(); - cy.findByRole('tab', { name: /password/i }).click(); + cy.findByRole('tab', { name: /password/i }).click(); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'true'); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'false'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'true'); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'false'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - cy.findByRole('tab', { name: /account/i }).click(); + cy.findByRole('tab', { name: /account/i }).click(); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'true'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'false'); - cy.findByRole('heading', { name: /account/i }).should('exist'); - }); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'true'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'false'); + cy.findByRole('heading', { name: /account/i }).should('exist'); + }); - it('tab and arrow interactions should render with first tab selected and change to second tab when second tab is focused and confirmed with enter with arrow right, return to first tab with arrow left and do nothing on arrow up or down', () => { - verifyTabsSetup(); + it('tab and arrow interactions should render with first tab selected and change to second tab when second tab is focused and confirmed with enter with arrow right, return to first tab with arrow left and do nothing on arrow up or down', () => { + verifyTabsSetup(); - cy.realPress('Tab'); - cy.realPress('ArrowRight'); - cy.findByRole('heading', { name: /password/i }).should('not.exist'); - cy.realPress('Enter'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + cy.realPress('Tab'); + cy.realPress('ArrowRight'); + cy.findByRole('heading', { name: /password/i }).should('not.exist'); + cy.realPress('Enter'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - cy.realPress('ArrowLeft'); - cy.realPress('Enter'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + cy.realPress('ArrowLeft'); + cy.realPress('Enter'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // should ignore up and down - cy.realPress('ArrowUp'); - cy.realPress('Enter'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + // should ignore up and down + cy.realPress('ArrowUp'); + cy.realPress('Enter'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - cy.realPress('ArrowDown'); - cy.realPress('Enter'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + cy.realPress('ArrowDown'); + cy.realPress('Enter'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // should jump to last on end - cy.realPress('End'); - cy.realPress('Space'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + // should jump to last on end + cy.realPress('End'); + cy.realPress('Space'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - // should wrap arround - cy.realPress('ArrowRight'); - cy.realPress('Enter'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + // should wrap arround + cy.realPress('ArrowRight'); + cy.realPress('Enter'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // jump between list and panel on tab - cy.realPress('Tab'); - cy.findByRole('tabpanel').should('be.focused'); - cy.realPress(['Shift', 'Tab']); - cy.findByRole('tab', { name: /account/i }).should('be.focused'); - }); - }); + // jump between list and panel on tab + cy.realPress('Tab'); + cy.findByRole('tabpanel').should('be.focused'); + cy.realPress(['Shift', 'Tab']); + cy.findByRole('tab', { name: /account/i }).should('be.focused'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/tabs/tabs--default.cy.ts b/apps/ui-storybook-e2e/src/integration/tabs/tabs--default.cy.ts index d0f5b610f..a68e2bf43 100644 --- a/apps/ui-storybook-e2e/src/integration/tabs/tabs--default.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/tabs/tabs--default.cy.ts @@ -1,87 +1,87 @@ describe('tabs--default', () => { - const verifyTabsSetup = () => { - // TODO: investigate why this fails - // cy.checkA11y('#storybook-root', { - // rules: { - // 'page-has-heading-one': { enabled: false }, - // 'landmark-one-main': { enabled: false }, - // }, - // }); + const verifyTabsSetup = () => { + // TODO: investigate why this fails + // cy.checkA11y('#storybook-root', { + // rules: { + // 'page-has-heading-one': { enabled: false }, + // 'landmark-one-main': { enabled: false }, + // }, + // }); - cy.findByRole('tablist').should('exist'); - cy.findByRole('tablist').should('have.attr', 'aria-label'); - cy.findByRole('tablist').should('have.attr', 'data-orientation', 'horizontal'); - cy.findByRole('tablist').should('have.attr', 'aria-orientation', 'horizontal'); - cy.findAllByRole('tab').should('have.length', 2); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-account'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-password'); - cy.findByRole('tabpanel').should('exist'); - }; + cy.findByRole('tablist').should('exist'); + cy.findByRole('tablist').should('have.attr', 'aria-label'); + cy.findByRole('tablist').should('have.attr', 'data-orientation', 'horizontal'); + cy.findByRole('tablist').should('have.attr', 'aria-orientation', 'horizontal'); + cy.findAllByRole('tab').should('have.length', 2); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-account'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-password'); + cy.findByRole('tabpanel').should('exist'); + }; - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=tabs--default'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=tabs--default'); + cy.injectAxe(); + }); - it('click interactions should render with first tab selected and change to second tab when second tab is clicked', () => { - verifyTabsSetup(); + it('click interactions should render with first tab selected and change to second tab when second tab is clicked', () => { + verifyTabsSetup(); - cy.findByRole('tab', { name: /password/i }).click(); + cy.findByRole('tab', { name: /password/i }).click(); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'true'); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'false'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'true'); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'false'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - cy.findByRole('tab', { name: /account/i }).click(); + cy.findByRole('tab', { name: /account/i }).click(); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'true'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'false'); - cy.findByRole('heading', { name: /account/i }).should('exist'); - }); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'true'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'false'); + cy.findByRole('heading', { name: /account/i }).should('exist'); + }); - it('tab and arrow interactions should render with first tab selected and change to second tab when second tab is focused with arrow right, return to first tab with arrow left and do nothing on arrow up or down', () => { - verifyTabsSetup(); + it('tab and arrow interactions should render with first tab selected and change to second tab when second tab is focused with arrow right, return to first tab with arrow left and do nothing on arrow up or down', () => { + verifyTabsSetup(); - cy.realPress('Tab'); - cy.realPress('ArrowRight'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + cy.realPress('Tab'); + cy.realPress('ArrowRight'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - cy.realPress('ArrowLeft'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + cy.realPress('ArrowLeft'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // should ignore up and down - cy.realPress('ArrowUp'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + // should ignore up and down + cy.realPress('ArrowUp'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - cy.realPress('ArrowDown'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + cy.realPress('ArrowDown'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // should jump to last on end - cy.realPress('End'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + // should jump to last on end + cy.realPress('End'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - // should wrap arround - cy.realPress('ArrowRight'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + // should wrap arround + cy.realPress('ArrowRight'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // jump between list and panel on tab - cy.realPress('Tab'); - cy.findByRole('tabpanel').should('be.focused'); - cy.realPress(['Shift', 'Tab']); - cy.findByRole('tab', { name: /account/i }).should('be.focused'); - }); - }); + // jump between list and panel on tab + cy.realPress('Tab'); + cy.findByRole('tabpanel').should('be.focused'); + cy.realPress(['Shift', 'Tab']); + cy.findByRole('tab', { name: /account/i }).should('be.focused'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/tabs/tabs--vertical.cy.ts b/apps/ui-storybook-e2e/src/integration/tabs/tabs--vertical.cy.ts index e3b0bb377..6a9f38de5 100644 --- a/apps/ui-storybook-e2e/src/integration/tabs/tabs--vertical.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/tabs/tabs--vertical.cy.ts @@ -1,88 +1,88 @@ describe('tabs--vertical', () => { - const verifyTabsSetup = () => { - // TODO: investigate why this fails - // cy.checkA11y('#storybook-root', { - // rules: { - // 'page-has-heading-one': { enabled: false }, - // 'landmark-one-main': { enabled: false }, - // }, - // }); + const verifyTabsSetup = () => { + // TODO: investigate why this fails + // cy.checkA11y('#storybook-root', { + // rules: { + // 'page-has-heading-one': { enabled: false }, + // 'landmark-one-main': { enabled: false }, + // }, + // }); - cy.findByRole('tablist').should('exist'); - cy.findByRole('tablist').should('have.attr', 'aria-label'); - cy.findByRole('tablist').should('have.attr', 'data-orientation', 'vertical'); - cy.findByRole('tablist').should('have.attr', 'aria-orientation', 'vertical'); - cy.findAllByRole('tab').should('have.length', 3); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-account'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-password'); - cy.findByRole('tab', { name: /danger zone/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-danger'); - cy.findByRole('tabpanel').should('exist'); - }; + cy.findByRole('tablist').should('exist'); + cy.findByRole('tablist').should('have.attr', 'aria-label'); + cy.findByRole('tablist').should('have.attr', 'data-orientation', 'vertical'); + cy.findByRole('tablist').should('have.attr', 'aria-orientation', 'vertical'); + cy.findAllByRole('tab').should('have.length', 3); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-account'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-password'); + cy.findByRole('tab', { name: /danger zone/i }).should('have.attr', 'aria-controls', 'brn-tabs-content-danger'); + cy.findByRole('tabpanel').should('exist'); + }; - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=tabs--vertical'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=tabs--vertical'); + cy.injectAxe(); + }); - it('click interactions should render with first tab selected and change to second tab when second tab is clicked', () => { - verifyTabsSetup(); + it('click interactions should render with first tab selected and change to second tab when second tab is clicked', () => { + verifyTabsSetup(); - cy.findByRole('tab', { name: /password/i }).click(); + cy.findByRole('tab', { name: /password/i }).click(); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'true'); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'false'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'true'); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'false'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - cy.findByRole('tab', { name: /account/i }).click(); + cy.findByRole('tab', { name: /account/i }).click(); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'true'); - cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'false'); - cy.findByRole('heading', { name: /account/i }).should('exist'); - }); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('tab', { name: /account/i }).should('have.attr', 'aria-selected', 'true'); + cy.findByRole('tab', { name: /password/i }).should('have.attr', 'aria-selected', 'false'); + cy.findByRole('heading', { name: /account/i }).should('exist'); + }); - it('tab and arrow interactions should render with first tab selected and change to second tab when second tab is focused with arrow right, return to first tab with arrow left and do nothing on arrow up or down', () => { - verifyTabsSetup(); + it('tab and arrow interactions should render with first tab selected and change to second tab when second tab is focused with arrow right, return to first tab with arrow left and do nothing on arrow up or down', () => { + verifyTabsSetup(); - cy.realPress('Tab'); - cy.realPress('ArrowDown'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /password/i }).should('exist'); + cy.realPress('Tab'); + cy.realPress('ArrowDown'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-password'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /password/i }).should('exist'); - cy.realPress('ArrowUp'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + cy.realPress('ArrowUp'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // should ignore left and right - cy.realPress('ArrowLeft'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + // should ignore left and right + cy.realPress('ArrowLeft'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - cy.realPress('ArrowRight'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + cy.realPress('ArrowRight'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // should jump to last on end - cy.realPress('End'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-danger'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /delete account/i }).should('exist'); + // should jump to last on end + cy.realPress('End'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-danger'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /delete account/i }).should('exist'); - // should wrap arround - cy.realPress('ArrowDown'); - cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); - cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); - cy.findByRole('heading', { name: /account/i }).should('exist'); + // should wrap arround + cy.realPress('ArrowDown'); + cy.findByRole('tabpanel').should('have.attr', 'aria-labelledby', 'brn-tabs-label-account'); + cy.findByRole('tabpanel').should('have.attr', 'tabindex', '0'); + cy.findByRole('heading', { name: /account/i }).should('exist'); - // jump between list and panel on tab - cy.realPress('Tab'); - cy.findByRole('tabpanel').should('be.focused'); - cy.realPress(['Shift', 'Tab']); - cy.findByRole('tab', { name: /account/i }).should('be.focused'); - }); - }); + // jump between list and panel on tab + cy.realPress('Tab'); + cy.findByRole('tabpanel').should('be.focused'); + cy.realPress(['Shift', 'Tab']); + cy.findByRole('tab', { name: /account/i }).should('be.focused'); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple-nullable.cy.ts b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple-nullable.cy.ts index 061c12ccc..f655f3bfa 100644 --- a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple-nullable.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple-nullable.cy.ts @@ -1,26 +1,26 @@ describe('toggle--toggle-group-multiple-nullable', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=toggle--toggle-group-multiple-nullable'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=toggle--toggle-group-multiple-nullable'); + cy.injectAxe(); + }); - const verifyToggleGroupSetup = () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText(/Cities selected/i).contains(/no cities/i); - cy.findByRole('group').should('exist'); - cy.findByRole('group').children('button').should('have.length', 4); - cy.findByRole('group') - .children('button') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - }; + const verifyToggleGroupSetup = () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText(/Cities selected/i).contains(/no cities/i); + cy.findByRole('group').should('exist'); + cy.findByRole('group').children('button').should('have.length', 4); + cy.findByRole('group') + .children('button') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + }; - it(` + it(` 1. should have no city selected by default. 2. should have toggle-group with role=group and 4 buttons all toggled off. 3. click on sparta should select sparta. @@ -29,102 +29,102 @@ describe('toggle--toggle-group-multiple-nullable', () => { 6. click on syracuse should unselect syracuse, but keep sparta and athens selected 7. click on set-to-syracuse button should unselect all others but syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.findByRole('group') - .findByText(/sparta/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - // 4. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - // 5. - cy.findByRole('group') - .findByText(/athens/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 6. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'false') - .should('have.attr', 'data-state', 'off'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 7. - cy.findByText(/set to syracuse/i).click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.findByRole('group') + .findByText(/sparta/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + // 4. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + // 5. + cy.findByRole('group') + .findByText(/athens/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 6. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'false') + .should('have.attr', 'data-state', 'off'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 7. + cy.findByText(/set to syracuse/i).click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + }); - it(` + it(` 1. should have no city selected by default. 2. should have toggle-group with role=group and 4 buttons all toggled off. 3. tab to and space on sparta should select sparta. @@ -133,100 +133,100 @@ describe('toggle--toggle-group-multiple-nullable', () => { 6. tab to and enter on syracuse should unselect syracuse, but keep sparta and athens selected 7. tab to and space on set-to-syracuse button should unselect all others but syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - // 4. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - // 5. - cy.realPress(['Shift', 'Tab']); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 6. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'false') - .should('have.attr', 'data-state', 'off'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 7. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - }); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + // 4. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + // 5. + cy.realPress(['Shift', 'Tab']); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 6. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'false') + .should('have.attr', 'data-state', 'off'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 7. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple.cy.ts b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple.cy.ts index f77e63e7b..a63eb6ca1 100644 --- a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-multiple.cy.ts @@ -1,31 +1,31 @@ describe('toggle--toggle-group-multiple', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=toggle--toggle-group-multiple'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=toggle--toggle-group-multiple'); + cy.injectAxe(); + }); - const verifyToggleGroupSetup = () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByRole('group').should('exist'); - cy.findByRole('group').children('button').should('have.length', 4); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - }; + const verifyToggleGroupSetup = () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByRole('group').should('exist'); + cy.findByRole('group').children('button').should('have.length', 4); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + }; - it(` + it(` 1. should have sparta selected by default. 2. should have toggle-group with role=group and 3 buttons toggled off and sparta toggled on. 3. click on sparta should not unselect sparta. @@ -35,115 +35,115 @@ describe('toggle--toggle-group-multiple', () => { 7. click on set-to-syracuse button should unselect all others but syracuse 8. click on syracuse should not unselect syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.findByRole('group') - .findByText(/sparta/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - // 4. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - // 5. - cy.findByRole('group') - .findByText(/athens/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 6. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'false') - .should('have.attr', 'data-state', 'off'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 7. - cy.findByText(/set to syracuse/i).click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - // 7. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.findByRole('group') + .findByText(/sparta/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + // 4. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + // 5. + cy.findByRole('group') + .findByText(/athens/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 6. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'false') + .should('have.attr', 'data-state', 'off'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 7. + cy.findByText(/set to syracuse/i).click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + // 7. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + }); - it(` + it(` 1. should have sparta selected by default. 2. should have toggle-group with role=group and 3 buttons toggled off and sparta toggled on. 3. tab to and space on sparta should select sparta. @@ -153,112 +153,112 @@ describe('toggle--toggle-group-multiple', () => { 7. tab to and space on set-to-syracuse button should unselect all others but syracuse 8. tab to and enter syracuse should not unselect syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - // 4. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - // 5. - cy.realPress(['Shift', 'Tab']); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Syracuse")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 6. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'false') - .should('have.attr', 'data-state', 'off'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/sparta/i); - cy.findByText(/Cities selected/i).contains(/athens/i); - // 7. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - // 8. - cy.realPress(['Shift', 'Tab']); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/Cities selected/i).contains(/syracuse/i); - }); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + // 4. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + // 5. + cy.realPress(['Shift', 'Tab']); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Syracuse")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 6. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'false') + .should('have.attr', 'data-state', 'off'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/sparta/i); + cy.findByText(/Cities selected/i).contains(/athens/i); + // 7. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + // 8. + cy.realPress(['Shift', 'Tab']); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/Cities selected/i).contains(/syracuse/i); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single--dynamic-options.cy.ts b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single--dynamic-options.cy.ts index 9cbb08b92..2e707fe02 100644 --- a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single--dynamic-options.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single--dynamic-options.cy.ts @@ -1,31 +1,31 @@ describe('toggle--toggle-group-dynamic-options', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=toggle--toggle-group-single'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=toggle--toggle-group-single'); + cy.injectAxe(); + }); - const verifyToggleGroupSetup = () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText(/City selected/i).contains(/sparta/i); - cy.findByRole('group').should('exist'); - cy.findByRole('group').children('button').should('have.length', 4); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - }; + const verifyToggleGroupSetup = () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText(/City selected/i).contains(/sparta/i); + cy.findByRole('group').should('exist'); + cy.findByRole('group').children('button').should('have.length', 4); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + }; - it(` + it(` 1. should sparta selected by default. 2. should have toggle-group with role=group and 3 buttons toggled off and sparta toggled on. 3. click on sparta should not unselect sparta. @@ -37,103 +37,103 @@ describe('toggle--toggle-group-dynamic-options', () => { 9. click on piraeus should unselect syracuse and select piraeus 10. click on piraeus should not unselect piraeus `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.findByRole('group') - .findByText(/sparta/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/sparta/i); - // 4. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 5. - cy.findByRole('group') - .findByText(/athens/i) - .click(); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/athens/i); - // 6. - cy.findByText(/set to syracuse/i).click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 7. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 8. - cy.findByText(/add piraeus/i).click(); - cy.findByRole('group').children('button').should('have.length', 5); - // 9. - cy.findByRole('group') - .findByText(/piraeus/i) - .click(); - cy.findByRole('group') - .findByText(/piraeus/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Piraeus")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/piraeus/i); - // 10. - cy.findByRole('group') - .findByText(/piraeus/i) - .click(); - cy.findByRole('group') - .findByText(/piraeus/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Piraeus")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/piraeus/i); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.findByRole('group') + .findByText(/sparta/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/sparta/i); + // 4. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 5. + cy.findByRole('group') + .findByText(/athens/i) + .click(); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/athens/i); + // 6. + cy.findByText(/set to syracuse/i).click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 7. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 8. + cy.findByText(/add piraeus/i).click(); + cy.findByRole('group').children('button').should('have.length', 5); + // 9. + cy.findByRole('group') + .findByText(/piraeus/i) + .click(); + cy.findByRole('group') + .findByText(/piraeus/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Piraeus")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/piraeus/i); + // 10. + cy.findByRole('group') + .findByText(/piraeus/i) + .click(); + cy.findByRole('group') + .findByText(/piraeus/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Piraeus")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/piraeus/i); + }); - it(` + it(` 1. should sparta selected by default. 2. should have toggle-group with role=group and 3 buttons toggled off and sparta toggled on. 3. tab to and space on sparta should not unselect sparta. @@ -145,101 +145,101 @@ describe('toggle--toggle-group-dynamic-options', () => { 9. tab to and space on piraeus should unselect syracuse and select piraeus 10. tab to and enter on piraeus should not unselect piraeus `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/sparta/i); - // 4. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 5. - cy.realPress(['Shift', 'Tab']); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/athens/i); - // 6. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 7. - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 8. - cy.realPress(['Tab', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group').children('button').should('have.length', 5); - // 9. - cy.realPress(['Shift', 'Tab']); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/piraeus/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Piraeus")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/piraeus/i); - // 10. - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/piraeus/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Piraeus")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/piraeus/i); - }); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/sparta/i); + // 4. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 5. + cy.realPress(['Shift', 'Tab']); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/athens/i); + // 6. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 7. + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 8. + cy.realPress(['Tab', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group').children('button').should('have.length', 5); + // 9. + cy.realPress(['Shift', 'Tab']); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/piraeus/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Piraeus")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/piraeus/i); + // 10. + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/piraeus/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Piraeus")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/piraeus/i); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single-nullable.cy.ts b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single-nullable.cy.ts index 78034a1a3..3786b07e5 100644 --- a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single-nullable.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single-nullable.cy.ts @@ -1,26 +1,26 @@ describe('toggle--toggle-group-single-nullable', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=toggle--toggle-group-single-nullable'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=toggle--toggle-group-single-nullable'); + cy.injectAxe(); + }); - const verifyToggleGroupSetup = () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText(/City selected/i).contains(/no city/i); - cy.findByRole('group').should('exist'); - cy.findByRole('group').children('button').should('have.length', 4); - cy.findByRole('group') - .children('button') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - }; + const verifyToggleGroupSetup = () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText(/City selected/i).contains(/no city/i); + cy.findByRole('group').should('exist'); + cy.findByRole('group').children('button').should('have.length', 4); + cy.findByRole('group') + .children('button') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + }; - it(` + it(` 1. should have no city selected by default. 2. should have toggle-group with role=group and 4 buttons all toggled off. 3. click on sparta should select sparta. @@ -28,61 +28,61 @@ describe('toggle--toggle-group-single-nullable', () => { 5. click on athens should unselect syracuse and select athens 6. click on set-to-syracuse button should unselect athens and select syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.findByRole('group') - .findByText(/sparta/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/sparta/i); - // 4. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 5. - cy.findByRole('group') - .findByText(/athens/i) - .click(); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/athens/i); - // 6. - cy.findByText(/set to syracuse/i).click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.findByRole('group') + .findByText(/sparta/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/sparta/i); + // 4. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 5. + cy.findByRole('group') + .findByText(/athens/i) + .click(); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/athens/i); + // 6. + cy.findByText(/set to syracuse/i).click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + }); - it(` + it(` 1. should have no city selected by default. 2. should have toggle-group with role=group and 4 buttons all toggled off. 3. tab to and space on sparta should select sparta. @@ -90,61 +90,61 @@ describe('toggle--toggle-group-single-nullable', () => { 5. tab to and space on athens should unselect syracuse and select athens 6. tab to and enter on set-to-syracuse button should unselect athens and select syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/sparta/i); - // 4. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 5. - cy.realPress(['Shift', 'Tab']); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/athens/i); - // 6. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - }); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/sparta/i); + // 4. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 5. + cy.realPress(['Shift', 'Tab']); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/athens/i); + // 6. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single.cy.ts b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single.cy.ts index 32d1622b0..7c34610d9 100644 --- a/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single.cy.ts +++ b/apps/ui-storybook-e2e/src/integration/toggle/toggle--toggle-group-single.cy.ts @@ -1,31 +1,31 @@ describe('toggle--toggle-group-single', () => { - describe('default', () => { - beforeEach(() => { - cy.visit('/iframe.html?id=toggle--toggle-group-single'); - cy.injectAxe(); - }); + describe('default', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=toggle--toggle-group-single'); + cy.injectAxe(); + }); - const verifyToggleGroupSetup = () => { - cy.checkA11y('#storybook-root', { - rules: { - 'page-has-heading-one': { enabled: false }, - 'landmark-one-main': { enabled: false }, - }, - }); - cy.findByText(/City selected/i).contains(/sparta/i); - cy.findByRole('group').should('exist'); - cy.findByRole('group').children('button').should('have.length', 4); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - }; + const verifyToggleGroupSetup = () => { + cy.checkA11y('#storybook-root', { + rules: { + 'page-has-heading-one': { enabled: false }, + 'landmark-one-main': { enabled: false }, + }, + }); + cy.findByText(/City selected/i).contains(/sparta/i); + cy.findByRole('group').should('exist'); + cy.findByRole('group').children('button').should('have.length', 4); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + }; - it(` + it(` 1. should sparta selected by default. 2. should have toggle-group with role=group and 3 buttons toggled off and sparta toggled on. 3. click on sparta should not unselect sparta. @@ -34,74 +34,74 @@ describe('toggle--toggle-group-single', () => { 6. click on set-to-syracuse button should unselect athens and select syracuse 7. click on syracuse should not unselect syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.findByRole('group') - .findByText(/sparta/i) - .click(); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/sparta/i); - // 4. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 5. - cy.findByRole('group') - .findByText(/athens/i) - .click(); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/athens/i); - // 6. - cy.findByText(/set to syracuse/i).click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 7. - cy.findByRole('group') - .findByText(/syracuse/i) - .click(); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.findByRole('group') + .findByText(/sparta/i) + .click(); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/sparta/i); + // 4. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 5. + cy.findByRole('group') + .findByText(/athens/i) + .click(); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/athens/i); + // 6. + cy.findByText(/set to syracuse/i).click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 7. + cy.findByRole('group') + .findByText(/syracuse/i) + .click(); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + }); - it(` + it(` 1. should sparta selected by default. 2. should have toggle-group with role=group and 3 buttons toggled off and sparta toggled on. 3. tab to and space on sparta should not unselect sparta. @@ -110,73 +110,73 @@ describe('toggle--toggle-group-single', () => { 6. tab to and enter on set-to-syracuse button should unselect athens and select syracuse 7. tab to and space on syracuse should not unselect syracuse `, () => { - // 1. + 2. - verifyToggleGroupSetup(); - //3. - cy.realPress('Tab'); - cy.realPress('Space'); - cy.findByRole('group') - .findByText(/sparta/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Sparta")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/sparta/i); - // 4. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 5. - cy.realPress(['Shift', 'Tab']); - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/athens/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Athens")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/athens/i); - // 6. - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Tab'); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - // 7. - cy.realPress(['Shift', 'Tab']); - cy.realPress('Enter'); - cy.findByRole('group') - .findByText(/syracuse/i) - .should('have.attr', 'aria-pressed', 'true') - .should('have.attr', 'data-state', 'on'); - cy.findByRole('group') - .children('button') - .not(':contains("Syracuse")') - .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); - cy.findByText(/City selected/i).contains(/syracuse/i); - }); - }); + // 1. + 2. + verifyToggleGroupSetup(); + //3. + cy.realPress('Tab'); + cy.realPress('Space'); + cy.findByRole('group') + .findByText(/sparta/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Sparta")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/sparta/i); + // 4. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 5. + cy.realPress(['Shift', 'Tab']); + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/athens/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Athens")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/athens/i); + // 6. + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Tab'); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + // 7. + cy.realPress(['Shift', 'Tab']); + cy.realPress('Enter'); + cy.findByRole('group') + .findByText(/syracuse/i) + .should('have.attr', 'aria-pressed', 'true') + .should('have.attr', 'data-state', 'on'); + cy.findByRole('group') + .children('button') + .not(':contains("Syracuse")') + .each((btn) => cy.wrap(btn).should('have.attr', 'aria-pressed', 'false')); + cy.findByText(/City selected/i).contains(/syracuse/i); + }); + }); }); diff --git a/apps/ui-storybook-e2e/src/support/commands.ts b/apps/ui-storybook-e2e/src/support/commands.ts index 310f1fa0e..2ed30cb01 100644 --- a/apps/ui-storybook-e2e/src/support/commands.ts +++ b/apps/ui-storybook-e2e/src/support/commands.ts @@ -10,15 +10,15 @@ // eslint-disable-next-line @typescript-eslint/no-namespace declare namespace Cypress { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface Chainable { - login(email: string, password: string): void; - } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface Chainable { + login(email: string, password: string): void; + } } // // -- This is a parent command -- Cypress.Commands.add('login', (email, password) => { - console.log('Custom command example: Login', email, password); + console.log('Custom command example: Login', email, password); }); // // -- This is a child command -- diff --git a/apps/ui-storybook-e2e/src/support/e2e.ts b/apps/ui-storybook-e2e/src/support/e2e.ts index 981985c8f..9a80e79d5 100644 --- a/apps/ui-storybook-e2e/src/support/e2e.ts +++ b/apps/ui-storybook-e2e/src/support/e2e.ts @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands'; import '@testing-library/cypress/add-commands'; import 'cypress-axe'; import 'cypress-real-events'; +import './commands'; diff --git a/apps/ui-storybook-e2e/tsconfig.json b/apps/ui-storybook-e2e/tsconfig.json index a5528fdfd..7ce6696cf 100644 --- a/apps/ui-storybook-e2e/tsconfig.json +++ b/apps/ui-storybook-e2e/tsconfig.json @@ -1,10 +1,10 @@ { - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "sourceMap": false, - "outDir": "../../dist/out-tsc", - "allowJs": true, - "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"] - }, - "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"] + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "sourceMap": false, + "outDir": "../../dist/out-tsc", + "allowJs": true, + "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"] + }, + "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"] } diff --git a/commitlint.config.js b/commitlint.config.js index 93cc1e183..c106c6d51 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -1,55 +1,55 @@ module.exports = { - extends: ['@commitlint/config-conventional'], - rules: { - 'body-leading-blank': [2, 'always'], - 'footer-leading-blank': [2, 'always'], - 'scope-enum': [ - 2, - 'always', - [ - 'accordion', - 'alert', - 'alert-dialog', - 'aspect-ratio', - 'avatar', - 'badge', - 'button', - 'calendar', - 'card', - 'checkbox', - 'collapsible', - 'combobox', - 'command', - 'context-menu', - 'data-table', - 'date-picker', - 'dialog', - 'dropdown-menu', - 'hover-card', - 'icon', - 'input', - 'label', - 'menubar', - 'navigation-menu', - 'popover', - 'progress', - 'radio-group', - 'scroll-area', - 'select', - 'separator', - 'sheet', - 'skeleton', - 'slider', - 'switch', - 'table', - 'tabs', - 'textarea', - 'toast', - 'toggle', - 'tooltip', - 'typography', - 'nx', - ], - ], - }, + extends: ['@commitlint/config-conventional'], + rules: { + 'body-leading-blank': [2, 'always'], + 'footer-leading-blank': [2, 'always'], + 'scope-enum': [ + 2, + 'always', + [ + 'accordion', + 'alert', + 'alert-dialog', + 'aspect-ratio', + 'avatar', + 'badge', + 'button', + 'calendar', + 'card', + 'checkbox', + 'collapsible', + 'combobox', + 'command', + 'context-menu', + 'data-table', + 'date-picker', + 'dialog', + 'dropdown-menu', + 'hover-card', + 'icon', + 'input', + 'label', + 'menubar', + 'navigation-menu', + 'popover', + 'progress', + 'radio-group', + 'scroll-area', + 'select', + 'separator', + 'sheet', + 'skeleton', + 'slider', + 'switch', + 'table', + 'tabs', + 'textarea', + 'toast', + 'toggle', + 'tooltip', + 'typography', + 'nx', + ], + ], + }, }; diff --git a/jest.config.ts b/jest.config.ts index d0dbd1b88..54de98bbd 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -1,5 +1,5 @@ import { getJestProjects } from '@nx/jest'; export default { - projects: getJestProjects(), + projects: getJestProjects(), }; diff --git a/libs/nx/.eslintrc.json b/libs/nx/.eslintrc.json index 7abd30b88..46855176d 100644 --- a/libs/nx/.eslintrc.json +++ b/libs/nx/.eslintrc.json @@ -1,25 +1,25 @@ { - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["./package.json", "./executors.json"], - "parser": "jsonc-eslint-parser", - "rules": { - "@nx/nx-plugin-checks": "error" - } - } - ] + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["./package.json", "./executors.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/nx-plugin-checks": "error" + } + } + ] } diff --git a/libs/nx/executors.json b/libs/nx/executors.json index 3a64718e9..09bd92ffd 100644 --- a/libs/nx/executors.json +++ b/libs/nx/executors.json @@ -1,3 +1,3 @@ { - "executors": {} + "executors": {} } diff --git a/libs/nx/generators.json b/libs/nx/generators.json index 502196bf5..44016eda3 100644 --- a/libs/nx/generators.json +++ b/libs/nx/generators.json @@ -1,14 +1,14 @@ { - "generators": { - "ui": { - "factory": "./src/generators/ui/generator", - "schema": "./src/generators/ui/schema.json", - "description": "spartan-ng ui generator" - }, - "ui-theme": { - "factory": "./src/generators/theme/generator", - "schema": "./src/generators/theme/schema.json", - "description": "spartan-ng theme generator" - } - } + "generators": { + "ui": { + "factory": "./src/generators/ui/generator", + "schema": "./src/generators/ui/schema.json", + "description": "spartan-ng ui generator" + }, + "ui-theme": { + "factory": "./src/generators/theme/generator", + "schema": "./src/generators/theme/schema.json", + "description": "spartan-ng theme generator" + } + } } diff --git a/libs/nx/jest.config.ts b/libs/nx/jest.config.ts index 39442df61..0a2973a45 100644 --- a/libs/nx/jest.config.ts +++ b/libs/nx/jest.config.ts @@ -1,10 +1,10 @@ /* eslint-disable */ export default { - displayName: 'nx', - preset: '../../jest.preset.js', - transform: { - '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], - }, - moduleFileExtensions: ['ts', 'js', 'html'], - coverageDirectory: '../../coverage/libs/nx', + displayName: 'nx', + preset: '../../jest.preset.js', + transform: { + '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], + }, + moduleFileExtensions: ['ts', 'js', 'html'], + coverageDirectory: '../../coverage/libs/nx', }; diff --git a/libs/nx/package.json b/libs/nx/package.json index 2a9acbe28..2b3dd0ddd 100644 --- a/libs/nx/package.json +++ b/libs/nx/package.json @@ -1,18 +1,18 @@ { - "name": "@spartan-ng/nx", - "version": "0.0.1-alpha.318", - "type": "commonjs", - "dependencies": { - "@nx/devkit": "17.1.2", - "enquirer": "2.3.6", - "semver": "7.5.4" - }, - "peerDependencies": { - "tslib": "^2.3.0" - }, - "executors": "./executors.json", - "generators": "./generators.json", - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/nx", + "version": "0.0.1-alpha.318", + "type": "commonjs", + "dependencies": { + "@nx/devkit": "17.1.2", + "enquirer": "2.3.6", + "semver": "7.5.4" + }, + "peerDependencies": { + "tslib": "^2.3.0" + }, + "executors": "./executors.json", + "generators": "./generators.json", + "publishConfig": { + "access": "public" + } } diff --git a/libs/nx/project.json b/libs/nx/project.json index 313e13c75..a388f0266 100644 --- a/libs/nx/project.json +++ b/libs/nx/project.json @@ -1,61 +1,61 @@ { - "name": "nx", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/nx/src", - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/js:tsc", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/libs/nx", - "main": "libs/nx/src/index.ts", - "tsConfig": "libs/nx/tsconfig.lib.json", - "assets": [ - "libs/nx/*.md", - { - "input": "./libs/nx/src", - "glob": "**/!(*.ts)", - "output": "./src" - }, - { - "input": "./libs/nx/src", - "glob": "**/*.d.ts", - "output": "./src" - }, - { - "input": "./libs/nx", - "glob": "generators.json", - "output": "." - }, - { - "input": "./libs/nx", - "glob": "executors.json", - "output": "." - } - ] - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["libs/nx/**/*.ts", "libs/nx/package.json", "libs/nx/executors.json"] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/nx/jest.config.ts" - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "nx" - } - } - }, - "tags": ["scope:nx"] + "name": "nx", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/nx/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/js:tsc", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/nx", + "main": "libs/nx/src/index.ts", + "tsConfig": "libs/nx/tsconfig.lib.json", + "assets": [ + "libs/nx/*.md", + { + "input": "./libs/nx/src", + "glob": "**/!(*.ts)", + "output": "./src" + }, + { + "input": "./libs/nx/src", + "glob": "**/*.d.ts", + "output": "./src" + }, + { + "input": "./libs/nx", + "glob": "generators.json", + "output": "." + }, + { + "input": "./libs/nx", + "glob": "executors.json", + "output": "." + } + ] + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/nx/**/*.ts", "libs/nx/package.json", "libs/nx/executors.json"] + } + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/nx/jest.config.ts" + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "nx" + } + } + }, + "tags": ["scope:nx"] } diff --git a/libs/nx/src/generators/base/generator.ts b/libs/nx/src/generators/base/generator.ts index 0393a62d8..51f63c9a1 100644 --- a/libs/nx/src/generators/base/generator.ts +++ b/libs/nx/src/generators/base/generator.ts @@ -1,31 +1,31 @@ import { addDependenciesToPackageJson, generateFiles, GeneratorCallback, runTasksInSerial, Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from './schema'; import * as path from 'path'; -import { initializeAngularLibrary } from './lib/initialize-angular-library'; +import { getInstalledPackageVersion } from '../../utils/version-utils'; import { buildDependencyArray, buildDevDependencyArray } from './lib/build-dependency-array'; import { getTargetLibraryDirectory } from './lib/get-target-library-directory'; -import { getInstalledPackageVersion } from '../../utils/version-utils'; +import { initializeAngularLibrary } from './lib/initialize-angular-library'; +import { HlmBaseGeneratorSchema } from './schema'; import { FALLBACK_ANGULAR_VERSION } from './versions'; export async function hlmBaseGenerator(tree: Tree, options: HlmBaseGeneratorSchema) { - const tasks: GeneratorCallback[] = []; - const targetLibDir = getTargetLibraryDirectory(options, tree); - tasks.push(await initializeAngularLibrary(tree, options)); + const tasks: GeneratorCallback[] = []; + const targetLibDir = getTargetLibraryDirectory(options, tree); + tasks.push(await initializeAngularLibrary(tree, options)); - generateFiles( - tree, - path.join(__dirname, '..', 'ui', 'libs', options.internalName, 'files'), - path.join(targetLibDir, 'src'), - options - ); + generateFiles( + tree, + path.join(__dirname, '..', 'ui', 'libs', options.internalName, 'files'), + path.join(targetLibDir, 'src'), + options, + ); - const angularVersion = getInstalledPackageVersion(tree, '@angular/core', FALLBACK_ANGULAR_VERSION, true); - const existingCdkVersion = getInstalledPackageVersion(tree, '@angular/cdk', FALLBACK_ANGULAR_VERSION, true); - const dependencies = buildDependencyArray(options, angularVersion, existingCdkVersion); - const devDependencies = buildDevDependencyArray(); + const angularVersion = getInstalledPackageVersion(tree, '@angular/core', FALLBACK_ANGULAR_VERSION, true); + const existingCdkVersion = getInstalledPackageVersion(tree, '@angular/cdk', FALLBACK_ANGULAR_VERSION, true); + const dependencies = buildDependencyArray(options, angularVersion, existingCdkVersion); + const devDependencies = buildDevDependencyArray(); - tasks.push(addDependenciesToPackageJson(tree, dependencies, devDependencies)); - return runTasksInSerial(...tasks); + tasks.push(addDependenciesToPackageJson(tree, dependencies, devDependencies)); + return runTasksInSerial(...tasks); } export default hlmBaseGenerator; diff --git a/libs/nx/src/generators/base/lib/build-dependency-array.ts b/libs/nx/src/generators/base/lib/build-dependency-array.ts index e31d58e86..f856492de 100644 --- a/libs/nx/src/generators/base/lib/build-dependency-array.ts +++ b/libs/nx/src/generators/base/lib/build-dependency-array.ts @@ -1,79 +1,79 @@ import { HlmBaseGeneratorSchema } from '../schema'; import { - NG_ICONS_VERSION, - SPARTAN_ACCORDION_BRAIN_VERSION, - SPARTAN_ALERT_DIALOG_BRAIN_VERSION, - SPARTAN_AVATAR_BRAIN_VERSION, - SPARTAN_COMMAND_BRAIN_VERSION, - SPARTAN_CORE_VERSION, - SPARTAN_DIALOG_BRAIN_VERSION, - SPARTAN_HOVERCARD_BRAIN_VERSION, - SPARTAN_MENU_BRAIN_VERSION, - SPARTAN_POPOVER_BRAIN_VERSION, - SPARTAN_PROGRESS_BRAIN_VERSION, - SPARTAN_RADIO_GROUP_BRAIN_VERSION, - SPARTAN_SEPARATOR_BRAIN_VERSION, - SPARTAN_SHEET_BRAIN_VERSION, - SPARTAN_SWITCH_VERSION, - SPARTAN_TABLE_VERSION, - SPARTAN_TABS_VERSION, - SPARTAN_TOGGLE_VERSION, - TAILWIND_ANIMATE_VERSION, - TAILWIND_MERGE_VERSION, - TAILWINDCSS_VERSION, + NG_ICONS_VERSION, + SPARTAN_ACCORDION_BRAIN_VERSION, + SPARTAN_ALERT_DIALOG_BRAIN_VERSION, + SPARTAN_AVATAR_BRAIN_VERSION, + SPARTAN_COMMAND_BRAIN_VERSION, + SPARTAN_CORE_VERSION, + SPARTAN_DIALOG_BRAIN_VERSION, + SPARTAN_HOVERCARD_BRAIN_VERSION, + SPARTAN_MENU_BRAIN_VERSION, + SPARTAN_POPOVER_BRAIN_VERSION, + SPARTAN_PROGRESS_BRAIN_VERSION, + SPARTAN_RADIO_GROUP_BRAIN_VERSION, + SPARTAN_SEPARATOR_BRAIN_VERSION, + SPARTAN_SHEET_BRAIN_VERSION, + SPARTAN_SWITCH_VERSION, + SPARTAN_TABLE_VERSION, + SPARTAN_TABS_VERSION, + SPARTAN_TOGGLE_VERSION, + TAILWIND_ANIMATE_VERSION, + TAILWIND_MERGE_VERSION, + TAILWINDCSS_VERSION, } from '../versions'; const BRAIN_DEPENDENCY_MAP = { - accordion: SPARTAN_ACCORDION_BRAIN_VERSION, - alertdialog: SPARTAN_ALERT_DIALOG_BRAIN_VERSION, - avatar: SPARTAN_AVATAR_BRAIN_VERSION, - command: SPARTAN_COMMAND_BRAIN_VERSION, - dialog: SPARTAN_DIALOG_BRAIN_VERSION, - hovercard: SPARTAN_HOVERCARD_BRAIN_VERSION, - menu: SPARTAN_MENU_BRAIN_VERSION, - popover: SPARTAN_POPOVER_BRAIN_VERSION, - progress: SPARTAN_PROGRESS_BRAIN_VERSION, - radiogroup: SPARTAN_RADIO_GROUP_BRAIN_VERSION, - separator: SPARTAN_SEPARATOR_BRAIN_VERSION, - sheet: SPARTAN_SHEET_BRAIN_VERSION, - switch: SPARTAN_SWITCH_VERSION, - tabs: SPARTAN_TABS_VERSION, - table: SPARTAN_TABLE_VERSION, - toggle: SPARTAN_TOGGLE_VERSION, + accordion: SPARTAN_ACCORDION_BRAIN_VERSION, + alertdialog: SPARTAN_ALERT_DIALOG_BRAIN_VERSION, + avatar: SPARTAN_AVATAR_BRAIN_VERSION, + command: SPARTAN_COMMAND_BRAIN_VERSION, + dialog: SPARTAN_DIALOG_BRAIN_VERSION, + hovercard: SPARTAN_HOVERCARD_BRAIN_VERSION, + menu: SPARTAN_MENU_BRAIN_VERSION, + popover: SPARTAN_POPOVER_BRAIN_VERSION, + progress: SPARTAN_PROGRESS_BRAIN_VERSION, + radiogroup: SPARTAN_RADIO_GROUP_BRAIN_VERSION, + separator: SPARTAN_SEPARATOR_BRAIN_VERSION, + sheet: SPARTAN_SHEET_BRAIN_VERSION, + switch: SPARTAN_SWITCH_VERSION, + tabs: SPARTAN_TABS_VERSION, + table: SPARTAN_TABLE_VERSION, + toggle: SPARTAN_TOGGLE_VERSION, }; const DEPENDENT_ON_DIALOG = ['alertdialog', 'sheet', 'popover']; export function buildDependencyArray( - options: HlmBaseGeneratorSchema, - angularVersion: string, - existingCdkVersion: string + options: HlmBaseGeneratorSchema, + angularVersion: string, + existingCdkVersion: string, ) { - let dependencies: Record = { - '@spartan-ng/ui-core': SPARTAN_CORE_VERSION, - '@angular/cdk': existingCdkVersion ?? angularVersion, - }; + let dependencies: Record = { + '@spartan-ng/ui-core': SPARTAN_CORE_VERSION, + '@angular/cdk': existingCdkVersion ?? angularVersion, + }; - if (options.peerDependencies) { - dependencies = { ...dependencies, ...options.peerDependencies }; - } - const brainDependencyVersion = BRAIN_DEPENDENCY_MAP[options.primitiveName]; - if (brainDependencyVersion) { - dependencies = { ...dependencies, ['@spartan-ng/ui-' + options.primitiveName + '-brain']: brainDependencyVersion }; - } - if (brainDependencyVersion && DEPENDENT_ON_DIALOG.includes(options.primitiveName)) { - dependencies = { ...dependencies, ['@spartan-ng/ui-dialog-brain']: brainDependencyVersion }; - } - if (options.primitiveName === 'icon') { - dependencies = { ...dependencies, '@ng-icons/core': NG_ICONS_VERSION }; - } - return dependencies; + if (options.peerDependencies) { + dependencies = { ...dependencies, ...options.peerDependencies }; + } + const brainDependencyVersion = BRAIN_DEPENDENCY_MAP[options.primitiveName]; + if (brainDependencyVersion) { + dependencies = { ...dependencies, ['@spartan-ng/ui-' + options.primitiveName + '-brain']: brainDependencyVersion }; + } + if (brainDependencyVersion && DEPENDENT_ON_DIALOG.includes(options.primitiveName)) { + dependencies = { ...dependencies, ['@spartan-ng/ui-dialog-brain']: brainDependencyVersion }; + } + if (options.primitiveName === 'icon') { + dependencies = { ...dependencies, '@ng-icons/core': NG_ICONS_VERSION }; + } + return dependencies; } export function buildDevDependencyArray() { - return { - 'tailwind-merge': TAILWIND_MERGE_VERSION, - tailwindcss: TAILWINDCSS_VERSION, - 'tailwindcss-animate': TAILWIND_ANIMATE_VERSION, - }; + return { + 'tailwind-merge': TAILWIND_MERGE_VERSION, + tailwindcss: TAILWINDCSS_VERSION, + 'tailwindcss-animate': TAILWIND_ANIMATE_VERSION, + }; } diff --git a/libs/nx/src/generators/base/lib/get-target-library-directory.ts b/libs/nx/src/generators/base/lib/get-target-library-directory.ts index 7b3cc2948..95883b083 100644 --- a/libs/nx/src/generators/base/lib/get-target-library-directory.ts +++ b/libs/nx/src/generators/base/lib/get-target-library-directory.ts @@ -1,9 +1,9 @@ -import { HlmBaseGeneratorSchema } from '../schema'; import { extractLayoutDirectory, getWorkspaceLayout, Tree } from '@nx/devkit'; import * as path from 'path'; +import { HlmBaseGeneratorSchema } from '../schema'; export function getTargetLibraryDirectory(options: HlmBaseGeneratorSchema, tree: Tree) { - const { layoutDirectory, projectDirectory } = extractLayoutDirectory(options.directory); - const libsDir = options.rootProject ? '.' : layoutDirectory ?? getWorkspaceLayout(tree).libsDir; - return path.join(libsDir, projectDirectory, options.publicName); + const { layoutDirectory, projectDirectory } = extractLayoutDirectory(options.directory); + const libsDir = options.rootProject ? '.' : layoutDirectory ?? getWorkspaceLayout(tree).libsDir; + return path.join(libsDir, projectDirectory, options.publicName); } diff --git a/libs/nx/src/generators/base/lib/initialize-angular-library.ts b/libs/nx/src/generators/base/lib/initialize-angular-library.ts index 1d0650fd9..4352efcf8 100644 --- a/libs/nx/src/generators/base/lib/initialize-angular-library.ts +++ b/libs/nx/src/generators/base/lib/initialize-angular-library.ts @@ -2,21 +2,21 @@ import { Tree } from '@nx/devkit'; import { HlmBaseGeneratorSchema } from '../schema'; export async function initializeAngularLibrary(tree: Tree, options: HlmBaseGeneratorSchema) { - return await ( - await import( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - '@nx/angular/generators' - ) - ).libraryGenerator(tree, { - name: options.publicName, - skipFormat: true, - simpleName: true, - buildable: true, - importPath: '@spartan-ng/' + options.publicName, - prefix: 'hlm', - skipModule: true, - directory: options.directory, - tags: options.tags, - }); + return await ( + await import( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + '@nx/angular/generators' + ) + ).libraryGenerator(tree, { + name: options.publicName, + skipFormat: true, + simpleName: true, + buildable: true, + importPath: '@spartan-ng/' + options.publicName, + prefix: 'hlm', + skipModule: true, + directory: options.directory, + tags: options.tags, + }); } diff --git a/libs/nx/src/generators/base/schema.d.ts b/libs/nx/src/generators/base/schema.d.ts index fe2385221..5afeac2d5 100644 --- a/libs/nx/src/generators/base/schema.d.ts +++ b/libs/nx/src/generators/base/schema.d.ts @@ -1,10 +1,10 @@ export interface HlmBaseGeneratorSchema { - primitiveName: string; - internalName: string; - publicName: string; - directory?: string; - rootProject?: boolean; - tags?: string; - peerDependencies?: Record; - skipBrainDependencies?: boolean; + primitiveName: string; + internalName: string; + publicName: string; + directory?: string; + rootProject?: boolean; + tags?: string; + peerDependencies?: Record; + skipBrainDependencies?: boolean; } diff --git a/libs/nx/src/generators/base/schema.json b/libs/nx/src/generators/base/schema.json index 87aeb273d..d173d55f9 100644 --- a/libs/nx/src/generators/base/schema.json +++ b/libs/nx/src/generators/base/schema.json @@ -1,17 +1,17 @@ { - "$schema": "http://json-schema.org/schema", - "$id": "HlmBaseGeneratorSchema", - "title": "", - "type": "object", - "properties": { - "directory": { - "type": "string", - "description": "A directory where the lib is placed.", - "x-priority": "important" - }, - "tags": { - "type": "string", - "description": "Add tags to the library (used for linting)." - } - } + "$schema": "http://json-schema.org/schema", + "$id": "HlmBaseGeneratorSchema", + "title": "", + "type": "object", + "properties": { + "directory": { + "type": "string", + "description": "A directory where the lib is placed.", + "x-priority": "important" + }, + "tags": { + "type": "string", + "description": "Add tags to the library (used for linting)." + } + } } diff --git a/libs/nx/src/generators/theme/generator.ts b/libs/nx/src/generators/theme/generator.ts index 7282421d1..f4ee131d6 100644 --- a/libs/nx/src/generators/theme/generator.ts +++ b/libs/nx/src/generators/theme/generator.ts @@ -1,70 +1,70 @@ import { ProjectConfiguration, Tree } from '@nx/devkit'; import { prompt } from 'enquirer'; -import { addThemeToApplicationStyles } from './libs/add-theme-to-application-styles'; import { getProjectsAndNames } from '../../utils/get-project-names'; +import { addThemeToApplicationStyles } from './libs/add-theme-to-application-styles'; import { SupportedRadii, SupportedTheme, SupportedThemes } from './libs/supported-theme-generator-map'; export default async function addThemeToApplicationGenerator(tree: Tree) { - const { projects, projectNames } = getProjectsAndNames(tree); + const { projects, projectNames } = getProjectsAndNames(tree); - const response: { app: string } = await prompt({ - type: 'select', - required: true, - name: 'app', - message: 'Choose which application you want to add the theme to:', - choices: projectNames, - }); - const project: ProjectConfiguration | undefined = projects.get(response.app); + const response: { app: string } = await prompt({ + type: 'select', + required: true, + name: 'app', + message: 'Choose which application you want to add the theme to:', + choices: projectNames, + }); + const project: ProjectConfiguration | undefined = projects.get(response.app); - if (!project) return; + if (!project) return; - const themeOptions: { - theme: SupportedTheme; - radius: string; - addCdkStyles: boolean; - stylesEntryPoint?: string; - prefix?: string; - } = await prompt([ - { - type: 'select', - required: true, - name: 'theme', - message: - 'Choose which theme to apply. You can always re-run this generator and add a custom prefix to add other themes.', - choices: SupportedThemes, - }, - { - type: 'select', - required: true, - name: 'radius', - initial: 2, - message: 'Which corner radius do you want to use with your theme:', - choices: [...SupportedRadii], - }, - { - type: 'input', - name: 'stylesEntryPoint', - message: - "Path to the styles entry point relative to the workspace root. If not provided the generator will do its best to find it and it will error if it can't.", - }, - { - type: 'input', - name: 'prefix', - message: - "Prefix class name applied to your theme's style definitions: e.g., theme-rose, theme-zinc. Leave empty for global theme.", - }, - ]); + const themeOptions: { + theme: SupportedTheme; + radius: string; + addCdkStyles: boolean; + stylesEntryPoint?: string; + prefix?: string; + } = await prompt([ + { + type: 'select', + required: true, + name: 'theme', + message: + 'Choose which theme to apply. You can always re-run this generator and add a custom prefix to add other themes.', + choices: SupportedThemes, + }, + { + type: 'select', + required: true, + name: 'radius', + initial: 2, + message: 'Which corner radius do you want to use with your theme:', + choices: [...SupportedRadii], + }, + { + type: 'input', + name: 'stylesEntryPoint', + message: + "Path to the styles entry point relative to the workspace root. If not provided the generator will do its best to find it and it will error if it can't.", + }, + { + type: 'input', + name: 'prefix', + message: + "Prefix class name applied to your theme's style definitions: e.g., theme-rose, theme-zinc. Leave empty for global theme.", + }, + ]); - addThemeToApplicationStyles( - tree, - { - project: project.name, - radius: parseFloat(themeOptions.radius), - theme: themeOptions.theme, - addCdkStyles: themeOptions.addCdkStyles, - stylesEntryPoint: themeOptions.stylesEntryPoint, - prefix: themeOptions.prefix, - }, - project - ); + addThemeToApplicationStyles( + tree, + { + project: project.name, + radius: parseFloat(themeOptions.radius), + theme: themeOptions.theme, + addCdkStyles: themeOptions.addCdkStyles, + stylesEntryPoint: themeOptions.stylesEntryPoint, + prefix: themeOptions.prefix, + }, + project, + ); } diff --git a/libs/nx/src/generators/theme/libs/add-theme-to-application-styles.ts b/libs/nx/src/generators/theme/libs/add-theme-to-application-styles.ts index 528b9fe32..fbf030651 100644 --- a/libs/nx/src/generators/theme/libs/add-theme-to-application-styles.ts +++ b/libs/nx/src/generators/theme/libs/add-theme-to-application-styles.ts @@ -5,91 +5,91 @@ import { joinPathFragments, ProjectConfiguration, stripIndents, Tree } from '@nx import { SupportedTheme, SupportedThemeGeneratorMap } from './supported-theme-generator-map'; export interface AddThemeToApplicationStylesOptions { - project: string; - theme: SupportedTheme; - radius: number; - addCdkStyles: boolean; - stylesEntryPoint?: string; - prefix?: string; + project: string; + theme: SupportedTheme; + radius: number; + addCdkStyles: boolean; + stylesEntryPoint?: string; + prefix?: string; } export function addThemeToApplicationStyles( - tree: Tree, - options: AddThemeToApplicationStylesOptions, - project: ProjectConfiguration + tree: Tree, + options: AddThemeToApplicationStylesOptions, + project: ProjectConfiguration, ): void { - const prefix = options.prefix ? ` .${options.prefix}` : ''; - let stylesEntryPoint = options.stylesEntryPoint; + const prefix = options.prefix ? ` .${options.prefix}` : ''; + let stylesEntryPoint = options.stylesEntryPoint; - if (stylesEntryPoint && !tree.exists(stylesEntryPoint)) { - throw new Error(`The provided styles entry point "${stylesEntryPoint}" could not be found.`); - } + if (stylesEntryPoint && !tree.exists(stylesEntryPoint)) { + throw new Error(`The provided styles entry point "${stylesEntryPoint}" could not be found.`); + } - if (!stylesEntryPoint) { - stylesEntryPoint = findStylesEntryPoint(tree, project); + if (!stylesEntryPoint) { + stylesEntryPoint = findStylesEntryPoint(tree, project); - if (!stylesEntryPoint) { - throw new Error( - stripIndents`Could not find a styles entry point for project "${options.project}". - Please specify a styles entry point using the "stylesEntryPoint" option.` - ); - } - } + if (!stylesEntryPoint) { + throw new Error( + stripIndents`Could not find a styles entry point for project "${options.project}". + Please specify a styles entry point using the "stylesEntryPoint" option.`, + ); + } + } - const stylesEntryPointContent = tree.read(stylesEntryPoint, 'utf-8'); + const stylesEntryPointContent = tree.read(stylesEntryPoint, 'utf-8'); - const CDK_IMPORT = `@import '@angular/cdk/overlay-prebuilt.css';`; - const ckdOverlayImport = stylesEntryPointContent.includes(CDK_IMPORT) ? '' : CDK_IMPORT; + const CDK_IMPORT = `@import '@angular/cdk/overlay-prebuilt.css';`; + const ckdOverlayImport = stylesEntryPointContent.includes(CDK_IMPORT) ? '' : CDK_IMPORT; - const rootFontSans = stylesEntryPointContent.includes('--font-sans') - ? '' - : `:root { + const rootFontSans = stylesEntryPointContent.includes('--font-sans') + ? '' + : `:root { --font-sans: '' }`; - tree.write( - stylesEntryPoint, - stripIndents` + tree.write( + stylesEntryPoint, + stripIndents` ${ckdOverlayImport} ${stylesEntryPointContent} ${rootFontSans} - ${SupportedThemeGeneratorMap[options.theme](options.radius, prefix)}` - ); + ${SupportedThemeGeneratorMap[options.theme](options.radius, prefix)}`, + ); } function findStylesEntryPoint(tree: Tree, project: ProjectConfiguration): string | undefined { - // first check for common names - const possibleStylesEntryPoints = [ - joinPathFragments(project.sourceRoot ?? project.root, 'styles.css'), - joinPathFragments(project.sourceRoot ?? project.root, 'styles.scss'), - joinPathFragments(project.sourceRoot ?? project.root, 'styles.sass'), - joinPathFragments(project.sourceRoot ?? project.root, 'styles.less'), - ]; - - const stylesEntryPoint = possibleStylesEntryPoints.find((s) => tree.exists(s)); - if (stylesEntryPoint) { - return stylesEntryPoint; - } - - // then check for the specified styles in the build configuration if it exists - const styles: Array = project.targets?.['build'].options?.styles; - - if (!styles) { - return undefined; - } - - // find the first style that belongs to the project source - const style = styles.find((s) => - typeof s === 'string' - ? s.startsWith(project.root) && tree.exists(s) - : s.input.startsWith(project.root) && s.inject !== false && tree.exists(s.input) - ); - - if (!style) { - return undefined; - } - - return typeof style === 'string' ? style : style.input; + // first check for common names + const possibleStylesEntryPoints = [ + joinPathFragments(project.sourceRoot ?? project.root, 'styles.css'), + joinPathFragments(project.sourceRoot ?? project.root, 'styles.scss'), + joinPathFragments(project.sourceRoot ?? project.root, 'styles.sass'), + joinPathFragments(project.sourceRoot ?? project.root, 'styles.less'), + ]; + + const stylesEntryPoint = possibleStylesEntryPoints.find((s) => tree.exists(s)); + if (stylesEntryPoint) { + return stylesEntryPoint; + } + + // then check for the specified styles in the build configuration if it exists + const styles: Array = project.targets?.['build'].options?.styles; + + if (!styles) { + return undefined; + } + + // find the first style that belongs to the project source + const style = styles.find((s) => + typeof s === 'string' + ? s.startsWith(project.root) && tree.exists(s) + : s.input.startsWith(project.root) && s.inject !== false && tree.exists(s.input), + ); + + if (!style) { + return undefined; + } + + return typeof style === 'string' ? style : style.input; } diff --git a/libs/nx/src/generators/theme/libs/supported-theme-generator-map.ts b/libs/nx/src/generators/theme/libs/supported-theme-generator-map.ts index 60ff77f7e..255845b6d 100644 --- a/libs/nx/src/generators/theme/libs/supported-theme-generator-map.ts +++ b/libs/nx/src/generators/theme/libs/supported-theme-generator-map.ts @@ -1,5 +1,5 @@ export const SupportedThemeGeneratorMap = { - zinc: (radius: number, prefix = '') => ` + zinc: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -45,7 +45,7 @@ export const SupportedThemeGeneratorMap = { --ring: 240 4.9% 83.9%; } `, - slate: (radius: number, prefix = '') => ` + slate: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; @@ -91,7 +91,7 @@ export const SupportedThemeGeneratorMap = { --ring: 212.7 26.8% 83.9; } `, - stone: (radius: number, prefix = '') => ` + stone: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; @@ -137,7 +137,7 @@ export const SupportedThemeGeneratorMap = { --ring: 24 5.7% 82.9%; } `, - gray: (radius: number, prefix = '') => ` + gray: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 224 71.4% 4.1%; @@ -183,7 +183,7 @@ export const SupportedThemeGeneratorMap = { --ring: 216 12.2% 83.9%; } `, - neutral: (radius: number, prefix = '') => ` + neutral: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 0 0% 3.9%; @@ -229,7 +229,7 @@ export const SupportedThemeGeneratorMap = { --ring: 0 0% 83.1%; } `, - red: (radius: number, prefix = '') => ` + red: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 0 0% 3.9%; @@ -275,7 +275,7 @@ export const SupportedThemeGeneratorMap = { --ring: 0 72.2% 50.6%; } `, - rose: (radius: number, prefix = '') => ` + rose: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -321,7 +321,7 @@ export const SupportedThemeGeneratorMap = { --ring: 346.8 77.2% 49.8%; } `, - blue: (radius: number, prefix = '') => ` + blue: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -367,7 +367,7 @@ export const SupportedThemeGeneratorMap = { --ring: 346.8 77.2% 49.8%; } `, - green: (radius: number, prefix = '') => ` + green: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -413,7 +413,7 @@ export const SupportedThemeGeneratorMap = { --ring: 142.4 71.8% 29.2%; } `, - orange: (radius: number, prefix = '') => ` + orange: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; @@ -459,7 +459,7 @@ export const SupportedThemeGeneratorMap = { --ring: 20.5 90.2% 48.2%; } `, - yellow: (radius: number, prefix = '') => ` + yellow: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; @@ -505,7 +505,7 @@ export const SupportedThemeGeneratorMap = { --ring: 35.5 91.7% 32.9%; } `, - violet: (radius: number, prefix = '') => ` + violet: (radius: number, prefix = '') => ` :root${prefix} { --background: 0 0% 100%; --foreground: 224 71.4% 4.1%; diff --git a/libs/nx/src/generators/theme/schema.json b/libs/nx/src/generators/theme/schema.json index 17f5220c8..114d00acd 100644 --- a/libs/nx/src/generators/theme/schema.json +++ b/libs/nx/src/generators/theme/schema.json @@ -1,7 +1,7 @@ { - "$schema": "http://json-schema.org/schema", - "$id": "HlmThemeGeneratorSchema", - "title": "", - "type": "object", - "properties": {} + "$schema": "http://json-schema.org/schema", + "$id": "HlmThemeGeneratorSchema", + "title": "", + "type": "object", + "properties": {} } diff --git a/libs/nx/src/generators/ui/generator.ts b/libs/nx/src/generators/ui/generator.ts index 247f52577..7ff152c88 100644 --- a/libs/nx/src/generators/ui/generator.ts +++ b/libs/nx/src/generators/ui/generator.ts @@ -1,146 +1,146 @@ import { addDependenciesToPackageJson, GeneratorCallback, runTasksInSerial, Tree } from '@nx/devkit'; -import { HlmUIGeneratorSchema } from './schema'; import { prompt } from 'enquirer'; import { HlmBaseGeneratorSchema } from '../base/schema'; import { SPARTAN_COLLAPSIBLE_BRAIN_VERSION } from '../base/versions'; +import { HlmUIGeneratorSchema } from './schema'; export default async function hlmUIGenerator(tree: Tree, options: HlmUIGeneratorSchema) { - const tasks: GeneratorCallback[] = []; - const availablePrimitives = await import('./supported-ui-libraries.json'); - const availablePrimitiveNames = [...Object.keys(availablePrimitives), 'collapsible', 'menubar', 'contextmenu']; - let response: { primitives: string[] } = { primitives: [] }; - if (options.name && availablePrimitiveNames.includes(options.name)) { - response.primitives.push(options.name); - } else { - response = await prompt({ - type: 'multiselect', - required: true, - name: 'primitives', - message: 'Choose which primitives you want to copy', - choices: ['all', ...availablePrimitiveNames], - }); - } - tasks.push( - ...(await createPrimitiveLibraries(response, availablePrimitiveNames, availablePrimitives, tree, options)) - ); + const tasks: GeneratorCallback[] = []; + const availablePrimitives = await import('./supported-ui-libraries.json'); + const availablePrimitiveNames = [...Object.keys(availablePrimitives), 'collapsible', 'menubar', 'contextmenu']; + let response: { primitives: string[] } = { primitives: [] }; + if (options.name && availablePrimitiveNames.includes(options.name)) { + response.primitives.push(options.name); + } else { + response = await prompt({ + type: 'multiselect', + required: true, + name: 'primitives', + message: 'Choose which primitives you want to copy', + choices: ['all', ...availablePrimitiveNames], + }); + } + tasks.push( + ...(await createPrimitiveLibraries(response, availablePrimitiveNames, availablePrimitives, tree, options)), + ); - return runTasksInSerial(...tasks); + return runTasksInSerial(...tasks); } async function createPrimitiveLibraries( - response: { - primitives: string[]; - }, - availablePrimitiveNames: string[], - availablePrimitives, - tree: Tree, - options: HlmUIGeneratorSchema + response: { + primitives: string[]; + }, + availablePrimitiveNames: string[], + availablePrimitives, + tree: Tree, + options: HlmUIGeneratorSchema, ) { - const allPrimitivesSelected = response.primitives.includes('all'); - const primitivesToCreate = allPrimitivesSelected ? availablePrimitiveNames : response.primitives; - const tasks: GeneratorCallback[] = []; + const allPrimitivesSelected = response.primitives.includes('all'); + const primitivesToCreate = allPrimitivesSelected ? availablePrimitiveNames : response.primitives; + const tasks: GeneratorCallback[] = []; - if (!response.primitives.includes('all')) { - await addIconForDependentPrimitive(primitivesToCreate, ['alert', 'command', 'menu']); - await addButtonForDependentPrimitive(primitivesToCreate, ['alertdialog', 'command']); - } - await replaceContextAndMenuBar(primitivesToCreate, allPrimitivesSelected); + if (!response.primitives.includes('all')) { + await addIconForDependentPrimitive(primitivesToCreate, ['alert', 'command', 'menu']); + await addButtonForDependentPrimitive(primitivesToCreate, ['alertdialog', 'command']); + } + await replaceContextAndMenuBar(primitivesToCreate, allPrimitivesSelected); - if (primitivesToCreate.includes('collapsible')) { - tasks.push( - addDependenciesToPackageJson(tree, { '@spartan-ng/ui-collapsible-brain': SPARTAN_COLLAPSIBLE_BRAIN_VERSION }, {}) - ); - } - if (primitivesToCreate.length === 1 && primitivesToCreate[0] === 'collapsible') { - return tasks; - } + if (primitivesToCreate.includes('collapsible')) { + tasks.push( + addDependenciesToPackageJson(tree, { '@spartan-ng/ui-collapsible-brain': SPARTAN_COLLAPSIBLE_BRAIN_VERSION }, {}), + ); + } + if (primitivesToCreate.length === 1 && primitivesToCreate[0] === 'collapsible') { + return tasks; + } - for (const primitiveName of primitivesToCreate) { - if (primitiveName === 'collapsible') continue; + for (const primitiveName of primitivesToCreate) { + if (primitiveName === 'collapsible') continue; - const internalName = availablePrimitives[primitiveName]['internalName']; - const peerDependencies = availablePrimitives[primitiveName]['peerDependencies']; - const installTask = await ( - (await import( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - `./libs/${internalName}/generator` - )) as { - generator: (tree: Tree, options: HlmBaseGeneratorSchema) => Promise; - } - ).generator(tree, { - // get overwritten by each specific generator - internalName: '', - publicName: '', - primitiveName: '', - peerDependencies, - skipBrainDependencies: options.skipBrainDependencies, - directory: options.directory, - tags: options.tags, - rootProject: options.rootProject, - }); + const internalName = availablePrimitives[primitiveName]['internalName']; + const peerDependencies = availablePrimitives[primitiveName]['peerDependencies']; + const installTask = await ( + (await import( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + `./libs/${internalName}/generator` + )) as { + generator: (tree: Tree, options: HlmBaseGeneratorSchema) => Promise; + } + ).generator(tree, { + // get overwritten by each specific generator + internalName: '', + publicName: '', + primitiveName: '', + peerDependencies, + skipBrainDependencies: options.skipBrainDependencies, + directory: options.directory, + tags: options.tags, + rootProject: options.rootProject, + }); - tasks.push(installTask); - } + tasks.push(installTask); + } - return tasks; + return tasks; } const addIconForDependentPrimitive = async (primitivesToCreate: string[], primitivesDependingOnIcon: string[]) => { - if (primitivesDependingOnIcon.some((primitive) => primitivesToCreate.includes(primitive))) { - //TODO: Need to check if icon is already installed and skip if it already is - const installIcon = ( - await prompt({ - type: 'confirm', - name: 'installIcon', - initial: true, - message: - 'Some of the primitives you are trying to install depend on the icon primitive. Do you want to add it to your project?', - }) - )['installIcon']; - if (installIcon) { - primitivesToCreate.push('icon'); - } - } + if (primitivesDependingOnIcon.some((primitive) => primitivesToCreate.includes(primitive))) { + //TODO: Need to check if icon is already installed and skip if it already is + const installIcon = ( + await prompt({ + type: 'confirm', + name: 'installIcon', + initial: true, + message: + 'Some of the primitives you are trying to install depend on the icon primitive. Do you want to add it to your project?', + }) + )['installIcon']; + if (installIcon) { + primitivesToCreate.push('icon'); + } + } }; const addButtonForDependentPrimitive = async (primitivesToCreate: string[], primitivesDependingOnBtn: string[]) => { - if (primitivesDependingOnBtn.some((primitive) => primitivesToCreate.includes(primitive))) { - //TODO: Need to check if icon is already installed and skip if it already is - const installBtn = ( - await prompt({ - type: 'confirm', - name: 'installBtn', - initial: true, - message: - 'Some of the primitives you are trying to install depend on the button primitive. Do you want to add it to your project?', - }) - )['installBtn']; - if (installBtn) { - primitivesToCreate.push('button'); - } - } + if (primitivesDependingOnBtn.some((primitive) => primitivesToCreate.includes(primitive))) { + //TODO: Need to check if icon is already installed and skip if it already is + const installBtn = ( + await prompt({ + type: 'confirm', + name: 'installBtn', + initial: true, + message: + 'Some of the primitives you are trying to install depend on the button primitive. Do you want to add it to your project?', + }) + )['installBtn']; + if (installBtn) { + primitivesToCreate.push('button'); + } + } }; const replaceContextAndMenuBar = async (primtivesToCreate: string[], silent = false) => { - const contextIndex = primtivesToCreate.indexOf('contextmenu'); - if (contextIndex >= 0) { - if (!silent) { - await prompt({ - type: 'confirm', - name: 'contextMenu', - message: 'The context menu is implemented as part of the menu-helm primitive. Adding menu primitive.', - }); - } - primtivesToCreate.splice(contextIndex, 1); - } - const menubarIndex = primtivesToCreate.indexOf('menubar'); - if (menubarIndex >= 0) { - if (!silent) { - await prompt({ - type: 'confirm', - name: 'menubar', - message: 'The menubar is implemented as part of the menu-helm primitive. Adding menu primitive.', - }); - } - primtivesToCreate.splice(menubarIndex, 1); - } + const contextIndex = primtivesToCreate.indexOf('contextmenu'); + if (contextIndex >= 0) { + if (!silent) { + await prompt({ + type: 'confirm', + name: 'contextMenu', + message: 'The context menu is implemented as part of the menu-helm primitive. Adding menu primitive.', + }); + } + primtivesToCreate.splice(contextIndex, 1); + } + const menubarIndex = primtivesToCreate.indexOf('menubar'); + if (menubarIndex >= 0) { + if (!silent) { + await prompt({ + type: 'confirm', + name: 'menubar', + message: 'The menubar is implemented as part of the menu-helm primitive. Adding menu primitive.', + }); + } + primtivesToCreate.splice(menubarIndex, 1); + } }; diff --git a/libs/nx/src/generators/ui/libs/ui-accordion-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-accordion-helm/generator.ts index ee1329293..8a82ef2f3 100644 --- a/libs/nx/src/generators/ui/libs/ui-accordion-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-accordion-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'accordion', - internalName: 'ui-accordion-helm', - publicName: 'ui-accordion-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'accordion', + internalName: 'ui-accordion-helm', + publicName: 'ui-accordion-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-alert-dialog-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-alert-dialog-helm/generator.ts index 421cb3b87..4850ba2eb 100644 --- a/libs/nx/src/generators/ui/libs/ui-alert-dialog-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-alert-dialog-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'alertdialog', - internalName: 'ui-alert-dialog-helm', - publicName: 'ui-alertdialog-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'alertdialog', + internalName: 'ui-alert-dialog-helm', + publicName: 'ui-alertdialog-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-alert-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-alert-helm/generator.ts index 2e10a205b..488c0ddf8 100644 --- a/libs/nx/src/generators/ui/libs/ui-alert-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-alert-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'alert', - internalName: 'ui-alert-helm', - publicName: 'ui-alert-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'alert', + internalName: 'ui-alert-helm', + publicName: 'ui-alert-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-aspect-ratio-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-aspect-ratio-helm/generator.ts index 5eebe88bb..30bc03f70 100644 --- a/libs/nx/src/generators/ui/libs/ui-aspect-ratio-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-aspect-ratio-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'aspectratio', - internalName: 'ui-aspect-ratio-helm', - publicName: 'ui-aspectratio-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'aspectratio', + internalName: 'ui-aspect-ratio-helm', + publicName: 'ui-aspectratio-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-avatar-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-avatar-helm/generator.ts index f840bc632..61d624392 100644 --- a/libs/nx/src/generators/ui/libs/ui-avatar-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-avatar-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'avatar', - internalName: 'ui-avatar-helm', - publicName: 'ui-avatar-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'avatar', + internalName: 'ui-avatar-helm', + publicName: 'ui-avatar-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-badge-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-badge-helm/generator.ts index 3ee24fa0b..268b77867 100644 --- a/libs/nx/src/generators/ui/libs/ui-badge-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-badge-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'badge', - internalName: 'ui-badge-helm', - publicName: 'ui-badge-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'badge', + internalName: 'ui-badge-helm', + publicName: 'ui-badge-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-button-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-button-helm/generator.ts index 66658fe5c..8bbe24a52 100644 --- a/libs/nx/src/generators/ui/libs/ui-button-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-button-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'button', - internalName: 'ui-button-helm', - publicName: 'ui-button-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'button', + internalName: 'ui-button-helm', + publicName: 'ui-button-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-card-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-card-helm/generator.ts index 878959333..e66a4aed7 100644 --- a/libs/nx/src/generators/ui/libs/ui-card-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-card-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'card', - internalName: 'ui-card-helm', - publicName: 'ui-card-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'card', + internalName: 'ui-card-helm', + publicName: 'ui-card-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-command-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-command-helm/generator.ts index 1d9f30eeb..204c57147 100644 --- a/libs/nx/src/generators/ui/libs/ui-command-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-command-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'command', - internalName: 'ui-command-helm', - publicName: 'ui-command-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'command', + internalName: 'ui-command-helm', + publicName: 'ui-command-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-dialog-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-dialog-helm/generator.ts index 76cc6803f..5177696ad 100644 --- a/libs/nx/src/generators/ui/libs/ui-dialog-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-dialog-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'dialog', - internalName: 'ui-dialog-helm', - publicName: 'ui-dialog-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'dialog', + internalName: 'ui-dialog-helm', + publicName: 'ui-dialog-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-hover-card-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-hover-card-helm/generator.ts index 93184913a..a3aff0e3c 100644 --- a/libs/nx/src/generators/ui/libs/ui-hover-card-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-hover-card-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'hovercard', - internalName: 'ui-hover-card-helm', - publicName: 'ui-hovercard-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'hovercard', + internalName: 'ui-hover-card-helm', + publicName: 'ui-hovercard-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-icon-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-icon-helm/generator.ts index 63c4ebe7e..40216df9b 100644 --- a/libs/nx/src/generators/ui/libs/ui-icon-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-icon-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'icon', - internalName: 'ui-icon-helm', - publicName: 'ui-icon-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'icon', + internalName: 'ui-icon-helm', + publicName: 'ui-icon-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-input-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-input-helm/generator.ts index 6fb33e6fd..094609b5e 100644 --- a/libs/nx/src/generators/ui/libs/ui-input-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-input-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'input', - internalName: 'ui-input-helm', - publicName: 'ui-input-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'input', + internalName: 'ui-input-helm', + publicName: 'ui-input-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-label-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-label-helm/generator.ts index 80cf1b56c..05a132324 100644 --- a/libs/nx/src/generators/ui/libs/ui-label-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-label-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'label', - internalName: 'ui-label-helm', - publicName: 'ui-label-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'label', + internalName: 'ui-label-helm', + publicName: 'ui-label-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-menu-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-menu-helm/generator.ts index 1a94728b9..4a8df741c 100644 --- a/libs/nx/src/generators/ui/libs/ui-menu-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-menu-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'menu', - internalName: 'ui-menu-helm', - publicName: 'ui-menu-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'menu', + internalName: 'ui-menu-helm', + publicName: 'ui-menu-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-popover-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-popover-helm/generator.ts index 5da572f80..2f3bcc8f4 100644 --- a/libs/nx/src/generators/ui/libs/ui-popover-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-popover-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'popover', - internalName: 'ui-popover-helm', - publicName: 'ui-popover-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'popover', + internalName: 'ui-popover-helm', + publicName: 'ui-popover-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-progress-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-progress-helm/generator.ts index 8922902f5..88f0928b7 100644 --- a/libs/nx/src/generators/ui/libs/ui-progress-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-progress-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'progress', - internalName: 'ui-progress-helm', - publicName: 'ui-progress-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'progress', + internalName: 'ui-progress-helm', + publicName: 'ui-progress-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-radio-group-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-radio-group-helm/generator.ts index 1aaa5c12c..bc596f495 100644 --- a/libs/nx/src/generators/ui/libs/ui-radio-group-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-radio-group-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'radiogroup', - internalName: 'ui-radio-group-helm', - publicName: 'ui-radiogroup-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'radiogroup', + internalName: 'ui-radio-group-helm', + publicName: 'ui-radiogroup-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-scroll-area-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-scroll-area-helm/generator.ts index 9e2ef7471..84d58b67a 100644 --- a/libs/nx/src/generators/ui/libs/ui-scroll-area-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-scroll-area-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'scrollarea', - internalName: 'ui-scroll-area-helm', - publicName: 'ui-scrollarea-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'scrollarea', + internalName: 'ui-scroll-area-helm', + publicName: 'ui-scrollarea-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-separator-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-separator-helm/generator.ts index 1008add2b..20c9b3d43 100644 --- a/libs/nx/src/generators/ui/libs/ui-separator-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-separator-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'separator', - internalName: 'ui-separator-helm', - publicName: 'ui-separator-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'separator', + internalName: 'ui-separator-helm', + publicName: 'ui-separator-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-sheet-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-sheet-helm/generator.ts index 0dae066e4..6fd1f81b8 100644 --- a/libs/nx/src/generators/ui/libs/ui-sheet-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-sheet-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'sheet', - internalName: 'ui-sheet-helm', - publicName: 'ui-sheet-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'sheet', + internalName: 'ui-sheet-helm', + publicName: 'ui-sheet-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-skeleton-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-skeleton-helm/generator.ts index 54db8aa0a..e665f1b9b 100644 --- a/libs/nx/src/generators/ui/libs/ui-skeleton-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-skeleton-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'skeleton', - internalName: 'ui-skeleton-helm', - publicName: 'ui-skeleton-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'skeleton', + internalName: 'ui-skeleton-helm', + publicName: 'ui-skeleton-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-spinner-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-spinner-helm/generator.ts index 7e0f261a0..3c4e19c0b 100644 --- a/libs/nx/src/generators/ui/libs/ui-spinner-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-spinner-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'spinner', - internalName: 'ui-spinner-helm', - publicName: 'ui-spinner-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'spinner', + internalName: 'ui-spinner-helm', + publicName: 'ui-spinner-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-switch-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-switch-helm/generator.ts index 1a775f43a..6f8dc0e5c 100644 --- a/libs/nx/src/generators/ui/libs/ui-switch-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-switch-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'switch', - internalName: 'ui-switch-helm', - publicName: 'ui-switch-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'switch', + internalName: 'ui-switch-helm', + publicName: 'ui-switch-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-table-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-table-helm/generator.ts index 9817bd176..8b7a40316 100644 --- a/libs/nx/src/generators/ui/libs/ui-table-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-table-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'table', - internalName: 'ui-table-helm', - publicName: 'ui-table-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'table', + internalName: 'ui-table-helm', + publicName: 'ui-table-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-tabs-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-tabs-helm/generator.ts index 8c3d4d954..7f1e023ca 100644 --- a/libs/nx/src/generators/ui/libs/ui-tabs-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-tabs-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'tabs', - internalName: 'ui-tabs-helm', - publicName: 'ui-tabs-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'tabs', + internalName: 'ui-tabs-helm', + publicName: 'ui-tabs-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-toggle-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-toggle-helm/generator.ts index 695eaa022..bc13bfdd6 100644 --- a/libs/nx/src/generators/ui/libs/ui-toggle-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-toggle-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'toggle', - internalName: 'ui-toggle-helm', - publicName: 'ui-toggle-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'toggle', + internalName: 'ui-toggle-helm', + publicName: 'ui-toggle-helm', + }); } diff --git a/libs/nx/src/generators/ui/libs/ui-typography-helm/generator.ts b/libs/nx/src/generators/ui/libs/ui-typography-helm/generator.ts index 05707ce18..c556101e2 100644 --- a/libs/nx/src/generators/ui/libs/ui-typography-helm/generator.ts +++ b/libs/nx/src/generators/ui/libs/ui-typography-helm/generator.ts @@ -1,12 +1,12 @@ import { Tree } from '@nx/devkit'; -import { HlmBaseGeneratorSchema } from '../../../base/schema'; import hlmBaseGenerator from '../../../base/generator'; +import { HlmBaseGeneratorSchema } from '../../../base/schema'; export async function generator(tree: Tree, options: HlmBaseGeneratorSchema) { - return await hlmBaseGenerator(tree, { - ...options, - primitiveName: 'typography', - internalName: 'ui-typography-helm', - publicName: 'ui-typography-helm', - }); + return await hlmBaseGenerator(tree, { + ...options, + primitiveName: 'typography', + internalName: 'ui-typography-helm', + publicName: 'ui-typography-helm', + }); } diff --git a/libs/nx/src/generators/ui/schema.d.ts b/libs/nx/src/generators/ui/schema.d.ts index cf3612923..db2c9e042 100644 --- a/libs/nx/src/generators/ui/schema.d.ts +++ b/libs/nx/src/generators/ui/schema.d.ts @@ -1,7 +1,7 @@ export interface HlmUIGeneratorSchema { - name?: string; - directory?: string; - rootProject?: boolean; - tags?: string; - skipBrainDependencies?: boolean; + name?: string; + directory?: string; + rootProject?: boolean; + tags?: string; + skipBrainDependencies?: boolean; } diff --git a/libs/nx/src/generators/ui/schema.json b/libs/nx/src/generators/ui/schema.json index e16271e12..a6f91f99a 100644 --- a/libs/nx/src/generators/ui/schema.json +++ b/libs/nx/src/generators/ui/schema.json @@ -1,26 +1,26 @@ { - "$schema": "http://json-schema.org/schema", - "$id": "HlmUIGeneratorSchema", - "title": "", - "type": "object", - "properties": { - "name": { - "type": "string", - "description": "Primitive name", - "$default": { - "$source": "argv", - "index": 0 - } - }, - "directory": { - "type": "string", - "description": "A directory where the libraries are placed.", - "x-prompt": "Choose a directory to place your spartan libraries, e.g. libs/ui", - "x-priority": "important" - }, - "tags": { - "type": "string", - "description": "Add tags to the library (used for linting)." - } - } + "$schema": "http://json-schema.org/schema", + "$id": "HlmUIGeneratorSchema", + "title": "", + "type": "object", + "properties": { + "name": { + "type": "string", + "description": "Primitive name", + "$default": { + "$source": "argv", + "index": 0 + } + }, + "directory": { + "type": "string", + "description": "A directory where the libraries are placed.", + "x-prompt": "Choose a directory to place your spartan libraries, e.g. libs/ui", + "x-priority": "important" + }, + "tags": { + "type": "string", + "description": "Add tags to the library (used for linting)." + } + } } diff --git a/libs/nx/src/generators/ui/supported-ui-libraries.json b/libs/nx/src/generators/ui/supported-ui-libraries.json index af124afce..703d90564 100644 --- a/libs/nx/src/generators/ui/supported-ui-libraries.json +++ b/libs/nx/src/generators/ui/supported-ui-libraries.json @@ -1,245 +1,245 @@ { - "accordion": { - "internalName": "ui-accordion-helm", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "alert": { - "internalName": "ui-alert-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "alertdialog": { - "internalName": "ui-alert-dialog-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "aspectratio": { - "internalName": "ui-aspect-ratio-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "avatar": { - "internalName": "ui-avatar-helm", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - } - }, - "badge": { - "internalName": "ui-badge-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "button": { - "internalName": "ui-button-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "card": { - "internalName": "ui-card-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "command": { - "internalName": "ui-command-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "dialog": { - "internalName": "ui-dialog-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "icon": { - "internalName": "ui-icon-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@ng-icons/core": "^25.1.0", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "input": { - "internalName": "ui-input-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "label": { - "internalName": "ui-label-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "menu": { - "internalName": "ui-menu-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@ng-icons/radix-icons": "^25.1.0", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - } - }, - "popover": { - "internalName": "ui-popover-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "progress": { - "internalName": "ui-progress-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "radiogroup": { - "internalName": "ui-radio-group-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "scrollarea": { - "internalName": "ui-scroll-area-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "ngx-scrollbar": "^13.0.1", - "clsx": "^1.2.1" - } - }, - "separator": { - "internalName": "ui-separator-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "sheet": { - "internalName": "ui-sheet-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - } - }, - "skeleton": { - "internalName": "ui-skeleton-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "spinner": { - "internalName": "ui-spinner-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - } - }, - "switch": { - "internalName": "ui-switch-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "tabs": { - "internalName": "ui-tabs-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - } - }, - "toggle": { - "internalName": "ui-toggle-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - } - }, - "typography": { - "internalName": "ui-typography-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "table": { - "internalName": "ui-table-helm", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - }, - "hovercard": { - "internalName": "ui-hover-card-helm", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - } - } + "accordion": { + "internalName": "ui-accordion-helm", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "alert": { + "internalName": "ui-alert-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "alertdialog": { + "internalName": "ui-alert-dialog-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "aspectratio": { + "internalName": "ui-aspect-ratio-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "avatar": { + "internalName": "ui-avatar-helm", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + } + }, + "badge": { + "internalName": "ui-badge-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "button": { + "internalName": "ui-button-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "card": { + "internalName": "ui-card-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "command": { + "internalName": "ui-command-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "dialog": { + "internalName": "ui-dialog-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "icon": { + "internalName": "ui-icon-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@ng-icons/core": "^25.1.0", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "input": { + "internalName": "ui-input-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "label": { + "internalName": "ui-label-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "menu": { + "internalName": "ui-menu-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@ng-icons/radix-icons": "^25.1.0", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + } + }, + "popover": { + "internalName": "ui-popover-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "progress": { + "internalName": "ui-progress-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "radiogroup": { + "internalName": "ui-radio-group-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "scrollarea": { + "internalName": "ui-scroll-area-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "ngx-scrollbar": "^13.0.1", + "clsx": "^1.2.1" + } + }, + "separator": { + "internalName": "ui-separator-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "sheet": { + "internalName": "ui-sheet-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + } + }, + "skeleton": { + "internalName": "ui-skeleton-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "spinner": { + "internalName": "ui-spinner-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + } + }, + "switch": { + "internalName": "ui-switch-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "tabs": { + "internalName": "ui-tabs-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + } + }, + "toggle": { + "internalName": "ui-toggle-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + } + }, + "typography": { + "internalName": "ui-typography-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "table": { + "internalName": "ui-table-helm", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + }, + "hovercard": { + "internalName": "ui-hover-card-helm", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + } + } } diff --git a/libs/nx/src/utils/get-project-names.ts b/libs/nx/src/utils/get-project-names.ts index 56f194e1a..c6c6c2442 100644 --- a/libs/nx/src/utils/get-project-names.ts +++ b/libs/nx/src/utils/get-project-names.ts @@ -1,13 +1,13 @@ import { getProjects, Tree } from '@nx/devkit'; export const getProjectsAndNames = (tree: Tree) => { - const projectNames: string[] = []; - const projects = getProjects(tree); + const projectNames: string[] = []; + const projects = getProjects(tree); - projects.forEach((projectConfiguration, projectName) => { - if (projectConfiguration.projectType === 'application') { - projectNames.push(projectName); - } - }); - return { projects, projectNames }; + projects.forEach((projectConfiguration, projectName) => { + if (projectConfiguration.projectType === 'application') { + projectNames.push(projectName); + } + }); + return { projects, projectNames }; }; diff --git a/libs/nx/src/utils/version-utils.ts b/libs/nx/src/utils/version-utils.ts index f52d60001..626e91fe5 100644 --- a/libs/nx/src/utils/version-utils.ts +++ b/libs/nx/src/utils/version-utils.ts @@ -2,22 +2,22 @@ import { readJson, Tree } from '@nx/devkit'; import { clean, coerce } from 'semver'; export function getInstalledPackageVersion( - tree: Tree, - packageName: string, - defaultVersion?: string, - raw = false + tree: Tree, + packageName: string, + defaultVersion?: string, + raw = false, ): string | null { - const pkgJson = readJson(tree, 'package.json'); - const installedPackageVersion = - (pkgJson.dependencies && pkgJson.dependencies[packageName]) || - (pkgJson.devDependencies && pkgJson.devDependencies[packageName]); - if (!installedPackageVersion && !defaultVersion) { - return null; - } + const pkgJson = readJson(tree, 'package.json'); + const installedPackageVersion = + (pkgJson.dependencies && pkgJson.dependencies[packageName]) || + (pkgJson.devDependencies && pkgJson.devDependencies[packageName]); + if (!installedPackageVersion && !defaultVersion) { + return null; + } - if (!installedPackageVersion || installedPackageVersion === 'latest' || installedPackageVersion === 'next') { - return clean(defaultVersion) ?? coerce(defaultVersion).version; - } + if (!installedPackageVersion || installedPackageVersion === 'latest' || installedPackageVersion === 'next') { + return clean(defaultVersion) ?? coerce(defaultVersion).version; + } - return (raw ? installedPackageVersion : clean(installedPackageVersion)) ?? coerce(installedPackageVersion).version; + return (raw ? installedPackageVersion : clean(installedPackageVersion)) ?? coerce(installedPackageVersion).version; } diff --git a/libs/nx/tsconfig.json b/libs/nx/tsconfig.json index 19b9eece4..37deb27ac 100644 --- a/libs/nx/tsconfig.json +++ b/libs/nx/tsconfig.json @@ -1,16 +1,16 @@ { - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "module": "commonjs" - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "module": "commonjs" + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] } diff --git a/libs/nx/tsconfig.lib.json b/libs/nx/tsconfig.lib.json index f9a2ce4c6..de69d7c19 100644 --- a/libs/nx/tsconfig.lib.json +++ b/libs/nx/tsconfig.lib.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "declaration": true, - "types": ["node"], - "resolveJsonModule": true - }, - "include": ["src/**/*.ts"], - "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "declaration": true, + "types": ["node"], + "resolveJsonModule": true + }, + "include": ["src/**/*.ts"], + "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"] } diff --git a/libs/nx/tsconfig.spec.json b/libs/nx/tsconfig.spec.json index f6d8ffcc9..ceb45ea29 100644 --- a/libs/nx/tsconfig.spec.json +++ b/libs/nx/tsconfig.spec.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/tools/.eslintrc.json b/libs/tools/.eslintrc.json index 4cf7f347f..d4339a2e8 100644 --- a/libs/tools/.eslintrc.json +++ b/libs/tools/.eslintrc.json @@ -1,25 +1,25 @@ { - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["./package.json", "./generators.json", "./executors.json"], - "parser": "jsonc-eslint-parser", - "rules": { - "@nx/nx-plugin-checks": "error" - } - } - ] + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["./package.json", "./generators.json", "./executors.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/nx-plugin-checks": "error" + } + } + ] } diff --git a/libs/tools/executors.json b/libs/tools/executors.json index 49dcb9fdf..3ae7b83ac 100644 --- a/libs/tools/executors.json +++ b/libs/tools/executors.json @@ -1,19 +1,19 @@ { - "executors": { - "npm-publish": { - "implementation": "./src/executors/release/npm-publish/executor", - "schema": "./src/executors/release/npm-publish/schema.json", - "description": "npm-publish executor" - }, - "update-version": { - "implementation": "./src/executors/release/update-version/executor", - "schema": "./src/executors/release/update-version/schema.json", - "description": "update-version executor" - }, - "build-update-publish": { - "implementation": "./src/executors/release/build-update-publish/executor", - "schema": "./src/executors/release/build-update-publish/schema.json", - "description": "build-update-publish executor" - } - } + "executors": { + "npm-publish": { + "implementation": "./src/executors/release/npm-publish/executor", + "schema": "./src/executors/release/npm-publish/schema.json", + "description": "npm-publish executor" + }, + "update-version": { + "implementation": "./src/executors/release/update-version/executor", + "schema": "./src/executors/release/update-version/schema.json", + "description": "update-version executor" + }, + "build-update-publish": { + "implementation": "./src/executors/release/build-update-publish/executor", + "schema": "./src/executors/release/build-update-publish/schema.json", + "description": "build-update-publish executor" + } + } } diff --git a/libs/tools/generators.json b/libs/tools/generators.json index ce7975760..2b48860e2 100644 --- a/libs/tools/generators.json +++ b/libs/tools/generators.json @@ -1,9 +1,9 @@ { - "generators": { - "hlm-to-nx-generator": { - "factory": "./src/generators/hlm-to-nx-generator/generator", - "schema": "./src/generators/hlm-to-nx-generator/schema.json", - "description": "hlm-to-nx-generator generator" - } - } + "generators": { + "hlm-to-nx-generator": { + "factory": "./src/generators/hlm-to-nx-generator/generator", + "schema": "./src/generators/hlm-to-nx-generator/schema.json", + "description": "hlm-to-nx-generator generator" + } + } } diff --git a/libs/tools/jest.config.ts b/libs/tools/jest.config.ts index e795f83e9..7f1e87855 100644 --- a/libs/tools/jest.config.ts +++ b/libs/tools/jest.config.ts @@ -1,10 +1,10 @@ /* eslint-disable */ export default { - displayName: 'tools', - preset: '../../jest.preset.js', - transform: { - '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], - }, - moduleFileExtensions: ['ts', 'js', 'html'], - coverageDirectory: '../../coverage/libs/tools', + displayName: 'tools', + preset: '../../jest.preset.js', + transform: { + '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], + }, + moduleFileExtensions: ['ts', 'js', 'html'], + coverageDirectory: '../../coverage/libs/tools', }; diff --git a/libs/tools/package.json b/libs/tools/package.json index 82f8b3408..90a491d29 100644 --- a/libs/tools/package.json +++ b/libs/tools/package.json @@ -1,11 +1,11 @@ { - "name": "@spartan-ng/tools", - "version": "0.0.1", - "type": "commonjs", - "executors": "./executors.json", - "generators": "./generators.json", - "dependencies": { - "process": "0.11.10", - "enquirer": "2.3.6" - } + "name": "@spartan-ng/tools", + "version": "0.0.1", + "type": "commonjs", + "executors": "./executors.json", + "generators": "./generators.json", + "dependencies": { + "process": "0.11.10", + "enquirer": "2.3.6" + } } diff --git a/libs/tools/project.json b/libs/tools/project.json index 5399075a4..85be57a46 100644 --- a/libs/tools/project.json +++ b/libs/tools/project.json @@ -1,60 +1,60 @@ { - "name": "tools", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/tools/src", - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/js:tsc", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/libs/tools", - "main": "libs/tools/src/index.ts", - "tsConfig": "libs/tools/tsconfig.lib.json", - "assets": [ - "libs/tools/*.md", - { - "input": "./libs/tools/src", - "glob": "**/!(*.ts)", - "output": "./src" - }, - { - "input": "./libs/tools/src", - "glob": "**/*.d.ts", - "output": "./src" - }, - { - "input": "./libs/tools", - "glob": "generators.json", - "output": "." - }, - { - "input": "./libs/tools", - "glob": "executors.json", - "output": "." - } - ] - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/tools/**/*.ts", - "libs/tools/package.json", - "libs/tools/generators.json", - "libs/tools/executors.json" - ] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/tools/jest.config.ts" - } - } - }, - "tags": [] + "name": "tools", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/tools/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/js:tsc", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/tools", + "main": "libs/tools/src/index.ts", + "tsConfig": "libs/tools/tsconfig.lib.json", + "assets": [ + "libs/tools/*.md", + { + "input": "./libs/tools/src", + "glob": "**/!(*.ts)", + "output": "./src" + }, + { + "input": "./libs/tools/src", + "glob": "**/*.d.ts", + "output": "./src" + }, + { + "input": "./libs/tools", + "glob": "generators.json", + "output": "." + }, + { + "input": "./libs/tools", + "glob": "executors.json", + "output": "." + } + ] + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/tools/**/*.ts", + "libs/tools/package.json", + "libs/tools/generators.json", + "libs/tools/executors.json" + ] + } + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/tools/jest.config.ts" + } + } + }, + "tags": [] } diff --git a/libs/tools/src/executors/release/build-update-publish/executor.spec.ts b/libs/tools/src/executors/release/build-update-publish/executor.spec.ts index de10cde9b..d6319cede 100644 --- a/libs/tools/src/executors/release/build-update-publish/executor.spec.ts +++ b/libs/tools/src/executors/release/build-update-publish/executor.spec.ts @@ -1,30 +1,30 @@ import * as childProcess from 'child_process'; -import * as updateVersion from '../update-version/executor'; import * as projectHelper from '../helpers/projects.helpers'; import * as npmPublish from '../npm-publish/executor'; +import * as updateVersion from '../update-version/executor'; import executor from './executor'; describe('BuildUpdatePublish Executor', () => { - it('should call update-version executor and npm publish executor with the options and context', async () => { - const libName = 'foo'; - const mockContext = { bar: 'bar' } as any; + it('should call update-version executor and npm publish executor with the options and context', async () => { + const libName = 'foo'; + const mockContext = { bar: 'bar' } as any; - /* eslint-disable */ - jest.spyOn(projectHelper, 'getProjectName').mockReturnValue(libName); - /* eslint-disable */ - jest.spyOn(updateVersion, 'default').mockImplementation((() => {}) as any); - /* eslint-disable */ - jest.spyOn(npmPublish, 'default').mockImplementation((() => {}) as any); - /* eslint-disable */ - jest.spyOn(childProcess, 'execSync').mockImplementation((() => {}) as any); + /* eslint-disable */ + jest.spyOn(projectHelper, 'getProjectName').mockReturnValue(libName); + /* eslint-disable */ + jest.spyOn(updateVersion, 'default').mockImplementation((() => {}) as any); + /* eslint-disable */ + jest.spyOn(npmPublish, 'default').mockImplementation((() => {}) as any); + /* eslint-disable */ + jest.spyOn(childProcess, 'execSync').mockImplementation((() => {}) as any); - const output = await executor({}, mockContext as any); + const output = await executor({}, mockContext as any); - expect(updateVersion.default).toHaveBeenCalledWith({}, mockContext); - expect(npmPublish.default).toHaveBeenCalledWith({}, mockContext); - expect(childProcess.execSync).toHaveBeenCalledWith(`nx build --project ${libName}`); - expect(output.success).toBe(true); - }); + expect(updateVersion.default).toHaveBeenCalledWith({}, mockContext); + expect(npmPublish.default).toHaveBeenCalledWith({}, mockContext); + expect(childProcess.execSync).toHaveBeenCalledWith(`nx build --project ${libName}`); + expect(output.success).toBe(true); + }); }); diff --git a/libs/tools/src/executors/release/build-update-publish/executor.ts b/libs/tools/src/executors/release/build-update-publish/executor.ts index ce67c292a..cf3eee2a6 100644 --- a/libs/tools/src/executors/release/build-update-publish/executor.ts +++ b/libs/tools/src/executors/release/build-update-publish/executor.ts @@ -2,16 +2,16 @@ import { ExecutorContext } from '@nx/devkit'; import { execSync } from 'child_process'; import { getProjectName } from '../helpers/projects.helpers'; -import updateVersion from '../update-version/executor'; import npmPublish from '../npm-publish/executor'; +import updateVersion from '../update-version/executor'; import { BuildUpdatePublishExecutorSchema } from './schema'; export default async function runExecutor(options: BuildUpdatePublishExecutorSchema, context: ExecutorContext) { - await updateVersion({}, context); - execSync(`nx build --project ${getProjectName(context)}`); - await npmPublish({}, context); - return { - success: true, - }; + await updateVersion({}, context); + execSync(`nx build --project ${getProjectName(context)}`); + await npmPublish({}, context); + return { + success: true, + }; } diff --git a/libs/tools/src/executors/release/build-update-publish/schema.json b/libs/tools/src/executors/release/build-update-publish/schema.json index b5545ca8d..16b1cc824 100644 --- a/libs/tools/src/executors/release/build-update-publish/schema.json +++ b/libs/tools/src/executors/release/build-update-publish/schema.json @@ -1,8 +1,8 @@ { - "$schema": "http://json-schema.org/schema", - "version": 2, - "title": "BuildUpdatePublish executor", - "description": "", - "type": "object", - "properties": {} + "$schema": "http://json-schema.org/schema", + "version": 2, + "title": "BuildUpdatePublish executor", + "description": "", + "type": "object", + "properties": {} } diff --git a/libs/tools/src/executors/release/helpers/projects.helpers.spec.ts b/libs/tools/src/executors/release/helpers/projects.helpers.spec.ts index 3819e8516..9013258cc 100644 --- a/libs/tools/src/executors/release/helpers/projects.helpers.spec.ts +++ b/libs/tools/src/executors/release/helpers/projects.helpers.spec.ts @@ -1,26 +1,24 @@ -import * as nxDevKit from '@nx/devkit'; - import { getProjectName, getRoot } from './projects.helpers'; describe('executor project helper', () => { - it('should return the project name', () => { - const projectName = 'foo'; - expect(getProjectName({ projectName } as any)).toBe(projectName); - }); + it('should return the project name', () => { + const projectName = 'foo'; + expect(getProjectName({ projectName } as any)).toBe(projectName); + }); - it('should get the root of the project', () => { - const expectedRoot = 'libs/foo'; - const context = { - projectName: 'foo', - projectsConfigurations: { - projects: { - foo: { - root: expectedRoot, - }, - }, - }, - } as any; + it('should get the root of the project', () => { + const expectedRoot = 'libs/foo'; + const context = { + projectName: 'foo', + projectsConfigurations: { + projects: { + foo: { + root: expectedRoot, + }, + }, + }, + } as any; - expect(getRoot(context)).toBe(expectedRoot); - }); + expect(getRoot(context)).toBe(expectedRoot); + }); }); diff --git a/libs/tools/src/executors/release/helpers/projects.helpers.ts b/libs/tools/src/executors/release/helpers/projects.helpers.ts index 70a4f90e7..2c928af32 100644 --- a/libs/tools/src/executors/release/helpers/projects.helpers.ts +++ b/libs/tools/src/executors/release/helpers/projects.helpers.ts @@ -1,17 +1,17 @@ import { ExecutorContext } from '@nx/devkit'; export function getProjectName(context: ExecutorContext): string { - return context.projectName; + return context.projectName; } export function getRoot(context: ExecutorContext): string { - const projectsConfiguration = context.projectsConfigurations.projects; - const projectName = getProjectName(context); - return projectsConfiguration[projectName].root; + const projectsConfiguration = context.projectsConfigurations.projects; + const projectName = getProjectName(context); + return projectsConfiguration[projectName].root; } export function sleep(ms) { - return new Promise((resolve) => { - setTimeout(resolve, ms); - }); + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); } diff --git a/libs/tools/src/executors/release/npm-publish/executor.spec.ts b/libs/tools/src/executors/release/npm-publish/executor.spec.ts index a741a8a64..7214465c9 100644 --- a/libs/tools/src/executors/release/npm-publish/executor.spec.ts +++ b/libs/tools/src/executors/release/npm-publish/executor.spec.ts @@ -2,24 +2,24 @@ import * as child_process from 'child_process'; import * as projectHelpers from '../helpers/projects.helpers'; -import executor from './executor'; import * as process from 'process'; +import executor from './executor'; describe('NpmPublish Executor', () => { - it('should execSync with a default libPath if no libPath was provided', async () => { - const mockRoot = 'libs/my-domain/foo'; - const context = {} as any; + it('should execSync with a default libPath if no libPath was provided', async () => { + const mockRoot = 'libs/my-domain/foo'; + const context = {} as any; - /* eslint-disable */ - jest.spyOn(child_process, 'execSync').mockImplementation((() => {}) as any); - /* eslint-disable */ - jest.spyOn(projectHelpers, 'getRoot').mockReturnValue(mockRoot); + /* eslint-disable */ + jest.spyOn(child_process, 'execSync').mockImplementation((() => {}) as any); + /* eslint-disable */ + jest.spyOn(projectHelpers, 'getRoot').mockReturnValue(mockRoot); - process.env.TAG = 'next'; - const expectedCommand = `cd ./dist/${mockRoot} && npm publish --tag next`; - const output = await executor({}, context); + process.env.TAG = 'next'; + const expectedCommand = `cd ./dist/${mockRoot} && npm publish --tag next`; + const output = await executor({}, context); - expect(child_process.execSync).toHaveBeenCalledWith(expectedCommand); - expect(output.success).toBe(true); - }); + expect(child_process.execSync).toHaveBeenCalledWith(expectedCommand); + expect(output.success).toBe(true); + }); }); diff --git a/libs/tools/src/executors/release/npm-publish/executor.ts b/libs/tools/src/executors/release/npm-publish/executor.ts index 2fbfe89ec..aeb7c0e4d 100644 --- a/libs/tools/src/executors/release/npm-publish/executor.ts +++ b/libs/tools/src/executors/release/npm-publish/executor.ts @@ -1,14 +1,14 @@ -import { execSync } from 'child_process'; import { ExecutorContext } from '@nx/devkit'; +import { execSync } from 'child_process'; import { getRoot } from '../helpers/projects.helpers'; import { NpmPublishExecutorSchema } from './schema'; export default async function runExecutor(options: NpmPublishExecutorSchema, context: ExecutorContext) { - const sourceRoot = `./dist/${getRoot(context)}`; - execSync(`cd ${sourceRoot} && npm publish${process.env.TAG ? ' --tag ' + process.env.TAG : ''}`); - return { - success: true, - }; + const sourceRoot = `./dist/${getRoot(context)}`; + execSync(`cd ${sourceRoot} && npm publish${process.env.TAG ? ' --tag ' + process.env.TAG : ''}`); + return { + success: true, + }; } diff --git a/libs/tools/src/executors/release/npm-publish/schema.json b/libs/tools/src/executors/release/npm-publish/schema.json index 4850c0180..f9d034b76 100644 --- a/libs/tools/src/executors/release/npm-publish/schema.json +++ b/libs/tools/src/executors/release/npm-publish/schema.json @@ -1,8 +1,8 @@ { - "$schema": "http://json-schema.org/schema", - "version": 2, - "title": "NPM publish executor", - "description": "", - "type": "object", - "properties": {} + "$schema": "http://json-schema.org/schema", + "version": 2, + "title": "NPM publish executor", + "description": "", + "type": "object", + "properties": {} } diff --git a/libs/tools/src/executors/release/update-version/executor.spec.ts b/libs/tools/src/executors/release/update-version/executor.spec.ts index 58effff70..880f27b92 100644 --- a/libs/tools/src/executors/release/update-version/executor.spec.ts +++ b/libs/tools/src/executors/release/update-version/executor.spec.ts @@ -1,27 +1,27 @@ -import * as replaceJsonProp from 'replace-json-property'; import * as process from 'process'; +import * as replaceJsonProp from 'replace-json-property'; import * as projectHelpers from '../helpers/projects.helpers'; import executor from './executor'; describe('ReplaceVersion Executor', () => { - it('should replace the version with in the default path if no path was provided', async () => { - const version = '2.0.0'; - const libName = 'foo'; - const mockContext = {} as any; + it('should replace the version with in the default path if no path was provided', async () => { + const version = '2.0.0'; + const libName = 'foo'; + const mockContext = {} as any; - process.env.VERSION = version; + process.env.VERSION = version; - const root = `libs/${libName}`; + const root = `libs/${libName}`; - // eslint-disable-next-line @typescript-eslint/no-empty-function - jest.spyOn(replaceJsonProp, 'replace').mockImplementation(() => {}); - jest.spyOn(projectHelpers, 'getRoot').mockReturnValue(root); + // eslint-disable-next-line @typescript-eslint/no-empty-function + jest.spyOn(replaceJsonProp, 'replace').mockImplementation(() => {}); + jest.spyOn(projectHelpers, 'getRoot').mockReturnValue(root); - const output = await executor({}, mockContext); + const output = await executor({}, mockContext); - expect(replaceJsonProp.replace).toHaveBeenCalledWith(`${root}/package.json`, 'version', version); - expect(output.success).toBe(true); - }); + expect(replaceJsonProp.replace).toHaveBeenCalledWith(`${root}/package.json`, 'version', version); + expect(output.success).toBe(true); + }); }); diff --git a/libs/tools/src/executors/release/update-version/executor.ts b/libs/tools/src/executors/release/update-version/executor.ts index 1396d1c95..126b9adcc 100644 --- a/libs/tools/src/executors/release/update-version/executor.ts +++ b/libs/tools/src/executors/release/update-version/executor.ts @@ -1,15 +1,15 @@ import type { ExecutorContext } from '@nx/devkit'; -import { replace } from 'replace-json-property'; import * as process from 'process'; +import { replace } from 'replace-json-property'; import { getRoot } from '../helpers/projects.helpers'; import { ReplaceVersionExecutorSchema } from './schema'; export default async function runExecutor(options: ReplaceVersionExecutorSchema, context: ExecutorContext) { - const sourceRoot = getRoot(context); - replace(`${sourceRoot}/package.json`, 'version', process.env.VERSION); - return { - success: true, - }; + const sourceRoot = getRoot(context); + replace(`${sourceRoot}/package.json`, 'version', process.env.VERSION); + return { + success: true, + }; } diff --git a/libs/tools/src/executors/release/update-version/schema.json b/libs/tools/src/executors/release/update-version/schema.json index d23e27d0e..f73b0d6b5 100644 --- a/libs/tools/src/executors/release/update-version/schema.json +++ b/libs/tools/src/executors/release/update-version/schema.json @@ -1,8 +1,8 @@ { - "$schema": "http://json-schema.org/schema", - "version": 2, - "title": "Update version executor", - "description": "", - "type": "object", - "properties": {} + "$schema": "http://json-schema.org/schema", + "version": 2, + "title": "Update version executor", + "description": "", + "type": "object", + "properties": {} } diff --git a/libs/tools/src/generators/hlm-to-nx-generator/generator.spec.ts b/libs/tools/src/generators/hlm-to-nx-generator/generator.spec.ts index cf9591041..fc43ab0b9 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/generator.spec.ts +++ b/libs/tools/src/generators/hlm-to-nx-generator/generator.spec.ts @@ -1,20 +1,20 @@ -import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; import { readProjectConfiguration, Tree } from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; import { hlmToNxGeneratorGenerator } from './generator'; import { HlmToNxGeneratorGeneratorSchema } from './schema'; describe('hlm-to-nx-generator generator', () => { - let tree: Tree; - const options: HlmToNxGeneratorGeneratorSchema = {}; + let tree: Tree; + const options: HlmToNxGeneratorGeneratorSchema = {}; - beforeEach(() => { - tree = createTreeWithEmptyWorkspace(); - }); + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + }); - it.skip('should run successfully', async () => { - await hlmToNxGeneratorGenerator(tree, options); - const config = readProjectConfiguration(tree, 'test'); - expect(config).toBeDefined(); - }); + it.skip('should run successfully', async () => { + await hlmToNxGeneratorGenerator(tree, options); + const config = readProjectConfiguration(tree, 'test'); + expect(config).toBeDefined(); + }); }); diff --git a/libs/tools/src/generators/hlm-to-nx-generator/generator.ts b/libs/tools/src/generators/hlm-to-nx-generator/generator.ts index e17fbbdd6..0e937375f 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/generator.ts +++ b/libs/tools/src/generators/hlm-to-nx-generator/generator.ts @@ -1,52 +1,52 @@ import { names, ProjectConfiguration, readJson, Tree, workspaceRoot } from '@nx/devkit'; -import * as path from 'path'; -import { HlmToNxGeneratorGeneratorSchema } from './schema'; import { prompt } from 'enquirer'; +import * as path from 'path'; import { addPrimitiveToSupportedUILibraries } from './lib/add-primitive-to-supported-ui-libraries'; -import { getProjectsAndNames } from './lib/get-project-names'; import { copyFilesFromHlmLibToGenerator, createSharedGeneratorFiles, recursivelyDelete } from './lib/file-management'; +import { getProjectsAndNames } from './lib/get-project-names'; +import { HlmToNxGeneratorGeneratorSchema } from './schema'; async function createGeneratorFromHlmLibrary( - projects: Map, - generatorName: string, - internalName: string, - tree: Tree, - options: HlmToNxGeneratorGeneratorSchema + projects: Map, + generatorName: string, + internalName: string, + tree: Tree, + options: HlmToNxGeneratorGeneratorSchema, ) { - const srcPath = path.join(workspaceRoot, projects.get(internalName).sourceRoot); - const projectRoot = `libs/nx/src/generators/ui/libs/${internalName}`; - const filesPath = path.join(projectRoot, 'files'); - const peerDependencies = readJson(tree, path.join(projects.get(internalName).root, 'package.json'))[ - 'peerDependencies' - ]; - recursivelyDelete(tree, filesPath); - addPrimitiveToSupportedUILibraries(tree, generatorName, internalName, peerDependencies); - copyFilesFromHlmLibToGenerator(tree, srcPath, filesPath, options); - createSharedGeneratorFiles(tree, projectRoot, options); + const srcPath = path.join(workspaceRoot, projects.get(internalName).sourceRoot); + const projectRoot = `libs/nx/src/generators/ui/libs/${internalName}`; + const filesPath = path.join(projectRoot, 'files'); + const peerDependencies = readJson(tree, path.join(projects.get(internalName).root, 'package.json'))[ + 'peerDependencies' + ]; + recursivelyDelete(tree, filesPath); + addPrimitiveToSupportedUILibraries(tree, generatorName, internalName, peerDependencies); + copyFilesFromHlmLibToGenerator(tree, srcPath, filesPath, options); + createSharedGeneratorFiles(tree, projectRoot, options); } export async function hlmToNxGeneratorGenerator(tree: Tree, options: HlmToNxGeneratorGeneratorSchema) { - const { projects, projectNames } = getProjectsAndNames(tree); - const projectNamesIgnoringCoreLibs = projectNames.filter((name) => !name.includes('core')); + const { projects, projectNames } = getProjectsAndNames(tree); + const projectNamesIgnoringCoreLibs = projectNames.filter((name) => !name.includes('core')); - const response: { libraries: string[] } = await prompt({ - type: 'multiselect', - required: true, - name: 'libraries', - message: 'Choose which library you want to copy', - choices: ['all', ...projectNamesIgnoringCoreLibs], - }); - const librariesToCopy = response.libraries.includes('all') ? projectNamesIgnoringCoreLibs : response.libraries; - librariesToCopy.forEach((internalName) => { - const primitiveName = internalName.replace('ui-', '').replace('-helm', '').replace('-', ''); - const cleanNames = names(primitiveName); - options = { ...options, ...cleanNames }; - options['internalName'] = internalName; - options['publicName'] = 'ui-' + primitiveName + '-helm'; - options['primitiveName'] = primitiveName; + const response: { libraries: string[] } = await prompt({ + type: 'multiselect', + required: true, + name: 'libraries', + message: 'Choose which library you want to copy', + choices: ['all', ...projectNamesIgnoringCoreLibs], + }); + const librariesToCopy = response.libraries.includes('all') ? projectNamesIgnoringCoreLibs : response.libraries; + librariesToCopy.forEach((internalName) => { + const primitiveName = internalName.replace('ui-', '').replace('-helm', '').replace('-', ''); + const cleanNames = names(primitiveName); + options = { ...options, ...cleanNames }; + options['internalName'] = internalName; + options['publicName'] = 'ui-' + primitiveName + '-helm'; + options['primitiveName'] = primitiveName; - createGeneratorFromHlmLibrary(projects, primitiveName, internalName, tree, options); - }); + createGeneratorFromHlmLibrary(projects, primitiveName, internalName, tree, options); + }); } export default hlmToNxGeneratorGenerator; diff --git a/libs/tools/src/generators/hlm-to-nx-generator/lib/add-primitive-to-supported-ui-libraries.ts b/libs/tools/src/generators/hlm-to-nx-generator/lib/add-primitive-to-supported-ui-libraries.ts index dfd989ee2..e2a1d4df5 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/lib/add-primitive-to-supported-ui-libraries.ts +++ b/libs/tools/src/generators/hlm-to-nx-generator/lib/add-primitive-to-supported-ui-libraries.ts @@ -2,16 +2,16 @@ import { Tree } from '@nx/devkit'; import { updateJson } from 'nx/src/generators/utils/json'; export const addPrimitiveToSupportedUILibraries = ( - tree: Tree, - generatorName: string, - internalName: string, - peerDependencies: Record + tree: Tree, + generatorName: string, + internalName: string, + peerDependencies: Record, ) => { - updateJson(tree, 'libs/nx/src/generators/ui/supported-ui-libraries.json', (old) => ({ - ...old, - [generatorName]: { - internalName, - peerDependencies, - }, - })); + updateJson(tree, 'libs/nx/src/generators/ui/supported-ui-libraries.json', (old) => ({ + ...old, + [generatorName]: { + internalName, + peerDependencies, + }, + })); }; diff --git a/libs/tools/src/generators/hlm-to-nx-generator/lib/file-management.ts b/libs/tools/src/generators/hlm-to-nx-generator/lib/file-management.ts index 5e7f9f57d..c2bf14985 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/lib/file-management.ts +++ b/libs/tools/src/generators/hlm-to-nx-generator/lib/file-management.ts @@ -1,44 +1,44 @@ import { generateFiles, Tree } from '@nx/devkit'; -import { HlmToNxGeneratorGeneratorSchema } from '../schema'; import * as path from 'path'; +import { HlmToNxGeneratorGeneratorSchema } from '../schema'; export const copyFilesFromHlmLibToGenerator = ( - tree: Tree, - srcPath: string, - filesPath: string, - options: HlmToNxGeneratorGeneratorSchema + tree: Tree, + srcPath: string, + filesPath: string, + options: HlmToNxGeneratorGeneratorSchema, ) => { - generateFiles(tree, srcPath, filesPath, options); - tree.delete(path.join(filesPath, 'test-setup.ts')); - recursivelyRenameToTemplate(tree, filesPath); + generateFiles(tree, srcPath, filesPath, options); + tree.delete(path.join(filesPath, 'test-setup.ts')); + recursivelyRenameToTemplate(tree, filesPath); }; export const createSharedGeneratorFiles = ( - tree: Tree, - projectRoot: string, - options: HlmToNxGeneratorGeneratorSchema + tree: Tree, + projectRoot: string, + options: HlmToNxGeneratorGeneratorSchema, ) => { - generateFiles(tree, path.join(__dirname, '..', 'files'), projectRoot, options); + generateFiles(tree, path.join(__dirname, '..', 'files'), projectRoot, options); }; export const recursivelyRenameToTemplate = (tree: Tree, filePath: string) => { - tree.children(filePath).forEach((child) => { - const childPath = path.join(filePath, child); - if (tree.isFile(childPath)) { - tree.rename(childPath, childPath + '.template'); - } else { - recursivelyRenameToTemplate(tree, childPath); - } - }); + tree.children(filePath).forEach((child) => { + const childPath = path.join(filePath, child); + if (tree.isFile(childPath)) { + tree.rename(childPath, childPath + '.template'); + } else { + recursivelyRenameToTemplate(tree, childPath); + } + }); }; export const recursivelyDelete = (tree: Tree, filePath: string) => { - tree.children(filePath).forEach((child) => { - const childPath = path.join(filePath, child); - if (tree.isFile(childPath)) { - tree.delete(childPath); - } else { - recursivelyDelete(tree, childPath); - } - }); + tree.children(filePath).forEach((child) => { + const childPath = path.join(filePath, child); + if (tree.isFile(childPath)) { + tree.delete(childPath); + } else { + recursivelyDelete(tree, childPath); + } + }); }; diff --git a/libs/tools/src/generators/hlm-to-nx-generator/lib/get-project-names.ts b/libs/tools/src/generators/hlm-to-nx-generator/lib/get-project-names.ts index ced1b1203..d49ae5034 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/lib/get-project-names.ts +++ b/libs/tools/src/generators/hlm-to-nx-generator/lib/get-project-names.ts @@ -1,13 +1,13 @@ import { getProjects, Tree } from '@nx/devkit'; export const getProjectsAndNames = (tree: Tree) => { - const projectNames: string[] = []; - const projects = getProjects(tree); + const projectNames: string[] = []; + const projects = getProjects(tree); - projects.forEach((projectConfiguration, projectName) => { - if (projectConfiguration.projectType === 'library' && projectName.includes('helm')) { - projectNames.push(projectName); - } - }); - return { projects, projectNames }; + projects.forEach((projectConfiguration, projectName) => { + if (projectConfiguration.projectType === 'library' && projectName.includes('helm')) { + projectNames.push(projectName); + } + }); + return { projects, projectNames }; }; diff --git a/libs/tools/src/generators/hlm-to-nx-generator/schema.d.ts b/libs/tools/src/generators/hlm-to-nx-generator/schema.d.ts index aa133a127..1ae720b86 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/schema.d.ts +++ b/libs/tools/src/generators/hlm-to-nx-generator/schema.d.ts @@ -1,3 +1,3 @@ export interface HlmToNxGeneratorGeneratorSchema { - additionalDependencies?: string; + additionalDependencies?: string; } diff --git a/libs/tools/src/generators/hlm-to-nx-generator/schema.json b/libs/tools/src/generators/hlm-to-nx-generator/schema.json index e79bdcdb4..bdd131c9b 100644 --- a/libs/tools/src/generators/hlm-to-nx-generator/schema.json +++ b/libs/tools/src/generators/hlm-to-nx-generator/schema.json @@ -1,7 +1,7 @@ { - "$schema": "http://json-schema.org/schema", - "$id": "HlmToNxGenerator", - "title": "", - "type": "object", - "properties": {} + "$schema": "http://json-schema.org/schema", + "$id": "HlmToNxGenerator", + "title": "", + "type": "object", + "properties": {} } diff --git a/libs/tools/tsconfig.json b/libs/tools/tsconfig.json index 19b9eece4..37deb27ac 100644 --- a/libs/tools/tsconfig.json +++ b/libs/tools/tsconfig.json @@ -1,16 +1,16 @@ { - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "module": "commonjs" - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "module": "commonjs" + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] } diff --git a/libs/tools/tsconfig.lib.json b/libs/tools/tsconfig.lib.json index 33eca2c2c..94b20c39e 100644 --- a/libs/tools/tsconfig.lib.json +++ b/libs/tools/tsconfig.lib.json @@ -1,10 +1,10 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "declaration": true, - "types": ["node"] - }, - "include": ["src/**/*.ts"], - "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "declaration": true, + "types": ["node"] + }, + "include": ["src/**/*.ts"], + "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"] } diff --git a/libs/tools/tsconfig.spec.json b/libs/tools/tsconfig.spec.json index f6d8ffcc9..ceb45ea29 100644 --- a/libs/tools/tsconfig.spec.json +++ b/libs/tools/tsconfig.spec.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/accordion/accordion.stories.ts b/libs/ui/accordion/accordion.stories.ts index 37528ad87..23fd45095 100644 --- a/libs/ui/accordion/accordion.stories.ts +++ b/libs/ui/accordion/accordion.stories.ts @@ -4,21 +4,21 @@ import { BrnAccordionComponent, BrnAccordionImports } from './brain/src'; import { HlmAccordionImports } from './helm/src'; const meta: Meta = { - title: 'Accordion', - component: BrnAccordionComponent, - decorators: [ - moduleMetadata({ - imports: [BrnAccordionImports, HlmAccordionImports], - }), - ], + title: 'Accordion', + component: BrnAccordionComponent, + decorators: [ + moduleMetadata({ + imports: [BrnAccordionImports, HlmAccordionImports], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` @@ -51,5 +51,5 @@ export const Default: Story = { `, - }), + }), }; diff --git a/libs/ui/accordion/brain/.eslintrc.json b/libs/ui/accordion/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/accordion/brain/.eslintrc.json +++ b/libs/ui/accordion/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/accordion/brain/jest.config.ts b/libs/ui/accordion/brain/jest.config.ts index d7d7d0d26..365b6f9b9 100644 --- a/libs/ui/accordion/brain/jest.config.ts +++ b/libs/ui/accordion/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-accordion-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-accordion-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/accordion/brain/ng-package.json b/libs/ui/accordion/brain/ng-package.json index 24fce7fbb..7dfb7964f 100644 --- a/libs/ui/accordion/brain/ng-package.json +++ b/libs/ui/accordion/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/accordion/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/accordion/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/accordion/brain/package.json b/libs/ui/accordion/brain/package.json index b2f811460..d12215adb 100644 --- a/libs/ui/accordion/brain/package.json +++ b/libs/ui/accordion/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-accordion-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@angular/cdk": "17.0.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-accordion-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@angular/cdk": "17.0.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/accordion/brain/project.json b/libs/ui/accordion/brain/project.json index 5e7833776..0a00c0c32 100644 --- a/libs/ui/accordion/brain/project.json +++ b/libs/ui/accordion/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-accordion-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/accordion/brain/src", - "prefix": "spartan", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/accordion/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/accordion/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/accordion/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/accordion/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/accordion/brain/**/*.ts", - "libs/ui/accordion/brain/**/*.html", - "libs/ui/accordion/brain/package.json", - "libs/ui/accordion/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-accordion-brain" - } - } - } + "name": "ui-accordion-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/accordion/brain/src", + "prefix": "spartan", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/accordion/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/accordion/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/accordion/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/accordion/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/accordion/brain/**/*.ts", + "libs/ui/accordion/brain/**/*.html", + "libs/ui/accordion/brain/package.json", + "libs/ui/accordion/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-accordion-brain" + } + } + } } diff --git a/libs/ui/accordion/brain/src/index.ts b/libs/ui/accordion/brain/src/index.ts index b1849e953..4cca0d2bc 100644 --- a/libs/ui/accordion/brain/src/index.ts +++ b/libs/ui/accordion/brain/src/index.ts @@ -1,24 +1,24 @@ import { NgModule } from '@angular/core'; -import { BrnAccordionComponent } from './lib/brn-accordion.component'; import { BrnAccordionContentComponent } from './lib/brn-accordion-content.component'; import { BrnAccordionItemComponent } from './lib/brn-accordion-item.component'; import { BrnAccordionTriggerComponent } from './lib/brn-accordion-trigger.component'; +import { BrnAccordionComponent } from './lib/brn-accordion.component'; -export * from './lib/brn-accordion.component'; export * from './lib/brn-accordion-content.component'; export * from './lib/brn-accordion-item.component'; export * from './lib/brn-accordion-trigger.component'; +export * from './lib/brn-accordion.component'; export const BrnAccordionImports = [ - BrnAccordionComponent, - BrnAccordionContentComponent, - BrnAccordionItemComponent, - BrnAccordionTriggerComponent, + BrnAccordionComponent, + BrnAccordionContentComponent, + BrnAccordionItemComponent, + BrnAccordionTriggerComponent, ] as const; @NgModule({ - imports: [...BrnAccordionImports], - exports: [...BrnAccordionImports], + imports: [...BrnAccordionImports], + exports: [...BrnAccordionImports], }) export class BrnAccordionModule {} diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion-content.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion-content.component.ts index ea0e93a4c..1948580e8 100644 --- a/libs/ui/accordion/brain/src/lib/brn-accordion-content.component.ts +++ b/libs/ui/accordion/brain/src/lib/brn-accordion-content.component.ts @@ -1,63 +1,65 @@ import { - AfterViewInit, - ChangeDetectionStrategy, - Component, - ElementRef, - forwardRef, - inject, - signal, - ViewEncapsulation, + AfterViewInit, + ChangeDetectionStrategy, + Component, + ElementRef, + forwardRef, + inject, + signal, + ViewEncapsulation, } from '@angular/core'; -import { BrnAccordionItemComponent } from './brn-accordion-item.component'; import { CustomElementClassSettable, SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core'; +import { BrnAccordionItemComponent } from './brn-accordion-item.component'; @Component({ - selector: 'brn-accordion-content', - standalone: true, - providers: [ - { - provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, - useExisting: forwardRef(() => BrnAccordionContentComponent), - }, - ], - host: { - '[attr.data-state]': 'state()', - '[attr.aria-labelledby]': 'ariaLabeledBy', - role: 'region', - '[style.--brn-collapsible-content-height]': 'initialHeight + "px"', - '[id]': 'id', - }, - template: `

- -

`, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + selector: 'brn-accordion-content', + standalone: true, + providers: [ + { + provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, + useExisting: forwardRef(() => BrnAccordionContentComponent), + }, + ], + host: { + '[attr.data-state]': 'state()', + '[attr.aria-labelledby]': 'ariaLabeledBy', + role: 'region', + '[style.--brn-collapsible-content-height]': 'initialHeight + "px"', + '[id]': 'id', + }, + template: ` +

+ +

+ `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, }) export class BrnAccordionContentComponent implements AfterViewInit, CustomElementClassSettable { - private _item = inject(BrnAccordionItemComponent); - private _element = inject(ElementRef).nativeElement; + private _item = inject(BrnAccordionItemComponent); + private _element = inject(ElementRef).nativeElement; - public state = this._item.state; - public id = 'brn-accordion-content-' + this._item.id; - public ariaLabeledBy = 'brn-accordion-trigger-' + this._item.id; - protected initialHeight = 0; + public state = this._item.state; + public id = 'brn-accordion-content-' + this._item.id; + public ariaLabeledBy = 'brn-accordion-trigger-' + this._item.id; + protected initialHeight = 0; - private readonly _contentClass = signal(''); - public readonly contentClass = this._contentClass.asReadonly(); + private readonly _contentClass = signal(''); + public readonly contentClass = this._contentClass.asReadonly(); - constructor() { - if (!this._item) { - throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.'); - } - } + constructor() { + if (!this._item) { + throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.'); + } + } - public ngAfterViewInit() { - Promise.resolve().then(() => { - this.initialHeight = this._element.offsetHeight; - }); - } + public ngAfterViewInit() { + Promise.resolve().then(() => { + this.initialHeight = this._element.offsetHeight; + }); + } - public setClassToCustomElement(classes: string) { - this._contentClass.set(classes); - } + public setClassToCustomElement(classes: string) { + this._contentClass.set(classes); + } } diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion-item.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion-item.component.ts index 762e0046f..b4711d9f7 100644 --- a/libs/ui/accordion/brain/src/lib/brn-accordion-item.component.ts +++ b/libs/ui/accordion/brain/src/lib/brn-accordion-item.component.ts @@ -4,22 +4,24 @@ import { BrnAccordionComponent } from './brn-accordion.component'; let itemIdGenerator = 0; @Component({ - selector: 'brn-accordion-item', - standalone: true, - host: { - '[attr.data-state]': 'state()', - }, - template: ` `, + selector: 'brn-accordion-item', + standalone: true, + host: { + '[attr.data-state]': 'state()', + }, + template: ` + + `, }) export class BrnAccordionItemComponent { - private _accordion = inject(BrnAccordionComponent); + private _accordion = inject(BrnAccordionComponent); - public id = itemIdGenerator++; - public state = computed(() => (this._accordion.openItemIds().includes(this.id) ? 'open' : 'closed')); + public id = itemIdGenerator++; + public state = computed(() => (this._accordion.openItemIds().includes(this.id) ? 'open' : 'closed')); - constructor() { - if (!this._accordion) { - throw Error('Accordion trigger can only be used inside an Accordion. Add brnAccordion to ancestor.'); - } - } + constructor() { + if (!this._accordion) { + throw Error('Accordion trigger can only be used inside an Accordion. Add brnAccordion to ancestor.'); + } + } } diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.component.ts index 0228b001e..ee1ab3359 100644 --- a/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.component.ts +++ b/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.component.ts @@ -1,60 +1,62 @@ import { Component, ElementRef, forwardRef, inject, signal } from '@angular/core'; -import { BrnAccordionComponent } from './brn-accordion.component'; -import { BrnAccordionItemComponent } from './brn-accordion-item.component'; import { CustomElementClassSettable, SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core'; +import { BrnAccordionItemComponent } from './brn-accordion-item.component'; +import { BrnAccordionComponent } from './brn-accordion.component'; @Component({ - selector: 'brn-accordion-trigger', - standalone: true, - providers: [ - { - provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, - useExisting: forwardRef(() => BrnAccordionTriggerComponent), - }, - ], - host: { - '[attr.data-state]': 'state()', - '[attr.aria-expanded]': 'state() === "open"', - '[attr.aria-controls]': 'ariaControls', - role: 'heading', - 'aria-level': '3', - '[id]': 'id', - }, - template: ` `, + selector: 'brn-accordion-trigger', + standalone: true, + providers: [ + { + provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, + useExisting: forwardRef(() => BrnAccordionTriggerComponent), + }, + ], + host: { + '[attr.data-state]': 'state()', + '[attr.aria-expanded]': 'state() === "open"', + '[attr.aria-controls]': 'ariaControls', + role: 'heading', + 'aria-level': '3', + '[id]': 'id', + }, + template: ` + + `, }) export class BrnAccordionTriggerComponent implements CustomElementClassSettable { - private _accordion = inject(BrnAccordionComponent); - private _item = inject(BrnAccordionItemComponent); - private _elementRef = inject(ElementRef); - - public state = this._item.state; - public id = 'brn-accordion-trigger-' + this._item.id; - public ariaControls = 'brn-accordion-content-' + this._item.id; - - private _btnClass = signal(''); - public btnClass = this._btnClass.asReadonly(); - - constructor() { - if (!this._accordion) { - throw Error('Accordion trigger can only be used inside an Accordion. Add brnAccordion to ancestor.'); - } - - if (!this._item) { - throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.'); - } - } - - public setClassToCustomElement(classes: string) { - this._btnClass.set(classes); - } - - public focus() { - this._elementRef.nativeElement.focus(); - } - - protected toggleAccordionItem() { - this._accordion.toggleItem(this._item.id); - } + private _accordion = inject(BrnAccordionComponent); + private _item = inject(BrnAccordionItemComponent); + private _elementRef = inject(ElementRef); + + public state = this._item.state; + public id = 'brn-accordion-trigger-' + this._item.id; + public ariaControls = 'brn-accordion-content-' + this._item.id; + + private _btnClass = signal(''); + public btnClass = this._btnClass.asReadonly(); + + constructor() { + if (!this._accordion) { + throw Error('Accordion trigger can only be used inside an Accordion. Add brnAccordion to ancestor.'); + } + + if (!this._item) { + throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.'); + } + } + + public setClassToCustomElement(classes: string) { + this._btnClass.set(classes); + } + + public focus() { + this._elementRef.nativeElement.focus(); + } + + protected toggleAccordionItem() { + this._accordion.toggleItem(this._item.id); + } } diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts index ce4accb53..7c652ab82 100644 --- a/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts +++ b/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts @@ -1,59 +1,61 @@ -import { AfterContentInit, Component, computed, ContentChildren, Input, QueryList, signal } from '@angular/core'; -import { BrnAccordionTriggerComponent } from './brn-accordion-trigger.component'; import { FocusKeyManager } from '@angular/cdk/a11y'; +import { AfterContentInit, Component, computed, ContentChildren, Input, QueryList, signal } from '@angular/core'; import { rxHostListener } from '@spartan-ng/ui-core'; +import { BrnAccordionTriggerComponent } from './brn-accordion-trigger.component'; @Component({ - selector: 'brn-accordion', - standalone: true, - host: { - '[attr.data-state]': 'state()', - '[attr.data-orientation]': 'orientation', - }, - template: ` `, + selector: 'brn-accordion', + standalone: true, + host: { + '[attr.data-state]': 'state()', + '[attr.data-orientation]': 'orientation', + }, + template: ` + + `, }) export class BrnAccordionComponent implements AfterContentInit { - @Input() - public type: 'single' | 'multiple' = 'single'; - @Input() - public dir: 'ltr' | 'rtl' | null = null; - @Input() - public orientation: 'horizontal' | 'vertical' = 'horizontal'; + @Input() + public type: 'single' | 'multiple' = 'single'; + @Input() + public dir: 'ltr' | 'rtl' | null = null; + @Input() + public orientation: 'horizontal' | 'vertical' = 'horizontal'; - private _openItemIds = signal([]); - public openItemIds = this._openItemIds.asReadonly(); - public state = computed(() => (this._openItemIds().length > 0 ? 'open' : 'closed')); - private _keyManager?: FocusKeyManager; - private _keyDownListener = rxHostListener('keydown'); + private _openItemIds = signal([]); + public openItemIds = this._openItemIds.asReadonly(); + public state = computed(() => (this._openItemIds().length > 0 ? 'open' : 'closed')); + private _keyManager?: FocusKeyManager; + private _keyDownListener = rxHostListener('keydown'); - @ContentChildren(BrnAccordionTriggerComponent, { descendants: true }) - public triggers?: QueryList; + @ContentChildren(BrnAccordionTriggerComponent, { descendants: true }) + public triggers?: QueryList; - public ngAfterContentInit() { - if (!this.triggers) { - return; - } - this._keyManager = new FocusKeyManager(this.triggers) - .withHorizontalOrientation(this.dir) - .withHomeAndEnd() - .withPageUpDown() - .withWrap(); + public ngAfterContentInit() { + if (!this.triggers) { + return; + } + this._keyManager = new FocusKeyManager(this.triggers) + .withHorizontalOrientation(this.dir) + .withHomeAndEnd() + .withPageUpDown() + .withWrap(); - if (this.orientation === 'vertical') { - this._keyManager.withVerticalOrientation(); - } - this._keyDownListener.subscribe((event) => { - this._keyManager?.onKeydown(event as KeyboardEvent); - }); - } + if (this.orientation === 'vertical') { + this._keyManager.withVerticalOrientation(); + } + this._keyDownListener.subscribe((event) => { + this._keyManager?.onKeydown(event as KeyboardEvent); + }); + } - public toggleItem(id: number) { - if (this._openItemIds().includes(id)) { - this._openItemIds.update((ids) => ids.filter((openId) => id == openId)); - return; - } else if (this.type === 'single') { - this._openItemIds.set([]); - } - this._openItemIds.update((ids) => [...ids, id]); - } + public toggleItem(id: number) { + if (this._openItemIds().includes(id)) { + this._openItemIds.update((ids) => ids.filter((openId) => id == openId)); + return; + } else if (this.type === 'single') { + this._openItemIds.set([]); + } + this._openItemIds.update((ids) => [...ids, id]); + } } diff --git a/libs/ui/accordion/brain/src/test-setup.ts b/libs/ui/accordion/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/accordion/brain/src/test-setup.ts +++ b/libs/ui/accordion/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/accordion/brain/tsconfig.json b/libs/ui/accordion/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/accordion/brain/tsconfig.json +++ b/libs/ui/accordion/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/accordion/brain/tsconfig.lib.json b/libs/ui/accordion/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/accordion/brain/tsconfig.lib.json +++ b/libs/ui/accordion/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/accordion/brain/tsconfig.lib.prod.json b/libs/ui/accordion/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/accordion/brain/tsconfig.lib.prod.json +++ b/libs/ui/accordion/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/accordion/brain/tsconfig.spec.json b/libs/ui/accordion/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/accordion/brain/tsconfig.spec.json +++ b/libs/ui/accordion/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/accordion/helm/.eslintrc.json b/libs/ui/accordion/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/accordion/helm/.eslintrc.json +++ b/libs/ui/accordion/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/accordion/helm/jest.config.ts b/libs/ui/accordion/helm/jest.config.ts index af87dfad6..aacfbb1c1 100644 --- a/libs/ui/accordion/helm/jest.config.ts +++ b/libs/ui/accordion/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-accordion-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-accordion-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/accordion/helm/ng-package.json b/libs/ui/accordion/helm/ng-package.json index d3d069d05..6dbc559f6 100644 --- a/libs/ui/accordion/helm/ng-package.json +++ b/libs/ui/accordion/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/accordion/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/accordion/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/accordion/helm/package.json b/libs/ui/accordion/helm/package.json index eff1987e2..695067f90 100644 --- a/libs/ui/accordion/helm/package.json +++ b/libs/ui/accordion/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-accordion-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-accordion-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/accordion/helm/project.json b/libs/ui/accordion/helm/project.json index 19c3a35a0..c5a9198e2 100644 --- a/libs/ui/accordion/helm/project.json +++ b/libs/ui/accordion/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-accordion-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/accordion/helm/src", - "prefix": "hlm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/accordion/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/accordion/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/accordion/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/accordion/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/accordion/helm/**/*.ts", - "libs/ui/accordion/helm/**/*.html", - "libs/ui/accordion/helm/package.json", - "libs/ui/accordion/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-accordion-helm" - } - } - } + "name": "ui-accordion-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/accordion/helm/src", + "prefix": "hlm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/accordion/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/accordion/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/accordion/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/accordion/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/accordion/helm/**/*.ts", + "libs/ui/accordion/helm/**/*.html", + "libs/ui/accordion/helm/package.json", + "libs/ui/accordion/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-accordion-helm" + } + } + } } diff --git a/libs/ui/accordion/helm/src/index.ts b/libs/ui/accordion/helm/src/index.ts index fc9d7ddc7..b2fb77368 100644 --- a/libs/ui/accordion/helm/src/index.ts +++ b/libs/ui/accordion/helm/src/index.ts @@ -1,27 +1,27 @@ import { NgModule } from '@angular/core'; -import { HlmAccordionDirective } from './lib/hlm-accordion.directive'; -import { HlmAccordionItemDirective } from './lib/hlm-accordion-item.directive'; -import { HlmAccordionTriggerDirective } from './lib/hlm-accordion-trigger.directive'; import { HlmAccordionContentDirective } from './lib/hlm-accordion-content.directive'; import { HlmAccordionIconComponent } from './lib/hlm-accordion-icon.component'; +import { HlmAccordionItemDirective } from './lib/hlm-accordion-item.directive'; +import { HlmAccordionTriggerDirective } from './lib/hlm-accordion-trigger.directive'; +import { HlmAccordionDirective } from './lib/hlm-accordion.directive'; -export * from './lib/hlm-accordion.directive'; -export * from './lib/hlm-accordion-item.directive'; -export * from './lib/hlm-accordion-trigger.directive'; export * from './lib/hlm-accordion-content.directive'; export * from './lib/hlm-accordion-icon.component'; +export * from './lib/hlm-accordion-item.directive'; +export * from './lib/hlm-accordion-trigger.directive'; +export * from './lib/hlm-accordion.directive'; export const HlmAccordionImports = [ - HlmAccordionDirective, - HlmAccordionItemDirective, - HlmAccordionTriggerDirective, - HlmAccordionContentDirective, - HlmAccordionIconComponent, + HlmAccordionDirective, + HlmAccordionItemDirective, + HlmAccordionTriggerDirective, + HlmAccordionContentDirective, + HlmAccordionIconComponent, ] as const; @NgModule({ - imports: [...HlmAccordionImports], - exports: [...HlmAccordionImports], + imports: [...HlmAccordionImports], + exports: [...HlmAccordionImports], }) export class HlmAccordionModule {} diff --git a/libs/ui/accordion/helm/src/lib/hlm-accordion-content.directive.ts b/libs/ui/accordion/helm/src/lib/hlm-accordion-content.directive.ts index a8506cf34..048e43742 100644 --- a/libs/ui/accordion/helm/src/lib/hlm-accordion-content.directive.ts +++ b/libs/ui/accordion/helm/src/lib/hlm-accordion-content.directive.ts @@ -1,87 +1,87 @@ +import { isPlatformBrowser } from '@angular/common'; import { - computed, - Directive, - effect, - ElementRef, - HostBinding, - inject, - Injector, - Input, - OnInit, - PLATFORM_ID, - signal, + computed, + Directive, + effect, + ElementRef, + HostBinding, + inject, + Injector, + Input, + OnInit, + PLATFORM_ID, + signal, } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core'; -import { isPlatformBrowser } from '@angular/common'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAccordionContent],brn-accordion-content[hlm]', - standalone: true, - host: { - '[style.height]': 'cssHeight()', - }, + selector: '[hlmAccordionContent],brn-accordion-content[hlm]', + standalone: true, + host: { + '[style.height]': 'cssHeight()', + }, }) export class HlmAccordionContentDirective implements OnInit { - private readonly _host = injectCustomClassSettable({ optional: true }); - private readonly _element = inject(ElementRef).nativeElement; - private readonly _injector = inject(Injector); - private readonly _platformId = inject(PLATFORM_ID); + private readonly _host = injectCustomClassSettable({ optional: true }); + private readonly _element = inject(ElementRef).nativeElement; + private readonly _injector = inject(Injector); + private readonly _platformId = inject(PLATFORM_ID); - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; - private _changes?: MutationObserver; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; + private _changes?: MutationObserver; - public readonly height = signal('-1'); - public readonly cssHeight = computed(() => (this.height() === '-1' ? 'auto' : this.height())); - public readonly state = signal('closed'); + public readonly height = signal('-1'); + public readonly cssHeight = computed(() => (this.height() === '-1' ? 'auto' : this.height())); + public readonly state = signal('closed'); - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - public ngOnInit() { - this._host?.setClassToCustomElement('pt-1 pb-4'); + public ngOnInit() { + this._host?.setClassToCustomElement('pt-1 pb-4'); - if (isPlatformBrowser(this._platformId)) { - this._changes = new MutationObserver((mutations: MutationRecord[]) => { - mutations.forEach((mutation: MutationRecord) => { - if (mutation.attributeName !== 'data-state') return; - // eslint-disable-next-line - const state = (mutation.target as any).attributes.getNamedItem(mutation.attributeName)?.value; - this.state.set(state); - }); - }); - } + if (isPlatformBrowser(this._platformId)) { + this._changes = new MutationObserver((mutations: MutationRecord[]) => { + mutations.forEach((mutation: MutationRecord) => { + if (mutation.attributeName !== 'data-state') return; + // eslint-disable-next-line + const state = (mutation.target as any).attributes.getNamedItem(mutation.attributeName)?.value; + this.state.set(state); + }); + }); + } - Promise.resolve().then(() => { - this._changes?.observe(this._element, { - attributes: true, - childList: true, - characterData: true, - }); - }); + Promise.resolve().then(() => { + this._changes?.observe(this._element, { + attributes: true, + childList: true, + characterData: true, + }); + }); - effect( - () => { - const isOpen = this.state() === 'open'; - Promise.resolve().then(() => { - this.height.set( - isOpen ? getComputedStyle(this._element).getPropertyValue('--brn-collapsible-content-height') : '0px' - ); - }); - }, - { - injector: this._injector, - allowSignalWrites: true, - } - ); - } + effect( + () => { + const isOpen = this.state() === 'open'; + Promise.resolve().then(() => { + this.height.set( + isOpen ? getComputedStyle(this._element).getPropertyValue('--brn-collapsible-content-height') : '0px', + ); + }); + }, + { + injector: this._injector, + allowSignalWrites: true, + }, + ); + } - generateClass() { - return hlm('overflow-hidden text-sm transition-all', this._inputs); - } + generateClass() { + return hlm('overflow-hidden text-sm transition-all', this._inputs); + } } diff --git a/libs/ui/accordion/helm/src/lib/hlm-accordion-icon.component.ts b/libs/ui/accordion/helm/src/lib/hlm-accordion-icon.component.ts index afc218ddd..72a5f67cb 100644 --- a/libs/ui/accordion/helm/src/lib/hlm-accordion-icon.component.ts +++ b/libs/ui/accordion/helm/src/lib/hlm-accordion-icon.component.ts @@ -1,32 +1,28 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-accordion-icon', - standalone: true, - template: ` - - `, + selector: 'hlm-accordion-icon', + standalone: true, + template: ` + + + + `, }) export class HlmAccordionIconComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('inline-block h-4 w-4 transition-transform duration-200', this._inputs); - } + generateClass() { + return hlm('inline-block h-4 w-4 transition-transform duration-200', this._inputs); + } } diff --git a/libs/ui/accordion/helm/src/lib/hlm-accordion-item.directive.ts b/libs/ui/accordion/helm/src/lib/hlm-accordion-item.directive.ts index 9cd5ddc9b..5c86e6ecb 100644 --- a/libs/ui/accordion/helm/src/lib/hlm-accordion-item.directive.ts +++ b/libs/ui/accordion/helm/src/lib/hlm-accordion-item.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAccordionItem],brn-accordion-item[hlm]', - standalone: true, + selector: '[hlmAccordionItem],brn-accordion-item[hlm]', + standalone: true, }) export class HlmAccordionItemDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-1 flex-col border-b border-border', this._inputs); - } + generateClass() { + return hlm('flex flex-1 flex-col border-b border-border', this._inputs); + } } diff --git a/libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts b/libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts index e8f1b576a..ebcf80778 100644 --- a/libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts +++ b/libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts @@ -1,38 +1,38 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAccordionTrigger],brn-accordion-trigger[hlm]', - standalone: true, - host: { - '[style.--tw-ring-offset-shadow]': '"0 0 #000"', - }, + selector: '[hlmAccordionTrigger],brn-accordion-trigger[hlm]', + standalone: true, + host: { + '[style.--tw-ring-offset-shadow]': '"0 0 #000"', + }, }) export class HlmAccordionTriggerDirective { - private _host = injectCustomClassSettable({ optional: true }); - @HostBinding('class') - private _class = !this._host ? this.generateClass() : ''; - private _inputs: ClassValue = ''; + private _host = injectCustomClassSettable({ optional: true }); + @HostBinding('class') + private _class = !this._host ? this.generateClass() : ''; + private _inputs: ClassValue = ''; - constructor() { - this._host?.setClassToCustomElement(this.generateClass()); - } + constructor() { + this._host?.setClassToCustomElement(this.generateClass()); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - if (this._host) { - this._host?.setClassToCustomElement(this._class); - } else { - this._class = this.generateClass(); - } - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + if (this._host) { + this._host?.setClassToCustomElement(this._class); + } else { + this._class = this.generateClass(); + } + } - generateClass() { - return hlm( - 'w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>hlm-accordion-icon]:rotate-180', - this._inputs - ); - } + generateClass() { + return hlm( + 'w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>hlm-accordion-icon]:rotate-180', + this._inputs, + ); + } } diff --git a/libs/ui/accordion/helm/src/lib/hlm-accordion.directive.ts b/libs/ui/accordion/helm/src/lib/hlm-accordion.directive.ts index 70b6fd4f7..e957f1b6a 100644 --- a/libs/ui/accordion/helm/src/lib/hlm-accordion.directive.ts +++ b/libs/ui/accordion/helm/src/lib/hlm-accordion.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAccordion],brn-accordion[hlm]', - standalone: true, + selector: '[hlmAccordion],brn-accordion[hlm]', + standalone: true, }) export class HlmAccordionDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col', this._inputs); - } + generateClass() { + return hlm('flex flex-col', this._inputs); + } } diff --git a/libs/ui/accordion/helm/src/test-setup.ts b/libs/ui/accordion/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/accordion/helm/src/test-setup.ts +++ b/libs/ui/accordion/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/accordion/helm/tsconfig.json b/libs/ui/accordion/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/accordion/helm/tsconfig.json +++ b/libs/ui/accordion/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/accordion/helm/tsconfig.lib.json b/libs/ui/accordion/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/accordion/helm/tsconfig.lib.json +++ b/libs/ui/accordion/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/accordion/helm/tsconfig.lib.prod.json b/libs/ui/accordion/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/accordion/helm/tsconfig.lib.prod.json +++ b/libs/ui/accordion/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/accordion/helm/tsconfig.spec.json b/libs/ui/accordion/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/accordion/helm/tsconfig.spec.json +++ b/libs/ui/accordion/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/alert-dialog/alert-dialog.stories.ts b/libs/ui/alert-dialog/alert-dialog.stories.ts index 35ec147eb..465f9bacf 100644 --- a/libs/ui/alert-dialog/alert-dialog.stories.ts +++ b/libs/ui/alert-dialog/alert-dialog.stories.ts @@ -1,27 +1,27 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; -import { BrnAlertDialogImports } from './brain/src'; -import { HlmAlertDialogImports } from './helm/src'; -import { HlmIconComponent } from '../icon/helm/src'; import { provideIcons } from '@ng-icons/core'; import { radixCross1 } from '@ng-icons/radix-icons'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; +import { BrnAlertDialogImports } from './brain/src'; +import { HlmAlertDialogImports } from './helm/src'; const meta: Meta<{}> = { - title: 'Alert Dialog', - decorators: [ - moduleMetadata({ - imports: [BrnAlertDialogImports, HlmAlertDialogImports, HlmButtonDirective, HlmIconComponent], - providers: [provideIcons({ radixCross1 })], - }), - ], + title: 'Alert Dialog', + decorators: [ + moduleMetadata({ + imports: [BrnAlertDialogImports, HlmAlertDialogImports, HlmButtonDirective, HlmIconComponent], + providers: [provideIcons({ radixCross1 })], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` @@ -44,5 +44,5 @@ export const Default: Story = { `, - }), + }), }; diff --git a/libs/ui/alert-dialog/brain/.eslintrc.json b/libs/ui/alert-dialog/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/alert-dialog/brain/.eslintrc.json +++ b/libs/ui/alert-dialog/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/alert-dialog/brain/jest.config.ts b/libs/ui/alert-dialog/brain/jest.config.ts index 64bfd87c1..008a10512 100644 --- a/libs/ui/alert-dialog/brain/jest.config.ts +++ b/libs/ui/alert-dialog/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-alert-dialog-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-alert-dialog-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/alert-dialog/brain/ng-package.json b/libs/ui/alert-dialog/brain/ng-package.json index 38edba7cc..153af3e68 100644 --- a/libs/ui/alert-dialog/brain/ng-package.json +++ b/libs/ui/alert-dialog/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/alert-dialog/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/alert-dialog/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/alert-dialog/brain/package.json b/libs/ui/alert-dialog/brain/package.json index e8d9532e8..facbda7ce 100644 --- a/libs/ui/alert-dialog/brain/package.json +++ b/libs/ui/alert-dialog/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-alertdialog-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.311", - "@spartan-ng/ui-core": "0.0.1-alpha.311" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-alertdialog-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.311", + "@spartan-ng/ui-core": "0.0.1-alpha.311" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/alert-dialog/brain/project.json b/libs/ui/alert-dialog/brain/project.json index 1d5521e3e..85dcbd19c 100644 --- a/libs/ui/alert-dialog/brain/project.json +++ b/libs/ui/alert-dialog/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-alert-dialog-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/alert-dialog/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/alert-dialog/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/alert-dialog/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/alert-dialog/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/alert-dialog/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/alert-dialog/brain/**/*.ts", - "libs/ui/alert-dialog/brain/**/*.html", - "libs/ui/alert-dialog/brain/package.json", - "libs/ui/alert-dialog/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-alert-dialog-brain" - } - } - } + "name": "ui-alert-dialog-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/alert-dialog/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/alert-dialog/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/alert-dialog/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/alert-dialog/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/alert-dialog/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/alert-dialog/brain/**/*.ts", + "libs/ui/alert-dialog/brain/**/*.html", + "libs/ui/alert-dialog/brain/package.json", + "libs/ui/alert-dialog/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-alert-dialog-brain" + } + } + } } diff --git a/libs/ui/alert-dialog/brain/src/index.ts b/libs/ui/alert-dialog/brain/src/index.ts index 3197d052d..11ec874e9 100644 --- a/libs/ui/alert-dialog/brain/src/index.ts +++ b/libs/ui/alert-dialog/brain/src/index.ts @@ -1,33 +1,33 @@ import { NgModule } from '@angular/core'; -import { BrnAlertDialogComponent } from './lib/brn-alert-dialog.component'; -import { BrnAlertDialogOverlayComponent } from './lib/brn-alert-dialog-overlay.component'; -import { BrnAlertDialogTriggerDirective } from './lib/brn-alert-dialog-trigger.directive'; import { BrnAlertDialogCloseDirective } from './lib/brn-alert-dialog-close.directive'; import { BrnAlertDialogContentDirective } from './lib/brn-alert-dialog-content.directive'; -import { BrnAlertDialogTitleDirective } from './lib/brn-alert-dialog-title.directive'; import { BrnAlertDialogDescriptionDirective } from './lib/brn-alert-dialog-description.directive'; +import { BrnAlertDialogOverlayComponent } from './lib/brn-alert-dialog-overlay.component'; +import { BrnAlertDialogTitleDirective } from './lib/brn-alert-dialog-title.directive'; +import { BrnAlertDialogTriggerDirective } from './lib/brn-alert-dialog-trigger.directive'; +import { BrnAlertDialogComponent } from './lib/brn-alert-dialog.component'; -export * from './lib/brn-alert-dialog.component'; -export * from './lib/brn-alert-dialog-overlay.component'; -export * from './lib/brn-alert-dialog-trigger.directive'; export * from './lib/brn-alert-dialog-close.directive'; export * from './lib/brn-alert-dialog-content.directive'; -export * from './lib/brn-alert-dialog-title.directive'; export * from './lib/brn-alert-dialog-description.directive'; +export * from './lib/brn-alert-dialog-overlay.component'; +export * from './lib/brn-alert-dialog-title.directive'; +export * from './lib/brn-alert-dialog-trigger.directive'; +export * from './lib/brn-alert-dialog.component'; export const BrnAlertDialogImports = [ - BrnAlertDialogComponent, - BrnAlertDialogOverlayComponent, - BrnAlertDialogTriggerDirective, - BrnAlertDialogCloseDirective, - BrnAlertDialogContentDirective, - BrnAlertDialogTitleDirective, - BrnAlertDialogDescriptionDirective, + BrnAlertDialogComponent, + BrnAlertDialogOverlayComponent, + BrnAlertDialogTriggerDirective, + BrnAlertDialogCloseDirective, + BrnAlertDialogContentDirective, + BrnAlertDialogTitleDirective, + BrnAlertDialogDescriptionDirective, ] as const; @NgModule({ - imports: [...BrnAlertDialogImports], - exports: [...BrnAlertDialogImports], + imports: [...BrnAlertDialogImports], + exports: [...BrnAlertDialogImports], }) export class BrnAlertDialogModule {} diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-close.directive.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-close.directive.ts index 3235253f3..6bf647456 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-close.directive.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-close.directive.ts @@ -2,7 +2,7 @@ import { Directive } from '@angular/core'; import { BrnDialogCloseDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: 'button[brnAlertDialogClose]', - standalone: true, + selector: 'button[brnAlertDialogClose]', + standalone: true, }) export class BrnAlertDialogCloseDirective extends BrnDialogCloseDirective {} diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-content.directive.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-content.directive.ts index 1e8fd8bcc..b1c961ffc 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-content.directive.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-content.directive.ts @@ -3,13 +3,13 @@ import { EXPOSES_STATE_TOKEN } from '@spartan-ng/ui-core'; import { BrnDialogContentDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: '[brnAlertDialogContent]', - standalone: true, - providers: [ - { - provide: EXPOSES_STATE_TOKEN, - useExisting: forwardRef(() => BrnAlertDialogContentDirective), - }, - ], + selector: '[brnAlertDialogContent]', + standalone: true, + providers: [ + { + provide: EXPOSES_STATE_TOKEN, + useExisting: forwardRef(() => BrnAlertDialogContentDirective), + }, + ], }) export class BrnAlertDialogContentDirective extends BrnDialogContentDirective {} diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-description.directive.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-description.directive.ts index c2c3cf685..fc6b1771b 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-description.directive.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-description.directive.ts @@ -2,10 +2,10 @@ import { Directive } from '@angular/core'; import { BrnDialogDescriptionDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: '[brnAlertDialogDescription]', - standalone: true, - host: { - '[id]': '_id()', - }, + selector: '[brnAlertDialogDescription]', + standalone: true, + host: { + '[id]': '_id()', + }, }) export class BrnAlertDialogDescriptionDirective extends BrnDialogDescriptionDirective {} diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-overlay.component.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-overlay.component.ts index 0ea29259d..fb30e6409 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-overlay.component.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-overlay.component.ts @@ -3,16 +3,16 @@ import { SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core'; import { BrnDialogOverlayComponent } from '@spartan-ng/ui-dialog-brain'; @Component({ - selector: 'brn-alert-dialog-overlay', - standalone: true, - providers: [ - { - provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, - useExisting: forwardRef(() => BrnAlertDialogOverlayComponent), - }, - ], - template: ``, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + selector: 'brn-alert-dialog-overlay', + standalone: true, + providers: [ + { + provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, + useExisting: forwardRef(() => BrnAlertDialogOverlayComponent), + }, + ], + template: ``, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, }) export class BrnAlertDialogOverlayComponent extends BrnDialogOverlayComponent {} diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-title.directive.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-title.directive.ts index 5bc49634f..8b2231221 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-title.directive.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-title.directive.ts @@ -2,10 +2,10 @@ import { Directive } from '@angular/core'; import { BrnDialogTitleDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: '[brnAlertDialogTitle]', - standalone: true, - host: { - '[id]': '_id()', - }, + selector: '[brnAlertDialogTitle]', + standalone: true, + host: { + '[id]': '_id()', + }, }) export class BrnAlertDialogTitleDirective extends BrnDialogTitleDirective {} diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-trigger.directive.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-trigger.directive.ts index f8a412271..68278815b 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-trigger.directive.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-trigger.directive.ts @@ -3,20 +3,20 @@ import { BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain'; import { BrnAlertDialogComponent } from './brn-alert-dialog.component'; @Directive({ - selector: 'button[brnAlertDialogTrigger],button[brnAlertDialogTriggerFor]', - standalone: true, - host: { - '[id]': '_id()', - '(click)': 'open()', - 'aria-haspopup': 'dialog', - '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", - '[attr.data-state]': 'state()', - '[attr.aria-controls]': 'dialogId', - }, + selector: 'button[brnAlertDialogTrigger],button[brnAlertDialogTriggerFor]', + standalone: true, + host: { + '[id]': '_id()', + '(click)': 'open()', + 'aria-haspopup': 'dialog', + '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", + '[attr.data-state]': 'state()', + '[attr.aria-controls]': 'dialogId', + }, }) export class BrnAlertDialogTriggerDirective extends BrnDialogTriggerDirective { - @Input() - set brnAlertDialogTriggerFor(brnDialog: BrnAlertDialogComponent) { - super.brnDialogTriggerFor = brnDialog; - } + @Input() + set brnAlertDialogTriggerFor(brnDialog: BrnAlertDialogComponent) { + super.brnDialogTriggerFor = brnDialog; + } } diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts index 2412fb219..de1449ba1 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts +++ b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts @@ -2,24 +2,26 @@ import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } fro import { BrnDialogComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain'; @Component({ - selector: 'brn-alert-dialog', - standalone: true, - template: ` `, - providers: [ - provideBrnDialog(), - { - provide: BrnDialogComponent, - useExisting: forwardRef(() => BrnAlertDialogComponent), - }, - ], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - exportAs: 'brnAlertDialog', + selector: 'brn-alert-dialog', + standalone: true, + template: ` + + `, + providers: [ + provideBrnDialog(), + { + provide: BrnDialogComponent, + useExisting: forwardRef(() => BrnAlertDialogComponent), + }, + ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + exportAs: 'brnAlertDialog', }) export class BrnAlertDialogComponent extends BrnDialogComponent { - constructor() { - super(); - this._options.role = 'alertdialog'; - this._options.closeOnOutsidePointerEvents = false; - } + constructor() { + super(); + this._options.role = 'alertdialog'; + this._options.closeOnOutsidePointerEvents = false; + } } diff --git a/libs/ui/alert-dialog/brain/src/test-setup.ts b/libs/ui/alert-dialog/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/alert-dialog/brain/src/test-setup.ts +++ b/libs/ui/alert-dialog/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/alert-dialog/brain/tsconfig.json b/libs/ui/alert-dialog/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/alert-dialog/brain/tsconfig.json +++ b/libs/ui/alert-dialog/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/alert-dialog/brain/tsconfig.lib.json b/libs/ui/alert-dialog/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/alert-dialog/brain/tsconfig.lib.json +++ b/libs/ui/alert-dialog/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/alert-dialog/brain/tsconfig.lib.prod.json b/libs/ui/alert-dialog/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/alert-dialog/brain/tsconfig.lib.prod.json +++ b/libs/ui/alert-dialog/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/alert-dialog/brain/tsconfig.spec.json b/libs/ui/alert-dialog/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/alert-dialog/brain/tsconfig.spec.json +++ b/libs/ui/alert-dialog/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/alert-dialog/helm/.eslintrc.json b/libs/ui/alert-dialog/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/alert-dialog/helm/.eslintrc.json +++ b/libs/ui/alert-dialog/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/alert-dialog/helm/jest.config.ts b/libs/ui/alert-dialog/helm/jest.config.ts index a04b92f19..7776c9ad6 100644 --- a/libs/ui/alert-dialog/helm/jest.config.ts +++ b/libs/ui/alert-dialog/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-alert-dialog-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-alert-dialog-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/alert-dialog/helm/ng-package.json b/libs/ui/alert-dialog/helm/ng-package.json index ff58f4072..5f668a39c 100644 --- a/libs/ui/alert-dialog/helm/ng-package.json +++ b/libs/ui/alert-dialog/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/alert-dialog/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/alert-dialog/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/alert-dialog/helm/package.json b/libs/ui/alert-dialog/helm/package.json index 85e5cfe7e..3cb1eefbc 100644 --- a/libs/ui/alert-dialog/helm/package.json +++ b/libs/ui/alert-dialog/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-alertdialog-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-alertdialog-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/alert-dialog/helm/project.json b/libs/ui/alert-dialog/helm/project.json index bc827de76..ca836d9b2 100644 --- a/libs/ui/alert-dialog/helm/project.json +++ b/libs/ui/alert-dialog/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-alert-dialog-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/alert-dialog/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/alert-dialog/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/alert-dialog/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/alert-dialog/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/alert-dialog/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/alert-dialog/helm/**/*.ts", - "libs/ui/alert-dialog/helm/**/*.html", - "libs/ui/alert-dialog/helm/package.json", - "libs/ui/alert-dialog/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-alert-dialog-helm" - } - } - } + "name": "ui-alert-dialog-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/alert-dialog/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/alert-dialog/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/alert-dialog/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/alert-dialog/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/alert-dialog/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/alert-dialog/helm/**/*.ts", + "libs/ui/alert-dialog/helm/**/*.html", + "libs/ui/alert-dialog/helm/package.json", + "libs/ui/alert-dialog/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-alert-dialog-helm" + } + } + } } diff --git a/libs/ui/alert-dialog/helm/src/index.ts b/libs/ui/alert-dialog/helm/src/index.ts index 5c36ad855..95046e948 100644 --- a/libs/ui/alert-dialog/helm/src/index.ts +++ b/libs/ui/alert-dialog/helm/src/index.ts @@ -1,5 +1,7 @@ import { NgModule } from '@angular/core'; +import { HlmAlertDialogActionButtonDirective } from './lib/hlm-alert-dialog-action-button.directive'; +import { HlmAlertDialogCancelButtonDirective } from './lib/hlm-alert-dialog-cancel-button.directive'; import { HlmAlertDialogCloseDirective } from './lib/hlm-alert-dialog-close.directive'; import { HlmAlertDialogContentDirective } from './lib/hlm-alert-dialog-content.directive'; import { HlmAlertDialogDescriptionDirective } from './lib/hlm-alert-dialog-description.directive'; @@ -7,9 +9,9 @@ import { HlmAlertDialogFooterComponent } from './lib/hlm-alert-dialog-footer.com import { HlmAlertDialogHeaderComponent } from './lib/hlm-alert-dialog-header.component'; import { HlmAlertDialogOverlayDirective } from './lib/hlm-alert-dialog-overlay.directive'; import { HlmAlertDialogTitleDirective } from './lib/hlm-alert-dialog-title.directive'; -import { HlmAlertDialogActionButtonDirective } from './lib/hlm-alert-dialog-action-button.directive'; -import { HlmAlertDialogCancelButtonDirective } from './lib/hlm-alert-dialog-cancel-button.directive'; +export * from './lib/hlm-alert-dialog-action-button.directive'; +export * from './lib/hlm-alert-dialog-cancel-button.directive'; export * from './lib/hlm-alert-dialog-close.directive'; export * from './lib/hlm-alert-dialog-content.directive'; export * from './lib/hlm-alert-dialog-description.directive'; @@ -17,23 +19,21 @@ export * from './lib/hlm-alert-dialog-footer.component'; export * from './lib/hlm-alert-dialog-header.component'; export * from './lib/hlm-alert-dialog-overlay.directive'; export * from './lib/hlm-alert-dialog-title.directive'; -export * from './lib/hlm-alert-dialog-action-button.directive'; -export * from './lib/hlm-alert-dialog-cancel-button.directive'; export const HlmAlertDialogImports = [ - HlmAlertDialogCloseDirective, - HlmAlertDialogContentDirective, - HlmAlertDialogDescriptionDirective, - HlmAlertDialogFooterComponent, - HlmAlertDialogHeaderComponent, - HlmAlertDialogOverlayDirective, - HlmAlertDialogTitleDirective, - HlmAlertDialogActionButtonDirective, - HlmAlertDialogCancelButtonDirective, + HlmAlertDialogCloseDirective, + HlmAlertDialogContentDirective, + HlmAlertDialogDescriptionDirective, + HlmAlertDialogFooterComponent, + HlmAlertDialogHeaderComponent, + HlmAlertDialogOverlayDirective, + HlmAlertDialogTitleDirective, + HlmAlertDialogActionButtonDirective, + HlmAlertDialogCancelButtonDirective, ] as const; @NgModule({ - imports: [...HlmAlertDialogImports], - exports: [...HlmAlertDialogImports], + imports: [...HlmAlertDialogImports], + exports: [...HlmAlertDialogImports], }) export class HlmAlertDialogModule {} diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-action-button.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-action-button.directive.ts index 8f754c9ba..836a11e8f 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-action-button.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-action-button.directive.ts @@ -2,8 +2,8 @@ import { Directive } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; @Directive({ - selector: 'button[hlmAlertDialogAction]', - standalone: true, - hostDirectives: [HlmButtonDirective], + selector: 'button[hlmAlertDialogAction]', + standalone: true, + hostDirectives: [HlmButtonDirective], }) export class HlmAlertDialogActionButtonDirective {} diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-cancel-button.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-cancel-button.directive.ts index 42b0cc006..cb14eb714 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-cancel-button.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-cancel-button.directive.ts @@ -1,29 +1,29 @@ import { Directive, HostBinding, inject, Input } from '@angular/core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: 'button[hlmAlertDialogCancel]', - standalone: true, - hostDirectives: [HlmButtonDirective], + selector: 'button[hlmAlertDialogCancel]', + standalone: true, + hostDirectives: [HlmButtonDirective], }) export class HlmAlertDialogCancelButtonDirective { - private _hlmBtn = inject(HlmButtonDirective, { host: true }); - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + private _hlmBtn = inject(HlmButtonDirective, { host: true }); + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('mt-2 sm:mt-0', this._inputs); - } - constructor() { - this._hlmBtn.variant = 'outline'; - } + private generateClasses() { + return hlm('mt-2 sm:mt-0', this._inputs); + } + constructor() { + this._hlmBtn.variant = 'outline'; + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-close.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-close.directive.ts index 72c2dcd18..257dd92ec 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-close.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-close.directive.ts @@ -3,24 +3,24 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAlertDialogClose],[brnAlertDialogClose][hlm]', - standalone: true, + selector: '[hlmAlertDialogClose],[brnAlertDialogClose][hlm]', + standalone: true, }) export class HlmAlertDialogCloseDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'absolute right-4 top-4 [&>hlm-icon]:h-4 [&>hlm-icon]:w-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'absolute right-4 top-4 [&>hlm-icon]:h-4 [&>hlm-icon]:w-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-content.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-content.directive.ts index 8e875b911..1a1104195 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-content.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-content.directive.ts @@ -3,32 +3,32 @@ import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAlertDialogContent],[brnAlertDialogContent][hlm]', - standalone: true, + selector: '[hlmAlertDialogContent],[brnAlertDialogContent][hlm]', + standalone: true, }) export class HlmAlertDialogContentDirective { - private _inputs: ClassValue = ''; - private _stateProvider = injectExposesStateProvider({ optional: true, host: true }); - public state = this._stateProvider?.state ?? signal('closed'); - private _renderer = inject(Renderer2); - private _element = inject(ElementRef); + private _inputs: ClassValue = ''; + private _stateProvider = injectExposesStateProvider({ optional: true, host: true }); + public state = this._stateProvider?.state ?? signal('closed'); + private _renderer = inject(Renderer2); + private _element = inject(ElementRef); - constructor() { - effect(() => this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state())); - } + constructor() { + effect(() => this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state())); + } - @HostBinding('class') - _class = this.generateClasses(); - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @HostBinding('class') + _class = this.generateClasses(); + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'relative grid w-full max-w-lg gap-4 border-border border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'relative grid w-full max-w-lg gap-4 border-border border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full', + this._inputs, + ); + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-description.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-description.directive.ts index 67238a3cc..493dd0e1b 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-description.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-description.directive.ts @@ -3,21 +3,21 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAlertDialogDescription],[brnAlertDialogDescription][hlm]', - standalone: true, + selector: '[hlmAlertDialogDescription],[brnAlertDialogDescription][hlm]', + standalone: true, }) export class HlmAlertDialogDescriptionDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('text-sm text-muted-foreground', this._inputs); - } + private generateClasses() { + return hlm('text-sm text-muted-foreground', this._inputs); + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-footer.component.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-footer.component.ts index e853343ab..0e4ffdd32 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-footer.component.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-footer.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-alert-dialog-footer', - standalone: true, - template: ``, + selector: 'hlm-alert-dialog-footer', + standalone: true, + template: ` + + `, }) export class HlmAlertDialogFooterComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._inputs); - } + generateClass() { + return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._inputs); + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-header.component.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-header.component.ts index 0b4193ac9..7e08f5126 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-header.component.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-header.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-alert-dialog-header', - standalone: true, - template: ``, + selector: 'hlm-alert-dialog-header', + standalone: true, + template: ` + + `, }) export class HlmAlertDialogHeaderComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col space-y-2 text-center sm:text-left', this._inputs); - } + generateClass() { + return hlm('flex flex-col space-y-2 text-center sm:text-left', this._inputs); + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-overlay.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-overlay.directive.ts index f25da9ecc..39c692079 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-overlay.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-overlay.directive.ts @@ -3,29 +3,29 @@ import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]', - standalone: true, + selector: '[hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]', + standalone: true, }) export class HlmAlertDialogOverlayDirective { - private _classSettable = injectCustomClassSettable({ optional: true, host: true }); - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + private _classSettable = injectCustomClassSettable({ optional: true, host: true }); + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - constructor() { - this._classSettable?.setClassToCustomElement(this._class); - } + constructor() { + this._classSettable?.setClassToCustomElement(this._class); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - this._classSettable?.setClassToCustomElement(this._class); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + this._classSettable?.setClassToCustomElement(this._class); + } - private generateClasses() { - return hlm( - 'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', + this._inputs, + ); + } } diff --git a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-title.directive.ts b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-title.directive.ts index d6b1d1f47..7324ecdf4 100644 --- a/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-title.directive.ts +++ b/libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-title.directive.ts @@ -3,21 +3,21 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmAlertDialogTitle],[brnAlertDialogTitle][hlm]', - standalone: true, + selector: '[hlmAlertDialogTitle],[brnAlertDialogTitle][hlm]', + standalone: true, }) export class HlmAlertDialogTitleDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('text-lg font-semibold', this._inputs); - } + private generateClasses() { + return hlm('text-lg font-semibold', this._inputs); + } } diff --git a/libs/ui/alert-dialog/helm/src/test-setup.ts b/libs/ui/alert-dialog/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/alert-dialog/helm/src/test-setup.ts +++ b/libs/ui/alert-dialog/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/alert-dialog/helm/tsconfig.json b/libs/ui/alert-dialog/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/alert-dialog/helm/tsconfig.json +++ b/libs/ui/alert-dialog/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/alert-dialog/helm/tsconfig.lib.json b/libs/ui/alert-dialog/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/alert-dialog/helm/tsconfig.lib.json +++ b/libs/ui/alert-dialog/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/alert-dialog/helm/tsconfig.lib.prod.json b/libs/ui/alert-dialog/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/alert-dialog/helm/tsconfig.lib.prod.json +++ b/libs/ui/alert-dialog/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/alert-dialog/helm/tsconfig.spec.json b/libs/ui/alert-dialog/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/alert-dialog/helm/tsconfig.spec.json +++ b/libs/ui/alert-dialog/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/alert/alert.stories.ts b/libs/ui/alert/alert.stories.ts index 1306cc8c0..7b363f7ec 100644 --- a/libs/ui/alert/alert.stories.ts +++ b/libs/ui/alert/alert.stories.ts @@ -3,20 +3,20 @@ import { moduleMetadata } from '@storybook/angular'; import { HlmAlertDirective, HlmAlertImports } from './helm/src'; const meta: Meta = { - title: 'Alert', - decorators: [ - moduleMetadata({ - imports: [HlmAlertImports], - }), - ], + title: 'Alert', + decorators: [ + moduleMetadata({ + imports: [HlmAlertImports], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Destructive: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
@@ -60,5 +60,5 @@ export const Destructive: Story = {

`, - }), + }), }; diff --git a/libs/ui/alert/helm/.eslintrc.json b/libs/ui/alert/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/alert/helm/.eslintrc.json +++ b/libs/ui/alert/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/alert/helm/jest.config.ts b/libs/ui/alert/helm/jest.config.ts index 5e1585ca1..4d6c182be 100644 --- a/libs/ui/alert/helm/jest.config.ts +++ b/libs/ui/alert/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-alert-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-alert-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/alert/helm/ng-package.json b/libs/ui/alert/helm/ng-package.json index 3afe4fc69..ac878bb61 100644 --- a/libs/ui/alert/helm/ng-package.json +++ b/libs/ui/alert/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/alert/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/alert/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/alert/helm/package.json b/libs/ui/alert/helm/package.json index 73bd3dde4..65a620c23 100644 --- a/libs/ui/alert/helm/package.json +++ b/libs/ui/alert/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-alert-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-alert-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/alert/helm/project.json b/libs/ui/alert/helm/project.json index afb3835b5..b5411b0fe 100644 --- a/libs/ui/alert/helm/project.json +++ b/libs/ui/alert/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-alert-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/alert/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/alert/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/alert/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/alert/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/alert/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/alert/helm/**/*.ts", - "libs/ui/alert/helm/**/*.html", - "libs/ui/alert/helm/package.json", - "libs/ui/alert/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-alert-helm" - } - } - } + "name": "ui-alert-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/alert/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/alert/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/alert/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/alert/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/alert/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/alert/helm/**/*.ts", + "libs/ui/alert/helm/**/*.html", + "libs/ui/alert/helm/package.json", + "libs/ui/alert/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-alert-helm" + } + } + } } diff --git a/libs/ui/alert/helm/src/index.ts b/libs/ui/alert/helm/src/index.ts index 1cbbfde78..33172b423 100644 --- a/libs/ui/alert/helm/src/index.ts +++ b/libs/ui/alert/helm/src/index.ts @@ -1,24 +1,24 @@ import { NgModule } from '@angular/core'; -import { HlmAlertDirective } from './lib/hlm-alert.directive'; -import { HlmAlertTitleDirective } from './lib/hlm-alert-title.directive'; import { HlmAlertDescriptionDirective } from './lib/hlm-alert-description.directive'; import { HlmAlertIconDirective } from './lib/hlm-alert-icon.directive'; +import { HlmAlertTitleDirective } from './lib/hlm-alert-title.directive'; +import { HlmAlertDirective } from './lib/hlm-alert.directive'; -export * from './lib/hlm-alert.directive'; -export * from './lib/hlm-alert-title.directive'; export * from './lib/hlm-alert-description.directive'; export * from './lib/hlm-alert-icon.directive'; +export * from './lib/hlm-alert-title.directive'; +export * from './lib/hlm-alert.directive'; export const HlmAlertImports = [ - HlmAlertDirective, - HlmAlertTitleDirective, - HlmAlertDescriptionDirective, - HlmAlertIconDirective, + HlmAlertDirective, + HlmAlertTitleDirective, + HlmAlertDescriptionDirective, + HlmAlertIconDirective, ] as const; @NgModule({ - imports: [...HlmAlertImports], - exports: [...HlmAlertImports], + imports: [...HlmAlertImports], + exports: [...HlmAlertImports], }) export class HlmAlertModule {} diff --git a/libs/ui/alert/helm/src/lib/hlm-alert-description.directive.ts b/libs/ui/alert/helm/src/lib/hlm-alert-description.directive.ts index f8c6553dd..a6aff3200 100644 --- a/libs/ui/alert/helm/src/lib/hlm-alert-description.directive.ts +++ b/libs/ui/alert/helm/src/lib/hlm-alert-description.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const alertDescriptionVariants = cva('text-sm [&_p]:leading-relaxed', { - variants: {}, + variants: {}, }); export type AlertDescriptionVariants = VariantProps; @Directive({ - selector: '[hlmAlertDesc],[hlmAlertDescription]', - standalone: true, + selector: '[hlmAlertDesc],[hlmAlertDescription]', + standalone: true, }) export class HlmAlertDescriptionDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(alertDescriptionVariants(), this._inputs); - } + private generateClasses() { + return hlm(alertDescriptionVariants(), this._inputs); + } } diff --git a/libs/ui/alert/helm/src/lib/hlm-alert-icon.directive.ts b/libs/ui/alert/helm/src/lib/hlm-alert-icon.directive.ts index 535be164b..08ac73a3b 100644 --- a/libs/ui/alert/helm/src/lib/hlm-alert-icon.directive.ts +++ b/libs/ui/alert/helm/src/lib/hlm-alert-icon.directive.ts @@ -2,14 +2,14 @@ import { Directive, inject } from '@angular/core'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; @Directive({ - selector: '[hlmAlertIcon]', - standalone: true, + selector: '[hlmAlertIcon]', + standalone: true, }) export class HlmAlertIconDirective { - private _icon = inject(HlmIconComponent, { host: true, optional: true }); + private _icon = inject(HlmIconComponent, { host: true, optional: true }); - constructor() { - if (!this._icon) return; - this._icon.size = 'sm'; - } + constructor() { + if (!this._icon) return; + this._icon.size = 'sm'; + } } diff --git a/libs/ui/alert/helm/src/lib/hlm-alert-title.directive.ts b/libs/ui/alert/helm/src/lib/hlm-alert-title.directive.ts index d83971406..e1e144b88 100644 --- a/libs/ui/alert/helm/src/lib/hlm-alert-title.directive.ts +++ b/libs/ui/alert/helm/src/lib/hlm-alert-title.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const alertTitleVariants = cva('mb-1 font-medium leading-none tracking-tight', { - variants: {}, + variants: {}, }); export type AlertTitleVariants = VariantProps; @Directive({ - selector: '[hlmAlertTitle]', - standalone: true, + selector: '[hlmAlertTitle]', + standalone: true, }) export class HlmAlertTitleDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(alertTitleVariants(), this._inputs); - } + private generateClasses() { + return hlm(alertTitleVariants(), this._inputs); + } } diff --git a/libs/ui/alert/helm/src/lib/hlm-alert.directive.ts b/libs/ui/alert/helm/src/lib/hlm-alert.directive.ts index 6ffdb3f0c..3f8de59d7 100644 --- a/libs/ui/alert/helm/src/lib/hlm-alert.directive.ts +++ b/libs/ui/alert/helm/src/lib/hlm-alert.directive.ts @@ -1,61 +1,61 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const alertVariants = cva( - 'relative w-full rounded-lg border border-border p-4 [&>[hlmAlertIcon]]:absolute [&>[hlmAlertIcon]]:text-foreground [&>[hlmAlertIcon]]:left-4 [&>[hlmAlertIcon]]:top-4 [&>[hlmAlertIcon]+div]:translate-y-[-3px] [&>[hlmAlertIcon]~*]:pl-7', - { - variants: { - variant: { - default: 'bg-background text-foreground', - destructive: - 'text-destructive border-destructive/50 dark:border-destructive [&>[hlmAlertIcon]]:text-destructive text-destructive', - }, - }, - defaultVariants: { - variant: 'default', - }, - } + 'relative w-full rounded-lg border border-border p-4 [&>[hlmAlertIcon]]:absolute [&>[hlmAlertIcon]]:text-foreground [&>[hlmAlertIcon]]:left-4 [&>[hlmAlertIcon]]:top-4 [&>[hlmAlertIcon]+div]:translate-y-[-3px] [&>[hlmAlertIcon]~*]:pl-7', + { + variants: { + variant: { + default: 'bg-background text-foreground', + destructive: + 'text-destructive border-destructive/50 dark:border-destructive [&>[hlmAlertIcon]]:text-destructive text-destructive', + }, + }, + defaultVariants: { + variant: 'default', + }, + }, ); export type AlertVariants = VariantProps; @Directive({ - selector: '[hlmAlert]', - standalone: true, - host: { - role: 'alert', - }, + selector: '[hlmAlert]', + standalone: true, + host: { + role: 'alert', + }, }) export class HlmAlertDirective { - private _variant: AlertVariants['variant'] = 'default'; - @Input() - get variant(): AlertVariants['variant'] { - return this._variant; - } - - set variant(variant: AlertVariants['variant']) { - this._variant = variant; - this._class = this.generateClasses(); - } - - set size(value: AlertVariants['variant']) { - this._variant = value; - this._class = this.generateClasses(); - } - - private _inputs: ClassValue = ''; - - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } - - @HostBinding('class') - private _class = this.generateClasses(); - - private generateClasses() { - return hlm(alertVariants({ variant: this._variant }), this._inputs); - } + private _variant: AlertVariants['variant'] = 'default'; + @Input() + get variant(): AlertVariants['variant'] { + return this._variant; + } + + set variant(variant: AlertVariants['variant']) { + this._variant = variant; + this._class = this.generateClasses(); + } + + set size(value: AlertVariants['variant']) { + this._variant = value; + this._class = this.generateClasses(); + } + + private _inputs: ClassValue = ''; + + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } + + @HostBinding('class') + private _class = this.generateClasses(); + + private generateClasses() { + return hlm(alertVariants({ variant: this._variant }), this._inputs); + } } diff --git a/libs/ui/alert/helm/src/test-setup.ts b/libs/ui/alert/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/alert/helm/src/test-setup.ts +++ b/libs/ui/alert/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/alert/helm/tsconfig.json b/libs/ui/alert/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/alert/helm/tsconfig.json +++ b/libs/ui/alert/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/alert/helm/tsconfig.lib.json b/libs/ui/alert/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/alert/helm/tsconfig.lib.json +++ b/libs/ui/alert/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/alert/helm/tsconfig.lib.prod.json b/libs/ui/alert/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/alert/helm/tsconfig.lib.prod.json +++ b/libs/ui/alert/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/alert/helm/tsconfig.spec.json b/libs/ui/alert/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/alert/helm/tsconfig.spec.json +++ b/libs/ui/alert/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/aspect-ratio/aspect-ratio.stories.ts b/libs/ui/aspect-ratio/aspect-ratio.stories.ts index 411d2bbd6..fe4df7a83 100644 --- a/libs/ui/aspect-ratio/aspect-ratio.stories.ts +++ b/libs/ui/aspect-ratio/aspect-ratio.stories.ts @@ -4,35 +4,35 @@ import { HlmAspectRatioDirective } from './helm/src'; export type AspectRatio = { ratio: string | number }; const meta: Meta = { - title: 'Aspect Ratio', - args: { ratio: '16/9' }, - argTypes: { - ratio: { - options: ['16/9', '1/1', '5/4', '3/2', 1.234], - control: { - type: 'select', - }, - }, - }, - decorators: [ - moduleMetadata({ - imports: [HlmAspectRatioDirective], - }), - ], + title: 'Aspect Ratio', + args: { ratio: '16/9' }, + argTypes: { + ratio: { + options: ['16/9', '1/1', '5/4', '3/2', 1.234], + control: { + type: 'select', + }, + }, + }, + decorators: [ + moduleMetadata({ + imports: [HlmAspectRatioDirective], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - args: { - ratio: '16/9', - }, - render: ({ ratio }) => ({ - props: { - ratio, - }, - template: ` + args: { + ratio: '16/9', + }, + render: ({ ratio }) => ({ + props: { + ratio, + }, + template: `
`, - }), + }), }; diff --git a/libs/ui/aspect-ratio/helm/.eslintrc.json b/libs/ui/aspect-ratio/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/aspect-ratio/helm/.eslintrc.json +++ b/libs/ui/aspect-ratio/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/aspect-ratio/helm/jest.config.ts b/libs/ui/aspect-ratio/helm/jest.config.ts index a27a72922..6930c8a90 100644 --- a/libs/ui/aspect-ratio/helm/jest.config.ts +++ b/libs/ui/aspect-ratio/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-aspect-ratio-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-aspect-ratio-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/aspect-ratio/helm/ng-package.json b/libs/ui/aspect-ratio/helm/ng-package.json index b210f623e..ddae32e99 100644 --- a/libs/ui/aspect-ratio/helm/ng-package.json +++ b/libs/ui/aspect-ratio/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/aspect-ratio/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/aspect-ratio/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/aspect-ratio/helm/package.json b/libs/ui/aspect-ratio/helm/package.json index c3cb0a516..b0226450d 100644 --- a/libs/ui/aspect-ratio/helm/package.json +++ b/libs/ui/aspect-ratio/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-aspectratio-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-aspectratio-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/aspect-ratio/helm/project.json b/libs/ui/aspect-ratio/helm/project.json index a1c617bfa..3e0a49dba 100644 --- a/libs/ui/aspect-ratio/helm/project.json +++ b/libs/ui/aspect-ratio/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-aspect-ratio-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/aspect-ratio/helm/src", - "prefix": "hlm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/aspect-ratio/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/aspect-ratio/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/aspect-ratio/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/aspect-ratio/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/aspect-ratio/helm/**/*.ts", - "libs/ui/aspect-ratio/helm/**/*.html", - "libs/ui/aspect-ratio/helm/package.json", - "libs/ui/aspect-ratio/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-aspect-ratio-helm" - } - } - } + "name": "ui-aspect-ratio-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/aspect-ratio/helm/src", + "prefix": "hlm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/aspect-ratio/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/aspect-ratio/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/aspect-ratio/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/aspect-ratio/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/aspect-ratio/helm/**/*.ts", + "libs/ui/aspect-ratio/helm/**/*.html", + "libs/ui/aspect-ratio/helm/package.json", + "libs/ui/aspect-ratio/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-aspect-ratio-helm" + } + } + } } diff --git a/libs/ui/aspect-ratio/helm/src/index.ts b/libs/ui/aspect-ratio/helm/src/index.ts index d05fde645..e7c2b3007 100644 --- a/libs/ui/aspect-ratio/helm/src/index.ts +++ b/libs/ui/aspect-ratio/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmAspectRatioDirective } from './lib/helm-aspect-ratio.directive'; export * from './lib/helm-aspect-ratio.directive'; @NgModule({ - imports: [HlmAspectRatioDirective], - exports: [HlmAspectRatioDirective], + imports: [HlmAspectRatioDirective], + exports: [HlmAspectRatioDirective], }) export class HlmAspectRatioModule {} diff --git a/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.spec.ts b/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.spec.ts index 1f1ff2c91..5b39a64b4 100644 --- a/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.spec.ts +++ b/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.spec.ts @@ -3,71 +3,71 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { HlmAspectRatioDirective } from './helm-aspect-ratio.directive'; @Component({ - selector: 'hlm-mock', - standalone: true, - imports: [HlmAspectRatioDirective], - template: ` -
- -
- `, + selector: 'hlm-mock', + standalone: true, + imports: [HlmAspectRatioDirective], + template: ` +
+ +
+ `, }) class MockComponent { - ratio: number | undefined = 16 / 9; + ratio: number | undefined = 16 / 9; } describe('HelmAspectRatioDirective', () => { - let component: MockComponent; - let fixture: ComponentFixture; + let component: MockComponent; + let fixture: ComponentFixture; - beforeEach(() => { - fixture = TestBed.createComponent(MockComponent); - component = fixture.componentInstance; - }); + beforeEach(() => { + fixture = TestBed.createComponent(MockComponent); + component = fixture.componentInstance; + }); - it('should compile', () => { - expect(component).toBeTruthy(); - }); + it('should compile', () => { + expect(component).toBeTruthy(); + }); - it('should show the image', () => { - fixture.detectChanges(); - const img = fixture.nativeElement.querySelector('img'); - expect(img).toBeTruthy(); - }); + it('should show the image', () => { + fixture.detectChanges(); + const img = fixture.nativeElement.querySelector('img'); + expect(img).toBeTruthy(); + }); - it('should have the correct aspect ratio', () => { - fixture.detectChanges(); - const div = fixture.nativeElement.querySelector('div'); - expect(div.style.paddingBottom).toEqual(100 / (component.ratio || 1) + '%'); - }); + it('should have the correct aspect ratio', () => { + fixture.detectChanges(); + const div = fixture.nativeElement.querySelector('div'); + expect(div.style.paddingBottom).toEqual(100 / (component.ratio || 1) + '%'); + }); - it('should default to an aspect ratio of 1', () => { - component.ratio = undefined; - fixture.detectChanges(); - const div = fixture.nativeElement.querySelector('div'); - expect(div.style.paddingBottom).toEqual('100%'); - }); + it('should default to an aspect ratio of 1', () => { + component.ratio = undefined; + fixture.detectChanges(); + const div = fixture.nativeElement.querySelector('div'); + expect(div.style.paddingBottom).toEqual('100%'); + }); - it('should fallback to an aspect ratio of 1 if the ratio is 0', () => { - component.ratio = 0; - fixture.detectChanges(); - const div = fixture.nativeElement.querySelector('div'); - expect(div.style.paddingBottom).toEqual('100%'); - }); + it('should fallback to an aspect ratio of 1 if the ratio is 0', () => { + component.ratio = 0; + fixture.detectChanges(); + const div = fixture.nativeElement.querySelector('div'); + expect(div.style.paddingBottom).toEqual('100%'); + }); - it('should fallback to an aspect ratio of 1 if the ratio is negative', () => { - component.ratio = -1; - fixture.detectChanges(); - const div = fixture.nativeElement.querySelector('div'); - expect(div.style.paddingBottom).toEqual('100%'); - }); + it('should fallback to an aspect ratio of 1 if the ratio is negative', () => { + component.ratio = -1; + fixture.detectChanges(); + const div = fixture.nativeElement.querySelector('div'); + expect(div.style.paddingBottom).toEqual('100%'); + }); - it('should add the correct styles to the image', () => { - fixture.detectChanges(); + it('should add the correct styles to the image', () => { + fixture.detectChanges(); - const img = fixture.nativeElement.querySelector('img') as HTMLImageElement; - expect(img.classList.toString()).toBe('absolute w-full h-full object-cover'); - }); + const img = fixture.nativeElement.querySelector('img') as HTMLImageElement; + expect(img.classList.toString()).toBe('absolute w-full h-full object-cover'); + }); }); diff --git a/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.ts b/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.ts index eb348e6a0..6b71c16d7 100644 --- a/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.ts +++ b/libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.ts @@ -6,55 +6,55 @@ import { ClassValue } from 'clsx'; const generateParentClasses = (userCls: ClassValue) => hlm(`relative w-full`, userCls); const parseDividedString = (value: NumberInput): NumberInput => { - if (typeof value !== 'string' || !value.includes('/')) return value; - return value - .split('/') - .map((v) => parseInt(v, 10)) - .reduce((a, b) => a / b); + if (typeof value !== 'string' || !value.includes('/')) return value; + return value + .split('/') + .map((v) => parseInt(v, 10)) + .reduce((a, b) => a / b); }; @Directive({ - selector: '[hlmAspectRatio]', - standalone: true, + selector: '[hlmAspectRatio]', + standalone: true, }) export class HlmAspectRatioDirective implements AfterViewInit { - private readonly ratio = signal(1); - private readonly userCls = signal(''); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; - private readonly child = signal(this.el.firstElementChild); - - @Input() - set hlmAspectRatio(value: NumberInput) { - const coerced = coerceNumberProperty(parseDividedString(value)); - this.ratio.set(coerced <= 0 ? 1 : coerced); - } - - @Input() - set class(value: ClassValue) { - this.userCls.set(value); - } - - @HostBinding('class') - protected cls = generateParentClasses(this.userCls()); - - constructor() { - effect(() => { - this.cls = generateParentClasses(this.userCls()); - }); - - effect(() => { - this.el.style.paddingBottom = `${100 / this.ratio()}%`; - }); - - effect(() => { - const child = this.child(); - if (!child) return; - child.classList.add('absolute', 'w-full', 'h-full', 'object-cover'); - }); - } - - ngAfterViewInit() { - // support delayed addition of image to dom - if (!this.child()) this.child.set(this.el.firstElementChild); - } + private readonly ratio = signal(1); + private readonly userCls = signal(''); + private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly child = signal(this.el.firstElementChild); + + @Input() + set hlmAspectRatio(value: NumberInput) { + const coerced = coerceNumberProperty(parseDividedString(value)); + this.ratio.set(coerced <= 0 ? 1 : coerced); + } + + @Input() + set class(value: ClassValue) { + this.userCls.set(value); + } + + @HostBinding('class') + protected cls = generateParentClasses(this.userCls()); + + constructor() { + effect(() => { + this.cls = generateParentClasses(this.userCls()); + }); + + effect(() => { + this.el.style.paddingBottom = `${100 / this.ratio()}%`; + }); + + effect(() => { + const child = this.child(); + if (!child) return; + child.classList.add('absolute', 'w-full', 'h-full', 'object-cover'); + }); + } + + ngAfterViewInit() { + // support delayed addition of image to dom + if (!this.child()) this.child.set(this.el.firstElementChild); + } } diff --git a/libs/ui/aspect-ratio/helm/src/test-setup.ts b/libs/ui/aspect-ratio/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/aspect-ratio/helm/src/test-setup.ts +++ b/libs/ui/aspect-ratio/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/aspect-ratio/helm/tsconfig.json b/libs/ui/aspect-ratio/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/aspect-ratio/helm/tsconfig.json +++ b/libs/ui/aspect-ratio/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/aspect-ratio/helm/tsconfig.lib.json b/libs/ui/aspect-ratio/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/aspect-ratio/helm/tsconfig.lib.json +++ b/libs/ui/aspect-ratio/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/aspect-ratio/helm/tsconfig.lib.prod.json b/libs/ui/aspect-ratio/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/aspect-ratio/helm/tsconfig.lib.prod.json +++ b/libs/ui/aspect-ratio/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/aspect-ratio/helm/tsconfig.spec.json b/libs/ui/aspect-ratio/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/aspect-ratio/helm/tsconfig.spec.json +++ b/libs/ui/aspect-ratio/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/avatar/avatar.stories.ts b/libs/ui/avatar/avatar.stories.ts index a59e56202..6253d33ff 100644 --- a/libs/ui/avatar/avatar.stories.ts +++ b/libs/ui/avatar/avatar.stories.ts @@ -2,20 +2,20 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmAvatarImports } from './helm/src'; const meta: Meta<{}> = { - title: 'Avatar', - decorators: [ - moduleMetadata({ - imports: [HlmAvatarImports], - }), - ], + title: 'Avatar', + decorators: [ + moduleMetadata({ + imports: [HlmAvatarImports], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
Spartan logo. A red spearhead with the Angular A @@ -33,5 +33,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/avatar/brain/.eslintrc.json b/libs/ui/avatar/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/avatar/brain/.eslintrc.json +++ b/libs/ui/avatar/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/avatar/brain/jest.config.ts b/libs/ui/avatar/brain/jest.config.ts index 6805d9dfb..2bea2041a 100644 --- a/libs/ui/avatar/brain/jest.config.ts +++ b/libs/ui/avatar/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-avatar-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-avatar-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/avatar/brain/ng-package.json b/libs/ui/avatar/brain/ng-package.json index 5d6940779..0155cabb7 100644 --- a/libs/ui/avatar/brain/ng-package.json +++ b/libs/ui/avatar/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/avatar/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/avatar/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/avatar/brain/package.json b/libs/ui/avatar/brain/package.json index ca33c0a22..aca347b3c 100644 --- a/libs/ui/avatar/brain/package.json +++ b/libs/ui/avatar/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-avatar-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-avatar-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/avatar/brain/project.json b/libs/ui/avatar/brain/project.json index 1a890d982..9f00cf731 100644 --- a/libs/ui/avatar/brain/project.json +++ b/libs/ui/avatar/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-avatar-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/avatar/brain/src", - "prefix": "brn", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/avatar/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/avatar/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/avatar/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/avatar/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/avatar/brain/**/*.ts", - "libs/ui/avatar/brain/**/*.html", - "libs/ui/avatar/brain/package.json", - "libs/ui/avatar/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-avatar-brain" - } - } - } + "name": "ui-avatar-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/avatar/brain/src", + "prefix": "brn", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/avatar/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/avatar/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/avatar/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/avatar/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/avatar/brain/**/*.ts", + "libs/ui/avatar/brain/**/*.html", + "libs/ui/avatar/brain/package.json", + "libs/ui/avatar/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-avatar-brain" + } + } + } } diff --git a/libs/ui/avatar/brain/src/index.ts b/libs/ui/avatar/brain/src/index.ts index 8c9bec69c..21dbcedbe 100644 --- a/libs/ui/avatar/brain/src/index.ts +++ b/libs/ui/avatar/brain/src/index.ts @@ -12,7 +12,7 @@ export * from './lib/util'; export const BrnAvatarImports = [BrnAvatarComponent, BrnAvatarFallbackDirective, BrnAvatarImageDirective] as const; @NgModule({ - imports: [...BrnAvatarImports], - exports: [...BrnAvatarImports], + imports: [...BrnAvatarImports], + exports: [...BrnAvatarImports], }) export class BrnAvatarModule {} diff --git a/libs/ui/avatar/brain/src/lib/brn-avatar.component.spec.ts b/libs/ui/avatar/brain/src/lib/brn-avatar.component.spec.ts index eff3bcd11..c65d5b176 100644 --- a/libs/ui/avatar/brain/src/lib/brn-avatar.component.spec.ts +++ b/libs/ui/avatar/brain/src/lib/brn-avatar.component.spec.ts @@ -6,66 +6,66 @@ import { BrnAvatarFallbackDirective } from './fallback/brn-avatar-fallback.direc import { BrnAvatarImageDirective } from './image/brn-avatar-image.directive'; @Component({ - selector: 'brn-mock', - imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, BrnAvatarComponent], - template: ` - -

empty

- - - fallback - - - - fallback - - - - fallback - - `, - standalone: true, + selector: 'brn-mock', + imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, BrnAvatarComponent], + template: ` + +

empty

+ + + fallback + + + + fallback + + + + fallback + + `, + standalone: true, }) class MockComponent {} describe('BrnAvatarComponent', () => { - let component: MockComponent; - let fixture: ComponentFixture; + let component: MockComponent; + let fixture: ComponentFixture; - beforeEach(() => { - fixture = TestBed.createComponent(MockComponent); - component = fixture.componentInstance; - fixture.autoDetectChanges(); - }); - it('should compile', () => { - expect(component).toBeTruthy(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(MockComponent); + component = fixture.componentInstance; + fixture.autoDetectChanges(); + }); + it('should compile', () => { + expect(component).toBeTruthy(); + }); - it('should render the fallback when no image is provided', () => { - const fallback = fixture.nativeElement.querySelector('#fallbackOnly span'); - expect(fallback.textContent).toEqual('fallback'); - }); + it('should render the fallback when no image is provided', () => { + const fallback = fixture.nativeElement.querySelector('#fallbackOnly span'); + expect(fallback.textContent).toEqual('fallback'); + }); - it('should not render anything when no image or fallback is provided', () => { - const empty = fixture.nativeElement.querySelector('#empty p'); - expect(empty).toBeFalsy(); - }); + it('should not render anything when no image or fallback is provided', () => { + const empty = fixture.nativeElement.querySelector('#empty p'); + expect(empty).toBeFalsy(); + }); - it('should render the fallback when provided and image with no src', () => { - const fallback = fixture.nativeElement.querySelector('#noSrc span'); - expect(fallback.textContent).toEqual('fallback'); - }); + it('should render the fallback when provided and image with no src', () => { + const fallback = fixture.nativeElement.querySelector('#noSrc span'); + expect(fallback.textContent).toEqual('fallback'); + }); - it('should not render the fallback, but rather the image when provided with a valid src', () => { - // delay test to allow for image to resolve - setTimeout(() => { - const img = fixture.debugElement.query(By.css('#good img')); - expect(img).toBeTruthy(); - const fallback = fixture.nativeElement.querySelector('#good span'); - expect(fallback).toBeFalsy(); - }); - }); + it('should not render the fallback, but rather the image when provided with a valid src', () => { + // delay test to allow for image to resolve + setTimeout(() => { + const img = fixture.debugElement.query(By.css('#good img')); + expect(img).toBeTruthy(); + const fallback = fixture.nativeElement.querySelector('#good span'); + expect(fallback).toBeFalsy(); + }); + }); }); diff --git a/libs/ui/avatar/brain/src/lib/brn-avatar.component.ts b/libs/ui/avatar/brain/src/lib/brn-avatar.component.ts index 8356b83b9..a336c9edf 100644 --- a/libs/ui/avatar/brain/src/lib/brn-avatar.component.ts +++ b/libs/ui/avatar/brain/src/lib/brn-avatar.component.ts @@ -3,21 +3,21 @@ import { ChangeDetectionStrategy, Component, ContentChild, ViewEncapsulation } f import { BrnAvatarImageDirective } from './image'; @Component({ - selector: 'brn-avatar', - standalone: true, - imports: [NgIf], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - template: ` - - - - - - - `, + selector: 'brn-avatar', + standalone: true, + imports: [NgIf], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + template: ` + + + + + + + `, }) export class BrnAvatarComponent { - @ContentChild(BrnAvatarImageDirective, { static: true }) - protected readonly image: BrnAvatarImageDirective | null = null; + @ContentChild(BrnAvatarImageDirective, { static: true }) + protected readonly image: BrnAvatarImageDirective | null = null; } diff --git a/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.spec.ts b/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.spec.ts index 45c35011c..03f687d0b 100644 --- a/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.spec.ts +++ b/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.spec.ts @@ -3,23 +3,26 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BrnAvatarFallbackDirective } from './brn-avatar-fallback.directive'; @Component({ - selector: 'brn-mock', - standalone: true, - imports: [BrnAvatarFallbackDirective], - template: `fallbackfallback2`, + selector: 'brn-mock', + standalone: true, + imports: [BrnAvatarFallbackDirective], + template: ` + fallback + fallback2 + `, }) class BrnMockComponent {} describe('BrnAvatarFallbackDirective', () => { - let component: BrnMockComponent; - let fixture: ComponentFixture; + let component: BrnMockComponent; + let fixture: ComponentFixture; - beforeEach(() => { - fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(BrnMockComponent); - component = fixture.componentInstance; - }); + beforeEach(() => { + fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(BrnMockComponent); + component = fixture.componentInstance; + }); - it('should compile', () => { - expect(component).toBeTruthy(); - }); + it('should compile', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.ts b/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.ts index 16dafad21..9b5680d7f 100644 --- a/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.ts +++ b/libs/ui/avatar/brain/src/lib/fallback/brn-avatar-fallback.directive.ts @@ -2,26 +2,26 @@ import { booleanAttribute, Directive, ElementRef, inject, Input, signal } from ' import { ClassValue } from 'clsx'; @Directive({ - selector: '[brnAvatarFallback]', - standalone: true, - exportAs: 'avatarFallback', + selector: '[brnAvatarFallback]', + standalone: true, + exportAs: 'avatarFallback', }) export class BrnAvatarFallbackDirective { - private readonly element = inject(ElementRef).nativeElement; - readonly userCls = signal(''); - readonly useAutoColor = signal(false); - readonly textContent = inject(ElementRef).nativeElement.textContent; + private readonly element = inject(ElementRef).nativeElement; + readonly userCls = signal(''); + readonly useAutoColor = signal(false); + readonly textContent = inject(ElementRef).nativeElement.textContent; - getTextContent(): string { - return this.element.textContent; - } + getTextContent(): string { + return this.element.textContent; + } - @Input() set class(cls: ClassValue | string) { - this.userCls.set(cls); - } + @Input() set class(cls: ClassValue | string) { + this.userCls.set(cls); + } - @Input({ transform: booleanAttribute }) - set autoColor(value: boolean) { - this.useAutoColor.set(value); - } + @Input({ transform: booleanAttribute }) + set autoColor(value: boolean) { + this.useAutoColor.set(value); + } } diff --git a/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.spec.ts b/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.spec.ts index e1888a6e3..3998bb1b0 100644 --- a/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.spec.ts +++ b/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.spec.ts @@ -4,64 +4,64 @@ import { By } from '@angular/platform-browser'; import { BrnAvatarImageDirective } from './brn-avatar-image.directive'; @Component({ - selector: 'brn-mock', - standalone: true, - imports: [BrnAvatarImageDirective], - template: ` -
- - {{ bad.canShow() }} -
-
- - {{ unloaded.canShow() }} -
-
- - {{ good.canShow() }} -
- `, + selector: 'brn-mock', + standalone: true, + imports: [BrnAvatarImageDirective], + template: ` +
+ + {{ bad.canShow() }} +
+
+ + {{ unloaded.canShow() }} +
+
+ + {{ good.canShow() }} +
+ `, }) class BrnMockComponent {} describe('BrnAvatarImageDirective', () => { - let component: BrnMockComponent; - let fixture: ComponentFixture; + let component: BrnMockComponent; + let fixture: ComponentFixture; - beforeEach(() => { - fixture = TestBed.createComponent(BrnMockComponent); - component = fixture.componentInstance; - }); + beforeEach(() => { + fixture = TestBed.createComponent(BrnMockComponent); + component = fixture.componentInstance; + }); - it('should compile', () => { - expect(component).toBeTruthy(); - }); + it('should compile', () => { + expect(component).toBeTruthy(); + }); - it('should return false when image has no src', () => { - fixture.detectChanges(); - const bad = fixture.nativeElement.querySelector('#bad'); - expect(bad.querySelector('span').textContent).toEqual('false'); - }); + it('should return false when image has no src', () => { + fixture.detectChanges(); + const bad = fixture.nativeElement.querySelector('#bad'); + expect(bad.querySelector('span').textContent).toEqual('false'); + }); - it('should return false when image has a valid src but isnt loaded', async () => { - fixture.detectChanges(); - await fixture.whenRenderingDone(); - const unloaded = fixture.nativeElement.querySelector('#unloaded'); - expect(unloaded.querySelector('span').textContent).toEqual('false'); - }); + it('should return false when image has a valid src but isnt loaded', async () => { + fixture.detectChanges(); + await fixture.whenRenderingDone(); + const unloaded = fixture.nativeElement.querySelector('#unloaded'); + expect(unloaded.querySelector('span').textContent).toEqual('false'); + }); - it('should return true when the image is loaded without error', async () => { - fixture.debugElement.query(By.css('#loaded img')).triggerEventHandler('load', null); - fixture.detectChanges(); - const unloaded = fixture.nativeElement.querySelector('#loaded'); - expect(unloaded.querySelector('span').textContent).toEqual('true'); - }); + it('should return true when the image is loaded without error', async () => { + fixture.debugElement.query(By.css('#loaded img')).triggerEventHandler('load', null); + fixture.detectChanges(); + const unloaded = fixture.nativeElement.querySelector('#loaded'); + expect(unloaded.querySelector('span').textContent).toEqual('true'); + }); }); diff --git a/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.ts b/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.ts index dc6dba2e5..4f9bc787e 100644 --- a/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.ts +++ b/libs/ui/avatar/brain/src/lib/image/brn-avatar-image.directive.ts @@ -1,25 +1,25 @@ import { Directive, HostListener, computed, signal } from '@angular/core'; @Directive({ - selector: 'img[brnAvatarImage]', - standalone: true, - exportAs: 'avatarImage', + selector: 'img[brnAvatarImage]', + standalone: true, + exportAs: 'avatarImage', }) export class BrnAvatarImageDirective { - private readonly error = signal(false); - private readonly loaded = signal(false); + private readonly error = signal(false); + private readonly loaded = signal(false); - @HostListener('error') - private onError() { - this.error.set(true); - } + @HostListener('error') + private onError() { + this.error.set(true); + } - @HostListener('load') - private onLoad() { - this.loaded.set(true); - } + @HostListener('load') + private onLoad() { + this.loaded.set(true); + } - canShow = computed(() => { - return this.loaded() && !this.error(); - }); + canShow = computed(() => { + return this.loaded() && !this.error(); + }); } diff --git a/libs/ui/avatar/brain/src/lib/util/hex-color-for.spec.ts b/libs/ui/avatar/brain/src/lib/util/hex-color-for.spec.ts index ac6a711e7..d76b63c11 100644 --- a/libs/ui/avatar/brain/src/lib/util/hex-color-for.spec.ts +++ b/libs/ui/avatar/brain/src/lib/util/hex-color-for.spec.ts @@ -2,22 +2,22 @@ import { faker } from '@faker-js/faker'; import { hexColorFor } from './hex-color-for'; describe('hexColorFor', () => { - it('should return a text color of white and a pink-ish background for John Doe', () => { - const generated = hexColorFor('John Doe'); - expect(generated).toBe('#a55c80'); - }); + it('should return a text color of white and a pink-ish background for John Doe', () => { + const generated = hexColorFor('John Doe'); + expect(generated).toBe('#a55c80'); + }); - it('should return a text color of white and a blue-ish background for Jane Doe', () => { - const generated = hexColorFor('Jane Doe'); - expect(generated).toBe('#485fa7'); - }); + it('should return a text color of white and a blue-ish background for Jane Doe', () => { + const generated = hexColorFor('Jane Doe'); + expect(generated).toBe('#485fa7'); + }); - it('should return different colors for different names', () => { - expect(hexColorFor(faker.person.fullName())).not.toBe(hexColorFor(faker.person.fullName())); - }); + it('should return different colors for different names', () => { + expect(hexColorFor(faker.person.fullName())).not.toBe(hexColorFor(faker.person.fullName())); + }); - it('should return the same style when given the same name', () => { - const name = faker.person.fullName(); - expect(hexColorFor(name)).toBe(hexColorFor(name)); - }); + it('should return the same style when given the same name', () => { + const name = faker.person.fullName(); + expect(hexColorFor(name)).toBe(hexColorFor(name)); + }); }); diff --git a/libs/ui/avatar/brain/src/lib/util/hex-color-for.ts b/libs/ui/avatar/brain/src/lib/util/hex-color-for.ts index 941025692..5781e662f 100644 --- a/libs/ui/avatar/brain/src/lib/util/hex-color-for.ts +++ b/libs/ui/avatar/brain/src/lib/util/hex-color-for.ts @@ -1,27 +1,27 @@ function hashString(str: string) { - let h; - for (let i = 0; i < str.length; i++) h = (Math.imul(31, h || 0) + str.charCodeAt(i)) | 0; + let h; + for (let i = 0; i < str.length; i++) h = (Math.imul(31, h || 0) + str.charCodeAt(i)) | 0; - return h || 0; + return h || 0; } function hashManyTimes(times = 5, str: string) { - let h = hashString(str); + let h = hashString(str); - for (let i = 0; i < times; i++) h = hashString(String(h)); + for (let i = 0; i < times; i++) h = hashString(String(h)); - return h; + return h; } export function hexColorFor(str: string) { - const hash = str.length <= 2 ? hashManyTimes(5, str) : hashString(str); + const hash = str.length <= 2 ? hashManyTimes(5, str) : hashString(str); - let color = '#'; + let color = '#'; - for (let i = 0; i < 3; i += 1) { - const value = (hash >> (i * 8)) & 0xff; - color += `00${value.toString(16)}`.slice(-2); - } + for (let i = 0; i < 3; i += 1) { + const value = (hash >> (i * 8)) & 0xff; + color += `00${value.toString(16)}`.slice(-2); + } - return color; + return color; } diff --git a/libs/ui/avatar/brain/src/lib/util/initials.pipe.spec.ts b/libs/ui/avatar/brain/src/lib/util/initials.pipe.spec.ts index c9a72b5a3..8fe4022ac 100644 --- a/libs/ui/avatar/brain/src/lib/util/initials.pipe.spec.ts +++ b/libs/ui/avatar/brain/src/lib/util/initials.pipe.spec.ts @@ -2,50 +2,52 @@ import { faker } from '@faker-js/faker'; import { InitialsPipe } from './initials.pipe'; describe('InitialsPipe', () => { - const pipe = new InitialsPipe(); - - it('should compile', () => { - expect(pipe).toBeTruthy(); - }); - - it('should return an empty string, when an empty string is provided', () => { - expect(pipe.transform('')).toBe(''); - expect(pipe.transform(' ')).toBe(''); - }); - - it.skip('should return the uppercased initials of a provided name', () => { - const name = 'John Doe'; - const otherName = 'Mary Ann Smith'; - const randomName = faker.person.fullName(); - - expect(pipe.transform(name)).toBe('JD'); - expect(pipe.transform(otherName)).toBe('MS'); - expect(pipe.transform(randomName)).toBe( - `${randomName.charAt(0).toLocaleUpperCase()}${randomName.charAt(randomName.indexOf(' ') + 1).toLocaleUpperCase()}` - ); - }); - - it('should not capitalize the initials, when the capitalize flag is set to false', () => { - const name = 'john Doe'; - const otherName = 'mary ann smith'; - const randomName = faker.person.firstName() + ' ' + faker.person.lastName(); - - expect(pipe.transform(name, false)).toBe('jD'); - expect(pipe.transform(otherName, false)).toBe('ms'); - expect(pipe.transform(randomName, false)).toBe( - `${randomName.charAt(0)}${randomName.charAt(randomName.lastIndexOf(' ') + 1)}` - ); - }); - - it('should return all initials when the firstAndLastOnly flag is set to false', () => { - const name = 'Mary Ann Smith'; - - expect(pipe.transform(name, true, false)).toBe('MAS'); - }); - - it('should split the name by the provided delimiter', () => { - const name = 'Mary:Ann:Smith: '; - - expect(pipe.transform(name, true, true, ':')).toBe('MS'); - }); + const pipe = new InitialsPipe(); + + it('should compile', () => { + expect(pipe).toBeTruthy(); + }); + + it('should return an empty string, when an empty string is provided', () => { + expect(pipe.transform('')).toBe(''); + expect(pipe.transform(' ')).toBe(''); + }); + + it.skip('should return the uppercased initials of a provided name', () => { + const name = 'John Doe'; + const otherName = 'Mary Ann Smith'; + const randomName = faker.person.fullName(); + + expect(pipe.transform(name)).toBe('JD'); + expect(pipe.transform(otherName)).toBe('MS'); + expect(pipe.transform(randomName)).toBe( + `${randomName.charAt(0).toLocaleUpperCase()}${randomName + .charAt(randomName.indexOf(' ') + 1) + .toLocaleUpperCase()}`, + ); + }); + + it('should not capitalize the initials, when the capitalize flag is set to false', () => { + const name = 'john Doe'; + const otherName = 'mary ann smith'; + const randomName = faker.person.firstName() + ' ' + faker.person.lastName(); + + expect(pipe.transform(name, false)).toBe('jD'); + expect(pipe.transform(otherName, false)).toBe('ms'); + expect(pipe.transform(randomName, false)).toBe( + `${randomName.charAt(0)}${randomName.charAt(randomName.lastIndexOf(' ') + 1)}`, + ); + }); + + it('should return all initials when the firstAndLastOnly flag is set to false', () => { + const name = 'Mary Ann Smith'; + + expect(pipe.transform(name, true, false)).toBe('MAS'); + }); + + it('should split the name by the provided delimiter', () => { + const name = 'Mary:Ann:Smith: '; + + expect(pipe.transform(name, true, true, ':')).toBe('MS'); + }); }); diff --git a/libs/ui/avatar/brain/src/lib/util/initials.pipe.ts b/libs/ui/avatar/brain/src/lib/util/initials.pipe.ts index 979234c4f..21c5f6609 100644 --- a/libs/ui/avatar/brain/src/lib/util/initials.pipe.ts +++ b/libs/ui/avatar/brain/src/lib/util/initials.pipe.ts @@ -1,26 +1,26 @@ import { Pipe, PipeTransform } from '@angular/core'; const toInitial = - (capitalize = true) => - (word: string) => { - const initial = word.charAt(0); - return capitalize ? initial.toLocaleUpperCase() : initial; - }; + (capitalize = true) => + (word: string) => { + const initial = word.charAt(0); + return capitalize ? initial.toLocaleUpperCase() : initial; + }; const firstAndLast = (initials: string[]) => `${initials[0]}${initials[initials.length - 1]}`; @Pipe({ - name: 'initials', - standalone: true, + name: 'initials', + standalone: true, }) export class InitialsPipe implements PipeTransform { - transform(name: string, capitalize = true, firstAndLastOnly = true, delimiter = ' '): string { - if (!name) return ''; + transform(name: string, capitalize = true, firstAndLastOnly = true, delimiter = ' '): string { + if (!name) return ''; - const initials = name.trim().split(delimiter).filter(Boolean).map(toInitial(capitalize)); + const initials = name.trim().split(delimiter).filter(Boolean).map(toInitial(capitalize)); - if (firstAndLastOnly && initials.length > 1) return firstAndLast(initials); + if (firstAndLastOnly && initials.length > 1) return firstAndLast(initials); - return initials.join(''); - } + return initials.join(''); + } } diff --git a/libs/ui/avatar/brain/src/lib/util/is-bright.spec.ts b/libs/ui/avatar/brain/src/lib/util/is-bright.spec.ts index 457510e77..19f155fda 100644 --- a/libs/ui/avatar/brain/src/lib/util/is-bright.spec.ts +++ b/libs/ui/avatar/brain/src/lib/util/is-bright.spec.ts @@ -1,26 +1,26 @@ import { isBright } from './is-bright'; describe('isBright', () => { - it('should return true for white hex code', () => { - expect(isBright('#ffffff')).toBe(true); - }); + it('should return true for white hex code', () => { + expect(isBright('#ffffff')).toBe(true); + }); - it('should return false for black hex code', () => { - expect(isBright('#000000')).toBe(false); - }); + it('should return false for black hex code', () => { + expect(isBright('#000000')).toBe(false); + }); - it('should return true for a light hex code', () => { - expect(isBright('#e394bb')).toBe(true); - }); + it('should return true for a light hex code', () => { + expect(isBright('#e394bb')).toBe(true); + }); - it('should return false for a dark hex code', () => { - expect(isBright('#485fa7')).toBe(false); - }); + it('should return false for a dark hex code', () => { + expect(isBright('#485fa7')).toBe(false); + }); - it('should support hex color shorthand, with our without hash & ignore capitalization', () => { - expect(isBright('ffffff')).toBe(true); - expect(isBright('#fff')).toBe(true); - expect(isBright('fff')).toBe(true); - expect(isBright('#FFF')).toBe(true); - }); + it('should support hex color shorthand, with our without hash & ignore capitalization', () => { + expect(isBright('ffffff')).toBe(true); + expect(isBright('#fff')).toBe(true); + expect(isBright('fff')).toBe(true); + expect(isBright('#FFF')).toBe(true); + }); }); diff --git a/libs/ui/avatar/brain/src/lib/util/is-bright.ts b/libs/ui/avatar/brain/src/lib/util/is-bright.ts index 176430e99..ac484242f 100644 --- a/libs/ui/avatar/brain/src/lib/util/is-bright.ts +++ b/libs/ui/avatar/brain/src/lib/util/is-bright.ts @@ -1,14 +1,14 @@ const isShortHand = (hex: string) => hex.length === 3; const cleanup = (hex: string) => { - const noHash = hex.replace('#', '').trim().toLowerCase(); + const noHash = hex.replace('#', '').trim().toLowerCase(); - if (!isShortHand(noHash)) return noHash; + if (!isShortHand(noHash)) return noHash; - return noHash - .split('') - .map((char) => char + char) - .join(''); + return noHash + .split('') + .map((char) => char + char) + .join(''); }; export const isBright = (hex: string) => parseInt(cleanup(hex), 16) > 0xffffff / 1.25; diff --git a/libs/ui/avatar/brain/src/test-setup.ts b/libs/ui/avatar/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/avatar/brain/src/test-setup.ts +++ b/libs/ui/avatar/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/avatar/brain/tsconfig.json b/libs/ui/avatar/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/avatar/brain/tsconfig.json +++ b/libs/ui/avatar/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/avatar/brain/tsconfig.lib.json b/libs/ui/avatar/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/avatar/brain/tsconfig.lib.json +++ b/libs/ui/avatar/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/avatar/brain/tsconfig.lib.prod.json b/libs/ui/avatar/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/avatar/brain/tsconfig.lib.prod.json +++ b/libs/ui/avatar/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/avatar/brain/tsconfig.spec.json b/libs/ui/avatar/brain/tsconfig.spec.json index 8841d5391..01c4e74ad 100644 --- a/libs/ui/avatar/brain/tsconfig.spec.json +++ b/libs/ui/avatar/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts", "src/lib/util/randomHSL.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts", "src/lib/util/randomHSL.ts"] } diff --git a/libs/ui/avatar/helm/.eslintrc.json b/libs/ui/avatar/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/avatar/helm/.eslintrc.json +++ b/libs/ui/avatar/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/avatar/helm/jest.config.ts b/libs/ui/avatar/helm/jest.config.ts index 84038190a..03227575f 100644 --- a/libs/ui/avatar/helm/jest.config.ts +++ b/libs/ui/avatar/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-avatar-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-avatar-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/avatar/helm/ng-package.json b/libs/ui/avatar/helm/ng-package.json index c027f007c..d304adfb6 100644 --- a/libs/ui/avatar/helm/ng-package.json +++ b/libs/ui/avatar/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/avatar/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/avatar/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/avatar/helm/package.json b/libs/ui/avatar/helm/package.json index 73de80660..7f5e1613d 100644 --- a/libs/ui/avatar/helm/package.json +++ b/libs/ui/avatar/helm/package.json @@ -1,16 +1,16 @@ { - "name": "@spartan-ng/ui-avatar-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-avatar-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/avatar/helm/project.json b/libs/ui/avatar/helm/project.json index 7c840a8be..b6dd058fb 100644 --- a/libs/ui/avatar/helm/project.json +++ b/libs/ui/avatar/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-avatar-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/avatar/helm/src", - "prefix": "hlm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/avatar/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/avatar/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/avatar/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/avatar/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/avatar/helm/**/*.ts", - "libs/ui/avatar/helm/**/*.html", - "libs/ui/avatar/helm/package.json", - "libs/ui/avatar/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-avatar-helm" - } - } - } + "name": "ui-avatar-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/avatar/helm/src", + "prefix": "hlm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/avatar/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/avatar/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/avatar/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/avatar/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/avatar/helm/**/*.ts", + "libs/ui/avatar/helm/**/*.html", + "libs/ui/avatar/helm/package.json", + "libs/ui/avatar/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-avatar-helm" + } + } + } } diff --git a/libs/ui/avatar/helm/src/index.ts b/libs/ui/avatar/helm/src/index.ts index db068c725..d6ecc6f5f 100644 --- a/libs/ui/avatar/helm/src/index.ts +++ b/libs/ui/avatar/helm/src/index.ts @@ -1,8 +1,8 @@ import { NgModule } from '@angular/core'; import { HlmAvatarFallbackDirective } from './lib/fallback'; -import { HlmAvatarImageDirective } from './lib/image'; import { HlmAvatarComponent } from './lib/hlm-avatar.component'; +import { HlmAvatarImageDirective } from './lib/image'; export * from './lib/fallback'; export * from './lib/hlm-avatar.component'; @@ -11,7 +11,7 @@ export * from './lib/image'; export const HlmAvatarImports = [HlmAvatarFallbackDirective, HlmAvatarImageDirective, HlmAvatarComponent] as const; @NgModule({ - imports: [...HlmAvatarImports], - exports: [...HlmAvatarImports], + imports: [...HlmAvatarImports], + exports: [...HlmAvatarImports], }) export class HlmAvatarModule {} diff --git a/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.spec.ts b/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.spec.ts index 1abc88018..f712840f3 100644 --- a/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.spec.ts +++ b/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.spec.ts @@ -1,62 +1,64 @@ import { Component, PLATFORM_ID } from '@angular/core'; import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing'; -import { HlmAvatarFallbackDirective } from './hlm-avatar-fallback.directive'; import { hexColorFor, isBright } from '@spartan-ng/ui-avatar-brain'; +import { HlmAvatarFallbackDirective } from './hlm-avatar-fallback.directive'; @Component({ - selector: 'hlm-mock', - standalone: true, - imports: [HlmAvatarFallbackDirective], - template: `fallback2`, + selector: 'hlm-mock', + standalone: true, + imports: [HlmAvatarFallbackDirective], + template: ` + fallback2 + `, }) class HlmMockComponent { - userCls = ''; - autoColor = false; + userCls = ''; + autoColor = false; } describe('HlmAvatarFallbackDirective', () => { - let component: HlmMockComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(HlmMockComponent); - component = fixture.componentInstance; - }); - - it('should compile', () => { - expect(component).toBeTruthy(); - }); - - it('should contain the default classes if no inputs are provided', () => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('span').className).toBe( - 'bg-muted flex h-full items-center justify-center rounded-full w-full' - ); - }); - - it('should add any user defined classes', async () => { - component.userCls = 'test-class'; - - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('span').className).toContain('test-class'); - }); - - describe('autoColor', () => { - beforeEach(() => { - component.autoColor = true; - fixture.detectChanges(); - }); - - it('should remove the bg-muted class from the component', fakeAsync(() => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('span').className).not.toContain('bg-muted'); - })); - - it('should remove add a text color class and hex backgroundColor style depending on its content', () => { - const hex = hexColorFor('fallback2'); - const textCls = isBright(hex) ? 'text-black' : 'text-white'; - expect(fixture.nativeElement.querySelector('span').className).toContain(textCls); - expect(fixture.nativeElement.querySelector('span').style.backgroundColor).toBe('rgb(144, 53, 149)'); - }); - }); + let component: HlmMockComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(HlmMockComponent); + component = fixture.componentInstance; + }); + + it('should compile', () => { + expect(component).toBeTruthy(); + }); + + it('should contain the default classes if no inputs are provided', () => { + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('span').className).toBe( + 'bg-muted flex h-full items-center justify-center rounded-full w-full', + ); + }); + + it('should add any user defined classes', async () => { + component.userCls = 'test-class'; + + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('span').className).toContain('test-class'); + }); + + describe('autoColor', () => { + beforeEach(() => { + component.autoColor = true; + fixture.detectChanges(); + }); + + it('should remove the bg-muted class from the component', fakeAsync(() => { + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('span').className).not.toContain('bg-muted'); + })); + + it('should remove add a text color class and hex backgroundColor style depending on its content', () => { + const hex = hexColorFor('fallback2'); + const textCls = isBright(hex) ? 'text-black' : 'text-white'; + expect(fixture.nativeElement.querySelector('span').className).toContain(textCls); + expect(fixture.nativeElement.querySelector('span').style.backgroundColor).toBe('rgb(144, 53, 149)'); + }); + }); }); diff --git a/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.ts b/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.ts index b153b0d8e..015b25f1b 100644 --- a/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.ts +++ b/libs/ui/avatar/helm/src/lib/fallback/hlm-avatar-fallback.directive.ts @@ -4,37 +4,37 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; const generateClasses = (userCls: ClassValue, colorCls: ClassValue = 'bg-muted') => { - return hlm('flex h-full w-full items-center justify-center rounded-full', colorCls, userCls); + return hlm('flex h-full w-full items-center justify-center rounded-full', colorCls, userCls); }; const generateAutoColorTextCls = (hex?: string) => { - if (!hex) return; - return `${isBright(hex) ? 'text-black' : 'text-white'}`; + if (!hex) return; + return `${isBright(hex) ? 'text-black' : 'text-white'}`; }; @Directive({ - selector: '[hlmAvatarFallback]', - standalone: true, - exportAs: 'avatarFallback', - hostDirectives: [ - { - directive: BrnAvatarFallbackDirective, - inputs: ['class:class', 'autoColor:autoColor'], - }, - ], - host: { - '[class]': 'generatedClasses()', - '[style.backgroundColor]': "hex() || ''", - }, + selector: '[hlmAvatarFallback]', + standalone: true, + exportAs: 'avatarFallback', + hostDirectives: [ + { + directive: BrnAvatarFallbackDirective, + inputs: ['class:class', 'autoColor:autoColor'], + }, + ], + host: { + '[class]': 'generatedClasses()', + '[style.backgroundColor]': "hex() || ''", + }, }) export class HlmAvatarFallbackDirective { - private readonly brn = inject(BrnAvatarFallbackDirective); - private readonly hex = computed(() => { - if (!this.brn.useAutoColor() || !this.brn.getTextContent()) return; - return hexColorFor(this.brn.getTextContent()); - }); + private readonly brn = inject(BrnAvatarFallbackDirective); + private readonly hex = computed(() => { + if (!this.brn.useAutoColor() || !this.brn.getTextContent()) return; + return hexColorFor(this.brn.getTextContent()); + }); - private readonly autoColorTextCls = computed(() => generateAutoColorTextCls(this.hex())); + private readonly autoColorTextCls = computed(() => generateAutoColorTextCls(this.hex())); - protected readonly generatedClasses = computed(() => generateClasses(this.brn?.userCls(), this.autoColorTextCls())); + protected readonly generatedClasses = computed(() => generateClasses(this.brn?.userCls(), this.autoColorTextCls())); } diff --git a/libs/ui/avatar/helm/src/lib/hlm-avatar.component.spec.ts b/libs/ui/avatar/helm/src/lib/hlm-avatar.component.spec.ts index 460cdb6f7..61d7a9146 100644 --- a/libs/ui/avatar/helm/src/lib/hlm-avatar.component.spec.ts +++ b/libs/ui/avatar/helm/src/lib/hlm-avatar.component.spec.ts @@ -1,61 +1,61 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { HlmAvatarComponent } from './hlm-avatar.component'; import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BrnAvatarFallbackDirective, BrnAvatarImageDirective } from '@spartan-ng/ui-avatar-brain'; +import { HlmAvatarComponent } from './hlm-avatar.component'; @Component({ - selector: 'hlm-mock', - imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, HlmAvatarComponent], - template: ` - - fallback - - `, - standalone: true, + selector: 'hlm-mock', + imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, HlmAvatarComponent], + template: ` + + fallback + + `, + standalone: true, }) class MockComponent {} describe('HlmAvatarComponent', () => { - let component: HlmAvatarComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - fixture = TestBed.createComponent(HlmAvatarComponent); - component = fixture.componentInstance; - }); - - it('should compile', () => { - expect(component).toBeTruthy(); - }); - - it('should add the default classes if no inputs are provided', () => { - fixture.detectChanges(); - expect(fixture.nativeElement.className).toBe('flex h-10 overflow-hidden relative rounded-full shrink-0 w-10'); - }); - - it('should add any user defined classes', () => { - component.class = 'test-class'; - fixture.detectChanges(); - expect(fixture.nativeElement.className).toContain('test-class'); - }); - - it('should change the size when the variant is changed', () => { - component.variant = 'small'; - fixture.detectChanges(); - expect(fixture.nativeElement.className).toContain('h-6'); - expect(fixture.nativeElement.className).toContain('w-6'); - expect(fixture.nativeElement.className).toContain('text-xs'); - - component.variant = 'large'; - fixture.detectChanges(); - expect(fixture.nativeElement.className).toContain('h-14'); - expect(fixture.nativeElement.className).toContain('w-14'); - expect(fixture.nativeElement.className).toContain('text-lg'); - }); - - it('should support brn directives', () => { - const mockFixture = TestBed.createComponent(MockComponent); - mockFixture.detectChanges(); - expect(mockFixture.nativeElement.querySelector('span').textContent).toBe('fallback'); - }); + let component: HlmAvatarComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + fixture = TestBed.createComponent(HlmAvatarComponent); + component = fixture.componentInstance; + }); + + it('should compile', () => { + expect(component).toBeTruthy(); + }); + + it('should add the default classes if no inputs are provided', () => { + fixture.detectChanges(); + expect(fixture.nativeElement.className).toBe('flex h-10 overflow-hidden relative rounded-full shrink-0 w-10'); + }); + + it('should add any user defined classes', () => { + component.class = 'test-class'; + fixture.detectChanges(); + expect(fixture.nativeElement.className).toContain('test-class'); + }); + + it('should change the size when the variant is changed', () => { + component.variant = 'small'; + fixture.detectChanges(); + expect(fixture.nativeElement.className).toContain('h-6'); + expect(fixture.nativeElement.className).toContain('w-6'); + expect(fixture.nativeElement.className).toContain('text-xs'); + + component.variant = 'large'; + fixture.detectChanges(); + expect(fixture.nativeElement.className).toContain('h-14'); + expect(fixture.nativeElement.className).toContain('w-14'); + expect(fixture.nativeElement.className).toContain('text-lg'); + }); + + it('should support brn directives', () => { + const mockFixture = TestBed.createComponent(MockComponent); + mockFixture.detectChanges(); + expect(mockFixture.nativeElement.querySelector('span').textContent).toBe('fallback'); + }); }); diff --git a/libs/ui/avatar/helm/src/lib/hlm-avatar.component.ts b/libs/ui/avatar/helm/src/lib/hlm-avatar.component.ts index cb036700d..ebcba3d80 100644 --- a/libs/ui/avatar/helm/src/lib/hlm-avatar.component.ts +++ b/libs/ui/avatar/helm/src/lib/hlm-avatar.component.ts @@ -6,55 +6,55 @@ import { cva, VariantProps } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', { - variants: { - variant: { - small: 'h-6 w-6 text-xs', - medium: 'h-10 w-10', - large: 'h-14 w-14 text-lg', - }, - }, - defaultVariants: { - variant: 'medium', - }, + variants: { + variant: { + small: 'h-6 w-6 text-xs', + medium: 'h-10 w-10', + large: 'h-14 w-14 text-lg', + }, + }, + defaultVariants: { + variant: 'medium', + }, }); type AvatarVariants = VariantProps; @Component({ - selector: 'hlm-avatar', - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - imports: [NgIf], - standalone: true, - template: ` - - - - - - - `, + selector: 'hlm-avatar', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + imports: [NgIf], + standalone: true, + template: ` + + + + + + + `, }) export class HlmAvatarComponent extends BrnAvatarComponent { - private readonly _variant = signal('medium'); - private readonly userCls = signal(''); + private readonly _variant = signal('medium'); + private readonly userCls = signal(''); - @Input() - set variant(variant: AvatarVariants['variant']) { - this._variant.set(variant); - this.cls = this.generateClasses(); - } + @Input() + set variant(variant: AvatarVariants['variant']) { + this._variant.set(variant); + this.cls = this.generateClasses(); + } - @Input() - set class(cls: ClassValue) { - this.userCls.set(cls); - this.cls = this.generateClasses(); - } + @Input() + set class(cls: ClassValue) { + this.userCls.set(cls); + this.cls = this.generateClasses(); + } - @HostBinding('class') - protected cls = this.generateClasses(); + @HostBinding('class') + protected cls = this.generateClasses(); - private generateClasses() { - return hlm(avatarVariants({ variant: this._variant() }), this.userCls()); - } + private generateClasses() { + return hlm(avatarVariants({ variant: this._variant() }), this.userCls()); + } } diff --git a/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.spec.ts b/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.spec.ts index 8debc82a1..42f6aa7eb 100644 --- a/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.spec.ts +++ b/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.spec.ts @@ -3,40 +3,42 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { HlmAvatarImageDirective } from './hlm-avatar-image.directive'; @Component({ - selector: 'hlm-mock', - standalone: true, - imports: [HlmAvatarImageDirective], - template: ``, + selector: 'hlm-mock', + standalone: true, + imports: [HlmAvatarImageDirective], + template: ` + + `, }) class HlmMockComponent { - userCls = ''; + userCls = ''; } describe('HlmAvatarImageDirective', () => { - let component: HlmMockComponent; - let fixture: ComponentFixture; + let component: HlmMockComponent; + let fixture: ComponentFixture; - beforeEach(() => { - fixture = TestBed.createComponent(HlmMockComponent); - component = fixture.componentInstance; - }); + beforeEach(() => { + fixture = TestBed.createComponent(HlmMockComponent); + component = fixture.componentInstance; + }); - it('should compile', () => { - expect(component).toBeTruthy(); - }); + it('should compile', () => { + expect(component).toBeTruthy(); + }); - it('should add the default classes if no inputs are provided', () => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('img').className).toBe('aspect-square h-full object-cover w-full'); - }); + it('should add the default classes if no inputs are provided', () => { + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('img').className).toBe('aspect-square h-full object-cover w-full'); + }); - it('should add any user defined classes', async () => { - component.userCls = 'test-class'; - fixture.detectChanges(); + it('should add any user defined classes', async () => { + component.userCls = 'test-class'; + fixture.detectChanges(); - // fallback uses Promise.resolve().then() so we need to wait for the next tick - setTimeout(() => { - expect(fixture.nativeElement.querySelector('img').className).toContain('test-class'); - }); - }); + // fallback uses Promise.resolve().then() so we need to wait for the next tick + setTimeout(() => { + expect(fixture.nativeElement.querySelector('img').className).toContain('test-class'); + }); + }); }); diff --git a/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.ts b/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.ts index e08e16bed..0fc405bf1 100644 --- a/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.ts +++ b/libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.ts @@ -4,33 +4,33 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; const generateClasses = (userCls: ClassValue) => { - return hlm('aspect-square object-cover h-full w-full', userCls); + return hlm('aspect-square object-cover h-full w-full', userCls); }; @Directive({ - selector: 'img[hlmAvatarImage]', - standalone: true, - exportAs: 'avatarImage', - hostDirectives: [BrnAvatarImageDirective], + selector: 'img[hlmAvatarImage]', + standalone: true, + exportAs: 'avatarImage', + hostDirectives: [BrnAvatarImageDirective], }) export class HlmAvatarImageDirective { - private readonly userCls = signal(''); - canShow = inject(BrnAvatarImageDirective).canShow; + private readonly userCls = signal(''); + canShow = inject(BrnAvatarImageDirective).canShow; - @Input() - set class(cls: ClassValue) { - this.userCls.set(cls); - } + @Input() + set class(cls: ClassValue) { + this.userCls.set(cls); + } - @HostBinding('class') - protected cls = generateClasses(this.userCls()); + @HostBinding('class') + protected cls = generateClasses(this.userCls()); - constructor() { - effect(() => { - const cls = this.userCls(); - Promise.resolve().then(() => { - this.cls = generateClasses(cls); - }); - }); - } + constructor() { + effect(() => { + const cls = this.userCls(); + Promise.resolve().then(() => { + this.cls = generateClasses(cls); + }); + }); + } } diff --git a/libs/ui/avatar/helm/src/test-setup.ts b/libs/ui/avatar/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/avatar/helm/src/test-setup.ts +++ b/libs/ui/avatar/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/avatar/helm/tsconfig.json b/libs/ui/avatar/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/avatar/helm/tsconfig.json +++ b/libs/ui/avatar/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/avatar/helm/tsconfig.lib.json b/libs/ui/avatar/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/avatar/helm/tsconfig.lib.json +++ b/libs/ui/avatar/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/avatar/helm/tsconfig.lib.prod.json b/libs/ui/avatar/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/avatar/helm/tsconfig.lib.prod.json +++ b/libs/ui/avatar/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/avatar/helm/tsconfig.spec.json b/libs/ui/avatar/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/avatar/helm/tsconfig.spec.json +++ b/libs/ui/avatar/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/badge/badge.stories.ts b/libs/ui/badge/badge.stories.ts index 568925d97..45f531816 100644 --- a/libs/ui/badge/badge.stories.ts +++ b/libs/ui/badge/badge.stories.ts @@ -3,57 +3,57 @@ import { HlmBadgeDirective } from './helm/src'; type BadgeStory = { isStatic: boolean }; const meta: Meta = { - title: 'Badge', - decorators: [ - moduleMetadata({ - imports: [HlmBadgeDirective], - }), - ], + title: 'Badge', + decorators: [ + moduleMetadata({ + imports: [HlmBadgeDirective], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - args: { - isStatic: false, - }, - render: ({ isStatic }) => ({ - props: { isStatic }, - template: ` + args: { + isStatic: false, + }, + render: ({ isStatic }) => ({ + props: { isStatic }, + template: ` I am a badge `, - }), + }), }; export const Destructive: Story = { - args: { - isStatic: false, - }, - render: ({ isStatic }) => ({ - props: { isStatic }, - template: ` + args: { + isStatic: false, + }, + render: ({ isStatic }) => ({ + props: { isStatic }, + template: ` I am a destructive badge `, - }), + }), }; export const Outline: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` I am an outlined badge `, - }), + }), }; export const Secondary: Story = { - args: { - isStatic: false, - }, - render: ({ isStatic }) => ({ - props: { isStatic }, - template: ` + args: { + isStatic: false, + }, + render: ({ isStatic }) => ({ + props: { isStatic }, + template: ` I am a secondary badge `, - }), + }), }; diff --git a/libs/ui/badge/helm/.eslintrc.json b/libs/ui/badge/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/badge/helm/.eslintrc.json +++ b/libs/ui/badge/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/badge/helm/jest.config.ts b/libs/ui/badge/helm/jest.config.ts index 15d6581e0..286c327b1 100644 --- a/libs/ui/badge/helm/jest.config.ts +++ b/libs/ui/badge/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-badge-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-badge-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/badge/helm/ng-package.json b/libs/ui/badge/helm/ng-package.json index b8b4d67e3..0bd069c6c 100644 --- a/libs/ui/badge/helm/ng-package.json +++ b/libs/ui/badge/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/badge/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/badge/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/badge/helm/package.json b/libs/ui/badge/helm/package.json index 3e3dfdb35..21a6d10dd 100644 --- a/libs/ui/badge/helm/package.json +++ b/libs/ui/badge/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-badge-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-badge-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/badge/helm/project.json b/libs/ui/badge/helm/project.json index 387dbd4ca..8e2f6f7b0 100644 --- a/libs/ui/badge/helm/project.json +++ b/libs/ui/badge/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-badge-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/badge/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/badge/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/badge/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/badge/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/badge/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/badge/helm/**/*.ts", - "libs/ui/badge/helm/**/*.html", - "libs/ui/badge/helm/package.json", - "libs/ui/badge/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-badge-helm" - } - } - } + "name": "ui-badge-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/badge/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/badge/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/badge/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/badge/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/badge/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/badge/helm/**/*.ts", + "libs/ui/badge/helm/**/*.html", + "libs/ui/badge/helm/package.json", + "libs/ui/badge/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-badge-helm" + } + } + } } diff --git a/libs/ui/badge/helm/src/index.ts b/libs/ui/badge/helm/src/index.ts index fc17cb0bf..ad60d3533 100644 --- a/libs/ui/badge/helm/src/index.ts +++ b/libs/ui/badge/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmBadgeDirective } from './lib/hlm-badge.directive'; export * from './lib/hlm-badge.directive'; @NgModule({ - imports: [HlmBadgeDirective], - exports: [HlmBadgeDirective], + imports: [HlmBadgeDirective], + exports: [HlmBadgeDirective], }) export class HlmBadgeModule {} diff --git a/libs/ui/badge/helm/src/lib/hlm-badge.directive.ts b/libs/ui/badge/helm/src/lib/hlm-badge.directive.ts index 980f21d32..a150040aa 100644 --- a/libs/ui/badge/helm/src/lib/hlm-badge.directive.ts +++ b/libs/ui/badge/helm/src/lib/hlm-badge.directive.ts @@ -1,84 +1,84 @@ import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { cva, VariantProps } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const badgeVariants = cva( - 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', - { - variants: { - variant: { - default: 'bg-primary border-transparent text-primary-foreground', - secondary: 'bg-secondary border-transparent text-secondary-foreground', - destructive: 'bg-destructive border-transparent text-destructive-foreground', - outline: 'text-foreground border-border', - }, - static: { true: '', false: '' }, - }, - compoundVariants: [ - { - variant: 'default', - static: false, - class: 'hover:bg-primary/80', - }, - { - variant: 'secondary', - static: false, - class: 'hover:bg-secondary/80', - }, - { - variant: 'destructive', - static: false, - class: 'hover:bg-destructive/80', - }, - ], - defaultVariants: { - variant: 'default', - static: false, - }, - } + 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + { + variants: { + variant: { + default: 'bg-primary border-transparent text-primary-foreground', + secondary: 'bg-secondary border-transparent text-secondary-foreground', + destructive: 'bg-destructive border-transparent text-destructive-foreground', + outline: 'text-foreground border-border', + }, + static: { true: '', false: '' }, + }, + compoundVariants: [ + { + variant: 'default', + static: false, + class: 'hover:bg-primary/80', + }, + { + variant: 'secondary', + static: false, + class: 'hover:bg-secondary/80', + }, + { + variant: 'destructive', + static: false, + class: 'hover:bg-destructive/80', + }, + ], + defaultVariants: { + variant: 'default', + static: false, + }, + }, ); type badgeVariants = VariantProps; @Directive({ - selector: '[hlmBadge]', - standalone: true, + selector: '[hlmBadge]', + standalone: true, }) export class HlmBadgeDirective { - private _variant: badgeVariants['variant'] = 'default'; - @Input() - get variant(): badgeVariants['variant'] { - return this._variant; - } + private _variant: badgeVariants['variant'] = 'default'; + @Input() + get variant(): badgeVariants['variant'] { + return this._variant; + } - set variant(value: badgeVariants['variant']) { - this._variant = value; - this._class = this.generateClasses(); - } + set variant(value: badgeVariants['variant']) { + this._variant = value; + this._class = this.generateClasses(); + } - private _static: badgeVariants['static'] = false; - @Input({ transform: booleanAttribute }) - get static(): badgeVariants['static'] { - return this._static; - } + private _static: badgeVariants['static'] = false; + @Input({ transform: booleanAttribute }) + get static(): badgeVariants['static'] { + return this._static; + } - set static(value: boolean) { - this._static = value; - this._class = this.generateClasses(); - } + set static(value: boolean) { + this._static = value; + this._class = this.generateClasses(); + } - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(badgeVariants({ variant: this._variant, static: this._static }), this._inputs); - } + private generateClasses() { + return hlm(badgeVariants({ variant: this._variant, static: this._static }), this._inputs); + } } diff --git a/libs/ui/badge/helm/src/test-setup.ts b/libs/ui/badge/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/badge/helm/src/test-setup.ts +++ b/libs/ui/badge/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/badge/helm/tsconfig.json b/libs/ui/badge/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/badge/helm/tsconfig.json +++ b/libs/ui/badge/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/badge/helm/tsconfig.lib.json b/libs/ui/badge/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/badge/helm/tsconfig.lib.json +++ b/libs/ui/badge/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/badge/helm/tsconfig.lib.prod.json b/libs/ui/badge/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/badge/helm/tsconfig.lib.prod.json +++ b/libs/ui/badge/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/badge/helm/tsconfig.spec.json b/libs/ui/badge/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/badge/helm/tsconfig.spec.json +++ b/libs/ui/badge/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/button/button.stories.ts b/libs/ui/button/button.stories.ts index 02452efbf..58e85d239 100644 --- a/libs/ui/button/button.stories.ts +++ b/libs/ui/button/button.stories.ts @@ -2,85 +2,85 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from './helm/src'; const meta: Meta<{}> = { - title: 'Button', - decorators: [ - moduleMetadata({ - imports: [HlmButtonDirective], - }), - ], + title: 'Button', + decorators: [ + moduleMetadata({ + imports: [HlmButtonDirective], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Destructive: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Outline: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Secondary: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Ghost: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Link: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; diff --git a/libs/ui/button/helm/.eslintrc.json b/libs/ui/button/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/button/helm/.eslintrc.json +++ b/libs/ui/button/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/button/helm/jest.config.ts b/libs/ui/button/helm/jest.config.ts index d657ca607..995c4b075 100644 --- a/libs/ui/button/helm/jest.config.ts +++ b/libs/ui/button/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-button-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-button-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/button/helm/ng-package.json b/libs/ui/button/helm/ng-package.json index 3547ff169..cbfc34258 100644 --- a/libs/ui/button/helm/ng-package.json +++ b/libs/ui/button/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/button/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/button/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/button/helm/package.json b/libs/ui/button/helm/package.json index e03af02ba..e21b3f99a 100644 --- a/libs/ui/button/helm/package.json +++ b/libs/ui/button/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-button-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-button-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/button/helm/project.json b/libs/ui/button/helm/project.json index 8fcc3f9a9..f906eb546 100644 --- a/libs/ui/button/helm/project.json +++ b/libs/ui/button/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-button-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/button/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/button/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/button/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/button/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/button/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/button/helm/**/*.ts", - "libs/ui/button/helm/**/*.html", - "libs/ui/button/helm/package.json", - "libs/ui/button/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-button-helm" - } - } - } + "name": "ui-button-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/button/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/button/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/button/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/button/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/button/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/button/helm/**/*.ts", + "libs/ui/button/helm/**/*.html", + "libs/ui/button/helm/package.json", + "libs/ui/button/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-button-helm" + } + } + } } diff --git a/libs/ui/button/helm/src/index.ts b/libs/ui/button/helm/src/index.ts index 0b65535b7..413697fd7 100644 --- a/libs/ui/button/helm/src/index.ts +++ b/libs/ui/button/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmButtonDirective } from './lib/hlm-button.directive'; export * from './lib/hlm-button.directive'; @NgModule({ - imports: [HlmButtonDirective], - exports: [HlmButtonDirective], + imports: [HlmButtonDirective], + exports: [HlmButtonDirective], }) export class HlmButtonModule {} diff --git a/libs/ui/button/helm/src/lib/hlm-button.directive.ts b/libs/ui/button/helm/src/lib/hlm-button.directive.ts index 573b5138e..4d55ae311 100644 --- a/libs/ui/button/helm/src/lib/hlm-button.directive.ts +++ b/libs/ui/button/helm/src/lib/hlm-button.directive.ts @@ -1,74 +1,74 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const buttonVariants = cva( - 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', - { - variants: { - variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', - outline: 'border border-input hover:bg-accent hover:text-accent-foreground', - secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'underline-offset-4 hover:underline text-primary', - }, - size: { - default: 'h-10 py-2 px-4', - sm: 'h-9 px-3 rounded-md', - lg: 'h-11 px-8 rounded-md', - icon: 'h-10 w-10', - }, - }, - defaultVariants: { - variant: 'default', - size: 'default', - }, - } + 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: 'border border-input hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'underline-offset-4 hover:underline text-primary', + }, + size: { + default: 'h-10 py-2 px-4', + sm: 'h-9 px-3 rounded-md', + lg: 'h-11 px-8 rounded-md', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, ); type ButtonVariants = VariantProps; @Directive({ - selector: '[hlmBtn]', - standalone: true, + selector: '[hlmBtn]', + standalone: true, }) export class HlmButtonDirective { - private _variant: ButtonVariants['variant'] = 'default'; - @Input() - get variant(): ButtonVariants['variant'] { - return this._variant; - } + private _variant: ButtonVariants['variant'] = 'default'; + @Input() + get variant(): ButtonVariants['variant'] { + return this._variant; + } - set variant(value: ButtonVariants['variant']) { - this._variant = value; - this._class = this.generateClasses(); - } + set variant(value: ButtonVariants['variant']) { + this._variant = value; + this._class = this.generateClasses(); + } - private _size: ButtonVariants['size'] = 'default'; - @Input() - get size(): ButtonVariants['size'] { - return this._size; - } + private _size: ButtonVariants['size'] = 'default'; + @Input() + get size(): ButtonVariants['size'] { + return this._size; + } - set size(value: ButtonVariants['size']) { - this._size = value; - this._class = this.generateClasses(); - } + set size(value: ButtonVariants['size']) { + this._size = value; + this._class = this.generateClasses(); + } - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(buttonVariants({ variant: this._variant, size: this._size }), this._inputs); - } + private generateClasses() { + return hlm(buttonVariants({ variant: this._variant, size: this._size }), this._inputs); + } } diff --git a/libs/ui/button/helm/src/test-setup.ts b/libs/ui/button/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/button/helm/src/test-setup.ts +++ b/libs/ui/button/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/button/helm/tsconfig.json b/libs/ui/button/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/button/helm/tsconfig.json +++ b/libs/ui/button/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/button/helm/tsconfig.lib.json b/libs/ui/button/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/button/helm/tsconfig.lib.json +++ b/libs/ui/button/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/button/helm/tsconfig.lib.prod.json b/libs/ui/button/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/button/helm/tsconfig.lib.prod.json +++ b/libs/ui/button/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/button/helm/tsconfig.spec.json b/libs/ui/button/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/button/helm/tsconfig.spec.json +++ b/libs/ui/button/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/card/card.stories.ts b/libs/ui/card/card.stories.ts index 14ab8f616..1f3077765 100644 --- a/libs/ui/card/card.stories.ts +++ b/libs/ui/card/card.stories.ts @@ -1,26 +1,26 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { HlmCardDirective, HlmCardImports } from './helm/src'; -import { HlmLabelDirective } from '../label/helm/src'; -import { HlmInputDirective } from '../input/helm/src'; -import { HlmButtonDirective } from '../button/helm/src'; import { HlmBadgeDirective } from '../badge/helm/src'; +import { HlmButtonDirective } from '../button/helm/src'; +import { HlmInputDirective } from '../input/helm/src'; +import { HlmLabelDirective } from '../label/helm/src'; +import { HlmCardDirective, HlmCardImports } from './helm/src'; const meta: Meta = { - title: 'Card', - decorators: [ - moduleMetadata({ - imports: [HlmCardImports, HlmLabelDirective, HlmInputDirective, HlmButtonDirective, HlmBadgeDirective], - }), - ], + title: 'Card', + decorators: [ + moduleMetadata({ + imports: [HlmCardImports, HlmLabelDirective, HlmInputDirective, HlmButtonDirective, HlmBadgeDirective], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `

Create new project

@@ -47,12 +47,12 @@ export const Default: Story = {
`, - }), + }), }; export const Transposed: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `

AngularGPT

@@ -74,5 +74,5 @@ export const Transposed: Story = {
`, - }), + }), }; diff --git a/libs/ui/card/helm/.eslintrc.json b/libs/ui/card/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/card/helm/.eslintrc.json +++ b/libs/ui/card/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/card/helm/jest.config.ts b/libs/ui/card/helm/jest.config.ts index ef6320a02..4f05cdb3c 100644 --- a/libs/ui/card/helm/jest.config.ts +++ b/libs/ui/card/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-card-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-card-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/card/helm/ng-package.json b/libs/ui/card/helm/ng-package.json index e512f4091..28068de67 100644 --- a/libs/ui/card/helm/ng-package.json +++ b/libs/ui/card/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/card/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/card/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/card/helm/package.json b/libs/ui/card/helm/package.json index e989e7cb9..e635cd7d3 100644 --- a/libs/ui/card/helm/package.json +++ b/libs/ui/card/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-card-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-card-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/card/helm/project.json b/libs/ui/card/helm/project.json index 4a2feadcf..d16ac8c03 100644 --- a/libs/ui/card/helm/project.json +++ b/libs/ui/card/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-card-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/card/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/card/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/card/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/card/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/card/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/card/helm/**/*.ts", - "libs/ui/card/helm/**/*.html", - "libs/ui/card/helm/package.json", - "libs/ui/card/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-card-helm" - } - } - } + "name": "ui-card-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/card/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/card/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/card/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/card/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/card/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/card/helm/**/*.ts", + "libs/ui/card/helm/**/*.html", + "libs/ui/card/helm/package.json", + "libs/ui/card/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-card-helm" + } + } + } } diff --git a/libs/ui/card/helm/src/index.ts b/libs/ui/card/helm/src/index.ts index 1d3a5b3ab..b6f2d14d0 100644 --- a/libs/ui/card/helm/src/index.ts +++ b/libs/ui/card/helm/src/index.ts @@ -1,30 +1,30 @@ import { NgModule } from '@angular/core'; -import { HlmCardDirective } from './lib/hlm-card.directive'; -import { HlmCardHeaderDirective } from './lib/hlm-card-header.directive'; +import { HlmCardContentDirective } from './lib/hlm-card-content.directive'; +import { HlmCardDescriptionDirective } from './lib/hlm-card-description.directive'; import { HlmCardFooterDirective } from './lib/hlm-card-footer.directive'; +import { HlmCardHeaderDirective } from './lib/hlm-card-header.directive'; import { HlmCardTitleDirective } from './lib/hlm-card-title.directive'; -import { HlmCardDescriptionDirective } from './lib/hlm-card-description.directive'; -import { HlmCardContentDirective } from './lib/hlm-card-content.directive'; +import { HlmCardDirective } from './lib/hlm-card.directive'; -export * from './lib/hlm-card.directive'; -export * from './lib/hlm-card-header.directive'; +export * from './lib/hlm-card-content.directive'; +export * from './lib/hlm-card-description.directive'; export * from './lib/hlm-card-footer.directive'; +export * from './lib/hlm-card-header.directive'; export * from './lib/hlm-card-title.directive'; -export * from './lib/hlm-card-description.directive'; -export * from './lib/hlm-card-content.directive'; +export * from './lib/hlm-card.directive'; export const HlmCardImports = [ - HlmCardDirective, - HlmCardHeaderDirective, - HlmCardFooterDirective, - HlmCardTitleDirective, - HlmCardDescriptionDirective, - HlmCardContentDirective, + HlmCardDirective, + HlmCardHeaderDirective, + HlmCardFooterDirective, + HlmCardTitleDirective, + HlmCardDescriptionDirective, + HlmCardContentDirective, ] as const; @NgModule({ - imports: [...HlmCardImports], - exports: [...HlmCardImports], + imports: [...HlmCardImports], + exports: [...HlmCardImports], }) export class HlmCardModule {} diff --git a/libs/ui/card/helm/src/lib/hlm-card-content.directive.ts b/libs/ui/card/helm/src/lib/hlm-card-content.directive.ts index 414525b4b..dcf202564 100644 --- a/libs/ui/card/helm/src/lib/hlm-card-content.directive.ts +++ b/libs/ui/card/helm/src/lib/hlm-card-content.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const cardContentVariants = cva('p-6 pt-0', { - variants: {}, - defaultVariants: {}, + variants: {}, + defaultVariants: {}, }); export type CardContentVariants = VariantProps; @Directive({ - selector: '[hlmCardContent]', - standalone: true, + selector: '[hlmCardContent]', + standalone: true, }) export class HlmCardContentDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') _class = this.generateClasses(); + @HostBinding('class') _class = this.generateClasses(); - private generateClasses() { - return hlm(cardContentVariants(), this._inputs); - } + private generateClasses() { + return hlm(cardContentVariants(), this._inputs); + } } diff --git a/libs/ui/card/helm/src/lib/hlm-card-description.directive.ts b/libs/ui/card/helm/src/lib/hlm-card-description.directive.ts index e95198870..fda085b4b 100644 --- a/libs/ui/card/helm/src/lib/hlm-card-description.directive.ts +++ b/libs/ui/card/helm/src/lib/hlm-card-description.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const cardDescriptionVariants = cva('text-sm text-muted-foreground', { - variants: {}, - defaultVariants: {}, + variants: {}, + defaultVariants: {}, }); export type CardDescriptionVariants = VariantProps; @Directive({ - selector: '[hlmCardDescription]', - standalone: true, + selector: '[hlmCardDescription]', + standalone: true, }) export class HlmCardDescriptionDirective { - private _inputs: ClassValue = ''; - @HostBinding('class') - private _class = this.generateClasses(); + private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClasses(); - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm(cardDescriptionVariants(), this._inputs); - } + private generateClasses() { + return hlm(cardDescriptionVariants(), this._inputs); + } } diff --git a/libs/ui/card/helm/src/lib/hlm-card-footer.directive.ts b/libs/ui/card/helm/src/lib/hlm-card-footer.directive.ts index c69f65928..a0810b6e1 100644 --- a/libs/ui/card/helm/src/lib/hlm-card-footer.directive.ts +++ b/libs/ui/card/helm/src/lib/hlm-card-footer.directive.ts @@ -1,44 +1,44 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const cardFooterVariants = cva('flex p-6 pt-0', { - variants: { - direction: { - row: 'flex-row items-center space-x-1.5', - column: 'flex-col space-y-1.5', - }, - }, - defaultVariants: { - direction: 'row', - }, + variants: { + direction: { + row: 'flex-row items-center space-x-1.5', + column: 'flex-col space-y-1.5', + }, + }, + defaultVariants: { + direction: 'row', + }, }); export type CardFooterVariants = VariantProps; @Directive({ - selector: '[hlmCardFooter]', - standalone: true, + selector: '[hlmCardFooter]', + standalone: true, }) export class HlmCardFooterDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - private _direction: CardFooterVariants['direction'] = 'row'; - @Input() - set direction(value: CardFooterVariants['direction']) { - this._direction = value; - this._class = this.generateClasses(); - } + private _direction: CardFooterVariants['direction'] = 'row'; + @Input() + set direction(value: CardFooterVariants['direction']) { + this._direction = value; + this._class = this.generateClasses(); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') _class = this.generateClasses(); + @HostBinding('class') _class = this.generateClasses(); - private generateClasses() { - return hlm(cardFooterVariants({ direction: this._direction }), this._inputs); - } + private generateClasses() { + return hlm(cardFooterVariants({ direction: this._direction }), this._inputs); + } } diff --git a/libs/ui/card/helm/src/lib/hlm-card-header.directive.ts b/libs/ui/card/helm/src/lib/hlm-card-header.directive.ts index 791f5225e..c9f575be2 100644 --- a/libs/ui/card/helm/src/lib/hlm-card-header.directive.ts +++ b/libs/ui/card/helm/src/lib/hlm-card-header.directive.ts @@ -1,44 +1,44 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const cardHeaderVariants = cva('flex p-6', { - variants: { - direction: { - row: 'flex-row items-center space-x-1.5', - column: 'flex-col space-y-1.5', - }, - }, - defaultVariants: { - direction: 'column', - }, + variants: { + direction: { + row: 'flex-row items-center space-x-1.5', + column: 'flex-col space-y-1.5', + }, + }, + defaultVariants: { + direction: 'column', + }, }); export type CardHeaderVariants = VariantProps; @Directive({ - selector: '[hlmCardHeader]', - standalone: true, + selector: '[hlmCardHeader]', + standalone: true, }) export class HlmCardHeaderDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - private _direction: CardHeaderVariants['direction'] = 'column'; - @Input() - set direction(value: CardHeaderVariants['direction']) { - this._direction = value; - this._class = this.generateClasses(); - } + private _direction: CardHeaderVariants['direction'] = 'column'; + @Input() + set direction(value: CardHeaderVariants['direction']) { + this._direction = value; + this._class = this.generateClasses(); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') _class = this.generateClasses(); + @HostBinding('class') _class = this.generateClasses(); - private generateClasses() { - return hlm(cardHeaderVariants({ direction: this._direction }), this._inputs); - } + private generateClasses() { + return hlm(cardHeaderVariants({ direction: this._direction }), this._inputs); + } } diff --git a/libs/ui/card/helm/src/lib/hlm-card-title.directive.ts b/libs/ui/card/helm/src/lib/hlm-card-title.directive.ts index af21d7b5a..528191ead 100644 --- a/libs/ui/card/helm/src/lib/hlm-card-title.directive.ts +++ b/libs/ui/card/helm/src/lib/hlm-card-title.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const cardTitleVariants = cva('text-lg font-semibold leading-none tracking-tight', { - variants: {}, - defaultVariants: {}, + variants: {}, + defaultVariants: {}, }); export type CardTitleVariants = VariantProps; @Directive({ - selector: '[hlmCardTitle]', - standalone: true, + selector: '[hlmCardTitle]', + standalone: true, }) export class HlmCardTitleDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') _class = this.generateClasses(); + @HostBinding('class') _class = this.generateClasses(); - private generateClasses() { - return hlm(cardTitleVariants(), this._inputs); - } + private generateClasses() { + return hlm(cardTitleVariants(), this._inputs); + } } diff --git a/libs/ui/card/helm/src/lib/hlm-card.directive.ts b/libs/ui/card/helm/src/lib/hlm-card.directive.ts index 2a123be12..68979fa43 100644 --- a/libs/ui/card/helm/src/lib/hlm-card.directive.ts +++ b/libs/ui/card/helm/src/lib/hlm-card.directive.ts @@ -1,33 +1,33 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const cardVariants = cva( - 'rounded-lg border border-border bg-card focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-card-foreground shadow-sm', - { - variants: {}, - defaultVariants: {}, - } + 'rounded-lg border border-border bg-card focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-card-foreground shadow-sm', + { + variants: {}, + defaultVariants: {}, + }, ); export type CardVariants = VariantProps; @Directive({ - selector: '[hlmCard]', - standalone: true, + selector: '[hlmCard]', + standalone: true, }) export class HlmCardDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') _class = this.generateClasses(); + @HostBinding('class') _class = this.generateClasses(); - private generateClasses() { - return hlm(cardVariants(), this._inputs); - } + private generateClasses() { + return hlm(cardVariants(), this._inputs); + } } diff --git a/libs/ui/card/helm/src/test-setup.ts b/libs/ui/card/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/card/helm/src/test-setup.ts +++ b/libs/ui/card/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/card/helm/tsconfig.json b/libs/ui/card/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/card/helm/tsconfig.json +++ b/libs/ui/card/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/card/helm/tsconfig.lib.json b/libs/ui/card/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/card/helm/tsconfig.lib.json +++ b/libs/ui/card/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/card/helm/tsconfig.lib.prod.json b/libs/ui/card/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/card/helm/tsconfig.lib.prod.json +++ b/libs/ui/card/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/card/helm/tsconfig.spec.json b/libs/ui/card/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/card/helm/tsconfig.spec.json +++ b/libs/ui/card/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/collapsible/brain/.eslintrc.json b/libs/ui/collapsible/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/collapsible/brain/.eslintrc.json +++ b/libs/ui/collapsible/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/collapsible/brain/jest.config.ts b/libs/ui/collapsible/brain/jest.config.ts index 650ba3f0e..57f9f423b 100644 --- a/libs/ui/collapsible/brain/jest.config.ts +++ b/libs/ui/collapsible/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-collapsible-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-collapsible-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/collapsible/brain/ng-package.json b/libs/ui/collapsible/brain/ng-package.json index 087767bb5..1353e971c 100644 --- a/libs/ui/collapsible/brain/ng-package.json +++ b/libs/ui/collapsible/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/collapsible/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/collapsible/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/collapsible/brain/package.json b/libs/ui/collapsible/brain/package.json index 1707d0194..b79dec720 100644 --- a/libs/ui/collapsible/brain/package.json +++ b/libs/ui/collapsible/brain/package.json @@ -1,12 +1,12 @@ { - "name": "@spartan-ng/ui-collapsible-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-collapsible-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/collapsible/brain/project.json b/libs/ui/collapsible/brain/project.json index 08712b3d2..33b38254c 100644 --- a/libs/ui/collapsible/brain/project.json +++ b/libs/ui/collapsible/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-collapsible-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/collapsible/brain/src", - "prefix": "spartan", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/collapsible/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/collapsible/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/collapsible/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/collapsible/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/collapsible/brain/**/*.ts", - "libs/ui/collapsible/brain/**/*.html", - "libs/ui/collapsible/brain/package.json", - "libs/ui/collapsible/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-collapsible-brain" - } - } - } + "name": "ui-collapsible-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/collapsible/brain/src", + "prefix": "spartan", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/collapsible/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/collapsible/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/collapsible/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/collapsible/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/collapsible/brain/**/*.ts", + "libs/ui/collapsible/brain/**/*.html", + "libs/ui/collapsible/brain/package.json", + "libs/ui/collapsible/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-collapsible-brain" + } + } + } } diff --git a/libs/ui/collapsible/brain/src/index.ts b/libs/ui/collapsible/brain/src/index.ts index c06d09bf2..d7acad752 100644 --- a/libs/ui/collapsible/brain/src/index.ts +++ b/libs/ui/collapsible/brain/src/index.ts @@ -1,21 +1,21 @@ import { NgModule } from '@angular/core'; -import { BrnCollapsibleComponent } from './lib/brn-collapsible.component'; -import { BrnCollapsibleTriggerDirective } from './lib/brn-collapsible-trigger.directive'; import { BrnCollapsibleContentComponent } from './lib/brn-collapsible-content.component'; +import { BrnCollapsibleTriggerDirective } from './lib/brn-collapsible-trigger.directive'; +import { BrnCollapsibleComponent } from './lib/brn-collapsible.component'; -export * from './lib/brn-collapsible.component'; -export * from './lib/brn-collapsible-trigger.directive'; export * from './lib/brn-collapsible-content.component'; +export * from './lib/brn-collapsible-trigger.directive'; +export * from './lib/brn-collapsible.component'; export const BrnCollapsibleImports = [ - BrnCollapsibleComponent, - BrnCollapsibleTriggerDirective, - BrnCollapsibleContentComponent, + BrnCollapsibleComponent, + BrnCollapsibleTriggerDirective, + BrnCollapsibleContentComponent, ] as const; @NgModule({ - imports: [...BrnCollapsibleImports], - exports: [...BrnCollapsibleImports], + imports: [...BrnCollapsibleImports], + exports: [...BrnCollapsibleImports], }) export class BrnCollapsibleModule {} diff --git a/libs/ui/collapsible/brain/src/lib/brn-collapsible-content.component.ts b/libs/ui/collapsible/brain/src/lib/brn-collapsible-content.component.ts index 2079d676e..5ddea6fc5 100644 --- a/libs/ui/collapsible/brain/src/lib/brn-collapsible-content.component.ts +++ b/libs/ui/collapsible/brain/src/lib/brn-collapsible-content.component.ts @@ -2,49 +2,51 @@ import { AfterContentInit, Component, computed, ElementRef, inject, Input, signa import { BrnCollapsibleComponent } from './brn-collapsible.component'; @Component({ - selector: 'brn-collapsible-content', - standalone: true, - host: { - '[hidden]': 'state() === "closed"', - '[attr.data-state]': 'state()', - '[style]': 'computedStyles()', - '[id]': 'contentId()', - }, - template: ` `, + selector: 'brn-collapsible-content', + standalone: true, + host: { + '[hidden]': 'state() === "closed"', + '[attr.data-state]': 'state()', + '[style]': 'computedStyles()', + '[id]': 'contentId()', + }, + template: ` + + `, }) export class BrnCollapsibleContentComponent implements AfterContentInit { - private _collapsible = inject(BrnCollapsibleComponent, { optional: true }); - private _elementRef = inject(ElementRef); - private _height = signal(0); - private _width = signal(0); - public contentId = this._collapsible?.contentId ?? signal(undefined).asReadonly; + private _collapsible = inject(BrnCollapsibleComponent, { optional: true }); + private _elementRef = inject(ElementRef); + private _height = signal(0); + private _width = signal(0); + public contentId = this._collapsible?.contentId ?? signal(undefined).asReadonly; - state = this._collapsible?.state ?? signal('closed').asReadonly(); - computedStyles = computed(() => { - const height = this._height(); - const width = this._width(); - return { - [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined, - [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined, - }; - }); + state = this._collapsible?.state ?? signal('closed').asReadonly(); + computedStyles = computed(() => { + const height = this._height(); + const width = this._width(); + return { + [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined, + [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined, + }; + }); - @Input() - set id(value: string | null | undefined) { - if (!value || !this._collapsible) return; - this._collapsible.contentId.set(value); - } - constructor() { - if (!this._collapsible) { - throw Error('Collapsible trigger directive can only be used inside a brn-collapsible element.'); - } - } + @Input() + set id(value: string | null | undefined) { + if (!value || !this._collapsible) return; + this._collapsible.contentId.set(value); + } + constructor() { + if (!this._collapsible) { + throw Error('Collapsible trigger directive can only be used inside a brn-collapsible element.'); + } + } - ngAfterContentInit() { - if (typeof this._elementRef.nativeElement.getBoundingClientRect !== 'function') return; - const rect = this._elementRef.nativeElement.getBoundingClientRect(); - if (!rect) return; - this._width.set(rect.width); - this._height.set(rect.height); - } + ngAfterContentInit() { + if (typeof this._elementRef.nativeElement.getBoundingClientRect !== 'function') return; + const rect = this._elementRef.nativeElement.getBoundingClientRect(); + if (!rect) return; + this._width.set(rect.width); + this._height.set(rect.height); + } } diff --git a/libs/ui/collapsible/brain/src/lib/brn-collapsible-trigger.directive.ts b/libs/ui/collapsible/brain/src/lib/brn-collapsible-trigger.directive.ts index 02804882b..f20bf9458 100644 --- a/libs/ui/collapsible/brain/src/lib/brn-collapsible-trigger.directive.ts +++ b/libs/ui/collapsible/brain/src/lib/brn-collapsible-trigger.directive.ts @@ -2,28 +2,28 @@ import { Directive, inject, signal } from '@angular/core'; import { BrnCollapsibleComponent } from './brn-collapsible.component'; @Directive({ - selector: 'button[brnCollapsibleTrigger]', - standalone: true, - host: { - '[attr.data-state]': 'state()', - '[attr.disabled]': 'disabled()', - '[attr.aria-expanded]': 'state() === "open"', - '[attr.aria-controls]': 'ariaControls()', - '(click)': 'toggleCollapsible()', - }, + selector: 'button[brnCollapsibleTrigger]', + standalone: true, + host: { + '[attr.data-state]': 'state()', + '[attr.disabled]': 'disabled()', + '[attr.aria-expanded]': 'state() === "open"', + '[attr.aria-controls]': 'ariaControls()', + '(click)': 'toggleCollapsible()', + }, }) export class BrnCollapsibleTriggerDirective { - private _collapsible = inject(BrnCollapsibleComponent, { optional: true }); - state = this._collapsible?.state ?? signal(false).asReadonly(); - disabled = this._collapsible?.collapsibleDisabled ?? signal(undefined).asReadonly(); - ariaControls = this._collapsible?.contentId; - constructor() { - if (!this._collapsible) { - throw Error('Collapsible trigger directive can only be used inside a brn-collapsible element.'); - } - } + private _collapsible = inject(BrnCollapsibleComponent, { optional: true }); + state = this._collapsible?.state ?? signal(false).asReadonly(); + disabled = this._collapsible?.collapsibleDisabled ?? signal(undefined).asReadonly(); + ariaControls = this._collapsible?.contentId; + constructor() { + if (!this._collapsible) { + throw Error('Collapsible trigger directive can only be used inside a brn-collapsible element.'); + } + } - toggleCollapsible() { - this._collapsible?.toggle(); - } + toggleCollapsible() { + this._collapsible?.toggle(); + } } diff --git a/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.spec.ts b/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.spec.ts index 9d21121c3..a6afcc47b 100644 --- a/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.spec.ts +++ b/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.spec.ts @@ -1,14 +1,14 @@ import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; import { axe } from 'jest-axe'; -import { BrnCollapsibleComponent } from './brn-collapsible.component'; import { BrnCollapsibleContentComponent } from './brn-collapsible-content.component'; import { BrnCollapsibleTriggerDirective } from './brn-collapsible-trigger.directive'; +import { BrnCollapsibleComponent } from './brn-collapsible.component'; describe('BrnCollapsibleComponent', () => { - const setup = async (id?: string, disabled = false) => { - const container = await render( - ` + const setup = async (id?: string, disabled = false) => { + const container = await render( + `

@peduarte starred 3 repositories

@@ -21,126 +21,126 @@ describe('BrnCollapsibleComponent', () => { `, - { - imports: [BrnCollapsibleComponent, BrnCollapsibleContentComponent, BrnCollapsibleTriggerDirective], - } - ); - return { - user: userEvent.setup(), - container, - triggerElement: screen.getByTestId('trigger'), - }; - }; - - type Options = { - root: HTMLElement; - trigger: HTMLElement; - content: HTMLElement; - id?: string; - }; - const validateAttributes = async ({ root, trigger, content, id }: Options) => { - const idMatcher = id ?? expect.stringContaining('brn-collapsible-content'); - expect(root).toBeInTheDocument(); - expect(await axe(root)).toHaveNoViolations(); - - expect(trigger).toBeInTheDocument(); - expect(trigger).toHaveAttribute('aria-controls', idMatcher); - expect(await axe(trigger)).toHaveNoViolations(); - - expect(content).toBeInTheDocument(); - expect(content).toHaveAttribute('id', idMatcher); - expect(await axe(trigger)).toHaveNoViolations(); - }; - const validateOpen = async (id?: string) => { - const root = await screen.findByTestId('root'); - const trigger = await screen.findByTestId('trigger'); - const content = await screen.findByTestId('content'); - - expect(root).toHaveAttribute('data-state', 'open'); - expect(trigger).toHaveAttribute('data-state', 'open'); - expect(trigger).toHaveAttribute('aria-expanded', 'true'); - expect(content).toHaveAttribute('data-state', 'open'); - - await validateAttributes({ root, trigger, content, id }); - }; - const validateClosed = async (id?: string) => { - const root = await screen.findByTestId('root'); - const trigger = await screen.findByTestId('trigger'); - const content = await screen.findByTestId('content'); - - expect(root).toHaveAttribute('data-state', 'closed'); - expect(trigger).toHaveAttribute('data-state', 'closed'); - expect(trigger).toHaveAttribute('aria-expanded', 'false'); - expect(content).toHaveAttribute('data-state', 'closed'); - - await validateAttributes({ root, trigger, content, id }); - }; - - it('not given id on content should create id and set it to aria-described. by default collapsible is closed', async () => { - await setup(); - await validateClosed(); - }); - - it('given id on content should use id and set it to aria-described. by default collapsible is closed', async () => { - await setup('hello-world'); - await validateClosed('hello-world'); - }); - - it('mouse click on element toggles collapsible', async () => { - const { user, container, triggerElement } = await setup(); - await validateClosed(); - await user.click(triggerElement); - container.detectChanges(); - await validateOpen(); - await user.click(triggerElement); - container.detectChanges(); - await validateClosed(); - }); - - it('focus with tab and enter toggles collapsible', async () => { - const { user, container } = await setup(); - await validateClosed(); - await user.keyboard('[Tab][Enter]'); - container.detectChanges(); - await validateOpen(); - await user.keyboard('[Enter]'); - container.detectChanges(); - await validateClosed(); - await user.keyboard('[Enter]'); - container.detectChanges(); - await validateOpen(); - }); - - it('focus with tab and space toggles collapsible', async () => { - const { user, container } = await setup(); - await validateClosed(); - await user.keyboard('[Tab][Space]'); - container.detectChanges(); - await validateOpen(); - await user.keyboard('[Space]'); - container.detectChanges(); - await validateClosed(); - await user.keyboard('[Space]'); - container.detectChanges(); - await validateOpen(); - }); - - it('disabled adds correct aria attributes and prevents toggle', async () => { - const { user, container, triggerElement } = await setup(undefined, true); - const root = await screen.findByTestId('root'); - - expect(root).toHaveAttribute('disabled'); - expect(triggerElement).toHaveAttribute('disabled'); - - await validateClosed(); - await user.click(triggerElement); - container.detectChanges(); - await validateClosed(); - await user.keyboard('[Enter]'); - container.detectChanges(); - await validateClosed(); - await user.keyboard('[Space]'); - container.detectChanges(); - await validateClosed(); - }); + { + imports: [BrnCollapsibleComponent, BrnCollapsibleContentComponent, BrnCollapsibleTriggerDirective], + }, + ); + return { + user: userEvent.setup(), + container, + triggerElement: screen.getByTestId('trigger'), + }; + }; + + type Options = { + root: HTMLElement; + trigger: HTMLElement; + content: HTMLElement; + id?: string; + }; + const validateAttributes = async ({ root, trigger, content, id }: Options) => { + const idMatcher = id ?? expect.stringContaining('brn-collapsible-content'); + expect(root).toBeInTheDocument(); + expect(await axe(root)).toHaveNoViolations(); + + expect(trigger).toBeInTheDocument(); + expect(trigger).toHaveAttribute('aria-controls', idMatcher); + expect(await axe(trigger)).toHaveNoViolations(); + + expect(content).toBeInTheDocument(); + expect(content).toHaveAttribute('id', idMatcher); + expect(await axe(trigger)).toHaveNoViolations(); + }; + const validateOpen = async (id?: string) => { + const root = await screen.findByTestId('root'); + const trigger = await screen.findByTestId('trigger'); + const content = await screen.findByTestId('content'); + + expect(root).toHaveAttribute('data-state', 'open'); + expect(trigger).toHaveAttribute('data-state', 'open'); + expect(trigger).toHaveAttribute('aria-expanded', 'true'); + expect(content).toHaveAttribute('data-state', 'open'); + + await validateAttributes({ root, trigger, content, id }); + }; + const validateClosed = async (id?: string) => { + const root = await screen.findByTestId('root'); + const trigger = await screen.findByTestId('trigger'); + const content = await screen.findByTestId('content'); + + expect(root).toHaveAttribute('data-state', 'closed'); + expect(trigger).toHaveAttribute('data-state', 'closed'); + expect(trigger).toHaveAttribute('aria-expanded', 'false'); + expect(content).toHaveAttribute('data-state', 'closed'); + + await validateAttributes({ root, trigger, content, id }); + }; + + it('not given id on content should create id and set it to aria-described. by default collapsible is closed', async () => { + await setup(); + await validateClosed(); + }); + + it('given id on content should use id and set it to aria-described. by default collapsible is closed', async () => { + await setup('hello-world'); + await validateClosed('hello-world'); + }); + + it('mouse click on element toggles collapsible', async () => { + const { user, container, triggerElement } = await setup(); + await validateClosed(); + await user.click(triggerElement); + container.detectChanges(); + await validateOpen(); + await user.click(triggerElement); + container.detectChanges(); + await validateClosed(); + }); + + it('focus with tab and enter toggles collapsible', async () => { + const { user, container } = await setup(); + await validateClosed(); + await user.keyboard('[Tab][Enter]'); + container.detectChanges(); + await validateOpen(); + await user.keyboard('[Enter]'); + container.detectChanges(); + await validateClosed(); + await user.keyboard('[Enter]'); + container.detectChanges(); + await validateOpen(); + }); + + it('focus with tab and space toggles collapsible', async () => { + const { user, container } = await setup(); + await validateClosed(); + await user.keyboard('[Tab][Space]'); + container.detectChanges(); + await validateOpen(); + await user.keyboard('[Space]'); + container.detectChanges(); + await validateClosed(); + await user.keyboard('[Space]'); + container.detectChanges(); + await validateOpen(); + }); + + it('disabled adds correct aria attributes and prevents toggle', async () => { + const { user, container, triggerElement } = await setup(undefined, true); + const root = await screen.findByTestId('root'); + + expect(root).toHaveAttribute('disabled'); + expect(triggerElement).toHaveAttribute('disabled'); + + await validateClosed(); + await user.click(triggerElement); + container.detectChanges(); + await validateClosed(); + await user.keyboard('[Enter]'); + container.detectChanges(); + await validateClosed(); + await user.keyboard('[Space]'); + container.detectChanges(); + await validateClosed(); + }); }); diff --git a/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.ts b/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.ts index 2b30eb3f1..c1e88979b 100644 --- a/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.ts +++ b/libs/ui/collapsible/brain/src/lib/brn-collapsible.component.ts @@ -1,42 +1,44 @@ import { - booleanAttribute, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - inject, - Input, - signal, - ViewEncapsulation, + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + inject, + Input, + signal, + ViewEncapsulation, } from '@angular/core'; let collapsibleContentIdSequence = 0; export type BrnCollapsibleState = 'open' | 'closed'; @Component({ - selector: 'brn-collapsible', - standalone: true, - host: { - '[attr.data-state]': 'state()', - '[attr.disabled]': 'collapsibleDisabled()', - }, - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + selector: 'brn-collapsible', + standalone: true, + host: { + '[attr.data-state]': 'state()', + '[attr.disabled]': 'collapsibleDisabled()', + }, + template: ` + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, }) export class BrnCollapsibleComponent { - private _cdr = inject(ChangeDetectorRef); - state = signal('closed'); - contentId = signal('brn-collapsible-content-' + collapsibleContentIdSequence++); + private _cdr = inject(ChangeDetectorRef); + state = signal('closed'); + contentId = signal('brn-collapsible-content-' + collapsibleContentIdSequence++); - private _disabled = signal(undefined); - @Input({ transform: booleanAttribute }) - set disabled(value: boolean) { - this._disabled.set(value ? true : undefined); - } - collapsibleDisabled = this._disabled.asReadonly(); + private _disabled = signal(undefined); + @Input({ transform: booleanAttribute }) + set disabled(value: boolean) { + this._disabled.set(value ? true : undefined); + } + collapsibleDisabled = this._disabled.asReadonly(); - public toggle() { - this.state.set(this.state() === 'closed' ? 'open' : 'closed'); - this._cdr.detectChanges(); - } + public toggle() { + this.state.set(this.state() === 'closed' ? 'open' : 'closed'); + this._cdr.detectChanges(); + } } diff --git a/libs/ui/collapsible/brain/src/test-setup.ts b/libs/ui/collapsible/brain/src/test-setup.ts index d3b477cef..9136c4aec 100644 --- a/libs/ui/collapsible/brain/src/test-setup.ts +++ b/libs/ui/collapsible/brain/src/test-setup.ts @@ -1,12 +1,12 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; -import 'jest-preset-angular/setup-jest'; import '@testing-library/jest-dom'; +import 'jest-preset-angular/setup-jest'; import { toHaveNoViolations } from 'jest-axe'; diff --git a/libs/ui/collapsible/brain/tsconfig.json b/libs/ui/collapsible/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/collapsible/brain/tsconfig.json +++ b/libs/ui/collapsible/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/collapsible/brain/tsconfig.lib.json b/libs/ui/collapsible/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/collapsible/brain/tsconfig.lib.json +++ b/libs/ui/collapsible/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/collapsible/brain/tsconfig.lib.prod.json b/libs/ui/collapsible/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/collapsible/brain/tsconfig.lib.prod.json +++ b/libs/ui/collapsible/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/collapsible/brain/tsconfig.spec.json b/libs/ui/collapsible/brain/tsconfig.spec.json index f939fdffd..2c98a3973 100644 --- a/libs/ui/collapsible/brain/tsconfig.spec.json +++ b/libs/ui/collapsible/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node", "jest-dom"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node", "jest-dom"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/collapsible/collapsible.stories.ts b/libs/ui/collapsible/collapsible.stories.ts index dd971bcdd..ff0ed16e8 100644 --- a/libs/ui/collapsible/collapsible.stories.ts +++ b/libs/ui/collapsible/collapsible.stories.ts @@ -1,23 +1,23 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { BrnCollapsibleImports } from './brain/src'; import { HlmButtonDirective } from '../button/helm/src'; +import { BrnCollapsibleImports } from './brain/src'; const meta: Meta<{}> = { - title: 'Collapsible', - decorators: [ - moduleMetadata({ - imports: [HlmButtonDirective, BrnCollapsibleImports], - }), - ], + title: 'Collapsible', + decorators: [ + moduleMetadata({ + imports: [HlmButtonDirective, BrnCollapsibleImports], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` @@ -45,5 +45,5 @@ export const Default: Story = { `, - }), + }), }; diff --git a/libs/ui/combobox/combobox.stories.ts b/libs/ui/combobox/combobox.stories.ts index 3fa15846d..40257f6b1 100644 --- a/libs/ui/combobox/combobox.stories.ts +++ b/libs/ui/combobox/combobox.stories.ts @@ -1,24 +1,24 @@ -import type { Meta, StoryObj } from '@storybook/angular'; -import { moduleMetadata } from '@storybook/angular'; +import { NgForOf } from '@angular/common'; import { Component, signal } from '@angular/core'; import { provideIcons } from '@ng-icons/core'; import * as radixIcons from '@ng-icons/radix-icons'; -import { HlmIconComponent } from '../icon/helm/src'; +import type { Meta, StoryObj } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; -import { HlmCommandImports } from '../command/helm/src'; import { BrnCommandImports } from '../command/brain/src'; +import { HlmCommandImports } from '../command/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; import { BrnPopoverImports } from '../popover/brain/src'; import { HlmPopoverContentDirective } from '../popover/helm/src'; -import { NgForOf } from '@angular/common'; const meta: Meta<{}> = { - title: 'Combobox', - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [BrnCommandImports, HlmCommandImports, HlmIconComponent, HlmButtonDirective], - }), - ], + title: 'Combobox', + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [BrnCommandImports, HlmCommandImports, HlmIconComponent, HlmButtonDirective], + }), + ], }; export default meta; @@ -26,103 +26,103 @@ type Story = StoryObj<{}>; type Framework = { label: string; value: string }; @Component({ - selector: 'combobox-component', - standalone: true, - imports: [ - NgForOf, - BrnCommandImports, - HlmCommandImports, - BrnPopoverImports, - HlmPopoverContentDirective, - HlmIconComponent, - HlmButtonDirective, - ], - template: ` - - - - - - - -
No results found.
- - - - - - - - `, + selector: 'combobox-component', + standalone: true, + imports: [ + NgForOf, + BrnCommandImports, + HlmCommandImports, + BrnPopoverImports, + HlmPopoverContentDirective, + HlmIconComponent, + HlmButtonDirective, + ], + template: ` + + + + + + + +
No results found.
+ + + + + + + + `, }) class ComboboxComponent { - public frameworks = [ - { - label: 'AnalogJs', - value: 'analogjs', - }, - { - label: 'Angular', - value: 'angular', - }, - { - label: 'Vue', - value: 'vue', - }, - { - label: 'Nuxt', - value: 'nuxt', - }, - { - label: 'React', - value: 'react', - }, - { - label: 'NextJs', - value: 'nextjs', - }, - ]; - public currentFramework = signal(undefined); - public state = signal<'closed' | 'open'>('closed'); + public frameworks = [ + { + label: 'AnalogJs', + value: 'analogjs', + }, + { + label: 'Angular', + value: 'angular', + }, + { + label: 'Vue', + value: 'vue', + }, + { + label: 'Nuxt', + value: 'nuxt', + }, + { + label: 'React', + value: 'react', + }, + { + label: 'NextJs', + value: 'nextjs', + }, + ]; + public currentFramework = signal(undefined); + public state = signal<'closed' | 'open'>('closed'); - close() { - this.state.set('closed'); - } + close() { + this.state.set('closed'); + } - commandSelected(framework: Framework) { - this.state.set('closed'); - if (this.currentFramework()?.value === framework.value) { - this.currentFramework.set(undefined); - } else { - this.currentFramework.set(framework); - } - } + commandSelected(framework: Framework) { + this.state.set('closed'); + if (this.currentFramework()?.value === framework.value) { + this.currentFramework.set(undefined); + } else { + this.currentFramework.set(framework); + } + } } export const Default: Story = { - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [ComboboxComponent], - }), - ], - render: () => ({ - template: '', - }), + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [ComboboxComponent], + }), + ], + render: () => ({ + template: '', + }), }; diff --git a/libs/ui/command/brain/.eslintrc.json b/libs/ui/command/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/command/brain/.eslintrc.json +++ b/libs/ui/command/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/command/brain/jest.config.ts b/libs/ui/command/brain/jest.config.ts index 977135527..ae0695e8c 100644 --- a/libs/ui/command/brain/jest.config.ts +++ b/libs/ui/command/brain/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-command-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/ui/command/brain', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-command-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/ui/command/brain', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/command/brain/ng-package.json b/libs/ui/command/brain/ng-package.json index 8b6678c55..acd9d4e3d 100644 --- a/libs/ui/command/brain/ng-package.json +++ b/libs/ui/command/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/command/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/command/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/command/brain/package.json b/libs/ui/command/brain/package.json index a7650e8ab..5561092f8 100644 --- a/libs/ui/command/brain/package.json +++ b/libs/ui/command/brain/package.json @@ -1,16 +1,16 @@ { - "name": "@spartan-ng/ui-command-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@ngneat/cmdk": "^1.0.1", - "@ngneat/overview": "^5.1.1", - "@ngneat/until-destroy": "^9.2.3" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-command-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@ngneat/cmdk": "^1.0.1", + "@ngneat/overview": "^5.1.1", + "@ngneat/until-destroy": "^9.2.3" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/command/brain/project.json b/libs/ui/command/brain/project.json index 342f5c39f..e0c9d2c03 100644 --- a/libs/ui/command/brain/project.json +++ b/libs/ui/command/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-command-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/command/brain/src", - "prefix": "hlm", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/command/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/command/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/command/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/command/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/command/brain/**/*.ts", - "libs/ui/command/brain/**/*.html", - "libs/ui/command/brain/package.json", - "libs/ui/command/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-command-brain" - } - } - } + "name": "ui-command-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/command/brain/src", + "prefix": "hlm", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/command/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/command/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/command/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/command/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/command/brain/**/*.ts", + "libs/ui/command/brain/**/*.html", + "libs/ui/command/brain/package.json", + "libs/ui/command/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-command-brain" + } + } + } } diff --git a/libs/ui/command/brain/src/index.ts b/libs/ui/command/brain/src/index.ts index e0dd0eba8..c3b537e81 100644 --- a/libs/ui/command/brain/src/index.ts +++ b/libs/ui/command/brain/src/index.ts @@ -1,16 +1,15 @@ import { NgModule } from '@angular/core'; -import { BrnCommandComponent } from './lib/brn-command.component'; import { CmdkModule } from '@ngneat/cmdk'; -import { BrnCommandSeparatorComponent } from './lib/brn-command-separator.component'; import { BrnCommandEmptyDirective } from './lib/brn-command-empty.directive'; import { BrnCommandGroupComponent } from './lib/brn-command-group.component'; import { BrnCommandInputDirective } from './lib/brn-command-input.directive'; import { BrnCommandItemDirective } from './lib/brn-command-item.directive'; import { BrnCommandListComponent } from './lib/brn-command-list.component'; import { BrnCommandLoaderDirective } from './lib/brn-command-loader.directive'; +import { BrnCommandSeparatorComponent } from './lib/brn-command-separator.component'; +import { BrnCommandComponent } from './lib/brn-command.component'; -export * from './lib/brn-command.component'; export * from './lib/brn-command-empty.directive'; export * from './lib/brn-command-group.component'; export * from './lib/brn-command-input.directive'; @@ -18,22 +17,23 @@ export * from './lib/brn-command-item.directive'; export * from './lib/brn-command-list.component'; export * from './lib/brn-command-loader.directive'; export * from './lib/brn-command-separator.component'; +export * from './lib/brn-command.component'; export const BrnCommandImports = [ - CmdkModule, - BrnCommandComponent, - BrnCommandEmptyDirective, - BrnCommandGroupComponent, - BrnCommandInputDirective, - BrnCommandItemDirective, - BrnCommandListComponent, - BrnCommandLoaderDirective, - BrnCommandSeparatorComponent, - BrnCommandSeparatorComponent, + CmdkModule, + BrnCommandComponent, + BrnCommandEmptyDirective, + BrnCommandGroupComponent, + BrnCommandInputDirective, + BrnCommandItemDirective, + BrnCommandListComponent, + BrnCommandLoaderDirective, + BrnCommandSeparatorComponent, + BrnCommandSeparatorComponent, ] as const; @NgModule({ - imports: [...BrnCommandImports], - exports: [...BrnCommandImports], + imports: [...BrnCommandImports], + exports: [...BrnCommandImports], }) export class BrnCommandModule {} diff --git a/libs/ui/command/brain/src/lib/brn-command-empty.directive.ts b/libs/ui/command/brain/src/lib/brn-command-empty.directive.ts index 9b52dc5d3..84e7fa39e 100644 --- a/libs/ui/command/brain/src/lib/brn-command-empty.directive.ts +++ b/libs/ui/command/brain/src/lib/brn-command-empty.directive.ts @@ -1,17 +1,17 @@ -import { EmptyDirective } from '@ngneat/cmdk'; import { Directive, forwardRef } from '@angular/core'; +import { EmptyDirective } from '@ngneat/cmdk'; @Directive({ - selector: '[brnCmdEmpty]', - standalone: true, - providers: [ - { - provide: EmptyDirective, - useExisting: forwardRef(() => BrnCommandEmptyDirective), - }, - ], - host: { - class: 'cmdk-empty', - }, + selector: '[brnCmdEmpty]', + standalone: true, + providers: [ + { + provide: EmptyDirective, + useExisting: forwardRef(() => BrnCommandEmptyDirective), + }, + ], + host: { + class: 'cmdk-empty', + }, }) export class BrnCommandEmptyDirective extends EmptyDirective {} diff --git a/libs/ui/command/brain/src/lib/brn-command-group.component.ts b/libs/ui/command/brain/src/lib/brn-command-group.component.ts index 1db259af8..02968249a 100644 --- a/libs/ui/command/brain/src/lib/brn-command-group.component.ts +++ b/libs/ui/command/brain/src/lib/brn-command-group.component.ts @@ -1,25 +1,25 @@ +import { NgIf } from '@angular/common'; import { Component, forwardRef } from '@angular/core'; import { GroupComponent } from '@ngneat/cmdk'; -import { NgIf } from '@angular/common'; import { DynamicViewModule } from '@ngneat/overview'; @Component({ - selector: 'brn-cmd-group', - standalone: true, - imports: [NgIf, DynamicViewModule], - providers: [ - { - provide: GroupComponent, - useExisting: forwardRef(() => BrnCommandGroupComponent), - }, - ], - template: ` - -
- -
- `, + selector: 'brn-cmd-group', + standalone: true, + imports: [NgIf, DynamicViewModule], + providers: [ + { + provide: GroupComponent, + useExisting: forwardRef(() => BrnCommandGroupComponent), + }, + ], + template: ` + +
+ +
+ `, }) export class BrnCommandGroupComponent extends GroupComponent {} diff --git a/libs/ui/command/brain/src/lib/brn-command-input.directive.ts b/libs/ui/command/brain/src/lib/brn-command-input.directive.ts index 018e99f75..595fb4705 100644 --- a/libs/ui/command/brain/src/lib/brn-command-input.directive.ts +++ b/libs/ui/command/brain/src/lib/brn-command-input.directive.ts @@ -1,17 +1,17 @@ -import { InputDirective } from '@ngneat/cmdk'; import { Directive, forwardRef } from '@angular/core'; +import { InputDirective } from '@ngneat/cmdk'; @Directive({ - selector: 'input[brnCmdInput]', - standalone: true, - providers: [ - { - provide: InputDirective, - useExisting: forwardRef(() => BrnCommandInputDirective), - }, - ], - host: { - class: 'cmdk-input', - }, + selector: 'input[brnCmdInput]', + standalone: true, + providers: [ + { + provide: InputDirective, + useExisting: forwardRef(() => BrnCommandInputDirective), + }, + ], + host: { + class: 'cmdk-input', + }, }) export class BrnCommandInputDirective extends InputDirective {} diff --git a/libs/ui/command/brain/src/lib/brn-command-item.directive.ts b/libs/ui/command/brain/src/lib/brn-command-item.directive.ts index 1b67759da..167ecf84a 100644 --- a/libs/ui/command/brain/src/lib/brn-command-item.directive.ts +++ b/libs/ui/command/brain/src/lib/brn-command-item.directive.ts @@ -1,20 +1,20 @@ -import { ItemDirective } from '@ngneat/cmdk'; import { Directive, forwardRef } from '@angular/core'; +import { ItemDirective } from '@ngneat/cmdk'; import { UntilDestroy } from '@ngneat/until-destroy'; @UntilDestroy() @Directive({ - selector: '[brnCmdItem]', - standalone: true, - providers: [ - { - provide: ItemDirective, - useExisting: forwardRef(() => BrnCommandItemDirective), - }, - ], - host: { - tabindex: '-1', - class: 'cmdk-item', - }, + selector: '[brnCmdItem]', + standalone: true, + providers: [ + { + provide: ItemDirective, + useExisting: forwardRef(() => BrnCommandItemDirective), + }, + ], + host: { + tabindex: '-1', + class: 'cmdk-item', + }, }) export class BrnCommandItemDirective extends ItemDirective {} diff --git a/libs/ui/command/brain/src/lib/brn-command-list.component.ts b/libs/ui/command/brain/src/lib/brn-command-list.component.ts index 1b70d2687..e3e3a9bcd 100644 --- a/libs/ui/command/brain/src/lib/brn-command-list.component.ts +++ b/libs/ui/command/brain/src/lib/brn-command-list.component.ts @@ -2,18 +2,18 @@ import { Component, forwardRef } from '@angular/core'; import { ListComponent } from '@ngneat/cmdk'; @Component({ - selector: 'brn-cmd-list', - standalone: true, - providers: [ - { - provide: ListComponent, - useExisting: forwardRef(() => BrnCommandListComponent), - }, - ], - template: ` -
- -
- `, + selector: 'brn-cmd-list', + standalone: true, + providers: [ + { + provide: ListComponent, + useExisting: forwardRef(() => BrnCommandListComponent), + }, + ], + template: ` +
+ +
+ `, }) export class BrnCommandListComponent extends ListComponent {} diff --git a/libs/ui/command/brain/src/lib/brn-command-loader.directive.ts b/libs/ui/command/brain/src/lib/brn-command-loader.directive.ts index 7cbcc6204..f074fddac 100644 --- a/libs/ui/command/brain/src/lib/brn-command-loader.directive.ts +++ b/libs/ui/command/brain/src/lib/brn-command-loader.directive.ts @@ -1,17 +1,17 @@ -import { LoaderDirective } from '@ngneat/cmdk'; import { Directive, forwardRef } from '@angular/core'; +import { LoaderDirective } from '@ngneat/cmdk'; @Directive({ - selector: '[brnCmdLoader]', - standalone: true, - providers: [ - { - provide: LoaderDirective, - useExisting: forwardRef(() => BrnCommandLoaderDirective), - }, - ], - host: { - class: 'cmdk-loader', - }, + selector: '[brnCmdLoader]', + standalone: true, + providers: [ + { + provide: LoaderDirective, + useExisting: forwardRef(() => BrnCommandLoaderDirective), + }, + ], + host: { + class: 'cmdk-loader', + }, }) export class BrnCommandLoaderDirective extends LoaderDirective {} diff --git a/libs/ui/command/brain/src/lib/brn-command-separator.component.ts b/libs/ui/command/brain/src/lib/brn-command-separator.component.ts index 4001451c0..674239ace 100644 --- a/libs/ui/command/brain/src/lib/brn-command-separator.component.ts +++ b/libs/ui/command/brain/src/lib/brn-command-separator.component.ts @@ -2,17 +2,17 @@ import { Component, forwardRef } from '@angular/core'; import { SeparatorComponent } from '@ngneat/cmdk'; @Component({ - selector: 'brn-cmd-separator', - standalone: true, - template: '
', - providers: [ - { - provide: SeparatorComponent, - useExisting: forwardRef(() => BrnCommandSeparatorComponent), - }, - ], - host: { - class: 'cmdk-separator', - }, + selector: 'brn-cmd-separator', + standalone: true, + template: '
', + providers: [ + { + provide: SeparatorComponent, + useExisting: forwardRef(() => BrnCommandSeparatorComponent), + }, + ], + host: { + class: 'cmdk-separator', + }, }) export class BrnCommandSeparatorComponent extends SeparatorComponent {} diff --git a/libs/ui/command/brain/src/lib/brn-command.component.ts b/libs/ui/command/brain/src/lib/brn-command.component.ts index 03b415556..acec52725 100644 --- a/libs/ui/command/brain/src/lib/brn-command.component.ts +++ b/libs/ui/command/brain/src/lib/brn-command.component.ts @@ -2,9 +2,11 @@ import { Component } from '@angular/core'; import { CmdkService, CommandComponent } from '@ngneat/cmdk'; @Component({ - selector: 'brn-cmd', - standalone: true, - providers: [CmdkService], - template: ``, + selector: 'brn-cmd', + standalone: true, + providers: [CmdkService], + template: ` + + `, }) export class BrnCommandComponent extends CommandComponent {} diff --git a/libs/ui/command/brain/src/test-setup.ts b/libs/ui/command/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/command/brain/src/test-setup.ts +++ b/libs/ui/command/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/command/brain/tsconfig.json b/libs/ui/command/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/command/brain/tsconfig.json +++ b/libs/ui/command/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/command/brain/tsconfig.lib.json b/libs/ui/command/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/command/brain/tsconfig.lib.json +++ b/libs/ui/command/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/command/brain/tsconfig.lib.prod.json b/libs/ui/command/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/command/brain/tsconfig.lib.prod.json +++ b/libs/ui/command/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/command/brain/tsconfig.spec.json b/libs/ui/command/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/command/brain/tsconfig.spec.json +++ b/libs/ui/command/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/command/command.stories.ts b/libs/ui/command/command.stories.ts index 83df72aeb..2870c0be5 100644 --- a/libs/ui/command/command.stories.ts +++ b/libs/ui/command/command.stories.ts @@ -1,32 +1,32 @@ -import type { Meta, StoryObj } from '@storybook/angular'; -import { moduleMetadata } from '@storybook/angular'; import { Component, HostListener, signal } from '@angular/core'; import { provideIcons } from '@ng-icons/core'; import * as radixIcons from '@ng-icons/radix-icons'; -import { HlmIconComponent } from '../icon/helm/src'; +import type { Meta, StoryObj } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; import { BrnDialogImports } from '../dialog/brain/src'; import { HlmDialogOverlayDirective } from '../dialog/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; import { HlmCodeDirective } from '../typography/helm/src'; -import { HlmCommandImports } from './helm/src'; import { BrnCommandImports } from './brain/src'; +import { HlmCommandImports } from './helm/src'; const meta: Meta<{}> = { - title: 'Command', - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [BrnCommandImports, HlmCommandImports, HlmIconComponent, HlmButtonDirective], - }), - ], + title: 'Command', + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [BrnCommandImports, HlmCommandImports, HlmIconComponent, HlmButtonDirective], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` @@ -69,107 +69,111 @@ export const Default: Story = { `, - }), + }), }; @Component({ - selector: 'command-dialog-component', - standalone: true, - imports: [ - BrnCommandImports, - HlmCommandImports, - BrnDialogImports, - HlmDialogOverlayDirective, + selector: 'command-dialog-component', + standalone: true, + imports: [ + BrnCommandImports, + HlmCommandImports, + BrnDialogImports, + HlmDialogOverlayDirective, - HlmIconComponent, - HlmButtonDirective, - HlmCodeDirective, - ], - template: ` -
-

Press ⌘ + K

-

- Last command: {{ command() || 'none' }} -

-
- - - - - - - - -
No results found.
- - - - - - - - - - - - - - - - `, + HlmIconComponent, + HlmButtonDirective, + HlmCodeDirective, + ], + template: ` +
+

+ Press + ⌘ + K +

+

+ Last command: + {{ command() || 'none' }} +

+
+ + + + + + + + +
No results found.
+ + + + + + + + + + + + + + + + `, }) class CommandDialogComponent { - public command = signal(''); - public state = signal<'closed' | 'open'>('closed'); + public command = signal(''); + public state = signal<'closed' | 'open'>('closed'); - @HostListener('window:keydown', ['$event']) - onKeyDown(event: KeyboardEvent) { - if ((event.metaKey || event.ctrlKey) && (event.key === 'k' || event.key === 'K')) { - this.state.set('open'); - } - } + @HostListener('window:keydown', ['$event']) + onKeyDown(event: KeyboardEvent) { + if ((event.metaKey || event.ctrlKey) && (event.key === 'k' || event.key === 'K')) { + this.state.set('open'); + } + } - stateChanged(state: 'open' | 'closed') { - this.state.set(state); - } + stateChanged(state: 'open' | 'closed') { + this.state.set(state); + } - commandSelected(selected: string) { - this.state.set('closed'); - this.command.set(selected); - } + commandSelected(selected: string) { + this.state.set('closed'); + this.command.set(selected); + } } export const Dialog: Story = { - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [CommandDialogComponent], - }), - ], - render: () => ({ - template: '', - }), + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [CommandDialogComponent], + }), + ], + render: () => ({ + template: '', + }), }; diff --git a/libs/ui/command/helm/.eslintrc.json b/libs/ui/command/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/command/helm/.eslintrc.json +++ b/libs/ui/command/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/command/helm/jest.config.ts b/libs/ui/command/helm/jest.config.ts index 7ff0f927e..2ceb67ad2 100644 --- a/libs/ui/command/helm/jest.config.ts +++ b/libs/ui/command/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-command-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/ui/command/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-command-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/ui/command/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/command/helm/ng-package.json b/libs/ui/command/helm/ng-package.json index 0d118919c..077c9bdd4 100644 --- a/libs/ui/command/helm/ng-package.json +++ b/libs/ui/command/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/command/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/command/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/command/helm/package.json b/libs/ui/command/helm/package.json index a74913094..4292d4670 100644 --- a/libs/ui/command/helm/package.json +++ b/libs/ui/command/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-command-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-command-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/command/helm/project.json b/libs/ui/command/helm/project.json index 06875ff30..ab0dd2987 100644 --- a/libs/ui/command/helm/project.json +++ b/libs/ui/command/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-command-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/command/helm/src", - "prefix": "hlm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/command/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/command/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/command/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/command/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/command/helm/**/*.ts", - "libs/ui/command/helm/**/*.html", - "libs/ui/command/helm/package.json", - "libs/ui/command/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-command-helm" - } - } - } + "name": "ui-command-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/command/helm/src", + "prefix": "hlm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/command/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/command/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/command/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/command/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/command/helm/**/*.ts", + "libs/ui/command/helm/**/*.html", + "libs/ui/command/helm/package.json", + "libs/ui/command/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-command-helm" + } + } + } } diff --git a/libs/ui/command/helm/src/index.ts b/libs/ui/command/helm/src/index.ts index cd2e17fb6..689628383 100644 --- a/libs/ui/command/helm/src/index.ts +++ b/libs/ui/command/helm/src/index.ts @@ -1,49 +1,49 @@ import { NgModule } from '@angular/core'; -import { HlmCommandDirective } from './lib/hlm-command.directive'; +import { HlmCommandDialogCloseButtonDirective } from './lib/hlm-command-dialog-close-button.directive'; +import { HlmCommandDialogDirective } from './lib/hlm-command-dialog.directive'; +import { HlmCommandEmptyDirective } from './lib/hlm-command-empty.directive'; +import { HlmCommandGroupDirective } from './lib/hlm-command-group.directive'; +import { HlmCommandInputWrapperComponent } from './lib/hlm-command-input-wrapper.component'; import { HlmCommandInputDirective } from './lib/hlm-command-input.directive'; +import { HlmCommandItemIconDirective } from './lib/hlm-command-item-icon.directive'; import { HlmCommandItemDirective } from './lib/hlm-command-item.directive'; -import { HlmCommandSeparatorDirective } from './lib/hlm-command-separator.directive'; -import { HlmCommandGroupDirective } from './lib/hlm-command-group.directive'; import { HlmCommandListDirective } from './lib/hlm-command-list.directive'; +import { HlmCommandSeparatorDirective } from './lib/hlm-command-separator.directive'; import { HlmCommandShortcutComponent } from './lib/hlm-command-shortcut.component'; -import { HlmCommandItemIconDirective } from './lib/hlm-command-item-icon.directive'; -import { HlmCommandEmptyDirective } from './lib/hlm-command-empty.directive'; -import { HlmCommandInputWrapperComponent } from './lib/hlm-command-input-wrapper.component'; -import { HlmCommandDialogCloseButtonDirective } from './lib/hlm-command-dialog-close-button.directive'; -import { HlmCommandDialogDirective } from './lib/hlm-command-dialog.directive'; +import { HlmCommandDirective } from './lib/hlm-command.directive'; -export * from './lib/hlm-command.directive'; export * from './lib/hlm-command-dialog-close-button.directive'; +export * from './lib/hlm-command-dialog.directive'; export * from './lib/hlm-command-empty.directive'; export * from './lib/hlm-command-group.directive'; -export * from './lib/hlm-command-input.directive'; export * from './lib/hlm-command-input-wrapper.component'; -export * from './lib/hlm-command-item.directive'; +export * from './lib/hlm-command-input.directive'; export * from './lib/hlm-command-item-icon.directive'; +export * from './lib/hlm-command-item.directive'; export * from './lib/hlm-command-list.directive'; export * from './lib/hlm-command-loader.directive'; export * from './lib/hlm-command-separator.directive'; export * from './lib/hlm-command-shortcut.component'; -export * from './lib/hlm-command-dialog.directive'; +export * from './lib/hlm-command.directive'; export const HlmCommandImports = [ - HlmCommandDirective, - HlmCommandInputDirective, - HlmCommandItemDirective, - HlmCommandSeparatorDirective, - HlmCommandGroupDirective, - HlmCommandListDirective, - HlmCommandShortcutComponent, - HlmCommandItemIconDirective, - HlmCommandEmptyDirective, - HlmCommandInputWrapperComponent, - HlmCommandDialogCloseButtonDirective, - HlmCommandDialogDirective, + HlmCommandDirective, + HlmCommandInputDirective, + HlmCommandItemDirective, + HlmCommandSeparatorDirective, + HlmCommandGroupDirective, + HlmCommandListDirective, + HlmCommandShortcutComponent, + HlmCommandItemIconDirective, + HlmCommandEmptyDirective, + HlmCommandInputWrapperComponent, + HlmCommandDialogCloseButtonDirective, + HlmCommandDialogDirective, ] as const; @NgModule({ - imports: [...HlmCommandImports], - exports: [...HlmCommandImports], + imports: [...HlmCommandImports], + exports: [...HlmCommandImports], }) export class HlmCommandModule {} diff --git a/libs/ui/command/helm/src/lib/hlm-command-dialog-close-button.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-dialog-close-button.directive.ts index 1a81cde33..066366770 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-dialog-close-button.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-dialog-close-button.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, inject, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; -import { hlm } from '@spartan-ng/ui-core'; import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmCmdDialogCloseBtn]', - standalone: true, - hostDirectives: [HlmButtonDirective], + selector: '[hlmCmdDialogCloseBtn]', + standalone: true, + hostDirectives: [HlmButtonDirective], }) export class HlmCommandDialogCloseButtonDirective { - private _hlmBtn = inject(HlmButtonDirective, { host: true }); - constructor() { - this._hlmBtn.variant = 'ghost'; - } + private _hlmBtn = inject(HlmButtonDirective, { host: true }); + constructor() { + this._hlmBtn.variant = 'ghost'; + } - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('!p-1 !h-5 !w-5', this._inputs); - } + generateClass() { + return hlm('!p-1 !h-5 !w-5', this._inputs); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-dialog.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-dialog.directive.ts index f09e1e3e5..a9967bbe1 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-dialog.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-dialog.directive.ts @@ -1,39 +1,39 @@ import { Directive, effect, ElementRef, HostBinding, inject, Input, Renderer2, signal } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; import { HlmCommandDirective } from './hlm-command.directive'; @Directive({ - selector: '[hlmCmdDialog]', - standalone: true, - hostDirectives: [HlmCommandDirective], + selector: '[hlmCmdDialog]', + standalone: true, + hostDirectives: [HlmCommandDirective], }) export class HlmCommandDialogDirective { - private _stateProvider = injectExposesStateProvider({ host: true }); - public state = this._stateProvider?.state ?? signal('closed').asReadonly(); - private _renderer = inject(Renderer2); - private _element = inject(ElementRef); + private _stateProvider = injectExposesStateProvider({ host: true }); + public state = this._stateProvider?.state ?? signal('closed').asReadonly(); + private _renderer = inject(Renderer2); + private _element = inject(ElementRef); - constructor() { - effect(() => { - this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); - }); - } + constructor() { + effect(() => { + this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); + }); + } - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]', - this._inputs - ); - } + generateClass() { + return hlm( + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]', + this._inputs, + ); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-empty.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-empty.directive.ts index 27d2d1889..a9f674278 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-empty.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-empty.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmCmdEmpty]', - standalone: true, + selector: '[hlmCmdEmpty]', + standalone: true, }) export class HlmCommandEmptyDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('py-6 text-center text-sm', this._inputs); - } + generateClass() { + return hlm('py-6 text-center text-sm', this._inputs); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-group.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-group.directive.ts index e82f974e9..fc80faa9f 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-group.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-group.directive.ts @@ -1,28 +1,28 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: 'brn-cmd-group[hlm],cmdk-group[hlm]', - standalone: true, + selector: 'brn-cmd-group[hlm],cmdk-group[hlm]', + standalone: true, }) export class HlmCommandGroupDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'block [&[cmdk-hidden="true"]]:hidden\n' + - '[&_.cmdk-group-label]:px-2 [&_.cmdk-group-label]:py-1.5 [&_.cmdk-group-label]:text-xs [&_.cmdk-group-label]:font-medium [&_.cmdk-group-label]:text-muted-foreground\n' + - '[&_.cmdk-group-content]:flex [&_.cmdk-group-content]:flex-col [&_.cmdk-group-content]:flex-col overflow-hidden p-1 text-foreground', - this._inputs - ); - } + generateClass() { + return hlm( + 'block [&[cmdk-hidden="true"]]:hidden\n' + + '[&_.cmdk-group-label]:px-2 [&_.cmdk-group-label]:py-1.5 [&_.cmdk-group-label]:text-xs [&_.cmdk-group-label]:font-medium [&_.cmdk-group-label]:text-muted-foreground\n' + + '[&_.cmdk-group-content]:flex [&_.cmdk-group-content]:flex-col [&_.cmdk-group-content]:flex-col overflow-hidden p-1 text-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-input-wrapper.component.ts b/libs/ui/command/helm/src/lib/hlm-command-input-wrapper.component.ts index c70151353..a82db0ed2 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-input-wrapper.component.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-input-wrapper.component.ts @@ -1,27 +1,27 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-cmd-input-wrapper', - standalone: true, - template: '', + selector: 'hlm-cmd-input-wrapper', + standalone: true, + template: '', }) export class HlmCommandInputWrapperComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5', - this._inputs - ); - } + generateClass() { + return hlm( + 'flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5', + this._inputs, + ); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-input.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-input.directive.ts index e5fd23ecb..c25ee9bb1 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-input.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-input.directive.ts @@ -1,26 +1,26 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlm][brnCmdInput],[hlm][cmdkInput]', - standalone: true, + selector: '[hlm][brnCmdInput],[hlm][cmdkInput]', + standalone: true, }) export class HlmCommandInputDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', - this._inputs - ); - } + generateClass() { + return hlm( + 'h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', + this._inputs, + ); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-item-icon.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-item-icon.directive.ts index cd51481e2..96dbc1f48 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-item-icon.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-item-icon.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, inject, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmCmdIcon]', - standalone: true, + selector: '[hlmCmdIcon]', + standalone: true, }) export class HlmCommandItemIconDirective { - private _menuIcon = inject(HlmIconComponent, { host: true, optional: true }); + private _menuIcon = inject(HlmIconComponent, { host: true, optional: true }); - constructor() { - if (!this._menuIcon) return; - this._menuIcon.size = 'none'; - } - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + constructor() { + if (!this._menuIcon) return; + this._menuIcon.size = 'none'; + } + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('mr-2 h-4 w-4', this._inputs); - } + generateClass() { + return hlm('mr-2 h-4 w-4', this._inputs); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts index 0948537f5..d1d1a0228 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts @@ -1,32 +1,32 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlm][brnCmdItem],[hlm][cmdkItem]', - standalone: true, - host: { - class: 'flex items-center', - }, + selector: '[hlm][brnCmdItem],[hlm][cmdkItem]', + standalone: true, + host: { + class: 'flex items-center', + }, }) export class HlmCommandItemDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'relative cursor-default select-none rounded-sm px-2 py-1.5 text-sm outline-none\n' + - 'aria-selected:bg-accent aria-selected:text-accent-foreground\n' + - 'hover:bg-accent/50\n' + - 'disabled:pointer-events-none disabled:opacity-50', - this._inputs - ); - } + generateClass() { + return hlm( + 'relative cursor-default select-none rounded-sm px-2 py-1.5 text-sm outline-none\n' + + 'aria-selected:bg-accent aria-selected:text-accent-foreground\n' + + 'hover:bg-accent/50\n' + + 'disabled:pointer-events-none disabled:opacity-50', + this._inputs, + ); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-list.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-list.directive.ts index 7b0b6589c..0ac567577 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-list.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-list.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: 'cmdk-list[hlm],brn-cmd-list[hlm]', - standalone: true, + selector: 'cmdk-list[hlm],brn-cmd-list[hlm]', + standalone: true, }) export class HlmCommandListDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this._inputs); - } + generateClass() { + return hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this._inputs); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-loader.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-loader.directive.ts index fdf43d3af..c4d3c639c 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-loader.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-loader.directive.ts @@ -1,7 +1,7 @@ import { Directive } from '@angular/core'; @Directive({ - selector: '[hlmCmdLoader]', - standalone: true, + selector: '[hlmCmdLoader]', + standalone: true, }) export class HlmCommandLoaderDirective {} diff --git a/libs/ui/command/helm/src/lib/hlm-command-separator.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-separator.directive.ts index fc740ce88..3edbeac04 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-separator.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-separator.directive.ts @@ -1,10 +1,10 @@ import { Directive } from '@angular/core'; @Directive({ - selector: 'cmdk-separator[hlm],brn-cmd-separator[hlm],[hlmCmdSeparator]', - standalone: true, - host: { - class: '[&_hr]:border-border [&[cmdk-hidden="true"]]:hidden', - }, + selector: 'cmdk-separator[hlm],brn-cmd-separator[hlm],[hlmCmdSeparator]', + standalone: true, + host: { + class: '[&_hr]:border-border [&[cmdk-hidden="true"]]:hidden', + }, }) export class HlmCommandSeparatorDirective {} diff --git a/libs/ui/command/helm/src/lib/hlm-command-shortcut.component.ts b/libs/ui/command/helm/src/lib/hlm-command-shortcut.component.ts index 92222cc13..c60c1bafb 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-shortcut.component.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-shortcut.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-cmd-shortcut', - standalone: true, - template: ``, + selector: 'hlm-cmd-shortcut', + standalone: true, + template: ` + + `, }) export class HlmCommandShortcutComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._inputs); - } + generateClass() { + return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._inputs); + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command.directive.ts b/libs/ui/command/helm/src/lib/hlm-command.directive.ts index cfa5bcc37..d8a142d88 100644 --- a/libs/ui/command/helm/src/lib/hlm-command.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command.directive.ts @@ -1,26 +1,26 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: 'cmdk-command[hlm],brn-cmd[hlm]', - standalone: true, + selector: 'cmdk-command[hlm],brn-cmd[hlm]', + standalone: true, }) export class HlmCommandDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'flex h-full w-full flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground', - this._inputs - ); - } + generateClass() { + return hlm( + 'flex h-full w-full flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/command/helm/src/test-setup.ts b/libs/ui/command/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/command/helm/src/test-setup.ts +++ b/libs/ui/command/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/command/helm/tsconfig.json b/libs/ui/command/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/command/helm/tsconfig.json +++ b/libs/ui/command/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/command/helm/tsconfig.lib.json b/libs/ui/command/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/command/helm/tsconfig.lib.json +++ b/libs/ui/command/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/command/helm/tsconfig.lib.prod.json b/libs/ui/command/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/command/helm/tsconfig.lib.prod.json +++ b/libs/ui/command/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/command/helm/tsconfig.spec.json b/libs/ui/command/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/command/helm/tsconfig.spec.json +++ b/libs/ui/command/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/core/.eslintrc.json b/libs/ui/core/.eslintrc.json index 26be7a276..d7ffde3cd 100644 --- a/libs/ui/core/.eslintrc.json +++ b/libs/ui/core/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "spartanNg", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "spartan-ng", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "spartanNg", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "spartan-ng", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/core/hlm-tailwind-preset.js b/libs/ui/core/hlm-tailwind-preset.js index bd13480d2..c72302e56 100644 --- a/libs/ui/core/hlm-tailwind-preset.js +++ b/libs/ui/core/hlm-tailwind-preset.js @@ -2,72 +2,72 @@ const { fontFamily } = require('tailwindcss/defaultTheme'); /** @type {import('tailwindcss').Config} */ module.exports = { - theme: { - container: { - center: true, - padding: '2rem', - screens: { - '2xl': '1400px', - }, - }, - extend: { - colors: { - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - }, - borderRadius: { - lg: `var(--radius)`, - md: `calc(var(--radius) - 2px)`, - sm: 'calc(var(--radius) - 4px)', - }, - fontFamily: { - sans: ['var(--font-sans)', ...fontFamily.sans], - }, - keyframes: { - indeterminate: { - '0%': { - transform: 'translateX(-100%) scaleX(0.5)', - }, - '100%': { - transform: 'translateX(100%) scaleX(0.5)', - }, - }, - }, - animation: { - indeterminate: 'indeterminate 4s infinite ease-in-out', - }, - }, - }, - plugins: [require('tailwindcss-animate')], + theme: { + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px', + }, + }, + extend: { + colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + }, + borderRadius: { + lg: `var(--radius)`, + md: `calc(var(--radius) - 2px)`, + sm: 'calc(var(--radius) - 4px)', + }, + fontFamily: { + sans: ['var(--font-sans)', ...fontFamily.sans], + }, + keyframes: { + indeterminate: { + '0%': { + transform: 'translateX(-100%) scaleX(0.5)', + }, + '100%': { + transform: 'translateX(100%) scaleX(0.5)', + }, + }, + }, + animation: { + indeterminate: 'indeterminate 4s infinite ease-in-out', + }, + }, + }, + plugins: [require('tailwindcss-animate')], }; diff --git a/libs/ui/core/jest.config.ts b/libs/ui/core/jest.config.ts index f983501d2..22a04bcbe 100644 --- a/libs/ui/core/jest.config.ts +++ b/libs/ui/core/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-core', - preset: '../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../coverage/libs/ui/core', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-core', + preset: '../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../coverage/libs/ui/core', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/core/ng-package.json b/libs/ui/core/ng-package.json index fdb66af7f..7ba91d4b5 100644 --- a/libs/ui/core/ng-package.json +++ b/libs/ui/core/ng-package.json @@ -1,8 +1,8 @@ { - "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../dist/libs/ui/core", - "assets": ["./hlm-tailwind-preset.js"], - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../dist/libs/ui/core", + "assets": ["./hlm-tailwind-preset.js"], + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/core/package.json b/libs/ui/core/package.json index b49125c07..b6437bd31 100644 --- a/libs/ui/core/package.json +++ b/libs/ui/core/package.json @@ -1,22 +1,22 @@ { - "name": "@spartan-ng/ui-core", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "rxjs": "^7.8.1", - "clsx": "^1.2.1", - "tailwind-merge": "^1.14.0", - "tailwindcss": "^3.0.2", - "tailwindcss-animate": "^1.0.6" - }, - "exports": { - "./hlm-tailwind-preset": { - "default": "./hlm-tailwind-preset.js" - } - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-core", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "rxjs": "^7.8.1", + "clsx": "^1.2.1", + "tailwind-merge": "^1.14.0", + "tailwindcss": "^3.0.2", + "tailwindcss-animate": "^1.0.6" + }, + "exports": { + "./hlm-tailwind-preset": { + "default": "./hlm-tailwind-preset.js" + } + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/core/project.json b/libs/ui/core/project.json index 59f8264e9..87c952969 100644 --- a/libs/ui/core/project.json +++ b/libs/ui/core/project.json @@ -1,51 +1,51 @@ { - "name": "ui-core", - "$schema": "../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/core/src", - "prefix": "spartan-ng", - "tags": ["scope:core"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/core/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/core/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/core/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/core/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/core/**/*.ts", - "libs/ui/core/**/*.html", - "libs/ui/core/package.json", - "libs/ui/core/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-core" - } - } - } + "name": "ui-core", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/core/src", + "prefix": "spartan-ng", + "tags": ["scope:core"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/core/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/core/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/core/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/core/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/core/**/*.ts", + "libs/ui/core/**/*.html", + "libs/ui/core/package.json", + "libs/ui/core/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-core" + } + } + } } diff --git a/libs/ui/core/src/index.ts b/libs/ui/core/src/index.ts index 7cfec0386..1881b9809 100644 --- a/libs/ui/core/src/index.ts +++ b/libs/ui/core/src/index.ts @@ -1,8 +1,8 @@ -export * from './lib/brain/rx-host-integration'; -export * from './lib/brain/exposes-state'; export * from './lib/brain/custom-element-class-settable'; -export * from './lib/brain/table-classes-settable'; export * from './lib/brain/exposes-side'; +export * from './lib/brain/exposes-state'; +export * from './lib/brain/rx-host-integration'; +export * from './lib/brain/table-classes-settable'; export * from './lib/brain/zone-free'; export * from './lib/helm/hlm'; diff --git a/libs/ui/core/src/lib/brain/custom-element-class-settable.ts b/libs/ui/core/src/lib/brain/custom-element-class-settable.ts index 6987ff8a1..0843e0923 100644 --- a/libs/ui/core/src/lib/brain/custom-element-class-settable.ts +++ b/libs/ui/core/src/lib/brain/custom-element-class-settable.ts @@ -1,10 +1,10 @@ import { inject, InjectionToken, InjectOptions } from '@angular/core'; export interface CustomElementClassSettable { - setClassToCustomElement: (newClass: string) => void; + setClassToCustomElement: (newClass: string) => void; } export const SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN: InjectionToken = - new InjectionToken('@spartan-ng SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN'); + new InjectionToken('@spartan-ng SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN'); export const injectCustomClassSettable = (options: InjectOptions) => inject(SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, options); diff --git a/libs/ui/core/src/lib/brain/exposes-side.ts b/libs/ui/core/src/lib/brain/exposes-side.ts index 45ec8126b..d8e8e6bea 100644 --- a/libs/ui/core/src/lib/brain/exposes-side.ts +++ b/libs/ui/core/src/lib/brain/exposes-side.ts @@ -1,11 +1,11 @@ import { inject, InjectionToken, InjectOptions, Signal } from '@angular/core'; export interface ExposesSide { - side: Signal<'top' | 'bottom' | 'left' | 'right'>; + side: Signal<'top' | 'bottom' | 'left' | 'right'>; } export const EXPOSES_SIDE_TOKEN: InjectionToken = new InjectionToken( - '@spartan-ng EXPOSES_SIDE_TOKEN' + '@spartan-ng EXPOSES_SIDE_TOKEN', ); export const injectExposedSideProvider = (options: InjectOptions) => inject(EXPOSES_SIDE_TOKEN, options); diff --git a/libs/ui/core/src/lib/brain/exposes-state.ts b/libs/ui/core/src/lib/brain/exposes-state.ts index 69524bf12..118fa2fdf 100644 --- a/libs/ui/core/src/lib/brain/exposes-state.ts +++ b/libs/ui/core/src/lib/brain/exposes-state.ts @@ -1,11 +1,11 @@ import { inject, InjectionToken, InjectOptions, Signal } from '@angular/core'; export interface ExposesState { - state: Signal<'open' | 'closed'>; + state: Signal<'open' | 'closed'>; } export const EXPOSES_STATE_TOKEN: InjectionToken = new InjectionToken( - '@spartan-ng EXPOSES_STATE_TOKEN' + '@spartan-ng EXPOSES_STATE_TOKEN', ); export const injectExposesStateProvider = (options: InjectOptions) => inject(EXPOSES_STATE_TOKEN, options); diff --git a/libs/ui/core/src/lib/brain/rx-host-integration.ts b/libs/ui/core/src/lib/brain/rx-host-integration.ts index 878bbfd7d..4a0d4fcd7 100644 --- a/libs/ui/core/src/lib/brain/rx-host-integration.ts +++ b/libs/ui/core/src/lib/brain/rx-host-integration.ts @@ -1,62 +1,62 @@ import { ChangeDetectorRef, ElementRef, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { debounceTime, filter, fromEvent, merge, Observable, of, switchMap, tap } from 'rxjs'; +import { Observable, debounceTime, filter, fromEvent, merge, of, switchMap, tap } from 'rxjs'; export function rxHostListener(event: string): Observable { - const cdr = inject(ChangeDetectorRef); + const cdr = inject(ChangeDetectorRef); - // Listen to event - return fromEvent(inject(ElementRef).nativeElement, event).pipe( - debounceTime(0), - tap(() => cdr.markForCheck()), // Trigger CD like @HostListener would - takeUntilDestroyed() // Unsubscribe - ); + // Listen to event + return fromEvent(inject(ElementRef).nativeElement, event).pipe( + debounceTime(0), + tap(() => cdr.markForCheck()), // Trigger CD like @HostListener would + takeUntilDestroyed(), // Unsubscribe + ); } export function rxHostBinding(prop: string, stream: Observable) { - // Listen to the stream - stream - .pipe(takeUntilDestroyed()) // Unsubscribe - .subscribe(process(inject(ElementRef).nativeElement, prop)); // Process + // Listen to the stream + stream + .pipe(takeUntilDestroyed()) // Unsubscribe + .subscribe(process(inject(ElementRef).nativeElement, prop)); // Process } function process(element: HTMLElement, prop: string): (value: T) => void { - const isAttr = prop.startsWith('attr.'); - const isStyle = prop.startsWith('style.'); - const isClass = prop.startsWith('class.'); - const [key, unit = ''] = prop.replace('attr.', '').replace('style.', '').replace('class.', '').split('.'); + const isAttr = prop.startsWith('attr.'); + const isStyle = prop.startsWith('style.'); + const isClass = prop.startsWith('class.'); + const [key, unit = ''] = prop.replace('attr.', '').replace('style.', '').replace('class.', '').split('.'); - return (value) => { - const parsed = unit && value != null ? `${value}${unit}` : value; + return (value) => { + const parsed = unit && value != null ? `${value}${unit}` : value; - if (isAttr) { - if (value == null) { - element.removeAttribute(key); - } else { - element.setAttribute(key, String(parsed)); - } - } else if (isClass) { - element.classList.toggle(key, !!value); - } else if (isStyle) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - element.style[key] = parsed; - } else { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - element[key] = parsed; - } - }; + if (isAttr) { + if (value == null) { + element.removeAttribute(key); + } else { + element.setAttribute(key, String(parsed)); + } + } else if (isClass) { + element.classList.toggle(key, !!value); + } else if (isStyle) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + element.style[key] = parsed; + } else { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + element[key] = parsed; + } + }; } export function rxHostPressedListener() { - return merge( - rxHostListener('click'), - rxHostListener('keyup').pipe( - switchMap((x) => { - return x.code === 'Space' || x.code === 'Enter' ? of(true) : of(null); - }), - filter(Boolean) - ) - ).pipe(debounceTime(0)); + return merge( + rxHostListener('click'), + rxHostListener('keyup').pipe( + switchMap((x) => { + return x.code === 'Space' || x.code === 'Enter' ? of(true) : of(null); + }), + filter(Boolean), + ), + ).pipe(debounceTime(0)); } diff --git a/libs/ui/core/src/lib/brain/table-classes-settable.ts b/libs/ui/core/src/lib/brain/table-classes-settable.ts index b56d1207d..df403f0b7 100644 --- a/libs/ui/core/src/lib/brain/table-classes-settable.ts +++ b/libs/ui/core/src/lib/brain/table-classes-settable.ts @@ -1,11 +1,11 @@ import { inject, InjectionToken, InjectOptions } from '@angular/core'; export interface TableClassesSettable { - setTableClasses: (classes: Partial<{ table: string; headerRow: string; bodyRow: string }>) => void; + setTableClasses: (classes: Partial<{ table: string; headerRow: string; bodyRow: string }>) => void; } export const SET_TABLE_CLASSES_TOKEN: InjectionToken = new InjectionToken( - '@spartan-ng SET_TABLE_CLASSES_TOKEN' + '@spartan-ng SET_TABLE_CLASSES_TOKEN', ); export const injectTableClassesSettable = (options: InjectOptions) => inject(SET_TABLE_CLASSES_TOKEN, options); diff --git a/libs/ui/core/src/lib/brain/zone-free.ts b/libs/ui/core/src/lib/brain/zone-free.ts index 09c90ac3c..404a1513a 100644 --- a/libs/ui/core/src/lib/brain/zone-free.ts +++ b/libs/ui/core/src/lib/brain/zone-free.ts @@ -7,20 +7,20 @@ import { NgZone } from '@angular/core'; import { MonoTypeOperatorFunction, Observable, pipe } from 'rxjs'; export function brnZoneFull(zone: NgZone): MonoTypeOperatorFunction { - return (source) => - new Observable((subscriber) => - source.subscribe({ - next: (value) => zone.run(() => subscriber.next(value)), - error: (error: unknown) => zone.run(() => subscriber.error(error)), - complete: () => zone.run(() => subscriber.complete()), - }) - ); + return (source) => + new Observable((subscriber) => + source.subscribe({ + next: (value) => zone.run(() => subscriber.next(value)), + error: (error: unknown) => zone.run(() => subscriber.error(error)), + complete: () => zone.run(() => subscriber.complete()), + }), + ); } export function brnZoneFree(zone: NgZone): MonoTypeOperatorFunction { - return (source) => new Observable((subscriber) => zone.runOutsideAngular(() => source.subscribe(subscriber))); + return (source) => new Observable((subscriber) => zone.runOutsideAngular(() => source.subscribe(subscriber))); } export function brnZoneOptimized(zone: NgZone): MonoTypeOperatorFunction { - return pipe(brnZoneFree(zone), brnZoneFull(zone)); + return pipe(brnZoneFree(zone), brnZoneFull(zone)); } diff --git a/libs/ui/core/src/lib/helm/hlm.ts b/libs/ui/core/src/lib/helm/hlm.ts index 64ef0849b..cf974ac10 100644 --- a/libs/ui/core/src/lib/helm/hlm.ts +++ b/libs/ui/core/src/lib/helm/hlm.ts @@ -1,6 +1,6 @@ -import { type ClassValue, clsx } from 'clsx'; +import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function hlm(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return twMerge(clsx(inputs)); } diff --git a/libs/ui/core/src/test-setup.ts b/libs/ui/core/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/core/src/test-setup.ts +++ b/libs/ui/core/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/core/tsconfig.json b/libs/ui/core/tsconfig.json index 5cf0a1656..5efeb2f67 100644 --- a/libs/ui/core/tsconfig.json +++ b/libs/ui/core/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/core/tsconfig.lib.json b/libs/ui/core/tsconfig.lib.json index 8441346f6..5d1d67c02 100644 --- a/libs/ui/core/tsconfig.lib.json +++ b/libs/ui/core/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/core/tsconfig.lib.prod.json b/libs/ui/core/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/core/tsconfig.lib.prod.json +++ b/libs/ui/core/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/core/tsconfig.spec.json b/libs/ui/core/tsconfig.spec.json index e637bf83b..b2742e763 100644 --- a/libs/ui/core/tsconfig.spec.json +++ b/libs/ui/core/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/dialog/brain/.eslintrc.json b/libs/ui/dialog/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/dialog/brain/.eslintrc.json +++ b/libs/ui/dialog/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/dialog/brain/jest.config.ts b/libs/ui/dialog/brain/jest.config.ts index a332bda3e..2d88fcbb8 100644 --- a/libs/ui/dialog/brain/jest.config.ts +++ b/libs/ui/dialog/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-dialog-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-dialog-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/dialog/brain/ng-package.json b/libs/ui/dialog/brain/ng-package.json index 72dbc4d18..96de154b7 100644 --- a/libs/ui/dialog/brain/ng-package.json +++ b/libs/ui/dialog/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/dialog/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/dialog/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/dialog/brain/package.json b/libs/ui/dialog/brain/package.json index 959f2114f..ecaf412de 100644 --- a/libs/ui/dialog/brain/package.json +++ b/libs/ui/dialog/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-dialog-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@angular/cdk": "17.0.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-dialog-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@angular/cdk": "17.0.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/dialog/brain/project.json b/libs/ui/dialog/brain/project.json index d67757a5b..5fee2bb48 100644 --- a/libs/ui/dialog/brain/project.json +++ b/libs/ui/dialog/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-dialog-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/dialog/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/dialog/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/dialog/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/dialog/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/dialog/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/dialog/brain/**/*.ts", - "libs/ui/dialog/brain/**/*.html", - "libs/ui/dialog/brain/package.json", - "libs/ui/dialog/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-dialog-brain" - } - } - } + "name": "ui-dialog-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/dialog/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/dialog/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/dialog/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/dialog/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/dialog/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/dialog/brain/**/*.ts", + "libs/ui/dialog/brain/**/*.html", + "libs/ui/dialog/brain/package.json", + "libs/ui/dialog/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-dialog-brain" + } + } + } } diff --git a/libs/ui/dialog/brain/src/index.ts b/libs/ui/dialog/brain/src/index.ts index b17d1d98c..9faf8aa68 100644 --- a/libs/ui/dialog/brain/src/index.ts +++ b/libs/ui/dialog/brain/src/index.ts @@ -1,35 +1,35 @@ import { NgModule } from '@angular/core'; -import { BrnDialogComponent } from './lib/brn-dialog.component'; -import { BrnDialogOverlayComponent } from './lib/brn-dialog-overlay.component'; -import { BrnDialogTriggerDirective } from './lib/brn-dialog-trigger.directive'; import { BrnDialogCloseDirective } from './lib/brn-dialog-close.directive'; import { BrnDialogContentDirective } from './lib/brn-dialog-content.directive'; -import { BrnDialogTitleDirective } from './lib/brn-dialog-title.directive'; import { BrnDialogDescriptionDirective } from './lib/brn-dialog-description.directive'; +import { BrnDialogOverlayComponent } from './lib/brn-dialog-overlay.component'; +import { BrnDialogTitleDirective } from './lib/brn-dialog-title.directive'; +import { BrnDialogTriggerDirective } from './lib/brn-dialog-trigger.directive'; +import { BrnDialogComponent } from './lib/brn-dialog.component'; -export * from './lib/brn-dialog.component'; -export * from './lib/brn-dialog-overlay.component'; -export * from './lib/brn-dialog-trigger.directive'; export * from './lib/brn-dialog-close.directive'; export * from './lib/brn-dialog-content.directive'; -export * from './lib/brn-dialog-title.directive'; export * from './lib/brn-dialog-description.directive'; +export * from './lib/brn-dialog-overlay.component'; +export * from './lib/brn-dialog-title.directive'; +export * from './lib/brn-dialog-trigger.directive'; +export * from './lib/brn-dialog.component'; export * from './lib/brn-dialog.service'; export const BrnDialogImports = [ - BrnDialogComponent, - BrnDialogOverlayComponent, - BrnDialogTriggerDirective, - BrnDialogCloseDirective, - BrnDialogContentDirective, - BrnDialogTitleDirective, - BrnDialogDescriptionDirective, + BrnDialogComponent, + BrnDialogOverlayComponent, + BrnDialogTriggerDirective, + BrnDialogCloseDirective, + BrnDialogContentDirective, + BrnDialogTitleDirective, + BrnDialogDescriptionDirective, ] as const; @NgModule({ - imports: [...BrnDialogImports], - exports: [...BrnDialogImports], + imports: [...BrnDialogImports], + exports: [...BrnDialogImports], }) export class BrnDialogModule {} diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog-close.directive.ts b/libs/ui/dialog/brain/src/lib/brn-dialog-close.directive.ts index 3f8ffb190..f7c2212e5 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog-close.directive.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog-close.directive.ts @@ -1,22 +1,22 @@ +import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion'; import { Directive, inject, Input } from '@angular/core'; import { BrnDialogComponent } from './brn-dialog.component'; -import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion'; @Directive({ - selector: 'button[brnDialogClose]', - standalone: true, - host: { - '(click)': 'close()', - }, + selector: 'button[brnDialogClose]', + standalone: true, + host: { + '(click)': 'close()', + }, }) export class BrnDialogCloseDirective { - private _brnDialog = inject(BrnDialogComponent); - private _delay: number | undefined; - @Input() - set delay(value: NumberInput) { - this._delay = coerceNumberProperty(value); - } - close() { - this._brnDialog.close(this._delay); - } + private _brnDialog = inject(BrnDialogComponent); + private _delay: number | undefined; + @Input() + set delay(value: NumberInput) { + this._delay = coerceNumberProperty(value); + } + close() { + this._brnDialog.close(this._delay); + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog-content.directive.ts b/libs/ui/dialog/brain/src/lib/brn-dialog-content.directive.ts index fa516fbf1..1a8fa094d 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog-content.directive.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog-content.directive.ts @@ -1,32 +1,32 @@ import { Directive, forwardRef, inject, Input, TemplateRef } from '@angular/core'; -import { BrnDialogComponent } from './brn-dialog.component'; import { EXPOSES_STATE_TOKEN } from '@spartan-ng/ui-core'; +import { BrnDialogComponent } from './brn-dialog.component'; @Directive({ - selector: '[brnDialogContent]', - standalone: true, - providers: [ - { - provide: EXPOSES_STATE_TOKEN, - useExisting: forwardRef(() => BrnDialogContentDirective), - }, - ], + selector: '[brnDialogContent]', + standalone: true, + providers: [ + { + provide: EXPOSES_STATE_TOKEN, + useExisting: forwardRef(() => BrnDialogContentDirective), + }, + ], }) export class BrnDialogContentDirective { - private _brnDialog = inject(BrnDialogComponent); - private _template = inject(TemplateRef); - public state = this._brnDialog.state; + private _brnDialog = inject(BrnDialogComponent); + private _template = inject(TemplateRef); + public state = this._brnDialog.state; - constructor() { - this._brnDialog.registerTemplate(this._template); - } - @Input() - set class(newClass: string | null | undefined) { - this._brnDialog.setPanelClass(newClass); - } + constructor() { + this._brnDialog.registerTemplate(this._template); + } + @Input() + set class(newClass: string | null | undefined) { + this._brnDialog.setPanelClass(newClass); + } - @Input() - set context(context: T) { - this._brnDialog.setContext(context); - } + @Input() + set context(context: T) { + this._brnDialog.setContext(context); + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog-description.directive.ts b/libs/ui/dialog/brain/src/lib/brn-dialog-description.directive.ts index 63dfba59c..8024e4a98 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog-description.directive.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog-description.directive.ts @@ -2,18 +2,18 @@ import { Directive, effect, inject, signal } from '@angular/core'; import { BrnDialogComponent } from './brn-dialog.component'; @Directive({ - selector: '[brnDialogDescription]', - standalone: true, - host: { - '[id]': '_id()', - }, + selector: '[brnDialogDescription]', + standalone: true, + host: { + '[id]': '_id()', + }, }) export class BrnDialogDescriptionDirective { - private _dialog = inject(BrnDialogComponent); - protected _id = signal('brn-dialog-description-' + this._dialog.dialogId); - constructor() { - effect(() => { - this._dialog.setAriaDescribedBy(this._id()); - }); - } + private _dialog = inject(BrnDialogComponent); + protected _id = signal('brn-dialog-description-' + this._dialog.dialogId); + constructor() { + effect(() => { + this._dialog.setAriaDescribedBy(this._id()); + }); + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog-overlay.component.ts b/libs/ui/dialog/brain/src/lib/brn-dialog-overlay.component.ts index fb6f97bf4..eb16bfc57 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog-overlay.component.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog-overlay.component.ts @@ -1,27 +1,27 @@ import { ChangeDetectionStrategy, Component, forwardRef, inject, Input, ViewEncapsulation } from '@angular/core'; -import { BrnDialogComponent } from './brn-dialog.component'; import { SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core'; +import { BrnDialogComponent } from './brn-dialog.component'; @Component({ - selector: 'brn-dialog-overlay', - standalone: true, - providers: [ - { - provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, - useExisting: forwardRef(() => BrnDialogOverlayComponent), - }, - ], - template: ``, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + selector: 'brn-dialog-overlay', + standalone: true, + providers: [ + { + provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, + useExisting: forwardRef(() => BrnDialogOverlayComponent), + }, + ], + template: ``, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, }) export class BrnDialogOverlayComponent { - private _brnDialog = inject(BrnDialogComponent); - @Input() - set class(newClass: string | null | undefined) { - this._brnDialog.setOverlayClass(newClass); - } - setClassToCustomElement(newClass: string) { - this._brnDialog.setOverlayClass(newClass); - } + private _brnDialog = inject(BrnDialogComponent); + @Input() + set class(newClass: string | null | undefined) { + this._brnDialog.setOverlayClass(newClass); + } + setClassToCustomElement(newClass: string) { + this._brnDialog.setOverlayClass(newClass); + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog-title.directive.ts b/libs/ui/dialog/brain/src/lib/brn-dialog-title.directive.ts index 7c799aeeb..22591e6c8 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog-title.directive.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog-title.directive.ts @@ -2,18 +2,18 @@ import { Directive, effect, inject, signal } from '@angular/core'; import { BrnDialogComponent } from './brn-dialog.component'; @Directive({ - selector: '[brnDialogTitle]', - standalone: true, - host: { - '[id]': '_id()', - }, + selector: '[brnDialogTitle]', + standalone: true, + host: { + '[id]': '_id()', + }, }) export class BrnDialogTitleDirective { - private _dialog = inject(BrnDialogComponent); - protected _id = signal('brn-dialog-title-' + this._dialog.dialogId); - constructor() { - effect(() => { - this._dialog.setAriaLabelledBy(this._id()); - }); - } + private _dialog = inject(BrnDialogComponent); + protected _id = signal('brn-dialog-title-' + this._dialog.dialogId); + constructor() { + effect(() => { + this._dialog.setAriaLabelledBy(this._id()); + }); + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog-trigger.directive.ts b/libs/ui/dialog/brain/src/lib/brn-dialog-trigger.directive.ts index 2608f494b..3ad375650 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog-trigger.directive.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog-trigger.directive.ts @@ -3,33 +3,33 @@ import { BrnDialogComponent } from './brn-dialog.component'; let idSequence = 0; @Directive({ - selector: 'button[brnDialogTrigger],button[brnDialogTriggerFor]', - standalone: true, - host: { - '[id]': '_id()', - '(click)': 'open()', - 'aria-haspopup': 'dialog', - '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", - '[attr.data-state]': 'state()', - '[attr.aria-controls]': 'dialogId', - }, + selector: 'button[brnDialogTrigger],button[brnDialogTriggerFor]', + standalone: true, + host: { + '[id]': '_id()', + '(click)': 'open()', + 'aria-haspopup': 'dialog', + '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", + '[attr.data-state]': 'state()', + '[attr.aria-controls]': 'dialogId', + }, }) export class BrnDialogTriggerDirective { - protected _brnDialog = inject(BrnDialogComponent, { optional: true }); - protected _id = signal('brn-dialog-trigger-' + idSequence++); - state = this._brnDialog?.state ?? signal('closed'); - dialogId = 'brn-dialog-' + (this._brnDialog?.dialogId ?? idSequence++); + protected _brnDialog = inject(BrnDialogComponent, { optional: true }); + protected _id = signal('brn-dialog-trigger-' + idSequence++); + state = this._brnDialog?.state ?? signal('closed'); + dialogId = 'brn-dialog-' + (this._brnDialog?.dialogId ?? idSequence++); - @Input() - set id(newId: string) { - this._id.set(newId); - } + @Input() + set id(newId: string) { + this._id.set(newId); + } - @Input() - set brnDialogTriggerFor(brnDialog: BrnDialogComponent) { - this._brnDialog = brnDialog; - } - open() { - this._brnDialog?.open(); - } + @Input() + set brnDialogTriggerFor(brnDialog: BrnDialogComponent) { + this._brnDialog = brnDialog; + } + open() { + this._brnDialog?.open(); + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts b/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts index 6a2015b7f..5aea09d40 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts @@ -1,221 +1,223 @@ +import { AutoFocusTarget } from '@angular/cdk/dialog'; +import { + ConnectedPosition, + FlexibleConnectedPositionStrategyOrigin, + OverlayPositionBuilder, + PositionStrategy, + ScrollStrategy, + ScrollStrategyOptions, +} from '@angular/cdk/overlay'; import { - booleanAttribute, - ChangeDetectionStrategy, - Component, - ElementRef, - inject, - Input, - numberAttribute, - Output, - TemplateRef, - ViewContainerRef, - ViewEncapsulation, + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + Output, + TemplateRef, + ViewContainerRef, + ViewEncapsulation, + booleanAttribute, + inject, + numberAttribute, } from '@angular/core'; import { BrnDialogOptions, BrnDialogService, provideBrnDialog } from './brn-dialog.service'; -import { - ConnectedPosition, - FlexibleConnectedPositionStrategyOrigin, - OverlayPositionBuilder, - PositionStrategy, - ScrollStrategy, - ScrollStrategyOptions, -} from '@angular/cdk/overlay'; -import { AutoFocusTarget } from '@angular/cdk/dialog'; let dialogSequence = 0; export type BrnDialogState = 'open' | 'closed'; @Component({ - selector: 'brn-dialog', - standalone: true, - template: ` `, - providers: [provideBrnDialog()], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - exportAs: 'brnDialog', + selector: 'brn-dialog', + standalone: true, + template: ` + + `, + providers: [provideBrnDialog()], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + exportAs: 'brnDialog', }) export class BrnDialogComponent { - private readonly _dialogService = inject(BrnDialogService); - private readonly _vcr = inject(ViewContainerRef); - private _contentTemplate: TemplateRef | undefined; - public readonly positionBuilder = inject(OverlayPositionBuilder); - public readonly ssos = inject(ScrollStrategyOptions); - public readonly state = this._dialogService.state; - public readonly dialogId = dialogSequence++; - - private _context = {}; - protected _options: BrnDialogOptions = { - role: 'dialog', - id: 'brn-dialog-' + this.dialogId, - attachPositions: [], - attachTo: null, - autoFocus: 'first-tabbable', - backdropClass: '', - closeDelay: 0, - closeOnOutsidePointerEvents: true, - hasBackdrop: true, - panelClass: '', - positionStrategy: null, - restoreFocus: true, - scrollStrategy: null, - disableClose: false, - ariaDescribedBy: 'brn-dialog-description-' + this.dialogId, - ariaLabelledBy: 'brn-dialog-title-' + this.dialogId, - ariaLabel: undefined, - ariaModal: true, - }; - - @Output() - public readonly closed = this._dialogService.closed; - - // eslint-disable-next-line @angular-eslint/no-input-rename - @Input('state') - set newState(state: BrnDialogState) { - if (state === 'open') { - this.open(); - } - if (state === 'closed') { - this.close(this._options['closeDelay']); - } - } - - @Input() - set role(role: 'dialog' | 'alertdialog') { - this._options['role'] = role; - } - - @Input({ transform: booleanAttribute }) - set hasBackdrop(hasBackdrop: boolean) { - this._options['hasBackdrop'] = hasBackdrop; - } - - @Input() - set positionStrategy(positionStrategy: PositionStrategy) { - this._options['positionStrategy'] = positionStrategy; - } - - @Input() - set scrollStrategy(scrollStrategy: ScrollStrategy | 'close' | 'reposition') { - if (scrollStrategy === 'close') { - this._options['scrollStrategy'] = this.ssos.close(); - } else if (scrollStrategy === 'reposition') { - this._options['scrollStrategy'] = this.ssos.reposition(); - } else { - this._options['scrollStrategy'] = scrollStrategy; - } - } - - @Input() - set restoreFocus(restoreFocus: boolean | string | ElementRef) { - this._options['restoreFocus'] = restoreFocus; - } - - @Input({ transform: booleanAttribute }) - set closeOnOutsidePointerEvents(closeOnOutsidePointerEvents: boolean) { - this._options['closeOnOutsidePointerEvents'] = closeOnOutsidePointerEvents; - } - - @Input() - set attachTo(attachTo: FlexibleConnectedPositionStrategyOrigin | null | undefined) { - this._options['attachTo'] = attachTo; - } - - @Input() - set attachPositions(attachPositions: ConnectedPosition[]) { - this._options['attachPositions'] = attachPositions; - } - - @Input() - set autoFocus(autoFocus: AutoFocusTarget | string) { - this._options['autoFocus'] = autoFocus; - } - - @Input({ transform: numberAttribute }) - set closeDelay(closeDelay: number) { - this._options['closeDelay'] = closeDelay; - } - - @Input({ transform: booleanAttribute }) - set disableClose(disableClose: boolean) { - this._options['disableClose'] = disableClose; - } - - /* eslint-disable-next-line @angular-eslint/no-input-rename */ - @Input('aria-describedby') - set ariaDescribedBy(ariaDescribedBy: string | null | undefined) { - this.setAriaDescribedBy(ariaDescribedBy); - } - - /* eslint-disable-next-line @angular-eslint/no-input-rename */ - @Input('aria-labelledby') - set ariaLabelledBy(ariaLabelledBy: string | null | undefined) { - this.setAriaLabelledBy(ariaLabelledBy); - } - - /* eslint-disable-next-line @angular-eslint/no-input-rename */ - @Input('aria-label') - set ariaLabel(ariaLabel: string | null | undefined) { - this.setAriaLabel(ariaLabel); - } - - /* eslint-disable-next-line @angular-eslint/no-input-rename */ - @Input({ - alias: 'aria-modal', - transform: booleanAttribute, - }) - set ariaModal(isModal: boolean) { - this.setAriaModal(isModal); - } - - open() { - if (!this._contentTemplate) return; - this._dialogService.open( - this._vcr, - this._contentTemplate, - this._context as DialogContext, - this._options - ); - } - - close(delay?: number) { - this._dialogService.close(delay ?? this._options.closeDelay); - } - - registerTemplate(tpl: TemplateRef) { - this._contentTemplate = tpl; - } - - setOverlayClass(overlayClass: string | null | undefined) { - this._options['backdropClass'] = overlayClass ?? ''; - } - - setPanelClass(panelClass: string | null | undefined) { - this._options['panelClass'] = panelClass ?? ''; - } - - setContext(context: unknown) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - this._context = { ...this._context, ...context }; - } - - setAriaDescribedBy(ariaDescribedBy: string | null | undefined) { - this._options = { ...this._options, ariaDescribedBy }; - this._dialogService.setAriaDescribedBy(ariaDescribedBy); - } - - setAriaLabelledBy(ariaLabelledBy: string | null | undefined) { - this._options = { ...this._options, ariaLabelledBy }; - this._dialogService.setAriaLabelledBy(ariaLabelledBy); - } - - setAriaLabel(ariaLabel: string | null | undefined) { - this._options = { ...this._options, ariaLabel }; - this._dialogService.setAriaLabel(ariaLabel); - } - - setAriaModal(ariaModal: boolean) { - this._options = { ...this._options, ariaModal }; - } + private readonly _dialogService = inject(BrnDialogService); + private readonly _vcr = inject(ViewContainerRef); + private _contentTemplate: TemplateRef | undefined; + public readonly positionBuilder = inject(OverlayPositionBuilder); + public readonly ssos = inject(ScrollStrategyOptions); + public readonly state = this._dialogService.state; + public readonly dialogId = dialogSequence++; + + private _context = {}; + protected _options: BrnDialogOptions = { + role: 'dialog', + id: 'brn-dialog-' + this.dialogId, + attachPositions: [], + attachTo: null, + autoFocus: 'first-tabbable', + backdropClass: '', + closeDelay: 0, + closeOnOutsidePointerEvents: true, + hasBackdrop: true, + panelClass: '', + positionStrategy: null, + restoreFocus: true, + scrollStrategy: null, + disableClose: false, + ariaDescribedBy: 'brn-dialog-description-' + this.dialogId, + ariaLabelledBy: 'brn-dialog-title-' + this.dialogId, + ariaLabel: undefined, + ariaModal: true, + }; + + @Output() + public readonly closed = this._dialogService.closed; + + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('state') + set newState(state: BrnDialogState) { + if (state === 'open') { + this.open(); + } + if (state === 'closed') { + this.close(this._options['closeDelay']); + } + } + + @Input() + set role(role: 'dialog' | 'alertdialog') { + this._options['role'] = role; + } + + @Input({ transform: booleanAttribute }) + set hasBackdrop(hasBackdrop: boolean) { + this._options['hasBackdrop'] = hasBackdrop; + } + + @Input() + set positionStrategy(positionStrategy: PositionStrategy) { + this._options['positionStrategy'] = positionStrategy; + } + + @Input() + set scrollStrategy(scrollStrategy: ScrollStrategy | 'close' | 'reposition') { + if (scrollStrategy === 'close') { + this._options['scrollStrategy'] = this.ssos.close(); + } else if (scrollStrategy === 'reposition') { + this._options['scrollStrategy'] = this.ssos.reposition(); + } else { + this._options['scrollStrategy'] = scrollStrategy; + } + } + + @Input() + set restoreFocus(restoreFocus: boolean | string | ElementRef) { + this._options['restoreFocus'] = restoreFocus; + } + + @Input({ transform: booleanAttribute }) + set closeOnOutsidePointerEvents(closeOnOutsidePointerEvents: boolean) { + this._options['closeOnOutsidePointerEvents'] = closeOnOutsidePointerEvents; + } + + @Input() + set attachTo(attachTo: FlexibleConnectedPositionStrategyOrigin | null | undefined) { + this._options['attachTo'] = attachTo; + } + + @Input() + set attachPositions(attachPositions: ConnectedPosition[]) { + this._options['attachPositions'] = attachPositions; + } + + @Input() + set autoFocus(autoFocus: AutoFocusTarget | string) { + this._options['autoFocus'] = autoFocus; + } + + @Input({ transform: numberAttribute }) + set closeDelay(closeDelay: number) { + this._options['closeDelay'] = closeDelay; + } + + @Input({ transform: booleanAttribute }) + set disableClose(disableClose: boolean) { + this._options['disableClose'] = disableClose; + } + + /* eslint-disable-next-line @angular-eslint/no-input-rename */ + @Input('aria-describedby') + set ariaDescribedBy(ariaDescribedBy: string | null | undefined) { + this.setAriaDescribedBy(ariaDescribedBy); + } + + /* eslint-disable-next-line @angular-eslint/no-input-rename */ + @Input('aria-labelledby') + set ariaLabelledBy(ariaLabelledBy: string | null | undefined) { + this.setAriaLabelledBy(ariaLabelledBy); + } + + /* eslint-disable-next-line @angular-eslint/no-input-rename */ + @Input('aria-label') + set ariaLabel(ariaLabel: string | null | undefined) { + this.setAriaLabel(ariaLabel); + } + + /* eslint-disable-next-line @angular-eslint/no-input-rename */ + @Input({ + alias: 'aria-modal', + transform: booleanAttribute, + }) + set ariaModal(isModal: boolean) { + this.setAriaModal(isModal); + } + + open() { + if (!this._contentTemplate) return; + this._dialogService.open( + this._vcr, + this._contentTemplate, + this._context as DialogContext, + this._options, + ); + } + + close(delay?: number) { + this._dialogService.close(delay ?? this._options.closeDelay); + } + + registerTemplate(tpl: TemplateRef) { + this._contentTemplate = tpl; + } + + setOverlayClass(overlayClass: string | null | undefined) { + this._options['backdropClass'] = overlayClass ?? ''; + } + + setPanelClass(panelClass: string | null | undefined) { + this._options['panelClass'] = panelClass ?? ''; + } + + setContext(context: unknown) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + this._context = { ...this._context, ...context }; + } + + setAriaDescribedBy(ariaDescribedBy: string | null | undefined) { + this._options = { ...this._options, ariaDescribedBy }; + this._dialogService.setAriaDescribedBy(ariaDescribedBy); + } + + setAriaLabelledBy(ariaLabelledBy: string | null | undefined) { + this._options = { ...this._options, ariaLabelledBy }; + this._dialogService.setAriaLabelledBy(ariaLabelledBy); + } + + setAriaLabel(ariaLabel: string | null | undefined) { + this._options = { ...this._options, ariaLabel }; + this._dialogService.setAriaLabel(ariaLabel); + } + + setAriaModal(ariaModal: boolean) { + this._options = { ...this._options, ariaModal }; + } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog.service.ts b/libs/ui/dialog/brain/src/lib/brn-dialog.service.ts index 9e81d3837..172edc466 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog.service.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog.service.ts @@ -1,193 +1,193 @@ -import { - computed, - effect, - ElementRef, - EventEmitter, - inject, - Injectable, - OnDestroy, - Renderer2, - signal, - TemplateRef, - ViewContainerRef, -} from '@angular/core'; import { AutoFocusTarget, Dialog, DIALOG_DATA, DIALOG_SCROLL_STRATEGY_PROVIDER, DialogRef } from '@angular/cdk/dialog'; import { - ComponentType, - ConnectedPosition, - FlexibleConnectedPositionStrategyOrigin, - OverlayPositionBuilder, - PositionStrategy, - ScrollStrategy, - ScrollStrategyOptions, + ComponentType, + ConnectedPosition, + FlexibleConnectedPositionStrategyOrigin, + OverlayPositionBuilder, + PositionStrategy, + ScrollStrategy, + ScrollStrategyOptions, } from '@angular/cdk/overlay'; +import { + computed, + effect, + ElementRef, + EventEmitter, + inject, + Injectable, + OnDestroy, + Renderer2, + signal, + TemplateRef, + ViewContainerRef, +} from '@angular/core'; import { filter, Subject, takeUntil } from 'rxjs'; export const provideBrnDialog = () => [Dialog, BrnDialogService, DIALOG_SCROLL_STRATEGY_PROVIDER]; export type BrnDialogOptions = { - id: string; - role: 'dialog' | 'alertdialog'; - hasBackdrop: boolean; - panelClass: string | string[]; - backdropClass: string | string[]; - positionStrategy: PositionStrategy | null | undefined; - scrollStrategy: ScrollStrategy | null | undefined; - restoreFocus: boolean | string | ElementRef; - closeDelay: number; - closeOnOutsidePointerEvents: boolean; - attachTo: FlexibleConnectedPositionStrategyOrigin | null | undefined; - attachPositions: ConnectedPosition[]; - autoFocus: AutoFocusTarget | string; - disableClose: boolean; - ariaDescribedBy: string | null | undefined; - ariaLabelledBy: string | null | undefined; - ariaLabel: string | null | undefined; - ariaModal: boolean; + id: string; + role: 'dialog' | 'alertdialog'; + hasBackdrop: boolean; + panelClass: string | string[]; + backdropClass: string | string[]; + positionStrategy: PositionStrategy | null | undefined; + scrollStrategy: ScrollStrategy | null | undefined; + restoreFocus: boolean | string | ElementRef; + closeDelay: number; + closeOnOutsidePointerEvents: boolean; + attachTo: FlexibleConnectedPositionStrategyOrigin | null | undefined; + attachPositions: ConnectedPosition[]; + autoFocus: AutoFocusTarget | string; + disableClose: boolean; + ariaDescribedBy: string | null | undefined; + ariaLabelledBy: string | null | undefined; + ariaLabel: string | null | undefined; + ariaModal: boolean; }; export type BrnDialogContext = T & { close: () => void }; export const injectBrnDialogCtx = (): BrnDialogContext => { - return inject(DIALOG_DATA); + return inject(DIALOG_DATA); }; const cssClassesToArray = (classes: string | string[] | undefined | null, defaultClass = ''): string[] => { - if (typeof classes === 'string') { - const splitClasses = classes.trim().split(' '); - if (splitClasses.length === 0) { - return [defaultClass]; - } - return splitClasses; - } - return classes ?? []; + if (typeof classes === 'string') { + const splitClasses = classes.trim().split(' '); + if (splitClasses.length === 0) { + return [defaultClass]; + } + return splitClasses; + } + return classes ?? []; }; @Injectable() export class BrnDialogService implements OnDestroy { - private _destroyed$ = new Subject(); - private _previousTimeout: ReturnType | undefined; - - private _cdkDialog = inject(Dialog); - private _renderer = inject(Renderer2); - private _positionBuilder = inject(OverlayPositionBuilder); - private _sso = inject(ScrollStrategyOptions); - private _dialogRef?: DialogRef; - - private _open = signal(false); - public state = computed(() => (this._open() ? 'open' : 'closed')); - private _overlay: HTMLElement | null = null; - private _backdrop: HTMLElement | null = null; - - public closed = new EventEmitter(); - - constructor() { - effect(() => { - if (this._overlay) { - this._renderer.setAttribute(this._overlay, 'data-state', this.state()); - } - if (this._backdrop) { - this._renderer.setAttribute(this._backdrop, 'data-state', this.state()); - } - }); - } - - public open( - vcr: ViewContainerRef, - content: ComponentType | TemplateRef, - context?: DialogContext, - options?: Partial - ): void { - if (this._open() || (options?.id && this._cdkDialog.getDialogById(options.id))) { - return; - } - const positionStrategy = - options?.positionStrategy ?? - (options?.attachTo && options?.attachPositions && options?.attachPositions?.length > 0 - ? this._positionBuilder?.flexibleConnectedTo(options.attachTo).withPositions(options.attachPositions ?? []) - : this._positionBuilder.global().centerHorizontally().centerVertically()); - const contextOrData = { ...context, close: () => this.close(options?.closeDelay) }; - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - this._dialogRef = this._cdkDialog.open(content, { - id: options?.id, - role: options?.role, - viewContainerRef: vcr, - templateContext: contextOrData, - data: contextOrData, - hasBackdrop: options?.hasBackdrop, - panelClass: cssClassesToArray(options?.panelClass), - backdropClass: cssClassesToArray(options?.backdropClass, 'bg-transparent'), - positionStrategy, - scrollStrategy: options?.scrollStrategy ?? this._sso?.block(), - restoreFocus: options?.restoreFocus, - disableClose: true, - autoFocus: options?.autoFocus ?? 'first-tabbable', - ariaDescribedBy: options?.ariaDescribedBy, - ariaLabelledBy: options?.ariaLabelledBy, - ariaLabel: options?.ariaLabel, - ariaModal: options?.ariaModal, - }); - - if (!this._dialogRef) return; - this._overlay = this._dialogRef.overlayRef.overlayElement; - this._backdrop = this._dialogRef.overlayRef.backdropElement; - - if (options?.closeOnOutsidePointerEvents) { - this._dialogRef.outsidePointerEvents.pipe(takeUntil(this._destroyed$)).subscribe(() => { - this.close(options?.closeDelay); - }); - } - if (!options?.disableClose) { - this._dialogRef.keydownEvents - .pipe( - filter((e) => e.key === 'Escape'), - takeUntil(this._destroyed$) - ) - .subscribe(() => { - this.close(options?.closeDelay); - }); - } - - this._dialogRef.closed.pipe(takeUntil(this._destroyed$)).subscribe(() => { - this._open.set(false); - this.closed.emit(); - }); - - this._open.set(true); - } - - public close(delay = 0): void { - if (!this._open()) return; - - this._open.set(false); - - if (this._previousTimeout) { - clearTimeout(this._previousTimeout); - } - - this._previousTimeout = setTimeout(() => { - this._dialogRef?.close(); - }, delay); - } - - public setAriaDescribedBy(ariaDescribedBy: string | null | undefined) { - if (!this._dialogRef) return; - this._dialogRef.config.ariaDescribedBy = ariaDescribedBy; - } - - public setAriaLabelledBy(ariaLabelledBy: string | null | undefined) { - if (!this._dialogRef) return; - this._dialogRef.config.ariaLabelledBy = ariaLabelledBy; - } - - public setAriaLabel(ariaLabel: string | null | undefined) { - if (!this._dialogRef) return; - this._dialogRef.config.ariaLabel = ariaLabel; - } - - public ngOnDestroy(): void { - this._destroyed$.next(); - this._destroyed$.complete(); - } + private _destroyed$ = new Subject(); + private _previousTimeout: ReturnType | undefined; + + private _cdkDialog = inject(Dialog); + private _renderer = inject(Renderer2); + private _positionBuilder = inject(OverlayPositionBuilder); + private _sso = inject(ScrollStrategyOptions); + private _dialogRef?: DialogRef; + + private _open = signal(false); + public state = computed(() => (this._open() ? 'open' : 'closed')); + private _overlay: HTMLElement | null = null; + private _backdrop: HTMLElement | null = null; + + public closed = new EventEmitter(); + + constructor() { + effect(() => { + if (this._overlay) { + this._renderer.setAttribute(this._overlay, 'data-state', this.state()); + } + if (this._backdrop) { + this._renderer.setAttribute(this._backdrop, 'data-state', this.state()); + } + }); + } + + public open( + vcr: ViewContainerRef, + content: ComponentType | TemplateRef, + context?: DialogContext, + options?: Partial, + ): void { + if (this._open() || (options?.id && this._cdkDialog.getDialogById(options.id))) { + return; + } + const positionStrategy = + options?.positionStrategy ?? + (options?.attachTo && options?.attachPositions && options?.attachPositions?.length > 0 + ? this._positionBuilder?.flexibleConnectedTo(options.attachTo).withPositions(options.attachPositions ?? []) + : this._positionBuilder.global().centerHorizontally().centerVertically()); + const contextOrData = { ...context, close: () => this.close(options?.closeDelay) }; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + this._dialogRef = this._cdkDialog.open(content, { + id: options?.id, + role: options?.role, + viewContainerRef: vcr, + templateContext: contextOrData, + data: contextOrData, + hasBackdrop: options?.hasBackdrop, + panelClass: cssClassesToArray(options?.panelClass), + backdropClass: cssClassesToArray(options?.backdropClass, 'bg-transparent'), + positionStrategy, + scrollStrategy: options?.scrollStrategy ?? this._sso?.block(), + restoreFocus: options?.restoreFocus, + disableClose: true, + autoFocus: options?.autoFocus ?? 'first-tabbable', + ariaDescribedBy: options?.ariaDescribedBy, + ariaLabelledBy: options?.ariaLabelledBy, + ariaLabel: options?.ariaLabel, + ariaModal: options?.ariaModal, + }); + + if (!this._dialogRef) return; + this._overlay = this._dialogRef.overlayRef.overlayElement; + this._backdrop = this._dialogRef.overlayRef.backdropElement; + + if (options?.closeOnOutsidePointerEvents) { + this._dialogRef.outsidePointerEvents.pipe(takeUntil(this._destroyed$)).subscribe(() => { + this.close(options?.closeDelay); + }); + } + if (!options?.disableClose) { + this._dialogRef.keydownEvents + .pipe( + filter((e) => e.key === 'Escape'), + takeUntil(this._destroyed$), + ) + .subscribe(() => { + this.close(options?.closeDelay); + }); + } + + this._dialogRef.closed.pipe(takeUntil(this._destroyed$)).subscribe(() => { + this._open.set(false); + this.closed.emit(); + }); + + this._open.set(true); + } + + public close(delay = 0): void { + if (!this._open()) return; + + this._open.set(false); + + if (this._previousTimeout) { + clearTimeout(this._previousTimeout); + } + + this._previousTimeout = setTimeout(() => { + this._dialogRef?.close(); + }, delay); + } + + public setAriaDescribedBy(ariaDescribedBy: string | null | undefined) { + if (!this._dialogRef) return; + this._dialogRef.config.ariaDescribedBy = ariaDescribedBy; + } + + public setAriaLabelledBy(ariaLabelledBy: string | null | undefined) { + if (!this._dialogRef) return; + this._dialogRef.config.ariaLabelledBy = ariaLabelledBy; + } + + public setAriaLabel(ariaLabel: string | null | undefined) { + if (!this._dialogRef) return; + this._dialogRef.config.ariaLabel = ariaLabel; + } + + public ngOnDestroy(): void { + this._destroyed$.next(); + this._destroyed$.complete(); + } } diff --git a/libs/ui/dialog/brain/src/test-setup.ts b/libs/ui/dialog/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/dialog/brain/src/test-setup.ts +++ b/libs/ui/dialog/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/dialog/brain/tsconfig.json b/libs/ui/dialog/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/dialog/brain/tsconfig.json +++ b/libs/ui/dialog/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/dialog/brain/tsconfig.lib.json b/libs/ui/dialog/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/dialog/brain/tsconfig.lib.json +++ b/libs/ui/dialog/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/dialog/brain/tsconfig.lib.prod.json b/libs/ui/dialog/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/dialog/brain/tsconfig.lib.prod.json +++ b/libs/ui/dialog/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/dialog/brain/tsconfig.spec.json b/libs/ui/dialog/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/dialog/brain/tsconfig.spec.json +++ b/libs/ui/dialog/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/dialog/dialog.stories.ts b/libs/ui/dialog/dialog.stories.ts index 69aa3443b..7008ea1ce 100644 --- a/libs/ui/dialog/dialog.stories.ts +++ b/libs/ui/dialog/dialog.stories.ts @@ -1,36 +1,36 @@ +import { provideIcons } from '@ng-icons/core'; +import { radixCross1 } from '@ng-icons/radix-icons'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; -import { BrnDialogImports } from './brain/src'; -import { HlmDialogImports } from './helm/src'; -import { HlmLabelDirective } from '../label/helm/src'; import { HlmButtonDirective } from '../button/helm/src'; -import { HlmInputDirective } from '../input/helm/src'; import { HlmIconComponent } from '../icon/helm/src'; -import { provideIcons } from '@ng-icons/core'; -import { radixCross1 } from '@ng-icons/radix-icons'; +import { HlmInputDirective } from '../input/helm/src'; +import { HlmLabelDirective } from '../label/helm/src'; +import { BrnDialogImports } from './brain/src'; +import { HlmDialogImports } from './helm/src'; const meta: Meta<{}> = { - title: 'Dialog', - decorators: [ - moduleMetadata({ - imports: [ - BrnDialogImports, - HlmDialogImports, - HlmLabelDirective, - HlmButtonDirective, - HlmInputDirective, - HlmIconComponent, - ], - providers: [provideIcons({ radixCross1 })], - }), - ], + title: 'Dialog', + decorators: [ + moduleMetadata({ + imports: [ + BrnDialogImports, + HlmDialogImports, + HlmLabelDirective, + HlmButtonDirective, + HlmInputDirective, + HlmIconComponent, + ], + providers: [provideIcons({ radixCross1 })], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` @@ -65,5 +65,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/dialog/helm/.eslintrc.json b/libs/ui/dialog/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/dialog/helm/.eslintrc.json +++ b/libs/ui/dialog/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/dialog/helm/jest.config.ts b/libs/ui/dialog/helm/jest.config.ts index de4fa60a4..4112e1a77 100644 --- a/libs/ui/dialog/helm/jest.config.ts +++ b/libs/ui/dialog/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-dialog-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-dialog-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/dialog/helm/ng-package.json b/libs/ui/dialog/helm/ng-package.json index 0baa60a84..4c61b63b5 100644 --- a/libs/ui/dialog/helm/ng-package.json +++ b/libs/ui/dialog/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/dialog/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/dialog/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/dialog/helm/package.json b/libs/ui/dialog/helm/package.json index 26b857d1d..8352a343b 100644 --- a/libs/ui/dialog/helm/package.json +++ b/libs/ui/dialog/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-dialog-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-dialog-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/dialog/helm/project.json b/libs/ui/dialog/helm/project.json index edb6cd269..bc4ac488a 100644 --- a/libs/ui/dialog/helm/project.json +++ b/libs/ui/dialog/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-dialog-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/dialog/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/dialog/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/dialog/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/dialog/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/dialog/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/dialog/helm/**/*.ts", - "libs/ui/dialog/helm/**/*.html", - "libs/ui/dialog/helm/package.json", - "libs/ui/dialog/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-dialog-helm" - } - } - } + "name": "ui-dialog-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/dialog/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/dialog/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/dialog/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/dialog/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/dialog/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/dialog/helm/**/*.ts", + "libs/ui/dialog/helm/**/*.html", + "libs/ui/dialog/helm/package.json", + "libs/ui/dialog/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-dialog-helm" + } + } + } } diff --git a/libs/ui/dialog/helm/src/index.ts b/libs/ui/dialog/helm/src/index.ts index 3e6bdd967..f7dc5d037 100644 --- a/libs/ui/dialog/helm/src/index.ts +++ b/libs/ui/dialog/helm/src/index.ts @@ -17,17 +17,17 @@ export * from './lib/hlm-dialog-overlay.directive'; export * from './lib/hlm-dialog-title.directive'; export const HlmDialogImports = [ - HlmDialogCloseDirective, - HlmDialogContentDirective, - HlmDialogDescriptionDirective, - HlmDialogFooterComponent, - HlmDialogHeaderComponent, - HlmDialogOverlayDirective, - HlmDialogTitleDirective, + HlmDialogCloseDirective, + HlmDialogContentDirective, + HlmDialogDescriptionDirective, + HlmDialogFooterComponent, + HlmDialogHeaderComponent, + HlmDialogOverlayDirective, + HlmDialogTitleDirective, ] as const; @NgModule({ - imports: [...HlmDialogImports], - exports: [...HlmDialogImports], + imports: [...HlmDialogImports], + exports: [...HlmDialogImports], }) export class HlmDialogModule {} diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-close.directive.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-close.directive.ts index 87af17ab9..e55188245 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-close.directive.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-close.directive.ts @@ -3,24 +3,24 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmDialogClose],[brnDialogClose][hlm]', - standalone: true, + selector: '[hlmDialogClose],[brnDialogClose][hlm]', + standalone: true, }) export class HlmDialogCloseDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-content.directive.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-content.directive.ts index 68d1638d7..f1e9806ce 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-content.directive.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-content.directive.ts @@ -3,34 +3,34 @@ import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmDialogContent],[brnDialogContent][hlm]', - standalone: true, + selector: '[hlmDialogContent],[brnDialogContent][hlm]', + standalone: true, }) export class HlmDialogContentDirective { - private _inputs: ClassValue = ''; - private _statusProvider = injectExposesStateProvider({ host: true }); - public state = this._statusProvider?.state ?? signal('closed').asReadonly(); - private _renderer = inject(Renderer2); - private _element = inject(ElementRef); + private _inputs: ClassValue = ''; + private _statusProvider = injectExposesStateProvider({ host: true }); + public state = this._statusProvider?.state ?? signal('closed').asReadonly(); + private _renderer = inject(Renderer2); + private _element = inject(ElementRef); - constructor() { - effect(() => { - this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); - }); - } + constructor() { + effect(() => { + this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); + }); + } - @HostBinding('class') - _class = this.generateClasses(); - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @HostBinding('class') + _class = this.generateClasses(); + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full', + this._inputs, + ); + } } diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-description.directive.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-description.directive.ts index 37710fa20..ad02da4a1 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-description.directive.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-description.directive.ts @@ -3,21 +3,21 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmDialogDescription],[brnDialogDescription][hlm]', - standalone: true, + selector: '[hlmDialogDescription],[brnDialogDescription][hlm]', + standalone: true, }) export class HlmDialogDescriptionDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('text-sm text-muted-foreground', this._inputs); - } + private generateClasses() { + return hlm('text-sm text-muted-foreground', this._inputs); + } } diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-footer.component.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-footer.component.ts index 66c9bacd3..8eeb74c32 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-footer.component.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-footer.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-dialog-footer', - standalone: true, - template: ``, + selector: 'hlm-dialog-footer', + standalone: true, + template: ` + + `, }) export class HlmDialogFooterComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._inputs); - } + generateClass() { + return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._inputs); + } } diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-header.component.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-header.component.ts index be37ed1c6..afb609d4d 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-header.component.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-header.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-dialog-header', - standalone: true, - template: ``, + selector: 'hlm-dialog-header', + standalone: true, + template: ` + + `, }) export class HlmDialogHeaderComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col space-y-1.5 text-center sm:text-left', this._inputs); - } + generateClass() { + return hlm('flex flex-col space-y-1.5 text-center sm:text-left', this._inputs); + } } diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-overlay.directive.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-overlay.directive.ts index 2d059050f..00311e124 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-overlay.directive.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-overlay.directive.ts @@ -3,29 +3,29 @@ import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]', - standalone: true, + selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]', + standalone: true, }) export class HlmDialogOverlayDirective { - private _host = injectCustomClassSettable({ optional: true, host: true }); - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + private _host = injectCustomClassSettable({ optional: true, host: true }); + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - constructor() { - this._host?.setClassToCustomElement(this._class); - } + constructor() { + this._host?.setClassToCustomElement(this._class); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - this._host?.setClassToCustomElement(this._class); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + this._host?.setClassToCustomElement(this._class); + } - private generateClasses() { - return hlm( - 'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', + this._inputs, + ); + } } diff --git a/libs/ui/dialog/helm/src/lib/hlm-dialog-title.directive.ts b/libs/ui/dialog/helm/src/lib/hlm-dialog-title.directive.ts index 23685ec4e..825bb879c 100644 --- a/libs/ui/dialog/helm/src/lib/hlm-dialog-title.directive.ts +++ b/libs/ui/dialog/helm/src/lib/hlm-dialog-title.directive.ts @@ -3,21 +3,21 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmDialogTitle],[brnDialogTitle][hlm]', - standalone: true, + selector: '[hlmDialogTitle],[brnDialogTitle][hlm]', + standalone: true, }) export class HlmDialogTitleDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('text-lg font-semibold leading-none tracking-tight', this._inputs); - } + private generateClasses() { + return hlm('text-lg font-semibold leading-none tracking-tight', this._inputs); + } } diff --git a/libs/ui/dialog/helm/src/test-setup.ts b/libs/ui/dialog/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/dialog/helm/src/test-setup.ts +++ b/libs/ui/dialog/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/dialog/helm/tsconfig.json b/libs/ui/dialog/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/dialog/helm/tsconfig.json +++ b/libs/ui/dialog/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/dialog/helm/tsconfig.lib.json b/libs/ui/dialog/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/dialog/helm/tsconfig.lib.json +++ b/libs/ui/dialog/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/dialog/helm/tsconfig.lib.prod.json b/libs/ui/dialog/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/dialog/helm/tsconfig.lib.prod.json +++ b/libs/ui/dialog/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/dialog/helm/tsconfig.spec.json b/libs/ui/dialog/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/dialog/helm/tsconfig.spec.json +++ b/libs/ui/dialog/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/hover-card/brain/.eslintrc.json b/libs/ui/hover-card/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/hover-card/brain/.eslintrc.json +++ b/libs/ui/hover-card/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/hover-card/brain/jest.config.ts b/libs/ui/hover-card/brain/jest.config.ts index 90a6ba31f..168e2abdf 100644 --- a/libs/ui/hover-card/brain/jest.config.ts +++ b/libs/ui/hover-card/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-hover-card-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-hover-card-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/hover-card/brain/ng-package.json b/libs/ui/hover-card/brain/ng-package.json index 4dbe3a5f2..4998c853c 100644 --- a/libs/ui/hover-card/brain/ng-package.json +++ b/libs/ui/hover-card/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/hover-card/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/hover-card/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/hover-card/brain/package.json b/libs/ui/hover-card/brain/package.json index e2f5f6d37..79aa8be01 100644 --- a/libs/ui/hover-card/brain/package.json +++ b/libs/ui/hover-card/brain/package.json @@ -1,13 +1,13 @@ { - "name": "@spartan-ng/ui-hovercard-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-hovercard-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/hover-card/brain/project.json b/libs/ui/hover-card/brain/project.json index c1ebe6fa8..d4e182476 100644 --- a/libs/ui/hover-card/brain/project.json +++ b/libs/ui/hover-card/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-hover-card-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/hover-card/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/hover-card/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/hover-card/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/hover-card/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/hover-card/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/hover-card/brain/**/*.ts", - "libs/ui/hover-card/brain/**/*.html", - "libs/ui/hover-card/brain/package.json", - "libs/ui/hover-card/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-hover-card-brain" - } - } - } + "name": "ui-hover-card-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/hover-card/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/hover-card/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/hover-card/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/hover-card/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/hover-card/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/hover-card/brain/**/*.ts", + "libs/ui/hover-card/brain/**/*.html", + "libs/ui/hover-card/brain/package.json", + "libs/ui/hover-card/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-hover-card-brain" + } + } + } } diff --git a/libs/ui/hover-card/brain/src/index.ts b/libs/ui/hover-card/brain/src/index.ts index bd1f6c9e2..80488004e 100644 --- a/libs/ui/hover-card/brain/src/index.ts +++ b/libs/ui/hover-card/brain/src/index.ts @@ -1,22 +1,22 @@ import { NgModule } from '@angular/core'; -import { BrnHoverCardComponent } from './lib/brn-hover-card.component'; import { BrnHoverCardContentDirective } from './lib/brn-hover-card-content.directive'; import { BrnHoverCardTriggerDirective } from './lib/brn-hover-card-trigger.directive'; +import { BrnHoverCardComponent } from './lib/brn-hover-card.component'; -export { BrnHoverCardComponent } from './lib/brn-hover-card.component'; export { BrnHoverCardContentDirective } from './lib/brn-hover-card-content.directive'; export { BrnHoverCardContentService, BrnHoverCardOptions } from './lib/brn-hover-card-content.service'; export { BrnHoverCardTriggerDirective } from './lib/brn-hover-card-trigger.directive'; +export { BrnHoverCardComponent } from './lib/brn-hover-card.component'; export { createHoverObservable } from './lib/createHoverObservable'; export const BrnHoverCardImports = [ - BrnHoverCardComponent, - BrnHoverCardContentDirective, - BrnHoverCardTriggerDirective, + BrnHoverCardComponent, + BrnHoverCardContentDirective, + BrnHoverCardTriggerDirective, ] as const; @NgModule({ - imports: [...BrnHoverCardImports], - exports: [...BrnHoverCardImports], + imports: [...BrnHoverCardImports], + exports: [...BrnHoverCardImports], }) export class BrnHoverCardModule {} diff --git a/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.directive.ts b/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.directive.ts index 314cd72fe..8b06f25a9 100644 --- a/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.directive.ts +++ b/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.directive.ts @@ -3,23 +3,23 @@ import { EXPOSES_SIDE_TOKEN, EXPOSES_STATE_TOKEN, ExposesSide, ExposesState } fr import { BrnHoverCardContentService } from './brn-hover-card-content.service'; @Directive({ - selector: '[brnHoverCardContent]', - standalone: true, - exportAs: 'brnHoverCardContent', - providers: [ - { - provide: EXPOSES_STATE_TOKEN, - useExisting: forwardRef(() => BrnHoverCardContentDirective), - }, - { - provide: EXPOSES_SIDE_TOKEN, - useExisting: forwardRef(() => BrnHoverCardContentDirective), - }, - ], + selector: '[brnHoverCardContent]', + standalone: true, + exportAs: 'brnHoverCardContent', + providers: [ + { + provide: EXPOSES_STATE_TOKEN, + useExisting: forwardRef(() => BrnHoverCardContentDirective), + }, + { + provide: EXPOSES_SIDE_TOKEN, + useExisting: forwardRef(() => BrnHoverCardContentDirective), + }, + ], }) export class BrnHoverCardContentDirective implements ExposesState, ExposesSide { - private readonly _contentService = inject(BrnHoverCardContentService); - public readonly state = this._contentService.state; - public readonly side = this._contentService.side; - public readonly template = inject(TemplateRef); + private readonly _contentService = inject(BrnHoverCardContentService); + public readonly state = this._contentService.state; + public readonly side = this._contentService.side; + public readonly template = inject(TemplateRef); } diff --git a/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.service.ts b/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.service.ts index 39189eae8..e09c1af38 100644 --- a/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.service.ts +++ b/libs/ui/hover-card/brain/src/lib/brn-hover-card-content.service.ts @@ -1,148 +1,148 @@ -import { ElementRef, inject, Injectable, NgZone, Signal, signal, TemplateRef, ViewContainerRef } from '@angular/core'; import { - ConnectedOverlayPositionChange, - ConnectedPosition, - FlexibleConnectedPositionStrategy, - Overlay, - OverlayConfig, - OverlayPositionBuilder, - OverlayRef, + ConnectedOverlayPositionChange, + ConnectedPosition, + FlexibleConnectedPositionStrategy, + Overlay, + OverlayConfig, + OverlayPositionBuilder, + OverlayRef, } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; -import { createHoverObservable } from './createHoverObservable'; -import { BehaviorSubject, filter, map, Observable, of, Subject, switchMap } from 'rxjs'; -import { BrnHoverCardContentDirective } from './brn-hover-card-content.directive'; +import { ElementRef, Injectable, NgZone, Signal, TemplateRef, ViewContainerRef, inject, signal } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; +import { BehaviorSubject, Observable, Subject, filter, map, of, switchMap } from 'rxjs'; +import { BrnHoverCardContentDirective } from './brn-hover-card-content.directive'; +import { createHoverObservable } from './createHoverObservable'; export type BrnHoverCardOptions = Partial< - { - attachTo: ElementRef; - attachPositions: ConnectedPosition[]; - align: 'top' | 'bottom'; - sideOffset: number; - } & OverlayConfig + { + attachTo: ElementRef; + attachPositions: ConnectedPosition[]; + align: 'top' | 'bottom'; + sideOffset: number; + } & OverlayConfig >; const topFirstPositions: ConnectedPosition[] = [ - { - originX: 'center', - originY: 'top', - overlayX: 'center', - overlayY: 'bottom', - }, - { - originX: 'center', - originY: 'bottom', - overlayX: 'center', - overlayY: 'top', - }, + { + originX: 'center', + originY: 'top', + overlayX: 'center', + overlayY: 'bottom', + }, + { + originX: 'center', + originY: 'bottom', + overlayX: 'center', + overlayY: 'top', + }, ]; const bottomFirstPositions: ConnectedPosition[] = [ - { - originX: 'center', - originY: 'bottom', - overlayX: 'center', - overlayY: 'top', - }, - { - originX: 'center', - originY: 'top', - overlayX: 'center', - overlayY: 'bottom', - }, + { + originX: 'center', + originY: 'bottom', + overlayX: 'center', + overlayY: 'top', + }, + { + originX: 'center', + originY: 'top', + overlayX: 'center', + overlayY: 'bottom', + }, ]; @Injectable() export class BrnHoverCardContentService { - private readonly _overlay = inject(Overlay); - private readonly _zone = inject(NgZone); - private readonly _psBuilder = inject(OverlayPositionBuilder); - - private readonly _content = signal | null>(null); - private readonly _state = signal<'open' | 'closed'>('closed'); - - private _config: BrnHoverCardOptions = {}; - private _overlayRef?: OverlayRef; - private _positionStrategy?: FlexibleConnectedPositionStrategy; - private _destroyed$ = new Subject(); - - private _positionChangesObservables$ = new BehaviorSubject | undefined>( - undefined - ); - private _overlayHoveredObservables$ = new BehaviorSubject | undefined>(undefined); - - public readonly positionChanges$: Observable = this._positionChangesObservables$.pipe( - switchMap((positionChangeObservable) => (positionChangeObservable ? positionChangeObservable : of(undefined))), - filter((change): change is NonNullable => change !== undefined && change !== null) - ); - public readonly hovered$: Observable = this._overlayHoveredObservables$.pipe( - switchMap((overlayHoveredObservable) => (overlayHoveredObservable ? overlayHoveredObservable : of(false))) - ); - - public readonly state = this._state.asReadonly(); - public readonly side: Signal<'top' | 'bottom' | 'left' | 'right'> = toSignal( - this.positionChanges$.pipe( - map((change) => - // todo: better translation or adjusting hlm to take that into account - change.connectionPair.originY === 'center' - ? change.connectionPair.originX === 'start' - ? 'left' - : 'right' - : change.connectionPair.originY - ) - ), - { initialValue: 'bottom' } - ); - - public setConfig(config: BrnHoverCardOptions) { - this._config = config; - if (config['attachTo']) { - this._positionStrategy = this._psBuilder - .flexibleConnectedTo(config['attachTo']) - .withPositions( - config['attachPositions'] ?? config['align'] === 'top' ? topFirstPositions : bottomFirstPositions - ) - .withDefaultOffsetY(config['sideOffset'] ?? 0); - this._config = { - ...this._config, - positionStrategy: this._positionStrategy, - scrollStrategy: this._overlay.scrollStrategies.reposition(), - }; - this._positionChangesObservables$.next(this._positionStrategy.positionChanges); - } - this._overlayRef = this._overlay.create(this._config); - } - - public setContent(value: TemplateRef | BrnHoverCardContentDirective, vcr: ViewContainerRef) { - this._content.set(new TemplatePortal(value instanceof TemplateRef ? value : value.template, vcr)); - - if (!this._overlayRef) { - this._overlayRef = this._overlay.create(this._config); - } - } - - public setState(newState: 'open' | 'closed') { - this._state.set(newState); - } - - public show() { - const content = this._content(); - if (!content || !this._overlayRef) return; - - this._overlayRef?.detach(); - this._overlayRef?.attach(content); - - this._destroyed$ = new Subject(); - - this._overlayHoveredObservables$.next( - createHoverObservable(this._overlayRef.hostElement, this._zone, this._destroyed$) - ); - } - - public hide() { - this._overlayRef?.detach(); - this._destroyed$.next(); - this._destroyed$.complete(); - this._destroyed$ = new Subject(); - } + private readonly _overlay = inject(Overlay); + private readonly _zone = inject(NgZone); + private readonly _psBuilder = inject(OverlayPositionBuilder); + + private readonly _content = signal | null>(null); + private readonly _state = signal<'open' | 'closed'>('closed'); + + private _config: BrnHoverCardOptions = {}; + private _overlayRef?: OverlayRef; + private _positionStrategy?: FlexibleConnectedPositionStrategy; + private _destroyed$ = new Subject(); + + private _positionChangesObservables$ = new BehaviorSubject | undefined>( + undefined, + ); + private _overlayHoveredObservables$ = new BehaviorSubject | undefined>(undefined); + + public readonly positionChanges$: Observable = this._positionChangesObservables$.pipe( + switchMap((positionChangeObservable) => (positionChangeObservable ? positionChangeObservable : of(undefined))), + filter((change): change is NonNullable => change !== undefined && change !== null), + ); + public readonly hovered$: Observable = this._overlayHoveredObservables$.pipe( + switchMap((overlayHoveredObservable) => (overlayHoveredObservable ? overlayHoveredObservable : of(false))), + ); + + public readonly state = this._state.asReadonly(); + public readonly side: Signal<'top' | 'bottom' | 'left' | 'right'> = toSignal( + this.positionChanges$.pipe( + map((change) => + // todo: better translation or adjusting hlm to take that into account + change.connectionPair.originY === 'center' + ? change.connectionPair.originX === 'start' + ? 'left' + : 'right' + : change.connectionPair.originY, + ), + ), + { initialValue: 'bottom' }, + ); + + public setConfig(config: BrnHoverCardOptions) { + this._config = config; + if (config['attachTo']) { + this._positionStrategy = this._psBuilder + .flexibleConnectedTo(config['attachTo']) + .withPositions( + config['attachPositions'] ?? config['align'] === 'top' ? topFirstPositions : bottomFirstPositions, + ) + .withDefaultOffsetY(config['sideOffset'] ?? 0); + this._config = { + ...this._config, + positionStrategy: this._positionStrategy, + scrollStrategy: this._overlay.scrollStrategies.reposition(), + }; + this._positionChangesObservables$.next(this._positionStrategy.positionChanges); + } + this._overlayRef = this._overlay.create(this._config); + } + + public setContent(value: TemplateRef | BrnHoverCardContentDirective, vcr: ViewContainerRef) { + this._content.set(new TemplatePortal(value instanceof TemplateRef ? value : value.template, vcr)); + + if (!this._overlayRef) { + this._overlayRef = this._overlay.create(this._config); + } + } + + public setState(newState: 'open' | 'closed') { + this._state.set(newState); + } + + public show() { + const content = this._content(); + if (!content || !this._overlayRef) return; + + this._overlayRef?.detach(); + this._overlayRef?.attach(content); + + this._destroyed$ = new Subject(); + + this._overlayHoveredObservables$.next( + createHoverObservable(this._overlayRef.hostElement, this._zone, this._destroyed$), + ); + } + + public hide() { + this._overlayRef?.detach(); + this._destroyed$.next(); + this._destroyed$.complete(); + this._destroyed$ = new Subject(); + } } diff --git a/libs/ui/hover-card/brain/src/lib/brn-hover-card-trigger.directive.ts b/libs/ui/hover-card/brain/src/lib/brn-hover-card-trigger.directive.ts index 16e1ca1d1..201d1ea86 100644 --- a/libs/ui/hover-card/brain/src/lib/brn-hover-card-trigger.directive.ts +++ b/libs/ui/hover-card/brain/src/lib/brn-hover-card-trigger.directive.ts @@ -4,111 +4,111 @@ * Check them out! Give them a try! Leave a star! Their work is incredible! */ +import { FocusMonitor } from '@angular/cdk/a11y'; import { - Directive, - ElementRef, - inject, - Input, - NgZone, - OnDestroy, - OnInit, - TemplateRef, - ViewContainerRef, + Directive, + ElementRef, + inject, + Input, + NgZone, + OnDestroy, + OnInit, + TemplateRef, + ViewContainerRef, } from '@angular/core'; import { - delay, - distinctUntilChanged, - fromEvent, - map, - merge, - Observable, - of, - share, - Subject, - switchMap, - takeUntil, - tap, + delay, + distinctUntilChanged, + fromEvent, + map, + merge, + Observable, + of, + share, + Subject, + switchMap, + takeUntil, + tap, } from 'rxjs'; +import { BrnHoverCardContentDirective } from './brn-hover-card-content.directive'; import { BrnHoverCardContentService } from './brn-hover-card-content.service'; import { createHoverObservable } from './createHoverObservable'; -import { BrnHoverCardContentDirective } from './brn-hover-card-content.directive'; -import { FocusMonitor } from '@angular/cdk/a11y'; export function isElement(node?: Element | EventTarget | Node | null): node is Element { - return !!node && `nodeType` in node && node.nodeType === Node.ELEMENT_NODE; + return !!node && `nodeType` in node && node.nodeType === Node.ELEMENT_NODE; } @Directive({ - selector: '[brnHoverCardTrigger]:not(ng-container),[brnHoverCardTriggerFor]:not(ng-container)', - standalone: true, - exportAs: 'brnHoverCardTrigger', + selector: '[brnHoverCardTrigger]:not(ng-container),[brnHoverCardTriggerFor]:not(ng-container)', + standalone: true, + exportAs: 'brnHoverCardTrigger', }) export class BrnHoverCardTriggerDirective implements OnInit, OnDestroy { - private readonly _destroy$ = new Subject(); - private readonly _vcr = inject(ViewContainerRef); - private readonly _zone = inject(NgZone); - private readonly _el = inject(ElementRef); - private readonly _contentService = inject(BrnHoverCardContentService); - private readonly _focusMonitor = inject(FocusMonitor); + private readonly _destroy$ = new Subject(); + private readonly _vcr = inject(ViewContainerRef); + private readonly _zone = inject(NgZone); + private readonly _el = inject(ElementRef); + private readonly _contentService = inject(BrnHoverCardContentService); + private readonly _focusMonitor = inject(FocusMonitor); - public readonly focused$: Observable = this._focusMonitor.monitor(this._el).pipe(map((e) => e !== null)); + public readonly focused$: Observable = this._focusMonitor.monitor(this._el).pipe(map((e) => e !== null)); - public readonly hovered$: Observable = merge( - fromEvent(this._el.nativeElement, 'click').pipe(map(() => false)), - createHoverObservable(this._el.nativeElement, this._zone, this._destroy$), - this._contentService.hovered$, - this.focused$ - ).pipe(distinctUntilChanged()); - public readonly showing$: Observable = this.hovered$.pipe( - // we set the state to open here because we are about to open show the content - tap((visible) => visible && this._contentService.setState('open')), - switchMap((visible) => { - // we are delaying based on the configure-able input - return of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay)); - }), - switchMap((visible) => { - // don't do anything when we are in the process of showing the content - if (visible) return of(visible); - // we set the state to closed here to trigger any animations for the element leaving - this._contentService.setState('closed'); - // then delay to wait for the leaving animation to finish - return of(visible).pipe(delay(this.animationDelay)); - }), - distinctUntilChanged(), - share(), - takeUntil(this._destroy$) - ); + public readonly hovered$: Observable = merge( + fromEvent(this._el.nativeElement, 'click').pipe(map(() => false)), + createHoverObservable(this._el.nativeElement, this._zone, this._destroy$), + this._contentService.hovered$, + this.focused$, + ).pipe(distinctUntilChanged()); + public readonly showing$: Observable = this.hovered$.pipe( + // we set the state to open here because we are about to open show the content + tap((visible) => visible && this._contentService.setState('open')), + switchMap((visible) => { + // we are delaying based on the configure-able input + return of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay)); + }), + switchMap((visible) => { + // don't do anything when we are in the process of showing the content + if (visible) return of(visible); + // we set the state to closed here to trigger any animations for the element leaving + this._contentService.setState('closed'); + // then delay to wait for the leaving animation to finish + return of(visible).pipe(delay(this.animationDelay)); + }), + distinctUntilChanged(), + share(), + takeUntil(this._destroy$), + ); - @Input() - public showDelay = 300; - @Input() - public hideDelay = 500; - @Input() - public animationDelay = 100; - @Input() - public sideOffset = 5; + @Input() + public showDelay = 300; + @Input() + public hideDelay = 500; + @Input() + public animationDelay = 100; + @Input() + public sideOffset = 5; - @Input() - public align: 'top' | 'bottom' = 'bottom'; + @Input() + public align: 'top' | 'bottom' = 'bottom'; - @Input() - set brnHoverCardTriggerFor(value: TemplateRef | BrnHoverCardContentDirective) { - this._contentService.setContent(value, this._vcr); - } + @Input() + set brnHoverCardTriggerFor(value: TemplateRef | BrnHoverCardContentDirective) { + this._contentService.setContent(value, this._vcr); + } - public ngOnInit() { - this._contentService.setConfig({ attachTo: this._el, align: this.align, sideOffset: this.sideOffset }); - this.showing$.subscribe((isHovered) => { - if (isHovered) { - this._contentService.show(); - } else { - this._contentService.hide(); - } - }); - } + public ngOnInit() { + this._contentService.setConfig({ attachTo: this._el, align: this.align, sideOffset: this.sideOffset }); + this.showing$.subscribe((isHovered) => { + if (isHovered) { + this._contentService.show(); + } else { + this._contentService.hide(); + } + }); + } - public ngOnDestroy() { - this._destroy$.next(); - this._destroy$.complete(); - } + public ngOnDestroy() { + this._destroy$.next(); + this._destroy$.complete(); + } } diff --git a/libs/ui/hover-card/brain/src/lib/brn-hover-card.component.ts b/libs/ui/hover-card/brain/src/lib/brn-hover-card.component.ts index d687d6dc5..10df8be13 100644 --- a/libs/ui/hover-card/brain/src/lib/brn-hover-card.component.ts +++ b/libs/ui/hover-card/brain/src/lib/brn-hover-card.component.ts @@ -1,22 +1,24 @@ import { AfterContentInit, Component, ContentChild } from '@angular/core'; -import { BrnHoverCardTriggerDirective } from './brn-hover-card-trigger.directive'; import { BrnHoverCardContentDirective } from './brn-hover-card-content.directive'; import { BrnHoverCardContentService } from './brn-hover-card-content.service'; +import { BrnHoverCardTriggerDirective } from './brn-hover-card-trigger.directive'; @Component({ - selector: 'brn-hover-card', - standalone: true, - providers: [BrnHoverCardContentService], - template: ` `, + selector: 'brn-hover-card', + standalone: true, + providers: [BrnHoverCardContentService], + template: ` + + `, }) export class BrnHoverCardComponent implements AfterContentInit { - @ContentChild(BrnHoverCardTriggerDirective, { static: true }) - private _trigger?: BrnHoverCardTriggerDirective; - @ContentChild(BrnHoverCardContentDirective, { static: true }) - private _content?: BrnHoverCardContentDirective; + @ContentChild(BrnHoverCardTriggerDirective, { static: true }) + private _trigger?: BrnHoverCardTriggerDirective; + @ContentChild(BrnHoverCardContentDirective, { static: true }) + private _content?: BrnHoverCardContentDirective; - public ngAfterContentInit() { - if (!this._trigger || !this._content) return; - this._trigger.brnHoverCardTriggerFor = this._content; - } + public ngAfterContentInit() { + if (!this._trigger || !this._content) return; + this._trigger.brnHoverCardTriggerFor = this._content; + } } diff --git a/libs/ui/hover-card/brain/src/lib/createHoverObservable.ts b/libs/ui/hover-card/brain/src/lib/createHoverObservable.ts index b7620c238..993ccb51d 100644 --- a/libs/ui/hover-card/brain/src/lib/createHoverObservable.ts +++ b/libs/ui/hover-card/brain/src/lib/createHoverObservable.ts @@ -1,29 +1,29 @@ -import { distinctUntilChanged, filter, fromEvent, map, merge, Observable, Subject, takeUntil } from 'rxjs'; +import { NgZone } from '@angular/core'; import { brnZoneOptimized } from '@spartan-ng/ui-core'; +import { distinctUntilChanged, filter, fromEvent, map, merge, Observable, Subject, takeUntil } from 'rxjs'; import { isElement } from './brn-hover-card-trigger.directive'; -import { NgZone } from '@angular/core'; function movedOut({ currentTarget, relatedTarget }: MouseEvent): boolean { - return !isElement(relatedTarget) || !isElement(currentTarget) || !currentTarget.contains(relatedTarget); + return !isElement(relatedTarget) || !isElement(currentTarget) || !currentTarget.contains(relatedTarget); } export const createHoverObservable = ( - nativeElement: HTMLElement, - zone: NgZone, - destroyed$: Subject + nativeElement: HTMLElement, + zone: NgZone, + destroyed$: Subject, ): Observable => { - return merge( - fromEvent(nativeElement, `mouseenter`).pipe(map(() => true)), - fromEvent(nativeElement, `mouseleave`).pipe(map(() => false)), - // Hello, Safari - fromEvent(nativeElement, `mouseout`).pipe( - filter(movedOut), - map(() => false) - ), - /** - * NOTE: onmouseout events don't trigger when objects move under mouse in Safari - * https://bugs.webkit.org/show_bug.cgi?id=4117 - */ - fromEvent(nativeElement, `transitionend`).pipe(map(() => nativeElement.matches(`:hover`))) - ).pipe(distinctUntilChanged(), brnZoneOptimized(zone), takeUntil(destroyed$)); + return merge( + fromEvent(nativeElement, `mouseenter`).pipe(map(() => true)), + fromEvent(nativeElement, `mouseleave`).pipe(map(() => false)), + // Hello, Safari + fromEvent(nativeElement, `mouseout`).pipe( + filter(movedOut), + map(() => false), + ), + /** + * NOTE: onmouseout events don't trigger when objects move under mouse in Safari + * https://bugs.webkit.org/show_bug.cgi?id=4117 + */ + fromEvent(nativeElement, `transitionend`).pipe(map(() => nativeElement.matches(`:hover`))), + ).pipe(distinctUntilChanged(), brnZoneOptimized(zone), takeUntil(destroyed$)); }; diff --git a/libs/ui/hover-card/brain/src/test-setup.ts b/libs/ui/hover-card/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/hover-card/brain/src/test-setup.ts +++ b/libs/ui/hover-card/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/hover-card/brain/tsconfig.json b/libs/ui/hover-card/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/hover-card/brain/tsconfig.json +++ b/libs/ui/hover-card/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/hover-card/brain/tsconfig.lib.json b/libs/ui/hover-card/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/hover-card/brain/tsconfig.lib.json +++ b/libs/ui/hover-card/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/hover-card/brain/tsconfig.lib.prod.json b/libs/ui/hover-card/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/hover-card/brain/tsconfig.lib.prod.json +++ b/libs/ui/hover-card/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/hover-card/brain/tsconfig.spec.json b/libs/ui/hover-card/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/hover-card/brain/tsconfig.spec.json +++ b/libs/ui/hover-card/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/hover-card/helm/.eslintrc.json b/libs/ui/hover-card/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/hover-card/helm/.eslintrc.json +++ b/libs/ui/hover-card/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/hover-card/helm/jest.config.ts b/libs/ui/hover-card/helm/jest.config.ts index 9f86638dd..cd76af5bc 100644 --- a/libs/ui/hover-card/helm/jest.config.ts +++ b/libs/ui/hover-card/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-hover-card-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-hover-card-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/hover-card/helm/ng-package.json b/libs/ui/hover-card/helm/ng-package.json index 43766696f..597f7c924 100644 --- a/libs/ui/hover-card/helm/ng-package.json +++ b/libs/ui/hover-card/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/hover-card/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/hover-card/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/hover-card/helm/package.json b/libs/ui/hover-card/helm/package.json index c91b1b778..a58801ea4 100644 --- a/libs/ui/hover-card/helm/package.json +++ b/libs/ui/hover-card/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-hovercard-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-hovercard-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/hover-card/helm/project.json b/libs/ui/hover-card/helm/project.json index 5526864af..bba995310 100644 --- a/libs/ui/hover-card/helm/project.json +++ b/libs/ui/hover-card/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-hover-card-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/hover-card/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/hover-card/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/hover-card/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/hover-card/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/hover-card/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/hover-card/helm/**/*.ts", - "libs/ui/hover-card/helm/**/*.html", - "libs/ui/hover-card/helm/package.json", - "libs/ui/hover-card/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-hover-card-helm" - } - } - } + "name": "ui-hover-card-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/hover-card/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/hover-card/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/hover-card/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/hover-card/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/hover-card/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/hover-card/helm/**/*.ts", + "libs/ui/hover-card/helm/**/*.html", + "libs/ui/hover-card/helm/package.json", + "libs/ui/hover-card/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-hover-card-helm" + } + } + } } diff --git a/libs/ui/hover-card/helm/src/index.ts b/libs/ui/hover-card/helm/src/index.ts index e5eeb867e..3ee736acb 100644 --- a/libs/ui/hover-card/helm/src/index.ts +++ b/libs/ui/hover-card/helm/src/index.ts @@ -1,12 +1,12 @@ -import { HlmHoverCardContentDirective } from './lib/hlm-hover-card-content.directive'; import { NgModule } from '@angular/core'; +import { HlmHoverCardContentDirective } from './lib/hlm-hover-card-content.directive'; export { HlmHoverCardContentDirective } from './lib/hlm-hover-card-content.directive'; export const HlmHoverCardImports = [HlmHoverCardContentDirective] as const; @NgModule({ - imports: [...HlmHoverCardImports], - exports: [...HlmHoverCardImports], + imports: [...HlmHoverCardImports], + exports: [...HlmHoverCardImports], }) export class HlmHoverCardModule {} diff --git a/libs/ui/hover-card/helm/src/lib/hlm-hover-card-content.directive.ts b/libs/ui/hover-card/helm/src/lib/hlm-hover-card-content.directive.ts index 069898f3b..1992667ad 100644 --- a/libs/ui/hover-card/helm/src/lib/hlm-hover-card-content.directive.ts +++ b/libs/ui/hover-card/helm/src/lib/hlm-hover-card-content.directive.ts @@ -1,40 +1,40 @@ import { Directive, effect, ElementRef, HostBinding, inject, Input, Renderer2, signal } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ selector: '[hlmHoverCardContent]', standalone: true }) export class HlmHoverCardContentDirective { - private readonly _renderer = inject(Renderer2); - private readonly _element = inject(ElementRef); - private readonly _statusProvider = injectExposesStateProvider({ host: true }); - private readonly _sideProvider = injectExposedSideProvider({ host: true }); + private readonly _renderer = inject(Renderer2); + private readonly _element = inject(ElementRef); + private readonly _statusProvider = injectExposesStateProvider({ host: true }); + private readonly _sideProvider = injectExposedSideProvider({ host: true }); - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - public readonly state = this._statusProvider?.state ?? signal('closed').asReadonly(); - public readonly side = this._sideProvider?.side ?? signal('bottom').asReadonly(); + public readonly state = this._statusProvider?.state ?? signal('closed').asReadonly(); + public readonly side = this._sideProvider?.side ?? signal('bottom').asReadonly(); - constructor() { - effect(() => { - this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); - this._renderer.setAttribute(this._element.nativeElement, 'data-side', this.side()); - }); - } + constructor() { + effect(() => { + this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); + this._renderer.setAttribute(this._element.nativeElement, 'data-side', this.side()); + }); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm( - 'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none', - 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none', + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + this._inputs, + ); + } } diff --git a/libs/ui/hover-card/helm/src/test-setup.ts b/libs/ui/hover-card/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/hover-card/helm/src/test-setup.ts +++ b/libs/ui/hover-card/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/hover-card/helm/tsconfig.json b/libs/ui/hover-card/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/hover-card/helm/tsconfig.json +++ b/libs/ui/hover-card/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/hover-card/helm/tsconfig.lib.json b/libs/ui/hover-card/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/hover-card/helm/tsconfig.lib.json +++ b/libs/ui/hover-card/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/hover-card/helm/tsconfig.lib.prod.json b/libs/ui/hover-card/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/hover-card/helm/tsconfig.lib.prod.json +++ b/libs/ui/hover-card/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/hover-card/helm/tsconfig.spec.json b/libs/ui/hover-card/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/hover-card/helm/tsconfig.spec.json +++ b/libs/ui/hover-card/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/hover-card/hover-card.stories.ts b/libs/ui/hover-card/hover-card.stories.ts index 177f692e0..5625d4563 100644 --- a/libs/ui/hover-card/hover-card.stories.ts +++ b/libs/ui/hover-card/hover-card.stories.ts @@ -1,59 +1,59 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { Component } from '@angular/core'; -import { BrnHoverCardModule } from './brain/src'; -import { HlmButtonDirective } from '../button/helm/src'; -import { HlmIconComponent } from '../icon/helm/src'; -import { HlmAvatarModule } from '../avatar/helm/src'; import { provideIcons } from '@ng-icons/core'; import { radixCalendar } from '@ng-icons/radix-icons'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { HlmAvatarModule } from '../avatar/helm/src'; +import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; +import { BrnHoverCardModule } from './brain/src'; import { HlmHoverCardModule } from './helm/src'; @Component({ - selector: 'hover-card-example', - standalone: true, - imports: [BrnHoverCardModule, HlmHoverCardModule, HlmButtonDirective, HlmIconComponent, HlmAvatarModule], - providers: [provideIcons({ radixCalendar })], - host: { - class: 'flex w-full h-full justify-center py-80', - }, - template: ` - - -
-
- - AnalogLogo - AN - -
-

@analogjs

-

The Angular meta-framework – build Angular applications faster.

-
- - Joined December 2021 -
-
-
-
- - `, + selector: 'hover-card-example', + standalone: true, + imports: [BrnHoverCardModule, HlmHoverCardModule, HlmButtonDirective, HlmIconComponent, HlmAvatarModule], + providers: [provideIcons({ radixCalendar })], + host: { + class: 'flex w-full h-full justify-center py-80', + }, + template: ` + + +
+
+ + AnalogLogo + AN + +
+

@analogjs

+

The Angular meta-framework – build Angular applications faster.

+
+ + Joined December 2021 +
+
+
+
+ + `, }) class HoverCardExampleComponent {} const meta: Meta<{}> = { - title: 'Hover Card', - decorators: [ - moduleMetadata({ - imports: [HoverCardExampleComponent], - }), - ], + title: 'Hover Card', + decorators: [ + moduleMetadata({ + imports: [HoverCardExampleComponent], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ``, - }), + render: () => ({ + template: ``, + }), }; diff --git a/libs/ui/icon/helm/.eslintrc.json b/libs/ui/icon/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/icon/helm/.eslintrc.json +++ b/libs/ui/icon/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/icon/helm/jest.config.ts b/libs/ui/icon/helm/jest.config.ts index d0ee633d8..a8513f5bb 100644 --- a/libs/ui/icon/helm/jest.config.ts +++ b/libs/ui/icon/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-icon-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/ui/icon/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-icon-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/ui/icon/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/icon/helm/ng-package.json b/libs/ui/icon/helm/ng-package.json index 7f565ce35..e1348c8e4 100644 --- a/libs/ui/icon/helm/ng-package.json +++ b/libs/ui/icon/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/icon/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/icon/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/icon/helm/package.json b/libs/ui/icon/helm/package.json index b94b90774..57b334579 100644 --- a/libs/ui/icon/helm/package.json +++ b/libs/ui/icon/helm/package.json @@ -1,16 +1,16 @@ { - "name": "@spartan-ng/ui-icon-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@ng-icons/core": "^25.1.0", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-icon-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@ng-icons/core": "^25.1.0", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/icon/helm/project.json b/libs/ui/icon/helm/project.json index 3c51809d6..4abba306a 100644 --- a/libs/ui/icon/helm/project.json +++ b/libs/ui/icon/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-icon-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/icon/helm/src", - "prefix": "hlm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/icon/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/icon/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/icon/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/icon/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/icon/helm/**/*.ts", - "libs/ui/icon/helm/**/*.html", - "libs/ui/icon/helm/package.json", - "libs/ui/icon/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-icon-helm" - } - } - } + "name": "ui-icon-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/icon/helm/src", + "prefix": "hlm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/icon/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/icon/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/icon/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/icon/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/icon/helm/**/*.ts", + "libs/ui/icon/helm/**/*.html", + "libs/ui/icon/helm/package.json", + "libs/ui/icon/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-icon-helm" + } + } + } } diff --git a/libs/ui/icon/helm/src/index.ts b/libs/ui/icon/helm/src/index.ts index 7aa968b34..9f814c4f3 100644 --- a/libs/ui/icon/helm/src/index.ts +++ b/libs/ui/icon/helm/src/index.ts @@ -7,7 +7,7 @@ export * from './lib/hlm-icon.component'; export const provideIcons = provideIconsImport; @NgModule({ - imports: [HlmIconComponent], - exports: [HlmIconComponent], + imports: [HlmIconComponent], + exports: [HlmIconComponent], }) export class HlmIconModule {} diff --git a/libs/ui/icon/helm/src/lib/hlm-icon.component.spec.ts b/libs/ui/icon/helm/src/lib/hlm-icon.component.spec.ts index dead4cfdb..c0396d139 100644 --- a/libs/ui/icon/helm/src/lib/hlm-icon.component.spec.ts +++ b/libs/ui/icon/helm/src/lib/hlm-icon.component.spec.ts @@ -6,57 +6,59 @@ import { RenderResult, render } from '@testing-library/angular'; import { HlmIconComponent } from './hlm-icon.component'; @Component({ - selector: 'hlm-mock', - standalone: true, - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [HlmIconComponent], - providers: [provideIcons({ radixCheck })], - template: ``, + selector: 'hlm-mock', + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [HlmIconComponent], + providers: [provideIcons({ radixCheck })], + template: ` + + `, }) class HlmMockComponent { - @Input() size = 'base'; + @Input() size = 'base'; } describe('HlmIconComponent', () => { - let r: RenderResult; - - beforeEach(async () => { - r = await render(HlmMockComponent); - }); - - it('should create', () => { - expect(r).toBeTruthy(); - }); - - it('should render the icon', () => { - expect(r.container.querySelector('svg')).toBeTruthy(); - }); - - it('should pass the size, color and strokeWidth props and the classes to the ng-icon component', () => { - const debugEl = r.fixture.debugElement.query(By.directive(NgIconComponent)); - const component = debugEl.componentInstance as NgIconComponent; - expect(component.color).toBe('red'); - expect(component.strokeWidth).toBe('2'); - expect(component.size).toBe('100%'); - expect(debugEl.nativeElement.classList).toContain('test2'); - }); - - it('should add the appropriate size variant class', () => { - expect(r.container.querySelector('hlm-icon')?.classList).toContain('h-6'); - expect(r.container.querySelector('hlm-icon')?.classList).toContain('w-6'); - }); - - it('should compose the user classes', () => { - expect(r.container.querySelector('hlm-icon')?.classList).toContain('inline-flex'); - expect(r.container.querySelector('hlm-icon')?.classList).toContain('test'); - }); - - it('should forward the size property if the size is not a pre-defined size', async () => { - await r.rerender({ componentInputs: { size: '2rem' } }); - r.fixture.detectChanges(); - const debugEl = r.fixture.debugElement.query(By.directive(NgIconComponent)); - expect(debugEl.componentInstance.size).toBe('2rem'); - expect(r.container.querySelector('hlm-icon')?.classList).not.toContain('h-6'); - expect(r.container.querySelector('hlm-icon')?.classList).not.toContain('w-6'); - }); + let r: RenderResult; + + beforeEach(async () => { + r = await render(HlmMockComponent); + }); + + it('should create', () => { + expect(r).toBeTruthy(); + }); + + it('should render the icon', () => { + expect(r.container.querySelector('svg')).toBeTruthy(); + }); + + it('should pass the size, color and strokeWidth props and the classes to the ng-icon component', () => { + const debugEl = r.fixture.debugElement.query(By.directive(NgIconComponent)); + const component = debugEl.componentInstance as NgIconComponent; + expect(component.color).toBe('red'); + expect(component.strokeWidth).toBe('2'); + expect(component.size).toBe('100%'); + expect(debugEl.nativeElement.classList).toContain('test2'); + }); + + it('should add the appropriate size variant class', () => { + expect(r.container.querySelector('hlm-icon')?.classList).toContain('h-6'); + expect(r.container.querySelector('hlm-icon')?.classList).toContain('w-6'); + }); + + it('should compose the user classes', () => { + expect(r.container.querySelector('hlm-icon')?.classList).toContain('inline-flex'); + expect(r.container.querySelector('hlm-icon')?.classList).toContain('test'); + }); + + it('should forward the size property if the size is not a pre-defined size', async () => { + await r.rerender({ componentInputs: { size: '2rem' } }); + r.fixture.detectChanges(); + const debugEl = r.fixture.debugElement.query(By.directive(NgIconComponent)); + expect(debugEl.componentInstance.size).toBe('2rem'); + expect(r.container.querySelector('hlm-icon')?.classList).not.toContain('h-6'); + expect(r.container.querySelector('hlm-icon')?.classList).not.toContain('w-6'); + }); }); diff --git a/libs/ui/icon/helm/src/lib/hlm-icon.component.ts b/libs/ui/icon/helm/src/lib/hlm-icon.component.ts index c34d655bb..46a06b7a6 100644 --- a/libs/ui/icon/helm/src/lib/hlm-icon.component.ts +++ b/libs/ui/icon/helm/src/lib/hlm-icon.component.ts @@ -9,86 +9,88 @@ const DEFINED_SIZES = ['xs', 'sm', 'base', 'lg', 'xl', 'none'] as const; type DefinedSizes = (typeof DEFINED_SIZES)[number]; const iconVariants = cva('inline-flex', { - variants: { - variant: { - xs: 'h-3 w-3', - sm: 'h-4 w-4', - base: 'h-6 w-6', - lg: 'h-8 w-8', - xl: 'h-12 w-12', - none: '', - } satisfies Record, - }, - defaultVariants: { - variant: 'base', - }, + variants: { + variant: { + xs: 'h-3 w-3', + sm: 'h-4 w-4', + base: 'h-6 w-6', + lg: 'h-8 w-8', + xl: 'h-12 w-12', + none: '', + } satisfies Record, + }, + defaultVariants: { + variant: 'base', + }, }); export type IconSize = DefinedSizes | string; const isDefinedSize = (size: IconSize): size is DefinedSizes => { - return DEFINED_SIZES.includes(size as DefinedSizes); + return DEFINED_SIZES.includes(size as DefinedSizes); }; @Component({ - selector: 'hlm-icon', - standalone: true, - imports: [NgIconComponent], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - template: ``, - host: { - '[class]': 'generatedClasses()', - }, + selector: 'hlm-icon', + standalone: true, + imports: [NgIconComponent], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` + + `, + host: { + '[class]': 'generatedClasses()', + }, }) export class HlmIconComponent { - protected readonly _name = signal(''); - protected readonly _size = signal('base'); - protected readonly _color = signal(undefined); - protected readonly _strokeWidth = signal(undefined); - protected readonly userCls = signal(''); - protected readonly ngIconSize = computed(() => (isDefinedSize(this._size()) ? '100%' : (this._size() as string))); - protected readonly ngIconCls = signal(''); + protected readonly _name = signal(''); + protected readonly _size = signal('base'); + protected readonly _color = signal(undefined); + protected readonly _strokeWidth = signal(undefined); + protected readonly userCls = signal(''); + protected readonly ngIconSize = computed(() => (isDefinedSize(this._size()) ? '100%' : (this._size() as string))); + protected readonly ngIconCls = signal(''); - protected readonly generatedClasses = computed(() => { - const size: IconSize = this._size(); - const variant = isDefinedSize(size) ? size : 'none'; - return hlm(iconVariants({ variant }), this.userCls()); - }); + protected readonly generatedClasses = computed(() => { + const size: IconSize = this._size(); + const variant = isDefinedSize(size) ? size : 'none'; + return hlm(iconVariants({ variant }), this.userCls()); + }); - @Input({ required: true }) - set name(value: IconName | string) { - this._name.set(value); - } + @Input({ required: true }) + set name(value: IconName | string) { + this._name.set(value); + } - @Input() - set size(value: IconSize) { - this._size.set(value); - } + @Input() + set size(value: IconSize) { + this._size.set(value); + } - @Input() - set color(value: string | undefined) { - this._color.set(value); - } + @Input() + set color(value: string | undefined) { + this._color.set(value); + } - @Input() - set strokeWidth(value: string | number | undefined) { - this._strokeWidth.set(value); - } + @Input() + set strokeWidth(value: string | number | undefined) { + this._strokeWidth.set(value); + } - @Input() - set ngIconClass(cls: ClassValue) { - this.ngIconCls.set(cls); - } + @Input() + set ngIconClass(cls: ClassValue) { + this.ngIconCls.set(cls); + } - @Input() - set class(cls: ClassValue) { - this.userCls.set(cls); - } + @Input() + set class(cls: ClassValue) { + this.userCls.set(cls); + } } diff --git a/libs/ui/icon/helm/src/test-setup.ts b/libs/ui/icon/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/icon/helm/src/test-setup.ts +++ b/libs/ui/icon/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/icon/helm/tsconfig.json b/libs/ui/icon/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/icon/helm/tsconfig.json +++ b/libs/ui/icon/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/icon/helm/tsconfig.lib.json b/libs/ui/icon/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/icon/helm/tsconfig.lib.json +++ b/libs/ui/icon/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/icon/helm/tsconfig.lib.prod.json b/libs/ui/icon/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/icon/helm/tsconfig.lib.prod.json +++ b/libs/ui/icon/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/icon/helm/tsconfig.spec.json b/libs/ui/icon/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/icon/helm/tsconfig.spec.json +++ b/libs/ui/icon/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/icon/icon.stories.ts b/libs/ui/icon/icon.stories.ts index 133602241..90388f2cf 100644 --- a/libs/ui/icon/icon.stories.ts +++ b/libs/ui/icon/icon.stories.ts @@ -3,53 +3,53 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmIconComponent, provideIcons } from './helm/src'; type IconProps = { - name: string; - size: string; - color: string; - strokeWidth: number; - className: string; + name: string; + size: string; + color: string; + strokeWidth: number; + className: string; }; const meta: Meta = { - title: 'Icon', - decorators: [ - moduleMetadata({ - imports: [HlmIconComponent], - providers: [provideIcons(radixIcons)], - }), - ], + title: 'Icon', + decorators: [ + moduleMetadata({ + imports: [HlmIconComponent], + providers: [provideIcons(radixIcons)], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - render: ({ name, size, color, strokeWidth, className }) => ({ - template: ``, - }), - args: { - name: 'radixCheck', - size: 'sm', - color: 'red', - className: '', - strokeWidth: 1, - }, - argTypes: { - size: { control: 'select', options: ['xs', 'sm', 'base', 'lg', 'xl', 'none', '2rem', '25px', '10'] }, - name: { control: 'select', options: Object.keys(radixIcons) }, - color: { control: 'color' }, - }, + render: ({ name, size, color, strokeWidth, className }) => ({ + template: ``, + }), + args: { + name: 'radixCheck', + size: 'sm', + color: 'red', + className: '', + strokeWidth: 1, + }, + argTypes: { + size: { control: 'select', options: ['xs', 'sm', 'base', 'lg', 'xl', 'none', '2rem', '25px', '10'] }, + name: { control: 'select', options: Object.keys(radixIcons) }, + color: { control: 'color' }, + }, }; export const Tailwind: Story = { - render: ({ name, className }) => ({ - template: ``, - }), - args: { - className: 'text-red-600 text-5xl', - name: 'radixCheck', - }, - argTypes: { - name: { control: 'select', options: Object.keys(radixIcons) }, - }, + render: ({ name, className }) => ({ + template: ``, + }), + args: { + className: 'text-red-600 text-5xl', + name: 'radixCheck', + }, + argTypes: { + name: { control: 'select', options: Object.keys(radixIcons) }, + }, }; diff --git a/libs/ui/input/helm/.eslintrc.json b/libs/ui/input/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/input/helm/.eslintrc.json +++ b/libs/ui/input/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/input/helm/jest.config.ts b/libs/ui/input/helm/jest.config.ts index c186af73d..d4d661bf5 100644 --- a/libs/ui/input/helm/jest.config.ts +++ b/libs/ui/input/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-input-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/button/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-input-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/button/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/input/helm/ng-package.json b/libs/ui/input/helm/ng-package.json index 2642c521e..6ed3201aa 100644 --- a/libs/ui/input/helm/ng-package.json +++ b/libs/ui/input/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/input/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/input/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/input/helm/package.json b/libs/ui/input/helm/package.json index 923c2d845..c3b3b51d3 100644 --- a/libs/ui/input/helm/package.json +++ b/libs/ui/input/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-input-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-input-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/input/helm/project.json b/libs/ui/input/helm/project.json index d92e1fad6..a481564db 100644 --- a/libs/ui/input/helm/project.json +++ b/libs/ui/input/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-input-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/input/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/input/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/input/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/input/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/input/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/input/helm/**/*.ts", - "libs/ui/input/helm/**/*.html", - "libs/ui/input/helm/package.json", - "libs/ui/input/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-input-helm" - } - } - } + "name": "ui-input-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/input/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/input/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/input/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/input/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/input/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/input/helm/**/*.ts", + "libs/ui/input/helm/**/*.html", + "libs/ui/input/helm/package.json", + "libs/ui/input/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-input-helm" + } + } + } } diff --git a/libs/ui/input/helm/src/index.ts b/libs/ui/input/helm/src/index.ts index 53c264591..3bf4bec12 100644 --- a/libs/ui/input/helm/src/index.ts +++ b/libs/ui/input/helm/src/index.ts @@ -1,12 +1,12 @@ import { NgModule } from '@angular/core'; -import { HlmInputDirective } from './lib/hlm-input.directive'; import { HlmInputErrorDirective } from './lib/hlm-input-error.directive'; +import { HlmInputDirective } from './lib/hlm-input.directive'; -export * from './lib/hlm-input.directive'; export * from './lib/hlm-input-error.directive'; +export * from './lib/hlm-input.directive'; @NgModule({ - imports: [HlmInputDirective, HlmInputErrorDirective], - exports: [HlmInputDirective, HlmInputErrorDirective], + imports: [HlmInputDirective, HlmInputErrorDirective], + exports: [HlmInputDirective, HlmInputErrorDirective], }) export class HlmInputModule {} diff --git a/libs/ui/input/helm/src/lib/hlm-input-error.directive.ts b/libs/ui/input/helm/src/lib/hlm-input-error.directive.ts index 9b20c79d8..07f2f28e8 100644 --- a/libs/ui/input/helm/src/lib/hlm-input-error.directive.ts +++ b/libs/ui/input/helm/src/lib/hlm-input-error.directive.ts @@ -1,31 +1,31 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const inputErrorVariants = cva('text-destructive text-sm font-medium', { - variants: {}, - defaultVariants: {}, + variants: {}, + defaultVariants: {}, }); export type InputErrorVariants = VariantProps; @Directive({ - selector: '[hlmInputError]', - standalone: true, + selector: '[hlmInputError]', + standalone: true, }) export class HlmInputErrorDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(inputErrorVariants(), this._inputs); - } + private generateClasses() { + return hlm(inputErrorVariants(), this._inputs); + } } diff --git a/libs/ui/input/helm/src/lib/hlm-input.directive.ts b/libs/ui/input/helm/src/lib/hlm-input.directive.ts index 2ddffa0ce..b2c3aa496 100644 --- a/libs/ui/input/helm/src/lib/hlm-input.directive.ts +++ b/libs/ui/input/helm/src/lib/hlm-input.directive.ts @@ -1,69 +1,69 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const inputVariants = cva( - 'flex rounded-md border font-normal border-input bg-transparent text-sm ring-offset-background file:border-0 file:text-foreground file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', - { - variants: { - size: { - default: 'h-10 py-2 px-4', - sm: 'h-9 px-3', - lg: 'h-11 px-8', - }, - error: { - auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive', - true: 'text-destructive border-destructive focus-visible:ring-destructive', - }, - }, - defaultVariants: { - size: 'default', - error: 'auto', - }, - } + 'flex rounded-md border font-normal border-input bg-transparent text-sm ring-offset-background file:border-0 file:text-foreground file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', + { + variants: { + size: { + default: 'h-10 py-2 px-4', + sm: 'h-9 px-3', + lg: 'h-11 px-8', + }, + error: { + auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive', + true: 'text-destructive border-destructive focus-visible:ring-destructive', + }, + }, + defaultVariants: { + size: 'default', + error: 'auto', + }, + }, ); type InputVariants = VariantProps; @Directive({ - selector: '[hlmInput]', - standalone: true, + selector: '[hlmInput]', + standalone: true, }) export class HlmInputDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - private _size: InputVariants['size'] = 'default'; - @Input() - get size(): InputVariants['size'] { - return this._size; - } + private _size: InputVariants['size'] = 'default'; + @Input() + get size(): InputVariants['size'] { + return this._size; + } - set size(value: InputVariants['size']) { - this._size = value; - this._class = this.generateClasses(); - } + set size(value: InputVariants['size']) { + this._size = value; + this._class = this.generateClasses(); + } - private _error: InputVariants['error'] = 'auto'; - @Input() - get error(): InputVariants['error'] { - return this._error; - } + private _error: InputVariants['error'] = 'auto'; + @Input() + get error(): InputVariants['error'] { + return this._error; + } - set error(value: InputVariants['error']) { - this._error = value; - this._class = this.generateClasses(); - } + set error(value: InputVariants['error']) { + this._error = value; + this._class = this.generateClasses(); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(inputVariants({ size: this._size, error: this._error }), this._inputs); - } + private generateClasses() { + return hlm(inputVariants({ size: this._size, error: this._error }), this._inputs); + } } diff --git a/libs/ui/input/helm/src/test-setup.ts b/libs/ui/input/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/input/helm/src/test-setup.ts +++ b/libs/ui/input/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/input/helm/tsconfig.json b/libs/ui/input/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/input/helm/tsconfig.json +++ b/libs/ui/input/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/input/helm/tsconfig.lib.json b/libs/ui/input/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/input/helm/tsconfig.lib.json +++ b/libs/ui/input/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/input/helm/tsconfig.lib.prod.json b/libs/ui/input/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/input/helm/tsconfig.lib.prod.json +++ b/libs/ui/input/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/input/helm/tsconfig.spec.json b/libs/ui/input/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/input/helm/tsconfig.spec.json +++ b/libs/ui/input/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/input/input.stories.ts b/libs/ui/input/input.stories.ts index 9de622f08..c5123ab4b 100644 --- a/libs/ui/input/input.stories.ts +++ b/libs/ui/input/input.stories.ts @@ -1,72 +1,72 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { FormsModule } from '@angular/forms'; -import { HlmInputDirective } from './helm/src'; -import { HlmLabelDirective } from '../label/helm/src'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmLabelDirective } from '../label/helm/src'; +import { HlmInputDirective } from './helm/src'; const meta: Meta<{}> = { - title: 'Input', - decorators: [ - moduleMetadata({ - imports: [HlmInputDirective, HlmLabelDirective, HlmButtonDirective, FormsModule], - }), - ], + title: 'Input', + decorators: [ + moduleMetadata({ + imports: [HlmInputDirective, HlmLabelDirective, HlmButtonDirective, FormsModule], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` `, - }), + }), }; export const File: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
`, - }), + }), }; export const Disabled: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` `, - }), + }), }; export const Required: Story = { - render: () => ({ - props: { value: '' }, - template: ` + render: () => ({ + props: { value: '' }, + template: ` `, - }), + }), }; export const Error: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` `, - }), + }), }; export const WithButton: Story = { - name: 'With Button', - render: () => ({ - template: ` + name: 'With Button', + render: () => ({ + template: `
`, - }), + }), }; diff --git a/libs/ui/label/helm/.eslintrc.json b/libs/ui/label/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/label/helm/.eslintrc.json +++ b/libs/ui/label/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/label/helm/jest.config.ts b/libs/ui/label/helm/jest.config.ts index b83d0001b..f8accf6c9 100644 --- a/libs/ui/label/helm/jest.config.ts +++ b/libs/ui/label/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-label-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/button/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-label-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/button/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/label/helm/ng-package.json b/libs/ui/label/helm/ng-package.json index e42ece0db..06dd22f8f 100644 --- a/libs/ui/label/helm/ng-package.json +++ b/libs/ui/label/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/label/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/label/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/label/helm/package.json b/libs/ui/label/helm/package.json index f216729c5..34fad96f0 100644 --- a/libs/ui/label/helm/package.json +++ b/libs/ui/label/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-label-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-label-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/label/helm/project.json b/libs/ui/label/helm/project.json index 3470bf563..e500141a4 100644 --- a/libs/ui/label/helm/project.json +++ b/libs/ui/label/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-label-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/label/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/label/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/label/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/label/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/label/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/label/helm/**/*.ts", - "libs/ui/label/helm/**/*.html", - "libs/ui/label/helm/package.json", - "libs/ui/label/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-label-helm" - } - } - } + "name": "ui-label-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/label/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/label/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/label/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/label/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/label/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/label/helm/**/*.ts", + "libs/ui/label/helm/**/*.html", + "libs/ui/label/helm/package.json", + "libs/ui/label/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-label-helm" + } + } + } } diff --git a/libs/ui/label/helm/src/index.ts b/libs/ui/label/helm/src/index.ts index 815a0861f..a5506be06 100644 --- a/libs/ui/label/helm/src/index.ts +++ b/libs/ui/label/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmLabelDirective } from './lib/hlm-label.directive'; export * from './lib/hlm-label.directive'; @NgModule({ - imports: [HlmLabelDirective], - exports: [HlmLabelDirective], + imports: [HlmLabelDirective], + exports: [HlmLabelDirective], }) export class HlmLabelModule {} diff --git a/libs/ui/label/helm/src/lib/hlm-label.directive.ts b/libs/ui/label/helm/src/lib/hlm-label.directive.ts index 3333760de..8171a906d 100644 --- a/libs/ui/label/helm/src/lib/hlm-label.directive.ts +++ b/libs/ui/label/helm/src/lib/hlm-label.directive.ts @@ -1,68 +1,68 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; import { ClassValue } from 'clsx'; const labelVariants = cva( - 'text-sm font-medium leading-none [&:has([hlmInput]:disabled)]:cursor-not-allowed [&:has([hlmInput]:disabled)]:opacity-70', - { - variants: { - variant: { - default: '', - }, - error: { - auto: '[&:has([hlmInput].ng-invalid.ng-touched)]:text-destructive', - true: 'text-destructive', - }, - }, - defaultVariants: { - variant: 'default', - error: 'auto', - }, - } + 'text-sm font-medium leading-none [&:has([hlmInput]:disabled)]:cursor-not-allowed [&:has([hlmInput]:disabled)]:opacity-70', + { + variants: { + variant: { + default: '', + }, + error: { + auto: '[&:has([hlmInput].ng-invalid.ng-touched)]:text-destructive', + true: 'text-destructive', + }, + }, + defaultVariants: { + variant: 'default', + error: 'auto', + }, + }, ); export type LabelVariants = VariantProps; @Directive({ - selector: '[hlmLabel]', - standalone: true, + selector: '[hlmLabel]', + standalone: true, }) export class HlmLabelDirective { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - private _variant: LabelVariants['variant'] = 'default'; + private _variant: LabelVariants['variant'] = 'default'; - @Input() - get variant(): LabelVariants['variant'] { - return this._variant; - } + @Input() + get variant(): LabelVariants['variant'] { + return this._variant; + } - set variant(value: LabelVariants['variant']) { - this._variant = value; - this._class = this.generateClasses(); - } + set variant(value: LabelVariants['variant']) { + this._variant = value; + this._class = this.generateClasses(); + } - private _error: LabelVariants['error'] = 'auto'; - @Input() - get error(): LabelVariants['error'] { - return this._error; - } + private _error: LabelVariants['error'] = 'auto'; + @Input() + get error(): LabelVariants['error'] { + return this._error; + } - set error(value: LabelVariants['error']) { - this._error = value; - this._class = this.generateClasses(); - } + set error(value: LabelVariants['error']) { + this._error = value; + this._class = this.generateClasses(); + } - @Input() - set class(labels: ClassValue) { - this._inputs = labels; - this._class = this.generateClasses(); - } + @Input() + set class(labels: ClassValue) { + this._inputs = labels; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(labelVariants({ variant: this._variant, error: this._error }), this._inputs); - } + private generateClasses() { + return hlm(labelVariants({ variant: this._variant, error: this._error }), this._inputs); + } } diff --git a/libs/ui/label/helm/src/test-setup.ts b/libs/ui/label/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/label/helm/src/test-setup.ts +++ b/libs/ui/label/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/label/helm/tsconfig.json b/libs/ui/label/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/label/helm/tsconfig.json +++ b/libs/ui/label/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/label/helm/tsconfig.lib.json b/libs/ui/label/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/label/helm/tsconfig.lib.json +++ b/libs/ui/label/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/label/helm/tsconfig.lib.prod.json b/libs/ui/label/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/label/helm/tsconfig.lib.prod.json +++ b/libs/ui/label/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/label/helm/tsconfig.spec.json b/libs/ui/label/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/label/helm/tsconfig.spec.json +++ b/libs/ui/label/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/label/label.stories.ts b/libs/ui/label/label.stories.ts index 9d489de88..21fcb443f 100644 --- a/libs/ui/label/label.stories.ts +++ b/libs/ui/label/label.stories.ts @@ -1,37 +1,37 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { FormsModule } from '@angular/forms'; -import { HlmLabelDirective } from './helm/src'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmInputDirective } from '../input/helm/src'; +import { HlmLabelDirective } from './helm/src'; const meta: Meta<{}> = { - title: 'Label', - decorators: [ - moduleMetadata({ - imports: [HlmInputDirective, HlmLabelDirective, FormsModule], - }), - ], + title: 'Label', + decorators: [ + moduleMetadata({ + imports: [HlmInputDirective, HlmLabelDirective, FormsModule], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` `, - }), + }), }; export const InputRequired: Story = { - render: () => ({ - props: { value: '' }, - template: ` + render: () => ({ + props: { value: '' }, + template: ` `, - }), + }), }; diff --git a/libs/ui/menu/brain/.eslintrc.json b/libs/ui/menu/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/menu/brain/.eslintrc.json +++ b/libs/ui/menu/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/menu/brain/jest.config.ts b/libs/ui/menu/brain/jest.config.ts index 260668927..132d1376b 100644 --- a/libs/ui/menu/brain/jest.config.ts +++ b/libs/ui/menu/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-menu-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-menu-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/menu/brain/ng-package.json b/libs/ui/menu/brain/ng-package.json index 841193781..9849432b3 100644 --- a/libs/ui/menu/brain/ng-package.json +++ b/libs/ui/menu/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/menu/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/menu/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/menu/brain/package.json b/libs/ui/menu/brain/package.json index 6b19fe24b..e0b90ea0a 100644 --- a/libs/ui/menu/brain/package.json +++ b/libs/ui/menu/brain/package.json @@ -1,13 +1,13 @@ { - "name": "@spartan-ng/ui-menu-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@angular/cdk": "17.0.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-menu-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@angular/cdk": "17.0.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/menu/brain/project.json b/libs/ui/menu/brain/project.json index 90cdfee84..25017e7ff 100644 --- a/libs/ui/menu/brain/project.json +++ b/libs/ui/menu/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-menu-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/menu/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/menu/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/menu/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/menu/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/menu/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/menu/brain/**/*.ts", - "libs/ui/menu/brain/**/*.html", - "libs/ui/menu/brain/package.json", - "libs/ui/menu/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-menu-brain" - } - } - } + "name": "ui-menu-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/menu/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/menu/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/menu/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/menu/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/menu/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/menu/brain/**/*.ts", + "libs/ui/menu/brain/**/*.html", + "libs/ui/menu/brain/package.json", + "libs/ui/menu/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-menu-brain" + } + } + } } diff --git a/libs/ui/menu/brain/src/index.ts b/libs/ui/menu/brain/src/index.ts index 8c2c6ff6a..cc1e985ae 100644 --- a/libs/ui/menu/brain/src/index.ts +++ b/libs/ui/menu/brain/src/index.ts @@ -1,53 +1,53 @@ import { NgModule } from '@angular/core'; -import { BrnMenuTriggerDirective } from './lib/brn-menu-trigger.directive'; -import { BrnMenuDirective } from './lib/brn-menu.directive'; -import { BrnMenuGroupDirective } from './lib/brn-menu-group.directive'; -import { BrnMenuItemDirective } from './lib/brn-menu-item.directive'; -import { BrnMenuBarDirective } from './lib/brn-menu-bar.directive'; import { BrnContextMenuTriggerDirective } from './lib/brn-context-menu-trigger.directive'; -import { BrnMenuItemRadioDirective } from './lib/brn-menu-item-radio.directive'; +import { BrnMenuBarDirective } from './lib/brn-menu-bar.directive'; +import { BrnMenuGroupDirective } from './lib/brn-menu-group.directive'; import { BrnMenuItemCheckboxDirective } from './lib/brn-menu-item-checkbox.directive'; +import { BrnMenuItemRadioDirective } from './lib/brn-menu-item-radio.directive'; +import { BrnMenuItemDirective } from './lib/brn-menu-item.directive'; +import { BrnMenuTriggerDirective } from './lib/brn-menu-trigger.directive'; +import { BrnMenuDirective } from './lib/brn-menu.directive'; -export * from './lib/brn-menu-trigger.directive'; export * from './lib/brn-context-menu-trigger.directive'; -export * from './lib/brn-menu.directive'; export * from './lib/brn-menu-bar.directive'; export * from './lib/brn-menu-group.directive'; -export * from './lib/brn-menu-item.directive'; -export * from './lib/brn-menu-item-radio.directive'; export * from './lib/brn-menu-item-checkbox.directive'; +export * from './lib/brn-menu-item-radio.directive'; +export * from './lib/brn-menu-item.directive'; +export * from './lib/brn-menu-trigger.directive'; +export * from './lib/brn-menu.directive'; export const BrnMenuItemImports = [ - BrnMenuGroupDirective, - BrnMenuItemDirective, - BrnMenuItemRadioDirective, - BrnMenuItemCheckboxDirective, + BrnMenuGroupDirective, + BrnMenuItemDirective, + BrnMenuItemRadioDirective, + BrnMenuItemCheckboxDirective, ] as const; export const BrnMenuImports = [BrnMenuTriggerDirective, BrnMenuDirective, ...BrnMenuItemImports] as const; export const BrnMenuBarImports = [...BrnMenuImports, BrnMenuBarDirective] as const; export const BrnContextMenuImports = [...BrnMenuImports, BrnContextMenuTriggerDirective] as const; @NgModule({ - imports: [...BrnMenuItemImports], - exports: [...BrnMenuItemImports], + imports: [...BrnMenuItemImports], + exports: [...BrnMenuItemImports], }) export class BrnMenuItemModule {} @NgModule({ - imports: [...BrnMenuImports], - exports: [...BrnMenuImports], + imports: [...BrnMenuImports], + exports: [...BrnMenuImports], }) export class BrnMenuModule {} @NgModule({ - imports: [...BrnMenuBarImports], - exports: [...BrnMenuBarImports], + imports: [...BrnMenuBarImports], + exports: [...BrnMenuBarImports], }) export class BrnMenuBarModule {} @NgModule({ - imports: [...BrnContextMenuImports], - exports: [...BrnContextMenuImports], + imports: [...BrnContextMenuImports], + exports: [...BrnContextMenuImports], }) export class BrnContextMenuModule {} diff --git a/libs/ui/menu/brain/src/lib/brn-context-menu-trigger.directive.ts b/libs/ui/menu/brain/src/lib/brn-context-menu-trigger.directive.ts index 2aca1f58b..219312d7a 100644 --- a/libs/ui/menu/brain/src/lib/brn-context-menu-trigger.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-context-menu-trigger.directive.ts @@ -1,44 +1,44 @@ -import { Directive, effect, inject, Input, signal, TemplateRef } from '@angular/core'; import { CdkContextMenuTrigger } from '@angular/cdk/menu'; +import { Directive, effect, inject, Input, signal, TemplateRef } from '@angular/core'; export type BrnCtxMenuAlign = 'start' | 'center' | 'end' | undefined; @Directive({ - selector: '[brnCtxMenuTriggerFor]', - standalone: true, - hostDirectives: [CdkContextMenuTrigger], + selector: '[brnCtxMenuTriggerFor]', + standalone: true, + hostDirectives: [CdkContextMenuTrigger], }) export class BrnContextMenuTriggerDirective { - private readonly _cdkTrigger = inject(CdkContextMenuTrigger, { host: true }); - private readonly _align = signal(undefined); - @Input() - set align(value: BrnCtxMenuAlign) { - this._align.set(value); - } + private readonly _cdkTrigger = inject(CdkContextMenuTrigger, { host: true }); + private readonly _align = signal(undefined); + @Input() + set align(value: BrnCtxMenuAlign) { + this._align.set(value); + } - @Input() - set brnCtxMenuTriggerFor(value: TemplateRef | null) { - this._cdkTrigger.menuTemplateRef = value; - } + @Input() + set brnCtxMenuTriggerFor(value: TemplateRef | null) { + this._cdkTrigger.menuTemplateRef = value; + } - constructor() { - effect(() => { - const align = this._align(); - if (!align) return; - this._cdkTrigger.menuPosition = [ - { - originX: align, - originY: 'bottom', - overlayX: align, - overlayY: 'top', - }, - { - originX: align, - originY: 'top', - overlayX: align, - overlayY: 'bottom', - }, - ]; - }); - } + constructor() { + effect(() => { + const align = this._align(); + if (!align) return; + this._cdkTrigger.menuPosition = [ + { + originX: align, + originY: 'bottom', + overlayX: align, + overlayY: 'top', + }, + { + originX: align, + originY: 'top', + overlayX: align, + overlayY: 'bottom', + }, + ]; + }); + } } diff --git a/libs/ui/menu/brain/src/lib/brn-menu-bar.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu-bar.directive.ts index 7c83183a6..e0bf9e8f3 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu-bar.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu-bar.directive.ts @@ -1,9 +1,9 @@ -import { Directive } from '@angular/core'; import { CdkMenuBar } from '@angular/cdk/menu'; +import { Directive } from '@angular/core'; @Directive({ - selector: '[brnMenuBar]', - standalone: true, - hostDirectives: [CdkMenuBar], + selector: '[brnMenuBar]', + standalone: true, + hostDirectives: [CdkMenuBar], }) export class BrnMenuBarDirective {} diff --git a/libs/ui/menu/brain/src/lib/brn-menu-group.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu-group.directive.ts index edf9c2c14..357bfb1fb 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu-group.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu-group.directive.ts @@ -1,9 +1,9 @@ -import { Directive } from '@angular/core'; import { CdkMenuGroup } from '@angular/cdk/menu'; +import { Directive } from '@angular/core'; @Directive({ - selector: '[brnMenuGroup]', - standalone: true, - hostDirectives: [CdkMenuGroup], + selector: '[brnMenuGroup]', + standalone: true, + hostDirectives: [CdkMenuGroup], }) export class BrnMenuGroupDirective {} diff --git a/libs/ui/menu/brain/src/lib/brn-menu-item-checkbox.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu-item-checkbox.directive.ts index 47948d44f..6b5962a29 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu-item-checkbox.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu-item-checkbox.directive.ts @@ -1,29 +1,29 @@ -import { booleanAttribute, Directive, HostBinding, inject, Input, Output } from '@angular/core'; import { CdkMenuItemCheckbox } from '@angular/cdk/menu'; +import { booleanAttribute, Directive, HostBinding, inject, Input, Output } from '@angular/core'; @Directive({ - selector: '[brnMenuItemCheckbox]', - standalone: true, - hostDirectives: [CdkMenuItemCheckbox], + selector: '[brnMenuItemCheckbox]', + standalone: true, + hostDirectives: [CdkMenuItemCheckbox], }) export class BrnMenuItemCheckboxDirective { - private readonly _cdkMenuItem = inject(CdkMenuItemCheckbox, { host: true }); - @HostBinding('class.checked') - private _checked = this._cdkMenuItem.checked; - get checked() { - return this._checked; - } - @Input({ transform: booleanAttribute }) - set checked(value: boolean) { - this._checked = this._cdkMenuItem.checked = value; - } - get disabled() { - return this._cdkMenuItem.disabled; - } - @Input({ transform: booleanAttribute }) - set disabled(value: boolean) { - this._checked = this._cdkMenuItem.disabled = value; - } - @Output() - triggered = this._cdkMenuItem.triggered; + private readonly _cdkMenuItem = inject(CdkMenuItemCheckbox, { host: true }); + @HostBinding('class.checked') + private _checked = this._cdkMenuItem.checked; + get checked() { + return this._checked; + } + @Input({ transform: booleanAttribute }) + set checked(value: boolean) { + this._checked = this._cdkMenuItem.checked = value; + } + get disabled() { + return this._cdkMenuItem.disabled; + } + @Input({ transform: booleanAttribute }) + set disabled(value: boolean) { + this._checked = this._cdkMenuItem.disabled = value; + } + @Output() + triggered = this._cdkMenuItem.triggered; } diff --git a/libs/ui/menu/brain/src/lib/brn-menu-item-radio.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu-item-radio.directive.ts index 68e09fef0..5811d756b 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu-item-radio.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu-item-radio.directive.ts @@ -1,33 +1,33 @@ -import { booleanAttribute, Directive, HostBinding, inject, Input, Output } from '@angular/core'; import { CdkMenuItemRadio } from '@angular/cdk/menu'; +import { booleanAttribute, Directive, HostBinding, inject, Input, Output } from '@angular/core'; @Directive({ - selector: '[brnMenuItemRadio]', - standalone: true, - hostDirectives: [CdkMenuItemRadio], + selector: '[brnMenuItemRadio]', + standalone: true, + hostDirectives: [CdkMenuItemRadio], }) export class BrnMenuItemRadioDirective { - private readonly _cdkMenuItem = inject(CdkMenuItemRadio, { host: true }); - @HostBinding('class.checked') - private _checked = this._cdkMenuItem.checked; - get checked() { - return this._checked; - } + private readonly _cdkMenuItem = inject(CdkMenuItemRadio, { host: true }); + @HostBinding('class.checked') + private _checked = this._cdkMenuItem.checked; + get checked() { + return this._checked; + } - @Input({ transform: booleanAttribute }) - set checked(value: boolean) { - this._checked = this._cdkMenuItem.checked = value; - } + @Input({ transform: booleanAttribute }) + set checked(value: boolean) { + this._checked = this._cdkMenuItem.checked = value; + } - get disabled() { - return this._cdkMenuItem.disabled; - } + get disabled() { + return this._cdkMenuItem.disabled; + } - @Input({ transform: booleanAttribute }) - set disabled(value) { - this._cdkMenuItem.disabled = value; - } + @Input({ transform: booleanAttribute }) + set disabled(value) { + this._cdkMenuItem.disabled = value; + } - @Output() - public readonly triggered = this._cdkMenuItem.triggered; + @Output() + public readonly triggered = this._cdkMenuItem.triggered; } diff --git a/libs/ui/menu/brain/src/lib/brn-menu-item.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu-item.directive.ts index 00d38ee0f..9df046b3b 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu-item.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu-item.directive.ts @@ -1,23 +1,23 @@ -import { booleanAttribute, Directive, inject, Input, Output } from '@angular/core'; import { CdkMenuItem } from '@angular/cdk/menu'; +import { booleanAttribute, Directive, inject, Input, Output } from '@angular/core'; @Directive({ - selector: '[brnMenuItem]', - standalone: true, - hostDirectives: [CdkMenuItem], + selector: '[brnMenuItem]', + standalone: true, + hostDirectives: [CdkMenuItem], }) export class BrnMenuItemDirective { - private _cdkMenuItem = inject(CdkMenuItem, { host: true }); + private _cdkMenuItem = inject(CdkMenuItem, { host: true }); - get disabled() { - return this._cdkMenuItem.disabled; - } + get disabled() { + return this._cdkMenuItem.disabled; + } - @Input({ transform: booleanAttribute }) - set disabled(value) { - this._cdkMenuItem.disabled = value; - } + @Input({ transform: booleanAttribute }) + set disabled(value) { + this._cdkMenuItem.disabled = value; + } - @Output() - triggered = this._cdkMenuItem.triggered; + @Output() + triggered = this._cdkMenuItem.triggered; } diff --git a/libs/ui/menu/brain/src/lib/brn-menu-trigger.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu-trigger.directive.ts index 1904aab13..c709136df 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu-trigger.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu-trigger.directive.ts @@ -1,39 +1,39 @@ -import { Directive, effect, inject, Input, signal } from '@angular/core'; import { CdkMenuTrigger } from '@angular/cdk/menu'; +import { Directive, effect, inject, Input, signal } from '@angular/core'; export type BrnMenuAlign = 'start' | 'center' | 'end' | undefined; @Directive({ - selector: '[brnMenuTriggerFor]', - standalone: true, - hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: brnMenuTriggerFor'] }], + selector: '[brnMenuTriggerFor]', + standalone: true, + hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: brnMenuTriggerFor'] }], }) export class BrnMenuTriggerDirective { - private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true }); - private readonly _align = signal(undefined); - @Input() - set align(value: BrnMenuAlign) { - this._align.set(value); - } + private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true }); + private readonly _align = signal(undefined); + @Input() + set align(value: BrnMenuAlign) { + this._align.set(value); + } - constructor() { - effect(() => { - const align = this._align(); - if (!align) return; - this._cdkTrigger.menuPosition = [ - { - originX: align, - originY: 'bottom', - overlayX: align, - overlayY: 'top', - }, - { - originX: align, - originY: 'top', - overlayX: align, - overlayY: 'bottom', - }, - ]; - }); - } + constructor() { + effect(() => { + const align = this._align(); + if (!align) return; + this._cdkTrigger.menuPosition = [ + { + originX: align, + originY: 'bottom', + overlayX: align, + overlayY: 'top', + }, + { + originX: align, + originY: 'top', + overlayX: align, + overlayY: 'bottom', + }, + ]; + }); + } } diff --git a/libs/ui/menu/brain/src/lib/brn-menu.directive.ts b/libs/ui/menu/brain/src/lib/brn-menu.directive.ts index 4ecf07e3a..ce58e6f00 100644 --- a/libs/ui/menu/brain/src/lib/brn-menu.directive.ts +++ b/libs/ui/menu/brain/src/lib/brn-menu.directive.ts @@ -1,9 +1,9 @@ -import { Directive } from '@angular/core'; import { CdkMenu } from '@angular/cdk/menu'; +import { Directive } from '@angular/core'; @Directive({ - selector: '[brnMenu],[brnSubMenu]', - standalone: true, - hostDirectives: [CdkMenu], + selector: '[brnMenu],[brnSubMenu]', + standalone: true, + hostDirectives: [CdkMenu], }) export class BrnMenuDirective {} diff --git a/libs/ui/menu/brain/src/test-setup.ts b/libs/ui/menu/brain/src/test-setup.ts index d3b477cef..9136c4aec 100644 --- a/libs/ui/menu/brain/src/test-setup.ts +++ b/libs/ui/menu/brain/src/test-setup.ts @@ -1,12 +1,12 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; -import 'jest-preset-angular/setup-jest'; import '@testing-library/jest-dom'; +import 'jest-preset-angular/setup-jest'; import { toHaveNoViolations } from 'jest-axe'; diff --git a/libs/ui/menu/brain/tsconfig.json b/libs/ui/menu/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/menu/brain/tsconfig.json +++ b/libs/ui/menu/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/menu/brain/tsconfig.lib.json b/libs/ui/menu/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/menu/brain/tsconfig.lib.json +++ b/libs/ui/menu/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/menu/brain/tsconfig.lib.prod.json b/libs/ui/menu/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/menu/brain/tsconfig.lib.prod.json +++ b/libs/ui/menu/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/menu/brain/tsconfig.spec.json b/libs/ui/menu/brain/tsconfig.spec.json index 52083aec5..1b52ac828 100644 --- a/libs/ui/menu/brain/tsconfig.spec.json +++ b/libs/ui/menu/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node", "jsdom"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node", "jsdom"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/menu/context-menu.stories.ts b/libs/ui/menu/context-menu.stories.ts index c9b5de298..91fce43a4 100644 --- a/libs/ui/menu/context-menu.stories.ts +++ b/libs/ui/menu/context-menu.stories.ts @@ -1,27 +1,27 @@ +import { provideIcons } from '@ng-icons/core'; +import * as radixIcons from '@ng-icons/radix-icons'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; import { BrnContextMenuImports } from './brain/src'; import { HlmMenuImports } from './helm/src'; -import { provideIcons } from '@ng-icons/core'; -import * as radixIcons from '@ng-icons/radix-icons'; -import { HlmIconComponent } from '../icon/helm/src'; const meta: Meta<{}> = { - title: 'Context Menu', - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [BrnContextMenuImports, HlmMenuImports, HlmButtonDirective, HlmIconComponent], - }), - ], + title: 'Context Menu', + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [BrnContextMenuImports, HlmMenuImports, HlmButtonDirective, HlmIconComponent], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
Right click here @@ -99,5 +99,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/menu/dropdown-menu-bar.stories.ts b/libs/ui/menu/dropdown-menu-bar.stories.ts index 3d4e4e8b9..6870fc2dd 100644 --- a/libs/ui/menu/dropdown-menu-bar.stories.ts +++ b/libs/ui/menu/dropdown-menu-bar.stories.ts @@ -1,35 +1,35 @@ +import { provideIcons } from '@ng-icons/core'; +import * as radixIcons from '@ng-icons/radix-icons'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; import { BrnMenuBarImports, BrnMenuImports } from './brain/src'; import { HlmMenuBarImports, HlmMenuImports } from './helm/src'; -import { provideIcons } from '@ng-icons/core'; -import * as radixIcons from '@ng-icons/radix-icons'; -import { HlmIconComponent } from '../icon/helm/src'; const meta: Meta<{}> = { - title: ' Menubar', - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [ - BrnMenuImports, - BrnMenuBarImports, - HlmMenuImports, - HlmMenuBarImports, - - HlmButtonDirective, - HlmIconComponent, - ], - }), - ], + title: ' Menubar', + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [ + BrnMenuImports, + BrnMenuBarImports, + HlmMenuImports, + HlmMenuBarImports, + + HlmButtonDirective, + HlmIconComponent, + ], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
@@ -183,5 +183,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/menu/dropdown-menu.stories.ts b/libs/ui/menu/dropdown-menu.stories.ts index 05fc295f8..9a509f478 100644 --- a/libs/ui/menu/dropdown-menu.stories.ts +++ b/libs/ui/menu/dropdown-menu.stories.ts @@ -1,49 +1,49 @@ +import { NgFor } from '@angular/common'; +import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; +import * as radixIcons from '@ng-icons/radix-icons'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; import { - BrnMenuDirective, - BrnMenuGroupDirective, - BrnMenuImports, - BrnMenuItemCheckboxDirective, - BrnMenuItemDirective, - BrnMenuItemRadioDirective, - BrnMenuTriggerDirective, + BrnMenuDirective, + BrnMenuGroupDirective, + BrnMenuImports, + BrnMenuItemCheckboxDirective, + BrnMenuItemDirective, + BrnMenuItemRadioDirective, + BrnMenuTriggerDirective, } from './brain/src'; import { - HlmMenuDirective, - HlmMenuImports, - HlmMenuItemCheckComponent, - HlmMenuItemDirective, - HlmMenuItemIconDirective, - HlmMenuItemRadioComponent, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuSeparatorComponent, - HlmMenuShortcutComponent, - HlmSubMenuDirective, + HlmMenuDirective, + HlmMenuImports, + HlmMenuItemCheckComponent, + HlmMenuItemDirective, + HlmMenuItemIconDirective, + HlmMenuItemRadioComponent, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuSeparatorComponent, + HlmMenuShortcutComponent, + HlmSubMenuDirective, } from './helm/src'; -import { provideIcons } from '@ng-icons/core'; -import * as radixIcons from '@ng-icons/radix-icons'; -import { HlmIconComponent } from '../icon/helm/src'; -import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; const meta: Meta<{}> = { - title: 'Dropdown Menu', - decorators: [ - moduleMetadata({ - providers: [provideIcons(radixIcons)], - imports: [BrnMenuImports, HlmMenuImports, HlmButtonDirective, HlmIconComponent], - }), - ], + title: 'Dropdown Menu', + decorators: [ + moduleMetadata({ + providers: [provideIcons(radixIcons)], + imports: [BrnMenuImports, HlmMenuImports, HlmButtonDirective, HlmIconComponent], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
@@ -149,115 +149,115 @@ export const Default: Story = {
`, - }), + }), }; @Component({ - selector: 'stateful-dropdown-story', - standalone: true, - imports: [ - BrnMenuDirective, - BrnMenuItemDirective, - BrnMenuTriggerDirective, - BrnMenuGroupDirective, - BrnMenuItemRadioDirective, - BrnMenuItemCheckboxDirective, - - HlmMenuDirective, - HlmSubMenuDirective, - HlmMenuItemDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuLabelComponent, - HlmMenuShortcutComponent, - HlmMenuSeparatorComponent, - HlmMenuItemIconDirective, - - HlmButtonDirective, - HlmIconComponent, - - NgFor, - HlmMenuItemCheckComponent, - HlmMenuItemRadioComponent, - ], - template: ` -
- -
- -
-
- Appearance - - - - - - -
- - - - Panel Position - -
- -
- - - - -
- - `, + selector: 'stateful-dropdown-story', + standalone: true, + imports: [ + BrnMenuDirective, + BrnMenuItemDirective, + BrnMenuTriggerDirective, + BrnMenuGroupDirective, + BrnMenuItemRadioDirective, + BrnMenuItemCheckboxDirective, + + HlmMenuDirective, + HlmSubMenuDirective, + HlmMenuItemDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuLabelComponent, + HlmMenuShortcutComponent, + HlmMenuSeparatorComponent, + HlmMenuItemIconDirective, + + HlmButtonDirective, + HlmIconComponent, + + NgFor, + HlmMenuItemCheckComponent, + HlmMenuItemRadioComponent, + ], + template: ` +
+ +
+ +
+
+ Appearance + + + + + + +
+ + + + Panel Position + +
+ +
+ + + + +
+ + `, }) class StatefulStory { - isStatusBar = false; - isPanel = false; - isActivityBar = false; - - panelPositions = ['Top', 'Bottom', 'Right', 'Left'] as const; - selectedPosition: (typeof this.panelPositions)[number] | undefined = 'Bottom'; - - reset() { - this.isStatusBar = false; - this.isPanel = false; - this.isActivityBar = false; - this.selectedPosition = 'Bottom'; - } + isStatusBar = false; + isPanel = false; + isActivityBar = false; + + panelPositions = ['Top', 'Bottom', 'Right', 'Left'] as const; + selectedPosition: (typeof this.panelPositions)[number] | undefined = 'Bottom'; + + reset() { + this.isStatusBar = false; + this.isPanel = false; + this.isActivityBar = false; + this.selectedPosition = 'Bottom'; + } } export const Stateful: Story = { - render: () => ({ - moduleMetadata: { - imports: [StatefulStory], - }, - template: ``, - }), + render: () => ({ + moduleMetadata: { + imports: [StatefulStory], + }, + template: ``, + }), }; diff --git a/libs/ui/menu/helm/.eslintrc.json b/libs/ui/menu/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/menu/helm/.eslintrc.json +++ b/libs/ui/menu/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/menu/helm/jest.config.ts b/libs/ui/menu/helm/jest.config.ts index aa8ad152d..278a316e4 100644 --- a/libs/ui/menu/helm/jest.config.ts +++ b/libs/ui/menu/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-menu-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-menu-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/menu/helm/ng-package.json b/libs/ui/menu/helm/ng-package.json index 100c90ccd..21309bee7 100644 --- a/libs/ui/menu/helm/ng-package.json +++ b/libs/ui/menu/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/menu/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/menu/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/menu/helm/package.json b/libs/ui/menu/helm/package.json index 8b8bde9be..91762e898 100644 --- a/libs/ui/menu/helm/package.json +++ b/libs/ui/menu/helm/package.json @@ -1,16 +1,16 @@ { - "name": "@spartan-ng/ui-menu-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@ng-icons/radix-icons": "^25.1.0", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-menu-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@ng-icons/radix-icons": "^25.1.0", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/menu/helm/project.json b/libs/ui/menu/helm/project.json index d1d7aacbe..568b198d8 100644 --- a/libs/ui/menu/helm/project.json +++ b/libs/ui/menu/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-menu-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/menu/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/menu/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/menu/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/menu/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/menu/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/menu/helm/**/*.ts", - "libs/ui/menu/helm/**/*.html", - "libs/ui/menu/helm/package.json", - "libs/ui/menu/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-menu-helm" - } - } - } + "name": "ui-menu-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/menu/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/menu/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/menu/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/menu/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/menu/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/menu/helm/**/*.ts", + "libs/ui/menu/helm/**/*.html", + "libs/ui/menu/helm/package.json", + "libs/ui/menu/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-menu-helm" + } + } + } } diff --git a/libs/ui/menu/helm/src/index.ts b/libs/ui/menu/helm/src/index.ts index 7feae04cf..8c140758b 100644 --- a/libs/ui/menu/helm/src/index.ts +++ b/libs/ui/menu/helm/src/index.ts @@ -1,62 +1,62 @@ import { NgModule } from '@angular/core'; -import { HlmMenuShortcutComponent } from './lib/hlm-menu-shortcut.component'; -import { HlmMenuSeparatorComponent } from './lib/hlm-menu-separator.component'; -import { HlmMenuLabelComponent } from './lib/hlm-menu-label.component'; -import { HlmMenuItemRadioComponent } from './lib/hlm-menu-item-radio.component'; +import { HlmMenuBarItemDirective } from './lib/hlm-menu-bar-item.directive'; +import { HlmMenuBarDirective } from './lib/hlm-menu-bar.directive'; import { HlmMenuItemCheckComponent } from './lib/hlm-menu-item-check.component'; -import { HlmMenuItemSubIndicatorComponent } from './lib/hlm-menu-item-sub-indicator.component'; import { HlmMenuItemIconDirective } from './lib/hlm-menu-item-icon.directive'; +import { HlmMenuItemRadioComponent } from './lib/hlm-menu-item-radio.component'; +import { HlmMenuItemSubIndicatorComponent } from './lib/hlm-menu-item-sub-indicator.component'; import { HlmMenuItemDirective } from './lib/hlm-menu-item.directive'; -import { HlmMenuBarDirective } from './lib/hlm-menu-bar.directive'; -import { HlmMenuBarItemDirective } from './lib/hlm-menu-bar-item.directive'; +import { HlmMenuLabelComponent } from './lib/hlm-menu-label.component'; +import { HlmMenuSeparatorComponent } from './lib/hlm-menu-separator.component'; +import { HlmMenuShortcutComponent } from './lib/hlm-menu-shortcut.component'; import { HlmMenuDirective } from './lib/hlm-menu.directive'; import { HlmSubMenuDirective } from './lib/hlm-sub-menu.directive'; -export * from './lib/hlm-menu.directive'; -export * from './lib/hlm-menu-bar.directive'; export * from './lib/hlm-menu-bar-item.directive'; -export * from './lib/hlm-sub-menu.directive'; -export * from './lib/hlm-menu-item.directive'; -export * from './lib/hlm-menu-item-icon.directive'; -export * from './lib/hlm-menu-item-sub-indicator.component'; +export * from './lib/hlm-menu-bar.directive'; export * from './lib/hlm-menu-item-check.component'; +export * from './lib/hlm-menu-item-icon.directive'; export * from './lib/hlm-menu-item-radio.component'; +export * from './lib/hlm-menu-item-sub-indicator.component'; +export * from './lib/hlm-menu-item.directive'; export * from './lib/hlm-menu-label.component'; -export * from './lib/hlm-menu-shortcut.component'; export * from './lib/hlm-menu-separator.component'; +export * from './lib/hlm-menu-shortcut.component'; +export * from './lib/hlm-menu.directive'; +export * from './lib/hlm-sub-menu.directive'; export const HlmMenuItemImports = [ - HlmMenuItemDirective, - HlmMenuItemIconDirective, - HlmMenuItemSubIndicatorComponent, - HlmMenuItemRadioComponent, - HlmMenuItemCheckComponent, - HlmMenuShortcutComponent, + HlmMenuItemDirective, + HlmMenuItemIconDirective, + HlmMenuItemSubIndicatorComponent, + HlmMenuItemRadioComponent, + HlmMenuItemCheckComponent, + HlmMenuShortcutComponent, ]; export const HlmMenuStructureImports = [HlmMenuLabelComponent, HlmMenuSeparatorComponent] as const; export const HlmMenuImports = [ - ...HlmMenuItemImports, - ...HlmMenuStructureImports, - HlmMenuDirective, - HlmSubMenuDirective, + ...HlmMenuItemImports, + ...HlmMenuStructureImports, + HlmMenuDirective, + HlmSubMenuDirective, ] as const; export const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBarDirective, HlmMenuBarItemDirective] as const; @NgModule({ - imports: [...HlmMenuItemImports], - exports: [...HlmMenuItemImports], + imports: [...HlmMenuItemImports], + exports: [...HlmMenuItemImports], }) export class HlmMenuItemModule {} @NgModule({ - imports: [...HlmMenuImports], - exports: [...HlmMenuImports], + imports: [...HlmMenuImports], + exports: [...HlmMenuImports], }) export class HlmMenuModule {} @NgModule({ - imports: [...HlmMenuBarImports], - exports: [...HlmMenuBarImports], + imports: [...HlmMenuBarImports], + exports: [...HlmMenuBarImports], }) export class HlmMenuBarModule {} diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-bar-item.directive.ts b/libs/ui/menu/helm/src/lib/hlm-menu-bar-item.directive.ts index b6225addd..0b525ed8d 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-bar-item.directive.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-bar-item.directive.ts @@ -1,26 +1,26 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmMenuBarItem]', - standalone: true, + selector: '[hlmMenuBarItem]', + standalone: true, }) export class HlmMenuBarItemDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground', - this._inputs - ); - } + generateClass() { + return hlm( + 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-bar.directive.ts b/libs/ui/menu/helm/src/lib/hlm-menu-bar.directive.ts index 054920a3e..c7d6befa6 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-bar.directive.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-bar.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlm][brnMenuBar]', - standalone: true, + selector: '[hlm][brnMenuBar]', + standalone: true, }) export class HlmMenuBarDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this._inputs); - } + generateClass() { + return hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-item-check.component.ts b/libs/ui/menu/helm/src/lib/hlm-menu-item-check.component.ts index fa21dfe6b..1c0779179 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-item-check.component.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-item-check.component.ts @@ -1,28 +1,30 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; -import { hlm } from '@spartan-ng/ui-core'; import { radixCheck } from '@ng-icons/radix-icons'; +import { hlm } from '@spartan-ng/ui-core'; import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-menu-item-check', - standalone: true, - providers: [provideIcons({ radixCheck })], - imports: [HlmIconComponent], - template: ` `, + selector: 'hlm-menu-item-check', + standalone: true, + providers: [provideIcons({ radixCheck })], + imports: [HlmIconComponent], + template: ` + + `, }) export class HlmMenuItemCheckComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('group-[.checked]:opacity-100 opacity-0 inline-block mr-2 h-5 w-5', this._inputs); - } + generateClass() { + return hlm('group-[.checked]:opacity-100 opacity-0 inline-block mr-2 h-5 w-5', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-item-icon.directive.ts b/libs/ui/menu/helm/src/lib/hlm-menu-item-icon.directive.ts index 13d4c5f25..4ae086a81 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-item-icon.directive.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-item-icon.directive.ts @@ -1,30 +1,30 @@ import { Directive, HostBinding, inject, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmMenuIcon]', - standalone: true, + selector: '[hlmMenuIcon]', + standalone: true, }) export class HlmMenuItemIconDirective { - private _menuIcon = inject(HlmIconComponent, { host: true, optional: true }); + private _menuIcon = inject(HlmIconComponent, { host: true, optional: true }); - constructor() { - if (!this._menuIcon) return; - this._menuIcon.size = 'none'; - } - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + constructor() { + if (!this._menuIcon) return; + this._menuIcon.size = 'none'; + } + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('mr-2 h-4 w-4', this._inputs); - } + generateClass() { + return hlm('mr-2 h-4 w-4', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-item-radio.component.ts b/libs/ui/menu/helm/src/lib/hlm-menu-item-radio.component.ts index 0fa7814e7..84a37091e 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-item-radio.component.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-item-radio.component.ts @@ -1,28 +1,30 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; -import { hlm } from '@spartan-ng/ui-core'; import { radixDotFilled } from '@ng-icons/radix-icons'; +import { hlm } from '@spartan-ng/ui-core'; import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-menu-item-radio', - standalone: true, - providers: [provideIcons({ radixDotFilled })], - imports: [HlmIconComponent], - template: ` `, + selector: 'hlm-menu-item-radio', + standalone: true, + providers: [provideIcons({ radixDotFilled })], + imports: [HlmIconComponent], + template: ` + + `, }) export class HlmMenuItemRadioComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('group-[.checked]:opacity-100 opacity-0 inline-block mr-2 h-5 w-5', this._inputs); - } + generateClass() { + return hlm('group-[.checked]:opacity-100 opacity-0 inline-block mr-2 h-5 w-5', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-item-sub-indicator.component.ts b/libs/ui/menu/helm/src/lib/hlm-menu-item-sub-indicator.component.ts index 3ae22f4c8..11d60719f 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-item-sub-indicator.component.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-item-sub-indicator.component.ts @@ -1,28 +1,30 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; -import { hlm } from '@spartan-ng/ui-core'; import { radixChevronRight } from '@ng-icons/radix-icons'; +import { hlm } from '@spartan-ng/ui-core'; import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-menu-item-sub-indicator', - standalone: true, - providers: [provideIcons({ radixChevronRight })], - imports: [HlmIconComponent], - template: ` `, + selector: 'hlm-menu-item-sub-indicator', + standalone: true, + providers: [provideIcons({ radixChevronRight })], + imports: [HlmIconComponent], + template: ` + + `, }) export class HlmMenuItemSubIndicatorComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('inline-block ml-auto h-4 w-4', this._inputs); - } + generateClass() { + return hlm('inline-block ml-auto h-4 w-4', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-item.directive.ts b/libs/ui/menu/helm/src/lib/hlm-menu-item.directive.ts index 5852bd719..920694bbd 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-item.directive.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-item.directive.ts @@ -1,34 +1,34 @@ import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlm][brnMenuItem], [hlm][brnMenuItemRadio], [hlm][brnMenuItemCheckbox]', - standalone: true, + selector: '[hlm][brnMenuItem], [hlm][brnMenuItemRadio], [hlm][brnMenuItemCheckbox]', + standalone: true, }) export class HlmMenuItemDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - private _inset = false; - @Input({ transform: booleanAttribute }) - set inset(value: boolean) { - this._inset = value; - this._class = this.generateClass(); - } + private _inset = false; + @Input({ transform: booleanAttribute }) + set inset(value: boolean) { + this._inset = value; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50', - this._inset && 'pl-10', - this._inputs - ); - } + generateClass() { + return hlm( + 'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50', + this._inset && 'pl-10', + this._inputs, + ); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-label.component.ts b/libs/ui/menu/helm/src/lib/hlm-menu-label.component.ts index eff8e178b..f72d82dea 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-label.component.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-label.component.ts @@ -1,31 +1,33 @@ import { booleanAttribute, Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-menu-label', - standalone: true, - template: ``, + selector: 'hlm-menu-label', + standalone: true, + template: ` + + `, }) export class HlmMenuLabelComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - private _inset = false; - @Input({ transform: booleanAttribute }) - set inset(value: boolean) { - this._inset = value; - this._class = this.generateClass(); - } + private _inset = false; + @Input({ transform: booleanAttribute }) + set inset(value: boolean) { + this._inset = value; + this._class = this.generateClass(); + } - generateClass() { - return hlm('block px-2 py-1.5 text-sm font-semibold', this._inset && 'pl-10', this._inputs); - } + generateClass() { + return hlm('block px-2 py-1.5 text-sm font-semibold', this._inset && 'pl-10', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-separator.component.ts b/libs/ui/menu/helm/src/lib/hlm-menu-separator.component.ts index b231a43f6..cde6568dc 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-separator.component.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-separator.component.ts @@ -1,24 +1,24 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-menu-separator', - standalone: true, - template: ``, + selector: 'hlm-menu-separator', + standalone: true, + template: ``, }) export class HlmMenuSeparatorComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('block -mx-1 my-1 h-px bg-muted', this._inputs); - } + generateClass() { + return hlm('block -mx-1 my-1 h-px bg-muted', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu-shortcut.component.ts b/libs/ui/menu/helm/src/lib/hlm-menu-shortcut.component.ts index 45bd78e41..f9228d39d 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu-shortcut.component.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu-shortcut.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-menu-shortcut', - standalone: true, - template: ``, + selector: 'hlm-menu-shortcut', + standalone: true, + template: ` + + `, }) export class HlmMenuShortcutComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._inputs); - } + generateClass() { + return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-menu.directive.ts b/libs/ui/menu/helm/src/lib/hlm-menu.directive.ts index faf4ba9df..6ec730591 100644 --- a/libs/ui/menu/helm/src/lib/hlm-menu.directive.ts +++ b/libs/ui/menu/helm/src/lib/hlm-menu.directive.ts @@ -1,47 +1,47 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; -import { cva, VariantProps } from 'class-variance-authority'; +import { VariantProps, cva } from 'class-variance-authority'; +import { ClassValue } from 'clsx'; const menuVariants = cva( - 'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', - { - variants: { - variant: { - default: 'my-0.5', - menubar: 'my-2', - }, - }, - defaultVariants: { - variant: 'default', - }, - } + 'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + { + variants: { + variant: { + default: 'my-0.5', + menubar: 'my-2', + }, + }, + defaultVariants: { + variant: 'default', + }, + }, ); type MenuVariants = VariantProps; @Directive({ - selector: '[hlm][brnMenu]', - standalone: true, + selector: '[hlm][brnMenu]', + standalone: true, }) export class HlmMenuDirective { - @HostBinding('class') - private _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private _variant: MenuVariants['variant'] = 'default'; - @Input() - set variant(value: MenuVariants['variant']) { - this._variant = value; - this._class = this.generateClasses(); - } + private _variant: MenuVariants['variant'] = 'default'; + @Input() + set variant(value: MenuVariants['variant']) { + this._variant = value; + this._class = this.generateClasses(); + } - generateClasses() { - return hlm(menuVariants({ variant: this._variant }), this._inputs); - } + generateClasses() { + return hlm(menuVariants({ variant: this._variant }), this._inputs); + } } diff --git a/libs/ui/menu/helm/src/lib/hlm-sub-menu.directive.ts b/libs/ui/menu/helm/src/lib/hlm-sub-menu.directive.ts index 05994775f..501c004e3 100644 --- a/libs/ui/menu/helm/src/lib/hlm-sub-menu.directive.ts +++ b/libs/ui/menu/helm/src/lib/hlm-sub-menu.directive.ts @@ -1,26 +1,26 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlm][brnSubMenu]', - standalone: true, + selector: '[hlm][brnSubMenu]', + standalone: true, }) export class HlmSubMenuDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm( - 'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', - this._inputs - ); - } + generateClass() { + return hlm( + 'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + this._inputs, + ); + } } diff --git a/libs/ui/menu/helm/src/test-setup.ts b/libs/ui/menu/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/menu/helm/src/test-setup.ts +++ b/libs/ui/menu/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/menu/helm/tsconfig.json b/libs/ui/menu/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/menu/helm/tsconfig.json +++ b/libs/ui/menu/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/menu/helm/tsconfig.lib.json b/libs/ui/menu/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/menu/helm/tsconfig.lib.json +++ b/libs/ui/menu/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/menu/helm/tsconfig.lib.prod.json b/libs/ui/menu/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/menu/helm/tsconfig.lib.prod.json +++ b/libs/ui/menu/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/menu/helm/tsconfig.spec.json b/libs/ui/menu/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/menu/helm/tsconfig.spec.json +++ b/libs/ui/menu/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/popover/brain/.eslintrc.json b/libs/ui/popover/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/popover/brain/.eslintrc.json +++ b/libs/ui/popover/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/popover/brain/jest.config.ts b/libs/ui/popover/brain/jest.config.ts index 5309853d3..9df537933 100644 --- a/libs/ui/popover/brain/jest.config.ts +++ b/libs/ui/popover/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-popover-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-popover-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/popover/brain/ng-package.json b/libs/ui/popover/brain/ng-package.json index 29ba1a762..a7c6ccaf3 100644 --- a/libs/ui/popover/brain/ng-package.json +++ b/libs/ui/popover/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/popover/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/popover/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/popover/brain/package.json b/libs/ui/popover/brain/package.json index a753a3fd5..f099f5db5 100644 --- a/libs/ui/popover/brain/package.json +++ b/libs/ui/popover/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-popover-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.311", - "@spartan-ng/ui-core": "0.0.1-alpha.311" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-popover-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.311", + "@spartan-ng/ui-core": "0.0.1-alpha.311" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/popover/brain/project.json b/libs/ui/popover/brain/project.json index 6967d6fd8..8b218180e 100644 --- a/libs/ui/popover/brain/project.json +++ b/libs/ui/popover/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-popover-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/popover/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/popover/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/popover/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/popover/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/popover/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/popover/brain/**/*.ts", - "libs/ui/popover/brain/**/*.html", - "libs/ui/popover/brain/package.json", - "libs/ui/popover/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-popover-brain" - } - } - } + "name": "ui-popover-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/popover/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/popover/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/popover/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/popover/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/popover/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/popover/brain/**/*.ts", + "libs/ui/popover/brain/**/*.html", + "libs/ui/popover/brain/package.json", + "libs/ui/popover/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-popover-brain" + } + } + } } diff --git a/libs/ui/popover/brain/src/index.ts b/libs/ui/popover/brain/src/index.ts index 92c611b36..7130e30b7 100644 --- a/libs/ui/popover/brain/src/index.ts +++ b/libs/ui/popover/brain/src/index.ts @@ -1,24 +1,24 @@ import { NgModule } from '@angular/core'; -import { BrnPopoverComponent } from './lib/brn-popover.component'; -import { BrnPopoverTriggerDirective } from './lib/brn-popover-trigger.directive'; import { BrnPopoverCloseDirective } from './lib/brn-popover-close.directive'; import { BrnPopoverContentDirective } from './lib/brn-popover-content.directive'; +import { BrnPopoverTriggerDirective } from './lib/brn-popover-trigger.directive'; +import { BrnPopoverComponent } from './lib/brn-popover.component'; -export * from './lib/brn-popover.component'; -export * from './lib/brn-popover-trigger.directive'; export * from './lib/brn-popover-close.directive'; export * from './lib/brn-popover-content.directive'; +export * from './lib/brn-popover-trigger.directive'; +export * from './lib/brn-popover.component'; export const BrnPopoverImports = [ - BrnPopoverComponent, - BrnPopoverTriggerDirective, - BrnPopoverCloseDirective, - BrnPopoverContentDirective, + BrnPopoverComponent, + BrnPopoverTriggerDirective, + BrnPopoverCloseDirective, + BrnPopoverContentDirective, ] as const; @NgModule({ - imports: [...BrnPopoverImports], - exports: [...BrnPopoverImports], + imports: [...BrnPopoverImports], + exports: [...BrnPopoverImports], }) export class BrnPopoverModule {} diff --git a/libs/ui/popover/brain/src/lib/brn-popover-close.directive.ts b/libs/ui/popover/brain/src/lib/brn-popover-close.directive.ts index 8b02b8283..1408a6c70 100644 --- a/libs/ui/popover/brain/src/lib/brn-popover-close.directive.ts +++ b/libs/ui/popover/brain/src/lib/brn-popover-close.directive.ts @@ -2,7 +2,7 @@ import { Directive } from '@angular/core'; import { BrnDialogCloseDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: 'button[brnPopoverClose]', - standalone: true, + selector: 'button[brnPopoverClose]', + standalone: true, }) export class BrnPopoverCloseDirective extends BrnDialogCloseDirective {} diff --git a/libs/ui/popover/brain/src/lib/brn-popover-content.directive.ts b/libs/ui/popover/brain/src/lib/brn-popover-content.directive.ts index 361624c9d..1b18b4e5f 100644 --- a/libs/ui/popover/brain/src/lib/brn-popover-content.directive.ts +++ b/libs/ui/popover/brain/src/lib/brn-popover-content.directive.ts @@ -3,13 +3,13 @@ import { EXPOSES_STATE_TOKEN } from '@spartan-ng/ui-core'; import { BrnDialogContentDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: '[brnPopoverContent]', - standalone: true, - providers: [ - { - provide: EXPOSES_STATE_TOKEN, - useExisting: forwardRef(() => BrnPopoverContentDirective), - }, - ], + selector: '[brnPopoverContent]', + standalone: true, + providers: [ + { + provide: EXPOSES_STATE_TOKEN, + useExisting: forwardRef(() => BrnPopoverContentDirective), + }, + ], }) export class BrnPopoverContentDirective extends BrnDialogContentDirective {} diff --git a/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts b/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts index e852ae5c2..74e6961ee 100644 --- a/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts +++ b/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts @@ -3,28 +3,28 @@ import { BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain'; import { BrnPopoverComponent } from './brn-popover.component'; @Directive({ - selector: 'button[brnPopoverTrigger],button[brnPopoverTriggerFor]', - standalone: true, - host: { - '[id]': '_id()', - '(click)': 'open()', - 'aria-haspopup': 'dialog', - '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", - '[attr.data-state]': 'state()', - '[attr.aria-controls]': 'dialogId', - }, + selector: 'button[brnPopoverTrigger],button[brnPopoverTriggerFor]', + standalone: true, + host: { + '[id]': '_id()', + '(click)': 'open()', + 'aria-haspopup': 'dialog', + '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", + '[attr.data-state]': 'state()', + '[attr.aria-controls]': 'dialogId', + }, }) export class BrnPopoverTriggerDirective extends BrnDialogTriggerDirective { - private _host = inject(ElementRef, { host: true }); - constructor() { - super(); - if (!this._brnDialog) return; - this._brnDialog.attachTo = this._host.nativeElement; - } + private _host = inject(ElementRef, { host: true }); + constructor() { + super(); + if (!this._brnDialog) return; + this._brnDialog.attachTo = this._host.nativeElement; + } - @Input() - set brnPopoverTriggerFor(brnDialog: BrnPopoverComponent) { - brnDialog.attachTo = this._host.nativeElement; - super.brnDialogTriggerFor = brnDialog; - } + @Input() + set brnPopoverTriggerFor(brnDialog: BrnPopoverComponent) { + brnDialog.attachTo = this._host.nativeElement; + super.brnDialogTriggerFor = brnDialog; + } } diff --git a/libs/ui/popover/brain/src/lib/brn-popover.component.ts b/libs/ui/popover/brain/src/lib/brn-popover.component.ts index d350ca617..92dd73255 100644 --- a/libs/ui/popover/brain/src/lib/brn-popover.component.ts +++ b/libs/ui/popover/brain/src/lib/brn-popover.component.ts @@ -1,80 +1,82 @@ +import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion'; import { - ChangeDetectionStrategy, - Component, - effect, - forwardRef, - Input, - signal, - untracked, - ViewEncapsulation, + ChangeDetectionStrategy, + Component, + effect, + forwardRef, + Input, + signal, + untracked, + ViewEncapsulation, } from '@angular/core'; import { BrnDialogComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain'; -import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion'; export type BrnPopoverAlign = 'start' | 'center' | 'end'; @Component({ - selector: 'brn-popover', - standalone: true, - template: ` `, - providers: [ - provideBrnDialog(), - { - provide: BrnDialogComponent, - useExisting: forwardRef(() => BrnPopoverComponent), - }, - ], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - exportAs: 'brnPopover', + selector: 'brn-popover', + standalone: true, + template: ` + + `, + providers: [ + provideBrnDialog(), + { + provide: BrnDialogComponent, + useExisting: forwardRef(() => BrnPopoverComponent), + }, + ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + exportAs: 'brnPopover', }) export class BrnPopoverComponent extends BrnDialogComponent { - private readonly _sideOffset = signal(0); - @Input() - set sideOffset(value: NumberInput) { - this._sideOffset.set(coerceNumberProperty(value)); - } + private readonly _sideOffset = signal(0); + @Input() + set sideOffset(value: NumberInput) { + this._sideOffset.set(coerceNumberProperty(value)); + } - private readonly _align = signal('center'); - @Input() - set align(value: BrnPopoverAlign) { - this._align.set(value); - } + private readonly _align = signal('center'); + @Input() + set align(value: BrnPopoverAlign) { + this._align.set(value); + } - constructor() { - super(); - this.hasBackdrop = false; - this.ariaDescribedBy = undefined; - this.ariaLabelledBy = undefined; - this.scrollStrategy = this.ssos.reposition(); + constructor() { + super(); + this.hasBackdrop = false; + this.ariaDescribedBy = undefined; + this.ariaLabelledBy = undefined; + this.scrollStrategy = this.ssos.reposition(); - effect(() => { - const align = this._align(); - this.attachPositions = [ - { - originX: align, - originY: 'bottom', - overlayX: align, - overlayY: 'top', - }, - { - originX: align, - originY: 'top', - overlayX: align, - overlayY: 'bottom', - }, - ]; - this.applySideOffset(untracked(this._sideOffset)); - }); + effect(() => { + const align = this._align(); + this.attachPositions = [ + { + originX: align, + originY: 'bottom', + overlayX: align, + overlayY: 'top', + }, + { + originX: align, + originY: 'top', + overlayX: align, + overlayY: 'bottom', + }, + ]; + this.applySideOffset(untracked(this._sideOffset)); + }); - effect(() => { - this.applySideOffset(this._sideOffset()); - }); - } + effect(() => { + this.applySideOffset(this._sideOffset()); + }); + } - private applySideOffset(sideOffset: number) { - this.attachPositions = (this._options['attachPositions'] ?? []).map((position) => ({ - ...position, - offsetY: position.originY === 'top' ? -sideOffset : sideOffset, - })); - } + private applySideOffset(sideOffset: number) { + this.attachPositions = (this._options['attachPositions'] ?? []).map((position) => ({ + ...position, + offsetY: position.originY === 'top' ? -sideOffset : sideOffset, + })); + } } diff --git a/libs/ui/popover/brain/src/test-setup.ts b/libs/ui/popover/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/popover/brain/src/test-setup.ts +++ b/libs/ui/popover/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/popover/brain/tsconfig.json b/libs/ui/popover/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/popover/brain/tsconfig.json +++ b/libs/ui/popover/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/popover/brain/tsconfig.lib.json b/libs/ui/popover/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/popover/brain/tsconfig.lib.json +++ b/libs/ui/popover/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/popover/brain/tsconfig.lib.prod.json b/libs/ui/popover/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/popover/brain/tsconfig.lib.prod.json +++ b/libs/ui/popover/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/popover/brain/tsconfig.spec.json b/libs/ui/popover/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/popover/brain/tsconfig.spec.json +++ b/libs/ui/popover/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/popover/helm/.eslintrc.json b/libs/ui/popover/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/popover/helm/.eslintrc.json +++ b/libs/ui/popover/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/popover/helm/jest.config.ts b/libs/ui/popover/helm/jest.config.ts index bc00b4ddb..c9e7f8c9f 100644 --- a/libs/ui/popover/helm/jest.config.ts +++ b/libs/ui/popover/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-popover-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-popover-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/popover/helm/ng-package.json b/libs/ui/popover/helm/ng-package.json index a3ea127ff..a0c9c2cd1 100644 --- a/libs/ui/popover/helm/ng-package.json +++ b/libs/ui/popover/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/popover/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/popover/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/popover/helm/package.json b/libs/ui/popover/helm/package.json index f7765f02f..19b1987dc 100644 --- a/libs/ui/popover/helm/package.json +++ b/libs/ui/popover/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-popover-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-popover-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/popover/helm/project.json b/libs/ui/popover/helm/project.json index e3ee8a6d6..3d5421a74 100644 --- a/libs/ui/popover/helm/project.json +++ b/libs/ui/popover/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-popover-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/popover/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/popover/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/popover/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/popover/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/popover/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/popover/helm/**/*.ts", - "libs/ui/popover/helm/**/*.html", - "libs/ui/popover/helm/package.json", - "libs/ui/popover/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-popover-helm" - } - } - } + "name": "ui-popover-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/popover/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/popover/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/popover/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/popover/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/popover/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/popover/helm/**/*.ts", + "libs/ui/popover/helm/**/*.html", + "libs/ui/popover/helm/package.json", + "libs/ui/popover/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-popover-helm" + } + } + } } diff --git a/libs/ui/popover/helm/src/index.ts b/libs/ui/popover/helm/src/index.ts index 2d20de9d8..7af7813d2 100644 --- a/libs/ui/popover/helm/src/index.ts +++ b/libs/ui/popover/helm/src/index.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; -import { HlmPopoverContentDirective } from './lib/hlm-popover-content.directive'; import { HlmPopoverCloseDirective } from './lib/hlm-popover-close.directive'; +import { HlmPopoverContentDirective } from './lib/hlm-popover-content.directive'; export * from './lib/hlm-popover-close.directive'; export * from './lib/hlm-popover-content.directive'; @@ -9,7 +9,7 @@ export * from './lib/hlm-popover-content.directive'; export const HlmPopoverImports = [HlmPopoverContentDirective, HlmPopoverCloseDirective] as const; @NgModule({ - imports: [...HlmPopoverImports], - exports: [...HlmPopoverImports], + imports: [...HlmPopoverImports], + exports: [...HlmPopoverImports], }) export class HlmPopoverModule {} diff --git a/libs/ui/popover/helm/src/lib/hlm-popover-close.directive.ts b/libs/ui/popover/helm/src/lib/hlm-popover-close.directive.ts index c47dc37a4..062748bee 100644 --- a/libs/ui/popover/helm/src/lib/hlm-popover-close.directive.ts +++ b/libs/ui/popover/helm/src/lib/hlm-popover-close.directive.ts @@ -3,24 +3,24 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmPopoverClose],[brnPopoverClose][hlm]', - standalone: true, + selector: '[hlmPopoverClose],[brnPopoverClose][hlm]', + standalone: true, }) export class HlmPopoverCloseDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/popover/helm/src/lib/hlm-popover-content.directive.ts b/libs/ui/popover/helm/src/lib/hlm-popover-content.directive.ts index 418938c27..13fe69822 100644 --- a/libs/ui/popover/helm/src/lib/hlm-popover-content.directive.ts +++ b/libs/ui/popover/helm/src/lib/hlm-popover-content.directive.ts @@ -3,34 +3,34 @@ import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmPopoverContent],[brnPopoverContent][hlm]', - standalone: true, + selector: '[hlmPopoverContent],[brnPopoverContent][hlm]', + standalone: true, }) export class HlmPopoverContentDirective { - private _inputs: ClassValue = ''; - private _stateProvider = injectExposesStateProvider({ host: true }); - public state = this._stateProvider?.state ?? signal('closed'); - private _renderer = inject(Renderer2); - private _element = inject(ElementRef); + private _inputs: ClassValue = ''; + private _stateProvider = injectExposesStateProvider({ host: true }); + public state = this._stateProvider?.state ?? signal('closed'); + private _renderer = inject(Renderer2); + private _element = inject(ElementRef); - constructor() { - effect(() => { - this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); - }); - } + constructor() { + effect(() => { + this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); + }); + } - @HostBinding('class') - _class = this.generateClasses(); - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @HostBinding('class') + _class = this.generateClasses(); + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + this._inputs, + ); + } } diff --git a/libs/ui/popover/helm/src/test-setup.ts b/libs/ui/popover/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/popover/helm/src/test-setup.ts +++ b/libs/ui/popover/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/popover/helm/tsconfig.json b/libs/ui/popover/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/popover/helm/tsconfig.json +++ b/libs/ui/popover/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/popover/helm/tsconfig.lib.json b/libs/ui/popover/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/popover/helm/tsconfig.lib.json +++ b/libs/ui/popover/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/popover/helm/tsconfig.lib.prod.json b/libs/ui/popover/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/popover/helm/tsconfig.lib.prod.json +++ b/libs/ui/popover/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/popover/helm/tsconfig.spec.json b/libs/ui/popover/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/popover/helm/tsconfig.spec.json +++ b/libs/ui/popover/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/popover/popover.stories.ts b/libs/ui/popover/popover.stories.ts index 9fb90ddd0..940dbe7f2 100644 --- a/libs/ui/popover/popover.stories.ts +++ b/libs/ui/popover/popover.stories.ts @@ -1,41 +1,41 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; -import { BrnPopoverImports } from './brain/src'; -import { HlmPopoverImports } from './helm/src'; -import { HlmIconComponent, provideIcons } from '../icon/helm/src'; import { radixCross1 } from '@ng-icons/radix-icons'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent, provideIcons } from '../icon/helm/src'; import { HlmInputDirective } from '../input/helm/src'; import { HlmLabelDirective } from '../label/helm/src'; +import { BrnPopoverImports } from './brain/src'; +import { HlmPopoverImports } from './helm/src'; export type PopoverProps = { offset: number; align: 'start' | 'center' | 'end' }; const meta: Meta = { - title: 'Popover', - argTypes: { - align: { control: 'select', options: ['start', 'center', 'end'] }, - }, - decorators: [ - moduleMetadata({ - imports: [ - BrnPopoverImports, - HlmPopoverImports, - HlmButtonDirective, - HlmLabelDirective, - HlmInputDirective, - HlmIconComponent, - ], - providers: [provideIcons({ radixCross1 })], - }), - ], + title: 'Popover', + argTypes: { + align: { control: 'select', options: ['start', 'center', 'end'] }, + }, + decorators: [ + moduleMetadata({ + imports: [ + BrnPopoverImports, + HlmPopoverImports, + HlmButtonDirective, + HlmLabelDirective, + HlmInputDirective, + HlmIconComponent, + ], + providers: [provideIcons({ radixCross1 })], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - args: { offset: 4, align: 'center' }, - render: ({ align, offset }) => ({ - props: { align, offset }, - template: ` + args: { offset: 4, align: 'center' }, + render: ({ align, offset }) => ({ + props: { align, offset }, + template: `
@@ -84,5 +84,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/progress/brain/.eslintrc.json b/libs/ui/progress/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/progress/brain/.eslintrc.json +++ b/libs/ui/progress/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/progress/brain/jest.config.ts b/libs/ui/progress/brain/jest.config.ts index fe906ccb1..e19753482 100644 --- a/libs/ui/progress/brain/jest.config.ts +++ b/libs/ui/progress/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-progress-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-progress-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/progress/brain/ng-package.json b/libs/ui/progress/brain/ng-package.json index 95f207552..bfd1a6005 100644 --- a/libs/ui/progress/brain/ng-package.json +++ b/libs/ui/progress/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/progress/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/progress/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/progress/brain/package.json b/libs/ui/progress/brain/package.json index 8414d062c..ea6973e51 100644 --- a/libs/ui/progress/brain/package.json +++ b/libs/ui/progress/brain/package.json @@ -1,12 +1,12 @@ { - "name": "@spartan-ng/ui-progress-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-progress-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/progress/brain/project.json b/libs/ui/progress/brain/project.json index 09ccc36ae..10e619646 100644 --- a/libs/ui/progress/brain/project.json +++ b/libs/ui/progress/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-progress-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/progress/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/progress/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/progress/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/progress/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/progress/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/progress/brain/**/*.ts", - "libs/ui/progress/brain/**/*.html", - "libs/ui/progress/brain/package.json", - "libs/ui/progress/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-progress-brain" - } - } - } + "name": "ui-progress-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/progress/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/progress/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/progress/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/progress/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/progress/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/progress/brain/**/*.ts", + "libs/ui/progress/brain/**/*.html", + "libs/ui/progress/brain/package.json", + "libs/ui/progress/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-progress-brain" + } + } + } } diff --git a/libs/ui/progress/brain/src/index.ts b/libs/ui/progress/brain/src/index.ts index fe2da88a8..dae997b39 100644 --- a/libs/ui/progress/brain/src/index.ts +++ b/libs/ui/progress/brain/src/index.ts @@ -1,15 +1,15 @@ import { NgModule } from '@angular/core'; -import { BrnProgressComponent } from './lib/brn-progress.component'; import { BrnProgressIndicatorComponent } from './lib/brn-progress-indicator.component'; +import { BrnProgressComponent } from './lib/brn-progress.component'; -export * from './lib/brn-progress.component'; export * from './lib/brn-progress-indicator.component'; +export * from './lib/brn-progress.component'; export const BrnProgressImports = [BrnProgressComponent, BrnProgressIndicatorComponent] as const; @NgModule({ - imports: [...BrnProgressImports], - exports: [...BrnProgressImports], + imports: [...BrnProgressImports], + exports: [...BrnProgressImports], }) export class BrnProgressModule {} diff --git a/libs/ui/progress/brain/src/lib/brn-progress-indicator.component.ts b/libs/ui/progress/brain/src/lib/brn-progress-indicator.component.ts index 48ff7eb71..5e311439f 100644 --- a/libs/ui/progress/brain/src/lib/brn-progress-indicator.component.ts +++ b/libs/ui/progress/brain/src/lib/brn-progress-indicator.component.ts @@ -2,18 +2,18 @@ import { Component, inject } from '@angular/core'; import { BrnProgressComponent } from './brn-progress.component'; @Component({ - selector: 'brn-progress-indicator', - standalone: true, - template: '', - host: { - '[attr.data-state]': 'progressState()', - '[attr.data-value]': 'value() ?? undefined', - '[attr.data-max]': 'max()', - }, + selector: 'brn-progress-indicator', + standalone: true, + template: '', + host: { + '[attr.data-state]': 'progressState()', + '[attr.data-value]': 'value() ?? undefined', + '[attr.data-max]': 'max()', + }, }) export class BrnProgressIndicatorComponent { - private readonly _parent = inject(BrnProgressComponent); - protected readonly progressState = this._parent.progressState; - protected readonly max = this._parent.$max; - protected readonly value = this._parent.$value; + private readonly _parent = inject(BrnProgressComponent); + protected readonly progressState = this._parent.progressState; + protected readonly max = this._parent.$max; + protected readonly value = this._parent.$value; } diff --git a/libs/ui/progress/brain/src/lib/brn-progress.component.ts b/libs/ui/progress/brain/src/lib/brn-progress.component.ts index 530d4a275..b4230c162 100644 --- a/libs/ui/progress/brain/src/lib/brn-progress.component.ts +++ b/libs/ui/progress/brain/src/lib/brn-progress.component.ts @@ -1,60 +1,60 @@ -import { Component, computed, Input, signal } from '@angular/core'; import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion'; +import { Component, computed, Input, signal } from '@angular/core'; @Component({ - selector: 'brn-progress', - standalone: true, - template: '', - host: { - role: 'progressbar', - '[attr.aria-valuemax]': '_max()', - '[attr.aria-valuemin]': '0', - '[attr.aria-valuenow]': 'isNumber() ? _value() : undefined', - '[attr.aria-valuetext]': '_value() ? getValueLabel(_value(),_max()) : undefined', - '[attr.data-state]': 'progressState()', - '[attr.data-value]': '_value() ?? undefined', - '[attr.data-max]': '_max()', - }, + selector: 'brn-progress', + standalone: true, + template: '', + host: { + role: 'progressbar', + '[attr.aria-valuemax]': '_max()', + '[attr.aria-valuemin]': '0', + '[attr.aria-valuenow]': 'isNumber() ? _value() : undefined', + '[attr.aria-valuetext]': '_value() ? getValueLabel(_value(),_max()) : undefined', + '[attr.data-state]': 'progressState()', + '[attr.data-value]': '_value() ?? undefined', + '[attr.data-max]': '_max()', + }, }) export class BrnProgressComponent { - protected readonly _value = signal(undefined); - public readonly $value = this._value.asReadonly(); - @Input() - set value(newValue: NumberInput) { - if (newValue === undefined || newValue === null || newValue === 'null' || newValue === 'undefined') { - this._value.set(null); - return; - } + protected readonly _value = signal(undefined); + public readonly $value = this._value.asReadonly(); + @Input() + set value(newValue: NumberInput) { + if (newValue === undefined || newValue === null || newValue === 'null' || newValue === 'undefined') { + this._value.set(null); + return; + } - newValue = coerceNumberProperty(newValue); - if (newValue > this._max() || newValue < 0) { - throw Error('Value must be 0 or greater and less or equal to max'); - } - this._value.set(newValue); - } + newValue = coerceNumberProperty(newValue); + if (newValue > this._max() || newValue < 0) { + throw Error('Value must be 0 or greater and less or equal to max'); + } + this._value.set(newValue); + } - protected readonly _max = signal(100); - public readonly $max = this._max.asReadonly(); - @Input() - set max(value: NumberInput) { - const newValue = coerceNumberProperty(value); - if (newValue < 0) { - throw Error('max must be greater than 0'); - } - this._max.set(newValue); - } - @Input() - getValueLabel: (value: number, max: number) => string = (value, max) => `${Math.round((value / max) * 100)}%`; + protected readonly _max = signal(100); + public readonly $max = this._max.asReadonly(); + @Input() + set max(value: NumberInput) { + const newValue = coerceNumberProperty(value); + if (newValue < 0) { + throw Error('max must be greater than 0'); + } + this._max.set(newValue); + } + @Input() + getValueLabel: (value: number, max: number) => string = (value, max) => `${Math.round((value / max) * 100)}%`; - isNumber() { - return typeof this._value() === 'number'; - } + isNumber() { + return typeof this._value() === 'number'; + } - progressState = computed(() => { - return this._value() == null || this._value() === undefined - ? 'indeterminate' - : this._value() === this._max() - ? 'complete' - : 'loading'; - }); + progressState = computed(() => { + return this._value() == null || this._value() === undefined + ? 'indeterminate' + : this._value() === this._max() + ? 'complete' + : 'loading'; + }); } diff --git a/libs/ui/progress/brain/src/test-setup.ts b/libs/ui/progress/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/progress/brain/src/test-setup.ts +++ b/libs/ui/progress/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/progress/brain/tsconfig.json b/libs/ui/progress/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/progress/brain/tsconfig.json +++ b/libs/ui/progress/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/progress/brain/tsconfig.lib.json b/libs/ui/progress/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/progress/brain/tsconfig.lib.json +++ b/libs/ui/progress/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/progress/brain/tsconfig.lib.prod.json b/libs/ui/progress/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/progress/brain/tsconfig.lib.prod.json +++ b/libs/ui/progress/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/progress/brain/tsconfig.spec.json b/libs/ui/progress/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/progress/brain/tsconfig.spec.json +++ b/libs/ui/progress/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/progress/helm/.eslintrc.json b/libs/ui/progress/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/progress/helm/.eslintrc.json +++ b/libs/ui/progress/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/progress/helm/jest.config.ts b/libs/ui/progress/helm/jest.config.ts index 232beb0a5..4f6f58dd6 100644 --- a/libs/ui/progress/helm/jest.config.ts +++ b/libs/ui/progress/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-progress-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-progress-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/progress/helm/ng-package.json b/libs/ui/progress/helm/ng-package.json index c9fbd53a5..d3474c918 100644 --- a/libs/ui/progress/helm/ng-package.json +++ b/libs/ui/progress/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/progress/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/progress/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/progress/helm/package.json b/libs/ui/progress/helm/package.json index cf57c5348..f7ff3c4fe 100644 --- a/libs/ui/progress/helm/package.json +++ b/libs/ui/progress/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-progress-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-progress-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/progress/helm/project.json b/libs/ui/progress/helm/project.json index 9ac136a0b..8573b75ea 100644 --- a/libs/ui/progress/helm/project.json +++ b/libs/ui/progress/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-progress-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/progress/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/progress/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/progress/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/progress/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/progress/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/progress/helm/**/*.ts", - "libs/ui/progress/helm/**/*.html", - "libs/ui/progress/helm/package.json", - "libs/ui/progress/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-progress-helm" - } - } - } + "name": "ui-progress-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/progress/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/progress/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/progress/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/progress/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/progress/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/progress/helm/**/*.ts", + "libs/ui/progress/helm/**/*.html", + "libs/ui/progress/helm/package.json", + "libs/ui/progress/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-progress-helm" + } + } + } } diff --git a/libs/ui/progress/helm/src/index.ts b/libs/ui/progress/helm/src/index.ts index 5d991b976..edd3d0274 100644 --- a/libs/ui/progress/helm/src/index.ts +++ b/libs/ui/progress/helm/src/index.ts @@ -1,15 +1,15 @@ import { NgModule } from '@angular/core'; -import { HlmProgressDirective } from './lib/hlm-progress.directive'; import { HlmProgressIndicatorDirective } from './lib/hlm-progress-indicator.directive'; +import { HlmProgressDirective } from './lib/hlm-progress.directive'; -export * from './lib/hlm-progress.directive'; export * from './lib/hlm-progress-indicator.directive'; +export * from './lib/hlm-progress.directive'; export const HlmProgressImports = [HlmProgressDirective, HlmProgressIndicatorDirective] as const; @NgModule({ - imports: [...HlmProgressImports], - exports: [...HlmProgressImports], + imports: [...HlmProgressImports], + exports: [...HlmProgressImports], }) export class HlmProgressModule {} diff --git a/libs/ui/progress/helm/src/lib/hlm-progress-indicator.directive.ts b/libs/ui/progress/helm/src/lib/hlm-progress-indicator.directive.ts index d0dc59c3d..ed113e331 100644 --- a/libs/ui/progress/helm/src/lib/hlm-progress-indicator.directive.ts +++ b/libs/ui/progress/helm/src/lib/hlm-progress-indicator.directive.ts @@ -1,54 +1,54 @@ import { - ChangeDetectorRef, - Directive, - DoCheck, - effect, - ElementRef, - HostBinding, - inject, - Input, - Renderer2, - signal, + ChangeDetectorRef, + Directive, + DoCheck, + effect, + ElementRef, + HostBinding, + inject, + Input, + Renderer2, + signal, } from '@angular/core'; import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmProgressIndicator],brn-progress-indicator[hlm]', - standalone: true, + selector: '[hlmProgressIndicator],brn-progress-indicator[hlm]', + standalone: true, }) export class HlmProgressIndicatorDirective implements DoCheck { - private _cdr = inject(ChangeDetectorRef); - private _element = inject(ElementRef); - private _renderer = inject(Renderer2); - private _value = signal(0); - private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } - @HostBinding('class') - private _class = this.generateClasses(); + private _cdr = inject(ChangeDetectorRef); + private _element = inject(ElementRef); + private _renderer = inject(Renderer2); + private _value = signal(0); + private _inputs: ClassValue = ''; + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } + @HostBinding('class') + private _class = this.generateClasses(); - constructor() { - effect(() => { - // using renderer directly as hostbinding is one change detection cycle behind - const currentValue = this._value(); - this._renderer.setStyle(this._element.nativeElement, 'transform', `translateX(-${100 - (currentValue || 100)}%)`); - if (!currentValue) { - this._renderer.addClass(this._element.nativeElement, 'animate-indeterminate'); - } else { - this._renderer.removeClass(this._element.nativeElement, 'animate-indeterminate'); - } - }); - } + constructor() { + effect(() => { + // using renderer directly as hostbinding is one change detection cycle behind + const currentValue = this._value(); + this._renderer.setStyle(this._element.nativeElement, 'transform', `translateX(-${100 - (currentValue || 100)}%)`); + if (!currentValue) { + this._renderer.addClass(this._element.nativeElement, 'animate-indeterminate'); + } else { + this._renderer.removeClass(this._element.nativeElement, 'animate-indeterminate'); + } + }); + } - ngDoCheck(): void { - this._value.set(this._element.nativeElement.getAttribute('data-value')); - } + ngDoCheck(): void { + this._value.set(this._element.nativeElement.getAttribute('data-value')); + } - private generateClasses() { - return hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this._inputs); - } + private generateClasses() { + return hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this._inputs); + } } diff --git a/libs/ui/progress/helm/src/lib/hlm-progress.directive.ts b/libs/ui/progress/helm/src/lib/hlm-progress.directive.ts index a27668842..018a7f2e0 100644 --- a/libs/ui/progress/helm/src/lib/hlm-progress.directive.ts +++ b/libs/ui/progress/helm/src/lib/hlm-progress.directive.ts @@ -3,20 +3,20 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmProgress],brn-progress[hlm]', - standalone: true, + selector: '[hlmProgress],brn-progress[hlm]', + standalone: true, }) export class HlmProgressDirective { - private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } - @HostBinding('class') - private _class = this.generateClasses(); + private _inputs: ClassValue = ''; + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this._inputs); - } + private generateClasses() { + return hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this._inputs); + } } diff --git a/libs/ui/progress/helm/src/test-setup.ts b/libs/ui/progress/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/progress/helm/src/test-setup.ts +++ b/libs/ui/progress/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/progress/helm/tsconfig.json b/libs/ui/progress/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/progress/helm/tsconfig.json +++ b/libs/ui/progress/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/progress/helm/tsconfig.lib.json b/libs/ui/progress/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/progress/helm/tsconfig.lib.json +++ b/libs/ui/progress/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/progress/helm/tsconfig.lib.prod.json b/libs/ui/progress/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/progress/helm/tsconfig.lib.prod.json +++ b/libs/ui/progress/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/progress/helm/tsconfig.spec.json b/libs/ui/progress/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/progress/helm/tsconfig.spec.json +++ b/libs/ui/progress/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/progress/progress.stories.ts b/libs/ui/progress/progress.stories.ts index 3485b547f..4e04dbab7 100644 --- a/libs/ui/progress/progress.stories.ts +++ b/libs/ui/progress/progress.stories.ts @@ -1,27 +1,27 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { HlmLabelDirective } from '../label/helm/src'; import { BrnProgressImports } from './brain/src'; import { HlmProgressImports } from './helm/src'; -import { HlmLabelDirective } from '../label/helm/src'; const meta: Meta<{ value: number }> = { - title: 'Progress', - decorators: [ - moduleMetadata({ - imports: [BrnProgressImports, HlmProgressImports, HlmLabelDirective], - }), - ], + title: 'Progress', + decorators: [ + moduleMetadata({ + imports: [BrnProgressImports, HlmProgressImports, HlmLabelDirective], + }), + ], }; export default meta; type Story = StoryObj<{ value: number }>; export const Default: Story = { - args: { - value: 30, - }, - render: ({ value }) => ({ - props: { value }, - template: ` + args: { + value: 30, + }, + render: ({ value }) => ({ + props: { value }, + template: `

Loading (not started)

@@ -44,5 +44,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/radio-group/brain/.eslintrc.json b/libs/ui/radio-group/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/radio-group/brain/.eslintrc.json +++ b/libs/ui/radio-group/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/radio-group/brain/jest.config.ts b/libs/ui/radio-group/brain/jest.config.ts index fe995f2b4..89ab09f12 100644 --- a/libs/ui/radio-group/brain/jest.config.ts +++ b/libs/ui/radio-group/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-radio-group-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-radio-group-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/radio-group/brain/ng-package.json b/libs/ui/radio-group/brain/ng-package.json index a6bbbf392..a29401b02 100644 --- a/libs/ui/radio-group/brain/ng-package.json +++ b/libs/ui/radio-group/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/radio-group/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/radio-group/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/radio-group/brain/package.json b/libs/ui/radio-group/brain/package.json index 26ca2d959..64dd3bb40 100644 --- a/libs/ui/radio-group/brain/package.json +++ b/libs/ui/radio-group/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-radiogroup-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@angular/forms": "17.0.2", - "@angular/cdk": "17.0.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-radiogroup-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@angular/forms": "17.0.2", + "@angular/cdk": "17.0.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/radio-group/brain/project.json b/libs/ui/radio-group/brain/project.json index ed97377ef..3ab1d27da 100644 --- a/libs/ui/radio-group/brain/project.json +++ b/libs/ui/radio-group/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-radio-group-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/radio-group/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/radio-group/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/radio-group/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/radio-group/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/radio-group/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/radio-group/brain/**/*.ts", - "libs/ui/radio-group/brain/**/*.html", - "libs/ui/radio-group/brain/package.json", - "libs/ui/radio-group/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-radio-group-brain" - } - } - } + "name": "ui-radio-group-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/radio-group/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/radio-group/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/radio-group/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/radio-group/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/radio-group/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/radio-group/brain/**/*.ts", + "libs/ui/radio-group/brain/**/*.html", + "libs/ui/radio-group/brain/package.json", + "libs/ui/radio-group/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-radio-group-brain" + } + } + } } diff --git a/libs/ui/radio-group/brain/src/index.ts b/libs/ui/radio-group/brain/src/index.ts index de1c87aa4..614652496 100644 --- a/libs/ui/radio-group/brain/src/index.ts +++ b/libs/ui/radio-group/brain/src/index.ts @@ -3,14 +3,14 @@ import { NgModule } from '@angular/core'; import { BrnRadioGroupComponent } from './lib/brn-radio-group.component'; import { BrnRadioComponent } from './lib/brn-radio.component'; +export * from './lib/brn-radio-change'; export * from './lib/brn-radio-group.component'; export * from './lib/brn-radio.component'; -export * from './lib/brn-radio-change'; export const BrnRadioGroupImports = [BrnRadioGroupComponent, BrnRadioComponent] as const; @NgModule({ - imports: [...BrnRadioGroupImports], - exports: [...BrnRadioGroupImports], + imports: [...BrnRadioGroupImports], + exports: [...BrnRadioGroupImports], }) export class BrnRadioGroupModule {} diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio-change.ts b/libs/ui/radio-group/brain/src/lib/brn-radio-change.ts index 415a53fae..f430fc0ce 100644 --- a/libs/ui/radio-group/brain/src/lib/brn-radio-change.ts +++ b/libs/ui/radio-group/brain/src/lib/brn-radio-change.ts @@ -1,6 +1,9 @@ import { BrnRadioComponent } from './brn-radio.component'; export class BrnRadioChange { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - constructor(public source: BrnRadioComponent, public value: any) {} + // eslint-disable-next-line @typescript-eslint/no-explicit-any + constructor( + public source: BrnRadioComponent, + public value: any, + ) {} } diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts b/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts index 1d8f1e754..8a84995f9 100644 --- a/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts +++ b/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts @@ -1,214 +1,216 @@ import { - AfterContentInit, - booleanAttribute, - ChangeDetectorRef, - Component, - ContentChildren, - EventEmitter, - forwardRef, - inject, - Input, - Output, - QueryList, + AfterContentInit, + booleanAttribute, + ChangeDetectorRef, + Component, + ContentChildren, + EventEmitter, + forwardRef, + inject, + Input, + Output, + QueryList, } from '@angular/core'; -import { BrnRadioComponent } from './brn-radio.component'; -import { BrnRadioChange } from './brn-radio-change'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BrnRadioChange } from './brn-radio-change'; +import { BrnRadioComponent } from './brn-radio.component'; let nextUniqueId = 0; export const BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => BrnRadioGroupComponent), - multi: true, + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => BrnRadioGroupComponent), + multi: true, }; @Component({ - selector: 'brn-radio-group', - standalone: true, - providers: [BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], - imports: [], - host: { - role: 'radiogroup', - }, - template: ` `, + selector: 'brn-radio-group', + standalone: true, + providers: [BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], + imports: [], + host: { + role: 'radiogroup', + }, + template: ` + + `, }) export class BrnRadioGroupComponent implements AfterContentInit { - private _changeDetector = inject(ChangeDetectorRef); - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private _value: any = null; - private _isInitialized = false; - - @ContentChildren(BrnRadioComponent, { descendants: true }) - private _radios?: QueryList; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - _controlValueAccessorChangeFn: (value: any) => void = () => {}; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onTouched: () => any = () => {}; - - private _name = `brn-radio-group-${nextUniqueId++}`; - @Input() - get name(): string { - return this._name; - } - - set name(value: string) { - this._name = value; - this._updateRadioButtonNames(); - } - - /** - * Value for the radio-group. Should equal the value of the selected radio button if there is - * a corresponding radio button with a matching value. If there is not such a corresponding - * radio button, this value persists to be applied in case a new radio button is added with a - * matching value. - */ - @Input() - // eslint-disable-next-line @typescript-eslint/no-explicit-any - get value(): any { - return this._value; - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - set value(newValue: any) { - if (this._value !== newValue) { - // Set this before proceeding to ensure no circular loop occurs with selection. - this._value = newValue; - this._updateSelectedRadioFromValue(); - this._checkSelectedRadioButton(); - } - } - - _checkSelectedRadioButton() { - if (this._selected && !this._selected.checked) { - this._selected.checked = true; - } - } - - /** - * The currently selected radio button. If set to a new radio button, the radio group value - * will be updated to match the new selected button. - */ - private _selected: BrnRadioComponent | null = null; - @Input() - get selected() { - return this._selected; - } - - set selected(selected: BrnRadioComponent | null) { - this._selected = selected; - this.value = selected ? selected.value : null; - this._checkSelectedRadioButton(); - } - - private _disabled = false; - @Input({ transform: booleanAttribute }) - get disabled(): boolean { - return this._disabled; - } - - set disabled(value: boolean) { - this._disabled = value; - this._markRadiosForCheck(); - } - - private _required = false; - @Input({ transform: booleanAttribute }) - get required(): boolean { - return this._required; - } - - set required(value: boolean) { - this._required = value; - this._markRadiosForCheck(); - } - - @Input() - direction: 'ltr' | 'rtl' | null = 'ltr'; - - @Output() - // eslint-disable-next-line @angular-eslint/no-output-native - readonly change: EventEmitter = new EventEmitter(); - - /** - * Initialize properties once content children are available. - * This allows us to propagate relevant attributes to associated buttons. - */ - ngAfterContentInit() { - // Mark this component as initialized in AfterContentInit because the initial value can - // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the - // NgModel occurs *after* the OnInit of the MatRadioGroup. - this._isInitialized = true; - } - - /** - * Mark this group as being "touched" (for ngModel). Meant to be called by the contained - * radio buttons upon their blur. - */ - _touch() { - if (this.onTouched) { - this.onTouched(); - } - } - - private _updateRadioButtonNames(): void { - if (this._radios) { - this._radios.forEach((radio) => { - radio.name = this.name; - radio._markForCheck(); - }); - } - } - - /** Updates the `selected` radio button from the internal _value state. */ - private _updateSelectedRadioFromValue(): void { - // If the value already matches the selected radio, do nothing. - const isAlreadySelected = this._selected !== null && this._selected.value === this._value; - - if (this._radios && !isAlreadySelected) { - this._selected = null; - this._radios.forEach((radio) => { - radio.checked = this.value === radio.value; - if (radio.checked) { - this._selected = radio; - } - }); - } - } - - _emitChangeEvent(): void { - if (this._isInitialized) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - this.change.emit(new BrnRadioChange(this._selected!, this._value)); - } - } - - _markRadiosForCheck() { - if (this._radios) { - this._radios.forEach((radio) => radio._markForCheck()); - } - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - writeValue(value: any) { - this.value = value; - this._changeDetector.markForCheck(); - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - registerOnChange(fn: (value: any) => void) { - this._controlValueAccessorChangeFn = fn; - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - registerOnTouched(fn: any) { - this.onTouched = fn; - } - - setDisabledState(isDisabled: boolean) { - this.disabled = isDisabled; - this._changeDetector.markForCheck(); - } + private _changeDetector = inject(ChangeDetectorRef); + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private _value: any = null; + private _isInitialized = false; + + @ContentChildren(BrnRadioComponent, { descendants: true }) + private _radios?: QueryList; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + _controlValueAccessorChangeFn: (value: any) => void = () => {}; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onTouched: () => any = () => {}; + + private _name = `brn-radio-group-${nextUniqueId++}`; + @Input() + get name(): string { + return this._name; + } + + set name(value: string) { + this._name = value; + this._updateRadioButtonNames(); + } + + /** + * Value for the radio-group. Should equal the value of the selected radio button if there is + * a corresponding radio button with a matching value. If there is not such a corresponding + * radio button, this value persists to be applied in case a new radio button is added with a + * matching value. + */ + @Input() + // eslint-disable-next-line @typescript-eslint/no-explicit-any + get value(): any { + return this._value; + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + set value(newValue: any) { + if (this._value !== newValue) { + // Set this before proceeding to ensure no circular loop occurs with selection. + this._value = newValue; + this._updateSelectedRadioFromValue(); + this._checkSelectedRadioButton(); + } + } + + _checkSelectedRadioButton() { + if (this._selected && !this._selected.checked) { + this._selected.checked = true; + } + } + + /** + * The currently selected radio button. If set to a new radio button, the radio group value + * will be updated to match the new selected button. + */ + private _selected: BrnRadioComponent | null = null; + @Input() + get selected() { + return this._selected; + } + + set selected(selected: BrnRadioComponent | null) { + this._selected = selected; + this.value = selected ? selected.value : null; + this._checkSelectedRadioButton(); + } + + private _disabled = false; + @Input({ transform: booleanAttribute }) + get disabled(): boolean { + return this._disabled; + } + + set disabled(value: boolean) { + this._disabled = value; + this._markRadiosForCheck(); + } + + private _required = false; + @Input({ transform: booleanAttribute }) + get required(): boolean { + return this._required; + } + + set required(value: boolean) { + this._required = value; + this._markRadiosForCheck(); + } + + @Input() + direction: 'ltr' | 'rtl' | null = 'ltr'; + + @Output() + // eslint-disable-next-line @angular-eslint/no-output-native + readonly change: EventEmitter = new EventEmitter(); + + /** + * Initialize properties once content children are available. + * This allows us to propagate relevant attributes to associated buttons. + */ + ngAfterContentInit() { + // Mark this component as initialized in AfterContentInit because the initial value can + // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the + // NgModel occurs *after* the OnInit of the MatRadioGroup. + this._isInitialized = true; + } + + /** + * Mark this group as being "touched" (for ngModel). Meant to be called by the contained + * radio buttons upon their blur. + */ + _touch() { + if (this.onTouched) { + this.onTouched(); + } + } + + private _updateRadioButtonNames(): void { + if (this._radios) { + this._radios.forEach((radio) => { + radio.name = this.name; + radio._markForCheck(); + }); + } + } + + /** Updates the `selected` radio button from the internal _value state. */ + private _updateSelectedRadioFromValue(): void { + // If the value already matches the selected radio, do nothing. + const isAlreadySelected = this._selected !== null && this._selected.value === this._value; + + if (this._radios && !isAlreadySelected) { + this._selected = null; + this._radios.forEach((radio) => { + radio.checked = this.value === radio.value; + if (radio.checked) { + this._selected = radio; + } + }); + } + } + + _emitChangeEvent(): void { + if (this._isInitialized) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + this.change.emit(new BrnRadioChange(this._selected!, this._value)); + } + } + + _markRadiosForCheck() { + if (this._radios) { + this._radios.forEach((radio) => radio._markForCheck()); + } + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + writeValue(value: any) { + this.value = value; + this._changeDetector.markForCheck(); + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + registerOnChange(fn: (value: any) => void) { + this._controlValueAccessorChangeFn = fn; + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + registerOnTouched(fn: any) { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean) { + this.disabled = isDisabled; + this._changeDetector.markForCheck(); + } } diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts b/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts index 3a49eed49..1a0abc147 100644 --- a/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts +++ b/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts @@ -1,328 +1,328 @@ +import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y'; +import { UniqueSelectionDispatcher } from '@angular/cdk/collections'; import { - AfterViewInit, - booleanAttribute, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DoCheck, - ElementRef, - EventEmitter, - inject, - Input, - numberAttribute, - OnDestroy, - OnInit, - Output, - ViewChild, - ViewEncapsulation, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + DoCheck, + ElementRef, + EventEmitter, + inject, + Input, + numberAttribute, + OnDestroy, + OnInit, + Output, + ViewChild, + ViewEncapsulation, } from '@angular/core'; -import { BrnRadioGroupComponent } from './brn-radio-group.component'; -import { UniqueSelectionDispatcher } from '@angular/cdk/collections'; -import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y'; import { BrnRadioChange } from './brn-radio-change'; +import { BrnRadioGroupComponent } from './brn-radio-group.component'; let nextUniqueId = 0; @Component({ - selector: 'brn-radio', - standalone: true, - imports: [], - host: { - class: 'brn-radio', - '[attr.id]': 'id', - '[class.brn-radio-checked]': 'checked', - '[class.brn-radio-disabled]': 'disabled', - '[attr.data-checked]': 'checked', - '[attr.data-disabled]': 'disabled', - '[attr.data-value]': 'value', - // Needs to be removed since it causes some a11y issues (see #21266). - '[attr.tabindex]': 'null', - '[attr.aria-label]': 'null', - '[attr.aria-labelledby]': 'null', - '[attr.aria-describedby]': 'null', - // Note: under normal conditions focus shouldn't land on this element, however it may be - // programmatically set, for example inside of a focus trap, in this case we want to forward - // the focus to the native element. - '(focus)': '_inputElement.nativeElement.focus()', - }, - exportAs: 'brnRadio', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - template: ` -
- -
- - - `, + selector: 'brn-radio', + standalone: true, + imports: [], + host: { + class: 'brn-radio', + '[attr.id]': 'id', + '[class.brn-radio-checked]': 'checked', + '[class.brn-radio-disabled]': 'disabled', + '[attr.data-checked]': 'checked', + '[attr.data-disabled]': 'disabled', + '[attr.data-value]': 'value', + // Needs to be removed since it causes some a11y issues (see #21266). + '[attr.tabindex]': 'null', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', + '[attr.aria-describedby]': 'null', + // Note: under normal conditions focus shouldn't land on this element, however it may be + // programmatically set, for example inside of a focus trap, in this case we want to forward + // the focus to the native element. + '(focus)': '_inputElement.nativeElement.focus()', + }, + exportAs: 'brnRadio', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` +
+ +
+ + + `, }) export class BrnRadioComponent implements FocusableOption, OnInit, AfterViewInit, DoCheck, OnDestroy { - private _focusMonitor = inject(FocusMonitor); - private _elementRef = inject(ElementRef); - private _radioDispatcher = inject(UniqueSelectionDispatcher); - protected _changeDetector = inject(ChangeDetectorRef); - public radioGroup = inject(BrnRadioGroupComponent, { optional: true }); - - private _disabled = false; - @Input({ transform: booleanAttribute }) - get disabled(): boolean { - return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled); - } - set disabled(value: boolean) { - this._setDisabled(value); - } - - private _defaultTabIndex = 0; - @Input({ transform: numberAttribute }) - set defaultTabIndex(value: number) { - this._defaultTabIndex = value; - } - - private _tabIndex = 0; - @Input({ transform: numberAttribute }) - get tabIndex(): number { - return this.disabled ? -1 : this._tabIndex; - } - set tabIndex(value: number) { - this._tabIndex = value != null ? value : this._defaultTabIndex; - } - - private _uniqueId = `brn-radio-${++nextUniqueId}`; - - @Input() - id = this._uniqueId; - // will be overwritten with radio group name if group exists - @Input() - name = this._uniqueId; - @Input('aria-label') - ariaLabel?: string; - @Input('aria-labelledby') - ariaLabelledby?: string; - @Input('aria-describedby') - ariaDescribedby?: string; - - private _checked = false; - @Input({ transform: booleanAttribute }) - get checked(): boolean { - return this._checked; - } - - set checked(value: boolean) { - const newCheckedState = value; - if (this._checked !== newCheckedState) { - this._checked = newCheckedState; - if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) { - this.radioGroup.selected = this; - } else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) { - // When unchecking the selected radio button, update the selected radio - // property on the group. - this.radioGroup.selected = null; - } - - if (newCheckedState) { - // Notify all radio buttons with the same name to un-check. - this._radioDispatcher.notify(this.id, this.name); - } - this._changeDetector.markForCheck(); - } - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private _value: any = null; - @Input({ required: true }) - // eslint-disable-next-line @typescript-eslint/no-explicit-any - get value(): any { - return this._value; - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - set value(value: any) { - if (this._value !== value) { - this._value = value; - if (this.radioGroup !== null) { - if (!this.checked) { - // Update checked when the value changed to match the radio group's value - this.checked = this.radioGroup.value === value; - } - if (this.checked) { - this.radioGroup.selected = this; - } - } - } - } - - private _required = false; - @Input({ transform: booleanAttribute }) - get required(): boolean { - return this._required || (this.radioGroup !== null && this.radioGroup.required); - } - - set required(value: boolean) { - this._required = value; - } - - @Output() - // eslint-disable-next-line @angular-eslint/no-output-native - readonly change = new EventEmitter(); - - get inputId(): string { - return `${this.id || this._uniqueId}-input`; - } - - // eslint-disable-next-line @typescript-eslint/no-empty-function - private _removeUniqueSelectionListener: () => void = () => {}; - - private _previousTabIndex: number | undefined; - - @ViewChild('input') - _inputElement?: ElementRef; - - /** Focuses the radio button. */ - focus(origin?: FocusOrigin): void { - if (!this._inputElement) return; - if (origin) { - this._focusMonitor.focusVia(this._inputElement, origin); - } else { - this._inputElement.nativeElement.focus(); - } - } - - _markForCheck() { - this._changeDetector.markForCheck(); - } - - ngOnInit() { - if (this.radioGroup) { - // If the radio is inside a radio group, determine if it should be checked - this.checked = this.radioGroup.value === this._value; - - if (this.checked) { - this.radioGroup.selected = this; - } - - // Copy name from parent radio group - this.name = this.radioGroup.name; - } - - this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => { - if (id !== this.id && name === this.name) { - this.checked = false; - } - }); - } - - ngDoCheck(): void { - this._updateTabIndex(); - } - - ngAfterViewInit() { - this._updateTabIndex(); - this._focusMonitor.monitor(this._elementRef, true).subscribe((focusOrigin) => { - if (!focusOrigin && this.radioGroup) { - this.radioGroup._touch(); - } - }); - } - - ngOnDestroy() { - this._focusMonitor.stopMonitoring(this._elementRef); - this._removeUniqueSelectionListener(); - } - - /** Dispatch change event with current value. */ - private _emitChangeEvent(): void { - this.change.emit(new BrnRadioChange(this, this._value)); - } - - _onInputClick(event: Event) { - // We have to stop propagation for click events on the visual hidden input element. - // By default, when a user clicks on a label element, a generated click event will be - // dispatched on the associated input element. Since we are using a label element as our - // root container, the click event on the `radio-button` will be executed twice. - // The real click event will bubble up, and the generated click event also tries to bubble up. - // This will lead to multiple click events. - // Preventing bubbling for the second event will solve that issue. - event.stopPropagation(); - } - - _onInputInteraction(event: Event) { - // We always have to stop propagation on the change event. - // Otherwise the change event, from the input element, will bubble up and - // emit its event object to the `change` output. - event.stopPropagation(); - - if (!this.checked && !this.disabled) { - const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value; - this.checked = true; - this._emitChangeEvent(); - - if (this.radioGroup) { - this.radioGroup._controlValueAccessorChangeFn(this.value); - if (groupValueChanged) { - this.radioGroup._emitChangeEvent(); - } - } - } - } - - /** Triggered when the user clicks on the touch target. */ - _onTouchTargetClick(event: Event) { - this._onInputInteraction(event); - - if (!this.disabled && this._inputElement) { - // Normally the input should be focused already, but if the click - // comes from the touch target, then we might have to focus it ourselves. - this._inputElement.nativeElement.focus(); - } - } - - protected _setDisabled(value: boolean) { - if (this._disabled !== value) { - this._disabled = value; - this._changeDetector.markForCheck(); - } - } - - private _updateTabIndex() { - const group = this.radioGroup; - let value: number; - - // Implement a roving tabindex if the button is inside a group. For most cases this isn't - // necessary, because the browser handles the tab order for inputs inside a group automatically, - // but we need an explicitly higher tabindex for the selected button in order for things like - // the focus trap to pick it up correctly. - if (!group || !group.selected || this.disabled) { - value = this.tabIndex; - } else { - value = group.selected === this ? this.tabIndex : -1; - } - - if (value !== this._previousTabIndex) { - // We have to set the tabindex directly on the DOM node, because it depends on - // the selected state which is prone to "changed after checked errors". - const input: HTMLInputElement | undefined = this._inputElement?.nativeElement; - - if (input) { - input.setAttribute('tabindex', value + ''); - this._previousTabIndex = value; - } - } - } + private _focusMonitor = inject(FocusMonitor); + private _elementRef = inject(ElementRef); + private _radioDispatcher = inject(UniqueSelectionDispatcher); + protected _changeDetector = inject(ChangeDetectorRef); + public radioGroup = inject(BrnRadioGroupComponent, { optional: true }); + + private _disabled = false; + @Input({ transform: booleanAttribute }) + get disabled(): boolean { + return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled); + } + set disabled(value: boolean) { + this._setDisabled(value); + } + + private _defaultTabIndex = 0; + @Input({ transform: numberAttribute }) + set defaultTabIndex(value: number) { + this._defaultTabIndex = value; + } + + private _tabIndex = 0; + @Input({ transform: numberAttribute }) + get tabIndex(): number { + return this.disabled ? -1 : this._tabIndex; + } + set tabIndex(value: number) { + this._tabIndex = value != null ? value : this._defaultTabIndex; + } + + private _uniqueId = `brn-radio-${++nextUniqueId}`; + + @Input() + id = this._uniqueId; + // will be overwritten with radio group name if group exists + @Input() + name = this._uniqueId; + @Input('aria-label') + ariaLabel?: string; + @Input('aria-labelledby') + ariaLabelledby?: string; + @Input('aria-describedby') + ariaDescribedby?: string; + + private _checked = false; + @Input({ transform: booleanAttribute }) + get checked(): boolean { + return this._checked; + } + + set checked(value: boolean) { + const newCheckedState = value; + if (this._checked !== newCheckedState) { + this._checked = newCheckedState; + if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) { + this.radioGroup.selected = this; + } else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) { + // When unchecking the selected radio button, update the selected radio + // property on the group. + this.radioGroup.selected = null; + } + + if (newCheckedState) { + // Notify all radio buttons with the same name to un-check. + this._radioDispatcher.notify(this.id, this.name); + } + this._changeDetector.markForCheck(); + } + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private _value: any = null; + @Input({ required: true }) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + get value(): any { + return this._value; + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + set value(value: any) { + if (this._value !== value) { + this._value = value; + if (this.radioGroup !== null) { + if (!this.checked) { + // Update checked when the value changed to match the radio group's value + this.checked = this.radioGroup.value === value; + } + if (this.checked) { + this.radioGroup.selected = this; + } + } + } + } + + private _required = false; + @Input({ transform: booleanAttribute }) + get required(): boolean { + return this._required || (this.radioGroup !== null && this.radioGroup.required); + } + + set required(value: boolean) { + this._required = value; + } + + @Output() + // eslint-disable-next-line @angular-eslint/no-output-native + readonly change = new EventEmitter(); + + get inputId(): string { + return `${this.id || this._uniqueId}-input`; + } + + // eslint-disable-next-line @typescript-eslint/no-empty-function + private _removeUniqueSelectionListener: () => void = () => {}; + + private _previousTabIndex: number | undefined; + + @ViewChild('input') + _inputElement?: ElementRef; + + /** Focuses the radio button. */ + focus(origin?: FocusOrigin): void { + if (!this._inputElement) return; + if (origin) { + this._focusMonitor.focusVia(this._inputElement, origin); + } else { + this._inputElement.nativeElement.focus(); + } + } + + _markForCheck() { + this._changeDetector.markForCheck(); + } + + ngOnInit() { + if (this.radioGroup) { + // If the radio is inside a radio group, determine if it should be checked + this.checked = this.radioGroup.value === this._value; + + if (this.checked) { + this.radioGroup.selected = this; + } + + // Copy name from parent radio group + this.name = this.radioGroup.name; + } + + this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => { + if (id !== this.id && name === this.name) { + this.checked = false; + } + }); + } + + ngDoCheck(): void { + this._updateTabIndex(); + } + + ngAfterViewInit() { + this._updateTabIndex(); + this._focusMonitor.monitor(this._elementRef, true).subscribe((focusOrigin) => { + if (!focusOrigin && this.radioGroup) { + this.radioGroup._touch(); + } + }); + } + + ngOnDestroy() { + this._focusMonitor.stopMonitoring(this._elementRef); + this._removeUniqueSelectionListener(); + } + + /** Dispatch change event with current value. */ + private _emitChangeEvent(): void { + this.change.emit(new BrnRadioChange(this, this._value)); + } + + _onInputClick(event: Event) { + // We have to stop propagation for click events on the visual hidden input element. + // By default, when a user clicks on a label element, a generated click event will be + // dispatched on the associated input element. Since we are using a label element as our + // root container, the click event on the `radio-button` will be executed twice. + // The real click event will bubble up, and the generated click event also tries to bubble up. + // This will lead to multiple click events. + // Preventing bubbling for the second event will solve that issue. + event.stopPropagation(); + } + + _onInputInteraction(event: Event) { + // We always have to stop propagation on the change event. + // Otherwise the change event, from the input element, will bubble up and + // emit its event object to the `change` output. + event.stopPropagation(); + + if (!this.checked && !this.disabled) { + const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value; + this.checked = true; + this._emitChangeEvent(); + + if (this.radioGroup) { + this.radioGroup._controlValueAccessorChangeFn(this.value); + if (groupValueChanged) { + this.radioGroup._emitChangeEvent(); + } + } + } + } + + /** Triggered when the user clicks on the touch target. */ + _onTouchTargetClick(event: Event) { + this._onInputInteraction(event); + + if (!this.disabled && this._inputElement) { + // Normally the input should be focused already, but if the click + // comes from the touch target, then we might have to focus it ourselves. + this._inputElement.nativeElement.focus(); + } + } + + protected _setDisabled(value: boolean) { + if (this._disabled !== value) { + this._disabled = value; + this._changeDetector.markForCheck(); + } + } + + private _updateTabIndex() { + const group = this.radioGroup; + let value: number; + + // Implement a roving tabindex if the button is inside a group. For most cases this isn't + // necessary, because the browser handles the tab order for inputs inside a group automatically, + // but we need an explicitly higher tabindex for the selected button in order for things like + // the focus trap to pick it up correctly. + if (!group || !group.selected || this.disabled) { + value = this.tabIndex; + } else { + value = group.selected === this ? this.tabIndex : -1; + } + + if (value !== this._previousTabIndex) { + // We have to set the tabindex directly on the DOM node, because it depends on + // the selected state which is prone to "changed after checked errors". + const input: HTMLInputElement | undefined = this._inputElement?.nativeElement; + + if (input) { + input.setAttribute('tabindex', value + ''); + this._previousTabIndex = value; + } + } + } } diff --git a/libs/ui/radio-group/brain/src/test-setup.ts b/libs/ui/radio-group/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/radio-group/brain/src/test-setup.ts +++ b/libs/ui/radio-group/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/radio-group/brain/tsconfig.json b/libs/ui/radio-group/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/radio-group/brain/tsconfig.json +++ b/libs/ui/radio-group/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/radio-group/brain/tsconfig.lib.json b/libs/ui/radio-group/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/radio-group/brain/tsconfig.lib.json +++ b/libs/ui/radio-group/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/radio-group/brain/tsconfig.lib.prod.json b/libs/ui/radio-group/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/radio-group/brain/tsconfig.lib.prod.json +++ b/libs/ui/radio-group/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/radio-group/brain/tsconfig.spec.json b/libs/ui/radio-group/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/radio-group/brain/tsconfig.spec.json +++ b/libs/ui/radio-group/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/radio-group/helm/.eslintrc.json b/libs/ui/radio-group/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/radio-group/helm/.eslintrc.json +++ b/libs/ui/radio-group/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/radio-group/helm/jest.config.ts b/libs/ui/radio-group/helm/jest.config.ts index 6cbf5de3c..81769963d 100644 --- a/libs/ui/radio-group/helm/jest.config.ts +++ b/libs/ui/radio-group/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-radio-group-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-radio-group-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/radio-group/helm/ng-package.json b/libs/ui/radio-group/helm/ng-package.json index 5c4451e9d..9a996e9b7 100644 --- a/libs/ui/radio-group/helm/ng-package.json +++ b/libs/ui/radio-group/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/radio-group/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/radio-group/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/radio-group/helm/package.json b/libs/ui/radio-group/helm/package.json index b4c01eb0f..394329aec 100644 --- a/libs/ui/radio-group/helm/package.json +++ b/libs/ui/radio-group/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-radiogroup-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-radiogroup-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/radio-group/helm/project.json b/libs/ui/radio-group/helm/project.json index 024162527..474f29acb 100644 --- a/libs/ui/radio-group/helm/project.json +++ b/libs/ui/radio-group/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-radio-group-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/radio-group/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/radio-group/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/radio-group/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/radio-group/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/radio-group/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/radio-group/helm/**/*.ts", - "libs/ui/radio-group/helm/**/*.html", - "libs/ui/radio-group/helm/package.json", - "libs/ui/radio-group/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-radio-group-helm" - } - } - } + "name": "ui-radio-group-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/radio-group/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/radio-group/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/radio-group/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/radio-group/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/radio-group/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/radio-group/helm/**/*.ts", + "libs/ui/radio-group/helm/**/*.html", + "libs/ui/radio-group/helm/package.json", + "libs/ui/radio-group/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-radio-group-helm" + } + } + } } diff --git a/libs/ui/radio-group/helm/src/index.ts b/libs/ui/radio-group/helm/src/index.ts index dffd8bb74..1deea33c9 100644 --- a/libs/ui/radio-group/helm/src/index.ts +++ b/libs/ui/radio-group/helm/src/index.ts @@ -1,17 +1,17 @@ import { NgModule } from '@angular/core'; import { HlmRadioGroupDirective } from './lib/hlm-radio-group.directive'; -import { HlmRadioDirective } from './lib/hlm-radio.directive'; import { HlmRadioIndicatorComponent } from './lib/hlm-radio-indicator.component'; +import { HlmRadioDirective } from './lib/hlm-radio.directive'; -export * from './lib/hlm-radio.directive'; export * from './lib/hlm-radio-group.directive'; export * from './lib/hlm-radio-indicator.component'; +export * from './lib/hlm-radio.directive'; export const HlmRadioGroupImports = [HlmRadioGroupDirective, HlmRadioDirective, HlmRadioIndicatorComponent]; @NgModule({ - imports: [...HlmRadioGroupImports], - exports: [...HlmRadioGroupImports], + imports: [...HlmRadioGroupImports], + exports: [...HlmRadioGroupImports], }) export class HlmRadioGroupModule {} diff --git a/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts b/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts index 16535669a..6c0cd92b5 100644 --- a/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts +++ b/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: 'brn-radio-group[hlm],[hlmRadioGroup]', - standalone: true, + selector: 'brn-radio-group[hlm],[hlmRadioGroup]', + standalone: true, }) export class HlmRadioGroupDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('block', this._inputs); - } + generateClass() { + return hlm('block', this._inputs); + } } diff --git a/libs/ui/radio-group/helm/src/lib/hlm-radio-indicator.component.ts b/libs/ui/radio-group/helm/src/lib/hlm-radio-indicator.component.ts index 142e810db..13675371b 100644 --- a/libs/ui/radio-group/helm/src/lib/hlm-radio-indicator.component.ts +++ b/libs/ui/radio-group/helm/src/lib/hlm-radio-indicator.component.ts @@ -1,35 +1,35 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; const btnLike = - 'aspect-square rounded-full ring-offset-background group-[.cdk-keyboard-focused]:ring-2 group-[.cdk-keyboard-focused]:ring-ring group-[.cdk-keyboard-focused]:ring-offset-2 group-[.brn-radio-disabled]:cursor-not-allowed group-[.brn-radio-disabled]:opacity-50'; + 'aspect-square rounded-full ring-offset-background group-[.cdk-keyboard-focused]:ring-2 group-[.cdk-keyboard-focused]:ring-ring group-[.cdk-keyboard-focused]:ring-offset-2 group-[.brn-radio-disabled]:cursor-not-allowed group-[.brn-radio-disabled]:opacity-50'; @Component({ - selector: 'hlm-radio-indicator', - standalone: true, - host: { - class: 'relative', - }, - template: ` - -
- `, + selector: 'hlm-radio-indicator', + standalone: true, + host: { + class: 'relative', + }, + template: ` + +
+ `, }) export class HlmRadioIndicatorComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('inline-flex h-4 w-4', this._inputs); - } + generateClass() { + return hlm('inline-flex h-4 w-4', this._inputs); + } } diff --git a/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts b/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts index da6f45a3b..0b1cabf4e 100644 --- a/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts +++ b/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts @@ -1,23 +1,23 @@ import { Directive, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Directive({ - selector: 'brn-radio[hlm],[hlmRadio]', - standalone: true, + selector: 'brn-radio[hlm],[hlmRadio]', + standalone: true, }) export class HlmRadioDirective { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this._inputs); - } + generateClass() { + return hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this._inputs); + } } diff --git a/libs/ui/radio-group/helm/src/test-setup.ts b/libs/ui/radio-group/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/radio-group/helm/src/test-setup.ts +++ b/libs/ui/radio-group/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/radio-group/helm/tsconfig.json b/libs/ui/radio-group/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/radio-group/helm/tsconfig.json +++ b/libs/ui/radio-group/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/radio-group/helm/tsconfig.lib.json b/libs/ui/radio-group/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/radio-group/helm/tsconfig.lib.json +++ b/libs/ui/radio-group/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/radio-group/helm/tsconfig.lib.prod.json b/libs/ui/radio-group/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/radio-group/helm/tsconfig.lib.prod.json +++ b/libs/ui/radio-group/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/radio-group/helm/tsconfig.spec.json b/libs/ui/radio-group/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/radio-group/helm/tsconfig.spec.json +++ b/libs/ui/radio-group/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/radio-group/radio-group.stories.ts b/libs/ui/radio-group/radio-group.stories.ts index 911c8bb43..9541a2404 100644 --- a/libs/ui/radio-group/radio-group.stories.ts +++ b/libs/ui/radio-group/radio-group.stories.ts @@ -1,75 +1,76 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; -import { BrnRadioGroupImports } from './brain/src'; import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { HlmIconComponent } from '../icon/helm/src'; import { provideIcons } from '@ng-icons/core'; import { radixCircle, radixRadiobutton } from '@ng-icons/radix-icons'; -import { HlmRadioGroupImports } from './helm/src'; +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent } from '../icon/helm/src'; import { HlmCodeDirective, HlmSmallDirective } from '../typography/helm/src'; +import { BrnRadioGroupImports } from './brain/src'; +import { HlmRadioGroupImports } from './helm/src'; @Component({ - selector: 'radio-group-example', - standalone: true, - imports: [ - HlmRadioGroupImports, - BrnRadioGroupImports, - FormsModule, - HlmIconComponent, - HlmButtonDirective, - HlmCodeDirective, - HlmSmallDirective, - ], - providers: [provideIcons({ radixRadiobutton, radixCircle })], - template: ` - Choose a version - - - - v16.1.4 - - - - v16.0.0 - - - - v15.8.0 - - - - v15.2.0 - - -
- - -
- Current Version: {{ version ?? 'none' }} - - `, + selector: 'radio-group-example', + standalone: true, + imports: [ + HlmRadioGroupImports, + BrnRadioGroupImports, + FormsModule, + HlmIconComponent, + HlmButtonDirective, + HlmCodeDirective, + HlmSmallDirective, + ], + providers: [provideIcons({ radixRadiobutton, radixCircle })], + template: ` + Choose a version + + + + v16.1.4 + + + + v16.0.0 + + + + v15.8.0 + + + + v15.2.0 + + +
+ + +
+ + Current Version: + {{ version ?? 'none' }} + + `, }) class RadioGroupExampleComponent { - version: string | null = '16.1.4'; + version: string | null = '16.1.4'; } const meta: Meta<{}> = { - title: 'Radio Group', - decorators: [ - moduleMetadata({ - imports: [RadioGroupExampleComponent], - providers: [], - }), - ], + title: 'Radio Group', + decorators: [ + moduleMetadata({ + imports: [RadioGroupExampleComponent], + providers: [], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ``, - }), + render: () => ({ + template: ``, + }), }; diff --git a/libs/ui/scroll-area/helm/.eslintrc.json b/libs/ui/scroll-area/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/scroll-area/helm/.eslintrc.json +++ b/libs/ui/scroll-area/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/scroll-area/helm/jest.config.ts b/libs/ui/scroll-area/helm/jest.config.ts index 41eec1b78..493eb87e2 100644 --- a/libs/ui/scroll-area/helm/jest.config.ts +++ b/libs/ui/scroll-area/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-scroll-area-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/ui/scroll-area/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-scroll-area-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/ui/scroll-area/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/scroll-area/helm/ng-package.json b/libs/ui/scroll-area/helm/ng-package.json index 2d9c2a915..4d4a0bcfb 100644 --- a/libs/ui/scroll-area/helm/ng-package.json +++ b/libs/ui/scroll-area/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/scroll-area/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/scroll-area/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/scroll-area/helm/package.json b/libs/ui/scroll-area/helm/package.json index 026cf3628..926ee2ea8 100644 --- a/libs/ui/scroll-area/helm/package.json +++ b/libs/ui/scroll-area/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-scrollarea-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "ngx-scrollbar": "^13.0.1", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-scrollarea-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "ngx-scrollbar": "^13.0.1", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/scroll-area/helm/project.json b/libs/ui/scroll-area/helm/project.json index 776da59d0..1604bc0ad 100644 --- a/libs/ui/scroll-area/helm/project.json +++ b/libs/ui/scroll-area/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-scroll-area-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/scroll-area/helm/src", - "prefix": "hlm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/scroll-area/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/scroll-area/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/scroll-area/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/scroll-area/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/scroll-area/helm/**/*.ts", - "libs/ui/scroll-area/helm/**/*.html", - "libs/ui/scroll-area/helm/package.json", - "libs/ui/scroll-area/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-scroll-area-helm" - } - } - } + "name": "ui-scroll-area-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/scroll-area/helm/src", + "prefix": "hlm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/scroll-area/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/scroll-area/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/scroll-area/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/scroll-area/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/scroll-area/helm/**/*.ts", + "libs/ui/scroll-area/helm/**/*.html", + "libs/ui/scroll-area/helm/package.json", + "libs/ui/scroll-area/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-scroll-area-helm" + } + } + } } diff --git a/libs/ui/scroll-area/helm/src/index.ts b/libs/ui/scroll-area/helm/src/index.ts index da8735cf2..764f1e3ed 100644 --- a/libs/ui/scroll-area/helm/src/index.ts +++ b/libs/ui/scroll-area/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmScrollAreaComponent } from './lib/hlm-scroll-area.component'; export * from './lib/hlm-scroll-area.component'; @NgModule({ - imports: [HlmScrollAreaComponent], - exports: [HlmScrollAreaComponent], + imports: [HlmScrollAreaComponent], + exports: [HlmScrollAreaComponent], }) export class HlmScrollAreaModule {} diff --git a/libs/ui/scroll-area/helm/src/lib/hlm-scroll-area.component.ts b/libs/ui/scroll-area/helm/src/lib/hlm-scroll-area.component.ts index ac7f3edf0..14b35e624 100644 --- a/libs/ui/scroll-area/helm/src/lib/hlm-scroll-area.component.ts +++ b/libs/ui/scroll-area/helm/src/lib/hlm-scroll-area.component.ts @@ -1,53 +1,53 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; import { NgScrollbarModule } from 'ngx-scrollbar'; @Component({ - selector: 'hlm-scroll-area', - standalone: true, - imports: [NgScrollbarModule], - template: ` - - - - `, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + selector: 'hlm-scroll-area', + standalone: true, + imports: [NgScrollbarModule], + template: ` + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, }) export class HlmScrollAreaComponent { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @Input() - public track: 'vertical' | 'horizontal' | 'all' = 'all'; - @Input() - autoHeightDisabled = false; - @Input() - autoWidthDisabled = false; - @Input() - visibility: 'hover' | 'always' | 'native' = 'native'; + @Input() + public track: 'vertical' | 'horizontal' | 'all' = 'all'; + @Input() + autoHeightDisabled = false; + @Input() + autoWidthDisabled = false; + @Input() + visibility: 'hover' | 'always' | 'native' = 'native'; - private generateClasses() { - return hlm('block', this._inputs); - } + private generateClasses() { + return hlm('block', this._inputs); + } } diff --git a/libs/ui/scroll-area/helm/src/test-setup.ts b/libs/ui/scroll-area/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/scroll-area/helm/src/test-setup.ts +++ b/libs/ui/scroll-area/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/scroll-area/helm/tsconfig.json b/libs/ui/scroll-area/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/scroll-area/helm/tsconfig.json +++ b/libs/ui/scroll-area/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/scroll-area/helm/tsconfig.lib.json b/libs/ui/scroll-area/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/scroll-area/helm/tsconfig.lib.json +++ b/libs/ui/scroll-area/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/scroll-area/helm/tsconfig.lib.prod.json b/libs/ui/scroll-area/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/scroll-area/helm/tsconfig.lib.prod.json +++ b/libs/ui/scroll-area/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/scroll-area/helm/tsconfig.spec.json b/libs/ui/scroll-area/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/scroll-area/helm/tsconfig.spec.json +++ b/libs/ui/scroll-area/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/scroll-area/scroll-area.stories.ts b/libs/ui/scroll-area/scroll-area.stories.ts index 0435a0be9..c0860dc45 100644 --- a/libs/ui/scroll-area/scroll-area.stories.ts +++ b/libs/ui/scroll-area/scroll-area.stories.ts @@ -1,53 +1,53 @@ +import { NgFor } from '@angular/common'; +import { Component } from '@angular/core'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; import { HlmSeparatorDirective } from '../separator/helm/src'; import { HlmScrollAreaComponent } from './helm/src'; @Component({ - selector: `scroll-area-stories`, - standalone: true, - imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaComponent], - template: ` - -
-

Tags

-
- {{ tag }} -
-
-
- - `, + selector: `scroll-area-stories`, + standalone: true, + imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaComponent], + template: ` + +
+

Tags

+
+ {{ tag }} +
+
+
+ + `, }) class ScrollAreaStoriesComponent { - tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`); + tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`); } const meta: Meta<{}> = { - title: 'Scroll Area', - decorators: [ - moduleMetadata({ - imports: [HlmScrollAreaComponent, ScrollAreaStoriesComponent], - }), - ], + title: 'Scroll Area', + decorators: [ + moduleMetadata({ + imports: [HlmScrollAreaComponent, ScrollAreaStoriesComponent], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: ` `, - }), + }), }; export const Vertical: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto,
@@ -55,5 +55,5 @@ export const Vertical: Story = { nisi officiis quibusdam rem repellat reprehenderit totam veritatis voluptatibus! Nobis.
`, - }), + }), }; diff --git a/libs/ui/separator/brain/.eslintrc.json b/libs/ui/separator/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/separator/brain/.eslintrc.json +++ b/libs/ui/separator/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/separator/brain/jest.config.ts b/libs/ui/separator/brain/jest.config.ts index c972a538e..7dc3f5051 100644 --- a/libs/ui/separator/brain/jest.config.ts +++ b/libs/ui/separator/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-separator-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-separator-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/separator/brain/ng-package.json b/libs/ui/separator/brain/ng-package.json index c9833159a..0f700b3be 100644 --- a/libs/ui/separator/brain/ng-package.json +++ b/libs/ui/separator/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/separator/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/separator/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/separator/brain/package.json b/libs/ui/separator/brain/package.json index 17089ab21..1e81cfa6a 100644 --- a/libs/ui/separator/brain/package.json +++ b/libs/ui/separator/brain/package.json @@ -1,12 +1,12 @@ { - "name": "@spartan-ng/ui-separator-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-separator-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/separator/brain/project.json b/libs/ui/separator/brain/project.json index b7253dd3a..d27956f3f 100644 --- a/libs/ui/separator/brain/project.json +++ b/libs/ui/separator/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-separator-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/separator/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/separator/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/separator/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/separator/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/separator/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/separator/brain/**/*.ts", - "libs/ui/separator/brain/**/*.html", - "libs/ui/separator/brain/package.json", - "libs/ui/separator/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-separator-brain" - } - } - } + "name": "ui-separator-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/separator/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/separator/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/separator/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/separator/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/separator/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/separator/brain/**/*.ts", + "libs/ui/separator/brain/**/*.html", + "libs/ui/separator/brain/package.json", + "libs/ui/separator/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-separator-brain" + } + } + } } diff --git a/libs/ui/separator/brain/src/index.ts b/libs/ui/separator/brain/src/index.ts index 66164894a..bbbe946d4 100644 --- a/libs/ui/separator/brain/src/index.ts +++ b/libs/ui/separator/brain/src/index.ts @@ -4,7 +4,7 @@ import { BrnSeparatorComponent } from './lib/brn-separator.component'; export * from './lib/brn-separator.component'; @NgModule({ - imports: [BrnSeparatorComponent], - exports: [BrnSeparatorComponent], + imports: [BrnSeparatorComponent], + exports: [BrnSeparatorComponent], }) export class BrnSeparatorModule {} diff --git a/libs/ui/separator/brain/src/lib/brn-separator.component.ts b/libs/ui/separator/brain/src/lib/brn-separator.component.ts index 3519e4bcc..dbcd8ef25 100644 --- a/libs/ui/separator/brain/src/lib/brn-separator.component.ts +++ b/libs/ui/separator/brain/src/lib/brn-separator.component.ts @@ -2,25 +2,25 @@ import { booleanAttribute, Component, Input } from '@angular/core'; export type BrnSeparatorOrientation = 'horizontal' | 'vertical'; @Component({ - selector: 'brn-separator', - standalone: true, - template: '', - host: { - '[role]': '_decorative ? "none" : "separator"', - '[attr.aria-orientation]': '_decorative ? undefined : _orientation === "vertical" ? "vertical" : undefined ', - '[attr.data-orientation]': '_orientation', - }, + selector: 'brn-separator', + standalone: true, + template: '', + host: { + '[role]': '_decorative ? "none" : "separator"', + '[attr.aria-orientation]': '_decorative ? undefined : _orientation === "vertical" ? "vertical" : undefined ', + '[attr.data-orientation]': '_orientation', + }, }) export class BrnSeparatorComponent { - protected _orientation: BrnSeparatorOrientation = 'horizontal'; - @Input() - set orientation(value: BrnSeparatorOrientation) { - this._orientation = value; - } + protected _orientation: BrnSeparatorOrientation = 'horizontal'; + @Input() + set orientation(value: BrnSeparatorOrientation) { + this._orientation = value; + } - protected _decorative = false; - @Input({ transform: booleanAttribute }) - set decorative(value: boolean) { - this._decorative = value; - } + protected _decorative = false; + @Input({ transform: booleanAttribute }) + set decorative(value: boolean) { + this._decorative = value; + } } diff --git a/libs/ui/separator/brain/src/test-setup.ts b/libs/ui/separator/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/separator/brain/src/test-setup.ts +++ b/libs/ui/separator/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/separator/brain/tsconfig.json b/libs/ui/separator/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/separator/brain/tsconfig.json +++ b/libs/ui/separator/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/separator/brain/tsconfig.lib.json b/libs/ui/separator/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/separator/brain/tsconfig.lib.json +++ b/libs/ui/separator/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/separator/brain/tsconfig.lib.prod.json b/libs/ui/separator/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/separator/brain/tsconfig.lib.prod.json +++ b/libs/ui/separator/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/separator/brain/tsconfig.spec.json b/libs/ui/separator/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/separator/brain/tsconfig.spec.json +++ b/libs/ui/separator/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/separator/helm/.eslintrc.json b/libs/ui/separator/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/separator/helm/.eslintrc.json +++ b/libs/ui/separator/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/separator/helm/jest.config.ts b/libs/ui/separator/helm/jest.config.ts index da761916b..895eb8db9 100644 --- a/libs/ui/separator/helm/jest.config.ts +++ b/libs/ui/separator/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-separator-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-separator-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/separator/helm/ng-package.json b/libs/ui/separator/helm/ng-package.json index d02e6c48d..f5448c072 100644 --- a/libs/ui/separator/helm/ng-package.json +++ b/libs/ui/separator/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/separator/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/separator/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/separator/helm/package.json b/libs/ui/separator/helm/package.json index 0e554a4d8..cd04e7cdd 100644 --- a/libs/ui/separator/helm/package.json +++ b/libs/ui/separator/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-separator-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-separator-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/separator/helm/project.json b/libs/ui/separator/helm/project.json index 19f66c434..6a637a20b 100644 --- a/libs/ui/separator/helm/project.json +++ b/libs/ui/separator/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-separator-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/separator/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/separator/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/separator/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/separator/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/separator/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/separator/helm/**/*.ts", - "libs/ui/separator/helm/**/*.html", - "libs/ui/separator/helm/package.json", - "libs/ui/separator/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-separator-helm" - } - } - } + "name": "ui-separator-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/separator/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/separator/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/separator/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/separator/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/separator/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/separator/helm/**/*.ts", + "libs/ui/separator/helm/**/*.html", + "libs/ui/separator/helm/package.json", + "libs/ui/separator/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-separator-helm" + } + } + } } diff --git a/libs/ui/separator/helm/src/index.ts b/libs/ui/separator/helm/src/index.ts index 99474cb97..97cf2a8ba 100644 --- a/libs/ui/separator/helm/src/index.ts +++ b/libs/ui/separator/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmSeparatorDirective } from './lib/hlm-separator.directive'; export * from './lib/hlm-separator.directive'; @NgModule({ - imports: [HlmSeparatorDirective], - exports: [HlmSeparatorDirective], + imports: [HlmSeparatorDirective], + exports: [HlmSeparatorDirective], }) export class HlmSeparatorModule {} diff --git a/libs/ui/separator/helm/src/lib/hlm-separator.directive.ts b/libs/ui/separator/helm/src/lib/hlm-separator.directive.ts index 8be5e8165..cc6af649f 100644 --- a/libs/ui/separator/helm/src/lib/hlm-separator.directive.ts +++ b/libs/ui/separator/helm/src/lib/hlm-separator.directive.ts @@ -4,37 +4,37 @@ import { ClassValue } from 'clsx'; export type HlmSeparatorOrientation = 'horizontal' | 'vertical'; @Directive({ - selector: '[hlmSeparator],brn-separator[hlm]', - standalone: true, + selector: '[hlmSeparator],brn-separator[hlm]', + standalone: true, }) export class HlmSeparatorDirective { - private _orientation: HlmSeparatorOrientation = 'horizontal'; - @Input() - get orientation(): HlmSeparatorOrientation { - return this._orientation; - } + private _orientation: HlmSeparatorOrientation = 'horizontal'; + @Input() + get orientation(): HlmSeparatorOrientation { + return this._orientation; + } - set orientation(value: HlmSeparatorOrientation) { - this._orientation = value; - this._class = this.generateClasses(); - } + set orientation(value: HlmSeparatorOrientation) { + this._orientation = value; + this._class = this.generateClasses(); + } - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm( - 'inline-flex shrink-0 border-0 bg-border', - this._orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'inline-flex shrink-0 border-0 bg-border', + this._orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', + this._inputs, + ); + } } diff --git a/libs/ui/separator/helm/src/test-setup.ts b/libs/ui/separator/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/separator/helm/src/test-setup.ts +++ b/libs/ui/separator/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/separator/helm/tsconfig.json b/libs/ui/separator/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/separator/helm/tsconfig.json +++ b/libs/ui/separator/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/separator/helm/tsconfig.lib.json b/libs/ui/separator/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/separator/helm/tsconfig.lib.json +++ b/libs/ui/separator/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/separator/helm/tsconfig.lib.prod.json b/libs/ui/separator/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/separator/helm/tsconfig.lib.prod.json +++ b/libs/ui/separator/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/separator/helm/tsconfig.spec.json b/libs/ui/separator/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/separator/helm/tsconfig.spec.json +++ b/libs/ui/separator/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/separator/separator.stories.ts b/libs/ui/separator/separator.stories.ts index 5f2b4a31a..f367af91f 100644 --- a/libs/ui/separator/separator.stories.ts +++ b/libs/ui/separator/separator.stories.ts @@ -1,22 +1,22 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; -import { HlmSeparatorDirective } from './helm/src'; import { BrnSeparatorComponent } from './brain/src'; +import { HlmSeparatorDirective } from './helm/src'; const meta: Meta<{}> = { - title: 'Separator', - decorators: [ - moduleMetadata({ - imports: [BrnSeparatorComponent, HlmSeparatorDirective], - }), - ], + title: 'Separator', + decorators: [ + moduleMetadata({ + imports: [BrnSeparatorComponent, HlmSeparatorDirective], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `

Radix Primitives

@@ -34,5 +34,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/sheet/brain/.eslintrc.json b/libs/ui/sheet/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/sheet/brain/.eslintrc.json +++ b/libs/ui/sheet/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/sheet/brain/jest.config.ts b/libs/ui/sheet/brain/jest.config.ts index 270083da1..d09bc4e36 100644 --- a/libs/ui/sheet/brain/jest.config.ts +++ b/libs/ui/sheet/brain/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-sheet-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-sheet-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/sheet/brain/ng-package.json b/libs/ui/sheet/brain/ng-package.json index e8c2bb33d..962708040 100644 --- a/libs/ui/sheet/brain/ng-package.json +++ b/libs/ui/sheet/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/sheet/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/sheet/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/sheet/brain/package.json b/libs/ui/sheet/brain/package.json index e67352284..3f3c8e567 100644 --- a/libs/ui/sheet/brain/package.json +++ b/libs/ui/sheet/brain/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-sheet-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.311", - "@spartan-ng/ui-core": "0.0.1-alpha.311" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-sheet-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.311", + "@spartan-ng/ui-core": "0.0.1-alpha.311" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/sheet/brain/project.json b/libs/ui/sheet/brain/project.json index 8335b3dbd..7d70bb409 100644 --- a/libs/ui/sheet/brain/project.json +++ b/libs/ui/sheet/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-sheet-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/sheet/brain/src", - "prefix": "brain", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/sheet/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/sheet/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/sheet/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/sheet/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/sheet/brain/**/*.ts", - "libs/ui/sheet/brain/**/*.html", - "libs/ui/sheet/brain/package.json", - "libs/ui/sheet/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-sheet-brain" - } - } - } + "name": "ui-sheet-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/sheet/brain/src", + "prefix": "brain", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/sheet/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/sheet/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/sheet/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/sheet/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/sheet/brain/**/*.ts", + "libs/ui/sheet/brain/**/*.html", + "libs/ui/sheet/brain/package.json", + "libs/ui/sheet/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-sheet-brain" + } + } + } } diff --git a/libs/ui/sheet/brain/src/index.ts b/libs/ui/sheet/brain/src/index.ts index 1bbeb32e1..a193ea414 100644 --- a/libs/ui/sheet/brain/src/index.ts +++ b/libs/ui/sheet/brain/src/index.ts @@ -1,33 +1,33 @@ import { NgModule } from '@angular/core'; -import { BrnSheetComponent } from './lib/brn-sheet.component'; -import { BrnSheetOverlayComponent } from './lib/brn-sheet-overlay.component'; -import { BrnSheetTriggerDirective } from './lib/brn-sheet-trigger.directive'; import { BrnSheetCloseDirective } from './lib/brn-sheet-close.directive'; import { BrnSheetContentDirective } from './lib/brn-sheet-content.directive'; -import { BrnSheetTitleDirective } from './lib/brn-sheet-title.directive'; import { BrnSheetDescriptionDirective } from './lib/brn-sheet-description.directive'; +import { BrnSheetOverlayComponent } from './lib/brn-sheet-overlay.component'; +import { BrnSheetTitleDirective } from './lib/brn-sheet-title.directive'; +import { BrnSheetTriggerDirective } from './lib/brn-sheet-trigger.directive'; +import { BrnSheetComponent } from './lib/brn-sheet.component'; -export * from './lib/brn-sheet.component'; -export * from './lib/brn-sheet-overlay.component'; -export * from './lib/brn-sheet-trigger.directive'; export * from './lib/brn-sheet-close.directive'; export * from './lib/brn-sheet-content.directive'; -export * from './lib/brn-sheet-title.directive'; export * from './lib/brn-sheet-description.directive'; +export * from './lib/brn-sheet-overlay.component'; +export * from './lib/brn-sheet-title.directive'; +export * from './lib/brn-sheet-trigger.directive'; +export * from './lib/brn-sheet.component'; export const BrnSheetImports = [ - BrnSheetComponent, - BrnSheetOverlayComponent, - BrnSheetTriggerDirective, - BrnSheetCloseDirective, - BrnSheetContentDirective, - BrnSheetTitleDirective, - BrnSheetDescriptionDirective, + BrnSheetComponent, + BrnSheetOverlayComponent, + BrnSheetTriggerDirective, + BrnSheetCloseDirective, + BrnSheetContentDirective, + BrnSheetTitleDirective, + BrnSheetDescriptionDirective, ] as const; @NgModule({ - imports: [...BrnSheetImports], - exports: [...BrnSheetImports], + imports: [...BrnSheetImports], + exports: [...BrnSheetImports], }) export class BrnSheetModule {} diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-close.directive.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-close.directive.ts index 557b15111..d723bcc43 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-close.directive.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet-close.directive.ts @@ -2,7 +2,7 @@ import { Directive } from '@angular/core'; import { BrnDialogCloseDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: 'button[brnSheetClose]', - standalone: true, + selector: 'button[brnSheetClose]', + standalone: true, }) export class BrnSheetCloseDirective extends BrnDialogCloseDirective {} diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-content.directive.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-content.directive.ts index 0b391beac..47d5d9e7e 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-content.directive.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet-content.directive.ts @@ -4,19 +4,19 @@ import { BrnDialogContentDirective } from '@spartan-ng/ui-dialog-brain'; import { BrnSheetComponent } from './brn-sheet.component'; @Directive({ - selector: '[brnSheetContent]', - standalone: true, - providers: [ - { - provide: EXPOSES_STATE_TOKEN, - useExisting: forwardRef(() => BrnSheetContentDirective), - }, - { - provide: EXPOSES_SIDE_TOKEN, - useExisting: forwardRef(() => BrnSheetContentDirective), - }, - ], + selector: '[brnSheetContent]', + standalone: true, + providers: [ + { + provide: EXPOSES_STATE_TOKEN, + useExisting: forwardRef(() => BrnSheetContentDirective), + }, + { + provide: EXPOSES_SIDE_TOKEN, + useExisting: forwardRef(() => BrnSheetContentDirective), + }, + ], }) export class BrnSheetContentDirective extends BrnDialogContentDirective { - public readonly side = inject(BrnSheetComponent).side; + public readonly side = inject(BrnSheetComponent).side; } diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-description.directive.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-description.directive.ts index 2687aed30..1603caf89 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-description.directive.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet-description.directive.ts @@ -2,10 +2,10 @@ import { Directive } from '@angular/core'; import { BrnDialogDescriptionDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: '[brnSheetDescription]', - standalone: true, - host: { - '[id]': '_id()', - }, + selector: '[brnSheetDescription]', + standalone: true, + host: { + '[id]': '_id()', + }, }) export class BrnSheetDescriptionDirective extends BrnDialogDescriptionDirective {} diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-overlay.component.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-overlay.component.ts index bc6eac413..1c281223a 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-overlay.component.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet-overlay.component.ts @@ -3,16 +3,16 @@ import { SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core'; import { BrnDialogOverlayComponent } from '@spartan-ng/ui-dialog-brain'; @Component({ - selector: 'brn-sheet-overlay', - standalone: true, - providers: [ - { - provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, - useExisting: forwardRef(() => BrnSheetOverlayComponent), - }, - ], - template: ``, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + selector: 'brn-sheet-overlay', + standalone: true, + providers: [ + { + provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, + useExisting: forwardRef(() => BrnSheetOverlayComponent), + }, + ], + template: ``, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, }) export class BrnSheetOverlayComponent extends BrnDialogOverlayComponent {} diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-title.directive.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-title.directive.ts index 16de0dbdf..c2435ecd8 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-title.directive.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet-title.directive.ts @@ -2,10 +2,10 @@ import { Directive } from '@angular/core'; import { BrnDialogTitleDirective } from '@spartan-ng/ui-dialog-brain'; @Directive({ - selector: '[brnSheetTitle]', - standalone: true, - host: { - '[id]': '_id()', - }, + selector: '[brnSheetTitle]', + standalone: true, + host: { + '[id]': '_id()', + }, }) export class BrnSheetTitleDirective extends BrnDialogTitleDirective {} diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts index e0acc71d6..f0c307510 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts @@ -3,26 +3,26 @@ import { BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain'; import { BrnSheetComponent } from './brn-sheet.component'; @Directive({ - selector: 'button[brnSheetTrigger]', - standalone: true, - host: { - '[id]': '_id()', - '(click)': 'open()', - 'aria-haspopup': 'dialog', - '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", - '[attr.data-state]': 'state()', - '[attr.aria-controls]': 'dialogId', - }, + selector: 'button[brnSheetTrigger]', + standalone: true, + host: { + '[id]': '_id()', + '(click)': 'open()', + 'aria-haspopup': 'dialog', + '[attr.aria-expanded]': "state() === 'open' ? 'true': 'false'", + '[attr.data-state]': 'state()', + '[attr.aria-controls]': 'dialogId', + }, }) export class BrnSheetTriggerDirective extends BrnDialogTriggerDirective { - private _sheet = inject(BrnSheetComponent, { optional: true }); - @Input() - side: 'top' | 'bottom' | 'left' | 'right' | undefined; + private _sheet = inject(BrnSheetComponent, { optional: true }); + @Input() + side: 'top' | 'bottom' | 'left' | 'right' | undefined; - override open() { - if (this._sheet && this.side) { - this._sheet.setSide = this.side; - } - super.open(); - } + override open() { + if (this._sheet && this.side) { + this._sheet.setSide = this.side; + } + super.open(); + } } diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts b/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts index d180d9eb7..8537caea3 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts +++ b/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts @@ -2,38 +2,40 @@ import { ChangeDetectionStrategy, Component, forwardRef, Input, signal, ViewEnca import { BrnDialogComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain'; @Component({ - selector: 'brn-sheet', - standalone: true, - template: ` `, - providers: [ - provideBrnDialog(), - { - provide: BrnDialogComponent, - useExisting: forwardRef(() => BrnSheetComponent), - }, - ], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - exportAs: 'brnSheet', + selector: 'brn-sheet', + standalone: true, + template: ` + + `, + providers: [ + provideBrnDialog(), + { + provide: BrnDialogComponent, + useExisting: forwardRef(() => BrnSheetComponent), + }, + ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + exportAs: 'brnSheet', }) export class BrnSheetComponent extends BrnDialogComponent { - private readonly _side = signal<'top' | 'bottom' | 'left' | 'right'>('top'); - public readonly side = this._side.asReadonly(); - /* eslint-disable-next-line @angular-eslint/no-input-rename */ - @Input('side') - set setSide(side: 'top' | 'bottom' | 'left' | 'right') { - this._side.set(side); - if (side === 'top') { - this.positionStrategy = this.positionBuilder.global().top(); - } - if (side === 'bottom') { - this.positionStrategy = this.positionBuilder.global().bottom(); - } - if (side === 'left') { - this.positionStrategy = this.positionBuilder.global().left(); - } - if (side === 'right') { - this.positionStrategy = this.positionBuilder.global().right(); - } - } + private readonly _side = signal<'top' | 'bottom' | 'left' | 'right'>('top'); + public readonly side = this._side.asReadonly(); + /* eslint-disable-next-line @angular-eslint/no-input-rename */ + @Input('side') + set setSide(side: 'top' | 'bottom' | 'left' | 'right') { + this._side.set(side); + if (side === 'top') { + this.positionStrategy = this.positionBuilder.global().top(); + } + if (side === 'bottom') { + this.positionStrategy = this.positionBuilder.global().bottom(); + } + if (side === 'left') { + this.positionStrategy = this.positionBuilder.global().left(); + } + if (side === 'right') { + this.positionStrategy = this.positionBuilder.global().right(); + } + } } diff --git a/libs/ui/sheet/brain/src/test-setup.ts b/libs/ui/sheet/brain/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/sheet/brain/src/test-setup.ts +++ b/libs/ui/sheet/brain/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/sheet/brain/tsconfig.json b/libs/ui/sheet/brain/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/sheet/brain/tsconfig.json +++ b/libs/ui/sheet/brain/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/sheet/brain/tsconfig.lib.json b/libs/ui/sheet/brain/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/sheet/brain/tsconfig.lib.json +++ b/libs/ui/sheet/brain/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/sheet/brain/tsconfig.lib.prod.json b/libs/ui/sheet/brain/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/sheet/brain/tsconfig.lib.prod.json +++ b/libs/ui/sheet/brain/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/sheet/brain/tsconfig.spec.json b/libs/ui/sheet/brain/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/sheet/brain/tsconfig.spec.json +++ b/libs/ui/sheet/brain/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/sheet/helm/.eslintrc.json b/libs/ui/sheet/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/sheet/helm/.eslintrc.json +++ b/libs/ui/sheet/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/sheet/helm/jest.config.ts b/libs/ui/sheet/helm/jest.config.ts index d07ea460f..18cb6dcaf 100644 --- a/libs/ui/sheet/helm/jest.config.ts +++ b/libs/ui/sheet/helm/jest.config.ts @@ -1,21 +1,21 @@ /* eslint-disable */ export default { - displayName: 'ui-sheet-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-sheet-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/sheet/helm/ng-package.json b/libs/ui/sheet/helm/ng-package.json index d66991ca3..c46638223 100644 --- a/libs/ui/sheet/helm/ng-package.json +++ b/libs/ui/sheet/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/sheet/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/sheet/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/sheet/helm/package.json b/libs/ui/sheet/helm/package.json index 74178b11b..dc8f7d1a5 100644 --- a/libs/ui/sheet/helm/package.json +++ b/libs/ui/sheet/helm/package.json @@ -1,15 +1,15 @@ { - "name": "@spartan-ng/ui-sheet-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1", - "class-variance-authority": "^0.6.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-sheet-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1", + "class-variance-authority": "^0.6.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/sheet/helm/project.json b/libs/ui/sheet/helm/project.json index b85bddb84..fcd4111c0 100644 --- a/libs/ui/sheet/helm/project.json +++ b/libs/ui/sheet/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-sheet-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/sheet/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/sheet/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/sheet/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/sheet/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/sheet/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/sheet/helm/**/*.ts", - "libs/ui/sheet/helm/**/*.html", - "libs/ui/sheet/helm/package.json", - "libs/ui/sheet/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-sheet-helm" - } - } - } + "name": "ui-sheet-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/sheet/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/sheet/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/sheet/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/sheet/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/sheet/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/sheet/helm/**/*.ts", + "libs/ui/sheet/helm/**/*.html", + "libs/ui/sheet/helm/package.json", + "libs/ui/sheet/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-sheet-helm" + } + } + } } diff --git a/libs/ui/sheet/helm/src/index.ts b/libs/ui/sheet/helm/src/index.ts index 58f59ed32..3011ed0be 100644 --- a/libs/ui/sheet/helm/src/index.ts +++ b/libs/ui/sheet/helm/src/index.ts @@ -16,16 +16,16 @@ export * from './lib/hlm-sheet-overlay.directive'; export * from './lib/hlm-sheet-title.directive'; export const HlmSheetImports = [ - HlmSheetCloseDirective, - HlmSheetContentDirective, - HlmSheetDescriptionDirective, - HlmSheetFooterComponent, - HlmSheetOverlayDirective, - HlmSheetTitleDirective, + HlmSheetCloseDirective, + HlmSheetContentDirective, + HlmSheetDescriptionDirective, + HlmSheetFooterComponent, + HlmSheetOverlayDirective, + HlmSheetTitleDirective, ] as const; @NgModule({ - imports: [...HlmSheetImports], - exports: [...HlmSheetImports], + imports: [...HlmSheetImports], + exports: [...HlmSheetImports], }) export class HlmSheetModule {} diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-close.directive.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-close.directive.ts index 3c7d49dc1..7a7f475d1 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-close.directive.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-close.directive.ts @@ -3,24 +3,24 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmSheetClose],[brnSheetClose][hlm]', - standalone: true, + selector: '[hlmSheetClose],[brnSheetClose][hlm]', + standalone: true, }) export class HlmSheetCloseDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm( - 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', + this._inputs, + ); + } } diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-content.directive.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-content.directive.ts index c5b9da376..171f9620d 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-content.directive.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-content.directive.ts @@ -1,58 +1,58 @@ import { Directive, effect, ElementRef, HostBinding, inject, Input, Renderer2, signal } from '@angular/core'; import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core'; -import { ClassValue } from 'clsx'; import { cva } from 'class-variance-authority'; +import { ClassValue } from 'clsx'; const sheetVariants = cva( - 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', - { - variants: { - side: { - top: 'border-border inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', - bottom: - 'border-border inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', - left: 'border-border inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', - right: - 'border-border inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', - }, - }, - defaultVariants: { - side: 'right', - }, - } + 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', + { + variants: { + side: { + top: 'border-border inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', + bottom: + 'border-border inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', + left: 'border-border inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', + right: + 'border-border inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', + }, + }, + defaultVariants: { + side: 'right', + }, + }, ); @Directive({ - selector: '[hlmSheetContent],[brnSheetContent][hlm]', - standalone: true, + selector: '[hlmSheetContent],[brnSheetContent][hlm]', + standalone: true, }) export class HlmSheetContentDirective { - private _inputs: ClassValue = ''; - private _stateProvider = injectExposesStateProvider({ host: true }); - private _sideProvider = injectExposedSideProvider({ host: true }); - public state = this._stateProvider?.state ?? signal('closed'); - private _renderer = inject(Renderer2); - private _element = inject(ElementRef); + private _inputs: ClassValue = ''; + private _stateProvider = injectExposesStateProvider({ host: true }); + private _sideProvider = injectExposedSideProvider({ host: true }); + public state = this._stateProvider?.state ?? signal('closed'); + private _renderer = inject(Renderer2); + private _element = inject(ElementRef); - constructor() { - effect(() => { - this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); - }); - effect(() => { - this._sideProvider?.side(); - this._class = this.generateClasses(); - }); - } + constructor() { + effect(() => { + this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()); + }); + effect(() => { + this._sideProvider?.side(); + this._class = this.generateClasses(); + }); + } - @HostBinding('class') - _class = this.generateClasses(); - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @HostBinding('class') + _class = this.generateClasses(); + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm(sheetVariants({ side: this._sideProvider?.side() }), this._inputs); - } + private generateClasses() { + return hlm(sheetVariants({ side: this._sideProvider?.side() }), this._inputs); + } } diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-description.directive.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-description.directive.ts index 44525e781..57334adbe 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-description.directive.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-description.directive.ts @@ -3,21 +3,21 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmSheetDescription],[brnSheetDescription][hlm]', - standalone: true, + selector: '[hlmSheetDescription],[brnSheetDescription][hlm]', + standalone: true, }) export class HlmSheetDescriptionDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('text-sm text-muted-foreground', this._inputs); - } + private generateClasses() { + return hlm('text-sm text-muted-foreground', this._inputs); + } } diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-footer.component.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-footer.component.ts index ccf93b7a1..28329320a 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-footer.component.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-footer.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-sheet-footer', - standalone: true, - template: ``, + selector: 'hlm-sheet-footer', + standalone: true, + template: ` + + `, }) export class HlmSheetFooterComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._inputs); - } + generateClass() { + return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._inputs); + } } diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-header.component.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-header.component.ts index 2b24663c6..2a86b3e1c 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-header.component.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-header.component.ts @@ -1,24 +1,26 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-sheet-header', - standalone: true, - template: ``, + selector: 'hlm-sheet-header', + standalone: true, + template: ` + + `, }) export class HlmSheetHeaderComponent { - @HostBinding('class') - private _class = this.generateClass(); - private _inputs: ClassValue = ''; + @HostBinding('class') + private _class = this.generateClass(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClass(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClass(); + } - generateClass() { - return hlm('flex flex-col space-y-2 text-center sm:text-left', this._inputs); - } + generateClass() { + return hlm('flex flex-col space-y-2 text-center sm:text-left', this._inputs); + } } diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-overlay.directive.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-overlay.directive.ts index d6b5f5982..657f1c532 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-overlay.directive.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-overlay.directive.ts @@ -3,29 +3,29 @@ import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmSheetOverlay],brn-sheet-overlay[hlm]', - standalone: true, + selector: '[hlmSheetOverlay],brn-sheet-overlay[hlm]', + standalone: true, }) export class HlmSheetOverlayDirective { - private _host = injectCustomClassSettable({ optional: true, host: true }); - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + private _host = injectCustomClassSettable({ optional: true, host: true }); + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - constructor() { - this._host?.setClassToCustomElement(this._class); - } + constructor() { + this._host?.setClassToCustomElement(this._class); + } - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - this._host?.setClassToCustomElement(this._class); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + this._host?.setClassToCustomElement(this._class); + } - private generateClasses() { - return hlm( - 'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', - this._inputs - ); - } + private generateClasses() { + return hlm( + 'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', + this._inputs, + ); + } } diff --git a/libs/ui/sheet/helm/src/lib/hlm-sheet-title.directive.ts b/libs/ui/sheet/helm/src/lib/hlm-sheet-title.directive.ts index e07f64074..40f608f58 100644 --- a/libs/ui/sheet/helm/src/lib/hlm-sheet-title.directive.ts +++ b/libs/ui/sheet/helm/src/lib/hlm-sheet-title.directive.ts @@ -3,21 +3,21 @@ import { hlm } from '@spartan-ng/ui-core'; import { ClassValue } from 'clsx'; @Directive({ - selector: '[hlmSheetTitle],[brnSheetTitle][hlm]', - standalone: true, + selector: '[hlmSheetTitle],[brnSheetTitle][hlm]', + standalone: true, }) export class HlmSheetTitleDirective { - @HostBinding('class') - _class = this.generateClasses(); - private _inputs: ClassValue = ''; + @HostBinding('class') + _class = this.generateClasses(); + private _inputs: ClassValue = ''; - @Input() - set class(inputs: ClassValue) { - this._inputs = inputs; - this._class = this.generateClasses(); - } + @Input() + set class(inputs: ClassValue) { + this._inputs = inputs; + this._class = this.generateClasses(); + } - private generateClasses() { - return hlm('text-lg font-semibold', this._inputs); - } + private generateClasses() { + return hlm('text-lg font-semibold', this._inputs); + } } diff --git a/libs/ui/sheet/helm/src/test-setup.ts b/libs/ui/sheet/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/sheet/helm/src/test-setup.ts +++ b/libs/ui/sheet/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/sheet/helm/tsconfig.json b/libs/ui/sheet/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/sheet/helm/tsconfig.json +++ b/libs/ui/sheet/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/sheet/helm/tsconfig.lib.json b/libs/ui/sheet/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/sheet/helm/tsconfig.lib.json +++ b/libs/ui/sheet/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/sheet/helm/tsconfig.lib.prod.json b/libs/ui/sheet/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/sheet/helm/tsconfig.lib.prod.json +++ b/libs/ui/sheet/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/sheet/helm/tsconfig.spec.json b/libs/ui/sheet/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/sheet/helm/tsconfig.spec.json +++ b/libs/ui/sheet/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/sheet/sheet.stories.ts b/libs/ui/sheet/sheet.stories.ts index a2375d759..bd14af920 100644 --- a/libs/ui/sheet/sheet.stories.ts +++ b/libs/ui/sheet/sheet.stories.ts @@ -1,33 +1,33 @@ -import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; -import { BrnSheetImports } from './brain/src'; -import { HlmSheetImports } from './helm/src'; import { radixCross1 } from '@ng-icons/radix-icons'; -import { HlmIconComponent, provideIcons } from '../icon/helm/src'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; +import { HlmIconComponent, provideIcons } from '../icon/helm/src'; import { HlmInputDirective } from '../input/helm/src'; +import { BrnSheetImports } from './brain/src'; +import { HlmSheetImports } from './helm/src'; export type SheetProps = { side: 'top' | 'bottom' | 'left' | 'right' }; const meta: Meta = { - title: 'Sheet', - argTypes: { - side: { control: 'select', options: ['top', 'bottom', 'left', 'right'] }, - }, - decorators: [ - moduleMetadata({ - imports: [BrnSheetImports, HlmSheetImports, HlmButtonDirective, HlmInputDirective, HlmIconComponent], - providers: [provideIcons({ radixCross1 })], - }), - ], + title: 'Sheet', + argTypes: { + side: { control: 'select', options: ['top', 'bottom', 'left', 'right'] }, + }, + decorators: [ + moduleMetadata({ + imports: [BrnSheetImports, HlmSheetImports, HlmButtonDirective, HlmInputDirective, HlmIconComponent], + providers: [provideIcons({ radixCross1 })], + }), + ], }; export default meta; type Story = StoryObj; export const Default: Story = { - args: { side: 'left' }, - render: ({ side }) => ({ - props: { side }, - template: ` + args: { side: 'left' }, + render: ({ side }) => ({ + props: { side }, + template: ` @@ -62,5 +62,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/skeleton/helm/.eslintrc.json b/libs/ui/skeleton/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/skeleton/helm/.eslintrc.json +++ b/libs/ui/skeleton/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/skeleton/helm/jest.config.ts b/libs/ui/skeleton/helm/jest.config.ts index b9bf245de..edd7c44bc 100644 --- a/libs/ui/skeleton/helm/jest.config.ts +++ b/libs/ui/skeleton/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-skeleton-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/button/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-skeleton-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/button/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/skeleton/helm/ng-package.json b/libs/ui/skeleton/helm/ng-package.json index dab824c4b..bdc9ff6bd 100644 --- a/libs/ui/skeleton/helm/ng-package.json +++ b/libs/ui/skeleton/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/skeleton/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/skeleton/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/skeleton/helm/package.json b/libs/ui/skeleton/helm/package.json index d24e7c9aa..1a13b1452 100644 --- a/libs/ui/skeleton/helm/package.json +++ b/libs/ui/skeleton/helm/package.json @@ -1,14 +1,14 @@ { - "name": "@spartan-ng/ui-skeleton-helm", - "version": "0.0.1-alpha.10", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-skeleton-helm", + "version": "0.0.1-alpha.10", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/skeleton/helm/project.json b/libs/ui/skeleton/helm/project.json index 204dcaf4b..aadb8bff7 100644 --- a/libs/ui/skeleton/helm/project.json +++ b/libs/ui/skeleton/helm/project.json @@ -1,51 +1,51 @@ { - "name": "ui-skeleton-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/skeleton/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/skeleton/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/skeleton/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/skeleton/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/skeleton/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/skeleton/helm/**/*.ts", - "libs/ui/skeleton/helm/**/*.html", - "libs/ui/skeleton/helm/package.json", - "libs/ui/skeleton/helm/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-skeleton-helm" - } - } - } + "name": "ui-skeleton-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/skeleton/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/skeleton/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/skeleton/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/skeleton/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/skeleton/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/skeleton/helm/**/*.ts", + "libs/ui/skeleton/helm/**/*.html", + "libs/ui/skeleton/helm/package.json", + "libs/ui/skeleton/helm/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-skeleton-helm" + } + } + } } diff --git a/libs/ui/skeleton/helm/src/index.ts b/libs/ui/skeleton/helm/src/index.ts index d640cd4c5..5466cd45a 100644 --- a/libs/ui/skeleton/helm/src/index.ts +++ b/libs/ui/skeleton/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmSkeletonComponent } from './lib/hlm-skeleton.component'; export * from './lib/hlm-skeleton.component'; @NgModule({ - imports: [HlmSkeletonComponent], - exports: [HlmSkeletonComponent], + imports: [HlmSkeletonComponent], + exports: [HlmSkeletonComponent], }) export class HlmSkeletonModule {} diff --git a/libs/ui/skeleton/helm/src/lib/hlm-skeleton.component.ts b/libs/ui/skeleton/helm/src/lib/hlm-skeleton.component.ts index e74a4eaab..423f51890 100644 --- a/libs/ui/skeleton/helm/src/lib/hlm-skeleton.component.ts +++ b/libs/ui/skeleton/helm/src/lib/hlm-skeleton.component.ts @@ -1,25 +1,25 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { ClassValue } from 'clsx'; @Component({ - selector: 'hlm-skeleton', - standalone: true, - template: ``, + selector: 'hlm-skeleton', + standalone: true, + template: ``, }) export class HlmSkeletonComponent { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - @Input() - set class(labels: ClassValue) { - this._inputs = labels; - this._class = this.generateClasses(); - } + @Input() + set class(labels: ClassValue) { + this._inputs = labels; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm('block animate-pulse rounded-md bg-muted', this._inputs); - } + private generateClasses() { + return hlm('block animate-pulse rounded-md bg-muted', this._inputs); + } } diff --git a/libs/ui/skeleton/helm/src/test-setup.ts b/libs/ui/skeleton/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/skeleton/helm/src/test-setup.ts +++ b/libs/ui/skeleton/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/skeleton/helm/tsconfig.json b/libs/ui/skeleton/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/skeleton/helm/tsconfig.json +++ b/libs/ui/skeleton/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/skeleton/helm/tsconfig.lib.json b/libs/ui/skeleton/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/skeleton/helm/tsconfig.lib.json +++ b/libs/ui/skeleton/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/skeleton/helm/tsconfig.lib.prod.json b/libs/ui/skeleton/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/skeleton/helm/tsconfig.lib.prod.json +++ b/libs/ui/skeleton/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/skeleton/helm/tsconfig.spec.json b/libs/ui/skeleton/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/skeleton/helm/tsconfig.spec.json +++ b/libs/ui/skeleton/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/skeleton/skeleton.stories.ts b/libs/ui/skeleton/skeleton.stories.ts index dcdb2a4ec..9f269525d 100644 --- a/libs/ui/skeleton/skeleton.stories.ts +++ b/libs/ui/skeleton/skeleton.stories.ts @@ -3,20 +3,20 @@ import { moduleMetadata } from '@storybook/angular'; import { HlmSkeletonComponent } from './helm/src'; const meta: Meta<{}> = { - title: 'Skeleton', - decorators: [ - moduleMetadata({ - imports: [HlmSkeletonComponent], - }), - ], + title: 'Skeleton', + decorators: [ + moduleMetadata({ + imports: [HlmSkeletonComponent], + }), + ], }; export default meta; type Story = StoryObj<{}>; export const Default: Story = { - render: () => ({ - template: ` + render: () => ({ + template: `
@@ -25,5 +25,5 @@ export const Default: Story = {
`, - }), + }), }; diff --git a/libs/ui/spinner/helm/.eslintrc.json b/libs/ui/spinner/helm/.eslintrc.json index 9da7632e8..84eabd35c 100644 --- a/libs/ui/spinner/helm/.eslintrc.json +++ b/libs/ui/spinner/helm/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "hlm", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "hlm", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "hlm", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "hlm", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/spinner/helm/jest.config.ts b/libs/ui/spinner/helm/jest.config.ts index a64e94d30..e190deed9 100644 --- a/libs/ui/spinner/helm/jest.config.ts +++ b/libs/ui/spinner/helm/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-spinner-helm', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - coverageDirectory: '../../../../coverage/libs/button/helm', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-spinner-helm', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../../coverage/libs/button/helm', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/spinner/helm/ng-package.json b/libs/ui/spinner/helm/ng-package.json index 96b4a2f0c..ac8cd8355 100644 --- a/libs/ui/spinner/helm/ng-package.json +++ b/libs/ui/spinner/helm/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/spinner/helm", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/spinner/helm", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/spinner/helm/package.json b/libs/ui/spinner/helm/package.json index a34b53d00..1b6c71015 100644 --- a/libs/ui/spinner/helm/package.json +++ b/libs/ui/spinner/helm/package.json @@ -1,12 +1,12 @@ { - "name": "@spartan-ng/ui-spinner-helm", - "version": "0.0.1", - "peerDependencies": { - "@angular/core": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "class-variance-authority": "^0.6.0", - "clsx": "^1.2.1" - }, - "dependencies": {}, - "sideEffects": false + "name": "@spartan-ng/ui-spinner-helm", + "version": "0.0.1", + "peerDependencies": { + "@angular/core": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1" + }, + "dependencies": {}, + "sideEffects": false } diff --git a/libs/ui/spinner/helm/project.json b/libs/ui/spinner/helm/project.json index 32293000b..3d237eea0 100644 --- a/libs/ui/spinner/helm/project.json +++ b/libs/ui/spinner/helm/project.json @@ -1,45 +1,45 @@ { - "name": "ui-spinner-helm", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/spinner/helm/src", - "prefix": "helm", - "tags": ["scope:helm"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/spinner/helm/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/spinner/helm/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/spinner/helm/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/spinner/helm/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/spinner/helm/**/*.ts", - "libs/ui/spinner/helm/**/*.html", - "libs/ui/spinner/helm/package.json", - "libs/ui/spinner/helm/project.json" - ] - } - } - } + "name": "ui-spinner-helm", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/spinner/helm/src", + "prefix": "helm", + "tags": ["scope:helm"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/spinner/helm/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/spinner/helm/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/spinner/helm/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/spinner/helm/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/spinner/helm/**/*.ts", + "libs/ui/spinner/helm/**/*.html", + "libs/ui/spinner/helm/package.json", + "libs/ui/spinner/helm/project.json" + ] + } + } + } } diff --git a/libs/ui/spinner/helm/src/index.ts b/libs/ui/spinner/helm/src/index.ts index e440349f6..128460320 100644 --- a/libs/ui/spinner/helm/src/index.ts +++ b/libs/ui/spinner/helm/src/index.ts @@ -4,7 +4,7 @@ import { HlmSpinnerComponent } from './lib/hlm-spinner.component'; export * from './lib/hlm-spinner.component'; @NgModule({ - imports: [HlmSpinnerComponent], - exports: [HlmSpinnerComponent], + imports: [HlmSpinnerComponent], + exports: [HlmSpinnerComponent], }) export class HlmSpinnerModule {} diff --git a/libs/ui/spinner/helm/src/lib/hlm-spinner.component.ts b/libs/ui/spinner/helm/src/lib/hlm-spinner.component.ts index 6b545c54f..9f88a2dd4 100644 --- a/libs/ui/spinner/helm/src/lib/hlm-spinner.component.ts +++ b/libs/ui/spinner/helm/src/lib/hlm-spinner.component.ts @@ -1,71 +1,71 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { cva, VariantProps } from 'class-variance-authority'; -import { ClassValue } from 'clsx'; import { hlm } from '@spartan-ng/ui-core'; +import { VariantProps, cva } from 'class-variance-authority'; +import { ClassValue } from 'clsx'; const spinnerVariants = cva('inline-block', { - variants: { - variant: { - default: 'animate-spin [&>svg]:text-foreground/30 [&>svg]:fill-accent', - }, - size: { - xs: 'h-4 w-4', - sm: 'h-6 w-6', - default: 'w-8 h-8 ', - }, - }, - defaultVariants: { - variant: 'default', - size: 'default', - }, + variants: { + variant: { + default: 'animate-spin [&>svg]:text-foreground/30 [&>svg]:fill-accent', + }, + size: { + xs: 'h-4 w-4', + sm: 'h-6 w-6', + default: 'w-8 h-8 ', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, }); export type SpinnerVariants = VariantProps; @Component({ - selector: 'hlm-spinner', - standalone: true, - host: { - role: 'status', - }, - template: ` - - - `, + selector: 'hlm-spinner', + standalone: true, + host: { + role: 'status', + }, + template: ` + + + `, }) export class HlmSpinnerComponent { - private _inputs: ClassValue = ''; + private _inputs: ClassValue = ''; - private _size: SpinnerVariants['size'] = 'default'; + private _size: SpinnerVariants['size'] = 'default'; - @Input() - get size(): SpinnerVariants['size'] { - return this._size; - } + @Input() + get size(): SpinnerVariants['size'] { + return this._size; + } - set size(value: SpinnerVariants['size']) { - this._size = value; - this._class = this.generateClasses(); - } + set size(value: SpinnerVariants['size']) { + this._size = value; + this._class = this.generateClasses(); + } - @Input() - set class(labels: ClassValue) { - this._inputs = labels; - this._class = this.generateClasses(); - } + @Input() + set class(labels: ClassValue) { + this._inputs = labels; + this._class = this.generateClasses(); + } - @HostBinding('class') - private _class = this.generateClasses(); + @HostBinding('class') + private _class = this.generateClasses(); - private generateClasses() { - return hlm(spinnerVariants({ size: this._size }), this._inputs); - } + private generateClasses() { + return hlm(spinnerVariants({ size: this._size }), this._inputs); + } } diff --git a/libs/ui/spinner/helm/src/test-setup.ts b/libs/ui/spinner/helm/src/test-setup.ts index ab1eeeb33..b2dd6e939 100644 --- a/libs/ui/spinner/helm/src/test-setup.ts +++ b/libs/ui/spinner/helm/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/ui/spinner/helm/tsconfig.json b/libs/ui/spinner/helm/tsconfig.json index b9e5be086..652fa49ce 100644 --- a/libs/ui/spinner/helm/tsconfig.json +++ b/libs/ui/spinner/helm/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/spinner/helm/tsconfig.lib.json b/libs/ui/spinner/helm/tsconfig.lib.json index 3321c94ee..e82bb223c 100644 --- a/libs/ui/spinner/helm/tsconfig.lib.json +++ b/libs/ui/spinner/helm/tsconfig.lib.json @@ -1,12 +1,12 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/spinner/helm/tsconfig.lib.prod.json b/libs/ui/spinner/helm/tsconfig.lib.prod.json index 2a2faa884..7b29b93f6 100644 --- a/libs/ui/spinner/helm/tsconfig.lib.prod.json +++ b/libs/ui/spinner/helm/tsconfig.lib.prod.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.lib.json", - "compilerOptions": { - "declarationMap": false - }, - "angularCompilerOptions": { - "compilationMode": "partial" - } + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } } diff --git a/libs/ui/spinner/helm/tsconfig.spec.json b/libs/ui/spinner/helm/tsconfig.spec.json index 7af5e2542..40aad461f 100644 --- a/libs/ui/spinner/helm/tsconfig.spec.json +++ b/libs/ui/spinner/helm/tsconfig.spec.json @@ -1,11 +1,11 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] } diff --git a/libs/ui/storybook/.storybook/main.js b/libs/ui/storybook/.storybook/main.js index a98c636f8..ce71d205d 100644 --- a/libs/ui/storybook/.storybook/main.js +++ b/libs/ui/storybook/.storybook/main.js @@ -1,22 +1,22 @@ const config = { - stories: ['../../**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-a11y', - { - name: '@storybook/addon-styling', - options: { - // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md - // For more details on this addon's options. - postCss: true, - }, - }, - ], - framework: { - name: '@storybook/angular', - options: {}, - }, - staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook + stories: ['../../**/*.stories.@(js|jsx|ts|tsx|mdx)'], + addons: [ + '@storybook/addon-essentials', + '@storybook/addon-a11y', + { + name: '@storybook/addon-styling', + options: { + // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md + // For more details on this addon's options. + postCss: true, + }, + }, + ], + framework: { + name: '@storybook/angular', + options: {}, + }, + staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook }; export default config; diff --git a/libs/ui/storybook/.storybook/preview.js b/libs/ui/storybook/.storybook/preview.js index b327c3ffb..cf18d571c 100644 --- a/libs/ui/storybook/.storybook/preview.js +++ b/libs/ui/storybook/.storybook/preview.js @@ -3,24 +3,24 @@ import { withThemeByDataAttribute } from '@storybook/addon-styling'; import './tailwind.css'; export const decorators = [ - withThemeByDataAttribute({ - themes: { - light: 'light', - dark: 'dark', - }, - defaultTheme: 'light', - attributeName: 'data-mode', - }), + withThemeByDataAttribute({ + themes: { + light: 'light', + dark: 'dark', + }, + defaultTheme: 'light', + attributeName: 'data-mode', + }), ]; const preview = { - parameters: { - options: { - storySort: { - method: 'alphabetical', - }, - }, - }, + parameters: { + options: { + storySort: { + method: 'alphabetical', + }, + }, + }, }; export default preview; diff --git a/libs/ui/storybook/.storybook/tailwind.css b/libs/ui/storybook/.storybook/tailwind.css index 33c2ace98..d77703970 100644 --- a/libs/ui/storybook/.storybook/tailwind.css +++ b/libs/ui/storybook/.storybook/tailwind.css @@ -5,67 +5,69 @@ @tailwind utilities; select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - -webkit-print-color-adjust: exact; - appearance: none; - display: inline-flex; - text-align: center; - justify-content: center; - align-items: center; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + -webkit-print-color-adjust: exact; + appearance: none; + display: inline-flex; + text-align: center; + justify-content: center; + align-items: center; } :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --font-sans: ''; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --ring: 240 5% 64.9%; - --radius: 0.5rem; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --font-sans: ''; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --ring: 240 5% 64.9%; + --radius: 0.5rem; } .dark, [data-mode='dark'] { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --font-sans: ''; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - --ring: 240 3.7% 15.9%; + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --font-sans: ''; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + --ring: 240 3.7% 15.9%; } body { - @apply bg-background text-foreground antialiased; - font-feature-settings: 'rlig' 1, 'calt' 1; + @apply bg-background text-foreground antialiased; + font-feature-settings: + 'rlig' 1, + 'calt' 1; } diff --git a/libs/ui/storybook/.storybook/tsconfig.json b/libs/ui/storybook/.storybook/tsconfig.json index 65f4f5413..c32903790 100644 --- a/libs/ui/storybook/.storybook/tsconfig.json +++ b/libs/ui/storybook/.storybook/tsconfig.json @@ -1,16 +1,16 @@ { - "extends": "../tsconfig.json", - "compilerOptions": { - "emitDecoratorMetadata": true - }, + "extends": "../tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true + }, - "exclude": ["../../**/*.spec.ts"], - "include": [ - "../../**/*.stories.ts", - "../../**/*.stories.js", - "../../**/*.stories.jsx", - "../../**/*.stories.tsx", - "../../**/*.stories.mdx", - "*.js" - ] + "exclude": ["../../**/*.spec.ts"], + "include": [ + "../../**/*.stories.ts", + "../../**/*.stories.js", + "../../**/*.stories.jsx", + "../../**/*.stories.tsx", + "../../**/*.stories.mdx", + "*.js" + ] } diff --git a/libs/ui/storybook/postcss.config.js b/libs/ui/storybook/postcss.config.js index cbdd9c22c..0491b6b27 100644 --- a/libs/ui/storybook/postcss.config.js +++ b/libs/ui/storybook/postcss.config.js @@ -1,10 +1,10 @@ const { join } = require('path'); module.exports = { - plugins: { - tailwindcss: { - config: join(__dirname, 'tailwind.config.js'), - }, - autoprefixer: {}, - }, + plugins: { + tailwindcss: { + config: join(__dirname, 'tailwind.config.js'), + }, + autoprefixer: {}, + }, }; diff --git a/libs/ui/storybook/project.json b/libs/ui/storybook/project.json index c6ef5d874..e2da1712a 100644 --- a/libs/ui/storybook/project.json +++ b/libs/ui/storybook/project.json @@ -1,51 +1,51 @@ { - "name": "ui-storybook", - "$schema": "../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/storybook/src", - "prefix": "spartan-ng", - "tags": [], - "projectType": "library", - "targets": { - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - "port": 4400, - "configDir": "libs/ui/storybook/.storybook", - "browserTarget": "ui-storybook:build-storybook", - "compodoc": false - }, - "configurations": { - "ci": { - "quiet": true - } - } - }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - "outputs": ["{options.outputDir}"], - "options": { - "outputDir": "dist/storybook/ui-storybook", - "configDir": "libs/ui/storybook/.storybook", - "browserTarget": "ui-storybook:build-storybook", - "compodoc": false - }, - "configurations": { - "ci": { - "quiet": true - } - } - }, - "static-storybook": { - "executor": "@nx/web:file-server", - "options": { - "buildTarget": "ui-storybook:build-storybook", - "staticFilePath": "dist/storybook/ui-storybook" - }, - "configurations": { - "ci": { - "buildTarget": "ui-storybook:build-storybook:ci" - } - } - } - } + "name": "ui-storybook", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/storybook/src", + "prefix": "spartan-ng", + "tags": [], + "projectType": "library", + "targets": { + "storybook": { + "executor": "@storybook/angular:start-storybook", + "options": { + "port": 4400, + "configDir": "libs/ui/storybook/.storybook", + "browserTarget": "ui-storybook:build-storybook", + "compodoc": false + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "build-storybook": { + "executor": "@storybook/angular:build-storybook", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/ui-storybook", + "configDir": "libs/ui/storybook/.storybook", + "browserTarget": "ui-storybook:build-storybook", + "compodoc": false + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "static-storybook": { + "executor": "@nx/web:file-server", + "options": { + "buildTarget": "ui-storybook:build-storybook", + "staticFilePath": "dist/storybook/ui-storybook" + }, + "configurations": { + "ci": { + "buildTarget": "ui-storybook:build-storybook:ci" + } + } + } + } } diff --git a/libs/ui/storybook/tailwind.config.js b/libs/ui/storybook/tailwind.config.js index 173c2e13e..4346578cb 100644 --- a/libs/ui/storybook/tailwind.config.js +++ b/libs/ui/storybook/tailwind.config.js @@ -3,11 +3,11 @@ const { join } = require('path'); /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ['class', '[data-mode="dark"]'], - presets: [require('../../../libs/ui/core/hlm-tailwind-preset.js')], - content: [join(__dirname, '../**/!(*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)], - theme: { - extend: {}, - }, - plugins: [], + darkMode: ['class', '[data-mode="dark"]'], + presets: [require('../../../libs/ui/core/hlm-tailwind-preset.js')], + content: [join(__dirname, '../**/!(*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)], + theme: { + extend: {}, + }, + plugins: [], }; diff --git a/libs/ui/storybook/tsconfig.json b/libs/ui/storybook/tsconfig.json index 93642c33c..2fd7c5f67 100644 --- a/libs/ui/storybook/tsconfig.json +++ b/libs/ui/storybook/tsconfig.json @@ -1,29 +1,29 @@ { - "compilerOptions": { - "target": "es2022", - "useDefineForClassFields": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./.storybook/tsconfig.json" - } - ], - "extends": "../../../tsconfig.base.json", - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./.storybook/tsconfig.json" + } + ], + "extends": "../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } } diff --git a/libs/ui/storybook/tsconfig.lib.json b/libs/ui/storybook/tsconfig.lib.json index a632bdad1..aa5a09ce4 100644 --- a/libs/ui/storybook/tsconfig.lib.json +++ b/libs/ui/storybook/tsconfig.lib.json @@ -1,19 +1,19 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": [ - "src/**/*.spec.ts", - "src/test-setup.ts", - "jest.config.ts", - "src/**/*.test.ts", - "**/*.stories.ts", - "**/*.stories.js" - ], - "include": ["src/**/*.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "src/**/*.spec.ts", + "src/test-setup.ts", + "jest.config.ts", + "src/**/*.test.ts", + "**/*.stories.ts", + "**/*.stories.js" + ], + "include": ["src/**/*.ts"] } diff --git a/libs/ui/switch/brain/.eslintrc.json b/libs/ui/switch/brain/.eslintrc.json index 203bb09f1..70093c623 100644 --- a/libs/ui/switch/brain/.eslintrc.json +++ b/libs/ui/switch/brain/.eslintrc.json @@ -1,34 +1,34 @@ { - "extends": ["../../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "rules": { - "@angular-eslint/no-host-metadata-property": 0, - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "brn", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "brn", - "style": "kebab-case" - } - ] - }, - "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] + "extends": ["../../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/no-host-metadata-property": 0, + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "brn", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "brn", + "style": "kebab-case" + } + ] + }, + "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] } diff --git a/libs/ui/switch/brain/jest.config.ts b/libs/ui/switch/brain/jest.config.ts index c8e79a8bc..d24740448 100644 --- a/libs/ui/switch/brain/jest.config.ts +++ b/libs/ui/switch/brain/jest.config.ts @@ -1,22 +1,22 @@ /* eslint-disable */ export default { - displayName: 'ui-switch-brain', - preset: '../../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - testPathIgnorePatterns: ['/src/lib/brn-switch-ng-model.component.spec.ts'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + displayName: 'ui-switch-brain', + preset: '../../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + testPathIgnorePatterns: ['/src/lib/brn-switch-ng-model.component.spec.ts'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], }; diff --git a/libs/ui/switch/brain/ng-package.json b/libs/ui/switch/brain/ng-package.json index 43b282169..94e42430f 100644 --- a/libs/ui/switch/brain/ng-package.json +++ b/libs/ui/switch/brain/ng-package.json @@ -1,7 +1,7 @@ { - "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../../../dist/libs/ui/switch/brain", - "lib": { - "entryFile": "src/index.ts" - } + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../../dist/libs/ui/switch/brain", + "lib": { + "entryFile": "src/index.ts" + } } diff --git a/libs/ui/switch/brain/package.json b/libs/ui/switch/brain/package.json index 915c3d58c..0b7b1a4e9 100644 --- a/libs/ui/switch/brain/package.json +++ b/libs/ui/switch/brain/package.json @@ -1,16 +1,16 @@ { - "name": "@spartan-ng/ui-switch-brain", - "version": "0.0.1-alpha.311", - "peerDependencies": { - "@angular/common": "17.0.2", - "@angular/core": "17.0.2", - "@angular/forms": "17.0.2", - "@spartan-ng/ui-core": "0.0.1-alpha.311", - "@angular/cdk": "17.0.0" - }, - "dependencies": {}, - "sideEffects": false, - "publishConfig": { - "access": "public" - } + "name": "@spartan-ng/ui-switch-brain", + "version": "0.0.1-alpha.311", + "peerDependencies": { + "@angular/common": "17.0.2", + "@angular/core": "17.0.2", + "@angular/forms": "17.0.2", + "@spartan-ng/ui-core": "0.0.1-alpha.311", + "@angular/cdk": "17.0.0" + }, + "dependencies": {}, + "sideEffects": false, + "publishConfig": { + "access": "public" + } } diff --git a/libs/ui/switch/brain/project.json b/libs/ui/switch/brain/project.json index d527395ac..69fc0f7aa 100644 --- a/libs/ui/switch/brain/project.json +++ b/libs/ui/switch/brain/project.json @@ -1,51 +1,51 @@ { - "name": "ui-switch-brain", - "$schema": "../../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/switch/brain/src", - "prefix": "spartan", - "tags": ["scope:brain"], - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/{projectRoot}"], - "options": { - "project": "libs/ui/switch/brain/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "libs/ui/switch/brain/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "libs/ui/switch/brain/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "libs/ui/switch/brain/jest.config.ts" - } - }, - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "libs/ui/switch/brain/**/*.ts", - "libs/ui/switch/brain/**/*.html", - "libs/ui/switch/brain/package.json", - "libs/ui/switch/brain/project.json" - ] - } - }, - "release": { - "executor": "@spartan-ng/tools:build-update-publish", - "options": { - "libName": "ui-switch-brain" - } - } - } + "name": "ui-switch-brain", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/switch/brain/src", + "prefix": "spartan", + "tags": ["scope:brain"], + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "libs/ui/switch/brain/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "libs/ui/switch/brain/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "libs/ui/switch/brain/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/ui/switch/brain/jest.config.ts" + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/ui/switch/brain/**/*.ts", + "libs/ui/switch/brain/**/*.html", + "libs/ui/switch/brain/package.json", + "libs/ui/switch/brain/project.json" + ] + } + }, + "release": { + "executor": "@spartan-ng/tools:build-update-publish", + "options": { + "libName": "ui-switch-brain" + } + } + } } diff --git a/libs/ui/switch/brain/src/index.ts b/libs/ui/switch/brain/src/index.ts index 6982eadfb..99e13fb06 100644 --- a/libs/ui/switch/brain/src/index.ts +++ b/libs/ui/switch/brain/src/index.ts @@ -1,15 +1,15 @@ import { NgModule } from '@angular/core'; -import { BrnSwitchComponent } from './lib/brn-switch.component'; import { BrnSwitchThumbComponent } from './lib/brn-switch-thumb.component'; +import { BrnSwitchComponent } from './lib/brn-switch.component'; -export * from './lib/brn-switch.component'; export * from './lib/brn-switch-thumb.component'; +export * from './lib/brn-switch.component'; export const BrnSwitchImports = [BrnSwitchComponent, BrnSwitchThumbComponent] as const; @NgModule({ - imports: [...BrnSwitchImports], - exports: [...BrnSwitchImports], + imports: [...BrnSwitchImports], + exports: [...BrnSwitchImports], }) export class BrnSwitchModule {} diff --git a/libs/ui/switch/brain/src/lib/brn-switch-ng-model.component.spec.ts b/libs/ui/switch/brain/src/lib/brn-switch-ng-model.component.spec.ts index 4c9b11190..dddd4c570 100644 --- a/libs/ui/switch/brain/src/lib/brn-switch-ng-model.component.spec.ts +++ b/libs/ui/switch/brain/src/lib/brn-switch-ng-model.component.spec.ts @@ -4,21 +4,21 @@ import { BrnSwitchThumbComponent } from './brn-switch-thumb.component'; import { BrnSwitchComponent } from './brn-switch.component'; @Component({ - selector: 'brn-switch-ng-model', - standalone: true, - template: ` - - `, - imports: [BrnSwitchComponent, BrnSwitchThumbComponent, FormsModule], + selector: 'brn-switch-ng-model', + standalone: true, + template: ` + + `, + imports: [BrnSwitchComponent, BrnSwitchThumbComponent, FormsModule], }) export class BrnSwitchNgModelSpecComponent { - @Input() - public disabled = false; - @Input() - public airplaneMode = false; + @Input() + public disabled = false; + @Input() + public airplaneMode = false; } diff --git a/libs/ui/switch/brain/src/lib/brn-switch-ng-model.spec.ts b/libs/ui/switch/brain/src/lib/brn-switch-ng-model.spec.ts index ed46e66e0..163c29820 100644 --- a/libs/ui/switch/brain/src/lib/brn-switch-ng-model.spec.ts +++ b/libs/ui/switch/brain/src/lib/brn-switch-ng-model.spec.ts @@ -3,63 +3,63 @@ import userEvent from '@testing-library/user-event'; import { BrnSwitchNgModelSpecComponent } from './brn-switch-ng-model.component.spec'; describe('BrnSwitchComponentNgModelIntegration', () => { - const setup = async (airplaneMode = false, disabled = false) => { - const container = await render(BrnSwitchNgModelSpecComponent, { - componentInputs: { - disabled, - airplaneMode, - }, - }); - const labelMatch = airplaneMode ? /airplane mode is: on/i : /airplane mode is: off/i; - return { - user: userEvent.setup(), - container, - switchElement: screen.getByLabelText(labelMatch), - labelElement: screen.getByText(labelMatch), - }; - }; + const setup = async (airplaneMode = false, disabled = false) => { + const container = await render(BrnSwitchNgModelSpecComponent, { + componentInputs: { + disabled, + airplaneMode, + }, + }); + const labelMatch = airplaneMode ? /airplane mode is: on/i : /airplane mode is: off/i; + return { + user: userEvent.setup(), + container, + switchElement: screen.getByLabelText(labelMatch), + labelElement: screen.getByText(labelMatch), + }; + }; - it('click should toggle value correctly', async () => { - const { labelElement, user, container } = await setup(); - expect(labelElement).toBeInTheDocument(); - await user.click(labelElement); - await screen.findByDisplayValue('on'); - expect(container.fixture.componentInstance.airplaneMode).toBe(true); - }); + it('click should toggle value correctly', async () => { + const { labelElement, user, container } = await setup(); + expect(labelElement).toBeInTheDocument(); + await user.click(labelElement); + await screen.findByDisplayValue('on'); + expect(container.fixture.componentInstance.airplaneMode).toBe(true); + }); - it('should set input as default correctly and click should toggle then', async () => { - const { labelElement, user, container } = await setup(true); + it('should set input as default correctly and click should toggle then', async () => { + const { labelElement, user, container } = await setup(true); - await user.click(labelElement); - await screen.findByDisplayValue('off'); - expect(container.fixture.componentInstance.airplaneMode).toBe(false); + await user.click(labelElement); + await screen.findByDisplayValue('off'); + expect(container.fixture.componentInstance.airplaneMode).toBe(false); - await user.click(labelElement); - await screen.findByDisplayValue('on'); - expect(container.fixture.componentInstance.airplaneMode).toBe(true); - }); + await user.click(labelElement); + await screen.findByDisplayValue('on'); + expect(container.fixture.componentInstance.airplaneMode).toBe(true); + }); - it('should set input as default correctly and enter should toggle then', async () => { - const { labelElement, user, container } = await setup(true); + it('should set input as default correctly and enter should toggle then', async () => { + const { labelElement, user, container } = await setup(true); - await user.click(labelElement); - await user.keyboard('[Tab][Enter]'); - expect(container.fixture.componentInstance.airplaneMode).toBe(false); + await user.click(labelElement); + await user.keyboard('[Tab][Enter]'); + expect(container.fixture.componentInstance.airplaneMode).toBe(false); - await user.click(labelElement); - await user.keyboard('[Enter]'); - expect(container.fixture.componentInstance.airplaneMode).toBe(true); - }); + await user.click(labelElement); + await user.keyboard('[Enter]'); + expect(container.fixture.componentInstance.airplaneMode).toBe(true); + }); - it('should do nothing when disabled', async () => { - const { labelElement, user, container } = await setup(false, false); + it('should do nothing when disabled', async () => { + const { labelElement, user, container } = await setup(false, false); - await user.click(labelElement); - await screen.findByDisplayValue('off'); - expect(container.fixture.componentInstance.airplaneMode).toBe(false); + await user.click(labelElement); + await screen.findByDisplayValue('off'); + expect(container.fixture.componentInstance.airplaneMode).toBe(false); - await user.click(labelElement); - await screen.findByDisplayValue('off'); - expect(container.fixture.componentInstance.airplaneMode).toBe(false); - }); + await user.click(labelElement); + await screen.findByDisplayValue('off'); + expect(container.fixture.componentInstance.airplaneMode).toBe(false); + }); }); diff --git a/libs/ui/switch/brain/src/lib/brn-switch-thumb.component.ts b/libs/ui/switch/brain/src/lib/brn-switch-thumb.component.ts index 0959042ee..174593553 100644 --- a/libs/ui/switch/brain/src/lib/brn-switch-thumb.component.ts +++ b/libs/ui/switch/brain/src/lib/brn-switch-thumb.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; @Component({ - selector: 'brn-switch-thumb', - standalone: true, - imports: [CommonModule], - template: ``, + selector: 'brn-switch-thumb', + standalone: true, + imports: [CommonModule], + template: ``, }) export class BrnSwitchThumbComponent {} diff --git a/libs/ui/switch/brain/src/lib/brn-switch.component.spec.ts b/libs/ui/switch/brain/src/lib/brn-switch.component.spec.ts index 2d79e80e9..ebcce250a 100644 --- a/libs/ui/switch/brain/src/lib/brn-switch.component.spec.ts +++ b/libs/ui/switch/brain/src/lib/brn-switch.component.spec.ts @@ -1,31 +1,31 @@ import { render, screen } from '@testing-library/angular'; -import { BrnSwitchComponent } from './brn-switch.component'; -import { BrnSwitchThumbComponent } from './brn-switch-thumb.component'; import userEvent from '@testing-library/user-event'; import { axe } from 'jest-axe'; +import { BrnSwitchThumbComponent } from './brn-switch-thumb.component'; +import { BrnSwitchComponent } from './brn-switch.component'; describe('BrnSwitchComponent', () => { - const setup = async () => { - const container = await render( - ` + const setup = async () => { + const container = await render( + ` `, - { - imports: [BrnSwitchComponent, BrnSwitchThumbComponent], - } - ); - return { - user: userEvent.setup(), - container, - switchElement: screen.getByLabelText('switch'), - }; - }; + { + imports: [BrnSwitchComponent, BrnSwitchThumbComponent], + }, + ); + return { + user: userEvent.setup(), + container, + switchElement: screen.getByLabelText('switch'), + }; + }; - const setupInsideLabel = async () => { - const container = await render( - ` + const setupInsideLabel = async () => { + const container = await render( + ` `, - { - imports: [BrnSwitchComponent, BrnSwitchThumbComponent], - } - ); - return { - user: userEvent.setup(), - container, - switchElement: screen.getByLabelText(/switch inside label/i), - labelElement: screen.getByText(/switch inside label/i), - }; - }; + { + imports: [BrnSwitchComponent, BrnSwitchThumbComponent], + }, + ); + return { + user: userEvent.setup(), + container, + switchElement: screen.getByLabelText(/switch inside label/i), + labelElement: screen.getByText(/switch inside label/i), + }; + }; - const setupOutsideLabelWithAriaLabelledBy = async () => { - const container = await render( - ` + const setupOutsideLabelWithAriaLabelledBy = async () => { + const container = await render( + `