├── .editorconfig ├── .github ├── CODE_OF_CONDUCT.md ├── COMMIT_CONVENTION.md ├── CONTRIBUTING.md ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── SUPPORT.md └── workflows │ ├── build-check.yml │ ├── project-chartjs-check.yml │ ├── project-icons-check.yml │ ├── project-lib-check.yml │ └── stale.yml ├── .gitignore ├── .prettierrc.js ├── CHANGELOG.md ├── CLI.md ├── LICENSE ├── README.md ├── angular.json ├── eslint.config.js ├── package-lock.json ├── package.json ├── projects ├── coreui-angular-chartjs │ ├── LICENSE │ ├── README.md │ ├── README.png │ ├── eslint.config.js │ ├── karma.conf.github.js │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── schematics │ │ ├── collection.json │ │ └── ng-add │ │ │ ├── index.ts │ │ │ └── package-config.ts │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── chartjs.component.html │ │ │ ├── chartjs.component.scss │ │ │ ├── chartjs.component.spec.ts │ │ │ ├── chartjs.component.ts │ │ │ ├── chartjs.interface.ts │ │ │ └── chartjs.module.ts │ │ ├── public-api.ts │ │ └── test.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.schematics.json │ └── tsconfig.spec.json ├── coreui-angular │ ├── CLI.md │ ├── LICENSE │ ├── README.md │ ├── eslint.config.js │ ├── karma.conf.github.js │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── schematics │ │ ├── collection.json │ │ └── ng-add │ │ │ ├── index.ts │ │ │ └── package-config.ts │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── accordion │ │ │ │ ├── accordion-button │ │ │ │ │ ├── accordion-button.directive.spec.ts │ │ │ │ │ └── accordion-button.directive.ts │ │ │ │ ├── accordion-item │ │ │ │ │ ├── accordion-item.component.html │ │ │ │ │ ├── accordion-item.component.scss │ │ │ │ │ ├── accordion-item.component.spec.ts │ │ │ │ │ └── accordion-item.component.ts │ │ │ │ ├── accordion.module.ts │ │ │ │ ├── accordion.service.spec.ts │ │ │ │ ├── accordion.service.ts │ │ │ │ ├── accordion │ │ │ │ │ ├── accordion.component.scss │ │ │ │ │ ├── accordion.component.spec.ts │ │ │ │ │ └── accordion.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── alert │ │ │ │ ├── alert-heading.directive.spec.ts │ │ │ │ ├── alert-heading.directive.ts │ │ │ │ ├── alert-link.directive.spec.ts │ │ │ │ ├── alert-link.directive.ts │ │ │ │ ├── alert.animations.ts │ │ │ │ ├── alert.component.html │ │ │ │ ├── alert.component.scss │ │ │ │ ├── alert.component.spec.ts │ │ │ │ ├── alert.component.ts │ │ │ │ ├── alert.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── avatar │ │ │ │ ├── avatar.component.html │ │ │ │ ├── avatar.component.scss │ │ │ │ ├── avatar.component.spec.ts │ │ │ │ ├── avatar.component.ts │ │ │ │ ├── avatar.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── backdrop │ │ │ │ ├── backdrop.service.spec.ts │ │ │ │ ├── backdrop.service.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── badge │ │ │ │ ├── badge.component.spec.ts │ │ │ │ ├── badge.component.ts │ │ │ │ ├── badge.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── breadcrumb │ │ │ │ ├── breadcrumb-item │ │ │ │ │ ├── breadcrumb-item.component.html │ │ │ │ │ ├── breadcrumb-item.component.scss │ │ │ │ │ ├── breadcrumb-item.component.spec.ts │ │ │ │ │ ├── breadcrumb-item.component.ts │ │ │ │ │ └── breadcrumb-item.ts │ │ │ │ ├── breadcrumb-router │ │ │ │ │ ├── breadcrumb-router.component.html │ │ │ │ │ ├── breadcrumb-router.component.spec.ts │ │ │ │ │ ├── breadcrumb-router.component.ts │ │ │ │ │ ├── breadcrumb-router.service.spec.ts │ │ │ │ │ └── breadcrumb-router.service.ts │ │ │ │ ├── breadcrumb.module.ts │ │ │ │ ├── breadcrumb │ │ │ │ │ ├── breadcrumb.component.spec.ts │ │ │ │ │ └── breadcrumb.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── button-group │ │ │ │ ├── button-group.module.ts │ │ │ │ ├── button-group │ │ │ │ │ ├── button-group.component.spec.ts │ │ │ │ │ └── button-group.component.ts │ │ │ │ ├── button-toolbar │ │ │ │ │ ├── button-toolbar.component.spec.ts │ │ │ │ │ └── button-toolbar.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── button │ │ │ │ ├── button-close.directive.spec.ts │ │ │ │ ├── button-close.directive.ts │ │ │ │ ├── button-close.md │ │ │ │ ├── button.directive.spec.ts │ │ │ │ ├── button.directive.ts │ │ │ │ ├── button.md │ │ │ │ ├── button.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── callout │ │ │ │ ├── callout.component.scss │ │ │ │ ├── callout.component.spec.ts │ │ │ │ ├── callout.component.ts │ │ │ │ ├── callout.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── card │ │ │ │ ├── card-body.component.spec.ts │ │ │ │ ├── card-body.component.ts │ │ │ │ ├── card-footer.component.spec.ts │ │ │ │ ├── card-footer.component.ts │ │ │ │ ├── card-group.component.spec.ts │ │ │ │ ├── card-group.component.ts │ │ │ │ ├── card-header-actions.component.spec.ts │ │ │ │ ├── card-header-actions.component.ts │ │ │ │ ├── card-header.component.spec.ts │ │ │ │ ├── card-header.component.ts │ │ │ │ ├── card-img-overlay │ │ │ │ │ ├── card-img-overlay.component.scss │ │ │ │ │ ├── card-img-overlay.component.spec.ts │ │ │ │ │ └── card-img-overlay.component.ts │ │ │ │ ├── card-img.directive.spec.ts │ │ │ │ ├── card-img.directive.ts │ │ │ │ ├── card-link.directive.spec.ts │ │ │ │ ├── card-link.directive.ts │ │ │ │ ├── card-subtitle.directive.spec.ts │ │ │ │ ├── card-subtitle.directive.ts │ │ │ │ ├── card-text.directive.spec.ts │ │ │ │ ├── card-text.directive.ts │ │ │ │ ├── card-title.directive.spec.ts │ │ │ │ ├── card-title.directive.ts │ │ │ │ ├── card.component.spec.ts │ │ │ │ ├── card.component.ts │ │ │ │ ├── card.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── carousel │ │ │ │ ├── carousel-caption │ │ │ │ │ ├── carousel-caption.component.scss │ │ │ │ │ ├── carousel-caption.component.spec.ts │ │ │ │ │ └── carousel-caption.component.ts │ │ │ │ ├── carousel-control │ │ │ │ │ ├── carousel-control.component.html │ │ │ │ │ ├── carousel-control.component.spec.ts │ │ │ │ │ └── carousel-control.component.ts │ │ │ │ ├── carousel-indicators │ │ │ │ │ ├── carousel-indicators.component.html │ │ │ │ │ ├── carousel-indicators.component.spec.ts │ │ │ │ │ └── carousel-indicators.component.ts │ │ │ │ ├── carousel-inner │ │ │ │ │ ├── carousel-inner.component.scss │ │ │ │ │ ├── carousel-inner.component.spec.ts │ │ │ │ │ └── carousel-inner.component.ts │ │ │ │ ├── carousel-item │ │ │ │ │ ├── carousel-item.component.html │ │ │ │ │ ├── carousel-item.component.scss │ │ │ │ │ ├── carousel-item.component.spec.ts │ │ │ │ │ └── carousel-item.component.ts │ │ │ │ ├── carousel-state.ts │ │ │ │ ├── carousel-state.type.ts │ │ │ │ ├── carousel.animation.ts │ │ │ │ ├── carousel.config.spec.ts │ │ │ │ ├── carousel.config.ts │ │ │ │ ├── carousel.module.ts │ │ │ │ ├── carousel.service.spec.ts │ │ │ │ ├── carousel.service.ts │ │ │ │ ├── carousel │ │ │ │ │ ├── carousel.component.scss │ │ │ │ │ ├── carousel.component.spec.ts │ │ │ │ │ └── carousel.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── collapse │ │ │ │ ├── collapse.animations.ts │ │ │ │ ├── collapse.directive.spec.ts │ │ │ │ ├── collapse.directive.ts │ │ │ │ ├── collapse.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── coreui.types.ts │ │ │ ├── dropdown │ │ │ │ ├── dropdown-close │ │ │ │ │ ├── dropdown-close.directive.spec.ts │ │ │ │ │ └── dropdown-close.directive.ts │ │ │ │ ├── dropdown-divider │ │ │ │ │ ├── dropdown-divider.directive.spec.ts │ │ │ │ │ └── dropdown-divider.directive.ts │ │ │ │ ├── dropdown-header │ │ │ │ │ ├── dropdown-header.directive.spec.ts │ │ │ │ │ └── dropdown-header.directive.ts │ │ │ │ ├── dropdown-item │ │ │ │ │ ├── dropdown-item-plain.directive.spec.ts │ │ │ │ │ ├── dropdown-item-plain.directive.ts │ │ │ │ │ ├── dropdown-item.directive.spec.ts │ │ │ │ │ └── dropdown-item.directive.ts │ │ │ │ ├── dropdown-menu │ │ │ │ │ ├── dropdown-menu.directive.spec.ts │ │ │ │ │ └── dropdown-menu.directive.ts │ │ │ │ ├── dropdown.module.ts │ │ │ │ ├── dropdown.service.spec.ts │ │ │ │ ├── dropdown.service.ts │ │ │ │ ├── dropdown │ │ │ │ │ ├── dropdown.component.scss │ │ │ │ │ ├── dropdown.component.spec.ts │ │ │ │ │ └── dropdown.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── footer │ │ │ │ ├── footer.component.spec.ts │ │ │ │ ├── footer.component.ts │ │ │ │ ├── footer.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── form │ │ │ │ ├── form-check │ │ │ │ │ ├── form-check-input.directive.spec.ts │ │ │ │ │ ├── form-check-input.directive.ts │ │ │ │ │ ├── form-check-label.directive.spec.ts │ │ │ │ │ ├── form-check-label.directive.ts │ │ │ │ │ ├── form-check.component.spec.ts │ │ │ │ │ └── form-check.component.ts │ │ │ │ ├── form-control │ │ │ │ │ ├── form-control.directive.spec.ts │ │ │ │ │ └── form-control.directive.ts │ │ │ │ ├── form-feedback │ │ │ │ │ ├── form-feedback.component.spec.ts │ │ │ │ │ └── form-feedback.component.ts │ │ │ │ ├── form-floating │ │ │ │ │ ├── form-floating.directive.spec.ts │ │ │ │ │ └── form-floating.directive.ts │ │ │ │ ├── form-label │ │ │ │ │ ├── form-label.directive.spec.ts │ │ │ │ │ └── form-label.directive.ts │ │ │ │ ├── form-select │ │ │ │ │ ├── form-select.directive.spec.ts │ │ │ │ │ └── form-select.directive.ts │ │ │ │ ├── form-text │ │ │ │ │ ├── form-text.directive.spec.ts │ │ │ │ │ └── form-text.directive.ts │ │ │ │ ├── form.module.ts │ │ │ │ ├── form │ │ │ │ │ ├── form.directive.spec.ts │ │ │ │ │ └── form.directive.ts │ │ │ │ ├── index.ts │ │ │ │ ├── input-group-text │ │ │ │ │ ├── input-group-text.directive.spec.ts │ │ │ │ │ └── input-group-text.directive.ts │ │ │ │ ├── input-group │ │ │ │ │ ├── input-group.component.spec.ts │ │ │ │ │ └── input-group.component.ts │ │ │ │ └── public_api.ts │ │ │ ├── grid │ │ │ │ ├── col.component.scss │ │ │ │ ├── col.component.spec.ts │ │ │ │ ├── col.component.ts │ │ │ │ ├── col.directive.spec.ts │ │ │ │ ├── col.directive.ts │ │ │ │ ├── col.type.ts │ │ │ │ ├── container.component.scss │ │ │ │ ├── container.component.spec.ts │ │ │ │ ├── container.component.ts │ │ │ │ ├── container.type.ts │ │ │ │ ├── grid.module.ts │ │ │ │ ├── gutter.directive.spec.ts │ │ │ │ ├── gutter.directive.ts │ │ │ │ ├── gutter.type.ts │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── row.component.spec.ts │ │ │ │ ├── row.component.ts │ │ │ │ ├── row.directive.spec.ts │ │ │ │ ├── row.directive.ts │ │ │ │ └── row.type.ts │ │ │ ├── header │ │ │ │ ├── header-brand │ │ │ │ │ ├── header-brand.component.spec.ts │ │ │ │ │ └── header-brand.component.ts │ │ │ │ ├── header-divider │ │ │ │ │ ├── header-divider.component.spec.ts │ │ │ │ │ └── header-divider.component.ts │ │ │ │ ├── header-nav │ │ │ │ │ ├── header-nav.component.scss │ │ │ │ │ ├── header-nav.component.spec.ts │ │ │ │ │ └── header-nav.component.ts │ │ │ │ ├── header-text │ │ │ │ │ ├── header-text.component.scss │ │ │ │ │ ├── header-text.component.spec.ts │ │ │ │ │ └── header-text.component.ts │ │ │ │ ├── header-toggler │ │ │ │ │ ├── header-toggler.directive.spec.ts │ │ │ │ │ └── header-toggler.directive.ts │ │ │ │ ├── header.module.ts │ │ │ │ ├── header │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.spec.ts │ │ │ │ │ └── header.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── image │ │ │ │ ├── img.directive.spec.ts │ │ │ │ ├── img.directive.ts │ │ │ │ ├── img.module.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ │ ├── list-group │ │ │ │ ├── index.ts │ │ │ │ ├── list-group-item.directive.spec.ts │ │ │ │ ├── list-group-item.directive.ts │ │ │ │ ├── list-group.directive.spec.ts │ │ │ │ ├── list-group.directive.ts │ │ │ │ ├── list-group.module.ts │ │ │ │ └── public_api.ts │ │ │ ├── modal │ │ │ │ ├── index.ts │ │ │ │ ├── modal-body │ │ │ │ │ ├── modal-body.component.scss │ │ │ │ │ ├── modal-body.component.spec.ts │ │ │ │ │ └── modal-body.component.ts │ │ │ │ ├── modal-content │ │ │ │ │ ├── modal-content.component.spec.ts │ │ │ │ │ └── modal-content.component.ts │ │ │ │ ├── modal-dialog │ │ │ │ │ ├── modal-dialog.component.scss │ │ │ │ │ ├── modal-dialog.component.spec.ts │ │ │ │ │ └── modal-dialog.component.ts │ │ │ │ ├── modal-dismiss │ │ │ │ │ ├── modal-toggle.directive.spec.ts │ │ │ │ │ └── modal-toggle.directive.ts │ │ │ │ ├── modal-footer │ │ │ │ │ ├── modal-footer.component.spec.ts │ │ │ │ │ └── modal-footer.component.ts │ │ │ │ ├── modal-header │ │ │ │ │ ├── modal-header.component.spec.ts │ │ │ │ │ └── modal-header.component.ts │ │ │ │ ├── modal-title │ │ │ │ │ ├── modal-title.directive.spec.ts │ │ │ │ │ └── modal-title.directive.ts │ │ │ │ ├── modal.module.ts │ │ │ │ ├── modal.service.spec.ts │ │ │ │ ├── modal.service.ts │ │ │ │ ├── modal │ │ │ │ │ ├── modal.component.html │ │ │ │ │ ├── modal.component.spec.ts │ │ │ │ │ └── modal.component.ts │ │ │ │ └── public_api.ts │ │ │ ├── nav │ │ │ │ ├── index.ts │ │ │ │ ├── nav-item.component.scss │ │ │ │ ├── nav-item.component.spec.ts │ │ │ │ ├── nav-item.component.ts │ │ │ │ ├── nav-link.directive.spec.ts │ │ │ │ ├── nav-link.directive.ts │ │ │ │ ├── nav.component.scss │ │ │ │ ├── nav.component.spec.ts │ │ │ │ ├── nav.component.ts │ │ │ │ ├── nav.module.ts │ │ │ │ └── public_api.ts │ │ │ ├── navbar │ │ │ │ ├── index.ts │ │ │ │ ├── navbar-brand │ │ │ │ │ ├── navbar-brand.directive.spec.ts │ │ │ │ │ └── navbar-brand.directive.ts │ │ │ │ ├── navbar-nav │ │ │ │ │ ├── navbar-nav.component.spec.ts │ │ │ │ │ └── navbar-nav.component.ts │ │ │ │ ├── navbar-text │ │ │ │ │ ├── navbar-text.component.spec.ts │ │ │ │ │ └── navbar-text.component.ts │ │ │ │ ├── navbar-toggler │ │ │ │ │ ├── navbar-toggler.directive.spec.ts │ │ │ │ │ └── navbar-toggler.directive.ts │ │ │ │ ├── navbar.component.html │ │ │ │ ├── navbar.component.spec.ts │ │ │ │ ├── navbar.component.ts │ │ │ │ ├── navbar.module.ts │ │ │ │ └── public_api.ts │ │ │ ├── offcanvas │ │ │ │ ├── index.ts │ │ │ │ ├── offcanvas-body │ │ │ │ │ ├── offcanvas-body.component.scss │ │ │ │ │ ├── offcanvas-body.component.spec.ts │ │ │ │ │ └── offcanvas-body.component.ts │ │ │ │ ├── offcanvas-header │ │ │ │ │ ├── offcanvas-header.component.spec.ts │ │ │ │ │ └── offcanvas-header.component.ts │ │ │ │ ├── offcanvas-title │ │ │ │ │ ├── offcanvas-title.directive.spec.ts │ │ │ │ │ └── offcanvas-title.directive.ts │ │ │ │ ├── offcanvas-toggle │ │ │ │ │ ├── offcanvas-toggle.directive.spec.ts │ │ │ │ │ └── offcanvas-toggle.directive.ts │ │ │ │ ├── offcanvas.module.ts │ │ │ │ ├── offcanvas.service.spec.ts │ │ │ │ ├── offcanvas.service.ts │ │ │ │ ├── offcanvas │ │ │ │ │ ├── offcanvas.component.html │ │ │ │ │ ├── offcanvas.component.scss │ │ │ │ │ ├── offcanvas.component.spec.ts │ │ │ │ │ └── offcanvas.component.ts │ │ │ │ └── public_api.ts │ │ │ ├── pagination │ │ │ │ ├── index.ts │ │ │ │ ├── page-item │ │ │ │ │ ├── page-item.component.scss │ │ │ │ │ ├── page-item.component.spec.ts │ │ │ │ │ ├── page-item.component.ts │ │ │ │ │ ├── page-item.directive.spec.ts │ │ │ │ │ └── page-item.directive.ts │ │ │ │ ├── page-link │ │ │ │ │ ├── page-link.directive.spec.ts │ │ │ │ │ └── page-link.directive.ts │ │ │ │ ├── pagination.module.ts │ │ │ │ ├── pagination │ │ │ │ │ ├── pagination.component.html │ │ │ │ │ ├── pagination.component.spec.ts │ │ │ │ │ └── pagination.component.ts │ │ │ │ └── public_api.ts │ │ │ ├── placeholder │ │ │ │ ├── index.ts │ │ │ │ ├── placeholder-animation.directive.spec.ts │ │ │ │ ├── placeholder-animation.directive.ts │ │ │ │ ├── placeholder.directive.spec.ts │ │ │ │ ├── placeholder.directive.ts │ │ │ │ ├── placeholder.module.ts │ │ │ │ └── public_api.ts │ │ │ ├── popover │ │ │ │ ├── index.ts │ │ │ │ ├── popover.directive.spec.ts │ │ │ │ ├── popover.directive.ts │ │ │ │ ├── popover.module.ts │ │ │ │ ├── popover │ │ │ │ │ ├── popover.component.html │ │ │ │ │ ├── popover.component.spec.ts │ │ │ │ │ └── popover.component.ts │ │ │ │ └── public_api.ts │ │ │ ├── progress │ │ │ │ ├── index.ts │ │ │ │ ├── progress-bar.component.spec.ts │ │ │ │ ├── progress-bar.component.ts │ │ │ │ ├── progress-bar.directive.spec.ts │ │ │ │ ├── progress-bar.directive.ts │ │ │ │ ├── progress-stacked.component.spec.ts │ │ │ │ ├── progress-stacked.component.ts │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ ├── progress.component.spec.ts │ │ │ │ ├── progress.component.ts │ │ │ │ ├── progress.module.ts │ │ │ │ ├── progress.service.spec.ts │ │ │ │ ├── progress.service.ts │ │ │ │ ├── progress.type.ts │ │ │ │ └── public_api.ts │ │ │ ├── services │ │ │ │ ├── class-toggle.service.spec.ts │ │ │ │ ├── class-toggle.service.ts │ │ │ │ ├── color-mode.service.spec.ts │ │ │ │ ├── color-mode.service.ts │ │ │ │ ├── in-memory-storage.service.spec.ts │ │ │ │ ├── in-memory-storage.service.ts │ │ │ │ ├── index.ts │ │ │ │ ├── intersection.service.spec.ts │ │ │ │ ├── intersection.service.ts │ │ │ │ ├── listeners.service.spec.ts │ │ │ │ ├── listeners.service.ts │ │ │ │ ├── local-storage.service.spec.ts │ │ │ │ ├── local-storage.service.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── rtl.service.spec.ts │ │ │ │ ├── rtl.service.ts │ │ │ │ ├── script-injector.service.spec.ts │ │ │ │ ├── script-injector.service.ts │ │ │ │ ├── uid.service.spec.ts │ │ │ │ └── uid.service.ts │ │ │ ├── shared │ │ │ │ ├── element-ref.directive.spec.ts │ │ │ │ ├── element-ref.directive.ts │ │ │ │ ├── html-attr.directive.spec.ts │ │ │ │ ├── html-attr.directive.ts │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── shared.module.ts │ │ │ │ ├── template-id.directive.spec.ts │ │ │ │ ├── template-id.directive.ts │ │ │ │ ├── theme.directive.spec.ts │ │ │ │ └── theme.directive.ts │ │ │ ├── sidebar │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── sidebar-backdrop │ │ │ │ │ ├── sidebar-backdrop.service.spec.ts │ │ │ │ │ └── sidebar-backdrop.service.ts │ │ │ │ ├── sidebar-brand │ │ │ │ │ ├── sidebar-brand.component.html │ │ │ │ │ ├── sidebar-brand.component.spec.ts │ │ │ │ │ └── sidebar-brand.component.ts │ │ │ │ ├── sidebar-footer │ │ │ │ │ ├── sidebar-footer.component.spec.ts │ │ │ │ │ └── sidebar-footer.component.ts │ │ │ │ ├── sidebar-header │ │ │ │ │ ├── sidebar-header.component.spec.ts │ │ │ │ │ └── sidebar-header.component.ts │ │ │ │ ├── sidebar-nav │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── public_api.ts │ │ │ │ │ ├── sidebar-nav-badge.pipe.spec.ts │ │ │ │ │ ├── sidebar-nav-badge.pipe.ts │ │ │ │ │ ├── sidebar-nav-divider.component.spec.ts │ │ │ │ │ ├── sidebar-nav-divider.component.ts │ │ │ │ │ ├── sidebar-nav-group.component.html │ │ │ │ │ ├── sidebar-nav-group.component.scss │ │ │ │ │ ├── sidebar-nav-group.component.spec.ts │ │ │ │ │ ├── sidebar-nav-group.component.ts │ │ │ │ │ ├── sidebar-nav-group.service.spec.ts │ │ │ │ │ ├── sidebar-nav-group.service.ts │ │ │ │ │ ├── sidebar-nav-icon.pipe.spec.ts │ │ │ │ │ ├── sidebar-nav-icon.pipe.ts │ │ │ │ │ ├── sidebar-nav-item-class.pipe.spec.ts │ │ │ │ │ ├── sidebar-nav-item-class.pipe.ts │ │ │ │ │ ├── sidebar-nav-label.component.html │ │ │ │ │ ├── sidebar-nav-label.component.spec.ts │ │ │ │ │ ├── sidebar-nav-label.component.ts │ │ │ │ │ ├── sidebar-nav-link.component.html │ │ │ │ │ ├── sidebar-nav-link.component.spec.ts │ │ │ │ │ ├── sidebar-nav-link.component.ts │ │ │ │ │ ├── sidebar-nav-link.pipe.ts │ │ │ │ │ ├── sidebar-nav-title.component.spec.ts │ │ │ │ │ ├── sidebar-nav-title.component.ts │ │ │ │ │ ├── sidebar-nav.component.html │ │ │ │ │ ├── sidebar-nav.component.spec.ts │ │ │ │ │ ├── sidebar-nav.component.ts │ │ │ │ │ ├── sidebar-nav.service.spec.ts │ │ │ │ │ ├── sidebar-nav.service.ts │ │ │ │ │ └── sidebar-nav.ts │ │ │ │ ├── sidebar-toggle │ │ │ │ │ ├── sidebar-toggle.directive.spec.ts │ │ │ │ │ └── sidebar-toggle.directive.ts │ │ │ │ ├── sidebar-toggler │ │ │ │ │ └── sidebar-toggler.directive.ts │ │ │ │ ├── sidebar.module.ts │ │ │ │ ├── sidebar.service.spec.ts │ │ │ │ ├── sidebar.service.ts │ │ │ │ └── sidebar │ │ │ │ │ ├── sidebar.component.spec.ts │ │ │ │ │ └── sidebar.component.ts │ │ │ ├── spinner │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── spinner.component.html │ │ │ │ ├── spinner.component.spec.ts │ │ │ │ ├── spinner.component.ts │ │ │ │ └── spinner.module.ts │ │ │ ├── table │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── table-active.directive.spec.ts │ │ │ │ ├── table-active.directive.ts │ │ │ │ ├── table-color.directive.spec.ts │ │ │ │ ├── table-color.directive.ts │ │ │ │ ├── table.directive.spec.ts │ │ │ │ ├── table.directive.ts │ │ │ │ ├── table.module.ts │ │ │ │ └── table.type.ts │ │ │ ├── tabs-2 │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── tab-panel │ │ │ │ │ ├── tab-panel.component.spec.ts │ │ │ │ │ └── tab-panel.component.ts │ │ │ │ ├── tab │ │ │ │ │ ├── tab.directive.spec.ts │ │ │ │ │ └── tab.directive.ts │ │ │ │ ├── tabs-content │ │ │ │ │ ├── tabs-content.component.spec.ts │ │ │ │ │ └── tabs-content.component.ts │ │ │ │ ├── tabs-list │ │ │ │ │ ├── tabs-list.component.spec.ts │ │ │ │ │ └── tabs-list.component.ts │ │ │ │ ├── tabs.component.scss │ │ │ │ ├── tabs.component.spec.ts │ │ │ │ ├── tabs.component.ts │ │ │ │ ├── tabs.service.spec.ts │ │ │ │ ├── tabs.service.ts │ │ │ │ └── tabs2.module.ts │ │ │ ├── tabs │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── tab-content-ref.directive.spec.ts │ │ │ │ ├── tab-content-ref.directive.ts │ │ │ │ ├── tab-content │ │ │ │ │ ├── tab-content.component.scss │ │ │ │ │ ├── tab-content.component.spec.ts │ │ │ │ │ └── tab-content.component.ts │ │ │ │ ├── tab-pane │ │ │ │ │ ├── tab-pane.component.scss │ │ │ │ │ ├── tab-pane.component.spec.ts │ │ │ │ │ └── tab-pane.component.ts │ │ │ │ ├── tab.service.spec.ts │ │ │ │ ├── tab.service.ts │ │ │ │ ├── tabs.md │ │ │ │ └── tabs.module.ts │ │ │ ├── toast │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── toast-body │ │ │ │ │ ├── toast-body.component.scss │ │ │ │ │ ├── toast-body.component.spec.ts │ │ │ │ │ └── toast-body.component.ts │ │ │ │ ├── toast-close.directive.spec.ts │ │ │ │ ├── toast-close.directive.ts │ │ │ │ ├── toast-header │ │ │ │ │ ├── toast-header.component.html │ │ │ │ │ ├── toast-header.component.spec.ts │ │ │ │ │ └── toast-header.component.ts │ │ │ │ ├── toast.module.ts │ │ │ │ ├── toast │ │ │ │ │ ├── toast.component.scss │ │ │ │ │ ├── toast.component.spec.ts │ │ │ │ │ └── toast.component.ts │ │ │ │ └── toaster │ │ │ │ │ ├── toaster-host.directive.spec.ts │ │ │ │ │ ├── toaster-host.directive.ts │ │ │ │ │ ├── toaster.component.html │ │ │ │ │ ├── toaster.component.spec.ts │ │ │ │ │ ├── toaster.component.ts │ │ │ │ │ ├── toaster.service.spec.ts │ │ │ │ │ └── toaster.service.ts │ │ │ ├── tooltip │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── tooltip.directive.spec.ts │ │ │ │ ├── tooltip.directive.ts │ │ │ │ ├── tooltip.module.ts │ │ │ │ └── tooltip │ │ │ │ │ ├── tooltip.component.html │ │ │ │ │ ├── tooltip.component.spec.ts │ │ │ │ │ └── tooltip.component.ts │ │ │ ├── utilities │ │ │ │ ├── align.directive.spec.ts │ │ │ │ ├── align.directive.ts │ │ │ │ ├── bg-color.directive.spec.ts │ │ │ │ ├── bg-color.directive.ts │ │ │ │ ├── border.directive.spec.ts │ │ │ │ ├── border.directive.ts │ │ │ │ ├── border.type.ts │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── rounded.directive.spec.ts │ │ │ │ ├── rounded.directive.ts │ │ │ │ ├── rounded.type.ts │ │ │ │ ├── shadow-on-scroll.directive.spec.ts │ │ │ │ ├── shadow-on-scroll.directive.ts │ │ │ │ ├── text-bg-color.directive.spec.ts │ │ │ │ ├── text-bg-color.directive.ts │ │ │ │ ├── text-color.directive.spec.ts │ │ │ │ ├── text-color.directive.ts │ │ │ │ ├── utilities.module.ts │ │ │ │ ├── visible.directive.spec.ts │ │ │ │ └── visible.directive.ts │ │ │ └── widget │ │ │ │ ├── index.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── widget-stat-a │ │ │ │ ├── widget-stat-a.component.html │ │ │ │ ├── widget-stat-a.component.spec.ts │ │ │ │ └── widget-stat-a.component.ts │ │ │ │ ├── widget-stat-b │ │ │ │ ├── widget-stat-b.component.html │ │ │ │ ├── widget-stat-b.component.spec.ts │ │ │ │ └── widget-stat-b.component.ts │ │ │ │ ├── widget-stat-c │ │ │ │ ├── widget-stat-c.component.html │ │ │ │ ├── widget-stat-c.component.spec.ts │ │ │ │ └── widget-stat-c.component.ts │ │ │ │ ├── widget-stat-d │ │ │ │ ├── widget-stat-d.component.html │ │ │ │ ├── widget-stat-d.component.spec.ts │ │ │ │ └── widget-stat-d.component.ts │ │ │ │ ├── widget-stat-e │ │ │ │ ├── widget-stat-e.component.html │ │ │ │ ├── widget-stat-e.component.spec.ts │ │ │ │ └── widget-stat-e.component.ts │ │ │ │ ├── widget-stat-f │ │ │ │ ├── widget-stat-f.component.html │ │ │ │ ├── widget-stat-f.component.spec.ts │ │ │ │ └── widget-stat-f.component.ts │ │ │ │ └── widget.module.ts │ │ ├── public-api.ts │ │ └── test.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.schematics.json │ └── tsconfig.spec.json └── coreui-icons-angular │ ├── LICENSE │ ├── README.md │ ├── eslint.config.js │ ├── karma.conf.github.js │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── schematics │ ├── collection.json │ └── ng-add │ │ ├── index.ts │ │ └── package-config.ts │ ├── src │ ├── index.ts │ ├── lib │ │ ├── icon-set │ │ │ ├── icon-set.module.ts │ │ │ ├── icon-set.service.spec.ts │ │ │ ├── icon-set.service.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ │ ├── icon │ │ │ ├── icon.component.scss │ │ │ ├── icon.component.spec.ts │ │ │ ├── icon.component.svg │ │ │ ├── icon.component.ts │ │ │ ├── icon.directive.spec.ts │ │ │ ├── icon.directive.ts │ │ │ ├── icon.interface.ts │ │ │ ├── icon.module.ts │ │ │ ├── icon.utils.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ │ └── shared │ │ │ ├── html-attr.directive.spec.ts │ │ │ └── html-attr.directive.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.schematics.json │ └── tsconfig.spec.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_style = space 8 | indent_size = 2 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.ts] 13 | quote_type = single 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: "https://coreui.io/pricing/?support=true" 4 | open_collective: coreui 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Tell us about a bug you may have identified in Bootstrap. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | Before opening: 11 | 12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui-angular/issues?utf8=%E2%9C%93&q=is%3Aissue) 13 | - [Validate](https://html5.validator.nu/) any HTML to avoid common problems 14 | - Read the [contributing guidelines](https://github.com/coreui/coreui-angular/blob/main/.github/CONTRIBUTING.md) 15 | 16 | Bug reports must include: 17 | 18 | - Operating system and version (Windows, macOS, Android, iOS) 19 | - Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser) 20 | - A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for a new feature in CoreUI. 4 | title: '' 5 | labels: feature 6 | assignees: '' 7 | 8 | --- 9 | 10 | Before opening: 11 | 12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui-angular/issues?utf8=%E2%9C%93&q=is%3Aissue) 13 | - Read the [contributing guidelines](https://github.com/coreui/coreui-angular/blob/main/.github/CONTRIBUTING.md) 14 | 15 | Feature requests must include: 16 | 17 | - As much detail as possible for what we should add and why it's important to Bootstrap 18 | - Relevant links to prior art, screenshots, or live demos whenever possible 19 | -------------------------------------------------------------------------------- /.github/SUPPORT.md: -------------------------------------------------------------------------------- 1 | ### Bug reports 2 | 3 | See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. 4 | 5 | ### How-to 6 | 7 | For general troubleshooting or help getting started: 8 | 9 | - Join [GitHub Discussions](https://github.com/coreui/coreui-angular/discussions). 10 | -------------------------------------------------------------------------------- /.github/workflows/build-check.yml: -------------------------------------------------------------------------------- 1 | name: Build check 2 | 3 | on: 4 | schedule: 5 | # build runs every weekday at 3AM UTC 6 | - cron: '0 3 * * 1-5' 7 | 8 | jobs: 9 | build: 10 | 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [22.x] 16 | os: [ubuntu-latest, windows-latest, macOS-latest] 17 | 18 | steps: 19 | - uses: actions/checkout@v4 20 | - name: Use Node.js ${{ matrix.node-version }} 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: ${{ matrix.node-version }} 24 | cache: 'npm' 25 | - name: Install dependencies 26 | run: npm ci 27 | - name: Project check 28 | run: | 29 | npm run build:icons:prod 30 | npm run build:lib:prod 31 | npm run lint:lib 32 | npm run test:lib:prod 33 | env: 34 | CI: true 35 | -------------------------------------------------------------------------------- /.github/workflows/project-chartjs-check.yml: -------------------------------------------------------------------------------- 1 | name: Project chartjs check 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - v5.* 8 | pull_request: 9 | branches: 10 | - main 11 | - v5.* 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [22.x] 20 | os: [ubuntu-latest, windows-latest, macOS-latest] 21 | 22 | steps: 23 | - uses: actions/checkout@v4 24 | - name: Use Node.js ${{ matrix.node-version }} 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version: ${{ matrix.node-version }} 28 | cache: 'npm' 29 | - name: Install dependencies 30 | run: npm ci 31 | - name: Project check 32 | run: | 33 | npm run build:chartjs:prod 34 | npm run lint:chartjs 35 | npm run test:chartjs:prod 36 | env: 37 | CI: true 38 | -------------------------------------------------------------------------------- /.github/workflows/project-icons-check.yml: -------------------------------------------------------------------------------- 1 | name: Project icons check 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - v5.* 8 | pull_request: 9 | branches: 10 | - main 11 | - v5.* 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [22.x] 20 | os: [ubuntu-latest, windows-latest, macOS-latest] 21 | 22 | steps: 23 | - uses: actions/checkout@v4 24 | - name: Use Node.js ${{ matrix.node-version }} 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version: ${{ matrix.node-version }} 28 | cache: 'npm' 29 | - name: Install dependencies 30 | run: npm ci 31 | - name: Project check 32 | run: | 33 | npm run build:icons:prod 34 | npm run lint:icons 35 | npm run test:icons:prod 36 | env: 37 | CI: true 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # profiling files 15 | chrome-profiler-events*.json 16 | speed-measure-plugin*.json 17 | 18 | # IDEs and editors 19 | .idea/ 20 | .project 21 | .classpath 22 | .c9/ 23 | *.launch 24 | .settings/ 25 | *.sublime-workspace 26 | 27 | # Visual Studio Code 28 | .vscode/* 29 | !.vscode/settings.json 30 | !.vscode/tasks.json 31 | !.vscode/launch.json 32 | !.vscode/extensions.json 33 | .history/* 34 | 35 | # Miscellaneous 36 | /.angular/cache 37 | .sass-cache/ 38 | /connect.lock 39 | /coverage 40 | /libpeerconnection.log 41 | testem.log 42 | /typings 43 | .nx/ 44 | 45 | # System files 46 | .DS_Store 47 | Thumbs.db 48 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'none', 4 | singleQuote: true, 5 | printWidth: 120, 6 | tabWidth: 2 7 | }; 8 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/README.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coreui/coreui-angular/2a2046e572d180bf105b6b7ed0207ab1921b22d9/projects/coreui-angular-chartjs/README.png -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const tseslint = require('typescript-eslint'); 3 | const rootConfig = require('../../eslint.config.js'); 4 | 5 | module.exports = tseslint.config( 6 | ...rootConfig, 7 | { 8 | files: ['**/*.ts'], 9 | rules: {} 10 | }, 11 | { 12 | files: ['**/*.html'], 13 | rules: {} 14 | } 15 | ); 16 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/coreui-angular-chartjs", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "@coreui/chartjs", 9 | "chart.js", 10 | "lodash-es" 11 | ], 12 | "assets": [ 13 | "README.png" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/schematics/collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "ng-add": { 5 | "description": "Add @coreui/angular-chartjs library to the project.", 6 | "factory": "./ng-add/index#ngAdd" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/src/lib/chartjs.component.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/src/lib/chartjs.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | &.chart-wrapper { 3 | display: block; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/src/lib/chartjs.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ChartjsComponent } from './chartjs.component'; 3 | 4 | @NgModule({ 5 | imports: [ 6 | ChartjsComponent 7 | ], 8 | exports: [ 9 | ChartjsComponent 10 | ] 11 | }) 12 | export class ChartjsModule {} 13 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of coreui-angular-chartjs 3 | */ 4 | 5 | export * from './lib/chartjs.component'; 6 | export * from './lib/chartjs.module'; 7 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting(), 15 | { teardown: { destroyAfterEach: true }}, 16 | ); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.lib.json" 6 | }, 7 | { 8 | "path": "./tsconfig.lib.prod.json" 9 | }, 10 | { 11 | "path": "./tsconfig.spec.json" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "src/test.ts", 13 | "**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/coreui-angular-chartjs/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/coreui-angular/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const tseslint = require('typescript-eslint'); 3 | const rootConfig = require('../../eslint.config.js'); 4 | 5 | module.exports = tseslint.config( 6 | ...rootConfig, 7 | { 8 | files: ['**/*.ts'], 9 | rules: { 10 | '@typescript-eslint/ban-ts-comment': 'off', 11 | '@typescript-eslint/ban-tslint-comment': 'off', 12 | '@typescript-eslint/class-literal-property-style': 'off', 13 | '@typescript-eslint/consistent-generic-constructors': 'off', 14 | '@typescript-eslint/consistent-type-assertions': 'off', 15 | '@typescript-eslint/consistent-type-definitions': 'off', 16 | '@typescript-eslint/no-unused-vars': 'off', 17 | 'no-extra-boolean-cast': 'off', 18 | 'no-unused-private-class-members': 'off' 19 | } 20 | }, 21 | { 22 | files: ['**/*.html'], 23 | rules: {} 24 | } 25 | ); 26 | -------------------------------------------------------------------------------- /projects/coreui-angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/coreui-angular", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "@popperjs/core" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/schematics/collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "ng-add": { 5 | "description": "Add @coreui/angular library to the project.", 6 | "factory": "./ng-add/index#ngAdd" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/accordion-button/accordion-button.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { AccordionButtonDirective } from './accordion-button.directive'; 2 | import { TestBed } from '@angular/core/testing'; 3 | 4 | describe('AccordionButtonDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new AccordionButtonDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/accordion.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { AccordionComponent } from './accordion/accordion.component'; 3 | import { AccordionButtonDirective } from './accordion-button/accordion-button.directive'; 4 | import { AccordionItemComponent } from './accordion-item/accordion-item.component'; 5 | import { AccordionService } from './accordion.service'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | AccordionButtonDirective, 10 | AccordionComponent, 11 | AccordionItemComponent 12 | ], 13 | exports: [ 14 | AccordionComponent, 15 | AccordionButtonDirective, 16 | AccordionItemComponent 17 | ], 18 | providers: [ 19 | AccordionService 20 | ] 21 | }) 22 | export class AccordionModule { 23 | } 24 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/accordion.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AccordionService } from './accordion.service'; 4 | 5 | describe('AccordionService', () => { 6 | let service: AccordionService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [AccordionService] 11 | }); 12 | service = TestBed.inject(AccordionService); 13 | }); 14 | 15 | it('should be created', () => { 16 | expect(service).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/accordion/accordion.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/accordion/accordion.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AccordionComponent } from './accordion.component'; 4 | 5 | describe('AccordionComponent', () => { 6 | let component: AccordionComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [AccordionComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AccordionComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('accordion'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/accordion/public_api.ts: -------------------------------------------------------------------------------- 1 | export { AccordionButtonDirective } from './accordion-button/accordion-button.directive'; 2 | export { AccordionComponent } from './accordion/accordion.component'; 3 | export { AccordionItemComponent } from './accordion-item/accordion-item.component'; 4 | export { AccordionModule } from './accordion.module'; 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert-heading.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { AlertHeadingDirective } from './alert-heading.directive'; 2 | 3 | describe('AlertHeadingDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new AlertHeadingDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert-heading.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cAlertHeading]', 5 | host: { class: 'alert-heading' } 6 | }) 7 | export class AlertHeadingDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert-link.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { AlertLinkDirective } from './alert-link.directive'; 2 | 3 | describe('AlertLinkDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new AlertLinkDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert-link.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cAlertLink]', 5 | host: { class: 'alert-link' } 6 | }) 7 | export class AlertLinkDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert.animations.ts: -------------------------------------------------------------------------------- 1 | import {animation, animate, style} from '@angular/animations'; 2 | 3 | export const showAnimation = animation( 4 | [ 5 | // style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0}), 6 | animate('{{ time }} ease-in', style({opacity: '*'})), 7 | animate('{{ time }} {{ easing }}', style({height: '*', padding: '*', border: '*', margin: '*'})) 8 | ], 9 | { 10 | params: { time: '300ms', easing: 'ease-in' } 11 | }); 12 | export const hideAnimation = animation( 13 | [ 14 | animate('{{ time }} {{ easing }}', style({opacity: 0})), 15 | animate('{{ time }} {{ easing }}', style({opacity: 0, height: 0, padding: 0, border: 0, margin: 0})), 16 | ], 17 | { 18 | params: { time: '300ms', easing: 'ease-out' } 19 | }); 20 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert.component.html: -------------------------------------------------------------------------------- 1 | @if (visible || !hide()) { 2 | @if (dismissible) { 3 | 4 | } 5 | 6 | } 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/alert.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { AlertComponent } from './alert.component'; 4 | import { AlertHeadingDirective } from './alert-heading.directive'; 5 | import { AlertLinkDirective } from './alert-link.directive'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | AlertComponent, 10 | AlertHeadingDirective, 11 | AlertLinkDirective 12 | ], 13 | exports: [ 14 | AlertComponent, 15 | AlertHeadingDirective, 16 | AlertLinkDirective 17 | ] 18 | }) 19 | export class AlertModule {} 20 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/alert/public_api.ts: -------------------------------------------------------------------------------- 1 | export { AlertHeadingDirective } from './alert-heading.directive'; 2 | export { AlertLinkDirective } from './alert-link.directive'; 3 | export { AlertComponent } from './alert.component'; 4 | export { AlertModule } from './alert.module'; 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/avatar/avatar.component.html: -------------------------------------------------------------------------------- 1 | 2 | @if (src()) { 3 | @defer (prefetch on idle) { 4 | {{alt()}} 5 | } @placeholder () { 6 | 13 | 14 | 15 | } 16 | } 17 | 18 | @if (!!status()) { 19 | 20 | } 21 | 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/avatar/avatar.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .avatar-img { 3 | object-fit: cover; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/avatar/avatar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AvatarComponent } from './avatar.component'; 4 | 5 | describe('AvatarComponent', () => { 6 | let component: AvatarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [AvatarComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AvatarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('avatar'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/avatar/avatar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { AvatarComponent } from './avatar.component'; 3 | 4 | @NgModule({ 5 | imports: [ 6 | AvatarComponent 7 | ], 8 | exports: [ 9 | AvatarComponent 10 | ] 11 | }) 12 | export class AvatarModule {} 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/avatar/public_api.ts: -------------------------------------------------------------------------------- 1 | export { AvatarComponent } from './avatar.component'; 2 | export { AvatarModule } from './avatar.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/backdrop/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/backdrop/public_api.ts: -------------------------------------------------------------------------------- 1 | export { BackdropService } from './backdrop.service'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/badge/badge.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BadgeComponent } from './badge.component'; 4 | 5 | describe('BadgeComponent', () => { 6 | let component: BadgeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [BadgeComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BadgeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('badge'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/badge/badge.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BadgeComponent } from './badge.component'; 3 | 4 | @NgModule({ 5 | imports: [ 6 | BadgeComponent 7 | ], 8 | exports: [ 9 | BadgeComponent 10 | ] 11 | }) 12 | export class BadgeModule {} 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/badge/public_api.ts: -------------------------------------------------------------------------------- 1 | export { BadgeComponent } from './badge.component'; 2 | export { BadgeModule } from './badge.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: list-item; 3 | text-align: -webkit-match-parent; 4 | text-align: match-parent; 5 | } 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.ts: -------------------------------------------------------------------------------- 1 | import { INavAttributes, INavLinkProps } from '../../coreui.types'; 2 | 3 | interface IBreadcrumbItem { 4 | label: string; 5 | url?: string | any[]; 6 | attributes?: INavAttributes; 7 | linkProps?: INavLinkProps; 8 | class?: string; 9 | queryParams?: { [key: string]: any }; 10 | } 11 | 12 | export type { INavAttributes, INavLinkProps, IBreadcrumbItem }; 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html: -------------------------------------------------------------------------------- 1 | 2 | @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) { 3 | @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) { 4 | 10 | {{ breadcrumb?.label }} 11 | 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { BreadcrumbRouterService } from './breadcrumb-router.service'; 4 | import { provideRouter } from '@angular/router'; 5 | 6 | describe('AppBreadcrumbService', () => { 7 | let service: BreadcrumbRouterService; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | providers: [provideRouter([])] 12 | }); 13 | service = TestBed.inject(BreadcrumbRouterService); 14 | }); 15 | 16 | it('should be created', () => { 17 | expect(service).toBeTruthy(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/breadcrumb.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | // CoreUI Breadcrumb Component 4 | import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; 5 | import { BreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.component'; 6 | import { BreadcrumbRouterComponent } from './breadcrumb-router/breadcrumb-router.component'; 7 | import { BreadcrumbRouterService } from './breadcrumb-router/breadcrumb-router.service'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | BreadcrumbComponent, 12 | BreadcrumbItemComponent, 13 | BreadcrumbRouterComponent 14 | ], 15 | exports: [ 16 | BreadcrumbComponent, 17 | BreadcrumbItemComponent, 18 | BreadcrumbRouterComponent 19 | ], 20 | providers: [BreadcrumbRouterService] 21 | }) 22 | export class BreadcrumbModule {} 23 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/breadcrumb/breadcrumb.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-breadcrumb', 5 | template: '', 6 | host: { 7 | class: 'breadcrumb', 8 | '[attr.aria-label]': 'ariaLabel()', 9 | '[attr.role]': 'role()' 10 | } 11 | }) 12 | export class BreadcrumbComponent { 13 | /** 14 | * Default aria-label for breadcrumb. [docs] 15 | * @return string 16 | * @default 'breadcrumb' 17 | */ 18 | readonly ariaLabel = input('breadcrumb'); 19 | 20 | /** 21 | * Default role for breadcrumb. [docs] 22 | * @return string 23 | * @default 'navigation' 24 | */ 25 | readonly role = input('navigation'); 26 | } 27 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/breadcrumb/public_api.ts: -------------------------------------------------------------------------------- 1 | export type { IBreadcrumbItem } from './breadcrumb-item/breadcrumb-item'; 2 | export { BreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.component'; 3 | export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; 4 | export { BreadcrumbRouterComponent } from './breadcrumb-router/breadcrumb-router.component'; 5 | export { BreadcrumbRouterService } from './breadcrumb-router/breadcrumb-router.service'; 6 | export { BreadcrumbModule } from './breadcrumb.module'; 7 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button-group/button-group.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ButtonGroupComponent } from './button-group/button-group.component'; 3 | import { ButtonToolbarComponent } from './button-toolbar/button-toolbar.component'; 4 | 5 | @NgModule({ 6 | imports: [ButtonGroupComponent, ButtonToolbarComponent], 7 | exports: [ButtonGroupComponent, ButtonToolbarComponent] 8 | }) 9 | export class ButtonGroupModule {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button-group/button-group/button-group.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ButtonGroupComponent } from './button-group.component'; 4 | 5 | describe('ButtonGroupComponent', () => { 6 | let component: ButtonGroupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ButtonGroupComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ButtonGroupComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('btn-group'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input, InputSignal } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-button-toolbar', 5 | template: '', 6 | host: { class: 'btn-toolbar', '[attr.role]': 'role()' } 7 | }) 8 | export class ButtonToolbarComponent { 9 | /** 10 | * Default role attr for ButtonToolbar. [docs] 11 | * @type InputSignal 12 | * @default 'toolbar' 13 | */ 14 | role: InputSignal = input('toolbar'); 15 | } 16 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button-group/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ButtonGroupComponent } from './button-group/button-group.component'; 2 | export { ButtonToolbarComponent } from './button-toolbar/button-toolbar.component'; 3 | 4 | export { ButtonGroupModule } from './button-group.module'; 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button/button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ButtonDirective } from './button.directive'; 4 | import { ButtonCloseDirective } from './button-close.directive'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | ButtonDirective, 9 | ButtonCloseDirective 10 | ], 11 | exports: [ 12 | ButtonDirective, 13 | ButtonCloseDirective 14 | ] 15 | }) 16 | export class ButtonModule {} 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/button/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ButtonDirective } from './button.directive'; 2 | export { ButtonCloseDirective } from './button-close.directive'; 3 | export { ButtonModule } from './button.module'; 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/callout/callout.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/callout/callout.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CalloutComponent } from './callout.component'; 4 | 5 | describe('CalloutComponent', () => { 6 | let component: CalloutComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [CalloutComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CalloutComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('callout'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/callout/callout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, computed, input } from '@angular/core'; 2 | import { Colors } from '../coreui.types'; 3 | 4 | @Component({ 5 | selector: 'c-callout, [cCallout]', 6 | template: '', 7 | styleUrls: ['./callout.component.scss'], 8 | host: { class: 'callout', '[class]': 'hostClasses()' } 9 | }) 10 | export class CalloutComponent { 11 | /** 12 | * Sets the color context of the component to one of CoreUI’s themed colors. 13 | * @type Colors 14 | */ 15 | readonly color = input(); 16 | 17 | readonly hostClasses = computed(() => { 18 | const color = this.color(); 19 | return { 20 | callout: true, 21 | [`callout-${color}`]: !!color 22 | } as Record; 23 | }); 24 | } 25 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/callout/callout.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { CalloutComponent } from './callout.component'; 4 | 5 | @NgModule({ 6 | exports: [CalloutComponent], 7 | imports: [CalloutComponent] 8 | }) 9 | export class CalloutModule {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/callout/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/callout/public_api.ts: -------------------------------------------------------------------------------- 1 | export { CalloutComponent } from './callout.component'; 2 | export { CalloutModule } from './callout.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-body.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CardBodyComponent } from './card-body.component'; 4 | 5 | describe('CardBodyComponent', () => { 6 | let component: CardBodyComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [CardBodyComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardBodyComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('card-body'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-body.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-card-body, [c-card-body]', 5 | template: '', 6 | host: { class: 'card-body' } 7 | }) 8 | export class CardBodyComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CardFooterComponent } from './card-footer.component'; 4 | 5 | describe('CardFooterComponent', () => { 6 | let component: CardFooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [CardFooterComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardFooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('card-footer'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-card-footer, [c-card-footer]', 5 | template: '', 6 | host: { class: 'card-footer' } 7 | }) 8 | export class CardFooterComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-group.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CardGroupComponent } from './card-group.component'; 4 | 5 | describe('CardGroupComponent', () => { 6 | let component: CardGroupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [CardGroupComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardGroupComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('card-group'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-group.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-card-group, [c-card-group]', 5 | template: '', 6 | host: { class: 'card-group' } 7 | }) 8 | export class CardGroupComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-header-actions.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-card-header-actions, [c-card-header-actions]', 5 | template: '', 6 | host: { class: 'card-header-actions' } 7 | }) 8 | export class CardHeaderActionsComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CardHeaderComponent } from './card-header.component'; 4 | 5 | describe('CardHeaderComponent', () => { 6 | let component: CardHeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [CardHeaderComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardHeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('card-header'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-card-header, [c-card-header]', 5 | template: '', 6 | host: { class: 'card-header' } 7 | }) 8 | export class CardHeaderComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-img-overlay/card-img-overlay.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-img-overlay/card-img-overlay.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-card-img-overlay', 5 | template: '', 6 | styleUrls: ['./card-img-overlay.component.scss'], 7 | host: { class: 'card-img-overlay' } 8 | }) 9 | export class CardImgOverlayComponent {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-link.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { CardLinkDirective } from './card-link.directive'; 2 | 3 | describe('CardLinkDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new CardLinkDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-link.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cCardLink]', 5 | host: { class: 'card-link' } 6 | }) 7 | export class CardLinkDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-subtitle.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { CardSubtitleDirective } from './card-subtitle.directive'; 2 | 3 | describe('CardSubtitleDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new CardSubtitleDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-subtitle.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cCardSubtitle]', 5 | host: { class: 'card-subtitle' } 6 | }) 7 | export class CardSubtitleDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-text.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { CardTextDirective } from './card-text.directive'; 2 | 3 | describe('CardTextDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new CardTextDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-text.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cCardText]', 5 | host: { class: 'card-text' } 6 | }) 7 | export class CardTextDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-title.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { CardTitleDirective } from './card-title.directive'; 2 | 3 | describe('CardTitleDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new CardTitleDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card-title.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cCardTitle]', 5 | host: { class: 'card-title' } 6 | }) 7 | export class CardTitleDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/card.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { CardComponent } from './card.component'; 4 | 5 | describe('CardComponent', () => { 6 | let component: CardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [CardComponent] 12 | }).compileComponents(); 13 | })); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(CardComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css classes', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/card/public_api.ts: -------------------------------------------------------------------------------- 1 | export { CardComponent } from './card.component'; 2 | export { CardBodyComponent } from './card-body.component'; 3 | export { CardFooterComponent } from './card-footer.component'; 4 | export { CardGroupComponent } from './card-group.component'; 5 | export { CardHeaderComponent } from './card-header.component'; 6 | export { CardHeaderActionsComponent } from './card-header-actions.component'; 7 | export { CardImgDirective } from './card-img.directive'; 8 | export { CardImgOverlayComponent } from './card-img-overlay/card-img-overlay.component'; 9 | export { CardLinkDirective } from './card-link.directive'; 10 | export { CardSubtitleDirective } from './card-subtitle.directive'; 11 | export { CardTextDirective } from './card-text.directive'; 12 | export { CardTitleDirective } from './card-title.directive'; 13 | export { CardModule } from './card.module'; 14 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-caption/carousel-caption.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-caption/carousel-caption.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-carousel-caption', 5 | template: '', 6 | styleUrls: ['./carousel-caption.component.scss'], 7 | host: { 8 | '[class.carousel-caption]': 'true' 9 | } 10 | }) 11 | export class CarouselCaptionComponent {} 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html: -------------------------------------------------------------------------------- 1 | @let tmpl = templates(); 2 | 3 | 4 | 5 | @for (item of items; track item; let i = $index) { 6 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html: -------------------------------------------------------------------------------- 1 | @if (active()) { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel-state.type.ts: -------------------------------------------------------------------------------- 1 | import { CarouselItemComponent } from './carousel-item/carousel-item.component'; 2 | 3 | export interface ICarouselOptions { 4 | activeIndex?: number; 5 | animate?: boolean; 6 | direction?: 'next' | 'prev'; 7 | interval?: number; 8 | transition?: 'slide' | 'crossfade'; 9 | } 10 | 11 | export interface ICarouselState { 12 | activeItemIndex?: number; 13 | animate?: boolean; 14 | direction?: 'next' | 'prev'; 15 | interval?: number; 16 | items?: CarouselItemComponent[]; 17 | transition?: 'slide' | 'crossfade'; 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel.config.spec.ts: -------------------------------------------------------------------------------- 1 | import { CarouselConfig } from './carousel.config'; 2 | 3 | describe('CarouselConfig', () => { 4 | it('should create an instance', () => { 5 | expect(new CarouselConfig()).toBeTruthy(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel.config.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ providedIn: 'root' }) 4 | export class CarouselConfig { 5 | /* Animate transition of slides */ 6 | activeIndex = 0; 7 | /* Animate transition of slides */ 8 | animate = true; 9 | /* Default direction of auto changing of slides */ 10 | direction: 'next' | 'prev' = 'next'; 11 | /* Default interval of auto changing of slides */ 12 | interval = 0; 13 | } 14 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { CarouselService } from './carousel.service'; 4 | 5 | describe('CarouselService', () => { 6 | let service: CarouselService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [CarouselService] 11 | }); 12 | service = TestBed.inject(CarouselService); 13 | }); 14 | 15 | it('should be created', () => { 16 | expect(service).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | export interface ICarouselIndex { 5 | active?: number; 6 | interval?: number; 7 | lastItemIndex?: number; 8 | } 9 | 10 | @Injectable() 11 | export class CarouselService { 12 | readonly #carouselIndex = new BehaviorSubject({}); 13 | readonly carouselIndex$ = this.#carouselIndex.asObservable(); 14 | 15 | setIndex(index: ICarouselIndex): void { 16 | this.#carouselIndex.next(index); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/carousel/carousel.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/carousel/public_api.ts: -------------------------------------------------------------------------------- 1 | export { CarouselComponent } from './carousel/carousel.component'; 2 | export { CarouselCaptionComponent } from './carousel-caption/carousel-caption.component'; 3 | export { CarouselControlComponent } from './carousel-control/carousel-control.component'; 4 | export { CarouselIndicatorsComponent } from './carousel-indicators/carousel-indicators.component'; 5 | export { CarouselInnerComponent } from './carousel-inner/carousel-inner.component'; 6 | export { CarouselItemComponent } from './carousel-item/carousel-item.component'; 7 | export { CarouselConfig } from './carousel.config'; 8 | export { CarouselModule } from './carousel.module'; 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/collapse/collapse.animations.ts: -------------------------------------------------------------------------------- 1 | import { animate, animation, style } from '@angular/animations'; 2 | 3 | export const expandAnimation = animation([animate('{{ time }} {{ easing }}')]); 4 | 5 | export const collapseAnimation = animation([ 6 | style({ height: '*', minHeight: '*' }), 7 | animate('{{ time }} {{ easing }}', style({ height: 0, minHeight: 0 })) 8 | ]); 9 | 10 | export const expandHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]); 11 | 12 | export const collapseHorizontalAnimation = animation([animate('{{ time }} {{ easing }}')]); 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/collapse/collapse.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule } from '@angular/core'; 2 | import { CollapseDirective } from './collapse.directive'; 3 | 4 | @NgModule({ 5 | exports: [CollapseDirective], 6 | imports: [CollapseDirective] 7 | }) 8 | export class CollapseModule { 9 | static forRoot(): ModuleWithProviders { 10 | return { ngModule: CollapseModule, providers: [] }; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/collapse/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/collapse/public_api.ts: -------------------------------------------------------------------------------- 1 | export { CollapseDirective } from './collapse.directive'; 2 | export { CollapseModule } from './collapse.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown-divider/dropdown-divider.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { DropdownDividerDirective } from './dropdown-divider.directive'; 2 | 3 | describe('DropdownDividerDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new DropdownDividerDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown-divider/dropdown-divider.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cDropdownDivider]', 5 | host: { class: 'dropdown-divider' } 6 | }) 7 | export class DropdownDividerDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown-header/dropdown-header.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { DropdownHeaderDirective } from './dropdown-header.directive'; 2 | 3 | describe('DropdownHeaderDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new DropdownHeaderDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown-header/dropdown-header.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cDropdownHeader]', 5 | host: { class: 'dropdown-header' } 6 | }) 7 | export class DropdownHeaderDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item-plain.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { DropdownItemPlainDirective } from './dropdown-item-plain.directive'; 2 | 3 | describe('DropdownItemPlainDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new DropdownItemPlainDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item-plain.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cDropdownItemPlain]', 5 | host: { class: 'dropdown-item-text' } 6 | }) 7 | export class DropdownItemPlainDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { DropdownService } from './dropdown.service'; 4 | 5 | describe('DropdownService', () => { 6 | let service: DropdownService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [DropdownService] 11 | }); 12 | service = TestBed.inject(DropdownService); 13 | }); 14 | 15 | it('should be created', () => { 16 | expect(service).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/dropdown.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | export interface IDropdownState { 5 | visible?: boolean | 'toggle'; 6 | dropdown?: any; 7 | } 8 | 9 | @Injectable() 10 | export class DropdownService { 11 | 12 | private dropdownState = new BehaviorSubject({}); 13 | dropdownState$ = this.dropdownState.asObservable(); 14 | 15 | toggle(state: IDropdownState): void { 16 | this.dropdownState.next(state); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/dropdown/public_api.ts: -------------------------------------------------------------------------------- 1 | export { DropdownDividerDirective } from './dropdown-divider/dropdown-divider.directive'; 2 | export { DropdownHeaderDirective } from './dropdown-header/dropdown-header.directive'; 3 | export { DropdownItemDirective } from './dropdown-item/dropdown-item.directive'; 4 | export { DropdownItemPlainDirective } from './dropdown-item/dropdown-item-plain.directive'; 5 | export { DropdownMenuDirective } from './dropdown-menu/dropdown-menu.directive'; 6 | export { DropdownCloseDirective } from './dropdown-close/dropdown-close.directive'; 7 | export { DropdownComponent, DropdownToggleDirective } from './dropdown/dropdown.component'; 8 | export { DropdownService } from './dropdown.service'; 9 | export { DropdownModule } from './dropdown.module'; 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [FooterComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('footer'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/footer/footer.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | @NgModule({ 6 | imports: [FooterComponent], 7 | exports: [FooterComponent] 8 | }) 9 | export class FooterModule {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/footer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/footer/public_api.ts: -------------------------------------------------------------------------------- 1 | export { FooterComponent } from './footer.component'; 2 | export { FooterModule } from './footer.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-check/form-check-label.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'label[cFormCheckLabel]', 5 | host: { class: 'form-check-label' } 6 | }) 7 | export class FormCheckLabelDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-control/form-control.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { FormControlDirective } from './form-control.directive'; 2 | import { TestBed } from '@angular/core/testing'; 3 | import { ElementRef } from '@angular/core'; 4 | 5 | class MockElementRef extends ElementRef {} 6 | 7 | describe('FormControlDirective', () => { 8 | it('should create an instance', () => { 9 | TestBed.configureTestingModule({ 10 | providers: [{ provide: ElementRef, useClass: MockElementRef }] 11 | }); 12 | TestBed.runInInjectionContext(() => { 13 | const directive = new FormControlDirective(); 14 | expect(directive).toBeTruthy(); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-floating/form-floating.directive.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cFormFloating]', 5 | host: { '[class.form-floating]': 'floating()' } 6 | }) 7 | export class FormFloatingDirective { 8 | /** 9 | * Enable floating labels 10 | * @dafault boolean 11 | */ 12 | readonly floating = input(true, { transform: booleanAttribute, alias: 'cFormFloating' }); 13 | } 14 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-label/form-label.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { FormLabelDirective } from './form-label.directive'; 2 | import { TestBed } from '@angular/core/testing'; 3 | 4 | describe('LabelDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new FormLabelDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-select/form-select.directive.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'select[cSelect]', 5 | host: { class: 'form-select', '[class]': 'hostClasses()' } 6 | }) 7 | export class FormSelectDirective { 8 | /** 9 | * Size the component small or large. 10 | * @default undefined 11 | */ 12 | readonly sizing = input<'' | 'sm' | 'lg' | string>(); 13 | 14 | /** 15 | * Set component validation state to valid. 16 | * @default undefined 17 | */ 18 | readonly valid = input(); 19 | 20 | readonly hostClasses = computed(() => { 21 | const sizing = this.sizing(); 22 | const valid = this.valid(); 23 | return { 24 | 'form-select': true, 25 | [`form-select-${sizing}`]: !!sizing, 26 | 'is-valid': valid === true, 27 | 'is-invalid': valid === false 28 | } as Record; 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-text/form-text.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { FormTextDirective } from './form-text.directive'; 2 | 3 | describe('FormTextDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new FormTextDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form-text/form-text.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cFormText]', 5 | host: { class: 'form-text' } 6 | }) 7 | export class FormTextDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/form/form.directive.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'form[cForm]', 5 | host: { '[class.was-validated]': 'validated()' } 6 | }) 7 | export class FormDirective { 8 | /** 9 | * Mark a form as validated. If you set it `true`, all validation styles will be applied to the form. [docs] 10 | * @return boolean 11 | * @default false 12 | */ 13 | readonly validated = input(false, { transform: booleanAttribute }); 14 | } 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/input-group-text/input-group-text.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { InputGroupTextDirective } from './input-group-text.directive'; 2 | 3 | describe('InputGroupTextDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new InputGroupTextDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/input-group-text/input-group-text.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cInputGroupText]', 5 | host: { class: 'input-group-text' } 6 | }) 7 | export class InputGroupTextDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/form/input-group/input-group.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, computed, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-input-group', 5 | template: '', 6 | host: { class: 'input-group', '[class]': 'hostClasses()' } 7 | }) 8 | export class InputGroupComponent { 9 | /** 10 | * Size the component small or large. 11 | */ 12 | readonly sizing = input(); 13 | 14 | readonly hostClasses = computed(() => { 15 | const sizing = this.sizing(); 16 | return { 17 | 'input-group': true, 18 | [`input-group-${sizing}`]: !!sizing 19 | } as Record; 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/col.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/col.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ColComponent } from './col.component'; 4 | 5 | describe('ColComponent', () => { 6 | let component: ColComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [ColComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ColComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('col'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/col.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { ColDirective } from './col.directive'; 4 | 5 | @Component({ 6 | selector: 'c-col', 7 | template: '', 8 | styleUrls: ['./col.component.scss'] 9 | }) 10 | export class ColComponent extends ColDirective {} 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/col.type.ts: -------------------------------------------------------------------------------- 1 | import { BooleanInput, NumberInput } from '@angular/cdk/coercion'; 2 | 3 | export type ColOrder = (number | 'first' | 'last'); 4 | 5 | export type ColBreakpoint = (BooleanInput | NumberInput); 6 | 7 | export interface ICol { 8 | xs?: (BooleanInput | NumberInput); 9 | sm?: (BooleanInput | NumberInput); 10 | md?: (BooleanInput | NumberInput); 11 | lg?: (BooleanInput | NumberInput); 12 | xl?: (BooleanInput | NumberInput); 13 | xxl?: (BooleanInput | NumberInput); 14 | } 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/container.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/container.type.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoints } from '../coreui.types'; 2 | import { InputSignal, InputSignalWithTransform } from '@angular/core'; 3 | 4 | export interface IContainer { 5 | fluid?: string | boolean | InputSignalWithTransform; 6 | breakpoint?: Exclude | InputSignal>; 7 | } 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/grid.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ContainerComponent } from './container.component'; 4 | import { RowComponent } from './row.component'; 5 | import { ColComponent } from './col.component'; 6 | import { RowDirective } from './row.directive'; 7 | import { ColDirective } from './col.directive'; 8 | import { GutterDirective } from './gutter.directive'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | ColComponent, 13 | ColDirective, 14 | ContainerComponent, 15 | GutterDirective, 16 | RowComponent, 17 | RowDirective 18 | ], 19 | exports: [ 20 | ColComponent, 21 | ColDirective, 22 | ContainerComponent, 23 | GutterDirective, 24 | RowComponent, 25 | RowDirective 26 | ] 27 | }) 28 | export class GridModule {} 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/gutter.type.ts: -------------------------------------------------------------------------------- 1 | import { type InputSignal } from '@angular/core'; 2 | import { BreakpointInfix } from '../coreui.types'; 3 | 4 | export interface IGutter { 5 | gutter?: InputSignal; 6 | } 7 | 8 | export type Gutters = 0 | 1 | 2 | 3 | 4 | 5 | number; 9 | 10 | export interface IGutterObject { 11 | g?: Gutters; 12 | gx?: Gutters; 13 | gy?: Gutters; 14 | } 15 | 16 | export type GutterBreakpoints = { 17 | [key in BreakpointInfix]?: IGutterObject; 18 | }; 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ContainerComponent } from './container.component'; 2 | export { ColComponent } from './col.component'; 3 | export { RowComponent } from './row.component'; 4 | export { GutterDirective } from './gutter.directive'; 5 | export { RowDirective } from './row.directive'; 6 | export { ColDirective } from './col.directive'; 7 | export { GridModule } from './grid.module'; 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/row.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { RowComponent } from './row.component'; 4 | 5 | describe('RowComponent', () => { 6 | let component: RowComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [RowComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(RowComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('row'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/row.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { RowDirective } from './row.directive'; 4 | 5 | @Component({ 6 | selector: 'c-row', 7 | template: '' 8 | }) 9 | export class RowComponent extends RowDirective {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/grid/row.type.ts: -------------------------------------------------------------------------------- 1 | export type NumberOfColumns = number | 'auto'; 2 | 3 | export interface IRow { 4 | xs?: NumberOfColumns; 5 | sm?: NumberOfColumns; 6 | md?: NumberOfColumns; 7 | lg?: NumberOfColumns; 8 | xl?: NumberOfColumns; 9 | xxl?: NumberOfColumns; 10 | } 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-brand/header-brand.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-header-brand', 5 | template: '', 6 | exportAs: 'cHeaderBrand', 7 | host: { 8 | '[attr.role]': 'role()', 9 | class: 'header-brand' 10 | } 11 | }) 12 | export class HeaderBrandComponent { 13 | /** 14 | * Default role for header-brand. [docs] 15 | * @return string 16 | * @default 'button' 17 | */ 18 | readonly role = input('button'); 19 | } 20 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-divider/header-divider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-header-divider, [cHeaderDivider]', 5 | template: ``, 6 | host: { 7 | class: 'header-divider' 8 | } 9 | }) 10 | export class HeaderDividerComponent {} 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-nav/header-nav.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | @extend ul !optional; 3 | //margin-top: 0; 4 | //margin-block-start: 1em; 5 | //margin-block-end: 1em; 6 | //margin-inline-start: 0; 7 | //margin-inline-end: 0; 8 | //padding-inline-start: 40px; 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-nav/header-nav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-header-nav', 5 | template: '', 6 | styleUrls: ['./header-nav.component.scss'], 7 | exportAs: 'cHeaderNav', 8 | host: { 9 | '[attr.role]': 'role()', 10 | class: 'header-nav' 11 | } 12 | }) 13 | export class HeaderNavComponent { 14 | /** 15 | * Default role for header-nav. [docs] 16 | * @return string 17 | * @default 'navigation' 18 | */ 19 | readonly role = input('navigation'); 20 | } 21 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-text/header-text.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-text/header-text.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderTextComponent } from './header-text.component'; 4 | 5 | describe('HeaderTextComponent', () => { 6 | let component: HeaderTextComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [HeaderTextComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderTextComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('header-text'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header-text/header-text.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-header-text, [cHeaderText]', 5 | template: '', 6 | host: { 7 | class: 'header-text' 8 | } 9 | }) 10 | export class HeaderTextComponent {} 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/header/header.component.html: -------------------------------------------------------------------------------- 1 | @if (!!container()) { 2 |
3 | 4 |
5 | } @else { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/header/public_api.ts: -------------------------------------------------------------------------------- 1 | export { HeaderComponent } from './header/header.component'; 2 | export { HeaderBrandComponent } from './header-brand/header-brand.component'; 3 | export { HeaderDividerComponent } from './header-divider/header-divider.component'; 4 | export { HeaderNavComponent } from './header-nav/header-nav.component'; 5 | export { HeaderTextComponent } from './header-text/header-text.component'; 6 | export { HeaderTogglerDirective } from './header-toggler/header-toggler.directive'; 7 | export { HeaderModule } from './header.module' 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/image/img.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { ImgDirective } from './img.directive'; 3 | 4 | describe('ImgDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new ImgDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/image/img.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ImgDirective } from './img.directive'; 3 | 4 | @NgModule({ 5 | imports: [ImgDirective], 6 | exports: [ImgDirective] 7 | }) 8 | export class ImgModule {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/image/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/image/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ImgDirective } from './img.directive'; 2 | export { ImgModule } from './img.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/list-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/list-group/list-group.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { ListGroupDirective } from './list-group.directive'; 3 | 4 | describe('ListGroupDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new ListGroupDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/list-group/list-group.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ListGroupDirective } from './list-group.directive'; 4 | import { ListGroupItemDirective } from './list-group-item.directive'; 5 | 6 | @NgModule({ 7 | exports: [ListGroupDirective, ListGroupItemDirective], 8 | imports: [ListGroupDirective, ListGroupItemDirective] 9 | }) 10 | export class ListGroupModule {} 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/list-group/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ListGroupDirective } from './list-group.directive'; 2 | export { ListGroupItemDirective } from './list-group-item.directive'; 3 | export { ListGroupModule } from './list-group.module'; 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModalBodyComponent } from './modal-body.component'; 4 | 5 | describe('ModalBodyComponent', () => { 6 | let component: ModalBodyComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ModalBodyComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModalBodyComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('modal-body'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-modal-body', 5 | template: '', 6 | styleUrls: ['./modal-body.component.scss'], 7 | host: { class: 'modal-body' } 8 | }) 9 | export class ModalBodyComponent {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-modal-content', 5 | template: '', 6 | host: { class: 'modal-content' } 7 | }) 8 | export class ModalContentComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | 4 | &.modal-dialog-centered { 5 | display: flex; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-dismiss/modal-toggle.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, input } from '@angular/core'; 2 | 3 | import { ModalService } from '../modal.service'; 4 | 5 | @Directive({ 6 | selector: '[cModalToggle]', 7 | host: { 8 | '(click)': 'dismiss($event)' 9 | } 10 | }) 11 | export class ModalToggleDirective { 12 | readonly #modalService = inject(ModalService); 13 | 14 | /** 15 | * Html id attr of modal to dismiss. 16 | * @default undefined 17 | */ 18 | readonly toggle = input(undefined, { alias: 'cModalToggle' }); 19 | 20 | dismiss($event: Event): void { 21 | $event.preventDefault(); 22 | this.#modalService.toggle({ show: 'toggle', id: this.toggle() }); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModalFooterComponent } from './modal-footer.component'; 4 | 5 | describe('ModalFooterComponent', () => { 6 | let component: ModalFooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ModalFooterComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModalFooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('modal-footer'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-modal-footer', 5 | template: '', 6 | host: { class: 'modal-footer' } 7 | }) 8 | export class ModalFooterComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModalHeaderComponent } from './modal-header.component'; 4 | 5 | describe('ModalHeaderComponent', () => { 6 | let component: ModalHeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ModalHeaderComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ModalHeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('modal-header'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-modal-header', 5 | template: '', 6 | host: { class: 'modal-header' } 7 | }) 8 | export class ModalHeaderComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-title/modal-title.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { ModalTitleDirective } from './modal-title.directive'; 2 | 3 | describe('ModalTitleDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new ModalTitleDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal-title/modal-title.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cModalTitle]', 5 | host: { class: 'modal-title' } 6 | }) 7 | export class ModalTitleDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ModalService } from './modal.service'; 4 | 5 | describe('ModalService', () => { 6 | let service: ModalService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(ModalService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject } from 'rxjs'; 3 | import { ModalComponent } from './modal/modal.component'; 4 | 5 | export interface IModalAction { 6 | show?: boolean | 'toggle'; 7 | modal?: ModalComponent; 8 | id?: string; 9 | } 10 | 11 | @Injectable({ 12 | providedIn: 'root' 13 | }) 14 | export class ModalService { 15 | readonly #modalState = new Subject(); 16 | readonly modalState$ = this.#modalState.asObservable(); 17 | 18 | toggle(action: IModalAction): void { 19 | this.#modalState.next(action); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/modal/modal.component.html: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/modal/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ModalBodyComponent } from './modal-body/modal-body.component'; 2 | export { ModalContentComponent } from './modal-content/modal-content.component'; 3 | export { ModalDialogComponent } from './modal-dialog/modal-dialog.component'; 4 | export { ModalToggleDirective } from './modal-dismiss/modal-toggle.directive'; 5 | export { ModalFooterComponent } from './modal-footer/modal-footer.component'; 6 | export { ModalHeaderComponent } from './modal-header/modal-header.component'; 7 | export { ModalTitleDirective } from './modal-title/modal-title.directive'; 8 | export { ModalComponent } from './modal/modal.component'; 9 | export { ModalService } from './modal.service'; 10 | export { ModalModule } from './modal.module'; 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/nav-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: list-item; 3 | text-align: match-parent; 4 | text-align: -webkit-match-parent; 5 | } 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/nav-item.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { NavItemComponent } from './nav-item.component'; 4 | 5 | describe('NavItemComponent', () => { 6 | let component: NavItemComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [NavItemComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavItemComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('nav-item'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/nav-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-nav-item', 5 | template: '', 6 | styleUrls: ['./nav-item.component.scss'], 7 | host: { class: 'nav-item' } 8 | }) 9 | export class NavItemComponent {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/nav.component.scss: -------------------------------------------------------------------------------- 1 | :host .nav-link:focus { 2 | outline: 0; 3 | } 4 | 5 | // todo: temp fix for nav-underline-border 6 | :host.nav-underline-border { 7 | column-gap: 0; 8 | } 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/nav.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NavComponent } from './nav.component'; 3 | import { NavItemComponent } from './nav-item.component'; 4 | import { NavLinkDirective } from './nav-link.directive'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | NavComponent, 9 | NavItemComponent, 10 | NavLinkDirective 11 | ], 12 | exports: [ 13 | NavComponent, 14 | NavItemComponent, 15 | NavLinkDirective 16 | ] 17 | }) 18 | export class NavModule {} 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/nav/public_api.ts: -------------------------------------------------------------------------------- 1 | export { NavLinkDirective } from './nav-link.directive'; 2 | export { NavItemComponent } from './nav-item.component'; 3 | export { NavComponent } from './nav.component'; 4 | export { NavModule } from './nav.module'; 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { NavbarBrandDirective } from './navbar-brand.directive'; 2 | import { TestBed } from '@angular/core/testing'; 3 | 4 | describe('NavbarBrandDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new NavbarBrandDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cNavbarBrand]', 5 | host: { class: 'navbar-brand', '[attr.role]': 'role()' } 6 | }) 7 | export class NavbarBrandDirective { 8 | readonly role = input('button'); 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { NavbarNavComponent } from './navbar-nav.component'; 4 | 5 | describe('NavbarNavComponent', () => { 6 | let component: NavbarNavComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [NavbarNavComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavbarNavComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('navbar-nav'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Component, computed, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-navbar-nav', 5 | template: '', 6 | host: { '[class]': 'hostClasses()' } 7 | }) 8 | export class NavbarNavComponent { 9 | /** 10 | * Enable vertical scrolling of a collapsed navbar toggleable contents. 11 | * @type boolean 12 | */ 13 | readonly scroll = input(false, { transform: booleanAttribute }); 14 | 15 | readonly hostClasses = computed(() => { 16 | return { 17 | 'navbar-nav': true, 18 | 'navbar-nav-scroll': this.scroll() 19 | } as Record; 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-navbar-text', 5 | template: '', 6 | host: { class: 'navbar-text' } 7 | }) 8 | export class NavbarTextComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/navbar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | import { NavbarBrandDirective } from './navbar-brand/navbar-brand.directive'; 5 | import { NavbarNavComponent } from './navbar-nav/navbar-nav.component'; 6 | import { NavbarTextComponent } from './navbar-text/navbar-text.component'; 7 | import { NavbarTogglerDirective } from './navbar-toggler/navbar-toggler.directive'; 8 | 9 | @NgModule({ 10 | exports: [ 11 | NavbarBrandDirective, 12 | NavbarComponent, 13 | NavbarNavComponent, 14 | NavbarTextComponent, 15 | NavbarTogglerDirective 16 | ], 17 | imports: [ 18 | NavbarBrandDirective, 19 | NavbarComponent, 20 | NavbarNavComponent, 21 | NavbarTextComponent, 22 | NavbarTogglerDirective 23 | ] 24 | }) 25 | export class NavbarModule {} 26 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/navbar/public_api.ts: -------------------------------------------------------------------------------- 1 | export { NavbarComponent } from './navbar.component'; 2 | export { NavbarBrandDirective } from './navbar-brand/navbar-brand.directive'; 3 | export { NavbarNavComponent } from './navbar-nav/navbar-nav.component'; 4 | export { NavbarTextComponent } from './navbar-text/navbar-text.component'; 5 | export { NavbarTogglerDirective } from './navbar-toggler/navbar-toggler.directive'; 6 | export { NavbarModule } from './navbar.module'; 7 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas-body/offcanvas-body.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-offcanvas-body', 5 | template: '', 6 | styleUrls: ['./offcanvas-body.component.scss'], 7 | host: { class: 'offcanvas-body' } 8 | }) 9 | export class OffcanvasBodyComponent {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas-header/offcanvas-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-offcanvas-header', 5 | template: '', 6 | host: { class: 'offcanvas-header' } 7 | }) 8 | export class OffcanvasHeaderComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cOffcanvasTitle]', 5 | host: { class: 'offcanvas-title' } 6 | }) 7 | export class OffcanvasTitleDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, input } from '@angular/core'; 2 | 3 | import { OffcanvasService } from '../offcanvas.service'; 4 | 5 | @Directive({ 6 | selector: '[cOffcanvasToggle]', 7 | host: { 8 | '(click)': 'toggleOpen($event)' 9 | } 10 | }) 11 | export class OffcanvasToggleDirective { 12 | readonly #offcanvasService = inject(OffcanvasService); 13 | 14 | /** 15 | * Html id attr of offcanvas to toggle. 16 | * @return string 17 | */ 18 | readonly id = input(undefined, { alias: 'cOffcanvasToggle' }); 19 | 20 | protected toggleOpen($event: MouseEvent): void { 21 | $event.preventDefault(); 22 | this.#offcanvasService.toggle({ show: 'toggle', id: this.id() }); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 3 | 4 | import { OffcanvasService } from './offcanvas.service'; 5 | 6 | describe('OffcanvasService', () => { 7 | let service: OffcanvasService; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [NoopAnimationsModule], 12 | providers: [OffcanvasService] 13 | }); 14 | service = TestBed.inject(OffcanvasService); 15 | }); 16 | 17 | it('should be created', () => { 18 | expect(service).toBeTruthy(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject } from 'rxjs'; 3 | import { OffcanvasComponent } from './offcanvas/offcanvas.component'; 4 | 5 | export interface IOffcanvasAction { 6 | show?: boolean | 'toggle'; 7 | offcanvas?: OffcanvasComponent; 8 | id?: string; 9 | } 10 | 11 | @Injectable({ 12 | providedIn: 'root' 13 | }) 14 | export class OffcanvasService { 15 | private offcanvasState = new Subject(); 16 | offcanvasState$ = this.offcanvasState.asObservable(); 17 | 18 | toggle(action: IOffcanvasAction): void { 19 | this.offcanvasState.next(action); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/offcanvas/public_api.ts: -------------------------------------------------------------------------------- 1 | export { OffcanvasComponent } from './offcanvas/offcanvas.component'; 2 | export { OffcanvasBodyComponent } from './offcanvas-body/offcanvas-body.component'; 3 | export { OffcanvasHeaderComponent } from './offcanvas-header/offcanvas-header.component'; 4 | export { OffcanvasTitleDirective } from './offcanvas-title/offcanvas-title.directive'; 5 | export { OffcanvasToggleDirective } from './offcanvas-toggle/offcanvas-toggle.directive'; 6 | export { OffcanvasService } from './offcanvas.service'; 7 | 8 | export { OffcanvasModule } from './offcanvas.module'; 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/page-item/page-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: list-item; 3 | text-align: -webkit-match-parent; 4 | text-align: match-parent; 5 | } 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/page-item/page-item.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PageItemComponent } from './page-item.component'; 4 | 5 | describe('PaginationItemComponent', () => { 6 | let component: PageItemComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [PageItemComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(PageItemComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css classes', () => { 26 | expect(fixture.nativeElement).toHaveClass('page-item'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/page-item/page-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { PageItemDirective } from './page-item.directive'; 3 | 4 | @Component({ 5 | selector: 'c-page-item', 6 | template: '', 7 | styleUrls: ['./page-item.component.scss'] 8 | }) 9 | export class PageItemComponent extends PageItemDirective {} 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/page-link/page-link.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { PageLinkDirective } from './page-link.directive'; 2 | 3 | describe('PageLinkDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new PageLinkDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/page-link/page-link.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cPageLink]', 5 | host: { class: 'page-link' } 6 | }) 7 | export class PageLinkDirective {} 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/pagination.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PaginationComponent } from './pagination/pagination.component'; 3 | import { PageItemComponent } from './page-item/page-item.component'; 4 | import { PageItemDirective } from './page-item/page-item.directive'; 5 | import { PageLinkDirective } from './page-link/page-link.directive'; 6 | 7 | @NgModule({ 8 | exports: [ 9 | PageItemComponent, 10 | PageItemDirective, 11 | PageLinkDirective, 12 | PaginationComponent 13 | ], 14 | imports: [ 15 | PageItemComponent, 16 | PageItemDirective, 17 | PageLinkDirective, 18 | PaginationComponent 19 | ] 20 | }) 21 | export class PaginationModule {} 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/pagination/pagination.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/pagination/public_api.ts: -------------------------------------------------------------------------------- 1 | export { PageLinkDirective } from './page-link/page-link.directive'; 2 | export { PageItemDirective } from './page-item/page-item.directive'; 3 | export { PageItemComponent } from './page-item/page-item.component'; 4 | export { PaginationComponent } from './pagination/pagination.component'; 5 | export { PaginationModule } from './pagination.module'; 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/placeholder/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/placeholder/placeholder-animation.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { PlaceholderAnimationDirective } from './placeholder-animation.directive'; 3 | 4 | describe('PlaceholderAnimationDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new PlaceholderAnimationDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/placeholder/placeholder.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PlaceholderDirective } from './placeholder.directive'; 3 | import { PlaceholderAnimationDirective } from './placeholder-animation.directive'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | PlaceholderDirective, 8 | PlaceholderAnimationDirective 9 | ], 10 | exports: [ 11 | PlaceholderDirective, 12 | PlaceholderAnimationDirective 13 | ] 14 | }) 15 | export class PlaceholderModule { 16 | } 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/placeholder/public_api.ts: -------------------------------------------------------------------------------- 1 | export { PlaceholderAnimationDirective } from './placeholder-animation.directive'; 2 | export { PlaceholderDirective } from './placeholder.directive'; 3 | export { PlaceholderModule } from './placeholder.module'; 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/popover/popover.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PopoverDirective } from './popover.directive'; 3 | import { PopoverComponent } from './popover/popover.component'; 4 | 5 | @NgModule({ 6 | exports: [ 7 | PopoverDirective, 8 | PopoverComponent 9 | ], 10 | imports: [ 11 | PopoverDirective, 12 | PopoverComponent 13 | ] 14 | }) 15 | export class PopoverModule {} 16 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/popover/popover/popover.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/popover/public_api.ts: -------------------------------------------------------------------------------- 1 | export { PopoverComponent } from './popover/popover.component'; 2 | export { PopoverDirective } from './popover.directive'; 3 | export { PopoverModule } from './popover.module'; 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/progress-stacked.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-progress-stacked', 5 | exportAs: 'cProgressStacked', 6 | template: '', 7 | styles: ` 8 | :host { 9 | display: flex; 10 | } 11 | `, 12 | host: { '[class.progress-stacked]': 'stacked()' } 13 | }) 14 | export class ProgressStackedComponent { 15 | readonly stacked = input(true); 16 | } 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/progress.component.html: -------------------------------------------------------------------------------- 1 | @if (contentProgressBars()?.length) { 2 | 3 | } @else { 4 | @let pbd = progressBarDirective; 5 | 6 | 7 | 8 | } 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | :host-context(.progress-stacked) { 2 | &.progress { 3 | transition: var(--cui-progress-bar-transition) 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/progress.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ProgressComponent } from './progress.component'; 3 | import { ProgressBarComponent } from './progress-bar.component'; 4 | import { ProgressBarDirective } from './progress-bar.directive'; 5 | import { ProgressStackedComponent } from './progress-stacked.component'; 6 | 7 | @NgModule({ 8 | exports: [ 9 | ProgressComponent, 10 | ProgressBarComponent, 11 | ProgressBarDirective, 12 | ProgressStackedComponent 13 | ], 14 | imports: [ 15 | ProgressComponent, 16 | ProgressBarComponent, 17 | ProgressBarDirective, 18 | ProgressStackedComponent 19 | ] 20 | }) 21 | export class ProgressModule {} 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/progress.service.ts: -------------------------------------------------------------------------------- 1 | import { computed, Injectable, signal } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class ProgressService { 5 | readonly stacked = signal(false); 6 | readonly value = signal(undefined); 7 | readonly precision = signal(0); 8 | readonly min = signal(0); 9 | readonly max = signal(100); 10 | 11 | readonly percent = computed(() => { 12 | return +((((this.value() ?? 0) - this.min()) / (this.max() - this.min())) * 100).toFixed(this.precision()); 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/progress.type.ts: -------------------------------------------------------------------------------- 1 | import { Colors } from '../coreui.types'; 2 | 3 | export interface IProgress { 4 | height: number; 5 | thin: boolean; 6 | white: boolean; 7 | } 8 | 9 | export interface IProgressBar extends IProgressBarStacked { 10 | animated?: boolean; 11 | color?: Colors; 12 | max?: number; 13 | precision: number; 14 | value?: number; 15 | variant?: 'striped'; 16 | width?: number; 17 | } 18 | 19 | export interface IProgressBarStacked { 20 | stacked?: boolean; 21 | } 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/progress/public_api.ts: -------------------------------------------------------------------------------- 1 | export type { IProgress, IProgressBar, IProgressBarStacked } from './progress.type'; 2 | export { ProgressComponent } from './progress.component'; 3 | export { ProgressStackedComponent } from './progress-stacked.component'; 4 | export { ProgressBarComponent } from './progress-bar.component'; 5 | export { ProgressBarDirective } from './progress-bar.directive'; 6 | export { ProgressModule } from './progress.module'; 7 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/class-toggle.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ClassToggleService } from './class-toggle.service'; 4 | 5 | describe('ClassToggleService', () => { 6 | let service: ClassToggleService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(ClassToggleService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/class-toggle.service.ts: -------------------------------------------------------------------------------- 1 | import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; 2 | import { DOCUMENT } from '@angular/common'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class ClassToggleService { 8 | readonly #document = inject(DOCUMENT); 9 | readonly #rendererFactory = inject(RendererFactory2); 10 | 11 | #renderer: Renderer2; 12 | 13 | constructor() { 14 | this.#renderer = this.#rendererFactory.createRenderer(null, null); 15 | } 16 | 17 | toggle(selector: any, className: string) { 18 | const element = this.#document.querySelector(selector); 19 | if (element) { 20 | element.classList.contains(className) 21 | ? this.#renderer.removeClass(element, className) 22 | : this.#renderer.addClass(element, className); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/color-mode.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { ColorModeService } from './color-mode.service'; 3 | 4 | describe('ColorModeService', () => { 5 | 6 | let service: ColorModeService; 7 | 8 | beforeEach(() => { 9 | service = TestBed.inject(ColorModeService); 10 | }); 11 | 12 | it('should be created', () => { 13 | expect(service).toBeTruthy(); 14 | }); 15 | 16 | it('should switch themes', () => { 17 | expect(service.colorMode()).toBeUndefined(); 18 | service.colorMode.set('light'); 19 | expect(service.colorMode()).toBe('light'); 20 | service.colorMode.set('dark'); 21 | expect(service.colorMode()).toBe('dark'); 22 | service.colorMode.set('auto'); 23 | expect(service.colorMode()).toBe('auto'); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/in-memory-storage.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { InMemoryStorageService } from './in-memory-storage.service'; 4 | 5 | describe('InMemoryStorageService', () => { 6 | let service: InMemoryStorageService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(InMemoryStorageService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/in-memory-storage.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class InMemoryStorageService implements Storage { 7 | #storage = new Map(); 8 | 9 | public setItem(key: string, data: any): void { 10 | this.#storage.set(key, JSON.stringify(data)); 11 | } 12 | 13 | public getItem(key: string): any { 14 | return this.#storage.has(key) ? JSON.parse(this.#storage.get(key) ?? 'null') : undefined; 15 | } 16 | 17 | public removeItem(key: string): void { 18 | this.#storage.delete(key); 19 | } 20 | 21 | public clear() { 22 | this.#storage.clear(); 23 | } 24 | 25 | public get length() { 26 | return this.#storage.size; 27 | } 28 | 29 | public key(index: number) { 30 | return Array.from(this.#storage.keys())[index]; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/intersection.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { IntersectionService } from './intersection.service'; 4 | 5 | describe('IntersectionService', () => { 6 | let service: IntersectionService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [IntersectionService] 11 | }); 12 | service = TestBed.inject(IntersectionService); 13 | }); 14 | 15 | it('should be created', () => { 16 | expect(service).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/listeners.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { Renderer2 } from '@angular/core'; 3 | import { ListenersService } from './listeners.service'; 4 | 5 | describe('ListenersService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [Renderer2], 9 | }); 10 | }); 11 | 12 | it('should be created', () => { 13 | TestBed.runInInjectionContext(() => { 14 | const service = new ListenersService(); 15 | expect(service).toBeTruthy(); 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/local-storage.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { LocalStorageService } from './local-storage.service'; 4 | 5 | describe('LocalStorageService', () => { 6 | let service: LocalStorageService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(LocalStorageService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/public_api.ts: -------------------------------------------------------------------------------- 1 | export { IntersectionService, type IIntersectionObserverInit } from './intersection.service'; 2 | export { ListenersService, type IListenersConfig } from './listeners.service'; 3 | export { ClassToggleService } from './class-toggle.service'; 4 | export { LocalStorageService } from './local-storage.service'; 5 | export { InMemoryStorageService } from './in-memory-storage.service'; 6 | export { ColorModeService, type ColorMode } from './color-mode.service'; 7 | export { UIDService } from './uid.service'; 8 | export { RtlService } from './rtl.service'; 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/rtl.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { RtlService } from './rtl.service'; 4 | 5 | describe('RtlService', () => { 6 | let service: RtlService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(RtlService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/rtl.service.ts: -------------------------------------------------------------------------------- 1 | import { inject, Injectable } from '@angular/core'; 2 | import { DOCUMENT } from '@angular/common'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class RtlService { 8 | readonly #document = inject(DOCUMENT); 9 | 10 | isRTL(element?: HTMLElement | null): boolean { 11 | if (element) { 12 | return element.closest('[dir="rtl"]') !== null; 13 | } 14 | 15 | return this.#document?.documentElement?.dir === 'rtl' || this.#document?.body?.dir === 'rtl'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/script-injector.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { Renderer2 } from '@angular/core'; 3 | 4 | import { ScriptInjectorService } from './script-injector.service'; 5 | 6 | describe('ScriptInjectorService', () => { 7 | let service: ScriptInjectorService; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | providers: [Renderer2] 12 | }); 13 | service = TestBed.inject(ScriptInjectorService); 14 | }); 15 | 16 | it('should be created', () => { 17 | expect(service).toBeTruthy(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/uid.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { UIDService } from './uid.service'; 4 | 5 | describe('UIDService', () => { 6 | let service: UIDService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(UIDService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | 17 | it('should return an UID string', () => { 18 | expect(typeof service.getUID('test')).toBe('string'); 19 | expect(service.getUID('test')).toContain('test-'); 20 | expect(service.getUID()).toContain('random-id-'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/services/uid.service.ts: -------------------------------------------------------------------------------- 1 | import { inject, Injectable } from '@angular/core'; 2 | import { DOCUMENT } from '@angular/common'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class UIDService { 8 | readonly #document = inject(DOCUMENT); 9 | 10 | getUID(prefix: string = 'random-id'): string { 11 | let uid = prefix; 12 | do { 13 | uid = `${prefix}-${Math.floor(Math.random() * 1000000).toString(10)}`; 14 | } while (this.#document.getElementById(uid)); 15 | 16 | return uid; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/shared/element-ref.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { ElementRefDirective } from './element-ref.directive'; 2 | import { ElementRef } from '@angular/core'; 3 | import { TestBed } from '@angular/core/testing'; 4 | 5 | class MockElementRef extends ElementRef {} 6 | 7 | describe('ElementRefDirective', () => { 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [{ provide: ElementRef, useClass: MockElementRef }] 11 | }); 12 | }); 13 | it('should create an instance', () => { 14 | TestBed.runInInjectionContext(() => { 15 | const directive = new ElementRefDirective(); 16 | expect(directive).toBeTruthy(); 17 | }); 18 | }); 19 | 20 | it('should expose elementRef', () => { 21 | TestBed.runInInjectionContext(() => { 22 | const directive = new ElementRefDirective(); 23 | expect(directive.elementRef).toBeInstanceOf(ElementRef); 24 | }); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/shared/element-ref.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, inject } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cElementRef]', 5 | exportAs: 'cElementRef' 6 | }) 7 | export class ElementRefDirective { 8 | public readonly elementRef = inject(ElementRef); 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/shared/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ElementRefDirective } from './element-ref.directive'; 2 | export { HtmlAttributesDirective } from './html-attr.directive'; 3 | export { TemplateIdDirective } from './template-id.directive'; 4 | export { ThemeDirective } from './theme.directive'; 5 | export { SharedModule } from './shared.module'; 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule } from '@angular/core'; 2 | 3 | import { ElementRefDirective } from './element-ref.directive'; 4 | import { HtmlAttributesDirective } from './html-attr.directive'; 5 | import { TemplateIdDirective } from './template-id.directive'; 6 | import { ThemeDirective } from './theme.directive'; 7 | 8 | @NgModule({ 9 | imports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective], 10 | exports: [ElementRefDirective, HtmlAttributesDirective, TemplateIdDirective, ThemeDirective], 11 | }) 12 | export class SharedModule { 13 | static forRoot(): ModuleWithProviders { 14 | return { 15 | ngModule: SharedModule, 16 | }; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/shared/template-id.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, input, TemplateRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cTemplateId]' 5 | }) 6 | export class TemplateIdDirective { 7 | readonly templateRef = inject(TemplateRef); 8 | readonly cTemplateId = input.required(); 9 | 10 | get id() { 11 | return this.cTemplateId(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/public_api.ts: -------------------------------------------------------------------------------- 1 | export { SidebarComponent } from './sidebar/sidebar.component'; 2 | export { SidebarService } from './sidebar.service'; 3 | export { SidebarBrandComponent } from './sidebar-brand/sidebar-brand.component'; 4 | export { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directive'; 5 | export { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.directive'; 6 | export { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component'; 7 | export { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component'; 8 | 9 | export { SidebarNavComponent, type INavData, SidebarNavHelper } from './sidebar-nav'; 10 | 11 | export { SidebarModule } from './sidebar.module'; 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-backdrop/sidebar-backdrop.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { SidebarBackdropService } from './sidebar-backdrop.service'; 4 | 5 | describe('SidebarBackdropService', () => { 6 | let service: SidebarBackdropService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(SidebarBackdropService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html: -------------------------------------------------------------------------------- 1 | @if (brandImg()) { 2 | 3 | @if (brandFull()) { 4 | 5 | } 6 | @if (brandNarrow()) { 7 | 8 | } 9 | 10 | } @else { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, computed, input } from '@angular/core'; 2 | import { NgClass } from '@angular/common'; 3 | import { RouterLink, type UrlTree } from '@angular/router'; 4 | 5 | import { HtmlAttributesDirective } from '../../shared'; 6 | 7 | @Component({ 8 | selector: 'c-sidebar-brand', 9 | templateUrl: './sidebar-brand.component.html', 10 | imports: [RouterLink, HtmlAttributesDirective, NgClass], 11 | host: { class: 'sidebar-brand' } 12 | }) 13 | export class SidebarBrandComponent { 14 | readonly brandFull = input(); 15 | readonly brandNarrow = input(); 16 | 17 | readonly routerLink = input(); 18 | 19 | readonly brandImg = computed(() => Boolean(this.brandFull() || this.brandNarrow())); 20 | } 21 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-footer/sidebar-footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-sidebar-footer', 5 | template: '', 6 | host: { class: 'sidebar-footer' } 7 | }) 8 | export class SidebarFooterComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-header/sidebar-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-sidebar-header', 5 | template: '', 6 | host: { class: 'sidebar-header' } 7 | }) 8 | export class SidebarHeaderComponent {} 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-badge.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe'; 2 | 3 | describe('SidebarNavBadgePipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new SidebarNavBadgePipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-badge.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'cSidebarNavBadge' 5 | }) 6 | export class SidebarNavBadgePipe implements PipeTransform { 7 | transform(item: any, args?: any): any { 8 | const badge = item.badge; 9 | return { 10 | badge: true, 11 | 'ms-auto': true, 12 | 'badge-sm': !badge.size, 13 | [`badge-${badge.size}`]: !!badge.size, 14 | [`bg-${badge.color}`]: !!badge.color, 15 | [`${badge.class}`]: !!badge.class 16 | }; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-divider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'c-sidebar-nav-divider', 5 | template: `` 6 | }) 7 | export class SidebarNavDividerComponent { 8 | @Input() item: any; 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.scss: -------------------------------------------------------------------------------- 1 | .nav-group-toggle { cursor: pointer; } 2 | .nav-group-items { display: block; } 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { SidebarNavGroupService } from './sidebar-nav-group.service'; 4 | 5 | describe('SidebarNavGroupService', () => { 6 | let service: SidebarNavGroupService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [SidebarNavGroupService] 11 | }); 12 | service = TestBed.inject(SidebarNavGroupService); 13 | }); 14 | 15 | it('should be created', () => { 16 | expect(service).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | import { SidebarNavGroupComponent } from './sidebar-nav.component'; 5 | 6 | export interface ISidebarAction { 7 | open?: boolean; 8 | sidebarNavGroup?: SidebarNavGroupComponent; 9 | } 10 | 11 | @Injectable() 12 | export class SidebarNavGroupService { 13 | private sidebarNavGroupState = new BehaviorSubject({}); 14 | sidebarNavGroupState$ = this.sidebarNavGroupState.asObservable(); 15 | 16 | toggle(action: ISidebarAction): void { 17 | this.sidebarNavGroupState.next(action); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-icon.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe'; 2 | 3 | describe('SidebarNavIconPipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new SidebarNavIconPipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-icon.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'cSidebarNavIcon' 5 | }) 6 | export class SidebarNavIconPipe implements PipeTransform { 7 | transform(item: any, args?: any): any { 8 | const icon = item.icon; 9 | return { 10 | 'nav-icon': true, 11 | [`${icon}`]: !!icon 12 | }; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { SidebarNavItemClassPipe } from './sidebar-nav-item-class.pipe'; 2 | import { TestBed } from '@angular/core/testing'; 3 | import { SidebarNavHelper } from './sidebar-nav.service'; 4 | 5 | describe('SidebarNavItemClassPipe', () => { 6 | it('create an instance', () => { 7 | TestBed.configureTestingModule({ 8 | providers: [SidebarNavHelper] 9 | }); 10 | TestBed.runInInjectionContext(() => { 11 | const pipe = new SidebarNavItemClassPipe(); 12 | expect(pipe).toBeTruthy(); 13 | }); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-item-class.pipe.ts: -------------------------------------------------------------------------------- 1 | import { inject, Pipe, PipeTransform } from '@angular/core'; 2 | 3 | import { SidebarNavHelper } from './sidebar-nav.service'; 4 | 5 | @Pipe({ 6 | name: 'cSidebarNavItemClass' 7 | }) 8 | export class SidebarNavItemClassPipe implements PipeTransform { 9 | readonly helper = inject(SidebarNavHelper); 10 | 11 | // transform(item: any, ...args: any[]): any { 12 | transform(item: any, args?: any[]): any { 13 | const itemType = this.helper.itemType(item); 14 | let itemClass; 15 | if (['divider', 'title'].includes(itemType)) { 16 | itemClass = `nav-${itemType}`; 17 | } else if (itemType === 'group') { 18 | // itemClass = 'c-sidebar-nav-group' ; 19 | itemClass = ''; 20 | } else { 21 | itemClass = 'nav-item'; 22 | } 23 | return item.class ? `${itemClass} ${item.class}` : itemClass; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html: -------------------------------------------------------------------------------- 1 | 4 | @if (helper.hasIcon(item)) { 5 | 6 | } 7 | {{ item.name }} 8 | @if (helper.hasBadge(item)) { 9 | {{ item.badge.text }} 10 | } 11 | 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'cSidebarNavLink' 5 | }) 6 | export class SidebarNavLinkPipe implements PipeTransform { 7 | transform(item: any): any { 8 | const disabled = item?.attributes?.disabled; 9 | 10 | return { 11 | 'nav-link': true, 12 | disabled, 13 | 'btn-link': disabled, 14 | [`nav-link-${item.variant}`]: !!item.variant 15 | }; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-toggle/sidebar-toggle.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { SidebarService } from '../sidebar.service'; 3 | import { SidebarToggleDirective } from './sidebar-toggle.directive'; 4 | 5 | describe('SidebarToggleDirective', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | providers: [SidebarService] 9 | }).compileComponents(); 10 | }); 11 | 12 | it('should create an instance', () => { 13 | TestBed.runInInjectionContext(() => { 14 | const directive = new SidebarToggleDirective(); 15 | expect(directive).toBeTruthy(); 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, input } from '@angular/core'; 2 | import { SidebarToggleDirective } from '../sidebar-toggle/sidebar-toggle.directive'; 3 | 4 | @Directive({ 5 | selector: '[cSidebarToggler]', 6 | hostDirectives: [{ directive: SidebarToggleDirective, inputs: ['cSidebarToggle: cSidebarToggler', 'toggle'] }], 7 | host: { 8 | '[attr.role]': 'role()', 9 | class: 'sidebar-toggler', 10 | '[style]': 'getStyles' 11 | } 12 | }) 13 | export class SidebarTogglerDirective { 14 | readonly role = input('button'); 15 | 16 | get getStyles(): any { 17 | return { 18 | appearance: 'button', 19 | 'align-items': 'flex-start', 20 | cursor: 'pointer' 21 | }; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { SidebarService } from './sidebar.service'; 4 | 5 | describe('SidebarService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: SidebarService = TestBed.inject(SidebarService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | import { SidebarComponent } from './sidebar/sidebar.component'; 5 | 6 | export interface ISidebarAction { 7 | unfoldable?: boolean | 'toggle'; 8 | visible?: boolean | 'toggle'; 9 | toggle?: 'visible' | 'unfoldable'; 10 | narrow?: boolean; 11 | mobile?: boolean; 12 | sidebar?: SidebarComponent; 13 | id?: string; 14 | } 15 | 16 | @Injectable({ 17 | providedIn: 'root' 18 | }) 19 | export class SidebarService { 20 | private sidebarState = new BehaviorSubject({}); 21 | sidebarState$ = this.sidebarState.asObservable(); 22 | 23 | toggle(action: ISidebarAction): void { 24 | this.sidebarState.next(action); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/sidebar/sidebar/sidebar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SidebarComponent } from './sidebar.component'; 4 | 5 | describe('SidebarComponent', () => { 6 | let component: SidebarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [SidebarComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SidebarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('sidebar-fixed'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/spinner/public_api.ts: -------------------------------------------------------------------------------- 1 | export { SpinnerComponent } from './spinner.component'; 2 | export { SpinnerModule } from './spinner.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/spinner/spinner.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/spinner/spinner.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { SpinnerComponent } from './spinner.component'; 4 | 5 | describe('SpinnerComponent', () => { 6 | let component: SpinnerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [SpinnerComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SpinnerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('spinner-border'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/spinner/spinner.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { SpinnerComponent } from './spinner.component'; 4 | 5 | @NgModule({ 6 | exports: [ 7 | SpinnerComponent 8 | ], 9 | imports: [ 10 | SpinnerComponent 11 | ] 12 | }) 13 | export class SpinnerModule {} 14 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/table/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/table/public_api.ts: -------------------------------------------------------------------------------- 1 | export { TableColorDirective } from './table-color.directive'; 2 | export { TableActiveDirective } from './table-active.directive'; 3 | export { TableDirective } from './table.directive'; 4 | export { TableModule } from './table.module'; 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/table/table-active.directive.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Directive, input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cTableActive]', 5 | exportAs: 'cTableActive', 6 | host: { 7 | '[class.table-active]': 'active()' 8 | } 9 | }) 10 | export class TableActiveDirective { 11 | /** 12 | * Highlight a table row or cell 13 | * @return boolean 14 | */ 15 | readonly active = input(false, { alias: "cTableActive", transform: booleanAttribute }); 16 | } 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/table/table-color.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { TableColorDirective } from './table-color.directive'; 3 | 4 | describe('TableColorDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new TableColorDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/table/table-color.directive.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, input } from '@angular/core'; 2 | import { Colors } from '../coreui.types'; 3 | 4 | @Directive({ 5 | selector: '[cTableColor]', 6 | exportAs: 'cTableColor', 7 | host: { 8 | '[class]': 'hostClasses()' 9 | } 10 | }) 11 | export class TableColorDirective { 12 | /** 13 | * Use contextual color for tables, table rows or individual cells. 14 | * @return Colors 15 | */ 16 | readonly color = input(undefined, { alias: 'cTableColor' }); 17 | 18 | readonly hostClasses = computed(() => { 19 | const color = this.color(); 20 | return { 21 | [`table-${color}`]: !!color 22 | } as Record; 23 | }); 24 | } 25 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/table/table.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TableDirective } from './table.directive'; 3 | import { TableColorDirective } from './table-color.directive'; 4 | import { TableActiveDirective } from './table-active.directive'; 5 | 6 | @NgModule({ 7 | exports: [ 8 | TableDirective, 9 | TableColorDirective, 10 | TableActiveDirective 11 | ], 12 | imports: [ 13 | TableDirective, 14 | TableColorDirective, 15 | TableActiveDirective 16 | ] 17 | }) 18 | export class TableModule {} 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/public_api.ts: -------------------------------------------------------------------------------- 1 | export { Tabs2Module } from './tabs2.module'; 2 | export { TabsComponent } from './tabs.component'; 3 | export { TabsContentComponent } from './tabs-content/tabs-content.component'; 4 | export { TabsListComponent } from './tabs-list/tabs-list.component'; 5 | export { TabsService } from './tabs.service'; 6 | export { TabDirective } from './tab/tab.directive'; 7 | export { TabPanelComponent } from './tab-panel/tab-panel.component'; 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tab/tab.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef } from '@angular/core'; 2 | import { TestBed } from '@angular/core/testing'; 3 | import { TabsService } from '../tabs.service'; 4 | import { TabDirective } from './tab.directive'; 5 | 6 | class MockElementRef extends ElementRef {} 7 | 8 | describe('TabDirective', () => { 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | providers: [TabsService, { provide: ElementRef, useClass: MockElementRef }] 12 | }); 13 | }); 14 | 15 | it('should create an instance', () => { 16 | TestBed.runInInjectionContext(() => { 17 | const directive = new TabDirective(); 18 | expect(directive).toBeTruthy(); 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs-content/tabs-content.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TabsContentComponent } from './tabs-content.component'; 4 | 5 | describe('TabsContentComponent', () => { 6 | let component: TabsContentComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [TabsContentComponent] 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(TabsContentComponent); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs-content/tabs-content.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | exportAs: 'cTabsContent', 5 | selector: 'c-tabs-content', 6 | template: '', 7 | host: { 8 | class: 'tab-content' 9 | } 10 | }) 11 | export class TabsContentComponent {} 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TabsListComponent } from './tabs-list.component'; 4 | import { TabsService } from '../tabs.service'; 5 | 6 | describe('TabsListComponent', () => { 7 | let component: TabsListComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [TabsListComponent], 13 | providers: [TabsService] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(TabsListComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TabsComponent } from './tabs.component'; 4 | 5 | describe('TabsComponent', () => { 6 | let component: TabsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [TabsComponent] 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(TabsComponent); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { TabsService } from './tabs.service'; 4 | 5 | describe('TabsService', () => { 6 | let service: TabsService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [TabsService] 11 | }); 12 | service = TestBed.inject(TabsService); 13 | }); 14 | 15 | it('should be created', () => { 16 | expect(service).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, signal } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class TabsService { 5 | readonly activeItem = signal(undefined); 6 | readonly activeItemKey = signal(undefined); 7 | readonly id = signal(undefined); 8 | } 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs-2/tabs2.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TabsService } from './tabs.service'; 3 | import { TabsComponent } from './tabs.component'; 4 | import { TabDirective } from './tab/tab.directive'; 5 | import { TabsListComponent } from './tabs-list/tabs-list.component'; 6 | import { TabsContentComponent } from './tabs-content/tabs-content.component'; 7 | import { TabPanelComponent } from './tab-panel/tab-panel.component'; 8 | 9 | @NgModule({ 10 | imports: [TabsComponent, TabsListComponent, TabDirective, TabsContentComponent, TabPanelComponent], 11 | exports: [TabsComponent, TabsListComponent, TabDirective, TabsContentComponent, TabPanelComponent], 12 | providers: [TabsService] 13 | }) 14 | export class Tabs2Module {} 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/public_api.ts: -------------------------------------------------------------------------------- 1 | export { TabPaneComponent } from './tab-pane/tab-pane.component'; 2 | export { TabContentComponent } from './tab-content/tab-content.component'; 3 | export { TabContentRefDirective } from './tab-content-ref.directive'; 4 | export { TabService } from './tab.service'; 5 | export { TabsModule } from './tabs.module'; 6 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tab-content-ref.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TabContentRefDirective } from './tab-content-ref.directive'; 2 | import { TestBed } from '@angular/core/testing'; 3 | import { ChangeDetectorRef } from '@angular/core'; 4 | 5 | describe('TabContentRefDirective', () => { 6 | it('should create an instance', () => { 7 | TestBed.configureTestingModule({ 8 | providers: [ChangeDetectorRef] 9 | }); 10 | TestBed.runInInjectionContext(() => { 11 | const directive = new TabContentRefDirective(); 12 | expect(directive).toBeTruthy(); 13 | }); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TabContentComponent } from './tab-content.component'; 4 | 5 | describe('TabContentComponent', () => { 6 | let component: TabContentComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [TabContentComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(TabContentComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('tab-content'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tab-pane/tab-pane.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tab.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { TabService } from './tab.service'; 4 | 5 | describe('TabService', () => { 6 | let service: TabService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(TabService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tab.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject } from 'rxjs'; 3 | import { TabContentComponent } from './tab-content/tab-content.component'; 4 | 5 | export interface ITabContentState { 6 | activeIdx: number; 7 | tabContent: TabContentComponent; 8 | } 9 | 10 | @Injectable({ 11 | providedIn: 'root' 12 | }) 13 | export class TabService { 14 | private activeTabPaneIdx = new Subject(); 15 | activeTabPaneIdx$ = this.activeTabPaneIdx.asObservable(); 16 | 17 | setActiveTabIdx(tabContentState: ITabContentState) { 18 | this.activeTabPaneIdx.next(tabContentState); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tabs/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TabContentComponent } from './tab-content/tab-content.component'; 3 | import { TabPaneComponent } from './tab-pane/tab-pane.component'; 4 | import { TabService } from './tab.service'; 5 | import { TabContentRefDirective } from './tab-content-ref.directive'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | TabContentComponent, 10 | TabContentRefDirective, 11 | TabPaneComponent 12 | ], 13 | exports: [ 14 | TabContentComponent, 15 | TabPaneComponent, 16 | TabContentRefDirective 17 | ], 18 | providers: [ 19 | TabService 20 | ] 21 | }) 22 | export class TabsModule {} 23 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ToastComponent } from './toast/toast.component'; 2 | export { ToastBodyComponent } from './toast-body/toast-body.component'; 3 | export { ToastHeaderComponent } from './toast-header/toast-header.component'; 4 | export { ToasterComponent, type TToasterPlacement, ToasterPlacement } from './toaster/toaster.component'; 5 | export { ToasterService } from './toaster/toaster.service'; 6 | export { ToasterHostDirective } from './toaster/toaster-host.directive'; 7 | export { ToastCloseDirective } from './toast-close.directive'; 8 | export { ToastModule } from './toast.module'; 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-body/toast-body.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-body/toast-body.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ToastBodyComponent } from './toast-body.component'; 4 | 5 | describe('ToastBodyComponent', () => { 6 | let component: ToastBodyComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(waitForAsync(() => { 10 | TestBed.configureTestingModule({ 11 | imports: [ToastBodyComponent] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ToastBodyComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | it('should have css classes', () => { 27 | expect(fixture.nativeElement).toHaveClass('toast-body'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-body/toast-body.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject } from '@angular/core'; 2 | import { ToastComponent } from '../toast/toast.component'; 3 | 4 | @Component({ 5 | selector: 'c-toast-body', 6 | template: '', 7 | styleUrls: ['./toast-body.component.scss'], 8 | exportAs: 'cToastBody', 9 | host: { 10 | class: 'toast-body', 11 | } 12 | }) 13 | export class ToastBodyComponent { 14 | readonly toast? = inject(ToastComponent, { optional: true }); 15 | 16 | } 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-close.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { ToastCloseDirective } from './toast-close.directive'; 2 | import { TestBed } from '@angular/core/testing'; 3 | import { ToasterService } from './toaster/toaster.service'; 4 | import { ToastModule } from './toast.module'; 5 | 6 | describe('ToastCloseDirective', () => { 7 | beforeEach(async () => { 8 | await TestBed.configureTestingModule({ 9 | providers: [ToasterService], 10 | imports: [ToastModule] 11 | }).compileComponents(); 12 | }); 13 | 14 | it('should create an instance', () => { 15 | TestBed.runInInjectionContext(() => { 16 | const directive = new ToastCloseDirective(); 17 | expect(directive).toBeTruthy(); 18 | }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-close.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, input } from '@angular/core'; 2 | import { ToasterService } from './toaster/toaster.service'; 3 | import type { ToastComponent } from './toast/toast.component'; 4 | 5 | @Directive({ 6 | selector: '[cToastClose]', 7 | exportAs: 'cToastClose', 8 | host: { 9 | '(click)': 'toggleOpen($event)' 10 | } 11 | }) 12 | export class ToastCloseDirective { 13 | readonly #toasterService = inject(ToasterService); 14 | 15 | readonly cToastClose = input(); 16 | 17 | toggleOpen($event: MouseEvent): void { 18 | $event.preventDefault(); 19 | this.#toasterService.setState({ show: false, toast: this.cToastClose() }); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | @if (closeButton()) { 4 | 5 | } 6 | 7 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject, input, signal } from '@angular/core'; 2 | 3 | import { ButtonCloseDirective } from '../../button'; 4 | import { ToastComponent } from '../toast/toast.component'; 5 | import { ToastCloseDirective } from '../toast-close.directive'; 6 | 7 | @Component({ 8 | selector: 'c-toast-header', 9 | templateUrl: './toast-header.component.html', 10 | exportAs: 'cToastHeader', 11 | imports: [ToastCloseDirective, ButtonCloseDirective], 12 | host: { 13 | class: 'toast-header' 14 | } 15 | }) 16 | export class ToastHeaderComponent { 17 | readonly #toast = inject(ToastComponent, { optional: true }); 18 | 19 | readonly toast = signal(this.#toast ?? undefined); 20 | 21 | /** 22 | * Add close button to a toast header 23 | * @return boolean 24 | */ 25 | readonly closeButton = input(true); 26 | } 27 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toast/toast.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toaster/toaster-host.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, ViewContainerRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[cToasterHost]', 5 | exportAs: 'cToasterHost' 6 | }) 7 | export class ToasterHostDirective { 8 | readonly viewContainerRef = inject(ViewContainerRef); 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toaster/toaster.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toaster/toaster.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ToasterService } from './toaster.service'; 4 | 5 | describe('ToasterService', () => { 6 | let service: ToasterService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(ToasterService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/toast/toaster/toaster.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | import { TToasterPlacement } from './toaster.component'; 5 | import { type ToastComponent } from '../toast/toast.component'; 6 | 7 | export interface IToasterAction { 8 | placement?: TToasterPlacement; 9 | toast?: ToastComponent; 10 | show?: boolean; 11 | } 12 | 13 | @Injectable({ 14 | providedIn: 'root' 15 | }) 16 | export class ToasterService { 17 | readonly #toasterState = new BehaviorSubject({}); 18 | readonly toasterState$ = this.#toasterState.asObservable(); 19 | 20 | setState(state: IToasterAction): void { 21 | this.#toasterState.next({ ...state }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tooltip/public_api.ts: -------------------------------------------------------------------------------- 1 | export { TooltipComponent } from './tooltip/tooltip.component'; 2 | export { TooltipDirective } from './tooltip.directive'; 3 | export { TooltipModule } from './tooltip.module'; 4 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tooltip/tooltip.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TooltipComponent } from './tooltip/tooltip.component'; 3 | import { TooltipDirective } from './tooltip.directive'; 4 | 5 | @NgModule({ 6 | exports: [ 7 | TooltipComponent, 8 | TooltipDirective 9 | ], 10 | imports: [ 11 | TooltipComponent, 12 | TooltipDirective 13 | ] 14 | }) 15 | export class TooltipModule {} 16 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/tooltip/tooltip/tooltip.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 | 7 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/align.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AlignDirective } from './align.directive'; 3 | 4 | describe('AlignDirective', () => { 5 | it('should create an instance', () => { 6 | TestBed.runInInjectionContext(() => { 7 | const directive = new AlignDirective(); 8 | expect(directive).toBeTruthy(); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/align.directive.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, input } from '@angular/core'; 2 | import { Alignment } from '../coreui.types'; 3 | 4 | @Directive({ 5 | selector: '[cAlign]', 6 | exportAs: 'cAlign', 7 | host: { '[class]': 'hostClasses()' } 8 | }) 9 | export class AlignDirective { 10 | /** 11 | * Set vertical alignment of inline, inline-block, inline-table, and table cell elements 12 | * @return Alignment 13 | */ 14 | readonly align = input(undefined, { alias: 'cAlign' }); 15 | 16 | readonly hostClasses = computed(() => { 17 | const align = this.align(); 18 | return { 19 | [`align-${align}`]: !!align 20 | } as Record; 21 | }); 22 | } 23 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/bg-color.directive.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, input } from '@angular/core'; 2 | import { BackgroundColors } from '../coreui.types'; 3 | 4 | @Directive({ 5 | selector: '[cBgColor]', 6 | exportAs: 'cBgColor', 7 | host: { '[class]': 'hostClasses()' } 8 | }) 9 | export class BgColorDirective { 10 | /** 11 | * Set the background of an element to any contextual class 12 | */ 13 | readonly cBgColor = input(''); 14 | 15 | /** 16 | * Add linear gradient as background image to the backgrounds. 17 | * @return boolean 18 | */ 19 | readonly gradient = input(); 20 | 21 | readonly hostClasses = computed(() => { 22 | const color = this.cBgColor(); 23 | return { 24 | [`bg-${color}`]: !!color, 25 | 'bg-gradient': this.gradient() 26 | } as Record; 27 | }); 28 | } 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/border.type.ts: -------------------------------------------------------------------------------- 1 | import { Colors } from '../coreui.types'; 2 | 3 | export type Border = boolean | BorderWidth | BorderColor | IBorderElement | IBorder; 4 | 5 | export interface IBorder { 6 | top?: BorderWidth | BorderColor | IBorderElement | boolean; 7 | end?: BorderWidth | BorderColor | IBorderElement | boolean; 8 | bottom?: BorderWidth | BorderColor | IBorderElement | boolean; 9 | start?: BorderWidth | BorderColor | IBorderElement | boolean; 10 | color?: BorderColor; 11 | } 12 | 13 | export type BorderColor = Colors | 'white'; 14 | 15 | export type BorderWidth = 0 | 1 | 2 | 3 | 4 | 5 | number ; 16 | 17 | export interface IBorderElement { 18 | color?: BorderColor; 19 | width?: BorderWidth; 20 | } 21 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/public_api.ts: -------------------------------------------------------------------------------- 1 | export { AlignDirective } from './align.directive'; 2 | export { BgColorDirective } from './bg-color.directive'; 3 | export { BorderDirective } from './border.directive'; 4 | export { RoundedDirective } from './rounded.directive'; 5 | export { ShadowOnScrollDirective } from './shadow-on-scroll.directive'; 6 | export { TextColorDirective } from './text-color.directive'; 7 | export { TextBgColorDirective } from './text-bg-color.directive'; 8 | export { UtilitiesModule } from './utilities.module'; 9 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/rounded.type.ts: -------------------------------------------------------------------------------- 1 | export type Rounded = boolean | RoundedSize | RoundedElement | IRoundedCorner; 2 | 3 | export interface IRoundedCorner { 4 | top?: boolean; 5 | end?: boolean; 6 | bottom?: boolean; 7 | start?: boolean; 8 | circle?: boolean; 9 | pill?: boolean; 10 | size?: RoundedSize; 11 | } 12 | 13 | export type RoundedSize = 0 | 1 | 2 | 3 | number; 14 | 15 | export type RoundedElement = 'top' | 'end' | 'bottom' | 'start' | 'circle' | 'pill'; 16 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/text-bg-color.directive.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, input, InputSignal } from '@angular/core'; 2 | import { Colors } from '../coreui.types'; 3 | 4 | @Directive({ 5 | selector: '[cTextBgColor]', 6 | host: { 7 | '[class]': 'hostClasses()' 8 | } 9 | }) 10 | export class TextBgColorDirective { 11 | /** 12 | * Set text-bg-color of element 13 | * @type Colors 14 | */ 15 | readonly textBgColor: InputSignal = input('', { alias: 'cTextBgColor' }); 16 | 17 | readonly hostClasses = computed(() => { 18 | const color = this.textBgColor(); 19 | return { 20 | [`text-bg-${color}`]: !!color 21 | } as Record; 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/text-color.directive.ts: -------------------------------------------------------------------------------- 1 | import { computed, Directive, input, InputSignal } from '@angular/core'; 2 | import { TextColors } from '../coreui.types'; 3 | 4 | @Directive({ 5 | selector: '[cTextColor]', 6 | host: { 7 | '[class]': 'hostClasses()' 8 | } 9 | }) 10 | export class TextColorDirective { 11 | /** 12 | * Set text-color of element 13 | * @type TextColors 14 | */ 15 | readonly color: InputSignal = input('', { alias: 'cTextColor' }); 16 | 17 | readonly hostClasses = computed(() => { 18 | const color = this.color(); 19 | return { 20 | [`text-${color}`]: !!color 21 | }; 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/utilities/utilities.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { 4 | AlignDirective, 5 | BgColorDirective, 6 | BorderDirective, 7 | RoundedDirective, 8 | ShadowOnScrollDirective, 9 | TextBgColorDirective, 10 | TextColorDirective 11 | } from './public_api'; 12 | 13 | const UTILITY_DIRECTIVES = [ 14 | AlignDirective, 15 | BgColorDirective, 16 | BorderDirective, 17 | RoundedDirective, 18 | ShadowOnScrollDirective, 19 | TextColorDirective, 20 | TextBgColorDirective 21 | ]; 22 | 23 | @NgModule({ 24 | imports: [...UTILITY_DIRECTIVES], 25 | exports: [...UTILITY_DIRECTIVES] 26 | }) 27 | export class UtilitiesModule {} 28 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/public_api.ts: -------------------------------------------------------------------------------- 1 | export { WidgetStatAComponent } from './widget-stat-a/widget-stat-a.component'; 2 | export { WidgetStatBComponent } from './widget-stat-b/widget-stat-b.component'; 3 | export { WidgetStatCComponent } from './widget-stat-c/widget-stat-c.component'; 4 | export { WidgetStatDComponent } from './widget-stat-d/widget-stat-d.component'; 5 | export { WidgetStatEComponent } from './widget-stat-e/widget-stat-e.component'; 6 | export { WidgetStatFComponent } from './widget-stat-f/widget-stat-f.component'; 7 | export { WidgetModule } from './widget.module'; 8 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WidgetStatAComponent } from './widget-stat-a.component'; 4 | 5 | describe('WidgetStatAComponent', () => { 6 | let component: WidgetStatAComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WidgetStatAComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(WidgetStatAComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css class"', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.html: -------------------------------------------------------------------------------- 1 | 2 | @if (!!value()) { 3 |
{{ value() }}
4 | } 5 | @if (!!title()) { 6 |
{{ title() }}
7 | } 8 | 9 | @if (text()) { 10 | 11 | {{ text() }} 12 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WidgetStatBComponent } from './widget-stat-b.component'; 4 | 5 | describe('WidgetStatBComponent', () => { 6 | let component: WidgetStatBComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WidgetStatBComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(WidgetStatBComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css class"', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html: -------------------------------------------------------------------------------- 1 | 2 | @if (icon() || templates?.['widgetIconTemplate']) { 3 |
4 | 5 |
6 | } 7 | @if (!!value()) { 8 |
9 | {{ value() }} 10 |
11 | } 12 | @if (!!title()) { 13 |
14 | {{ title() }} 15 |
16 | } 17 | @if (templates?.['widgetProgressTemplate']) { 18 | 19 | } 20 | 21 | 22 | 23 | {{ icon() }} 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WidgetStatCComponent } from './widget-stat-c.component'; 4 | 5 | describe('WidgetStatCComponent', () => { 6 | let component: WidgetStatCComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WidgetStatCComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(WidgetStatCComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css class"', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @for (item of values(); track item; let i = $index) { 6 | @if (i % 2 !== 0) { 7 |
8 | } 9 | 10 |
{{ item.value }}
11 |
{{ item.title }}
12 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-d/widget-stat-d.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WidgetStatDComponent } from './widget-stat-d.component'; 4 | 5 | describe('WidgetStatDComponent', () => { 6 | let component: WidgetStatDComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WidgetStatDComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(WidgetStatDComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css class"', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.html: -------------------------------------------------------------------------------- 1 | 2 | @if (!!title()) { 3 |
{{ title() }}
4 | } 5 | @if (!!value()) { 6 |
{{ value() }}
7 | } 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-e/widget-stat-e.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WidgetStatEComponent } from './widget-stat-e.component'; 4 | 5 | describe('WidgetStatEComponent', () => { 6 | let component: WidgetStatEComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WidgetStatEComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(WidgetStatEComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css class"', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 |
7 |
{{ value() }}
8 |
{{ title() }}
9 |
10 | 11 | @if (footer() || templates?.['widgetFooterTemplate']) { 12 | 13 | 14 | 15 | } 16 | 17 | 18 | 19 | {{ icon() }} 20 | 21 | 22 | 23 | {{ footer() }} 24 | 25 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/lib/widget/widget-stat-f/widget-stat-f.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WidgetStatFComponent } from './widget-stat-f.component'; 4 | 5 | describe('WidgetStatFComponent', () => { 6 | let component: WidgetStatFComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WidgetStatFComponent] 12 | }).compileComponents(); 13 | }); 14 | 15 | beforeEach(() => { 16 | fixture = TestBed.createComponent(WidgetStatFComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | 25 | it('should have css class"', () => { 26 | expect(fixture.nativeElement).toHaveClass('card'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /projects/coreui-angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // make the warning to fail 9 | // console.warn = (message) => { 10 | // throw new Error(message); 11 | // }; 12 | 13 | // First, initialize the Angular testing environment. 14 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 15 | teardown: { destroyAfterEach: true } 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.lib.json" 6 | }, 7 | { 8 | "path": "./tsconfig.lib.prod.json" 9 | }, 10 | { 11 | "path": "./tsconfig.spec.json" 12 | }, 13 | { 14 | "path": "./tsconfig.schematics.json" 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/coreui-angular/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "src/test.ts", 13 | "**/*.spec.ts" 14 | ], 15 | "angularCompilerOptions": { 16 | "compilationMode": "partial" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/coreui-angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/coreui-angular/tsconfig.schematics.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "lib": [ 5 | "ES2022", 6 | "dom" 7 | ], 8 | "declaration": true, 9 | "module": "commonjs", 10 | "moduleResolution": "node", 11 | "noEmitOnError": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noImplicitAny": true, 14 | "noImplicitThis": true, 15 | "noUnusedParameters": true, 16 | "noUnusedLocals": true, 17 | "rootDir": "schematics", 18 | "outDir": "../../dist/coreui-angular/schematics", 19 | "resolveJsonModule": true, 20 | "skipDefaultLibCheck": true, 21 | "skipLibCheck": true, 22 | "sourceMap": true, 23 | "strictNullChecks": true, 24 | "target": "ES2022", 25 | "types": [ 26 | "jasmine", 27 | "node" 28 | ] 29 | }, 30 | "include": [ 31 | "schematics/**/*" 32 | ], 33 | "exclude": [ 34 | "schematics/*/files/**/*" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /projects/coreui-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const tseslint = require('typescript-eslint'); 3 | const rootConfig = require('../../eslint.config.js'); 4 | 5 | module.exports = tseslint.config( 6 | ...rootConfig, 7 | { 8 | files: ['**/*.ts'], 9 | rules: {} 10 | }, 11 | { 12 | files: ['**/*.html'], 13 | rules: {} 14 | } 15 | ); 16 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/coreui-icons-angular", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/coreui-icons-angular/schematics/collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "ng-add": { 5 | "description": "Add @coreui/icons-angular library to the project.", 6 | "factory": "./ng-add/index#ngAdd" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon-set/icon-set.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule, inject } from '@angular/core'; 2 | 3 | import { IconSetService } from './icon-set.service'; 4 | 5 | @NgModule({ 6 | providers: [IconSetService] 7 | }) 8 | export class IconSetModule { 9 | constructor() { 10 | const parentModule = inject(IconSetModule, { optional: true, skipSelf: true }); 11 | 12 | if (parentModule) { 13 | throw new Error( 14 | 'CoreUI IconSetModule is already loaded. Import it in the AppModule only'); 15 | } 16 | } 17 | 18 | static forRoot(): ModuleWithProviders { 19 | return { 20 | ngModule: IconSetModule, 21 | providers: [ 22 | { provide: IconSetService } 23 | ] 24 | }; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon-set/icon-set.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { IconSetService } from './icon-set.service'; 4 | 5 | describe('IconService', () => { 6 | let service: IconSetService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(IconSetService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon-set/icon-set.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | export interface IIconSet { 4 | [iconName: string]: string[]; 5 | } 6 | 7 | @Injectable({ 8 | providedIn: 'root' 9 | }) 10 | export class IconSetService { 11 | public get iconNames() { 12 | return this.#iconNames; 13 | } 14 | 15 | #iconNames: Record = {}; 16 | 17 | get icons(): IIconSet { 18 | return this.#icons; 19 | } 20 | 21 | set icons(iconSet) { 22 | for (const iconsKey in iconSet) { 23 | this.#iconNames[iconsKey] = iconsKey; 24 | } 25 | this.#icons = iconSet; 26 | } 27 | 28 | #icons: IIconSet = {}; 29 | 30 | public getIcon(name: string): string[] { 31 | const icon = this.icons[name]; 32 | if (!icon) { 33 | console.warn(`CoreUI WARN: Icon ${name} is not registered in IconService`); 34 | } 35 | return this.icons[name]; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon-set/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon-set/public_api.ts: -------------------------------------------------------------------------------- 1 | export { IconSetService, type IIconSet } from './icon-set.service'; 2 | export { IconSetModule } from './icon-set.module'; 3 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon/icon.component.svg: -------------------------------------------------------------------------------- 1 | @if (!use() && !!code()) { 2 | 16 | } @else if (use()) { 17 | 30 | } 31 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon/icon.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IconComponent } from './icon.component'; 3 | import { IconDirective } from './icon.directive'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | IconComponent, 8 | IconDirective 9 | ], 10 | exports: [ 11 | IconComponent, 12 | IconDirective 13 | ] 14 | }) 15 | export class IconModule {} 16 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon/icon.utils.ts: -------------------------------------------------------------------------------- 1 | export function toCamelCase(value: string) { 2 | return value.replace(/([-_][a-z0-9])/ig, ($1: string) => { 3 | return $1.toUpperCase().replace('-', ''); 4 | }); 5 | } 6 | 7 | export function transformName(value: string) { 8 | return value && value.includes('-') ? toCamelCase(value) : value; 9 | } 10 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/lib/icon/public_api.ts: -------------------------------------------------------------------------------- 1 | export { IconDirective } from './icon.directive'; 2 | export { IconComponent } from './icon.component'; 3 | export { IconModule } from './icon.module'; 4 | export { toCamelCase } from './icon.utils'; 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of @coreui/icons-angular 3 | */ 4 | export { IconDirective } from './lib/icon/icon.directive'; 5 | export { IconComponent } from './lib/icon/icon.component'; 6 | export { IconModule } from './lib/icon/icon.module'; 7 | export { IconSetService, type IIconSet } from './lib/icon-set/icon-set.service'; 8 | export { IconSetModule } from './lib/icon-set/icon-set.module'; 9 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting(), 15 | { teardown: { destroyAfterEach: true }}, 16 | ); 17 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "files": [], 4 | "references": [ 5 | { 6 | "path": "./tsconfig.lib.json" 7 | }, 8 | { 9 | "path": "./tsconfig.lib.prod.json" 10 | }, 11 | { 12 | "path": "./tsconfig.spec.json" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "src/test.ts", 13 | "**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false, 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | }, 10 | "include": [ 11 | "src/**/*.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/tsconfig.schematics.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "lib": [ 5 | "ES2022", 6 | "dom" 7 | ], 8 | "declaration": true, 9 | "module": "commonjs", 10 | "moduleResolution": "node", 11 | "noEmitOnError": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noImplicitAny": true, 14 | "noImplicitThis": true, 15 | "noUnusedParameters": true, 16 | "noUnusedLocals": true, 17 | "rootDir": "schematics", 18 | "outDir": "../../dist/coreui-icons-angular/schematics", 19 | "resolveJsonModule": true, 20 | "skipDefaultLibCheck": true, 21 | "skipLibCheck": true, 22 | "sourceMap": true, 23 | "strictNullChecks": true, 24 | "target": "ES2022", 25 | "types": [ 26 | "jasmine", 27 | "node" 28 | ] 29 | }, 30 | "include": [ 31 | "schematics/**/*" 32 | ], 33 | "exclude": [ 34 | "schematics/*/files/**/*" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /projects/coreui-icons-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts", 16 | "**/*.ts" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------