├── .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 | 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 |
7 | {{ 8 | dep.label 9 | }} 10 |
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 | 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 |
3 | Notifications 4 |
5 | 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 | 8 | 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 |
2 | 3 | First Name 4 | 5 | 6 | 7 | Last Name 8 | 9 | 10 | 11 | Best Movie 12 | 13 | 14 | 17 |
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 | 5 | 6 | 9 | 10 | 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 | 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 |
3 | 11 | 12 |
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 |
2 | 9 | 17 |
18 | Age 21 | 22 |
23 |
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 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | @if (showLoader()) { 16 | 17 | } 18 | 19 |
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 | 6 | 7 | 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 | 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 | 9 | 18 | 19 |
20 |

Are you sure you want to do this?

21 |
22 | 25 | 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 |
3 |

Determinate

4 | 5 |
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 | 6 | 7 | 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 |
6 | Custom Label 7 |
8 |
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 | 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 |
2 | 5 | 8 | 15 | 23 | 24 |
25 | thanos 31 | I love NgVerse! 32 |
33 |
34 |
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 |
2 | 3 |
4 |
5 | 6 | 7 |
8 |
9 |
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 | 14 | 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 |
9 | @for (item of categories; track $index) { 10 | 14 | {{ 15 | item.icon 16 | }} 17 |

{{ item.name }}

18 |
19 | } 20 |
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 | 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 | 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 | 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 | 3 | 4 |
5 | 6 | 7 | 8 | @for (day of weeks; track $index) { 9 | 10 | } 11 | 12 | 13 | 14 | 15 | 16 | 17 | @for (weekDay of weekDays(); track $index) { 18 | 19 | @for (_day of weekDay; track $index) { 20 | 28 | } 29 | 30 | } 31 | 32 |
{{ day }}
{{ day() }}
24 | 27 |
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 | 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 | 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 | 17 | 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 | 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 | 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 | 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 |
2 |
3 | 12 | {{ 13 | selected() ? 'radio_button_checked' : 'radio_button_unchecked' 14 | }} 15 |
16 | 19 |
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 | 12 | 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 | 15 | } 16 |
17 | -------------------------------------------------------------------------------- /projects/ngverse/src/lib/ui/tooltip/tooltip-container.component.html: -------------------------------------------------------------------------------- 1 | 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 | --------------------------------------------------------------------------------