2 |
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 |
3 |
10 |
11 | 4 | {{ label() }} 5 |
6 | @if (subTitle()) { 7 |{{ subTitle() }}
8 | } 9 |Installation
2 |Prerequisites
2 | 3 | @if (preprsAuto(); as prepsAuto) { 4 |
5 | @for (dep of prepsAuto; track $index) {
6 |
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
7 | {{
8 | dep.label
9 | }}
10 |
11 | Showcase
2 |
3 |
8 | {{ copied() ? 'check' : 'content_copy' }}
9 |
10 |
11 | }
12 |
21 |
4 |
6 |
7 | Source code
5 |
8 |
14 | @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 |
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 |
3 | Notifications
5 |
8 |
2 |
4 |
5 | Right click to open context menu
3 |
7 |
8 |
9 |
10 | 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 |
35 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/input/show-case-input/show-case-input.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-direction: column;
4 | width: 250px;
5 | margin: 0 auto;
6 | gap: 20px;
7 |
8 | > * {
9 | width: 100%;
10 | }
11 | }
12 |
13 | .age-container {
14 | display: flex;
15 | align-items: center;
16 | gap: 6px;
17 | }
18 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/input/show-case-input/show-case-input.component.html:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/input/show-case-input/show-case-input.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, model } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { CheckboxComponent } from '@/ui/checkbox/checkbox.component';
4 | import { InputDirective } from '@/ui/input/input.directive';
5 |
6 | @Component({
7 | selector: 'doc-show-case-input',
8 | imports: [InputDirective, FormsModule, CheckboxComponent, FormsModule],
9 | templateUrl: './show-case-input.component.html',
10 | styleUrl: './show-case-input.component.css',
11 | })
12 | export class ShowCaseInputComponent {
13 | username = model();
14 | password = model();
15 | age = model(false);
16 | }
17 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/loader/show-case-loader/show-case-loader.component.css:
--------------------------------------------------------------------------------
1 | .show-case {
2 | display: flex;
3 | flex-wrap: wrap;
4 | justify-content: center;
5 | gap: 10px;
6 | }
7 |
8 | .infinite-loader {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | }
13 |
14 | app-card {
15 | width: 200px;
16 | }
17 |
18 | input,
19 | button {
20 | width: 100%;
21 | }
22 |
--------------------------------------------------------------------------------
/projects/docs/src/app/examples/loader/show-case-loader/show-case-loader.component.html:
--------------------------------------------------------------------------------
1 |
3 |
11 |
12 |
13 | SVG Icons
14 | 15 |
16 | @for (icon of icons; track $index) {
17 |
25 | Font Icons
27 |
28 | @for (fontIcon of fontIcons; track $index) {
29 | {{
30 | fontIcon
31 | }}
32 | }
33 |
34 |
2 |
3 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 | @if (showLoader()) {
16 |
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 |
17 |
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 | 18 | {{ dateValue() }} 19 |
20 |
2 |
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 |
20 |
35 | Are you sure you want to do this?
21 |
22 |
25 |
33 |
34 |
2 |
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
3 |
6 | Determinate
4 |
7 |
10 | Indeterminate
8 |
2 |
17 |
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 | 18 | {{ dateValue() }} 19 |
20 |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 |
6 | Custom Label
7 |
8 |
9 |
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 |
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 |
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 |
2 |
5 |
8 |
15 |
23 |
24 |
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 |
25 | 
31 | I love NgVerse!
32 |
33 |
31 | I love NgVerse!
32 |
2 |
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 |
4 |
9 |
5 |
8 |
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 | 3 | The minimum required Angular version for installation is 4 | >=19.0.0. 5 |
6 |Install
7 |
3 | After installing
9 | @for (item of categories; track $index) {
10 |
14 | {{
15 | item.icon
16 | }}
17 |
21 | {{ item.name }}
18 | 19 | } 20 |
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
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
2 | @switch (viewType()) {
3 | @case ('day') {
4 |
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 |
3 |
4 |
5 | | {{ day }} | 10 | } 11 |
|---|
| {{ day() }} | 16 |
| 24 | 27 | | 28 | } 29 |
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 = outputyear-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
5 |
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 | {{ title }}
6 |{{ description }}
7 |
8 |
11 |
12 |
5 |
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{{ title }}
6 |{{ description }}
7 |
8 |
17 |
26 |
27 |
2 |
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: ``,
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
3 | @if (title) {
4 |
21 | {{ title }}
5 | } 6 | @if (showClose) { 7 | 19 | } 20 |
2 |
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
3 | @if (title()) {
4 |
22 |
23 | 5 | {{ title() }} 6 |
7 | } 8 | 9 | 21 |
2 |
3 |
12 |
13 |
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: '
14 | @if (invalid() && touched()) {
15 | @if (showErrors()) {
16 | @for (error of errors(); track $index) {
17 | {{ error }}
18 | }
19 | }
20 | @if (showCustomErrors()) {
21 |
25 |
9 | {{ label() }}
10 |
11 |
12 |
2 |
4 |
10 | @if (isOpen()) {
11 |
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
2 |
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
9 | {{ label() }}
10 |
11 |
12 |
12 |
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
10 |
17 |
--------------------------------------------------------------------------------
/projects/ngverse/src/lib/ui/tooltip/tooltip-container.component.html:
--------------------------------------------------------------------------------
1 | {{ message() }}
11 | @if (showCloseIcon()) {
12 |
15 | }
16 |
2 | @if (contentPortal()) {
3 |
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 |
--------------------------------------------------------------------------------