├── .editorconfig
├── .github
└── workflows
│ ├── pr-check.yml
│ └── release.yml
├── .gitignore
├── .husky
├── commit-msg
└── pre-commit
├── .postcssrc.json
├── .prettierignore
├── .prettierrc
├── .vscode
├── extensions.json
├── launch.json
├── settings.json
└── tasks.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── angular.json
├── commitlint.config.mjs
├── eslint.config.js
├── logo.png
├── package-lock.json
├── package.json
├── projects
├── docs
│ ├── eslint.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ ├── github.png
│ │ ├── home-bg.png
│ │ ├── icon-samples
│ │ │ ├── checkmark.svg
│ │ │ └── home.svg
│ │ ├── images
│ │ │ ├── copy.svg
│ │ │ ├── css.svg
│ │ │ ├── folder.svg
│ │ │ ├── github.svg
│ │ │ ├── html.svg
│ │ │ ├── scss.svg
│ │ │ ├── spec.ts.svg
│ │ │ ├── test-photo.png
│ │ │ ├── test-photo.svg
│ │ │ └── ts.svg
│ │ ├── logo.svg
│ │ ├── show-case-icon
│ │ │ ├── bird.svg
│ │ │ ├── cat.svg
│ │ │ ├── heart.svg
│ │ │ ├── paw.svg
│ │ │ ├── squirrel.svg
│ │ │ └── volleyball.svg
│ │ ├── show-case-tooltip
│ │ │ └── thanos.webp
│ │ └── tree-structure.json
│ ├── src
│ │ ├── app
│ │ │ ├── animation-page
│ │ │ │ ├── animation-page.component.css
│ │ │ │ ├── animation-page.component.html
│ │ │ │ └── animation-page.component.ts
│ │ │ ├── animation.routes.ts
│ │ │ ├── app.component.css
│ │ │ ├── app.component.html
│ │ │ ├── app.component.spec.ts
│ │ │ ├── app.component.ts
│ │ │ ├── app.config.server.ts
│ │ │ ├── app.config.ts
│ │ │ ├── app.routes.ts
│ │ │ ├── blog
│ │ │ │ └── blog-page
│ │ │ │ │ ├── blog-page.component.css
│ │ │ │ │ ├── blog-page.component.html
│ │ │ │ │ └── blog-page.component.ts
│ │ │ ├── blueprint
│ │ │ │ ├── api-info
│ │ │ │ │ ├── api-description
│ │ │ │ │ │ ├── api-description.component.css
│ │ │ │ │ │ ├── api-description.component.html
│ │ │ │ │ │ └── api-description.component.ts
│ │ │ │ │ ├── api-info.component.css
│ │ │ │ │ ├── api-info.component.html
│ │ │ │ │ ├── api-info.component.ts
│ │ │ │ │ └── api-inputs
│ │ │ │ │ │ ├── api-inputs.component.css
│ │ │ │ │ │ ├── api-inputs.component.html
│ │ │ │ │ │ └── api-inputs.component.ts
│ │ │ │ ├── blueprint-page
│ │ │ │ │ ├── blueprint-page.component.css
│ │ │ │ │ ├── blueprint-page.component.html
│ │ │ │ │ └── blueprint-page.component.ts
│ │ │ │ ├── command-installation
│ │ │ │ │ ├── command-installation.component.css
│ │ │ │ │ ├── command-installation.component.html
│ │ │ │ │ └── command-installation.component.ts
│ │ │ │ ├── prerequisites
│ │ │ │ │ ├── prerequisites.component.css
│ │ │ │ │ ├── prerequisites.component.html
│ │ │ │ │ └── prerequisites.component.ts
│ │ │ │ ├── show-case
│ │ │ │ │ ├── show-case.component.css
│ │ │ │ │ ├── show-case.component.html
│ │ │ │ │ └── show-case.component.ts
│ │ │ │ ├── source-code
│ │ │ │ │ ├── source-code.component.css
│ │ │ │ │ ├── source-code.component.html
│ │ │ │ │ └── source-code.component.ts
│ │ │ │ └── source-tree
│ │ │ │ │ ├── source-tree-builder.ts
│ │ │ │ │ ├── source-tree-select
│ │ │ │ │ ├── source-tree-select.component.css
│ │ │ │ │ ├── source-tree-select.component.html
│ │ │ │ │ └── source-tree-select.component.ts
│ │ │ │ │ ├── source-tree.component.css
│ │ │ │ │ ├── source-tree.component.html
│ │ │ │ │ └── source-tree.component.ts
│ │ │ ├── core
│ │ │ │ └── project-name
│ │ │ │ │ ├── project-name.component.css
│ │ │ │ │ ├── project-name.component.html
│ │ │ │ │ └── project-name.component.ts
│ │ │ ├── examples
│ │ │ │ ├── accordion
│ │ │ │ │ └── show-case-accordion
│ │ │ │ │ │ ├── show-case-accordion.component.css
│ │ │ │ │ │ ├── show-case-accordion.component.html
│ │ │ │ │ │ └── show-case-accordion.component.ts
│ │ │ │ ├── alert
│ │ │ │ │ └── show-case-alert
│ │ │ │ │ │ ├── show-case-alert.component.css
│ │ │ │ │ │ ├── show-case-alert.component.html
│ │ │ │ │ │ └── show-case-alert.component.ts
│ │ │ │ ├── autocomplete
│ │ │ │ │ └── show-case-autocomplete
│ │ │ │ │ │ ├── show-case-autocomplete.component.css
│ │ │ │ │ │ ├── show-case-autocomplete.component.html
│ │ │ │ │ │ └── show-case-autocomplete.component.ts
│ │ │ │ ├── badge
│ │ │ │ │ └── show-case-badge
│ │ │ │ │ │ ├── show-case-badge.component.css
│ │ │ │ │ │ ├── show-case-badge.component.html
│ │ │ │ │ │ └── show-case-badge.component.ts
│ │ │ │ ├── button
│ │ │ │ │ └── show-case-button
│ │ │ │ │ │ ├── show-case-button.component.css
│ │ │ │ │ │ ├── show-case-button.component.html
│ │ │ │ │ │ └── show-case-button.component.ts
│ │ │ │ ├── card
│ │ │ │ │ └── show-case-card
│ │ │ │ │ │ ├── show-case-card.component.css
│ │ │ │ │ │ ├── show-case-card.component.html
│ │ │ │ │ │ └── show-case-card.component.ts
│ │ │ │ ├── checkbox
│ │ │ │ │ └── show-case-checkbox
│ │ │ │ │ │ ├── show-case-checkbox.component.css
│ │ │ │ │ │ ├── show-case-checkbox.component.html
│ │ │ │ │ │ └── show-case-checkbox.component.ts
│ │ │ │ ├── context-menu
│ │ │ │ │ └── show-case-context-menu
│ │ │ │ │ │ ├── show-case-context-menu.component.css
│ │ │ │ │ │ ├── show-case-context-menu.component.html
│ │ │ │ │ │ └── show-case-context-menu.component.ts
│ │ │ │ ├── dark-mode
│ │ │ │ │ └── show-case-dark-mode
│ │ │ │ │ │ ├── show-case-dark-mode.component.css
│ │ │ │ │ │ ├── show-case-dark-mode.component.html
│ │ │ │ │ │ └── show-case-dark-mode.component.ts
│ │ │ │ ├── datepicker
│ │ │ │ │ └── show-case-datepicker
│ │ │ │ │ │ ├── show-case-datepicker.component.css
│ │ │ │ │ │ ├── show-case-datepicker.component.html
│ │ │ │ │ │ └── show-case-datepicker.component.ts
│ │ │ │ ├── dialog
│ │ │ │ │ ├── dialog-test
│ │ │ │ │ │ ├── dialog-test.component.css
│ │ │ │ │ │ ├── dialog-test.component.html
│ │ │ │ │ │ └── dialog-test.component.ts
│ │ │ │ │ └── show-case-dialog
│ │ │ │ │ │ ├── show-case-dialog.component.css
│ │ │ │ │ │ ├── show-case-dialog.component.html
│ │ │ │ │ │ └── show-case-dialog.component.ts
│ │ │ │ ├── divider
│ │ │ │ │ └── show-case-divider
│ │ │ │ │ │ ├── show-case-divider.component.css
│ │ │ │ │ │ ├── show-case-divider.component.html
│ │ │ │ │ │ └── show-case-divider.component.ts
│ │ │ │ ├── drawer
│ │ │ │ │ └── show-case-drawer
│ │ │ │ │ │ ├── show-case-drawer.component.css
│ │ │ │ │ │ ├── show-case-drawer.component.html
│ │ │ │ │ │ └── show-case-drawer.component.ts
│ │ │ │ ├── font-icon
│ │ │ │ │ └── show-case-font-icon
│ │ │ │ │ │ ├── show-case-font-icon.component.css
│ │ │ │ │ │ ├── show-case-font-icon.component.html
│ │ │ │ │ │ └── show-case-font-icon.component.ts
│ │ │ │ ├── form-field
│ │ │ │ │ └── show-case-form-field
│ │ │ │ │ │ ├── show-case-form-field.component.css
│ │ │ │ │ │ ├── show-case-form-field.component.html
│ │ │ │ │ │ └── show-case-form-field.component.ts
│ │ │ │ ├── icon
│ │ │ │ │ └── show-case-icon
│ │ │ │ │ │ ├── show-case-icon.component.css
│ │ │ │ │ │ ├── show-case-icon.component.html
│ │ │ │ │ │ └── show-case-icon.component.ts
│ │ │ │ ├── input
│ │ │ │ │ └── show-case-input
│ │ │ │ │ │ ├── show-case-input.component.css
│ │ │ │ │ │ ├── show-case-input.component.html
│ │ │ │ │ │ └── show-case-input.component.ts
│ │ │ │ ├── loader
│ │ │ │ │ └── show-case-loader
│ │ │ │ │ │ ├── show-case-loader.component.css
│ │ │ │ │ │ ├── show-case-loader.component.html
│ │ │ │ │ │ └── show-case-loader.component.ts
│ │ │ │ ├── local-storage
│ │ │ │ │ └── show-case-local-storage
│ │ │ │ │ │ ├── show-case-local-storage.component.css
│ │ │ │ │ │ ├── show-case-local-storage.component.html
│ │ │ │ │ │ └── show-case-local-storage.component.ts
│ │ │ │ ├── multi-select
│ │ │ │ │ └── show-case-multi-select
│ │ │ │ │ │ ├── show-case-multi-select.component.css
│ │ │ │ │ │ ├── show-case-multi-select.component.html
│ │ │ │ │ │ └── show-case-multi-select.component.ts
│ │ │ │ ├── otp-input
│ │ │ │ │ └── show-case-otp-input
│ │ │ │ │ │ ├── show-case-otp-input.component.css
│ │ │ │ │ │ ├── show-case-otp-input.component.html
│ │ │ │ │ │ └── show-case-otp-input.component.ts
│ │ │ │ ├── pagination
│ │ │ │ │ └── show-case-pagination
│ │ │ │ │ │ ├── show-case-pagination.component.css
│ │ │ │ │ │ ├── show-case-pagination.component.html
│ │ │ │ │ │ └── show-case-pagination.component.ts
│ │ │ │ ├── popover
│ │ │ │ │ └── show-case-popover
│ │ │ │ │ │ ├── show-case-popover.component.css
│ │ │ │ │ │ ├── show-case-popover.component.html
│ │ │ │ │ │ └── show-case-popover.component.ts
│ │ │ │ ├── progress-bar
│ │ │ │ │ └── show-case-progress-bar
│ │ │ │ │ │ ├── show-case-progress-bar.component.css
│ │ │ │ │ │ ├── show-case-progress-bar.component.html
│ │ │ │ │ │ └── show-case-progress-bar.component.ts
│ │ │ │ ├── radio-button
│ │ │ │ │ └── show-case-radio-button
│ │ │ │ │ │ ├── show-case-radio-button.component.css
│ │ │ │ │ │ ├── show-case-radio-button.component.html
│ │ │ │ │ │ └── show-case-radio-button.component.ts
│ │ │ │ ├── select
│ │ │ │ │ └── show-case-select
│ │ │ │ │ │ ├── show-case-select.component.css
│ │ │ │ │ │ ├── show-case-select.component.html
│ │ │ │ │ │ └── show-case-select.component.ts
│ │ │ │ ├── session-storage
│ │ │ │ │ └── show-case-session-storage
│ │ │ │ │ │ ├── show-case-session-storage.component.css
│ │ │ │ │ │ ├── show-case-session-storage.component.html
│ │ │ │ │ │ └── show-case-session-storage.component.ts
│ │ │ │ ├── skeleton
│ │ │ │ │ └── show-case-skeleton
│ │ │ │ │ │ ├── show-case-skeleton.component.css
│ │ │ │ │ │ ├── show-case-skeleton.component.html
│ │ │ │ │ │ └── show-case-skeleton.component.ts
│ │ │ │ ├── switch
│ │ │ │ │ └── show-case-switch
│ │ │ │ │ │ ├── show-case-switch.component.css
│ │ │ │ │ │ ├── show-case-switch.component.html
│ │ │ │ │ │ └── show-case-switch.component.ts
│ │ │ │ ├── tab
│ │ │ │ │ ├── lazy-tab
│ │ │ │ │ │ ├── lazy-tab.component.css
│ │ │ │ │ │ ├── lazy-tab.component.html
│ │ │ │ │ │ └── lazy-tab.component.ts
│ │ │ │ │ └── show-case-tab
│ │ │ │ │ │ ├── show-case-tab.component.css
│ │ │ │ │ │ ├── show-case-tab.component.html
│ │ │ │ │ │ └── show-case-tab.component.ts
│ │ │ │ ├── table
│ │ │ │ │ └── show-case-table
│ │ │ │ │ │ ├── show-case-table.component.css
│ │ │ │ │ │ ├── show-case-table.component.html
│ │ │ │ │ │ └── show-case-table.component.ts
│ │ │ │ ├── textarea
│ │ │ │ │ └── show-case-textarea
│ │ │ │ │ │ ├── show-case-textarea.component.css
│ │ │ │ │ │ ├── show-case-textarea.component.html
│ │ │ │ │ │ └── show-case-textarea.component.ts
│ │ │ │ ├── toast
│ │ │ │ │ └── show-case-toast
│ │ │ │ │ │ ├── show-case-toast.component.css
│ │ │ │ │ │ ├── show-case-toast.component.html
│ │ │ │ │ │ └── show-case-toast.component.ts
│ │ │ │ └── tooltip
│ │ │ │ │ └── show-case-tooltip
│ │ │ │ │ ├── show-case-tooltip.component.css
│ │ │ │ │ ├── show-case-tooltip.component.html
│ │ │ │ │ └── show-case-tooltip.component.ts
│ │ │ ├── features
│ │ │ │ ├── accordion-page
│ │ │ │ │ ├── accordion-page.component.css
│ │ │ │ │ ├── accordion-page.component.html
│ │ │ │ │ └── accordion-page.component.ts
│ │ │ │ ├── alert-page
│ │ │ │ │ ├── alert-page.component.css
│ │ │ │ │ ├── alert-page.component.html
│ │ │ │ │ └── alert-page.component.ts
│ │ │ │ ├── autocomplete-page
│ │ │ │ │ ├── autocomplete-page.component.css
│ │ │ │ │ ├── autocomplete-page.component.html
│ │ │ │ │ └── autocomplete-page.component.ts
│ │ │ │ ├── badge-page
│ │ │ │ │ ├── badge-page.component.css
│ │ │ │ │ ├── badge-page.component.html
│ │ │ │ │ └── badge-page.component.ts
│ │ │ │ ├── button-page
│ │ │ │ │ ├── button-page.component.css
│ │ │ │ │ ├── button-page.component.html
│ │ │ │ │ └── button-page.component.ts
│ │ │ │ ├── card-page
│ │ │ │ │ ├── card-page.component.css
│ │ │ │ │ ├── card-page.component.html
│ │ │ │ │ └── card-page.component.ts
│ │ │ │ ├── chart-at-page
│ │ │ │ │ ├── chart-at-page.component.css
│ │ │ │ │ ├── chart-at-page.component.html
│ │ │ │ │ └── chart-at-page.component.ts
│ │ │ │ ├── checkbox-page
│ │ │ │ │ ├── checkbox-page.component.css
│ │ │ │ │ ├── checkbox-page.component.html
│ │ │ │ │ └── checkbox-page.component.ts
│ │ │ │ ├── context-menu-page
│ │ │ │ │ ├── context-menu-page.component.css
│ │ │ │ │ ├── context-menu-page.component.html
│ │ │ │ │ └── context-menu-page.component.ts
│ │ │ │ ├── dark-mode-page
│ │ │ │ │ ├── dark-mode-page.component.css
│ │ │ │ │ ├── dark-mode-page.component.html
│ │ │ │ │ └── dark-mode-page.component.ts
│ │ │ │ ├── dialog-page
│ │ │ │ │ ├── dialog-page.component.css
│ │ │ │ │ ├── dialog-page.component.html
│ │ │ │ │ └── dialog-page.component.ts
│ │ │ │ ├── divider-page
│ │ │ │ │ ├── divider-page.component.css
│ │ │ │ │ ├── divider-page.component.html
│ │ │ │ │ └── divider-page.component.ts
│ │ │ │ ├── doc-container-page
│ │ │ │ │ ├── doc-container-page.component.css
│ │ │ │ │ ├── doc-container-page.component.html
│ │ │ │ │ └── doc-container-page.component.ts
│ │ │ │ ├── doc-sibling-navigations
│ │ │ │ │ ├── doc-sibling-navigations.component.css
│ │ │ │ │ ├── doc-sibling-navigations.component.html
│ │ │ │ │ └── doc-sibling-navigations.component.ts
│ │ │ │ ├── drawer-page
│ │ │ │ │ ├── drawer-page.component.css
│ │ │ │ │ ├── drawer-page.component.html
│ │ │ │ │ └── drawer-page.component.ts
│ │ │ │ ├── form-field-page
│ │ │ │ │ ├── form-field-page.component.css
│ │ │ │ │ ├── form-field-page.component.html
│ │ │ │ │ └── form-field-page.component.ts
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.css
│ │ │ │ │ ├── header.component.html
│ │ │ │ │ └── header.component.ts
│ │ │ │ ├── home-page
│ │ │ │ │ ├── home-page.component.css
│ │ │ │ │ ├── home-page.component.html
│ │ │ │ │ └── home-page.component.ts
│ │ │ │ ├── icon-page
│ │ │ │ │ ├── icon-page.component.css
│ │ │ │ │ ├── icon-page.component.html
│ │ │ │ │ └── icon-page.component.ts
│ │ │ │ ├── input-page
│ │ │ │ │ ├── input-page.component.css
│ │ │ │ │ ├── input-page.component.html
│ │ │ │ │ └── input-page.component.ts
│ │ │ │ ├── installation-page
│ │ │ │ │ ├── installation-page.component.css
│ │ │ │ │ ├── installation-page.component.html
│ │ │ │ │ └── installation-page.component.ts
│ │ │ │ ├── introduction-page
│ │ │ │ │ ├── introduction-page.component.css
│ │ │ │ │ ├── introduction-page.component.html
│ │ │ │ │ └── introduction-page.component.ts
│ │ │ │ ├── loader-page
│ │ │ │ │ ├── loader-page.component.css
│ │ │ │ │ ├── loader-page.component.html
│ │ │ │ │ └── loader-page.component.ts
│ │ │ │ ├── local-storage-page
│ │ │ │ │ ├── local-storage-page.component.css
│ │ │ │ │ ├── local-storage-page.component.html
│ │ │ │ │ └── local-storage-page.component.ts
│ │ │ │ ├── otp-input-page
│ │ │ │ │ ├── otp-input-page.component.css
│ │ │ │ │ ├── otp-input-page.component.html
│ │ │ │ │ └── otp-input-page.component.ts
│ │ │ │ ├── outside-click-page
│ │ │ │ │ ├── outside-click-page.component.css
│ │ │ │ │ ├── outside-click-page.component.html
│ │ │ │ │ └── outside-click-page.component.ts
│ │ │ │ ├── pagination-page
│ │ │ │ │ ├── pagination-page.component.css
│ │ │ │ │ ├── pagination-page.component.html
│ │ │ │ │ └── pagination-page.component.ts
│ │ │ │ ├── popover-page
│ │ │ │ │ ├── popover-page.component.css
│ │ │ │ │ ├── popover-page.component.html
│ │ │ │ │ └── popover-page.component.ts
│ │ │ │ ├── progress-bar-page
│ │ │ │ │ ├── progress-bar-page.component.css
│ │ │ │ │ ├── progress-bar-page.component.html
│ │ │ │ │ └── progress-bar-page.component.ts
│ │ │ │ ├── radio-button-page
│ │ │ │ │ ├── radio-button-page.component.css
│ │ │ │ │ ├── radio-button-page.component.html
│ │ │ │ │ └── radio-button-page.component.ts
│ │ │ │ ├── select-page
│ │ │ │ │ ├── select-page.component.css
│ │ │ │ │ ├── select-page.component.html
│ │ │ │ │ └── select-page.component.ts
│ │ │ │ ├── session-storage-page
│ │ │ │ │ ├── session-storage-page.component.css
│ │ │ │ │ ├── session-storage-page.component.html
│ │ │ │ │ └── session-storage-page.component.ts
│ │ │ │ ├── sidebar
│ │ │ │ │ ├── animation-links.ts
│ │ │ │ │ ├── guide-links.ts
│ │ │ │ │ ├── pipe-links.ts
│ │ │ │ │ ├── sidebar-types.ts
│ │ │ │ │ ├── sidebar.component.css
│ │ │ │ │ ├── sidebar.component.html
│ │ │ │ │ ├── sidebar.component.ts
│ │ │ │ │ ├── sidebar.state.ts
│ │ │ │ │ └── ui-links.ts
│ │ │ │ ├── skeleton-page
│ │ │ │ │ ├── skeleton-page.component.css
│ │ │ │ │ ├── skeleton-page.component.html
│ │ │ │ │ └── skeleton-page.component.ts
│ │ │ │ ├── switch-page
│ │ │ │ │ ├── switch-page.component.css
│ │ │ │ │ ├── switch-page.component.html
│ │ │ │ │ └── switch-page.component.ts
│ │ │ │ ├── tab-page
│ │ │ │ │ ├── tab-page.component.css
│ │ │ │ │ ├── tab-page.component.html
│ │ │ │ │ └── tab-page.component.ts
│ │ │ │ ├── table-page
│ │ │ │ │ ├── table-page.component.css
│ │ │ │ │ ├── table-page.component.html
│ │ │ │ │ └── table-page.component.ts
│ │ │ │ ├── textarea-page
│ │ │ │ │ ├── textarea-page.component.css
│ │ │ │ │ ├── textarea-page.component.html
│ │ │ │ │ └── textarea-page.component.ts
│ │ │ │ ├── toast-page
│ │ │ │ │ ├── toast-page.component.css
│ │ │ │ │ ├── toast-page.component.html
│ │ │ │ │ └── toast-page.component.ts
│ │ │ │ ├── tooltip-page
│ │ │ │ │ ├── tooltip-page.component.css
│ │ │ │ │ ├── tooltip-page.component.html
│ │ │ │ │ └── tooltip-page.component.ts
│ │ │ │ └── usage-page
│ │ │ │ │ ├── usage-page.component.css
│ │ │ │ │ ├── usage-page.component.html
│ │ │ │ │ └── usage-page.component.ts
│ │ │ ├── guides.routes.ts
│ │ │ ├── module-navigations.ts
│ │ │ ├── pages
│ │ │ │ ├── animations
│ │ │ │ │ ├── animation-configuration-page
│ │ │ │ │ │ ├── animation-configuration-page.component.css
│ │ │ │ │ │ ├── animation-configuration-page.component.html
│ │ │ │ │ │ └── animation-configuration-page.component.ts
│ │ │ │ │ ├── fade-in-page
│ │ │ │ │ │ ├── fade-in-page.component.css
│ │ │ │ │ │ ├── fade-in-page.component.html
│ │ │ │ │ │ └── fade-in-page.component.ts
│ │ │ │ │ └── fade-in-up-page
│ │ │ │ │ │ ├── fade-in-up-page.component.css
│ │ │ │ │ │ ├── fade-in-up-page.component.html
│ │ │ │ │ │ └── fade-in-up-page.component.ts
│ │ │ │ ├── datepicker-page
│ │ │ │ │ ├── datepicker-page.component.css
│ │ │ │ │ ├── datepicker-page.component.html
│ │ │ │ │ └── datepicker-page.component.ts
│ │ │ │ ├── pipes
│ │ │ │ │ ├── join-page
│ │ │ │ │ │ ├── join-page.component.css
│ │ │ │ │ │ ├── join-page.component.html
│ │ │ │ │ │ └── join-page.component.ts
│ │ │ │ │ ├── map-page
│ │ │ │ │ │ ├── map-page.component.css
│ │ │ │ │ │ ├── map-page.component.html
│ │ │ │ │ │ └── map-page.component.ts
│ │ │ │ │ └── pipe-configuration-page
│ │ │ │ │ │ ├── pipe-configuration-page.component.css
│ │ │ │ │ │ ├── pipe-configuration-page.component.html
│ │ │ │ │ │ └── pipe-configuration-page.component.ts
│ │ │ │ └── ui
│ │ │ │ │ ├── font-icon-page
│ │ │ │ │ ├── font-icon-page.component.css
│ │ │ │ │ ├── font-icon-page.component.html
│ │ │ │ │ └── font-icon-page.component.ts
│ │ │ │ │ ├── multi-select-page
│ │ │ │ │ ├── multi-select-page.component.css
│ │ │ │ │ ├── multi-select-page.component.html
│ │ │ │ │ └── multi-select-page.component.ts
│ │ │ │ │ └── ui-configuration-page
│ │ │ │ │ ├── ui-configuration-page.component.css
│ │ │ │ │ ├── ui-configuration-page.component.html
│ │ │ │ │ └── ui-configuration-page.component.ts
│ │ │ ├── pipe-page
│ │ │ │ ├── pipe-page.component.css
│ │ │ │ ├── pipe-page.component.html
│ │ │ │ └── pipe-page.component.ts
│ │ │ ├── pipes.routes.ts
│ │ │ ├── services
│ │ │ │ └── file.service.ts
│ │ │ └── ui.routes.ts
│ │ ├── docsearch.css
│ │ ├── highlight-dark.css
│ │ ├── highlight-light.css
│ │ ├── index.html
│ │ ├── main.server.ts
│ │ ├── main.ts
│ │ ├── server.ts
│ │ ├── styles.css
│ │ └── tree-structure.json
│ ├── tsconfig.app.json
│ └── tsconfig.spec.json
└── ngverse
│ ├── eslint.config.js
│ ├── ng-package.json
│ ├── package-lock.json
│ ├── package.json
│ ├── schematics
│ ├── animation
│ │ ├── index.ts
│ │ ├── index_spec.ts
│ │ ├── schema.json
│ │ └── schema.ts
│ ├── collection.json
│ ├── pipe
│ │ ├── index.ts
│ │ ├── index_spec.ts
│ │ ├── schema.json
│ │ └── schema.ts
│ └── ui
│ │ ├── index.ts
│ │ ├── index_spec.ts
│ │ ├── schema.json
│ │ └── schema.ts
│ ├── src
│ ├── lib
│ │ ├── animations
│ │ │ ├── fade-in-up.animation.ts
│ │ │ └── fade-in.animation.ts
│ │ ├── ngverse.css
│ │ ├── pipes
│ │ │ ├── char-at.pipe.ts
│ │ │ ├── join.pipe.ts
│ │ │ ├── map.pipe.ts
│ │ │ └── order-by.pipe.ts
│ │ └── ui
│ │ │ ├── accordion
│ │ │ ├── accordion-body.component.ts
│ │ │ ├── accordion-header.component.ts
│ │ │ ├── accordion-item.component.css
│ │ │ ├── accordion-item.component.html
│ │ │ ├── accordion-item.component.spec.ts
│ │ │ ├── accordion-item.component.ts
│ │ │ ├── accordion.component.css
│ │ │ ├── accordion.component.html
│ │ │ ├── accordion.component.spec.ts
│ │ │ └── accordion.component.ts
│ │ │ ├── alert
│ │ │ ├── alert-body.component.spec.ts
│ │ │ ├── alert-body.component.ts
│ │ │ ├── alert-header.component.spec.ts
│ │ │ ├── alert-header.component.ts
│ │ │ ├── alert.component.css
│ │ │ ├── alert.component.html
│ │ │ ├── alert.component.spec.ts
│ │ │ └── alert.component.ts
│ │ │ ├── autocomplete
│ │ │ ├── autocomplete-item
│ │ │ │ ├── autocomplete-item.component.css
│ │ │ │ ├── autocomplete-item.component.html
│ │ │ │ └── autocomplete-item.component.ts
│ │ │ ├── autocomplete.component.css
│ │ │ ├── autocomplete.component.html
│ │ │ └── autocomplete.component.ts
│ │ │ ├── badge
│ │ │ ├── badge.component.css
│ │ │ ├── badge.component.html
│ │ │ ├── badge.component.spec.ts
│ │ │ └── badge.component.ts
│ │ │ ├── button
│ │ │ ├── button-loader.component.spec.ts
│ │ │ ├── button-loader.component.ts
│ │ │ ├── button.component.css
│ │ │ ├── button.component.html
│ │ │ ├── button.component.spec.ts
│ │ │ └── button.component.ts
│ │ │ ├── card
│ │ │ ├── card.component.css
│ │ │ ├── card.component.html
│ │ │ ├── card.component.spec.ts
│ │ │ └── card.component.ts
│ │ │ ├── checkbox
│ │ │ ├── checkbox.component.css
│ │ │ ├── checkbox.component.html
│ │ │ ├── checkbox.component.spec.ts
│ │ │ └── checkbox.component.ts
│ │ │ ├── context-menu
│ │ │ ├── context-menu-item.directive.spec.ts
│ │ │ ├── context-menu-item.directive.ts
│ │ │ ├── context-menu-trigger.directive.spec.ts
│ │ │ ├── context-menu-trigger.directive.ts
│ │ │ ├── context-menu.directive.spec.ts
│ │ │ └── context-menu.directive.ts
│ │ │ ├── dark-mode
│ │ │ ├── dark-mode-toggle.component.css
│ │ │ ├── dark-mode-toggle.component.html
│ │ │ ├── dark-mode-toggle.component.spec.ts
│ │ │ ├── dark-mode-toggle.component.ts
│ │ │ ├── dark-mode.service.spec.ts
│ │ │ └── dark-mode.service.ts
│ │ │ ├── datepicker
│ │ │ ├── adapter
│ │ │ │ ├── date.adapter.ts
│ │ │ │ └── date.token.ts
│ │ │ ├── calendar
│ │ │ │ ├── calendar.component.css
│ │ │ │ ├── calendar.component.html
│ │ │ │ └── calendar.component.ts
│ │ │ ├── core
│ │ │ │ ├── cell.directive.ts
│ │ │ │ └── day-cell.ts
│ │ │ ├── datepicker
│ │ │ │ ├── datepicker.component.css
│ │ │ │ ├── datepicker.component.html
│ │ │ │ └── datepicker.component.ts
│ │ │ ├── day-view
│ │ │ │ ├── day-view.component.css
│ │ │ │ ├── day-view.component.html
│ │ │ │ └── day-view.component.ts
│ │ │ ├── dayjs
│ │ │ │ ├── dayjs-date.adapter.token.ts
│ │ │ │ └── dayjs-date.adapter.ts
│ │ │ ├── month-view
│ │ │ │ ├── month-view.component.css
│ │ │ │ ├── month-view.component.html
│ │ │ │ └── month-view.component.ts
│ │ │ ├── state
│ │ │ │ └── key.state.ts
│ │ │ ├── types
│ │ │ │ └── view-type.ts
│ │ │ └── year-view
│ │ │ │ ├── year-view.component.css
│ │ │ │ ├── year-view.component.html
│ │ │ │ └── year-view.component.ts
│ │ │ ├── dialog
│ │ │ ├── alert-dialog
│ │ │ │ ├── alert-dialog.component.css
│ │ │ │ ├── alert-dialog.component.html
│ │ │ │ ├── alert-dialog.component.spec.ts
│ │ │ │ └── alert-dialog.component.ts
│ │ │ ├── confirm-dialog
│ │ │ │ ├── confirm-dialog.component.css
│ │ │ │ ├── confirm-dialog.component.html
│ │ │ │ ├── confirm-dialog.component.spec.ts
│ │ │ │ └── confirm-dialog.component.ts
│ │ │ ├── confirm.directive.spec.ts
│ │ │ ├── confirm.directive.ts
│ │ │ ├── dialog-close.directive.spec.ts
│ │ │ ├── dialog-close.directive.ts
│ │ │ ├── dialog.service.spec.ts
│ │ │ ├── dialog.service.ts
│ │ │ └── dialog
│ │ │ │ ├── dialog.component.css
│ │ │ │ ├── dialog.component.html
│ │ │ │ ├── dialog.component.spec.ts
│ │ │ │ └── dialog.component.ts
│ │ │ ├── divider
│ │ │ ├── divider.component.spec.ts
│ │ │ └── divider.component.ts
│ │ │ ├── drawer
│ │ │ ├── drawer-close-icon.component.ts
│ │ │ ├── drawer-close.directive.spec.ts
│ │ │ ├── drawer-close.directive.ts
│ │ │ ├── drawer-ref.ts
│ │ │ ├── drawer.component.css
│ │ │ ├── drawer.component.html
│ │ │ ├── drawer.component.spec.ts
│ │ │ ├── drawer.component.ts
│ │ │ ├── drawer.service.spec.ts
│ │ │ └── drawer.service.ts
│ │ │ ├── font-icon
│ │ │ ├── font-icon.component.spec.ts
│ │ │ └── font-icon.component.ts
│ │ │ ├── form-field
│ │ │ ├── error.component.spec.ts
│ │ │ ├── error.component.ts
│ │ │ ├── form-field-error.registry.spec.ts
│ │ │ ├── form-field-error.registry.ts
│ │ │ ├── form-field.component.css
│ │ │ ├── form-field.component.html
│ │ │ ├── form-field.component.spec.ts
│ │ │ ├── form-field.component.ts
│ │ │ ├── label.component.spec.ts
│ │ │ └── label.component.ts
│ │ │ ├── icon
│ │ │ ├── icon-loader.service.spec.ts
│ │ │ ├── icon-loader.service.ts
│ │ │ ├── icon.component.spec.ts
│ │ │ ├── icon.component.ts
│ │ │ ├── icon.registry.spec.ts
│ │ │ └── icon.registry.ts
│ │ │ ├── input
│ │ │ ├── input.directive.spec.ts
│ │ │ └── input.directive.ts
│ │ │ ├── loader
│ │ │ ├── loader.component.css
│ │ │ ├── loader.component.html
│ │ │ ├── loader.component.spec.ts
│ │ │ └── loader.component.ts
│ │ │ ├── local-storage
│ │ │ ├── local-storage.service.spec.ts
│ │ │ └── local-storage.service.ts
│ │ │ ├── multi-select
│ │ │ ├── multi-option-content.directive.ts
│ │ │ ├── multi-option-group-label.component.ts
│ │ │ ├── multi-option-group.component.ts
│ │ │ ├── multi-option.component.css
│ │ │ ├── multi-option.component.html
│ │ │ ├── multi-option.component.ts
│ │ │ ├── multi-select-label.directive.ts
│ │ │ ├── multi-select.component.css
│ │ │ ├── multi-select.component.html
│ │ │ └── multi-select.component.ts
│ │ │ ├── otp-input
│ │ │ ├── otp-input.component.css
│ │ │ ├── otp-input.component.html
│ │ │ ├── otp-input.component.spec.ts
│ │ │ └── otp-input.component.ts
│ │ │ ├── outside-click
│ │ │ └── outside-click.directive.ts
│ │ │ ├── pagination
│ │ │ ├── pagination.component.css
│ │ │ ├── pagination.component.html
│ │ │ ├── pagination.component.spec.ts
│ │ │ └── pagination.component.ts
│ │ │ ├── popover
│ │ │ ├── popover-origin.directive.spec.ts
│ │ │ ├── popover-origin.directive.ts
│ │ │ ├── popover.component.css
│ │ │ ├── popover.component.html
│ │ │ ├── popover.component.spec.ts
│ │ │ └── popover.component.ts
│ │ │ ├── progress-bar
│ │ │ ├── progress-bar.component.css
│ │ │ ├── progress-bar.component.html
│ │ │ ├── progress-bar.component.spec.ts
│ │ │ └── progress-bar.component.ts
│ │ │ ├── radio-button
│ │ │ ├── radio-button.component.css
│ │ │ ├── radio-button.component.html
│ │ │ ├── radio-button.component.spec.ts
│ │ │ ├── radio-button.component.ts
│ │ │ ├── radio-group.component.css
│ │ │ ├── radio-group.component.html
│ │ │ ├── radio-group.component.spec.ts
│ │ │ └── radio-group.component.ts
│ │ │ ├── select
│ │ │ ├── option-content.directive.ts
│ │ │ ├── option-group-label.component.ts
│ │ │ ├── option-group.component.spec.ts
│ │ │ ├── option-group.component.ts
│ │ │ ├── option.component.css
│ │ │ ├── option.component.html
│ │ │ ├── option.component.spec.ts
│ │ │ ├── option.component.ts
│ │ │ ├── select-label.directive.ts
│ │ │ ├── select.component.css
│ │ │ ├── select.component.html
│ │ │ ├── select.component.spec.ts
│ │ │ └── select.component.ts
│ │ │ ├── session-storage
│ │ │ ├── session-storage.service.spec.ts
│ │ │ └── session-storage.service.ts
│ │ │ ├── skeleton
│ │ │ ├── skeleton.component.spec.ts
│ │ │ └── skeleton.component.ts
│ │ │ ├── switch
│ │ │ ├── switch.component.css
│ │ │ ├── switch.component.html
│ │ │ ├── switch.component.spec.ts
│ │ │ └── switch.component.ts
│ │ │ ├── tab
│ │ │ ├── tab-body.directive.ts
│ │ │ ├── tab-group-header.component.spec.ts
│ │ │ ├── tab-group-header.component.ts
│ │ │ ├── tab-group.component.css
│ │ │ ├── tab-group.component.html
│ │ │ ├── tab-group.component.spec.ts
│ │ │ ├── tab-group.component.ts
│ │ │ ├── tab-header.directive.ts
│ │ │ ├── tab.component.css
│ │ │ ├── tab.component.html
│ │ │ └── tab.component.ts
│ │ │ ├── table
│ │ │ ├── sort-header.component.ts
│ │ │ ├── sort.directive.ts
│ │ │ ├── table-layout.component.ts
│ │ │ ├── table-pagination.component.css
│ │ │ ├── table-pagination.component.html
│ │ │ ├── table-pagination.component.ts
│ │ │ ├── table.directive.ts
│ │ │ ├── table.types.ts
│ │ │ ├── td.directive.ts
│ │ │ ├── th.directive.ts
│ │ │ ├── tr-head.directive.ts
│ │ │ └── tr.directive.ts
│ │ │ ├── textarea
│ │ │ ├── textarea.directive.spec.ts
│ │ │ └── textarea.directive.ts
│ │ │ ├── toast
│ │ │ ├── toast-close.component.ts
│ │ │ ├── toast.component.css
│ │ │ ├── toast.component.html
│ │ │ ├── toast.component.spec.ts
│ │ │ ├── toast.component.ts
│ │ │ ├── toast.service.spec.ts
│ │ │ └── toast.service.ts
│ │ │ └── tooltip
│ │ │ ├── tooltip-container.component.css
│ │ │ ├── tooltip-container.component.html
│ │ │ ├── tooltip-container.component.spec.ts
│ │ │ ├── tooltip-container.component.ts
│ │ │ ├── tooltip.directive.spec.ts
│ │ │ └── tooltip.directive.ts
│ ├── mock-export.ts
│ └── public-api.ts
│ ├── tsconfig.lib.json
│ ├── tsconfig.lib.prod.json
│ ├── tsconfig.schematics.json
│ └── tsconfig.spec.json
├── release.config.js
├── scripts
└── generate-sitemap.js
├── tsconfig.json
└── vercel.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 | ij_typescript_use_double_quotes = false
14 |
15 | [*.md]
16 | max_line_length = off
17 | trim_trailing_whitespace = false
18 |
--------------------------------------------------------------------------------
/.github/workflows/pr-check.yml:
--------------------------------------------------------------------------------
1 | name: PR Check
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - main
7 |
8 | jobs:
9 | test-and-build:
10 | name: Check PR
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | - name: Checkout repository
15 | uses: actions/checkout@v3
16 |
17 | - name: Setup Node.js
18 | uses: actions/setup-node@v3
19 | with:
20 | node-version: 20
21 | cache: 'npm'
22 |
23 | - name: Install dependencies
24 | run: npm install
25 |
26 | - name: Run Prettier
27 | run: npm run format:check
28 |
29 | - name: Check docs
30 | run: npm run check:docs
31 |
32 | - name: Check ngverse
33 | run: npm run check:ngverse
34 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | workflow_dispatch:
5 |
6 | jobs:
7 | release:
8 | name: Release
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: Checkout code
12 | uses: actions/checkout@v3
13 |
14 | - name: Setup Node.js
15 | uses: actions/setup-node@v3
16 | with:
17 | node-version: '20'
18 | cache: 'npm'
19 |
20 | - name: Install dependencies
21 | run: npm install
22 |
23 | - name: Build library
24 | run: npm run build:ngverse
25 |
26 | - name: Run semantic-release
27 | env:
28 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
29 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
30 | run: npm run semantic-release
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2 |
3 | # Compiled output
4 | **/dist
5 | /dist
6 | /tmp
7 | /out-tsc
8 | /bazel-out
9 |
10 | # Node
11 | /node_modules
12 | npm-debug.log
13 | yarn-error.log
14 |
15 | # IDEs and editors
16 | .idea/
17 | .project
18 | .classpath
19 | .c9/
20 | *.launch
21 | .settings/
22 | *.sublime-workspace
23 |
24 | # Visual Studio Code
25 | .vscode/*
26 | !.vscode/settings.json
27 | !.vscode/tasks.json
28 | !.vscode/launch.json
29 | !.vscode/extensions.json
30 | .history/*
31 |
32 | # Miscellaneous
33 | /.angular/cache
34 | .sass-cache/
35 | /connect.lock
36 | /coverage
37 | /libpeerconnection.log
38 | testem.log
39 | /typings
40 |
41 | # System files
42 | .DS_Store
43 | Thumbs.db
44 |
--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | npx --no -- commitlint --edit $1
2 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npx lint-staged
2 | npm run format:check
3 | npm run lint
4 | npx ng test --no-watch --no-progress --browsers=ChromeHeadless --project=ngverse
5 |
--------------------------------------------------------------------------------
/.postcssrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": {
3 | "@tailwindcss/postcss": {}
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "singleQuote": true,
4 | "tabWidth": 2,
5 | "trailingComma": "es5",
6 | "printWidth": 80,
7 | "arrowParens": "always",
8 | "plugins": ["prettier-plugin-tailwindcss"],
9 | "tailwindStylesheet": "./projects/docs/src/styles.css"
10 | }
11 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "files.exclude": {
3 | "**/.git": true,
4 | "**/.svn": true,
5 | "**/.hg": true,
6 | "**/CVS": true,
7 | "**/.DS_Store": true,
8 | "**/Thumbs.db": true
9 | // "node_modules": true,
10 | // "dist": true
11 | },
12 | "files.associations": {
13 | "*.css": "tailwindcss"
14 | },
15 | "editor.codeActionsOnSave": {
16 | "source.organizeImports": "always"
17 | },
18 | "prettier.configPath": "./.prettierrc"
19 | }
20 |
--------------------------------------------------------------------------------
/commitlint.config.mjs:
--------------------------------------------------------------------------------
1 | export default { extends: ['@commitlint/config-conventional'] };
2 |
--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/logo.png
--------------------------------------------------------------------------------
/projects/docs/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 | '@angular-eslint/directive-selector': [
11 | 'error',
12 | {
13 | type: 'attribute',
14 | prefix: 'doc',
15 | style: 'camelCase',
16 | },
17 | ],
18 | '@angular-eslint/component-selector': [
19 | 'error',
20 | {
21 | type: 'element',
22 | prefix: 'doc',
23 | style: 'kebab-case',
24 | },
25 | ],
26 | 'no-restricted-imports': [
27 | 'error',
28 | {
29 | patterns: ['**/dist/**', '../../dist/**'],
30 | },
31 | ],
32 | },
33 | },
34 | {
35 | files: ['**/*.html'],
36 | rules: {},
37 | }
38 | );
39 |
--------------------------------------------------------------------------------
/projects/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/public/favicon.ico
--------------------------------------------------------------------------------
/projects/docs/public/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/public/github.png
--------------------------------------------------------------------------------
/projects/docs/public/home-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/public/home-bg.png
--------------------------------------------------------------------------------
/projects/docs/public/icon-samples/checkmark.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/projects/docs/public/icon-samples/home.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/projects/docs/public/images/copy.svg:
--------------------------------------------------------------------------------
1 |
7 |
10 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/docs/public/images/folder.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/projects/docs/public/images/test-photo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/public/images/test-photo.png
--------------------------------------------------------------------------------
/projects/docs/public/images/ts.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-icon/bird.svg:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-icon/cat.svg:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-icon/heart.svg:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-icon/paw.svg:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
9 |
10 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-icon/squirrel.svg:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
9 |
10 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-icon/volleyball.svg:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/docs/public/show-case-tooltip/thanos.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/public/show-case-tooltip/thanos.webp
--------------------------------------------------------------------------------
/projects/docs/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/app.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 | Created out of laziness from constantly rebuilding the same generic
8 | components. Inspired by
9 |
14 | shadcn
16 |
17 |
18 |
19 | Code licensed under an
20 |
25 | MIT-style License.
27 |
28 |
29 |
--------------------------------------------------------------------------------
/projects/docs/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | describe('Placeholder Test', () => {
2 | it('should pass', () => {
3 | expect(true).toBe(true);
4 | });
5 | });
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/app.config.server.ts:
--------------------------------------------------------------------------------
1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
2 | import { provideServerRendering } from '@angular/platform-server';
3 | import { appConfig } from './app.config';
4 |
5 | const serverConfig: ApplicationConfig = {
6 | providers: [provideServerRendering()],
7 | };
8 |
9 | export const config = mergeApplicationConfig(appConfig, serverConfig);
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 | import { ANIMATION_ROUTES } from './animation.routes';
3 | import { GUIDES_ROUTES } from './guides.routes';
4 | import { PIPES_ROUTES } from './pipes.routes';
5 | import { UI_ROUTES } from './ui.routes';
6 |
7 | export const routes: Routes = [
8 | {
9 | path: 'doc',
10 | loadComponent: () =>
11 | import('./features/doc-container-page/doc-container-page.component').then(
12 | (d) => d.DocContainerPageComponent
13 | ),
14 | children: [GUIDES_ROUTES, UI_ROUTES, PIPES_ROUTES, ANIMATION_ROUTES],
15 | },
16 | {
17 | path: '',
18 | loadComponent: () =>
19 | import('./features/home-page/home-page.component').then(
20 | (h) => h.HomePageComponent
21 | ),
22 | },
23 | ];
24 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blog/blog-page/blog-page.component.css:
--------------------------------------------------------------------------------
1 | .prose {
2 | max-width: 100%;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blog/blog-page/blog-page.component.html:
--------------------------------------------------------------------------------
1 |
4 | {{ label() }}
5 |
6 |
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/api-info/api-description/api-description.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/blueprint/api-info/api-description/api-description.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/api-info/api-description/api-description.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/api-info/api-description/api-description.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'doc-api-description',
5 | imports: [],
6 | templateUrl: './api-description.component.html',
7 | styleUrl: './api-description.component.css',
8 | })
9 | export class ApiDescriptionComponent {}
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/api-info/api-info.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/blueprint/api-info/api-info.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/api-info/api-info.component.ts:
--------------------------------------------------------------------------------
1 | import { DividerComponent } from '@/ui/divider/divider.component';
2 | import { Component, input } from '@angular/core';
3 | import { RouterLink } from '@angular/router';
4 | import {
5 | ApiEntity,
6 | ApiInputsComponent,
7 | } from './api-inputs/api-inputs.component';
8 | export interface ApiInfo {
9 | reliesOn?: string;
10 | articleLink?: string;
11 | entities: ApiEntity[];
12 | description?: string;
13 | ariaLink?: string;
14 | ariaDescription?: string;
15 | stylesInGlobal?: boolean;
16 | }
17 | @Component({
18 | selector: 'doc-api-info',
19 | imports: [ApiInputsComponent, RouterLink, DividerComponent],
20 | templateUrl: './api-info.component.html',
21 | styleUrl: './api-info.component.css',
22 | })
23 | export class ApiInfoComponent {
24 | apiInfo = input.required();
25 | }
26 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/blueprint-page/blueprint-page.component.css:
--------------------------------------------------------------------------------
1 | .blueprint-page {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 40px;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/blueprint-page/blueprint-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ label() }}
5 |
6 | @if (subTitle()) {
7 |
{{ subTitle() }}
8 | }
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/command-installation/command-installation.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/blueprint/command-installation/command-installation.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/command-installation/command-installation.component.html:
--------------------------------------------------------------------------------
1 | Installation
2 |
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/command-installation/command-installation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, computed, input } from '@angular/core';
2 | import { SourceCodeComponent } from '../source-code/source-code.component';
3 |
4 | @Component({
5 | selector: 'doc-command-installation',
6 | imports: [SourceCodeComponent],
7 | templateUrl: './command-installation.component.html',
8 | styleUrl: './command-installation.component.css',
9 | })
10 | export class CommandInstallationComponent {
11 | name = input.required();
12 | cmd = input('ui');
13 | installation = computed(
14 | () => `ng g @ngverse/ui:${this.cmd()} ${this.name()}`
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/prerequisites/prerequisites.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/blueprint/prerequisites/prerequisites.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/prerequisites/prerequisites.component.html:
--------------------------------------------------------------------------------
1 | Prerequisites
2 |
3 | @if (preprsAuto(); as prepsAuto) {
4 |
5 | @for (dep of prepsAuto; track $index) {
6 |
11 |
16 | }
17 |
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/prerequisites/prerequisites.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 | import { RouterLink } from '@angular/router';
3 | import { SourceCodeComponent } from '../source-code/source-code.component';
4 | export interface Prerequisite {
5 | name: string;
6 | label?: string;
7 | }
8 | @Component({
9 | selector: 'doc-prerequisites',
10 | imports: [SourceCodeComponent, RouterLink],
11 | templateUrl: './prerequisites.component.html',
12 | styleUrl: './prerequisites.component.css',
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | })
15 | export class PrerequisitesComponent {
16 | // preps = input();
17 | name = input();
18 |
19 | preprsAuto = input();
20 |
21 | getCode(dep: Prerequisite) {
22 | const name = dep.name;
23 | return `ng g @ngverse/ui:ui ${name}`;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/show-case/show-case.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .active-tab {
4 | @apply border-b-2 border-solid;
5 | border-color: var(--color-primary);
6 | }
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/show-case/show-case.component.html:
--------------------------------------------------------------------------------
1 | Showcase
2 |
3 |
4 |
5 |
6 |
7 | @for (item of tabs; track $index) {
8 |
9 |
14 |
15 | }
16 |
17 |
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/source-code/source-code.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | :host {
4 | position: relative;
5 | display: block;
6 | }
7 | .copy-button {
8 | right: 10px;
9 | top: 10px;
10 | position: absolute;
11 | z-index: 1;
12 | cursor: pointer;
13 | @layer lg {
14 | @apply block;
15 | }
16 | }
17 |
18 | .source-code {
19 | background: transparent !important;
20 | }
21 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/source-code/source-code.component.html:
--------------------------------------------------------------------------------
1 | @if (showCopy()) {
2 |
3 |
8 | {{ copied() ? 'check' : 'content_copy' }}
9 |
10 |
11 | }
12 |
18 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/source-tree/source-tree-select/source-tree-select.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .select-option {
4 | @apply my-2 block flex h-8 w-full cursor-pointer items-center gap-1 hover:bg-slate-100;
5 |
6 | &.selected {
7 | @apply bg-gray-100;
8 | }
9 | }
10 |
11 | .opened {
12 | transform: rotate(180deg);
13 | }
14 |
15 | .tree-select {
16 | width: 350px;
17 | }
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/source-tree/source-tree.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .file-label {
4 | @apply cursor-pointer border-0 border-b border-solid border-gray-200 p-3;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/blueprint/source-tree/source-tree.component.html:
--------------------------------------------------------------------------------
1 |
4 |
Source code
5 |
6 |
7 |
8 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/core/project-name/project-name.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/docs/src/app/core/project-name/project-name.component.html:
--------------------------------------------------------------------------------
1 | @if (code()) {
2 | @ngverse/ui
3 | } @else {
4 | @ngverse/ui
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/core/project-name/project-name.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'doc-project-name',
5 | imports: [],
6 | templateUrl: './project-name.component.html',
7 | styleUrl: './project-name.component.css',
8 | })
9 | export class ProjectNameComponent {
10 | code = input(false);
11 | }
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/accordion/show-case-accordion/show-case-accordion.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | gap: 8px;
4 | }
5 |
6 | app-accordion {
7 | width: 100%;
8 | }
9 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/accordion/show-case-accordion/show-case-accordion.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @for (item of items; track $index) {
4 |
5 | {{ item.description }}
6 |
7 | }
8 |
9 |
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/alert/show-case-alert/show-case-alert.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | gap: 8px;
4 | flex-direction: column;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/alert/show-case-alert/show-case-alert.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { AlertBodyComponent } from '@/ui/alert/alert-body.component';
3 | import { AlertHeaderComponent } from '@/ui/alert/alert-header.component';
4 | import { AlertComponent } from '@/ui/alert/alert.component';
5 |
6 | @Component({
7 | selector: 'doc-show-case-alert',
8 | imports: [AlertComponent, AlertHeaderComponent, AlertBodyComponent],
9 | templateUrl: './show-case-alert.component.html',
10 | styleUrl: './show-case-alert.component.css',
11 | })
12 | export class ShowCaseAlertComponent {}
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/autocomplete/show-case-autocomplete/show-case-autocomplete.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/autocomplete/show-case-autocomplete/show-case-autocomplete.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/autocomplete/show-case-autocomplete/show-case-autocomplete.component.html:
--------------------------------------------------------------------------------
1 |
2 | @for (item of filteredItems(); track $index) {
3 | {{ item }}
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/badge/show-case-badge/show-case-badge.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 12px;
5 | justify-content: start;
6 | align-items: start;
7 | }
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/badge/show-case-badge/show-case-badge.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 | Decrease Notification
7 |
8 |
9 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/badge/show-case-badge/show-case-badge.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { BadgeComponent } from '@/ui/badge/badge.component';
4 | import { ButtonComponent } from '@/ui/button/button.component';
5 |
6 | @Component({
7 | selector: 'doc-show-case-badge',
8 | imports: [FormsModule, ButtonComponent, BadgeComponent],
9 | templateUrl: './show-case-badge.component.html',
10 | styleUrl: './show-case-badge.component.css',
11 | })
12 | export class ShowCaseBadgeComponent {
13 | count = signal(8);
14 | decreese() {
15 | if (!this.count()) {
16 | return;
17 | }
18 |
19 | this.count.update((c) => c - 1);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/button/show-case-button/show-case-button.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: wrap;
5 | gap: 8px;
6 | }
7 |
8 | .buttons-container {
9 | display: flex;
10 | gap: 8px;
11 | flex-wrap: wrap;
12 | }
13 |
14 | .buttons-label {
15 | margin-top: 16px;
16 | margin-bottom: 10px;
17 | }
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/button/show-case-button/show-case-button.component.ts:
--------------------------------------------------------------------------------
1 | import { ButtonComponent } from '@/ui/button/button.component';
2 | import { FontIconComponent } from '@/ui/font-icon/font-icon.component';
3 | import { Component } from '@angular/core';
4 |
5 | @Component({
6 | selector: 'doc-show-case-button',
7 | imports: [ButtonComponent, FontIconComponent],
8 | templateUrl: './show-case-button.component.html',
9 | styleUrl: './show-case-button.component.css',
10 | })
11 | export class ShowCaseButtonComponent {}
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/card/show-case-card/show-case-card.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-wrap: wrap;
4 | align-items: center;
5 | justify-content: center;
6 | gap: 10px;
7 | }
8 |
9 | .card {
10 | max-width: 300px;
11 | }
12 |
13 | .card-header {
14 | margin-bottom: 12px;
15 | }
16 |
17 | .card-footer {
18 | display: flex;
19 | justify-content: end;
20 | gap: 10px;
21 | margin-top: 12px;
22 | }
23 |
24 | .card-content {
25 | display: flex;
26 | flex-direction: column;
27 | gap: 10px;
28 | }
29 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/card/show-case-card/show-case-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, model } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ButtonComponent } from '@/ui/button/button.component';
4 | import { CardComponent } from '@/ui/card/card.component';
5 | import { InputDirective } from '@/ui/input/input.directive';
6 |
7 | @Component({
8 | selector: 'doc-show-case-card',
9 | imports: [CardComponent, ButtonComponent, FormsModule, InputDirective],
10 | templateUrl: './show-case-card.component.html',
11 | styleUrl: './show-case-card.component.css',
12 | })
13 | export class ShowCaseCardComponent {
14 | username = model('');
15 | password = model('');
16 | }
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/checkbox/show-case-checkbox/show-case-checkbox.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/checkbox/show-case-checkbox/show-case-checkbox.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/checkbox/show-case-checkbox/show-case-checkbox.component.html:
--------------------------------------------------------------------------------
1 | I am kind checkbox
2 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/checkbox/show-case-checkbox/show-case-checkbox.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
3 | import { CheckboxComponent } from '@/ui/checkbox/checkbox.component';
4 |
5 | @Component({
6 | selector: 'doc-show-case-checkbox',
7 | imports: [ReactiveFormsModule, CheckboxComponent, FormsModule],
8 | templateUrl: './show-case-checkbox.component.html',
9 | styleUrl: './show-case-checkbox.component.css',
10 | })
11 | export class ShowCaseCheckboxComponent {
12 | formControl = new FormControl(false);
13 | }
14 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/context-menu/show-case-context-menu/show-case-context-menu.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/context-menu/show-case-context-menu/show-case-context-menu.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/context-menu/show-case-context-menu/show-case-context-menu.component.html:
--------------------------------------------------------------------------------
1 |
2 |
Right click to open context menu
3 |
4 |
5 |
6 |
7 | Copy
8 | Mark as Red
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dark-mode/show-case-dark-mode/show-case-dark-mode.component.css:
--------------------------------------------------------------------------------
1 | .dark-mode-info {
2 | margin-top: 12px;
3 | }
4 |
5 | .dark-mode-status {
6 | font-weight: bold;
7 | }
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dark-mode/show-case-dark-mode/show-case-dark-mode.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dark mode is
5 | {{
6 | isDarkMode() ? 'enabled' : 'disabled'
7 | }}
8 |
9 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dark-mode/show-case-dark-mode/show-case-dark-mode.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
2 | import { DarkModeToggleComponent } from '@/ui/dark-mode/dark-mode-toggle.component';
3 | import { DarkModeService } from '@/ui/dark-mode/dark-mode.service';
4 |
5 | @Component({
6 | selector: 'doc-show-case-dark-mode',
7 | imports: [DarkModeToggleComponent],
8 | templateUrl: './show-case-dark-mode.component.html',
9 | styleUrl: './show-case-dark-mode.component.css',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export class ShowCaseDarkModeComponent {
13 | private readonly darkModeService = inject(DarkModeService);
14 |
15 | isDarkMode = this.darkModeService.isEnabled;
16 | }
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/datepicker/show-case-datepicker/show-case-datepicker.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/datepicker/show-case-datepicker/show-case-datepicker.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/datepicker/show-case-datepicker/show-case-datepicker.component.html:
--------------------------------------------------------------------------------
1 | show-case-datepicker works!
2 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/datepicker/show-case-datepicker/show-case-datepicker.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'doc-show-case-datepicker',
5 | imports: [],
6 | templateUrl: './show-case-datepicker.component.html',
7 | styleUrl: './show-case-datepicker.component.css',
8 | changeDetection: ChangeDetectionStrategy.OnPush,
9 | })
10 | export class ShowCaseDatepickerComponent {}
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dialog/dialog-test/dialog-test.component.css:
--------------------------------------------------------------------------------
1 | .dialog-test {
2 | padding: 12px;
3 | margin-top: 14px;
4 | }
5 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dialog/dialog-test/dialog-test.component.html:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dialog/dialog-test/dialog-test.component.ts:
--------------------------------------------------------------------------------
1 | import { ButtonComponent } from '@/ui/button/button.component';
2 | import { DialogCloseDirective } from '@/ui/dialog/dialog-close.directive';
3 | import { FormFieldComponent } from '@/ui/form-field/form-field.component';
4 | import { LabelComponent } from '@/ui/form-field/label.component';
5 | import { InputDirective } from '@/ui/input/input.directive';
6 | import { ChangeDetectionStrategy, Component } from '@angular/core';
7 |
8 | @Component({
9 | selector: 'doc-dialog-test',
10 | imports: [
11 | FormFieldComponent,
12 | InputDirective,
13 | ButtonComponent,
14 | DialogCloseDirective,
15 | LabelComponent,
16 | ],
17 | templateUrl: './dialog-test.component.html',
18 | styleUrl: './dialog-test.component.css',
19 | changeDetection: ChangeDetectionStrategy.OnPush,
20 | })
21 | export class DialogTestComponent {}
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dialog/show-case-dialog/show-case-dialog.component.css:
--------------------------------------------------------------------------------
1 | .section {
2 | display: flex;
3 | align-items: center;
4 | gap: 12px;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/dialog/show-case-dialog/show-case-dialog.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Dialog
4 |
5 | Alert
6 |
7 | Confirm
8 |
9 |
10 |
23 | Inline Confirm
24 |
25 |
26 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/divider/show-case-divider/show-case-divider.component.css:
--------------------------------------------------------------------------------
1 | .vertical {
2 | display: grid;
3 | grid-template-columns: repeat(3, 1fr);
4 | grid-gap: 16px;
5 |
6 | li {
7 | display: flex;
8 | }
9 |
10 | .divider {
11 | margin-left: 16px;
12 | }
13 | }
14 |
15 | p {
16 | margin: 12px 0;
17 | }
18 |
19 | .section-divider {
20 | margin: 32px 0;
21 | }
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/divider/show-case-divider/show-case-divider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { DividerComponent } from '@/ui/divider/divider.component';
3 |
4 | @Component({
5 | selector: 'doc-show-case-divider',
6 | imports: [DividerComponent],
7 | templateUrl: './show-case-divider.component.html',
8 | styleUrl: './show-case-divider.component.css',
9 | })
10 | export class ShowCaseDividerComponent {}
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/drawer/show-case-drawer/show-case-drawer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/drawer/show-case-drawer/show-case-drawer.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/drawer/show-case-drawer/show-case-drawer.component.html:
--------------------------------------------------------------------------------
1 | Open Drawer
2 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/font-icon/show-case-font-icon/show-case-font-icon.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/font-icon/show-case-font-icon/show-case-font-icon.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/font-icon/show-case-font-icon/show-case-font-icon.component.html:
--------------------------------------------------------------------------------
1 |
2 |
star
3 |
star
4 |
star
5 |
star
6 |
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/font-icon/show-case-font-icon/show-case-font-icon.component.ts:
--------------------------------------------------------------------------------
1 | import { FontIconComponent } from '@/ui/font-icon/font-icon.component';
2 | import { ChangeDetectionStrategy, Component } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'doc-show-case-font-icon',
6 | imports: [FontIconComponent],
7 | templateUrl: './show-case-font-icon.component.html',
8 | styleUrl: './show-case-font-icon.component.css',
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class ShowCaseFontIconComponent {}
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/form-field/show-case-form-field/show-case-form-field.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | margin: 0 auto;
3 | width: 250px;
4 | }
5 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/icon/show-case-icon/show-case-icon.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | gap: 8px;
4 | flex-direction: column;
5 |
6 | .header {
7 | display: flex;
8 | align-items: center;
9 | gap: 10px;
10 | }
11 |
12 | .body {
13 | display: flex;
14 | flex-wrap: wrap;
15 | gap: 10px;
16 | }
17 | }
18 |
19 | .bird {
20 | }
21 |
22 | .cat {
23 | }
24 |
25 | .heart {
26 | }
27 | .paw {
28 | }
29 |
30 | .squirrel {
31 | }
32 |
33 | .volleyball {
34 | }
35 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/icon/show-case-icon/show-case-icon.component.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
SVG Icons
14 |
15 |
16 | @for (icon of icons; track $index) {
17 |
23 | }
24 |
25 |
26 |
Font Icons
27 |
28 | @for (fontIcon of fontIcons; track $index) {
29 |
{{
30 | fontIcon
31 | }}
32 | }
33 |
34 |
35 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/input/show-case-input/show-case-input.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-direction: column;
4 | width: 250px;
5 | margin: 0 auto;
6 | gap: 20px;
7 |
8 | > * {
9 | width: 100%;
10 | }
11 | }
12 |
13 | .age-container {
14 | display: flex;
15 | align-items: center;
16 | gap: 6px;
17 | }
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/input/show-case-input/show-case-input.component.html:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/input/show-case-input/show-case-input.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, model } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { CheckboxComponent } from '@/ui/checkbox/checkbox.component';
4 | import { InputDirective } from '@/ui/input/input.directive';
5 |
6 | @Component({
7 | selector: 'doc-show-case-input',
8 | imports: [InputDirective, FormsModule, CheckboxComponent, FormsModule],
9 | templateUrl: './show-case-input.component.html',
10 | styleUrl: './show-case-input.component.css',
11 | })
12 | export class ShowCaseInputComponent {
13 | username = model();
14 | password = model();
15 | age = model(false);
16 | }
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/loader/show-case-loader/show-case-loader.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-wrap: wrap;
4 | justify-content: center;
5 | gap: 10px;
6 | }
7 |
8 | .infinite-loader {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | }
13 |
14 | app-card {
15 | width: 200px;
16 | }
17 |
18 | input,
19 | button {
20 | width: 100%;
21 | }
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/loader/show-case-loader/show-case-loader.component.html:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/local-storage/show-case-local-storage/show-case-local-storage.component.css:
--------------------------------------------------------------------------------
1 | .buttons {
2 | display: flex;
3 | align-items: center;
4 | gap: 10px;
5 | margin-bottom: 12px;
6 | }
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/local-storage/show-case-local-storage/show-case-local-storage.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Store current date
5 |
6 |
7 |
14 | Read the value
15 |
16 |
17 |
18 | {{ dateValue() }}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/multi-select/show-case-multi-select/show-case-multi-select.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/multi-select/show-case-multi-select/show-case-multi-select.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/otp-input/show-case-otp-input/show-case-otp-input.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: center;
6 | gap: 8px;
7 | }
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/otp-input/show-case-otp-input/show-case-otp-input.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Recieve Code
5 |
6 |
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/pagination/show-case-pagination/show-case-pagination.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/pagination/show-case-pagination/show-case-pagination.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/pagination/show-case-pagination/show-case-pagination.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/pagination/show-case-pagination/show-case-pagination.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { PaginationComponent } from '@/ui/pagination/pagination.component';
3 |
4 | @Component({
5 | selector: 'doc-show-case-pagination',
6 | imports: [PaginationComponent],
7 | templateUrl: './show-case-pagination.component.html',
8 | styleUrl: './show-case-pagination.component.css',
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class ShowCasePaginationComponent {
12 | currentPage = signal(1);
13 | totalPages = signal(10);
14 |
15 | setPage(page: number) {
16 | this.currentPage.set(page);
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/popover/show-case-popover/show-case-popover.component.css:
--------------------------------------------------------------------------------
1 | .popover {
2 | padding: 10px;
3 | width: 200px;
4 | }
5 | .popover-actions {
6 | margin-top: 10px;
7 | display: flex;
8 | gap: 6px;
9 | align-items: center;
10 | justify-content: end;
11 | }
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/popover/show-case-popover/show-case-popover.component.html:
--------------------------------------------------------------------------------
1 |
7 | Delete User
8 |
9 |
18 |
19 |
20 |
Are you sure you want to do this?
21 |
22 |
23 | Yes
24 |
25 |
31 | No
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/popover/show-case-popover/show-case-popover.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { ButtonComponent } from '@/ui/button/button.component';
3 | import { PopoverOriginDirective } from '@/ui/popover/popover-origin.directive';
4 | import { PopoverComponent } from '@/ui/popover/popover.component';
5 |
6 | @Component({
7 | selector: 'doc-show-case-popover',
8 | imports: [PopoverOriginDirective, ButtonComponent, PopoverComponent],
9 | templateUrl: './show-case-popover.component.html',
10 | styleUrl: './show-case-popover.component.css',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class ShowCasePopoverComponent {
14 | isOpen = signal(false);
15 | toggle() {
16 | this.isOpen.update((isOpen) => !isOpen);
17 | }
18 |
19 | deleteUser() {
20 | alert('User deleted');
21 | this.isOpen.set(false);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/progress-bar/show-case-progress-bar/show-case-progress-bar.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 12px;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/progress-bar/show-case-progress-bar/show-case-progress-bar.component.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
Indeterminate
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/progress-bar/show-case-progress-bar/show-case-progress-bar.component.ts:
--------------------------------------------------------------------------------
1 | import { Platform } from '@angular/cdk/platform';
2 | import { afterNextRender, Component, inject, signal } from '@angular/core';
3 | import { ProgressBarComponent } from '@/ui/progress-bar/progress-bar.component';
4 |
5 | @Component({
6 | selector: 'doc-show-case-progress-bar',
7 | imports: [ProgressBarComponent],
8 | templateUrl: './show-case-progress-bar.component.html',
9 | styleUrl: './show-case-progress-bar.component.css',
10 | })
11 | export class ShowCaseProgressBarComponent {
12 | value = signal(0);
13 | platform = inject(Platform);
14 |
15 | constructor() {
16 | afterNextRender(() => {
17 | setInterval(() => {
18 | this.value.update((val) => val + 10);
19 | }, 1000);
20 | });
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/radio-button/show-case-radio-button/show-case-radio-button.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/radio-button/show-case-radio-button/show-case-radio-button.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/radio-button/show-case-radio-button/show-case-radio-button.component.html:
--------------------------------------------------------------------------------
1 |
2 | @for (item of values; track $index) {
3 | {{ item.firstName }}
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/select/show-case-select/show-case-select.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/select/show-case-select/show-case-select.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/session-storage/show-case-session-storage/show-case-session-storage.component.css:
--------------------------------------------------------------------------------
1 | .buttons {
2 | display: flex;
3 | align-items: center;
4 | gap: 10px;
5 | margin-bottom: 12px;
6 | }
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/session-storage/show-case-session-storage/show-case-session-storage.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Store current date
5 |
6 |
7 |
14 | Read the value
15 |
16 |
17 |
18 | {{ dateValue() }}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/skeleton/show-case-skeleton/show-case-skeleton.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/skeleton/show-case-skeleton/show-case-skeleton.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/skeleton/show-case-skeleton/show-case-skeleton.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/skeleton/show-case-skeleton/show-case-skeleton.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { SkeletonComponent } from '@/ui/skeleton/skeleton.component';
3 |
4 | @Component({
5 | selector: 'doc-show-case-skeleton',
6 | imports: [SkeletonComponent],
7 | templateUrl: './show-case-skeleton.component.html',
8 | styleUrl: './show-case-skeleton.component.css',
9 | })
10 | export class ShowCaseSkeletonComponent {}
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/switch/show-case-switch/show-case-switch.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/switch/show-case-switch/show-case-switch.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/switch/show-case-switch/show-case-switch.component.html:
--------------------------------------------------------------------------------
1 | Turn On
2 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/switch/show-case-switch/show-case-switch.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {
3 | FormControl,
4 | FormsModule,
5 | ReactiveFormsModule,
6 | Validators,
7 | } from '@angular/forms';
8 | import { SwitchComponent } from '@/ui/switch/switch.component';
9 |
10 | @Component({
11 | selector: 'doc-show-case-switch',
12 | imports: [SwitchComponent, ReactiveFormsModule, FormsModule],
13 | templateUrl: './show-case-switch.component.html',
14 | styleUrl: './show-case-switch.component.css',
15 | })
16 | export class ShowCaseSwitchComponent {
17 | formControl = new FormControl(null, Validators.requiredTrue);
18 | }
19 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tab/lazy-tab/lazy-tab.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/tab/lazy-tab/lazy-tab.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tab/lazy-tab/lazy-tab.component.html:
--------------------------------------------------------------------------------
1 | This body is rendered on demand, enjoy! current time : {{ time }}
2 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tab/lazy-tab/lazy-tab.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'doc-lazy-tab',
5 | templateUrl: './lazy-tab.component.html',
6 | styleUrl: './lazy-tab.component.css',
7 | changeDetection: ChangeDetectionStrategy.OnPush,
8 | })
9 | export class LazyTabComponent {
10 | time = new Date();
11 | }
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tab/show-case-tab/show-case-tab.component.css:
--------------------------------------------------------------------------------
1 | .custom-label {
2 | display: flex;
3 | align-items: center;
4 | gap: 3px;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tab/show-case-tab/show-case-tab.component.html:
--------------------------------------------------------------------------------
1 |
2 | This is default tab enjoy!
3 |
4 |
5 |
9 |
10 | This is Custom Label Tab enjoy!
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tab/show-case-tab/show-case-tab.component.ts:
--------------------------------------------------------------------------------
1 | import { TabBodyDirective } from '@/ui/tab/tab-body.directive';
2 | import { TabGroupComponent } from '@/ui/tab/tab-group.component';
3 | import { TabHeaderDirective } from '@/ui/tab/tab-header.directive';
4 | import { TabComponent } from '@/ui/tab/tab.component';
5 | import { ChangeDetectionStrategy, Component } from '@angular/core';
6 | import { LazyTabComponent } from '../lazy-tab/lazy-tab.component';
7 |
8 | @Component({
9 | selector: 'doc-show-case-tab',
10 | imports: [
11 | TabGroupComponent,
12 | TabComponent,
13 | TabBodyDirective,
14 | TabHeaderDirective,
15 | LazyTabComponent,
16 | ],
17 | templateUrl: './show-case-tab.component.html',
18 | styleUrl: './show-case-tab.component.css',
19 | changeDetection: ChangeDetectionStrategy.OnPush,
20 | })
21 | export class ShowCaseTabComponent {}
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/table/show-case-table/show-case-table.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/examples/table/show-case-table/show-case-table.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/textarea/show-case-textarea/show-case-textarea.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | gap: 8px;
4 | flex-direction: column;
5 | }
6 |
7 | .resize-none {
8 | resize: none;
9 | }
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/textarea/show-case-textarea/show-case-textarea.component.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
17 |
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/textarea/show-case-textarea/show-case-textarea.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, model } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { TextareaDirective } from '@/ui/textarea/textarea.directive';
4 |
5 | @Component({
6 | selector: 'doc-show-case-textarea',
7 | imports: [TextareaDirective, FormsModule],
8 | templateUrl: './show-case-textarea.component.html',
9 | styleUrl: './show-case-textarea.component.css',
10 | })
11 | export class ShowCaseTextareaComponent {
12 | title = model();
13 |
14 | description = model();
15 | }
16 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/toast/show-case-toast/show-case-toast.component.css:
--------------------------------------------------------------------------------
1 | .option {
2 | width: 250px;
3 | }
4 |
5 | .configuration {
6 | flex-direction: column;
7 | flex-wrap: wrap;
8 | gap: 8px;
9 | }
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/toast/show-case-toast/show-case-toast.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Position
5 |
6 | @for (position of positions; track $index) {
7 |
8 | {{ position.name }}
9 |
10 | }
11 |
12 |
13 |
14 | Type
15 |
16 | @for (type of types; track $index) {
17 |
18 | {{ type }}
19 |
20 | }
21 |
22 |
23 |
24 |
Show Toast
25 |
26 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tooltip/show-case-tooltip/show-case-tooltip.component.css:
--------------------------------------------------------------------------------
1 | .tooltips {
2 | display: flex;
3 | align-items: center;
4 | gap: 10px;
5 | flex-wrap: wrap;
6 | }
7 |
8 | .custom-tooltip-content {
9 | display: flex;
10 | align-items: center;
11 | gap: 10px;
12 | }
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tooltip/show-case-tooltip/show-case-tooltip.component.html:
--------------------------------------------------------------------------------
1 |
35 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/tooltip/show-case-tooltip/show-case-tooltip.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ButtonComponent } from '@/ui/button/button.component';
3 | import { InputDirective } from '@/ui/input/input.directive';
4 | import { TooltipDirective } from '@/ui/tooltip/tooltip.directive';
5 |
6 | @Component({
7 | selector: 'doc-show-case-tooltip',
8 | imports: [TooltipDirective, ButtonComponent, InputDirective],
9 | templateUrl: './show-case-tooltip.component.html',
10 | styleUrl: './show-case-tooltip.component.css',
11 | })
12 | export class ShowCaseTooltipComponent {}
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/accordion-page/accordion-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/accordion-page/accordion-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/accordion-page/accordion-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/alert-page/alert-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/alert-page/alert-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/alert-page/alert-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/autocomplete-page/autocomplete-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/autocomplete-page/autocomplete-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/autocomplete-page/autocomplete-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/badge-page/badge-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/badge-page/badge-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/badge-page/badge-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/button-page/button-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/button-page/button-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/button-page/button-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/card-page/card-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/card-page/card-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/card-page/card-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/chart-at-page/chart-at-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/chart-at-page/chart-at-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/chart-at-page/chart-at-page.component.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/checkbox-page/checkbox-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/checkbox-page/checkbox-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/checkbox-page/checkbox-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/context-menu-page/context-menu-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/context-menu-page/context-menu-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/dark-mode-page/dark-mode-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/dark-mode-page/dark-mode-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/dark-mode-page/dark-mode-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/dialog-page/dialog-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/dialog-page/dialog-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/dialog-page/dialog-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/divider-page/divider-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/divider-page/divider-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/divider-page/divider-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/doc-container-page/doc-container-page.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .doc-container-page {
4 | @apply lg:flex lg:gap-10;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/doc-container-page/doc-container-page.component.html:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/doc-container-page/doc-container-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { RouterOutlet } from '@angular/router';
3 | import { DocSiblingNavigationsComponent } from '../doc-sibling-navigations/doc-sibling-navigations.component';
4 | import { SidebarComponent } from '../sidebar/sidebar.component';
5 |
6 | @Component({
7 | selector: 'doc-doc-container-page',
8 | imports: [SidebarComponent, RouterOutlet, DocSiblingNavigationsComponent],
9 | templateUrl: './doc-container-page.component.html',
10 | styleUrl: './doc-container-page.component.css',
11 | })
12 | export class DocContainerPageComponent {}
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/doc-sibling-navigations/doc-sibling-navigations.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .sibling-navigation {
4 | @apply flex h-12 flex-1 items-center justify-center gap-2 rounded-md border border-solid px-5 text-sm;
5 |
6 | @variant lg {
7 | @apply h-20 flex-1 px-10 text-base lg:w-[300px];
8 |
9 | &:first-child {
10 | @apply justify-start;
11 | }
12 | &:last-child {
13 | @apply justify-end;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/doc-sibling-navigations/doc-sibling-navigations.component.html:
--------------------------------------------------------------------------------
1 |
2 |
11 | arrow_back
12 | {{ prevRoute()?.name }}
13 |
14 |
23 | {{ nextRoute()?.name }}
24 | arrow_forward
25 |
26 |
27 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/drawer-page/drawer-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/drawer-page/drawer-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/drawer-page/drawer-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/form-field-page/form-field-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/form-field-page/form-field-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/form-field-page/form-field-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/header/header.component.css:
--------------------------------------------------------------------------------
1 | header {
2 | height: 56px;
3 | width: 100%;
4 | border-bottom: 1px solid var(--color-border);
5 | background: var(--color-background);
6 | }
7 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/home-page/home-page.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .home {
4 | @apply dark:!bg-black dark:!bg-none;
5 |
6 | background: url(/home-bg.png);
7 | background-size: cover;
8 | }
9 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/icon-page/icon-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/icon-page/icon-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/icon-page/icon-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/input-page/input-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/input-page/input-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/input-page/input-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/installation-page/installation-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/installation-page/installation-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/installation-page/installation-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | The minimum required Angular version for installation is
4 | >=19.0.0 .
5 |
6 | Install schematics
7 |
11 |
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/introduction-page/introduction-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/introduction-page/introduction-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/introduction-page/introduction-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { BlogPageComponent } from '../../blog/blog-page/blog-page.component';
3 | import { ProjectNameComponent } from '../../core/project-name/project-name.component';
4 |
5 | @Component({
6 | selector: 'doc-introduction-page',
7 | imports: [BlogPageComponent, ProjectNameComponent],
8 | templateUrl: './introduction-page.component.html',
9 | styleUrl: './introduction-page.component.css',
10 | })
11 | export class IntroductionPageComponent {}
12 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/loader-page/loader-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/loader-page/loader-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/loader-page/loader-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/local-storage-page/local-storage-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/local-storage-page/local-storage-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/otp-input-page/otp-input-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/otp-input-page/otp-input-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/otp-input-page/otp-input-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/outside-click-page/outside-click-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/outside-click-page/outside-click-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/outside-click-page/outside-click-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
9 |
10 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/pagination-page/pagination-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/pagination-page/pagination-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/pagination-page/pagination-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/popover-page/popover-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/popover-page/popover-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/popover-page/popover-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/progress-bar-page/progress-bar-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/progress-bar-page/progress-bar-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/progress-bar-page/progress-bar-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/radio-button-page/radio-button-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/radio-button-page/radio-button-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/radio-button-page/radio-button-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/select-page/select-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/select-page/select-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/select-page/select-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | For multiple selection, check
16 | Multi Select
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/session-storage-page/session-storage-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/session-storage-page/session-storage-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/sidebar/animation-links.ts:
--------------------------------------------------------------------------------
1 | import { SidebarGroup } from './sidebar-types';
2 |
3 | export const ANIMATION_LINKS: SidebarGroup = {
4 | name: 'Animations',
5 | sort: true,
6 | statics: [
7 | {
8 | name: 'Configuration',
9 | url: 'configuration',
10 | },
11 | ],
12 | children: [
13 | {
14 | name: 'Fade In',
15 | url: 'fade-in',
16 | },
17 | {
18 | name: 'Fade In Up',
19 | url: 'fade-in-up',
20 | },
21 | ],
22 | };
23 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/sidebar/guide-links.ts:
--------------------------------------------------------------------------------
1 | import { SidebarGroup } from './sidebar-types';
2 |
3 | export const GUIDES_LINKS: SidebarGroup = {
4 | name: 'Guides',
5 | sort: false,
6 | children: [
7 | {
8 | name: 'Introduction',
9 | url: 'introduction',
10 | },
11 |
12 | {
13 | name: 'Installation',
14 | url: 'installation',
15 | },
16 | {
17 | name: 'Usage',
18 | url: 'usage',
19 | },
20 | ],
21 | };
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/sidebar/pipe-links.ts:
--------------------------------------------------------------------------------
1 | import { SidebarGroup } from './sidebar-types';
2 |
3 | export const PIPE_LINKS: SidebarGroup = {
4 | name: 'Pipes',
5 | sort: true,
6 | statics: [
7 | {
8 | name: 'Configuration',
9 | url: 'configuration',
10 | },
11 | ],
12 | children: [
13 | {
14 | name: 'CharAt',
15 | url: 'char-at',
16 | },
17 | {
18 | name: 'Join',
19 | url: 'join',
20 | },
21 | {
22 | name: 'Map',
23 | url: 'map',
24 | },
25 | ],
26 | };
27 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/sidebar/sidebar-types.ts:
--------------------------------------------------------------------------------
1 | export interface SidebarGroup {
2 | name: string;
3 | children: SidebarLink[];
4 | sort?: boolean;
5 | statics?: SidebarLink[];
6 | }
7 |
8 | export interface SidebarLink {
9 | name: string;
10 | url: string;
11 | mode?: 'experimental';
12 | }
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/sidebar/sidebar.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | a {
4 | text-decoration: none;
5 | }
6 |
7 | .selected {
8 | @apply bg-slate-100 font-medium;
9 | }
10 |
11 | .sidebar {
12 | border-right: 1px solid var(--color-border);
13 | background: var(--color-background);
14 | height: 100vh;
15 | padding-bottom: 60px;
16 | @variant lg {
17 | height: calc(100vh - 56px);
18 | @apply sticky top-[56px];
19 | }
20 | }
21 |
22 | .in-progress {
23 | @apply pointer-events-none text-gray-400;
24 | }
25 |
26 | .sidebar-link {
27 | &:hover,
28 | &.selected {
29 | @apply font-medium;
30 | background: var(--color-accent);
31 | color: var(--color-accent-foreground);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { LowerCasePipe } from '@angular/common';
2 | import { Component, inject } from '@angular/core';
3 | import { RouterLink, RouterLinkActive } from '@angular/router';
4 | import { DividerComponent } from '../../../../../ngverse/src/lib/ui/divider/divider.component';
5 | import { MODULE_NAVIGATIONS } from '../../module-navigations';
6 | import { SidebarState } from './sidebar.state';
7 |
8 | @Component({
9 | selector: 'doc-sidebar',
10 | imports: [RouterLink, RouterLinkActive, LowerCasePipe, DividerComponent],
11 | templateUrl: './sidebar.component.html',
12 | styleUrl: './sidebar.component.css',
13 | })
14 | export class SidebarComponent {
15 | sidebarState = inject(SidebarState);
16 |
17 | navigations = [
18 | {
19 | name: 'Guides',
20 | url: '/doc/guides',
21 | },
22 | ...MODULE_NAVIGATIONS,
23 | ];
24 | }
25 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/skeleton-page/skeleton-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/skeleton-page/skeleton-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/skeleton-page/skeleton-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/switch-page/switch-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/switch-page/switch-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/switch-page/switch-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/tab-page/tab-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/tab-page/tab-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/tab-page/tab-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/table-page/table-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/table-page/table-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/table-page/table-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/table-page/table-page.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { BlueprintPageComponent } from '../../blueprint/blueprint-page/blueprint-page.component';
3 | import { ShowCaseComponent } from '../../blueprint/show-case/show-case.component';
4 | import { ShowCaseTableComponent } from '../../examples/table/show-case-table/show-case-table.component';
5 |
6 | @Component({
7 | selector: 'doc-table-page',
8 | imports: [BlueprintPageComponent, ShowCaseComponent, ShowCaseTableComponent],
9 | templateUrl: './table-page.component.html',
10 | styleUrl: './table-page.component.css',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class TablePageComponent {}
14 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/textarea-page/textarea-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/textarea-page/textarea-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/textarea-page/textarea-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/toast-page/toast-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/toast-page/toast-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/toast-page/toast-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/tooltip-page/tooltip-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/tooltip-page/tooltip-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/tooltip-page/tooltip-page.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/features/usage-page/usage-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/features/usage-page/usage-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/features/usage-page/usage-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | After installing , you
4 | can immediately start adding features to your app. Features are organized
5 | into different categories. they have their own schematics to work with. Pick
6 | the one to get started:
7 |
8 |
21 |
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/module-navigations.ts:
--------------------------------------------------------------------------------
1 | export interface ModuleNavigation {
2 | name: string;
3 | url: string;
4 | icon: string;
5 | }
6 |
7 | export const MODULE_NAVIGATIONS: ModuleNavigation[] = [
8 | {
9 | name: 'UI',
10 | url: '/doc/ui',
11 | icon: 'settop_component',
12 | },
13 | {
14 | name: 'Pipes',
15 | icon: 'valve',
16 | url: '/doc/pipes',
17 | },
18 | {
19 | name: 'Animations',
20 | url: '/doc/animations',
21 | icon: 'animation',
22 | },
23 | ];
24 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/animation-configuration-page/animation-configuration-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/animations/animation-configuration-page/animation-configuration-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/fade-in-page/fade-in-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/animations/fade-in-page/fade-in-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/fade-in-page/fade-in-page.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/fade-in-page/fade-in-page.component.ts:
--------------------------------------------------------------------------------
1 | import { fadeIn } from '@/animations/fade-in.animation';
2 | import { ChangeDetectionStrategy, Component } from '@angular/core';
3 | import { AnimationPageComponent } from '../../../animation-page/animation-page.component';
4 |
5 | @Component({
6 | selector: 'doc-fade-in-page',
7 | imports: [AnimationPageComponent],
8 | templateUrl: './fade-in-page.component.html',
9 | styleUrl: './fade-in-page.component.css',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export class FadeInPageComponent {
13 | FADE_IN = fadeIn;
14 | }
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/fade-in-up-page/fade-in-up-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/animations/fade-in-up-page/fade-in-up-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/fade-in-up-page/fade-in-up-page.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/animations/fade-in-up-page/fade-in-up-page.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { fadeInUp } from '@ngverse/motion/animatecss';
3 | import { AnimationPageComponent } from '../../../animation-page/animation-page.component';
4 |
5 | @Component({
6 | selector: 'doc-fade-in-up-page',
7 | imports: [AnimationPageComponent],
8 | templateUrl: './fade-in-up-page.component.html',
9 | styleUrl: './fade-in-up-page.component.css',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export class FadeInUpPageComponent {
13 | FADE_IN_UP = fadeInUp;
14 | }
15 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/datepicker-page/datepicker-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/datepicker-page/datepicker-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/datepicker-page/datepicker-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/pipes/join-page/join-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/pipes/join-page/join-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/pipes/join-page/join-page.component.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/pipes/map-page/map-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/pipes/map-page/map-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/pipes/map-page/map-page.component.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/pipes/pipe-configuration-page/pipe-configuration-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/pipes/pipe-configuration-page/pipe-configuration-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/ui/font-icon-page/font-icon-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/ui/font-icon-page/font-icon-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/ui/font-icon-page/font-icon-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/ui/multi-select-page/multi-select-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/ui/multi-select-page/multi-select-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/ui/multi-select-page/multi-select-page.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | For single selection, check
16 | Select
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/projects/docs/src/app/pages/ui/ui-configuration-page/ui-configuration-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/docs/src/app/pages/ui/ui-configuration-page/ui-configuration-page.component.css
--------------------------------------------------------------------------------
/projects/docs/src/main.server.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { AppComponent } from './app/app.component';
3 | import { config } from './app/app.config.server';
4 |
5 | const bootstrap = () => bootstrapApplication(AppComponent, config);
6 |
7 | export default bootstrap;
8 |
--------------------------------------------------------------------------------
/projects/docs/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { appConfig } from './app/app.config';
3 | import { AppComponent } from './app/app.component';
4 |
5 | bootstrapApplication(AppComponent, appConfig).catch((err) =>
6 | console.error(err)
7 | );
8 |
--------------------------------------------------------------------------------
/projects/docs/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import 'tailwindcss';
3 | @plugin "@tailwindcss/typography";
4 | @import '@angular/cdk/overlay-prebuilt.css';
5 | @import './docsearch.css';
6 | @import './highlight-dark.css';
7 | @import './highlight-light.css';
8 | @import '../../ngverse/src/lib/ngverse';
9 | @import '@angular/cdk/overlay-prebuilt.css';
10 |
11 | html,
12 | body {
13 | margin: 0;
14 | padding: 0;
15 | font-family: 'Roboto', sans-serif;
16 | }
17 | .content-area {
18 | max-width: 1440px;
19 | margin: 0 auto;
20 | width: 100%;
21 | }
22 |
--------------------------------------------------------------------------------
/projects/docs/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/app",
7 | "types": ["node"]
8 | },
9 | "files": ["src/main.ts", "src/main.server.ts", "src/server.ts"],
10 | "include": ["src/**/*.d.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/projects/docs/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/projects/ngverse/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../dist/@ngverse/ui",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | },
7 | "assets": ["src/lib"]
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/schematics/animation/schema.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json-schema.org/schema",
3 | "$id": "SchematicsElement",
4 | "title": "Generate Element Schema",
5 | "type": "object",
6 | "properties": {
7 | "name": {
8 | "description": "The name of the pipe.",
9 | "type": "string",
10 | "$default": {
11 | "$source": "argv",
12 | "index": 0
13 | }
14 | },
15 | "replace": {
16 | "type": "boolean",
17 | "default": false,
18 | "description": "Replaces existing files."
19 | },
20 | "project": {
21 | "type": "string",
22 | "description": "The name of the project.",
23 | "$default": {
24 | "$source": "projectName"
25 | }
26 | },
27 | "path": {
28 | "type": "string",
29 | "description": "the path to put the generated element"
30 | }
31 | },
32 | "required": ["name"]
33 | }
34 |
--------------------------------------------------------------------------------
/projects/ngverse/schematics/animation/schema.ts:
--------------------------------------------------------------------------------
1 | export interface Schema {
2 | // The name of the pipe.
3 | name: string;
4 |
5 | project: string;
6 |
7 | replace?: boolean;
8 |
9 | path?: string;
10 | }
11 |
--------------------------------------------------------------------------------
/projects/ngverse/schematics/collection.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
3 | "schematics": {
4 | "ui": {
5 | "description": "Generate a component in the project.",
6 | "factory": "./ui/index#ui",
7 | "schema": "./ui/schema.json"
8 | },
9 | "pipe": {
10 | "description": "Generate a pipe in the project.",
11 | "factory": "./pipe/index#pipe",
12 | "schema": "./pipe/schema.json"
13 | },
14 | "animation": {
15 | "description": "Generate a animation in the project.",
16 | "factory": "./animation/index#animation",
17 | "schema": "./animation/schema.json"
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/projects/ngverse/schematics/pipe/schema.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json-schema.org/schema",
3 | "$id": "SchematicsElement",
4 | "title": "Generate Element Schema",
5 | "type": "object",
6 | "properties": {
7 | "name": {
8 | "description": "The name of the pipe.",
9 | "type": "string",
10 | "$default": {
11 | "$source": "argv",
12 | "index": 0
13 | }
14 | },
15 | "replace": {
16 | "type": "boolean",
17 | "default": false,
18 | "description": "Replaces existing files."
19 | },
20 | "project": {
21 | "type": "string",
22 | "description": "The name of the project.",
23 | "$default": {
24 | "$source": "projectName"
25 | }
26 | },
27 | "path": {
28 | "type": "string",
29 | "description": "the path to put the generated element"
30 | }
31 | },
32 | "required": ["name"]
33 | }
34 |
--------------------------------------------------------------------------------
/projects/ngverse/schematics/pipe/schema.ts:
--------------------------------------------------------------------------------
1 | export interface Schema {
2 | // The name of the pipe.
3 | name: string;
4 |
5 | project: string;
6 |
7 | replace?: boolean;
8 |
9 | path?: string;
10 | }
11 |
--------------------------------------------------------------------------------
/projects/ngverse/schematics/ui/schema.ts:
--------------------------------------------------------------------------------
1 | export interface Schema {
2 | // The name of the component.
3 | name: string;
4 |
5 | project: string;
6 |
7 | replace?: boolean;
8 |
9 | prefix?: string;
10 |
11 | path?: string;
12 |
13 | includeTests?: string;
14 | }
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/pipes/char-at.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | /**
4 | * A pipe that returns the character at the specified index in the given string.
5 | */
6 | @Pipe({
7 | name: 'charAt',
8 | })
9 | export class CharAtPipe implements PipeTransform {
10 | /**
11 | * Returns the character at the specified index in the given string.
12 | *
13 | * If the string is null or undefined, the function returns undefined.
14 | *
15 | * If the index is out of bounds, the function returns undefined.
16 | *
17 | * @param value The string to get the character from.
18 | * @param index The index of the character to get, defaults to 0.
19 | * @returns The character at the specified index, or undefined if the string is null or undefined, or the index is out of bounds.
20 | */
21 | transform(value: string | undefined | null, index = 0): string | undefined {
22 | return value?.charAt(index) ?? undefined;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/pipes/join.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | @Pipe({
4 | name: 'join',
5 | })
6 | export class JoinPipe implements PipeTransform {
7 | transform(input: T[], character = ''): string {
8 | return input.join(character);
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/pipes/map.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | type MAP_CALLBACK = string | ((value: T, index: number) => unknown);
4 |
5 | @Pipe({
6 | name: 'map',
7 | })
8 | export class MapPipe implements PipeTransform {
9 | transform(input: T[], fn: MAP_CALLBACK): unknown[] {
10 | if (typeof fn === 'string') {
11 | return input.map((v) => (v as Record)[fn]);
12 | }
13 | return input.map(fn);
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/pipes/order-by.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import orderBy from 'lodash/orderBy';
3 | @Pipe({
4 | name: 'orderBy',
5 | })
6 | export class OrderByPipe implements PipeTransform {
7 | transform(value: T[], field?: string) {
8 | return orderBy(value, field);
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/accordion/accordion-body.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-accordion-body',
5 | template: ` `,
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | })
8 | export class AccordionBodyComponent {}
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/accordion/accordion-header.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-accordion-header',
5 | template: ` `,
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | })
8 | export class AccordionHeaderComponent {}
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/accordion/accordion-item.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/accordion/accordion-item.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/accordion/accordion.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/accordion/accordion.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/accordion/accordion.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/accordion/accordion.component.ts:
--------------------------------------------------------------------------------
1 | import { CdkAccordion } from '@angular/cdk/accordion';
2 | import { ChangeDetectionStrategy, Component } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'app-accordion',
6 | templateUrl: './accordion.component.html',
7 | styleUrl: './accordion.component.css',
8 | changeDetection: ChangeDetectionStrategy.OnPush,
9 | })
10 | export class AccordionComponent extends CdkAccordion {}
11 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert-body.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { AlertBodyComponent } from './alert-body.component';
4 |
5 | describe('AlertBodyComponent', () => {
6 | let component: AlertBodyComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | imports: [AlertBodyComponent],
12 | providers: [provideExperimentalZonelessChangeDetection()],
13 | }).compileComponents();
14 |
15 | fixture = TestBed.createComponent(AlertBodyComponent);
16 | component = fixture.componentInstance;
17 | });
18 |
19 | it('should create', () => {
20 | expect(component).toBeTruthy();
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert-body.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-alert-body',
5 | imports: [],
6 | template: ` `,
7 | changeDetection: ChangeDetectionStrategy.OnPush,
8 | })
9 | export class AlertBodyComponent {}
10 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert-header.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { AlertHeaderComponent } from './alert-header.component';
5 |
6 | describe('AlertHeaderComponent', () => {
7 | let component: AlertHeaderComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | imports: [AlertHeaderComponent],
13 | providers: [provideExperimentalZonelessChangeDetection()],
14 | }).compileComponents();
15 |
16 | fixture = TestBed.createComponent(AlertHeaderComponent);
17 | component = fixture.componentInstance;
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert-header.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-alert-header',
5 | imports: [],
6 | template: ` `,
7 | styles: `
8 | :host {
9 | font-weight: 500;
10 | display: block;
11 | }
12 | `,
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | })
15 | export class AlertHeaderComponent {}
16 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | :host {
4 | padding: 16px;
5 | display: block;
6 | border-radius: 6px;
7 | &.fill {
8 | &.success {
9 | @apply bg-green-600 text-white;
10 | }
11 |
12 | &.danger {
13 | @apply bg-red-600 text-white;
14 | }
15 | &.default {
16 | @apply bg-slate-950 text-white;
17 | }
18 |
19 | &.warning {
20 | @apply bg-amber-600 text-white;
21 | }
22 | }
23 |
24 | &.outline {
25 | background: transparent;
26 | @apply border;
27 | &.success {
28 | @apply border-green-600 text-green-600;
29 | }
30 |
31 | &.danger {
32 | @apply border-red-600 text-red-600;
33 | }
34 | &.default {
35 | @apply border-slate-300;
36 | }
37 |
38 | &.warning {
39 | @apply border-amber-600 text-amber-600;
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/alert/alert.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 |
3 | type ALERT_TYPES = 'success' | 'danger' | 'warning' | 'default';
4 | type ALERT_VARIANT_TYPES = 'fill' | 'outline';
5 |
6 | @Component({
7 | selector: 'app-alert',
8 | templateUrl: './alert.component.html',
9 | styleUrl: './alert.component.css',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | host: {
12 | role: 'alert',
13 | '[class]': '[type(), variant()]',
14 | },
15 | })
16 | export class AlertComponent {
17 | type = input('default');
18 | variant = input('fill');
19 | }
20 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/autocomplete/autocomplete-item/autocomplete-item.component.css:
--------------------------------------------------------------------------------
1 | .autocomplete-item {
2 | display: block;
3 | width: 100%;
4 | text-align: left;
5 | padding: var(--option-padding);
6 | cursor: var(--option-cursor);
7 |
8 | &:hover:not(.listbox-item-active, .option-disabled) {
9 | background: var(--option-hover-bg-color);
10 | }
11 |
12 | &.listbox-item-active {
13 | background: var(--color-primary-color);
14 | color: white;
15 | }
16 |
17 | &.option-disabled {
18 | color: var(--option-disabled-color);
19 | }
20 |
21 | &.selected,
22 | &.is-active {
23 | background: var(--color-accent);
24 | color: var(--color-accent-foreground);
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/autocomplete/autocomplete-item/autocomplete-item.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/autocomplete/autocomplete-item/autocomplete-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Highlightable } from '@angular/cdk/a11y';
2 | import {
3 | ChangeDetectionStrategy,
4 | Component,
5 | ElementRef,
6 | inject,
7 | input,
8 | signal,
9 | } from '@angular/core';
10 |
11 | @Component({
12 | selector: 'app-autocomplete-item',
13 | templateUrl: './autocomplete-item.component.html',
14 | styleUrl: './autocomplete-item.component.css',
15 | changeDetection: ChangeDetectionStrategy.OnPush,
16 | })
17 | export class AutocompleteItemComponent implements Highlightable {
18 | isActive = signal(false);
19 | value = input.required();
20 | host = inject>(ElementRef);
21 |
22 | select() {
23 | console.log('HELLI');
24 | }
25 |
26 | setActiveStyles(): void {
27 | this.isActive.set(true);
28 | }
29 | setInactiveStyles(): void {
30 | this.isActive.set(false);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/autocomplete/autocomplete.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 | }
4 |
5 | .input-field {
6 | display: flex;
7 | justify-content: space-between;
8 | align-items: center;
9 | gap: 10px;
10 | background: transparent;
11 | border: var(--border);
12 | border-radius: 6px;
13 | padding: 4px 10px;
14 | width: 200px;
15 |
16 | &:disabled {
17 | cursor: not-allowed;
18 | background: var(--color-disabled-color);
19 | }
20 | }
21 |
22 | .select-label {
23 | white-space: nowrap;
24 | overflow: hidden;
25 | text-overflow: ellipsis;
26 | }
27 |
28 | .select-options {
29 | max-height: 200px;
30 | min-width: 200px;
31 | overflow: auto;
32 | &:focus {
33 | outline: none;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/autocomplete/autocomplete.component.html:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/badge/badge.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 |
3 | .badge {
4 | @apply absolute bottom-full left-full -my-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-600 text-xs font-medium text-white;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/badge/badge.component.html:
--------------------------------------------------------------------------------
1 | @if (!hide()) {
2 |
3 | {{ value() }}
4 |
5 | }
6 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/button/button-loader.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { ButtonLoaderComponent } from './button-loader.component';
5 |
6 | describe('ButtonComponent', () => {
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(() => {
10 | TestBed.configureTestingModule({
11 | imports: [ButtonLoaderComponent],
12 | providers: [provideExperimentalZonelessChangeDetection()],
13 | });
14 | fixture = TestBed.createComponent(ButtonLoaderComponent);
15 | });
16 |
17 | it('should create', () => {
18 | expect(fixture).toBeTruthy();
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/button/button.component.html:
--------------------------------------------------------------------------------
1 | @if (loading()) {
2 |
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/card/card.component.css:
--------------------------------------------------------------------------------
1 | @reference "tailwindcss";
2 | :host {
3 | &.outlined {
4 | @apply rounded-md border border-solid;
5 | border-color: var(--color-border);
6 | }
7 | &.surface {
8 | background: var(--color-surface);
9 | }
10 | &.shadow {
11 | @apply shadow-md shadow-gray-300;
12 | }
13 |
14 | &.gap {
15 | @apply p-3;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/card/card.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/card/card.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-card',
5 | imports: [],
6 | templateUrl: './card.component.html',
7 | styleUrl: './card.component.css',
8 | changeDetection: ChangeDetectionStrategy.OnPush,
9 | host: {
10 | '[class.surface]': 'surface()',
11 | '[class.outlined]': 'outlined()',
12 | '[class.shadow]': 'shadow()',
13 | '[class.gap]': 'gap()',
14 | },
15 | })
16 | export class CardComponent {
17 | surface = input(false);
18 | outlined = input(true);
19 | shadow = input(false);
20 | gap = input(true);
21 | }
22 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/checkbox/checkbox.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/checkbox/checkbox.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/checkbox/checkbox.component.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
{{ value() ? 'check_box' : 'check_box_outline_blank' }}
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/context-menu/context-menu-item.directive.ts:
--------------------------------------------------------------------------------
1 | import { CdkMenuItem } from '@angular/cdk/menu';
2 | import { Directive } from '@angular/core';
3 |
4 | @Directive({
5 | selector: '[appContextMenuItem]',
6 | hostDirectives: [
7 | {
8 | directive: CdkMenuItem,
9 | inputs: ['cdkMenuItemDisabled:disabled'],
10 | },
11 | ],
12 | host: {
13 | class:
14 | 'w-full text-left p-2.5 hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-hidden',
15 | },
16 | })
17 | export class ContextMenuItemDirective {}
18 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/context-menu/context-menu-trigger.directive.ts:
--------------------------------------------------------------------------------
1 | import { CdkContextMenuTrigger } from '@angular/cdk/menu';
2 | import { Directive } from '@angular/core';
3 |
4 | @Directive({
5 | selector: '[appContextMenuTrigger]',
6 | exportAs: 'appContextMenuTrigger',
7 | hostDirectives: [
8 | {
9 | directive: CdkContextMenuTrigger,
10 | inputs: ['cdkContextMenuTriggerFor:appContextMenuTrigger'],
11 | },
12 | ],
13 | })
14 | export class ContextMenuTriggerDirective {}
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dark-mode/dark-mode-toggle.component.css:
--------------------------------------------------------------------------------
1 | .dark-mode-icon {
2 | width: 18px;
3 | height: 18px;
4 | display: inline-block;
5 | display: inline-flex;
6 | align-items: center;
7 | justify-content: center;
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dark-mode/dark-mode-toggle.component.html:
--------------------------------------------------------------------------------
1 |
10 | {{ isEnabled() ? 'dark_mode' : 'light_mode' }}
11 |
12 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dark-mode/dark-mode-toggle.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { DarkModeToggleComponent } from './dark-mode-toggle.component';
5 |
6 | describe('DarkModeToggleComponent', () => {
7 | let component: DarkModeToggleComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | imports: [DarkModeToggleComponent],
13 | providers: [provideExperimentalZonelessChangeDetection()],
14 | }).compileComponents();
15 |
16 | fixture = TestBed.createComponent(DarkModeToggleComponent);
17 | component = fixture.componentInstance;
18 | fixture.detectChanges();
19 | });
20 |
21 | it('should create', () => {
22 | expect(component).toBeTruthy();
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dark-mode/dark-mode-toggle.component.ts:
--------------------------------------------------------------------------------
1 | import { ButtonComponent } from '@/ui/button/button.component';
2 | import { FontIconComponent } from '@/ui/font-icon/font-icon.component';
3 | import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
4 | import { DarkModeService } from './dark-mode.service';
5 |
6 | @Component({
7 | selector: 'app-dark-mode-toggle',
8 | imports: [ButtonComponent, FontIconComponent],
9 | templateUrl: './dark-mode-toggle.component.html',
10 | styleUrl: './dark-mode-toggle.component.css',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class DarkModeToggleComponent {
14 | private readonly darkModeService = inject(DarkModeService);
15 | isEnabled = this.darkModeService.isEnabled;
16 |
17 | toggleDarkMode() {
18 | this.darkModeService.toggle();
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dark-mode/dark-mode.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { DarkModeService } from './dark-mode.service';
5 |
6 | describe('DarkModeService', () => {
7 | let service: DarkModeService;
8 |
9 | beforeEach(() => {
10 | TestBed.configureTestingModule({
11 | providers: [provideExperimentalZonelessChangeDetection()],
12 | });
13 | service = TestBed.inject(DarkModeService);
14 | });
15 |
16 | it('should be created', () => {
17 | expect(service).toBeTruthy();
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/adapter/date.adapter.ts:
--------------------------------------------------------------------------------
1 | export interface DpDateAdapter {
2 | getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
3 |
4 | daysInMonth(date: T): number;
5 |
6 | createDate(year: number, month: number, date: number): T;
7 |
8 | clone(date: T): T;
9 |
10 | startOfMonth(date: T): T;
11 |
12 | endOfMonth(date: T): T;
13 |
14 | startOfWeek(date: T): T;
15 |
16 | endOfWeek(date: T): T;
17 |
18 | month(date: T): number;
19 |
20 | addDay(date: T, day: number): T;
21 |
22 | currentDate(): T;
23 |
24 | isSame(date1: T, date2: T): boolean;
25 |
26 | isBefore(date1: T, date2: T): boolean;
27 |
28 | format(date: T, format: string): string;
29 | }
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/adapter/date.token.ts:
--------------------------------------------------------------------------------
1 | import { InjectionToken, inject } from '@angular/core';
2 | import { DpDateAdapter } from './date.adapter';
3 |
4 | const DP_DATE_ADAPTER_TOKEN = new InjectionToken>(
5 | 'DP_DATE_ADAPTER_TOKEN'
6 | );
7 |
8 | export const injectDpDateAdapter = () =>
9 | inject>(DP_DATE_ADAPTER_TOKEN);
10 |
11 | export const provideDpDateAdapter = (adapter: DpDateAdapter) => ({
12 | provide: DP_DATE_ADAPTER_TOKEN,
13 | useValue: adapter,
14 | });
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/calendar/calendar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/datepicker/calendar/calendar.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/calendar/calendar.component.html:
--------------------------------------------------------------------------------
1 |
2 | @switch (viewType()) {
3 | @case ('day') {
4 |
9 | }
10 | @case ('month') {
11 |
16 | }
17 | @case ('year') {
18 |
22 | }
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/core/day-cell.ts:
--------------------------------------------------------------------------------
1 | export class DayCell {
2 | constructor(
3 | public display: string,
4 | public date: Date,
5 | public isInMonth: boolean,
6 | public value: number
7 | ) {}
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/datepicker/datepicker.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/datepicker/datepicker/datepicker.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/datepicker/datepicker.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/datepicker/datepicker.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { CalendarComponent } from '../calendar/calendar.component';
3 |
4 | @Component({
5 | selector: 'app-datepicker',
6 | templateUrl: './datepicker.component.html',
7 | styleUrl: './datepicker.component.css',
8 | imports: [CalendarComponent],
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class DatepickerComponent {}
12 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/day-view/day-view.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/datepicker/day-view/day-view.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/day-view/day-view.component.html:
--------------------------------------------------------------------------------
1 |
2 | Month
3 | Year
4 |
5 |
6 |
7 |
8 | @for (day of weeks; track $index) {
9 | {{ day }}
10 | }
11 |
12 |
13 |
14 |
15 | {{ day() }}
16 |
17 | @for (weekDay of weekDays(); track $index) {
18 |
19 | @for (_day of weekDay; track $index) {
20 |
24 |
25 | {{ _day.display }}
26 |
27 |
28 | }
29 |
30 | }
31 |
32 |
33 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/dayjs/dayjs-date.adapter.token.ts:
--------------------------------------------------------------------------------
1 | import { DpDayjsDateAdapter } from './dayjs-date.adapter';
2 |
3 | export function withDpDayjsDateAdapter() {
4 | return new DpDayjsDateAdapter();
5 | }
6 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/month-view/month-view.component.css:
--------------------------------------------------------------------------------
1 | .prev {
2 | background: gray;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/month-view/month-view.component.html:
--------------------------------------------------------------------------------
1 |
2 | Year
3 |
4 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/month-view/month-view.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChangeDetectionStrategy,
3 | Component,
4 | input,
5 | output,
6 | } from '@angular/core';
7 | import { ViewType } from '../types/view-type';
8 |
9 | @Component({
10 | selector: 'app-month-view',
11 | imports: [],
12 | templateUrl: './month-view.component.html',
13 | styleUrl: './month-view.component.css',
14 | changeDetection: ChangeDetectionStrategy.OnPush,
15 | })
16 | export class MonthViewComponent {
17 | changeView = output();
18 | monthSelected = output();
19 | month = input();
20 | }
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/types/view-type.ts:
--------------------------------------------------------------------------------
1 | export type ViewType = 'day' | 'month' | 'year';
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/year-view/year-view.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/datepicker/year-view/year-view.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/year-view/year-view.component.html:
--------------------------------------------------------------------------------
1 | year-view works!
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/datepicker/year-view/year-view.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChangeDetectionStrategy,
3 | Component,
4 | input,
5 | output,
6 | } from '@angular/core';
7 |
8 | @Component({
9 | selector: 'app-year-view',
10 | imports: [],
11 | templateUrl: './year-view.component.html',
12 | styleUrl: './year-view.component.css',
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | })
15 | export class YearViewComponent {
16 | yearSelected = output();
17 | year = input();
18 | }
19 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/alert-dialog/alert-dialog.component.css:
--------------------------------------------------------------------------------
1 | .alert {
2 | background: var(--color-background);
3 | border-radius: 6px;
4 | border: var(--border);
5 | box-shadow: var(--color-shadow);
6 | min-width: 300px;
7 | padding: 16px;
8 | }
9 |
10 | .alert-title {
11 | font-size: 18px;
12 | font-weight: 500;
13 | }
14 |
15 | .alert-actions {
16 | display: flex;
17 | margin-top: 10px;
18 | justify-content: end;
19 | align-items: center;
20 | }
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/alert-dialog/alert-dialog.component.html:
--------------------------------------------------------------------------------
1 |
5 |
{{ title }}
6 |
{{ description }}
7 |
8 |
9 | {{ buttonLabel }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/confirm-dialog/confirm-dialog.component.css:
--------------------------------------------------------------------------------
1 | .confirm {
2 | background: var(--color-background);
3 | border-radius: 6px;
4 | border: var(--border);
5 | box-shadow: var(--color-shadow);
6 | min-width: 300px;
7 | padding: 16px;
8 | }
9 |
10 | .confirm-title {
11 | font-size: 18px;
12 | font-weight: 500;
13 | }
14 |
15 | .confirm-actions {
16 | display: flex;
17 | margin-top: 10px;
18 | justify-content: end;
19 | align-items: center;
20 | gap: 6px;
21 | }
22 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/confirm-dialog/confirm-dialog.component.html:
--------------------------------------------------------------------------------
1 |
5 |
{{ title }}
6 |
{{ description }}
7 |
8 |
15 | {{ yesLabel }}
16 |
17 |
24 | {{ noLabel }}
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/confirm.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject, input, output } from '@angular/core';
2 | import { DialogService } from './dialog.service';
3 | import { ConfirmDialogOptions } from './confirm-dialog/confirm-dialog.component';
4 |
5 | @Directive({
6 | selector: '[appConfirm]',
7 | host: {
8 | '(click)': 'open()',
9 | },
10 | })
11 | export class ConfirmDirective {
12 | confirmOptions = input.required();
13 |
14 | approved = output();
15 | rejected = output();
16 |
17 | private dialogService = inject(DialogService);
18 |
19 | open() {
20 | this.dialogService
21 | .confirm(this.confirmOptions())
22 | .closed.subscribe((result) => {
23 | if (result) {
24 | this.approved.emit();
25 | } else {
26 | this.rejected.emit();
27 | }
28 | });
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/dialog-close.directive.ts:
--------------------------------------------------------------------------------
1 | import { DialogRef } from '@angular/cdk/dialog';
2 | import { Directive, inject, input } from '@angular/core';
3 |
4 | @Directive({
5 | selector: '[appDialogClose]',
6 | host: {
7 | '(click)': 'onClick()',
8 | },
9 | })
10 | export class DialogCloseDirective {
11 | dialogRef = inject(DialogRef);
12 |
13 | value = input(undefined, { alias: 'appDialogClose' });
14 |
15 | onClick() {
16 | this.dialogRef.close(this.value());
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/dialog/dialog.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/dialog/dialog/dialog.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/dialog/dialog/dialog.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @if (title) {
4 |
{{ title }}
5 | }
6 | @if (showClose) {
7 |
17 | close
18 |
19 | }
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/divider/divider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-divider',
5 | imports: [],
6 | template: ``,
7 | changeDetection: ChangeDetectionStrategy.OnPush,
8 | styles: `
9 | :host {
10 | display: block;
11 | background-color: var(--color-divider);
12 | height: 1px;
13 | width: 100%;
14 |
15 | &.vertical {
16 | height: 100%;
17 | width: 1px;
18 | }
19 | }
20 | `,
21 | host: {
22 | role: 'separator',
23 | '[class.vertical]': 'vertical()',
24 | '[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"',
25 | },
26 | })
27 | export class DividerComponent {
28 | vertical = input(false);
29 | }
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/drawer/drawer-close-icon.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-drawer-close-icon',
5 | styles: [
6 | `
7 | :host {
8 | display: flex;
9 | }
10 | `,
11 | ],
12 | template: `
24 |
25 |
26 | `,
27 | changeDetection: ChangeDetectionStrategy.OnPush,
28 | })
29 | export class DrawerCloseIconComponent {}
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/drawer/drawer-close.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject, input } from '@angular/core';
2 | import { DrawerRef } from './drawer-ref';
3 |
4 | @Directive({
5 | selector: '[appDrawerClose]',
6 | host: {
7 | '(click)': 'close()',
8 | },
9 | })
10 | export class DrawerCloseDirective {
11 | private readonly drawerRef = inject(DrawerRef);
12 | value = input(undefined, { alias: 'appDrawerClose' });
13 |
14 | close() {
15 | const value = this.value();
16 | this.drawerRef.close(value);
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/drawer/drawer-ref.ts:
--------------------------------------------------------------------------------
1 | import { DialogRef } from '@angular/cdk/dialog';
2 | import { InjectionToken } from '@angular/core';
3 | import { DrawerComponent } from './drawer.component';
4 | export const DRAWER_DATA = new InjectionToken('DRAWER_DATA');
5 | export class DrawerRef {
6 | private dialogRef: DialogRef;
7 |
8 | get closed() {
9 | return this.dialogRef.closed;
10 | }
11 |
12 | constructor(dialogRef: DialogRef) {
13 | this.dialogRef = dialogRef;
14 | }
15 |
16 | close(value?: unknown) {
17 | const instance = this.dialogRef.componentInstance as DrawerComponent;
18 | instance.onExit.subscribe(() => {
19 | this.dialogRef.close(value);
20 | });
21 | instance.exit();
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/drawer/drawer.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | height: 100vh;
4 | width: auto;
5 | background: var(--color-background);
6 | color: var(--color-foreground);
7 | padding: 16px;
8 | overflow: auto;
9 | }
10 |
11 | .drawer-title {
12 | margin: 0;
13 | padding: 0;
14 | font-size: 1rem;
15 | }
16 |
17 | .close-button {
18 | margin-left: auto;
19 | background: transparent;
20 | border: 0;
21 | cursor: pointer;
22 | }
23 |
24 | .drawer-header {
25 | font-weight: bold;
26 | margin-bottom: 10px;
27 | display: flex;
28 | align-items: center;
29 | }
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/drawer/drawer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @if (title()) {
4 |
5 | {{ title() }}
6 |
7 | }
8 |
9 |
19 | close
20 |
21 |
22 |
23 |
24 |
25 |
26 |
41 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/font-icon/font-icon.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { FontIconComponent } from './font-icon.component';
5 |
6 | describe('FontIconComponent', () => {
7 | let component: FontIconComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | imports: [FontIconComponent],
13 | providers: [provideExperimentalZonelessChangeDetection()],
14 | }).compileComponents();
15 |
16 | fixture = TestBed.createComponent(FontIconComponent);
17 | component = fixture.componentInstance;
18 | fixture.detectChanges();
19 | });
20 |
21 | it('should create', () => {
22 | expect(component).toBeTruthy();
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/form-field/error.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { fadeInOnEnter, fadeOutOnLeave } from '@ngverse/motion/animatecss';
3 |
4 | @Component({
5 | selector: 'app-error',
6 | template: ' ',
7 | changeDetection: ChangeDetectionStrategy.OnPush,
8 | animations: [
9 | fadeInOnEnter({ duration: 250 }),
10 | fadeOutOnLeave({ duration: 250 }),
11 | ],
12 | host: {
13 | '[@fadeInOnEnter]': 'true',
14 | '[@fadeOutOnLeave]': 'true',
15 | class: 'text-sm text-danger',
16 | },
17 | })
18 | export class ErrorComponent {}
19 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/form-field/form-field.component.css:
--------------------------------------------------------------------------------
1 | app-error {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/form-field/form-field.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | @if (!hideRequiredMarker() && hasRequiredValidation()) {
7 | *
8 | }
9 |
10 |
11 |
12 |
13 |
14 | @if (invalid() && touched()) {
15 | @if (showErrors()) {
16 | @for (error of errors(); track $index) {
17 |
{{ error }}
18 | }
19 | }
20 | @if (showCustomErrors()) {
21 |
22 | }
23 | }
24 |
25 |
26 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/form-field/label.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-label',
5 | template: ' ',
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | })
8 | export class LabelComponent {}
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/icon/icon.registry.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root',
5 | })
6 | export class IconRegistry {
7 | private readonly icons = new Map();
8 |
9 | addIcon(name: string, url: string) {
10 | this.icons.set(name, url);
11 | }
12 |
13 | getUrl(name: string) {
14 | return this.icons.get(name);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/input/input.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'input[appInput]',
5 | host: {
6 | class:
7 | 'h-9 focus-visible:outline-ring focus-visible:outline border border-border rounded-md py-1.5 px-2.5 bg-background [.ng-invalid.ng-touched]:border-danger disabled:bg-disabled disabled:text-disabled-foreground read-only:bg-disabled read-only:text-disabled-foreground',
8 | },
9 | })
10 | export class InputDirective {}
11 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/loader/loader.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: none;
3 |
4 | &.overlay {
5 | align-items: center;
6 | justify-content: center;
7 | position: absolute;
8 | left: 0;
9 | right: 0;
10 | bottom: 0;
11 | top: 0;
12 | background: rgba(var(--overlay), var(--loader-overlay-opacity));
13 | z-index: 99999;
14 | }
15 | display: flex;
16 | }
17 |
18 | .loader {
19 | border: 5px solid var(--color-primary);
20 | border-bottom-color: transparent;
21 | border-radius: 50%;
22 | display: inline-block;
23 | animation: rotation 1s linear infinite;
24 | }
25 |
26 | @keyframes rotation {
27 | 0% {
28 | transform: rotate(0deg);
29 | }
30 | 100% {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/loader/loader.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-option-content.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, inject } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[appMultiOptionContent]',
5 | })
6 | export class MultiOptionContentDirective {
7 | private _element = inject>(ElementRef).nativeElement;
8 |
9 | get content() {
10 | return this._element.textContent;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-option-group-label.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-multi-option-group-label',
5 | template: ' ',
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | })
8 | export class MultiOptionGroupLabelComponent {}
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-option-group.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-multi-option-group',
5 | imports: [],
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | template: `
8 |
9 | {{ label() }}
10 |
11 |
12 |
13 | `,
14 | host: {
15 | class: 'block',
16 | },
17 | })
18 | export class MultiOptionGroupComponent {
19 | label = input();
20 | }
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-option.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | width: 100%;
4 | align-items: center;
5 | justify-content: space-between;
6 | padding: 6px;
7 | cursor: pointer;
8 | background: transparent;
9 | border: 0px;
10 | font-size: 1rem;
11 |
12 | &.in-group {
13 | padding-left: 24px;
14 | }
15 |
16 | &.is-active,
17 | &:hover:not([disabled]),
18 | &.selected {
19 | background: var(--color-accent);
20 | color: var(--color-accent-foreground);
21 | }
22 | &:focus-visible {
23 | outline: 1px solid var(--color-ring);
24 | }
25 |
26 | &[disabled] {
27 | color: var(--color-disabled-foreground);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-option.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{
5 | isSelected() ? 'check_box' : 'check_box_outline_blank'
6 | }}
7 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-select-label.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject, TemplateRef } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'ng-template[appMultiSelectLabel]',
5 | })
6 | export class MultiSelectLabelDirective {
7 | ref = inject(TemplateRef);
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/multi-select/multi-select.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/multi-select/multi-select.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/otp-input/otp-input.component.css:
--------------------------------------------------------------------------------
1 | .listbox-item-active {
2 | outline: 1px solid var(--color-ring);
3 | }
4 |
5 | .code-container {
6 | display: flex;
7 | gap: 6px;
8 | height: 40px;
9 | }
10 |
11 | .code-input {
12 | width: 40px;
13 | text-align: center;
14 | }
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/pagination/pagination.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | .active-page {
3 | border: 1px solid var(--color-ring);
4 | }
5 | }
6 |
7 | .pagination {
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | column-gap: 6px;
12 | }
13 |
14 | .pagination-button {
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | border-radius: 6px;
19 | padding: 4px 8px;
20 | cursor: pointer;
21 | background: transparent;
22 | min-width: 36px;
23 | column-gap: 8px;
24 | min-height: 36px;
25 |
26 | &:hover {
27 | background-color: #ededed;
28 | }
29 |
30 | &:disabled {
31 | background: var(--color-disabled);
32 | color: var(--color-disabled-foreground);
33 | }
34 | }
35 |
36 | .pagination-ellipsis {
37 | width: 36px;
38 | height: 36px;
39 | display: flex;
40 | align-items: center;
41 | justify-content: center;
42 | line-height: 36px;
43 | }
44 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/popover/popover-origin.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, inject } from '@angular/core';
2 |
3 | export type TRIGGER_EVENT = 'hover' | 'focus' | 'click';
4 |
5 | @Directive({
6 | selector: '[appPopoverOrigin]',
7 | exportAs: 'appPopoverOrigin',
8 | })
9 | export class PopoverOriginDirective {
10 | host = inject>(ElementRef);
11 | get el() {
12 | return this.host.nativeElement;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/popover/popover.component.css:
--------------------------------------------------------------------------------
1 | .styled {
2 | box-shadow: var(--color-shadow);
3 | background-color: var(--color-background);
4 | border-radius: 6px;
5 | border: 1px solid var(--color-border);
6 | }
7 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/popover/popover.component.html:
--------------------------------------------------------------------------------
1 |
2 |
10 | @if (isOpen()) {
11 |
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/progress-bar/progress-bar.component.css:
--------------------------------------------------------------------------------
1 | .inc {
2 | animation: indeterminateIncrease 2s infinite;
3 | }
4 | .dec {
5 | animation: indeterminateDecrease 2s 0.5s infinite;
6 | }
7 |
8 | @keyframes indeterminateIncrease {
9 | from {
10 | left: -5%;
11 | width: 5%;
12 | }
13 | to {
14 | left: 130%;
15 | width: 100%;
16 | }
17 | }
18 | @keyframes indeterminateDecrease {
19 | from {
20 | left: -80%;
21 | width: 80%;
22 | }
23 | to {
24 | left: 110%;
25 | width: 10%;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/progress-bar/progress-bar.component.html:
--------------------------------------------------------------------------------
1 |
2 | @if (indeterminate()) {
3 |
4 |
5 |
6 | } @else {
7 |
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/progress-bar/progress-bar.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 |
3 | const minMaxTransform = (value: number) => {
4 | if (value < 0) {
5 | return 0;
6 | }
7 | if (value > 100) {
8 | return 100;
9 | }
10 | return value;
11 | };
12 |
13 | @Component({
14 | selector: 'app-progress-bar',
15 | imports: [],
16 | templateUrl: './progress-bar.component.html',
17 | styleUrl: './progress-bar.component.css',
18 | changeDetection: ChangeDetectionStrategy.OnPush,
19 | })
20 | export class ProgressBarComponent {
21 | value = input(0, { transform: minMaxTransform });
22 | indeterminate = input(false);
23 |
24 | transformValue() {
25 | return `scaleX(${this.value()}%)`;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/radio-button/radio-button.component.css:
--------------------------------------------------------------------------------
1 | .native-radio-button-container {
2 | position: relative;
3 | }
4 | .native-radio-button {
5 | position: absolute;
6 | opacity: 0;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | top: 0;
11 | z-index: 1;
12 | }
13 |
14 | .radio-button {
15 | display: flex;
16 | align-items: center;
17 | gap: 8px;
18 | &.disabled {
19 | color: var(--color-disabled-foreground);
20 | }
21 | }
22 |
23 | .radio-button-icon {
24 | cursor: pointer;
25 | display: flex;
26 | &.checked {
27 | color: var(--color-primary);
28 | }
29 | }
30 |
31 | .native-radio-button:focus-visible + .radio-button-icon {
32 | outline: 1px solid var(--color-ring);
33 | border-radius: 50%;
34 | }
35 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/radio-button/radio-button.component.html:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/radio-button/radio-group.component.css:
--------------------------------------------------------------------------------
1 | .radio-group {
2 | display: flex;
3 | align-items: center;
4 | gap: 8px;
5 |
6 | &.vertical {
7 | flex-direction: column;
8 | align-items: flex-start;
9 | }
10 | }
11 |
12 | :host.ng-invalid.ng-touched {
13 | color: var(--color-danger-color);
14 | }
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/radio-button/radio-group.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/option-content.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, inject } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[appOptionContent]',
5 | })
6 | export class OptionContentDirective {
7 | private _element = inject>(ElementRef).nativeElement;
8 |
9 | get content() {
10 | return this._element.textContent;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/option-group-label.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-option-group-label',
5 | template: ' ',
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | })
8 | export class OptionGroupLabelComponent {}
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/option-group.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { OptionGroupComponent } from './option-group.component';
5 |
6 | describe('OptionGroupComponent', () => {
7 | let component: OptionGroupComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | imports: [OptionGroupComponent],
13 | providers: [provideExperimentalZonelessChangeDetection()],
14 | }).compileComponents();
15 |
16 | fixture = TestBed.createComponent(OptionGroupComponent);
17 | component = fixture.componentInstance;
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/option-group.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-option-group',
5 | imports: [],
6 | changeDetection: ChangeDetectionStrategy.OnPush,
7 | template: `
8 |
9 | {{ label() }}
10 |
11 |
12 |
13 | `,
14 | host: {
15 | class: 'block',
16 | },
17 | })
18 | export class OptionGroupComponent {
19 | label = input();
20 | }
21 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/option.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | width: 100%;
4 | align-items: center;
5 | justify-content: space-between;
6 | padding: 6px;
7 | cursor: pointer;
8 | background: transparent;
9 | border: 0px;
10 | font-size: 1rem;
11 |
12 | &.in-group {
13 | padding-left: 24px;
14 | }
15 |
16 | &.is-active,
17 | &:hover:not([disabled]),
18 | &.selected {
19 | background: var(--color-accent);
20 | color: var(--color-accent-foreground);
21 | }
22 | &:focus-visible {
23 | outline: 1px solid var(--color-ring);
24 | }
25 |
26 | &[disabled] {
27 | color: var(--color-disabled-foreground);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/option.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/select-label.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject, TemplateRef } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'ng-template[appSelectLabel]',
5 | })
6 | export class SelectLabelDirective {
7 | ref = inject(TemplateRef);
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/select/select.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/select/select.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/skeleton/skeleton.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { SkeletonComponent } from './skeleton.component';
5 |
6 | describe('SkeletonComponent', () => {
7 | let component: SkeletonComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | imports: [SkeletonComponent],
13 | providers: [provideExperimentalZonelessChangeDetection()],
14 | }).compileComponents();
15 |
16 | fixture = TestBed.createComponent(SkeletonComponent);
17 | component = fixture.componentInstance;
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/skeleton/skeleton.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-skeleton',
5 | template: ``,
6 | host: {
7 | class: 'animate-pulse block bg-mute',
8 | },
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class SkeletonComponent {}
12 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/switch/switch.component.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tab/tab-body.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject, TemplateRef } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'ng-template[appTabBody]',
5 | })
6 | export class TabBodyDirective {
7 | templateRef = inject(TemplateRef);
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tab/tab-group-header.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
4 | import { TabGroupHeaderComponent } from './tab-group-header.component';
5 |
6 | describe('TabGroupHeaderComponent', () => {
7 | let component: TabGroupHeaderComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | providers: [provideExperimentalZonelessChangeDetection()],
13 | imports: [TabGroupHeaderComponent],
14 | }).compileComponents();
15 |
16 | fixture = TestBed.createComponent(TabGroupHeaderComponent);
17 | component = fixture.componentInstance;
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tab/tab-group.component.css:
--------------------------------------------------------------------------------
1 | .tab-group-header {
2 | display: flex;
3 | position: relative;
4 | border-bottom: 1px solid var(--color-divider);
5 | &:focus {
6 | outline: none;
7 | }
8 | &:focus-visible {
9 | app-tab-group-header.is-active {
10 | outline: 1px solid var(--color-ring);
11 | }
12 | }
13 | }
14 |
15 | .tab-header {
16 | padding: 12px 16px;
17 | display: flex;
18 | justify-content: center;
19 | cursor: pointer;
20 | position: relative;
21 | outline: none;
22 | background: transparent;
23 | border: 0;
24 | font-size: 1rem;
25 |
26 | &:focus-visible {
27 | outline: 1px solid var(--color-ring);
28 | }
29 | }
30 |
31 | .body-gap {
32 | padding: 20px;
33 | }
34 |
35 | .tab-ink {
36 | position: absolute;
37 | left: 0;
38 | bottom: 0;
39 | height: 2px;
40 | transition:
41 | left 0.3s ease,
42 | width 0.3s ease;
43 |
44 | background-color: var(--color-primary);
45 | }
46 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tab/tab-header.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject, TemplateRef } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'ng-template[appTabHeader]',
5 | })
6 | export class TabHeaderDirective {
7 | templateRef = inject(TemplateRef);
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tab/tab.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/tab/tab.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tab/tab.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/sort.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, output } from '@angular/core';
2 | import { SortChangeType } from './table.types';
3 |
4 | @Directive({
5 | selector: 'table[appSort]',
6 | })
7 | export class SortDirective {
8 | sortChange = output();
9 |
10 | sort(change: SortChangeType) {
11 | this.sortChange.emit(change);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/table-layout.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-table-layout',
5 | imports: [],
6 | host: {
7 | class: 'block',
8 | },
9 | template: `
10 |
11 |
12 |
13 |
14 | `,
15 | changeDetection: ChangeDetectionStrategy.OnPush,
16 | })
17 | export class TableLayoutComponent {}
18 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/table-pagination.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/table/table-pagination.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/table.directive.ts:
--------------------------------------------------------------------------------
1 | import { booleanAttribute, Directive, input } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'table[appTable]',
5 | })
6 | export class TableDirective {
7 | selectable = input(false, { transform: booleanAttribute });
8 | }
9 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/table.types.ts:
--------------------------------------------------------------------------------
1 | export type SORT_DIRECTION = 'asc' | 'desc';
2 |
3 | export interface SortChangeType {
4 | name: string;
5 | direction: SORT_DIRECTION;
6 | }
7 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/td.directive.ts:
--------------------------------------------------------------------------------
1 | import { booleanAttribute, Directive, input } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'td[appTd]',
5 | host: {
6 | class: 'px-6 py-3',
7 | '[class.sticky]': 'sticky()',
8 | '[class.left-0]': 'sticky()',
9 | },
10 | })
11 | export class TdDirective {
12 | sticky = input(false, { transform: booleanAttribute });
13 | }
14 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/th.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'th[appTh]',
5 | host: {
6 | class: 'px-6 py-3',
7 | },
8 | })
9 | export class ThDirective {}
10 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/tr-head.directive.ts:
--------------------------------------------------------------------------------
1 | import { booleanAttribute, Directive, input } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[appTrHead]',
5 | host: {
6 | class: 'text-xs text-left text-on-surface uppercase bg-surface',
7 | '[class.sticky]': 'sticky()',
8 | '[class.top-0]': 'sticky()',
9 | '[class.z-1]': 'sticky()',
10 | },
11 | })
12 | export class TrHeadDirective {
13 | sticky = input(false, { transform: booleanAttribute });
14 | }
15 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/table/tr.directive.ts:
--------------------------------------------------------------------------------
1 | import { computed, Directive, inject, input } from '@angular/core';
2 | import { TableDirective } from './table.directive';
3 |
4 | @Directive({
5 | selector: '[appTr]',
6 | host: {
7 | class: 'border-b border-border',
8 | '[class]': 'highlight()',
9 | },
10 | })
11 | export class TrDirective {
12 | table = inject(TableDirective);
13 | isSelected = input();
14 |
15 | highlight = computed(() => {
16 | let classes = '';
17 | if (this.table.selectable()) {
18 | classes += 'hover:bg-accent hover:text-accent-foreground cursor-pointer';
19 | }
20 | if (this.isSelected()) {
21 | classes += ' bg-accent text-accent-foreground';
22 | } else {
23 | classes += ' bg-background';
24 | }
25 | return classes;
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/textarea/textarea.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'textarea[appTextarea]',
5 | host: {
6 | class:
7 | 'border focus-visible:outline-ring focus-visible:outline border-border rounded-md py-1.5 px-2.5 bg-background [.ng-invalid.ng-touched]:border-danger disabled:bg-disabled disabled:text-disabled-foreground read-only:bg-disabled read-only:text-disabled-foreground',
8 | },
9 | })
10 | export class TextareaDirective {}
11 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/toast/toast-close.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-toast-close-icon',
5 | styles: [
6 | `
7 | :host {
8 | display: flex;
9 | }
10 | `,
11 | ],
12 | template: `
24 |
25 |
26 | `,
27 | changeDetection: ChangeDetectionStrategy.OnPush,
28 | })
29 | export class ToastCloseIconComponent {}
30 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/toast/toast.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngverse/ui/ed78386c665616990da6592ed0ae160bea80c016/projects/ngverse/src/lib/ui/toast/toast.component.css
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/toast/toast.component.html:
--------------------------------------------------------------------------------
1 |
10 |
{{ message() }}
11 | @if (showCloseIcon()) {
12 |
13 |
14 |
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tooltip/tooltip-container.component.html:
--------------------------------------------------------------------------------
1 |
2 | @if (contentPortal()) {
3 |
4 | } @else {
5 | {{ message() }}
6 | }
7 |
8 |
--------------------------------------------------------------------------------
/projects/ngverse/src/mock-export.ts:
--------------------------------------------------------------------------------
1 | export const test = 2;
2 |
--------------------------------------------------------------------------------
/projects/ngverse/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of ngverse
3 | */
4 |
5 | export * from './mock-export';
6 |
--------------------------------------------------------------------------------
/projects/ngverse/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/lib",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": []
11 | },
12 | "exclude": ["**/*.spec.ts"]
13 | }
14 |
--------------------------------------------------------------------------------
/projects/ngverse/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "./tsconfig.lib.json",
5 | "compilerOptions": {
6 | "declarationMap": false
7 | },
8 | "angularCompilerOptions": {
9 | "compilationMode": "partial"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/projects/ngverse/tsconfig.schematics.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "lib": ["ES2021", "dom"],
5 | "declaration": true,
6 | "module": "commonjs",
7 | "moduleResolution": "node",
8 | "noEmitOnError": true,
9 | "noFallthroughCasesInSwitch": true,
10 | "noImplicitAny": true,
11 | "noImplicitThis": true,
12 | "noUnusedParameters": true,
13 | "noUnusedLocals": true,
14 | "rootDir": "schematics",
15 | "outDir": "../../dist/@ngverse/ui/schematics",
16 | "skipDefaultLibCheck": true,
17 | "skipLibCheck": true,
18 | "sourceMap": true,
19 | "strictNullChecks": true,
20 | "target": "es6",
21 | "types": ["jasmine", "node"]
22 | },
23 | "include": ["schematics/**/*"],
24 | "exclude": ["schematics/*/files/**/*"]
25 | }
26 |
--------------------------------------------------------------------------------
/projects/ngverse/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/release.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | branches: ['main'],
3 | repositoryUrl: 'https://github.com/ngverse/ui',
4 | preset: 'conventionalcommits',
5 | releaseRules: [{ type: 'refactor', release: 'patch' }],
6 | plugins: [
7 | '@semantic-release/commit-analyzer',
8 | '@semantic-release/release-notes-generator',
9 | [
10 | '@semantic-release/npm',
11 | {
12 | pkgRoot: 'dist/@ngverse/ui',
13 | },
14 | ],
15 | [
16 | '@semantic-release/git',
17 | {
18 | assets: ['projects/ngverse/package.json'],
19 | message: 'chore(release): update package.json [skip ci]',
20 | },
21 | ],
22 | ['@semantic-release/github'],
23 | ],
24 | };
25 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "git": {
3 | "deploymentEnabled": {
4 | "main": false
5 | }
6 | },
7 | "github": {
8 | "autoJobCancelation": false
9 | }
10 | }
11 |
--------------------------------------------------------------------------------