From 2816cc68ccdf3e5cbc93598ce067667161037851 Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Fri, 7 Jul 2023 07:33:55 -0400 Subject: [PATCH 01/12] created olt-ngx-bootstrap --- angular.json | 33 +++++++++++++++++++ projects/olt-ngx-bootstrap/README.md | 24 ++++++++++++++ projects/olt-ngx-bootstrap/ng-package.json | 7 ++++ projects/olt-ngx-bootstrap/package.json | 12 +++++++ .../src/lib/olt-ngx-bootstrap.module.ts | 13 ++++++++ projects/olt-ngx-bootstrap/src/public-api.ts | 7 ++++ projects/olt-ngx-bootstrap/tsconfig.lib.json | 14 ++++++++ .../olt-ngx-bootstrap/tsconfig.lib.prod.json | 10 ++++++ projects/olt-ngx-bootstrap/tsconfig.spec.json | 14 ++++++++ tsconfig.json | 4 ++- 10 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 projects/olt-ngx-bootstrap/README.md create mode 100644 projects/olt-ngx-bootstrap/ng-package.json create mode 100644 projects/olt-ngx-bootstrap/package.json create mode 100644 projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts create mode 100644 projects/olt-ngx-bootstrap/src/public-api.ts create mode 100644 projects/olt-ngx-bootstrap/tsconfig.lib.json create mode 100644 projects/olt-ngx-bootstrap/tsconfig.lib.prod.json create mode 100644 projects/olt-ngx-bootstrap/tsconfig.spec.json diff --git a/angular.json b/angular.json index af7f83f..f2ead27 100644 --- a/angular.json +++ b/angular.json @@ -33,6 +33,39 @@ } } } + }, + "olt-ngx-bootstrap": { + "projectType": "library", + "root": "projects/olt-ngx-bootstrap", + "sourceRoot": "projects/olt-ngx-bootstrap/src", + "prefix": "olt", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "project": "projects/olt-ngx-bootstrap/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/olt-ngx-bootstrap/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "projects/olt-ngx-bootstrap/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "tsConfig": "projects/olt-ngx-bootstrap/tsconfig.spec.json", + "polyfills": [ + "zone.js", + "zone.js/testing" + ] + } + } + } } }, "schematics": { diff --git a/projects/olt-ngx-bootstrap/README.md b/projects/olt-ngx-bootstrap/README.md new file mode 100644 index 0000000..5c55a5e --- /dev/null +++ b/projects/olt-ngx-bootstrap/README.md @@ -0,0 +1,24 @@ +# OltNgxBootstrap + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0. + +## Code scaffolding + +Run `ng generate component component-name --project olt-ngx-bootstrap` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project olt-ngx-bootstrap`. +> Note: Don't forget to add `--project olt-ngx-bootstrap` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build olt-ngx-bootstrap` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build olt-ngx-bootstrap`, go to the dist folder `cd dist/olt-ngx-bootstrap` and run `npm publish`. + +## Running unit tests + +Run `ng test olt-ngx-bootstrap` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/projects/olt-ngx-bootstrap/ng-package.json b/projects/olt-ngx-bootstrap/ng-package.json new file mode 100644 index 0000000..6354e32 --- /dev/null +++ b/projects/olt-ngx-bootstrap/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/olt-ngx-bootstrap", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/package.json b/projects/olt-ngx-bootstrap/package.json new file mode 100644 index 0000000..f14ccc5 --- /dev/null +++ b/projects/olt-ngx-bootstrap/package.json @@ -0,0 +1,12 @@ +{ + "name": "olt-ngx-bootstrap", + "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^16.1.0", + "@angular/core": "^16.1.0" + }, + "dependencies": { + "tslib": "^2.3.0" + }, + "sideEffects": false +} diff --git a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts new file mode 100644 index 0000000..000eb9a --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; + + + +@NgModule({ + declarations: [ + ], + imports: [ + ], + exports: [ + ] +}) +export class OltNgxBootstrapModule { } diff --git a/projects/olt-ngx-bootstrap/src/public-api.ts b/projects/olt-ngx-bootstrap/src/public-api.ts new file mode 100644 index 0000000..e4bf513 --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/public-api.ts @@ -0,0 +1,7 @@ +/* + * Public API Surface of olt-ngx-bootstrap + */ + +export * from './lib/olt-ngx-bootstrap.service'; +export * from './lib/olt-ngx-bootstrap.component'; +export * from './lib/olt-ngx-bootstrap.module'; diff --git a/projects/olt-ngx-bootstrap/tsconfig.lib.json b/projects/olt-ngx-bootstrap/tsconfig.lib.json new file mode 100644 index 0000000..543fd47 --- /dev/null +++ b/projects/olt-ngx-bootstrap/tsconfig.lib.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/projects/olt-ngx-bootstrap/tsconfig.lib.prod.json b/projects/olt-ngx-bootstrap/tsconfig.lib.prod.json new file mode 100644 index 0000000..06de549 --- /dev/null +++ b/projects/olt-ngx-bootstrap/tsconfig.lib.prod.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/projects/olt-ngx-bootstrap/tsconfig.spec.json b/projects/olt-ngx-bootstrap/tsconfig.spec.json new file mode 100644 index 0000000..ce7048b --- /dev/null +++ b/projects/olt-ngx-bootstrap/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json index e303a8e..b50e328 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,8 +16,10 @@ "moduleResolution": "node", "paths": { "olt-core": [ - "dist/olt-core/olt-core", "dist/olt-core" + ], + "olt-ngx-bootstrap": [ + "dist/olt-ngx-bootstrap" ] }, "importHelpers": true, From 4dde8ce9933798b9938700eb5706ae5d0d8bb5a2 Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Fri, 7 Jul 2023 08:40:03 -0400 Subject: [PATCH 02/12] moved ngx-bootstrap components --- README.md => README.md.bak.txt | 0 package.json | 4 +-- projects/olt-core/README.md | 20 ++----------- .../olt-core/src/lib/components/exports.ts | 12 ++++---- projects/olt-core/src/lib/components/index.ts | 4 +-- projects/olt-core/src/lib/olt-core.module.ts | 22 +++++++-------- projects/olt-core/src/lib/services/index.ts | 2 +- projects/olt-ngx-bootstrap/README.md | 28 ++++++------------- .../date-time-entry.component.html | 0 .../date-time-entry.component.scss | 0 .../date-time-entry.component.spec.ts | 0 .../date-time-entry.component.ts | 3 +- .../dynamic-table.component.html | 0 .../dynamic-table.component.scss | 0 .../dynamic-table.component.spec.ts | 0 .../dynamic-table/dynamic-table.component.ts | 4 +-- .../src/lib/components/exports.ts | 12 ++++++++ .../src/lib/components/index.ts | 2 ++ .../alert-modal/alert-modal.component.html | 0 .../alert-modal/alert-modal.component.scss | 0 .../alert-modal/alert-modal.component.spec.ts | 0 .../alert-modal/alert-modal.component.ts | 2 +- .../src/lib/modals/base-modal.component.ts | 3 +- .../confirm-modal.component.html | 0 .../confirm-modal.component.scss | 0 .../confirm-modal.component.spec.ts | 0 .../confirm-modal/confirm-modal.component.ts | 4 +-- .../src/lib/modals/exports.ts | 8 +----- .../src/lib/modals/index.ts | 0 .../input-modal/input-modal.component.html | 0 .../input-modal/input-modal.component.scss | 0 .../input-modal/input-modal.component.spec.ts | 0 .../input-modal/input-modal.component.ts | 3 +- .../src/lib/olt-ngx-bootstrap.module.ts | 22 +++++++++++++++ .../src/lib/services/index.ts | 1 + .../src/lib/services/modal.service.ts | 7 +---- projects/olt-ngx-bootstrap/src/public-api.ts | 4 +-- tsconfig.json | 4 +-- 38 files changed, 83 insertions(+), 88 deletions(-) rename README.md => README.md.bak.txt (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/date-time-entry/date-time-entry.component.html (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/date-time-entry/date-time-entry.component.scss (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/date-time-entry/date-time-entry.component.spec.ts (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/date-time-entry/date-time-entry.component.ts (93%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/dynamic-table/dynamic-table.component.html (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/dynamic-table/dynamic-table.component.scss (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/dynamic-table/dynamic-table.component.spec.ts (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/components/dynamic-table/dynamic-table.component.ts (90%) create mode 100644 projects/olt-ngx-bootstrap/src/lib/components/exports.ts create mode 100644 projects/olt-ngx-bootstrap/src/lib/components/index.ts rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/alert-modal/alert-modal.component.html (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/alert-modal/alert-modal.component.scss (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/alert-modal/alert-modal.component.spec.ts (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/alert-modal/alert-modal.component.ts (92%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/base-modal.component.ts (95%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/confirm-modal/confirm-modal.component.html (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/confirm-modal/confirm-modal.component.scss (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/confirm-modal/confirm-modal.component.spec.ts (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/confirm-modal/confirm-modal.component.ts (95%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/exports.ts (71%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/index.ts (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/input-modal/input-modal.component.html (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/input-modal/input-modal.component.scss (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/input-modal/input-modal.component.spec.ts (100%) rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/modals/input-modal/input-modal.component.ts (89%) create mode 100644 projects/olt-ngx-bootstrap/src/lib/services/index.ts rename projects/{olt-core => olt-ngx-bootstrap}/src/lib/services/modal.service.ts (93%) diff --git a/README.md b/README.md.bak.txt similarity index 100% rename from README.md rename to README.md.bak.txt diff --git a/package.json b/package.json index b51b31b..e907127 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "scripts": { "ng": "ng", "start": "ng serve", - "build": "ng build --configuration production", + "build": "ng build olt-core --configuration production && ng build olt-ngx-bootstrap --configuration production", "watch": "ng build --watch --configuration development", "test": "ng test", - "postbuild": "xcopy \"README.md\" \".\\dist\\olt-core\" /Y" + "postbuild": "xcopy \"projects\\olt-core\\README.md\" \".\\dist\\olt-core\" /Y" }, "private": true, "dependencies": { diff --git a/projects/olt-core/README.md b/projects/olt-core/README.md index fb28370..83277bb 100644 --- a/projects/olt-core/README.md +++ b/projects/olt-core/README.md @@ -1,24 +1,10 @@ -# OltCore + -This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.1. +# OLT Angular Library -## Code scaffolding +_Components that utilize ngx-bootstrap._ -Run `ng generate component component-name --project olt-core` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project olt-core`. -> Note: Don't forget to add `--project olt-core` or else it will be added to the default project in your `angular.json` file. -## Build -Run `ng build olt-core` to build the project. The build artifacts will be stored in the `dist/` directory. -## Publishing -After building your library with `ng build olt-core`, go to the dist folder `cd dist/olt-core` and run `npm publish`. - -## Running unit tests - -Run `ng test olt-core` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/projects/olt-core/src/lib/components/exports.ts b/projects/olt-core/src/lib/components/exports.ts index 2a58d2a..af713f8 100644 --- a/projects/olt-core/src/lib/components/exports.ts +++ b/projects/olt-core/src/lib/components/exports.ts @@ -1,24 +1,24 @@ import { FormGroupComponent } from './form-group/form-group.component'; -import { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; +//import { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; import { DomesticPhoneEntryComponent } from './domestic-phone-entry/domestic-phone-entry.component'; import { ControlLabelComponent } from './control-label/control-label.component'; -import { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; +//import { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; import { HelpBlockComponent } from './help-block/help-block.component'; export const IMPORT_COMPONENTS = [ FormGroupComponent, - DynamicTableComponent, + //DynamicTableComponent, DomesticPhoneEntryComponent, ControlLabelComponent, - DateTimeEntryComponent, + //DateTimeEntryComponent, HelpBlockComponent, ]; export const EXPORT_COMPONENTS = [ FormGroupComponent, - DynamicTableComponent, + //DynamicTableComponent, DomesticPhoneEntryComponent, ControlLabelComponent, - DateTimeEntryComponent, + //DateTimeEntryComponent, HelpBlockComponent, ]; diff --git a/projects/olt-core/src/lib/components/index.ts b/projects/olt-core/src/lib/components/index.ts index 8f6431f..da526e4 100644 --- a/projects/olt-core/src/lib/components/index.ts +++ b/projects/olt-core/src/lib/components/index.ts @@ -1,6 +1,6 @@ -export { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; +//export { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; export { FormGroupComponent } from './form-group/form-group.component'; export { DomesticPhoneEntryComponent } from './domestic-phone-entry/domestic-phone-entry.component'; export { ControlLabelComponent } from './control-label/control-label.component'; -export { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; +//export { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; export { HelpBlockComponent } from './help-block/help-block.component'; diff --git a/projects/olt-core/src/lib/olt-core.module.ts b/projects/olt-core/src/lib/olt-core.module.ts index a258e6d..29ceb45 100644 --- a/projects/olt-core/src/lib/olt-core.module.ts +++ b/projects/olt-core/src/lib/olt-core.module.ts @@ -2,15 +2,15 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; -import { ModalModule } from 'ngx-bootstrap/modal'; -import { PaginationModule } from 'ngx-bootstrap/pagination'; -import { TimepickerModule } from 'ngx-bootstrap/timepicker'; -import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; +//import { ModalModule } from 'ngx-bootstrap/modal'; +//import { PaginationModule } from 'ngx-bootstrap/pagination'; +//import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +//import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; import { ToastrModule } from 'ngx-toastr'; import { IMPORT_VIEW_COMPONENTS, EXPORT_VIEW_COMPONENTS } from './views/exports'; import { IMPORT_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; -import { IMPORT_MODAL_COMPONENTS, EXPORT_MODAL_COMPONENTS } from './modals/exports'; +//import { IMPORT_MODAL_COMPONENTS, EXPORT_MODAL_COMPONENTS } from './modals/exports'; import { EXPORT_PIPES, IMPORT_PIPES } from './pipes/exports'; import { EXPORT_DIRECTIVES, IMPORT_DIRECTIVES } from './directives/exports'; @@ -19,7 +19,7 @@ import { EXPORT_DIRECTIVES, IMPORT_DIRECTIVES } from './directives/exports'; declarations: [ IMPORT_COMPONENTS, IMPORT_DIRECTIVES, - IMPORT_MODAL_COMPONENTS, + //IMPORT_MODAL_COMPONENTS, IMPORT_PIPES, IMPORT_VIEW_COMPONENTS ], @@ -27,10 +27,10 @@ import { EXPORT_DIRECTIVES, IMPORT_DIRECTIVES } from './directives/exports'; CommonModule, FormsModule, ReactiveFormsModule, - ModalModule.forRoot(), - PaginationModule.forRoot(), - TimepickerModule.forRoot(), - BsDatepickerModule.forRoot(), + // ModalModule.forRoot(), + // PaginationModule.forRoot(), + // TimepickerModule.forRoot(), + // BsDatepickerModule.forRoot(), ToastrModule.forRoot({ preventDuplicates: true, positionClass: 'toast-top-full-width', @@ -42,7 +42,7 @@ import { EXPORT_DIRECTIVES, IMPORT_DIRECTIVES } from './directives/exports'; ToastrModule, EXPORT_COMPONENTS, EXPORT_DIRECTIVES, - EXPORT_MODAL_COMPONENTS, + //EXPORT_MODAL_COMPONENTS, EXPORT_PIPES, EXPORT_VIEW_COMPONENTS ] diff --git a/projects/olt-core/src/lib/services/index.ts b/projects/olt-core/src/lib/services/index.ts index ddba7c6..41c8789 100644 --- a/projects/olt-core/src/lib/services/index.ts +++ b/projects/olt-core/src/lib/services/index.ts @@ -4,4 +4,4 @@ export * from './cache.service'; export * from './config.service'; export * from './error.service'; export * from './helper.service'; -export * from './modal.service'; +// export * from './modal.service'; diff --git a/projects/olt-ngx-bootstrap/README.md b/projects/olt-ngx-bootstrap/README.md index 5c55a5e..546adc7 100644 --- a/projects/olt-ngx-bootstrap/README.md +++ b/projects/olt-ngx-bootstrap/README.md @@ -1,24 +1,14 @@ -# OltNgxBootstrap + -This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0. +# OLT Angular Library -## Code scaffolding +_This library contains common Angular components, models, directives, and utilities._ -Run `ng generate component component-name --project olt-ngx-bootstrap` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project olt-ngx-bootstrap`. -> Note: Don't forget to add `--project olt-ngx-bootstrap` or else it will be added to the default project in your `angular.json` file. +## Model Definitions -## Build +_Some of the models work in conjunction with the OLT Core Library Json Models_ -Run `ng build olt-ngx-bootstrap` to build the project. The build artifacts will be stored in the `dist/` directory. - -## Publishing - -After building your library with `ng build olt-ngx-bootstrap`, go to the dist folder `cd dist/olt-ngx-bootstrap` and run `npm publish`. - -## Running unit tests - -Run `ng test olt-ngx-bootstrap` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +| TypeScript | OLT Core Model | Definition | +| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| [Paged](./projects/olt-core/src/lib/models/paged.model.ts) | [OltPagedJson](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/Json/OltPagedJson.cs) | Paged Result | +| [PersonName](./projects/olt-core/src/lib/models/person-name.model.ts) | [OltPersonName](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/PersonName/OltPersonName.cs) | Person's Name with (F/M/L/S) | diff --git a/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.html b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.html similarity index 100% rename from projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.html rename to projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.html diff --git a/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.scss b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.scss similarity index 100% rename from projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.scss rename to projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.scss diff --git a/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.spec.ts similarity index 100% rename from projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.spec.ts rename to projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.spec.ts diff --git a/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.ts b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts similarity index 93% rename from projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.ts rename to projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts index 7690978..497edea 100644 --- a/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.ts +++ b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts @@ -1,8 +1,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormControl } from '@angular/forms'; import { map, merge } from 'rxjs'; -import { OltUtility } from '../../utilities'; -import { OltBaseFormGroupComponent } from '../../views/base-view.formGroup.component'; +import { OltBaseFormGroupComponent, OltUtility } from '@olt-core'; @Component({ selector: 'olt-date-time-entry, [formGroupName] olt-date-time-entry, [formGroup] olt-date-time-entry', diff --git a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.html b/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.html similarity index 100% rename from projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.html rename to projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.html diff --git a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.scss b/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.scss similarity index 100% rename from projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.scss rename to projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.scss diff --git a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.spec.ts similarity index 100% rename from projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.spec.ts rename to projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.spec.ts diff --git a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.ts b/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.ts similarity index 90% rename from projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.ts rename to projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.ts index c718ddf..f8efc02 100644 --- a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.ts +++ b/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.ts @@ -1,8 +1,6 @@ import { Component, EventEmitter, ElementRef, Output, Input, SimpleChanges, OnChanges } from '@angular/core'; +import { IPaged, IPagerChangeEvent, PagerChangeEvent } from '@olt-core'; import { timer } from 'rxjs'; -import { IPaged } from '../../interfaces/paged.interface'; -import { IPagerChangeEvent } from '../../interfaces/pager-change-event.interface'; -import { PagerChangeEvent } from '../../models/pager-change-event.model'; @Component({ selector: 'olt-dynamic-table', diff --git a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts new file mode 100644 index 0000000..12e4e7a --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts @@ -0,0 +1,12 @@ +import { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; +import { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; + +export const DECLARE_COMPONENTS = [ + DynamicTableComponent, + DateTimeEntryComponent, +]; + +export const EXPORT_COMPONENTS = [ + DynamicTableComponent, + DateTimeEntryComponent, +]; diff --git a/projects/olt-ngx-bootstrap/src/lib/components/index.ts b/projects/olt-ngx-bootstrap/src/lib/components/index.ts new file mode 100644 index 0000000..b2b6c60 --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/components/index.ts @@ -0,0 +1,2 @@ +export { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; +export { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; diff --git a/projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.html b/projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.html similarity index 100% rename from projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.html rename to projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.html diff --git a/projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.scss b/projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.scss similarity index 100% rename from projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.scss rename to projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.scss diff --git a/projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.spec.ts similarity index 100% rename from projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.spec.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.spec.ts diff --git a/projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.ts b/projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.ts similarity index 92% rename from projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.ts index a55ef10..6e1ee0f 100644 --- a/projects/olt-core/src/lib/modals/alert-modal/alert-modal.component.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/alert-modal/alert-modal.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { BsModalRef } from 'ngx-bootstrap/modal'; -import { AlertModal } from '../../models'; +import { AlertModal } from '@olt-core'; import { BaseModalComponent } from '../base-modal.component'; @Component({ diff --git a/projects/olt-core/src/lib/modals/base-modal.component.ts b/projects/olt-ngx-bootstrap/src/lib/modals/base-modal.component.ts similarity index 95% rename from projects/olt-core/src/lib/modals/base-modal.component.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/base-modal.component.ts index fb5cd11..d735699 100644 --- a/projects/olt-core/src/lib/modals/base-modal.component.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/base-modal.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { ModalTypeEnum } from '../enums'; -import { IModal } from '../interfaces/modal.interface'; +import { IModal, ModalTypeEnum } from '@olt-core'; @Component({ template: '' diff --git a/projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.html b/projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.html similarity index 100% rename from projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.html rename to projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.html diff --git a/projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.scss b/projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.scss similarity index 100% rename from projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.scss rename to projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.scss diff --git a/projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.spec.ts similarity index 100% rename from projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.spec.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.spec.ts diff --git a/projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.ts b/projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.ts similarity index 95% rename from projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.ts index a06125c..ff1eb80 100644 --- a/projects/olt-core/src/lib/modals/confirm-modal/confirm-modal.component.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/confirm-modal/confirm-modal.component.ts @@ -1,8 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { BsModalRef } from 'ngx-bootstrap/modal'; -import { ModalTypeEnum } from '../../enums'; -import { ConfirmModal } from '../../models'; - +import { ConfirmModal, ModalTypeEnum } from '@olt-core'; @Component({ templateUrl: './confirm-modal.component.html', diff --git a/projects/olt-core/src/lib/modals/exports.ts b/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts similarity index 71% rename from projects/olt-core/src/lib/modals/exports.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/exports.ts index 1c83636..39550c5 100644 --- a/projects/olt-core/src/lib/modals/exports.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts @@ -3,7 +3,7 @@ import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component'; import { AlertModalComponent } from './alert-modal/alert-modal.component'; import { InputModalComponent } from './input-modal/input-modal.component'; -export const IMPORT_MODAL_COMPONENTS = [ +export const DECLARE_MODAL_COMPONENTS = [ BaseModalComponent, ConfirmModalComponent, AlertModalComponent, @@ -13,9 +13,3 @@ export const IMPORT_MODAL_COMPONENTS = [ export const EXPORT_MODAL_COMPONENTS = [ ]; -export const ENTRY_MODAL_COMPONENTS = [ - BaseModalComponent, - ConfirmModalComponent, - AlertModalComponent, - InputModalComponent -]; diff --git a/projects/olt-core/src/lib/modals/index.ts b/projects/olt-ngx-bootstrap/src/lib/modals/index.ts similarity index 100% rename from projects/olt-core/src/lib/modals/index.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/index.ts diff --git a/projects/olt-core/src/lib/modals/input-modal/input-modal.component.html b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html similarity index 100% rename from projects/olt-core/src/lib/modals/input-modal/input-modal.component.html rename to projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html diff --git a/projects/olt-core/src/lib/modals/input-modal/input-modal.component.scss b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.scss similarity index 100% rename from projects/olt-core/src/lib/modals/input-modal/input-modal.component.scss rename to projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.scss diff --git a/projects/olt-core/src/lib/modals/input-modal/input-modal.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.spec.ts similarity index 100% rename from projects/olt-core/src/lib/modals/input-modal/input-modal.component.spec.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.spec.ts diff --git a/projects/olt-core/src/lib/modals/input-modal/input-modal.component.ts b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.ts similarity index 89% rename from projects/olt-core/src/lib/modals/input-modal/input-modal.component.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.ts index c16806c..893b3cd 100644 --- a/projects/olt-core/src/lib/modals/input-modal/input-modal.component.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.ts @@ -2,8 +2,7 @@ import { FormGroup, Validators } from '@angular/forms'; import { Component, OnInit } from '@angular/core'; import { BaseModalComponent } from '../base-modal.component'; import { BsModalRef } from 'ngx-bootstrap/modal'; -import { InputModal, InputModalResponse } from '../../models'; -import { OltUtility } from '../../utilities/utility'; +import { OltUtility, InputModal, InputModalResponse } from '@olt-core'; @Component({ diff --git a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts index 000eb9a..79dc748 100644 --- a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -1,13 +1,35 @@ import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { OltCoreModule } from '@olt-core'; +import { ModalModule } from 'ngx-bootstrap/modal'; +import { PaginationModule } from 'ngx-bootstrap/pagination'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; + +import { DECLARE_MODAL_COMPONENTS, EXPORT_MODAL_COMPONENTS } from './modals/exports'; +import { DECLARE_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; @NgModule({ declarations: [ + DECLARE_COMPONENTS, + DECLARE_MODAL_COMPONENTS ], imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + ModalModule.forRoot(), + PaginationModule.forRoot(), + TimepickerModule.forRoot(), + BsDatepickerModule.forRoot(), + OltCoreModule ], exports: [ + EXPORT_COMPONENTS, + EXPORT_MODAL_COMPONENTS ] }) export class OltNgxBootstrapModule { } diff --git a/projects/olt-ngx-bootstrap/src/lib/services/index.ts b/projects/olt-ngx-bootstrap/src/lib/services/index.ts new file mode 100644 index 0000000..2299153 --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/services/index.ts @@ -0,0 +1 @@ +export * from './modal.service'; diff --git a/projects/olt-core/src/lib/services/modal.service.ts b/projects/olt-ngx-bootstrap/src/lib/services/modal.service.ts similarity index 93% rename from projects/olt-core/src/lib/services/modal.service.ts rename to projects/olt-ngx-bootstrap/src/lib/services/modal.service.ts index 768bef9..a04760b 100644 --- a/projects/olt-core/src/lib/services/modal.service.ts +++ b/projects/olt-ngx-bootstrap/src/lib/services/modal.service.ts @@ -2,14 +2,9 @@ import { Injectable, TemplateRef } from '@angular/core'; import { filter, Observable } from 'rxjs'; import { BsModalService, ModalOptions, BsModalRef } from 'ngx-bootstrap/modal'; import { ConfirmModalComponent } from '../modals/confirm-modal/confirm-modal.component'; -import { IConfirmModal, IAlertModal, IInputModal } from '../interfaces'; import { AlertModalComponent } from '../modals/alert-modal/alert-modal.component'; -import { InputModalResponse } from './../models'; import { InputModalComponent } from '../modals/input-modal/input-modal.component'; -import { ModalSizeEnum } from '../enums/modal-size.enum'; -import { ModalResult } from './../models/modal-result.model'; -import { IModalComponent } from './../interfaces/modal-component.interface'; -import { OltUtility } from '../utilities/utility'; +import { IAlertModal, IConfirmModal, IInputModal, IModalComponent, InputModalResponse, ModalResult, ModalSizeEnum, OltUtility } from '@olt-core'; @Injectable() export class OltModalService { diff --git a/projects/olt-ngx-bootstrap/src/public-api.ts b/projects/olt-ngx-bootstrap/src/public-api.ts index e4bf513..7ddb579 100644 --- a/projects/olt-ngx-bootstrap/src/public-api.ts +++ b/projects/olt-ngx-bootstrap/src/public-api.ts @@ -2,6 +2,6 @@ * Public API Surface of olt-ngx-bootstrap */ -export * from './lib/olt-ngx-bootstrap.service'; -export * from './lib/olt-ngx-bootstrap.component'; +export * from './lib/components/index'; +export * from './lib/services/index'; export * from './lib/olt-ngx-bootstrap.module'; diff --git a/tsconfig.json b/tsconfig.json index b50e328..9d693b4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,10 +15,10 @@ "experimentalDecorators": true, "moduleResolution": "node", "paths": { - "olt-core": [ + "@olt-core": [ "dist/olt-core" ], - "olt-ngx-bootstrap": [ + "@olt-ngx-bootstrap": [ "dist/olt-ngx-bootstrap" ] }, From 46a61cf711b41b683c218fbeca002906aa98bb7c Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Sat, 8 Jul 2023 06:57:23 -0400 Subject: [PATCH 03/12] added test app --- angular.json | 99 ++++ projects/olt-core/package.json | 1 - projects/olt-ngx-bootstrap/package.json | 7 +- .../test-app/src/app/app-routing.module.ts | 10 + projects/test-app/src/app/app.component.html | 484 ++++++++++++++++++ projects/test-app/src/app/app.component.scss | 0 .../test-app/src/app/app.component.spec.ts | 29 ++ projects/test-app/src/app/app.component.ts | 10 + projects/test-app/src/app/app.module.ts | 18 + projects/test-app/src/assets/.gitkeep | 0 projects/test-app/src/favicon.ico | Bin 0 -> 948 bytes projects/test-app/src/index.html | 13 + projects/test-app/src/main.ts | 7 + projects/test-app/src/styles.scss | 1 + projects/test-app/tsconfig.app.json | 14 + projects/test-app/tsconfig.spec.json | 14 + 16 files changed, 703 insertions(+), 4 deletions(-) create mode 100644 projects/test-app/src/app/app-routing.module.ts create mode 100644 projects/test-app/src/app/app.component.html create mode 100644 projects/test-app/src/app/app.component.scss create mode 100644 projects/test-app/src/app/app.component.spec.ts create mode 100644 projects/test-app/src/app/app.component.ts create mode 100644 projects/test-app/src/app/app.module.ts create mode 100644 projects/test-app/src/assets/.gitkeep create mode 100644 projects/test-app/src/favicon.ico create mode 100644 projects/test-app/src/index.html create mode 100644 projects/test-app/src/main.ts create mode 100644 projects/test-app/src/styles.scss create mode 100644 projects/test-app/tsconfig.app.json create mode 100644 projects/test-app/tsconfig.spec.json diff --git a/angular.json b/angular.json index f2ead27..9503ec9 100644 --- a/angular.json +++ b/angular.json @@ -66,6 +66,105 @@ } } } + }, + "test-app": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/test-app", + "sourceRoot": "projects/test-app/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/test-app", + "index": "projects/test-app/src/index.html", + "main": "projects/test-app/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/test-app/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "projects/test-app/src/favicon.ico", + "projects/test-app/src/assets" + ], + "styles": [ + "projects/test-app/src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "test-app:build:production", + "port": 5632 + }, + "development": { + "browserTarget": "test-app:build:development", + "port": 5633 + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "test-app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/test-app/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + "projects/test-app/src/favicon.ico", + "projects/test-app/src/assets" + ], + "styles": [ + "projects/test-app/src/styles.scss" + ], + "scripts": [] + } + } + } } }, "schematics": { diff --git a/projects/olt-core/package.json b/projects/olt-core/package.json index 6712176..5eb0394 100644 --- a/projects/olt-core/package.json +++ b/projects/olt-core/package.json @@ -20,7 +20,6 @@ "@angular/platform-browser": ">=16.0.0 <17.0.0", "@angular/router": ">=16.0.0 <17.0.0", "error-stack-parser": ">=2.0.0 <3.0.0", - "ngx-bootstrap": ">=10.0.0 <11.0.0", "ngx-logger": ">=5.0.11 <6.0.0", "ngx-toastr": ">=16.0.0 <17.0.0" }, diff --git a/projects/olt-ngx-bootstrap/package.json b/projects/olt-ngx-bootstrap/package.json index f14ccc5..77c5eab 100644 --- a/projects/olt-ngx-bootstrap/package.json +++ b/projects/olt-ngx-bootstrap/package.json @@ -1,9 +1,10 @@ { - "name": "olt-ngx-bootstrap", + "name": "@outerlimitstech/app-ngx-bootstrap", "version": "0.0.1", "peerDependencies": { - "@angular/common": "^16.1.0", - "@angular/core": "^16.1.0" + "@angular/common": ">=16.0.0 <17.0.0", + "@angular/core": ">=16.0.0 <17.0.0", + "ngx-bootstrap": ">=10.0.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/projects/test-app/src/app/app-routing.module.ts b/projects/test-app/src/app/app-routing.module.ts new file mode 100644 index 0000000..0297262 --- /dev/null +++ b/projects/test-app/src/app/app-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/projects/test-app/src/app/app.component.html b/projects/test-app/src/app/app.component.html new file mode 100644 index 0000000..2a0fbf1 --- /dev/null +++ b/projects/test-app/src/app/app.component.html @@ -0,0 +1,484 @@ + + + + + + + + + + + + + + +
+ + +
+ + + Rocket Ship + + + + + + + + + + {{ title }} app is running! + + + Rocket Ship Smoke + + + +
+ + +

Resources

+

Here are some links to help you get started:

+ +
+ + + Learn Angular + + + + + CLI Documentation + + + + + + Angular Material + + + + + + Angular Blog + + + + + + Angular DevTools + + + +
+ + +

Next Steps

+

What do you want to do next with your app?

+ + + +
+ + + + + + + + + + + +
+ + +
+ 
ng generate component xyz
+ 
ng add @angular/material
+ 
ng add @angular/pwa
+ 
ng add _____
+ 
ng test
+ 
ng build
+
+ + +
+ + + Meetup Logo + + + + + + + Discord Logo + + + + +
+ + + + + + Gray Clouds Background + + + +
+ + + + + + + + + + diff --git a/projects/test-app/src/app/app.component.scss b/projects/test-app/src/app/app.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/app.component.spec.ts b/projects/test-app/src/app/app.component.spec.ts new file mode 100644 index 0000000..b149aa1 --- /dev/null +++ b/projects/test-app/src/app/app.component.spec.ts @@ -0,0 +1,29 @@ +import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [RouterTestingModule], + declarations: [AppComponent] + })); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'test-app'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('test-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('test-app app is running!'); + }); +}); diff --git a/projects/test-app/src/app/app.component.ts b/projects/test-app/src/app/app.component.ts new file mode 100644 index 0000000..abade01 --- /dev/null +++ b/projects/test-app/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'test-app'; +} diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts new file mode 100644 index 0000000..b1c6c96 --- /dev/null +++ b/projects/test-app/src/app/app.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + AppRoutingModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/projects/test-app/src/assets/.gitkeep b/projects/test-app/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/favicon.ico b/projects/test-app/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + TestApp + + + + + + + + diff --git a/projects/test-app/src/main.ts b/projects/test-app/src/main.ts new file mode 100644 index 0000000..c58dc05 --- /dev/null +++ b/projects/test-app/src/main.ts @@ -0,0 +1,7 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/projects/test-app/src/styles.scss b/projects/test-app/src/styles.scss new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/projects/test-app/src/styles.scss @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/projects/test-app/tsconfig.app.json b/projects/test-app/tsconfig.app.json new file mode 100644 index 0000000..e4e0762 --- /dev/null +++ b/projects/test-app/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/projects/test-app/tsconfig.spec.json b/projects/test-app/tsconfig.spec.json new file mode 100644 index 0000000..a9c0752 --- /dev/null +++ b/projects/test-app/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} From 358dbeeda62491aeebbc0f46e413b53c429399f0 Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Sat, 8 Jul 2023 08:46:45 -0400 Subject: [PATCH 04/12] working sidebar --- .vscode/settings.json | 7 + angular.json | 3 + package-lock.json | 61 +- package.json | 8 +- .../test-app/src/app/app-routing.module.ts | 20 +- projects/test-app/src/app/app.component.html | 548 ++----------- projects/test-app/src/app/app.component.scss | 58 ++ projects/test-app/src/app/app.component.ts | 5 + projects/test-app/src/app/app.module.ts | 14 +- .../side-bar/side-bar.component.html | 771 ++++++++++++++++++ .../side-bar/side-bar.component.scss | 0 .../side-bar/side-bar.component.spec.ts | 21 + .../components/side-bar/side-bar.component.ts | 10 + .../app/views/landing/landing.component.html | 1 + .../app/views/landing/landing.component.scss | 0 .../views/landing/landing.component.spec.ts | 21 + .../app/views/landing/landing.component.ts | 9 + .../date-time-picker.component.html | 1 + .../date-time-picker.component.scss | 0 .../date-time-picker.component.spec.ts | 21 + .../date-time-picker.component.ts | 9 + .../src/scss/_app-bootstrap-variables.scss | 1 + .../test-app/src/scss/_app-bootstrap.scss | 92 +++ projects/test-app/src/scss/_app-nav.scss | 19 + projects/test-app/src/scss/_theme.scss | 5 + projects/test-app/src/styles.scss | 2 +- 26 files changed, 1198 insertions(+), 509 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 projects/test-app/src/app/components/side-bar/side-bar.component.html create mode 100644 projects/test-app/src/app/components/side-bar/side-bar.component.scss create mode 100644 projects/test-app/src/app/components/side-bar/side-bar.component.spec.ts create mode 100644 projects/test-app/src/app/components/side-bar/side-bar.component.ts create mode 100644 projects/test-app/src/app/views/landing/landing.component.html create mode 100644 projects/test-app/src/app/views/landing/landing.component.scss create mode 100644 projects/test-app/src/app/views/landing/landing.component.spec.ts create mode 100644 projects/test-app/src/app/views/landing/landing.component.ts create mode 100644 projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html create mode 100644 projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.scss create mode 100644 projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.spec.ts create mode 100644 projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts create mode 100644 projects/test-app/src/scss/_app-bootstrap-variables.scss create mode 100644 projects/test-app/src/scss/_app-bootstrap.scss create mode 100644 projects/test-app/src/scss/_app-nav.scss create mode 100644 projects/test-app/src/scss/_theme.scss diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..26b1189 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "npm.scriptExplorerExclude": [ + "/dist" + ], + "javascript.preferences.quoteStyle": "single", + "typescript.tsdk": "node_modules\\typescript\\lib" +} \ No newline at end of file diff --git a/angular.json b/angular.json index 9503ec9..930856a 100644 --- a/angular.json +++ b/angular.json @@ -81,6 +81,9 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { + "allowedCommonJsDependencies": [ + "error-stack-parser" + ], "outputPath": "dist/test-app", "index": "projects/test-app/src/index.html", "main": "projects/test-app/src/main.ts", diff --git a/package-lock.json b/package-lock.json index 10d149f..5c5e394 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "olt-core", - "version": "15.0.0", + "version": "16.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "olt-core", - "version": "15.0.0", + "version": "16.0.0", "dependencies": { "@angular/animations": "^16.1.3", "@angular/common": "^16.1.3", @@ -16,6 +16,7 @@ "@angular/platform-browser": "^16.1.3", "@angular/platform-browser-dynamic": "^16.1.3", "@angular/router": "^16.1.3", + "bootstrap": "^5.3.0", "error-stack-parser": "^2.1.4", "ngx-bootstrap": "^10.2.0", "ngx-logger": "^5.0.11", @@ -4105,6 +4106,24 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz", + "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.7" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -12002,8 +12021,7 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", - "dev": true, - "requires": {} + "dev": true }, "@babel/plugin-proposal-unicode-property-regex": { "version": "7.18.6", @@ -13179,8 +13197,7 @@ "version": "16.1.4", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.1.4.tgz", "integrity": "sha512-+8bfavDH8eWxjlJFYr6bkjcRHhy95j+f8oNn7/sGLNu4L96nuE2AZ011XIu2dJahCnNiBvwc1EpkKa92t9rkaA==", - "dev": true, - "requires": {} + "dev": true }, "@nicolo-ribaudo/semver-v6": { "version": "6.3.3", @@ -13619,8 +13636,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz", "integrity": "sha512-pcub+YbFtFhaGRTo1832FQHQSHvMrlb43974e2eS8EKleR3p1cDdkJFPci1UhwkEf1J9Bz+wKBSzqpKp7nNj2A==", - "dev": true, - "requires": {} + "dev": true }, "@webassemblyjs/ast": { "version": "1.11.6", @@ -13818,8 +13834,7 @@ "version": "1.9.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", - "dev": true, - "requires": {} + "dev": true }, "adjust-sourcemap-loader": { "version": "4.0.0", @@ -14159,6 +14174,11 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "bootstrap": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz", + "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -15903,8 +15923,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true, - "requires": {} + "dev": true }, "ieee754": { "version": "1.2.1", @@ -16498,8 +16517,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-2.0.0.tgz", "integrity": "sha512-SB8HNNiazAHXM1vGEzf8/tSyEhkfxuDdhYdPBX2Mwgzt0OuF2gicApQ+uvXLID/gXyJQgvrM9+1/2SxZFUUDIA==", - "dev": true, - "requires": {} + "dev": true }, "karma-source-map-support": { "version": "1.4.0", @@ -17681,8 +17699,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-modules-local-by-default": { "version": "4.0.3", @@ -18837,8 +18854,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -19193,8 +19209,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -19283,8 +19298,7 @@ "version": "8.13.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -19386,8 +19400,7 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true, - "requires": {} + "dev": true }, "xxhashjs": { "version": "0.2.2", diff --git a/package.json b/package.json index e907127..cf7284c 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,10 @@ "version": "16.0.0", "scripts": { "ng": "ng", - "start": "ng serve", + "start": "ng serve test-app", "build": "ng build olt-core --configuration production && ng build olt-ngx-bootstrap --configuration production", - "watch": "ng build --watch --configuration development", + "watch-core": "ng build olt-core --watch --configuration development", + "watch-ngx-bootstrap": "ng build olt-ngx-bootstrap --watch --configuration development", "test": "ng test", "postbuild": "xcopy \"projects\\olt-core\\README.md\" \".\\dist\\olt-core\" /Y" }, @@ -19,6 +20,7 @@ "@angular/platform-browser": "^16.1.3", "@angular/platform-browser-dynamic": "^16.1.3", "@angular/router": "^16.1.3", + "bootstrap": "^5.3.0", "error-stack-parser": "^2.1.4", "ngx-bootstrap": "^10.2.0", "ngx-logger": "^5.0.11", @@ -41,4 +43,4 @@ "ng-packagr": "^16.1.0", "typescript": "~4.9.4" } -} \ No newline at end of file +} diff --git a/projects/test-app/src/app/app-routing.module.ts b/projects/test-app/src/app/app-routing.module.ts index 0297262..f3a1849 100644 --- a/projects/test-app/src/app/app-routing.module.ts +++ b/projects/test-app/src/app/app-routing.module.ts @@ -1,7 +1,25 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { LandingComponent } from './views/landing/landing.component'; +import { DateTimePickerComponent } from './views/ngx-bootstrap/date-time-picker/date-time-picker.component'; -const routes: Routes = []; + +const routes: Routes = [ + { + path: '', + component: LandingComponent, + }, + { + path: 'ngx-bootstrap', + children: [ + { + path: 'date-time-picker', + component: DateTimePickerComponent, + } + ] + }, + +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/projects/test-app/src/app/app.component.html b/projects/test-app/src/app/app.component.html index 2a0fbf1..585c6e3 100644 --- a/projects/test-app/src/app/app.component.html +++ b/projects/test-app/src/app/app.component.html @@ -1,484 +1,76 @@ - - - - - - - - - - - - - - -
- - -
- - - Rocket Ship - - - - - - - - - - {{ title }} app is running! - - - Rocket Ship Smoke - - - + -

Resources

-

Here are some links to help you get started:

- -
- - - Learn Angular - - - - - CLI Documentation - - - - - - Angular Material - - - - - - Angular Blog - - - - - - Angular DevTools - - - +
+
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
- - - - - - - - - - - -
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build
+
--> + +
+ + - - -
- - - Meetup Logo - - - - - - - Discord Logo - - - - -
- - - - - - Gray Clouds Background - - - +
+ +
+

Angular 13 Bootstrap 5 Simple Sidebar Template

+

The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.

+

Make sure to keep all page content within the #page-content-wrapper. The top navbar is optional, and just for demonstration.

+
+
+
- - - - - - - - - - + \ No newline at end of file diff --git a/projects/test-app/src/app/app.component.scss b/projects/test-app/src/app/app.component.scss index e69de29..a14bc65 100644 --- a/projects/test-app/src/app/app.component.scss +++ b/projects/test-app/src/app/app.component.scss @@ -0,0 +1,58 @@ +body { + overflow-x: hidden; + } + + #sidebar-wrapper { + min-height: 100vh; + + -webkit-transition: margin .25s ease-out; + -moz-transition: margin .25s ease-out; + -o-transition: margin .25s ease-out; + transition: margin .25s ease-out; + } + + #sidebar-wrapper .sidebar-heading { + padding: 0.875rem 1.25rem; + font-size: 1.2rem; + } + + #sidebar-wrapper .list-group { + width: 15rem; + } + + #page-content-wrapper { + min-width: 100vw; + } + + #wrapper.toggled #sidebar-wrapper { + margin-left: 0; + } + + @media (min-width: 768px) { + #sidebar-wrapper { + margin-left: 0; + } + + #page-content-wrapper { + min-width: 0; + width: 100%; + } + .show + { + margin-left: 0!important; + } + .hide + { + margin-left: -15rem!important; + } + } + @media (max-width: 767px) { + .show + { + margin-left: -15rem!important; + } + .hide + { + margin-left: -0!important; + } + } \ No newline at end of file diff --git a/projects/test-app/src/app/app.component.ts b/projects/test-app/src/app/app.component.ts index abade01..18c1552 100644 --- a/projects/test-app/src/app/app.component.ts +++ b/projects/test-app/src/app/app.component.ts @@ -7,4 +7,9 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'test-app'; + + status: boolean = false; + clickEvent(){ + this.status = !this.status; + } } diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index b1c6c96..1112575 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -3,14 +3,24 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { OltNgxBootstrapModule } from '@olt-ngx-bootstrap'; +import { OltCoreModule } from '@olt-core'; +import { SideBarComponent } from './components/side-bar/side-bar.component'; +import { DateTimePickerComponent } from './views/ngx-bootstrap/date-time-picker/date-time-picker.component'; +import { LandingComponent } from './views/landing/landing.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + DateTimePickerComponent, + LandingComponent, + SideBarComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + OltCoreModule, + OltNgxBootstrapModule ], providers: [], bootstrap: [AppComponent] diff --git a/projects/test-app/src/app/components/side-bar/side-bar.component.html b/projects/test-app/src/app/components/side-bar/side-bar.component.html new file mode 100644 index 0000000..e95aa9a --- /dev/null +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.html @@ -0,0 +1,771 @@ + +
+ + + + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + user-image + Dominic Keller + +
+ + + + + +
+
+
+ \ No newline at end of file diff --git a/projects/test-app/src/app/components/side-bar/side-bar.component.scss b/projects/test-app/src/app/components/side-bar/side-bar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/components/side-bar/side-bar.component.spec.ts b/projects/test-app/src/app/components/side-bar/side-bar.component.spec.ts new file mode 100644 index 0000000..19e0c5d --- /dev/null +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SideBarComponent } from './side-bar.component'; + +describe('SideBarComponent', () => { + let component: SideBarComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [SideBarComponent] + }); + fixture = TestBed.createComponent(SideBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/test-app/src/app/components/side-bar/side-bar.component.ts b/projects/test-app/src/app/components/side-bar/side-bar.component.ts new file mode 100644 index 0000000..5802677 --- /dev/null +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-side-bar', + templateUrl: './side-bar.component.html', + styleUrls: ['./side-bar.component.scss'] +}) +export class SideBarComponent { + +} diff --git a/projects/test-app/src/app/views/landing/landing.component.html b/projects/test-app/src/app/views/landing/landing.component.html new file mode 100644 index 0000000..cf8f1e1 --- /dev/null +++ b/projects/test-app/src/app/views/landing/landing.component.html @@ -0,0 +1 @@ +

landing works!

diff --git a/projects/test-app/src/app/views/landing/landing.component.scss b/projects/test-app/src/app/views/landing/landing.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/views/landing/landing.component.spec.ts b/projects/test-app/src/app/views/landing/landing.component.spec.ts new file mode 100644 index 0000000..44aaf53 --- /dev/null +++ b/projects/test-app/src/app/views/landing/landing.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LandingComponent } from './landing.component'; + +describe('LandingComponent', () => { + let component: LandingComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [LandingComponent] + }); + fixture = TestBed.createComponent(LandingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/test-app/src/app/views/landing/landing.component.ts b/projects/test-app/src/app/views/landing/landing.component.ts new file mode 100644 index 0000000..8452cc6 --- /dev/null +++ b/projects/test-app/src/app/views/landing/landing.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './landing.component.html', + styleUrls: ['./landing.component.scss'] +}) +export class LandingComponent { + +} diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html new file mode 100644 index 0000000..448107f --- /dev/null +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html @@ -0,0 +1 @@ +

date-time-picker works!

diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.scss b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.spec.ts b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.spec.ts new file mode 100644 index 0000000..8bf6096 --- /dev/null +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DateTimePickerComponent } from './date-time-picker.component'; + +describe('DateTimePickerComponent', () => { + let component: DateTimePickerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DateTimePickerComponent] + }); + fixture = TestBed.createComponent(DateTimePickerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts new file mode 100644 index 0000000..747a833 --- /dev/null +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './date-time-picker.component.html', + styleUrls: ['./date-time-picker.component.scss'] +}) +export class DateTimePickerComponent { + +} diff --git a/projects/test-app/src/scss/_app-bootstrap-variables.scss b/projects/test-app/src/scss/_app-bootstrap-variables.scss new file mode 100644 index 0000000..d26a3c2 --- /dev/null +++ b/projects/test-app/src/scss/_app-bootstrap-variables.scss @@ -0,0 +1 @@ +// $primary: #372e1c !default; diff --git a/projects/test-app/src/scss/_app-bootstrap.scss b/projects/test-app/src/scss/_app-bootstrap.scss new file mode 100644 index 0000000..648e154 --- /dev/null +++ b/projects/test-app/src/scss/_app-bootstrap.scss @@ -0,0 +1,92 @@ +// Override Bootstrap's Sass default variables +// +// Nearly all variables in Bootstrap are written with the `!default` flag. +// This allows you to override the default values of those variables before +// you import Bootstrap's source Sass files. +// +// Overriding the default variable values is the best way to customize your +// CSS without writing _new_ styles. For example, change you can either change +// `$body-color` or write more CSS that override's Bootstrap's CSS like so: +// `body { color: red; }`. + +// +// Bring in Bootstrap +// + +// Option 1 +// +// Import all of Bootstrap's CSS + +// @import "bootstrap/scss/bootstrap"; + +// Option 2 +// +// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what. + +// Toggle global options +$enable-gradients: true; +$enable-shadows: true; +$enable-dark-mode: false; + +// $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); + +// Customize some defaults +// $body-color: #333; +// $body-bg: #fff; +// $border-radius: 0.4rem; +// $success: #7952b3; + +// $blue: #372e1c !default; + +//@import "app-bootstrap-variables"; + +// Required +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +// @import "bootstrap/scss/variables-dark"; + + +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; + +// Layout & components +@import "bootstrap/scss/root"; +@import "bootstrap/scss/reboot"; + +@import "bootstrap/scss/type"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/dropdown"; +// @import "bootstrap/scss/button-group"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; // Requires nav +@import "bootstrap/scss/card"; +// @import "bootstrap/scss/accordion"; +@import "bootstrap/scss/breadcrumb"; +// @import "bootstrap/scss/pagination"; +// @import "bootstrap/scss/badge"; +// @import "bootstrap/scss/alert"; +// @import "bootstrap/scss/progress"; +@import "bootstrap/scss/list-group"; +// @import "bootstrap/scss/close"; +// @import "bootstrap/scss/toasts"; +// @import "bootstrap/scss/modal"; // Requires transitions +// @import "bootstrap/scss/tooltip"; +// @import "bootstrap/scss/popover"; +// @import "bootstrap/scss/carousel"; +// @import "bootstrap/scss/spinners"; +// @import "bootstrap/scss/offcanvas"; // Requires transitions +// @import "bootstrap/scss/placeholders"; + +// Helpers +@import "bootstrap/scss/helpers"; + +// Utilities +@import "bootstrap/scss/utilities/api"; + diff --git a/projects/test-app/src/scss/_app-nav.scss b/projects/test-app/src/scss/_app-nav.scss new file mode 100644 index 0000000..c596e9e --- /dev/null +++ b/projects/test-app/src/scss/_app-nav.scss @@ -0,0 +1,19 @@ +// :root { +// // --injail-tab-bg-color: hsl(40, 33%, 16%); //#372e1c; +// --injail-tab-bg-color: hsl(40, 33%, 46%); +// --injail-tab-hover-color: hsl(40, 33%, 40%); +// } + +// .nav-tabs { +// --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color}; +// --#{$prefix}nav-tabs-link-active-bg: var(--injail-tab-bg-color); +// } + +// .nav-link { +// &:hover, +// &:focus { +// background-color: var(--injail-tab-hover-color); +// color: var(--bs-gray-200); +// // text-decoration: if($link-hover-decoration == underline, none, null); +// } +// } diff --git a/projects/test-app/src/scss/_theme.scss b/projects/test-app/src/scss/_theme.scss new file mode 100644 index 0000000..18f7477 --- /dev/null +++ b/projects/test-app/src/scss/_theme.scss @@ -0,0 +1,5 @@ +// @import "app-bootstrap-variables"; +// @import "bootstrap-variables"; + +@import "app-bootstrap"; +@import "app-nav"; diff --git a/projects/test-app/src/styles.scss b/projects/test-app/src/styles.scss index 90d4ee0..a60af41 100644 --- a/projects/test-app/src/styles.scss +++ b/projects/test-app/src/styles.scss @@ -1 +1 @@ -/* You can add global styles to this file, and also import other style files */ +@import "./scss/theme"; From 0090576fa82a3696c5bc2ede13688702e1c4f65e Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Sat, 8 Jul 2023 09:04:32 -0400 Subject: [PATCH 05/12] wip --- projects/test-app/src/app/app.component.html | 57 +- projects/test-app/src/app/app.component.scss | 58 -- projects/test-app/src/app/app.component.ts | 5 +- projects/test-app/src/app/app.module.ts | 4 +- .../components/nav-bar/nav-bar.component.html | 37 + .../components/nav-bar/nav-bar.component.scss | 0 .../nav-bar/nav-bar.component.spec.ts | 21 + .../components/nav-bar/nav-bar.component.ts | 13 + .../side-bar/side-bar.component.html | 782 +----------------- .../components/side-bar/side-bar.component.ts | 4 +- .../app/views/landing/landing.component.html | 5 +- .../date-time-picker.component.ts | 10 + projects/test-app/src/scss/_app-side-bar.scss | 58 ++ projects/test-app/src/scss/_theme.scss | 1 + 14 files changed, 168 insertions(+), 887 deletions(-) create mode 100644 projects/test-app/src/app/components/nav-bar/nav-bar.component.html create mode 100644 projects/test-app/src/app/components/nav-bar/nav-bar.component.scss create mode 100644 projects/test-app/src/app/components/nav-bar/nav-bar.component.spec.ts create mode 100644 projects/test-app/src/app/components/nav-bar/nav-bar.component.ts create mode 100644 projects/test-app/src/scss/_app-side-bar.scss diff --git a/projects/test-app/src/app/app.component.html b/projects/test-app/src/app/app.component.html index 585c6e3..981e4bb 100644 --- a/projects/test-app/src/app/app.component.html +++ b/projects/test-app/src/app/app.component.html @@ -13,62 +13,13 @@
-->
- - - + +
- +
-

Angular 13 Bootstrap 5 Simple Sidebar Template

-

The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.

-

Make sure to keep all page content within the #page-content-wrapper. The top navbar is optional, and just for demonstration.

+
diff --git a/projects/test-app/src/app/app.component.scss b/projects/test-app/src/app/app.component.scss index a14bc65..e69de29 100644 --- a/projects/test-app/src/app/app.component.scss +++ b/projects/test-app/src/app/app.component.scss @@ -1,58 +0,0 @@ -body { - overflow-x: hidden; - } - - #sidebar-wrapper { - min-height: 100vh; - - -webkit-transition: margin .25s ease-out; - -moz-transition: margin .25s ease-out; - -o-transition: margin .25s ease-out; - transition: margin .25s ease-out; - } - - #sidebar-wrapper .sidebar-heading { - padding: 0.875rem 1.25rem; - font-size: 1.2rem; - } - - #sidebar-wrapper .list-group { - width: 15rem; - } - - #page-content-wrapper { - min-width: 100vw; - } - - #wrapper.toggled #sidebar-wrapper { - margin-left: 0; - } - - @media (min-width: 768px) { - #sidebar-wrapper { - margin-left: 0; - } - - #page-content-wrapper { - min-width: 0; - width: 100%; - } - .show - { - margin-left: 0!important; - } - .hide - { - margin-left: -15rem!important; - } - } - @media (max-width: 767px) { - .show - { - margin-left: -15rem!important; - } - .hide - { - margin-left: -0!important; - } - } \ No newline at end of file diff --git a/projects/test-app/src/app/app.component.ts b/projects/test-app/src/app/app.component.ts index 18c1552..1d5dc8d 100644 --- a/projects/test-app/src/app/app.component.ts +++ b/projects/test-app/src/app/app.component.ts @@ -9,7 +9,8 @@ export class AppComponent { title = 'test-app'; status: boolean = false; - clickEvent(){ + + toggle() { this.status = !this.status; - } + } } diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index 1112575..90db9b1 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -8,13 +8,15 @@ import { OltCoreModule } from '@olt-core'; import { SideBarComponent } from './components/side-bar/side-bar.component'; import { DateTimePickerComponent } from './views/ngx-bootstrap/date-time-picker/date-time-picker.component'; import { LandingComponent } from './views/landing/landing.component'; +import { NavBarComponent } from './components/nav-bar/nav-bar.component'; @NgModule({ declarations: [ AppComponent, DateTimePickerComponent, LandingComponent, - SideBarComponent + SideBarComponent, + NavBarComponent ], imports: [ BrowserModule, diff --git a/projects/test-app/src/app/components/nav-bar/nav-bar.component.html b/projects/test-app/src/app/components/nav-bar/nav-bar.component.html new file mode 100644 index 0000000..2a8c06a --- /dev/null +++ b/projects/test-app/src/app/components/nav-bar/nav-bar.component.html @@ -0,0 +1,37 @@ + \ No newline at end of file diff --git a/projects/test-app/src/app/components/nav-bar/nav-bar.component.scss b/projects/test-app/src/app/components/nav-bar/nav-bar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/components/nav-bar/nav-bar.component.spec.ts b/projects/test-app/src/app/components/nav-bar/nav-bar.component.spec.ts new file mode 100644 index 0000000..6759c20 --- /dev/null +++ b/projects/test-app/src/app/components/nav-bar/nav-bar.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavBarComponent } from './nav-bar.component'; + +describe('NavBarComponent', () => { + let component: NavBarComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [NavBarComponent] + }); + fixture = TestBed.createComponent(NavBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/test-app/src/app/components/nav-bar/nav-bar.component.ts b/projects/test-app/src/app/components/nav-bar/nav-bar.component.ts new file mode 100644 index 0000000..a9b969a --- /dev/null +++ b/projects/test-app/src/app/components/nav-bar/nav-bar.component.ts @@ -0,0 +1,13 @@ +import { Component, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'app-nav-bar', + templateUrl: './nav-bar.component.html', + styleUrls: ['./nav-bar.component.scss'] +}) +export class NavBarComponent { +@Output() toggleSidebar = new EventEmitter(); + + + +} diff --git a/projects/test-app/src/app/components/side-bar/side-bar.component.html b/projects/test-app/src/app/components/side-bar/side-bar.component.html index e95aa9a..8591612 100644 --- a/projects/test-app/src/app/components/side-bar/side-bar.component.html +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.html @@ -1,771 +1,13 @@ - -
- - - - - - - - -
- + + - \ No newline at end of file +
+ \ No newline at end of file diff --git a/projects/test-app/src/app/components/side-bar/side-bar.component.ts b/projects/test-app/src/app/components/side-bar/side-bar.component.ts index 5802677..d0ee0ed 100644 --- a/projects/test-app/src/app/components/side-bar/side-bar.component.ts +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'app-side-bar', @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./side-bar.component.scss'] }) export class SideBarComponent { - +@Input() status: boolean = false; } diff --git a/projects/test-app/src/app/views/landing/landing.component.html b/projects/test-app/src/app/views/landing/landing.component.html index cf8f1e1..474aade 100644 --- a/projects/test-app/src/app/views/landing/landing.component.html +++ b/projects/test-app/src/app/views/landing/landing.component.html @@ -1 +1,4 @@ -

landing works!

+

Angular Bootstrap 5 Simple Sidebar Template

+

The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.

+

Make sure to keep all page content within the #page-content-wrapper. The top navbar is optional, and just for demonstration.

+https://therichpost.com/how-to-make-simple-sidebar-template-with-bootstrap-5-and-angular-13/ \ No newline at end of file diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts index 747a833..4471eb7 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts @@ -1,9 +1,19 @@ import { Component } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; @Component({ templateUrl: './date-time-picker.component.html', styleUrls: ['./date-time-picker.component.scss'] }) export class DateTimePickerComponent { + entryForm = this.formGroup(); + + + formGroup(): FormGroup { + return new FormGroup({ + date: new FormControl(null), + time: new FormControl(null) + }) + } } diff --git a/projects/test-app/src/scss/_app-side-bar.scss b/projects/test-app/src/scss/_app-side-bar.scss new file mode 100644 index 0000000..a14bc65 --- /dev/null +++ b/projects/test-app/src/scss/_app-side-bar.scss @@ -0,0 +1,58 @@ +body { + overflow-x: hidden; + } + + #sidebar-wrapper { + min-height: 100vh; + + -webkit-transition: margin .25s ease-out; + -moz-transition: margin .25s ease-out; + -o-transition: margin .25s ease-out; + transition: margin .25s ease-out; + } + + #sidebar-wrapper .sidebar-heading { + padding: 0.875rem 1.25rem; + font-size: 1.2rem; + } + + #sidebar-wrapper .list-group { + width: 15rem; + } + + #page-content-wrapper { + min-width: 100vw; + } + + #wrapper.toggled #sidebar-wrapper { + margin-left: 0; + } + + @media (min-width: 768px) { + #sidebar-wrapper { + margin-left: 0; + } + + #page-content-wrapper { + min-width: 0; + width: 100%; + } + .show + { + margin-left: 0!important; + } + .hide + { + margin-left: -15rem!important; + } + } + @media (max-width: 767px) { + .show + { + margin-left: -15rem!important; + } + .hide + { + margin-left: -0!important; + } + } \ No newline at end of file diff --git a/projects/test-app/src/scss/_theme.scss b/projects/test-app/src/scss/_theme.scss index 18f7477..0f116bf 100644 --- a/projects/test-app/src/scss/_theme.scss +++ b/projects/test-app/src/scss/_theme.scss @@ -3,3 +3,4 @@ @import "app-bootstrap"; @import "app-nav"; +@import "app-side-bar"; From 4ef074ebf3b813b1bbecd403827b76dc9f5f5d3d Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Sun, 9 Jul 2023 08:35:33 -0400 Subject: [PATCH 06/12] working form date without time control --- .../src/lib/olt-ngx-bootstrap.module.ts | 2 +- projects/test-app/src/app/app.module.ts | 32 +- .../test-date-entry.component.html | 18 + .../test-date-entry.component.scss | 0 .../test-date-entry.component.spec.ts | 21 + .../test-date-entry.component.ts | 105 ++++ .../date-time-picker.component.html | 30 + .../date-time-picker.component.ts | 16 +- projects/test-app/src/index.html | 2 + .../test-app/src/scss/_app-bootstrap.scss | 1 + projects/test-app/src/scss/_theme.scss | 2 + .../ngx-bs-datepicker/_ngx-bs-datepicker.scss | 581 ++++++++++++++++++ .../ngx-bs-datepicker/utils/scss/mixins.scss | 141 +++++ .../utils/scss/variables.scss | 50 ++ 14 files changed, 994 insertions(+), 7 deletions(-) create mode 100644 projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html create mode 100644 projects/test-app/src/app/components/test-date-entry/test-date-entry.component.scss create mode 100644 projects/test-app/src/app/components/test-date-entry/test-date-entry.component.spec.ts create mode 100644 projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts create mode 100644 projects/test-app/src/scss/ngx-bs-datepicker/_ngx-bs-datepicker.scss create mode 100644 projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/mixins.scss create mode 100644 projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/variables.scss diff --git a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts index 79dc748..131b4c0 100644 --- a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -20,7 +20,7 @@ import { DECLARE_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; imports: [ CommonModule, FormsModule, - ReactiveFormsModule, + ReactiveFormsModule, ModalModule.forRoot(), PaginationModule.forRoot(), TimepickerModule.forRoot(), diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index 90db9b1..834899a 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -1,14 +1,26 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { BsDatepickerConfig, BsDatepickerModule } from 'ngx-bootstrap/datepicker'; +import { OltNgxBootstrapModule } from '@olt-ngx-bootstrap'; +import { OltCoreModule } from '@olt-core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { OltNgxBootstrapModule } from '@olt-ngx-bootstrap'; -import { OltCoreModule } from '@olt-core'; import { SideBarComponent } from './components/side-bar/side-bar.component'; import { DateTimePickerComponent } from './views/ngx-bootstrap/date-time-picker/date-time-picker.component'; import { LandingComponent } from './views/landing/landing.component'; import { NavBarComponent } from './components/nav-bar/nav-bar.component'; +import { TestDateEntryComponent } from './components/test-date-entry/test-date-entry.component'; + +export function getBsDatepickerConfig(): BsDatepickerConfig { + return Object.assign(new BsDatepickerConfig(), { + dateInputFormat: 'M/D/YYYY', + containerClass: 'theme-default', + showWeekNumbers: false + }); +} @NgModule({ declarations: [ @@ -16,15 +28,25 @@ import { NavBarComponent } from './components/nav-bar/nav-bar.component'; DateTimePickerComponent, LandingComponent, SideBarComponent, - NavBarComponent + NavBarComponent, + TestDateEntryComponent ], imports: [ BrowserModule, + FormsModule, + ReactiveFormsModule, + BrowserAnimationsModule, AppRoutingModule, OltCoreModule, - OltNgxBootstrapModule + OltNgxBootstrapModule, + BsDatepickerModule.forRoot(), + ], + providers: [ + { + provide: BsDatepickerConfig, + useFactory: getBsDatepickerConfig + }, ], - providers: [], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html new file mode 100644 index 0000000..3899443 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html @@ -0,0 +1,18 @@ +
+
+ +
+
+ +
+ +
+
+
+ +
+
\ No newline at end of file diff --git a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.scss b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.spec.ts b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.spec.ts new file mode 100644 index 0000000..bde6993 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestDateEntryComponent } from './test-date-entry.component'; + +describe('TestDateEntryComponent', () => { + let component: TestDateEntryComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestDateEntryComponent] + }); + fixture = TestBed.createComponent(TestDateEntryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts new file mode 100644 index 0000000..fa75aea --- /dev/null +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts @@ -0,0 +1,105 @@ +import { Component, Input, forwardRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { OltBaseFormGroupComponent } from '@olt-core'; + +// const guid = () => { +// function s4() { +// return Math.floor((1 + Math.random()) * 0x10000) +// .toString(16) +// .substring(1); +// } +// return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); +// }; + + +@Component({ + selector: 'olt-test-date-entry, [formGroupName] olt-test-date-entry, [formGroup] olt-test-date-entry', + templateUrl: './test-date-entry.component.html', + styleUrls: ['./test-date-entry.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TestDateEntryComponent), + multi: true + } + ] +}) +export class TestDateEntryComponent extends OltBaseFormGroupComponent implements ControlValueAccessor { + // @Input() formControlName!: string; + @Input() min: Date = new Date('0001-01-01T00:00:00Z'); + @Input() max: Date = new Date('9999-12-31T23:59:59Z'); + + //public control!: FormControl; + value: Date | any | null = null; + + _value: Date | null = null; + + private configured = false; + // private name: string = 'olt_date-fc_' + guid().substring(0, 8); + + disabled = false; + touched = false; + + + // ngAfterViewInit(): void { + // this.configureControl(); + // } + + // ngAfterContentChecked(): void { + // this.configureControl(); + // } + + configureControl(): void { + if (this.configured) { + return; + } + this.configured = true; + // this.yesOption.nativeElement.id = `${this.name}_yes`; + // this.yesOptionLbl.nativeElement.htmlFor = `${this.name}_yes`; + // this.noOption.nativeElement.id = `${this.name}_no`; + // this.noOptionLbl.nativeElement.htmlFor = `${this.name}_no`; + } + + onChange: any = () => { }; + onTouched: any = () => { }; + + + writeValue(value: Date | null): void { + console.log('date', value); + this.value = value; + // if (this.value === true) { + // this.yesOption.nativeElement.checked = false; + // } else if (this.value === false) { + // this.noOption.nativeElement.checked = true; + // } else { + // this.yesOption.nativeElement.checked = false; + // this.noOption.nativeElement.checked = false; + // } + } + + onChange2(event: any) { + console.log(event); + if (event != null) { + this.onChange(new Date(event.toDateString())) + } else { + this.onChange( event); + } + } + + registerOnChange(fn: any): void { + this.onChange = fn; + } + + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + + get firstError(): string | null { + return null; + } + +} diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html index 448107f..6beed9e 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html @@ -1 +1,31 @@

date-time-picker works!

+ + +
+
+ +
+ +
+ + Date2 +
+ +
+ +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts index 4471eb7..df83786 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; +import { OltUtility } from '@olt-core'; @Component({ templateUrl: './date-time-picker.component.html', @@ -7,13 +8,26 @@ import { FormControl, FormGroup } from '@angular/forms'; }) export class DateTimePickerComponent { entryForm = this.formGroup(); - + formGroup(): FormGroup { return new FormGroup({ date: new FormControl(null), + date2: new FormControl(null), time: new FormControl(null) }) } + save(): void { + + console.log(this.entryForm.value); + + if (this.entryForm.invalid) { + OltUtility.triggerValidators(this.entryForm); + return; + } + + } + + } diff --git a/projects/test-app/src/index.html b/projects/test-app/src/index.html index 9791503..f4f254f 100644 --- a/projects/test-app/src/index.html +++ b/projects/test-app/src/index.html @@ -6,6 +6,8 @@ + + diff --git a/projects/test-app/src/scss/_app-bootstrap.scss b/projects/test-app/src/scss/_app-bootstrap.scss index 648e154..206d5d5 100644 --- a/projects/test-app/src/scss/_app-bootstrap.scss +++ b/projects/test-app/src/scss/_app-bootstrap.scss @@ -90,3 +90,4 @@ $enable-dark-mode: false; // Utilities @import "bootstrap/scss/utilities/api"; + diff --git a/projects/test-app/src/scss/_theme.scss b/projects/test-app/src/scss/_theme.scss index 0f116bf..d82a751 100644 --- a/projects/test-app/src/scss/_theme.scss +++ b/projects/test-app/src/scss/_theme.scss @@ -4,3 +4,5 @@ @import "app-bootstrap"; @import "app-nav"; @import "app-side-bar"; + +@import "ngx-bs-datepicker/ngx-bs-datepicker"; \ No newline at end of file diff --git a/projects/test-app/src/scss/ngx-bs-datepicker/_ngx-bs-datepicker.scss b/projects/test-app/src/scss/ngx-bs-datepicker/_ngx-bs-datepicker.scss new file mode 100644 index 0000000..849000c --- /dev/null +++ b/projects/test-app/src/scss/ngx-bs-datepicker/_ngx-bs-datepicker.scss @@ -0,0 +1,581 @@ +@import 'utils/scss/variables'; +@import 'utils/scss/mixins'; + +/* .bs-datepicker */ +.bs-datepicker { + display: flex; + align-items: stretch; + flex-flow: row wrap; + background: $main-bg; + box-shadow: 0 0 10px 0 $main-box-shadow; + position: relative; + z-index: 1; + + &:after { + clear: both; + content: ''; + display: block; + } + + bs-day-picker { + float: left; + } + + /* button */ + button:hover, + button:focus, + button:active, + input:hover, + input:focus, + input:active, + &-btns button:hover, + &-btns button:focus, + &-btns button:active, + &-predefined-btns button:active, + &-predefined-btns button:focus { + outline: none; + } + + /* .bs-datepicker-head */ + &-head { + min-width: 270px; + height: 50px; + padding: 10px; + border-radius: 3px 3px 0 0; + text-align: justify; + + &:after { + content: ""; + display: inline-block; + vertical-align: top; + width: 100%; + } + + /* .bs-datepicker-head button */ + button { + display: inline-block; + vertical-align: top; + padding: 0; + height: 30px; + line-height: 30px; + border: 0; + background: transparent; + text-align: center; + cursor: pointer; + color: $font-color-01; + transition: 0.3s; + + &[disabled], + &[disabled]:hover, + &[disabled]:active { + background: $disabled-background; + color: $disabled-color; + cursor: not-allowed; + } + + &.previous { + span { + transform: translate(-1px, -1px); + } + } + + &.next { + span { + transform: translate(1px, -1px); + } + } + + &.next, + &.previous { + border-radius: 50%; + width: 30px; + height: 30px; + + span { + font-size: 28px; + line-height: 1; + display: inline-block; + position: relative; + height: 100%; + width: 100%; + border-radius: 50%; + } + } + + &.current { + border-radius: 15px; + max-width: 155px; + padding: 0 13px; + } + } + } + + &-head { + button { + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } + &:active { + background-color: rgba(0, 0, 0, 0.2); + } + } + } + + /* .bs-datepicker-body */ + &-body { + padding: 10px; + border-radius: 0 0 3px 3px; + min-height: 232px; + min-width: 278px; + border: 1px solid $border-color; + + .days.weeks { + position: relative; + z-index: 1; + } + + /* .bs-datepicker-body table */ + table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + + th { + font-size: 13px; + color: $font-color-02; + font-weight: 400; + text-align: center; + } + + td { + color: $font-color-03; + text-align: center; + position: relative; + padding: 0; + + span { + display: block; + margin: 0 auto; + font-size: 13px; + border-radius: 50%; + /*z-index: 1;*/ + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + } + + /* todo: check first :not(.disabled) usage */ + &:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) { + cursor: pointer; + } + + &.is-highlighted:not(.disabled):not(.selected) span, + span.is-highlighted:not(.disabled):not(.selected) { + background-color: $highlighted; + transition: 0s; + } + + &.is-active-other-month:not(.disabled):not(.selected) span, + span.is-active-other-month:not(.disabled):not(.selected) { + background-color: $highlighted; + transition: 0s; + cursor: pointer; + } + + span.disabled, + &.disabled span { + color: $font-color-02; + } + + span.selected, + &.selected span { + color: $font-color-01; + } + + span.is-other-month, + &.is-other-month span { + color: rgba(0, 0, 0, 0.25); + } + + &.active { + position: relative; + + &.select-start:before { + left: 35%; + } + + &.select-end:before { + left: -85%; + } + } + + span.active.select-start:after, + span.active.select-end:after, + &.active.select-start span:after, + &.active.select-end span:after { + content: ""; + display: block; + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + transition: 0.3s; + top: 0; + border-radius: 50%; + } + + &:before, + span:before { + content: ""; + display: block; + position: absolute; + z-index: -1; + top: 6px; + bottom: 6px; + left: -3px; + right: -2px; + box-sizing: content-box; + background: transparent; + } + + &.active.select-start + td.active:before { + left: -20%; + } + + &:last-child.active:before { + border-radius: 0 3px 3px 0; + width: 125%; + left: -25%; + } + + span[class*="select-"], + &[class*="select-"] span { + border-radius: 50%; + color: $font-color-01; + } + } + + /* .bs-datepicker-body table.days */ + &.days { + td, + span { + &.active:not(.select-start):before, + &.in-range:not(.select-start):before { + background: $highlighted; + } + } + + span { + width: 32px; + height: 32px; + line-height: 32px; + + &.select-start { + z-index: 2; + } + &.is-highlighted.in-range:before { + right: 3px; + left: 0; + } + &.in-range.select-end:before { + right: 4px; + left: 0; + } + } + + td { + &.select-start + td.select-end:before, + &.select-start + td.is-highlighted:before, + &.active + td.is-highlighted:before, + &.active + td.select-end:before, + &.in-range + td.is-highlighted:before, + &.in-range + td.select-end:before { + background: $highlighted; + width: 100%; + } + } + } + + /* .bs-datepicker-body table.weeks */ + &.weeks { + tr { + td { + &:nth-child(2).active:before { + border-radius: 3px 0 0 3px; + left: 0; + width: 100%; + } + } + } + } + + &:not(.weeks) { + tr { + td{ + &:first-child:before { + border-radius: 3px 0 0 3px; + } + } + } + } + + &.years { + td { + span { + width: 46px; + height: 46px; + line-height: 45px; + margin: 0 auto; + } + } + + tr:not(:last-child) { + td { + span { + margin-bottom: 8px; + } + } + } + } + + &.months { + td { + height: 52px; + + span { + padding: 6px; + border-radius: 15px; + } + } + } + } + } + + /* .current-timedate */ + .current-timedate { + color: $font-color-03; + font-size: 15px; + text-align: center; + height: 30px; + line-height: 30px; + border-radius: 20px; + border: 1px solid $border-color; + margin-bottom: 10px; + cursor: pointer; + text-transform: uppercase; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + + span:not(:empty):before { + content: ""; + width: 15px; + height: 16px; + display: inline-block; + margin-right: 4px; + vertical-align: text-bottom; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC); + } + } + + /* .bs-datepicker-multiple */ + &-multiple { + border-radius: 4px 0 0 4px; + + & + & { + margin-left: 10px; + } + + .bs-datepicker { + box-shadow: none; + position: relative; + + &:not(:last-child) { + padding-right: 10px; + } + + & + .bs-datepicker:after { + content: ""; + display: block; + width: 14px; + height: 10px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=); + position: absolute; + top: 25px; + left: -8px; + } + + .left { + float: left; + } + + .right { + float: right; + } + } + } + + /* .bs-datepicker-btns */ + &-container { + padding: 15px; + } + + .bs-media-container { + display: flex; + @media(max-width: 768px) { + flex-direction: column; + } + } + + .bs-timepicker-in-datepicker-container { + display: flex; + justify-content: space-around; + } + + /*.bs-datepicker-custom-range */ + &-custom-range { + padding: 15px; + background: $custom-range-bg; + } + + /* .bs-datepicker-predefined-btns */ + &-predefined-btns { + button { + width: 100%; + display: block; + height: 30px; + background-color: $btn-bg2; + border-radius: 4px; + color: $font-color-01; + border: 0; + margin-bottom: 10px; + padding: 0 18px; + text-align: left; + transition: 0.3s; + + &:hover { + background-color: $btn-bg2-hover; + } + } + } + + /* .bs-datepicker-buttons */ + &-buttons { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + padding-top: 10px; + border-top: 1px solid $border-color; + + .btn-default { + margin-left: 10px; + } + + .btn-today-wrapper { + display: flex; + flex-flow: row wrap; + } + + .clear-right, + .today-right { + flex-grow: 0; + } + .clear-left, + .today-left { + flex-grow: 1; + } + + .clear-center, + .today-center { + flex-grow: 0.5; + } + } +} + +/* .bs-timepicker */ +.bs-timepicker { + &-container { + padding: 10px 0; + } + + &-label { + color: $font-color-03; + margin-bottom: 10px; + } + + &-controls { + display: inline-block; + vertical-align: top; + margin-right: 10px; + + button { + width: 20px; + height: 20px; + border-radius: 50%; + border: 0; + background-color: $btn-bg; + color: $font-color-03; + font-size: 16px; + font-weight: 700; + vertical-align: middle; + line-height: 0; + padding: 0; + transition: 0.3s; + + &:hover { + background-color: $btn-bg-hover; + } + } + + input { + width: 35px; + height: 25px; + border-radius: 13px; + text-align: center; + border: 1px solid $border-color; + } + } + + .switch-time-format { + text-transform: uppercase; + min-width: 54px; + height: 25px; + border-radius: 20px; + border: 1px solid $border-color; + background: $main-bg; + color: $font-color-03; + font-size: 13px; + + img { + vertical-align: initial; + margin-left: 4px; + } + } +} + +bs-datepicker-container, +bs-daterangepicker-container { + z-index: 1080; +} + +/* screen size < 1024px */ +@media (max-width: 768px) { + .bs-datepicker { + width: min-content; + justify-content: center; + + &-multiple { + display: flex; + + & + & { + margin-top: 10px; + margin-left: 0; + } + } + } +} + +/* theming */ +@each $name, $color in $theme-list { + @include theming($name, $color); +} diff --git a/projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/mixins.scss b/projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/mixins.scss new file mode 100644 index 0000000..227038f --- /dev/null +++ b/projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/mixins.scss @@ -0,0 +1,141 @@ +@import 'variables'; + +@mixin theming($name, $color) { + .theme-#{$name} { + .bs-datepicker-head { + background-color: $color; + } + + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success { + background-color: $color; + border-color: $color; + } + .btn-success:not(:disabled):not(.disabled):active { + &:focus { + box-shadow: none; + } + } + .btn-success:focus { + box-shadow: none; + } + } + + @if $name == 'green' { + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success:not(:disabled):not(.disabled):active { + background-color: $active-theme-green; + border-color: $active-theme-green; + } + + .btn-success:hover { + background-color: $hover-theme-green; + border-color: $hover-theme-green; + } + } + } + + @if $name == 'blue' { + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success:not(:disabled):not(.disabled):active { + background-color: $active-theme-blue; + border-color: $active-theme-blue; + } + + .btn-success:hover { + background-color: $hover-theme-blue; + border-color: $hover-theme-blue; + } + } + } + + @if $name == 'dark-blue' { + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success:not(:disabled):not(.disabled):active { + background-color: $active-theme-dark-blue; + border-color: $active-theme-dark-blue; + } + + .btn-success:hover { + background-color: $hover-theme-dark-blue; + border-color: $hover-theme-dark-blue; + } + } + } + + @if $name == 'orange' { + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success:not(:disabled):not(.disabled):active { + background-color: $active-theme-orange; + border-color: $active-theme-orange; + } + + .btn-success:hover { + background-color: $hover-theme-orange; + border-color: $hover-theme-orange; + } + } + } + + @if $name == 'red' { + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success:not(:disabled):not(.disabled):active { + background-color: $active-theme-red; + border-color: $active-theme-red; + } + + .btn-success:hover { + background-color: $hover-theme-red; + border-color: $hover-theme-red; + } + } + } + + @if $name == 'default' { + .btn-today-wrapper, .btn-clear-wrapper { + .btn-success:not(:disabled):not(.disabled):active { + background-color: $active-theme-default; + border-color: $active-theme-default; + } + + .btn-success:hover { + background-color: $hover-theme-default; + border-color: $hover-theme-default; + } + } + } + + .bs-datepicker-predefined-btns { + button { + &.selected { + background-color: $color ; + } + } + } + + .bs-datepicker-body { + table { + td { + span.selected, + &.selected span, + span[class*="select-"]:after, + &[class*="select-"] span:after { + background-color: $color; + } + + &.week span { + color: $color; + } + + &.active-week span:hover { + cursor: pointer; + background-color: $color; + color: $font-color-01; + opacity: 0.5; + transition: 0s; + } + } + } + } + } +} diff --git a/projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/variables.scss b/projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/variables.scss new file mode 100644 index 0000000..7fd8932 --- /dev/null +++ b/projects/test-app/src/scss/ngx-bs-datepicker/utils/scss/variables.scss @@ -0,0 +1,50 @@ +$main-bg: #fff !default; +$custom-range-bg: #eee !default; + +$main-box-shadow: #aaa !default; + +$font-color-01: #fff !default; +$font-color-02: #9aaec1 !default; +$font-color-03: #54708b !default; + +$border-color: #e9edf0 !default; +$highlighted: #e9edf0 !default; + +$btn-bg: #e9edf0 !default; +$btn-bg-hover: #d5dadd !default; + +$btn-bg2: #9aaec1 !default; +$btn-bg2-hover: #54708b !default; + +$theme-gray: #777 !default; +$theme-green: #5cb85c !default; +$theme-blue: #5bc0de !default; +$theme-dark-blue: #337ab7 !default; +$theme-red: #d9534f !default; +$theme-orange: #f0ad4e !default; + +$disabled-background: rgba(221, 221, 221, 0.3) !default; +$disabled-color: #f5f5f5 !default; + +$hover-theme-default: #6F6E6E; +$hover-theme-green: #218838; +$hover-theme-blue: #3AB3D7; +$hover-theme-dark-blue: #2C6FA9; +$hover-theme-orange: #FFAC35; +$hover-theme-red: #E33732; + +$active-theme-default: #616161; +$active-theme-green: #1e7e34; +$active-theme-blue: #2AA8CD; +$active-theme-dark-blue: #266498; +$active-theme-orange: #ED9C29; +$active-theme-red: #D23531; + +$theme-list: ( + 'default': $theme-gray, + 'green': $theme-green, + 'blue': $theme-blue, + 'dark-blue': $theme-dark-blue, + 'red': $theme-red, + 'orange': $theme-orange, +) !default; From 6c126863932f313b6734a304a1bda05e7c56ca74 Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Mon, 10 Jul 2023 20:47:14 -0400 Subject: [PATCH 07/12] wip --- projects/olt-core/package.json | 14 ++--- projects/olt-ngx-bootstrap/package.json | 6 +-- .../date-picker/date-picker.component.html | 1 + .../date-picker/date-picker.component.scss | 0 .../date-picker/date-picker.component.spec.ts | 21 ++++++++ .../date-picker/date-picker.component.ts | 52 +++++++++++++++++++ .../src/lib/components/exports.ts | 3 ++ .../src/lib/components/index.ts | 1 + .../src/lib/olt-ngx-bootstrap.module.ts | 2 +- .../test-date-entry.component.html | 26 ++++------ .../test-date-entry.component.ts | 10 +++- .../date-time-picker.component.html | 37 +++++++------ .../date-time-picker.component.ts | 3 +- 13 files changed, 128 insertions(+), 48 deletions(-) create mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html create mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.scss create mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.spec.ts create mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.ts diff --git a/projects/olt-core/package.json b/projects/olt-core/package.json index 5eb0394..a6b9968 100644 --- a/projects/olt-core/package.json +++ b/projects/olt-core/package.json @@ -14,14 +14,14 @@ "angular" ], "peerDependencies": { - "@angular/common": ">=16.0.0 <17.0.0", - "@angular/core": ">=16.0.0 <17.0.0", - "@angular/forms": ">=16.0.0 <17.0.0", - "@angular/platform-browser": ">=16.0.0 <17.0.0", - "@angular/router": ">=16.0.0 <17.0.0", + "@angular/common": ">=15.0.0", + "@angular/core": ">=15.0.0", + "@angular/forms": ">=15.0.0", + "@angular/platform-browser": ">=15.0.0", + "@angular/router": ">=15.0.0", "error-stack-parser": ">=2.0.0 <3.0.0", - "ngx-logger": ">=5.0.11 <6.0.0", - "ngx-toastr": ">=16.0.0 <17.0.0" + "ngx-logger": ">=5.0.0 <6.0.0", + "ngx-toastr": ">=15.0.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/projects/olt-ngx-bootstrap/package.json b/projects/olt-ngx-bootstrap/package.json index 77c5eab..3066af2 100644 --- a/projects/olt-ngx-bootstrap/package.json +++ b/projects/olt-ngx-bootstrap/package.json @@ -1,9 +1,9 @@ { "name": "@outerlimitstech/app-ngx-bootstrap", - "version": "0.0.1", + "version": "16.0.0-beta.1", "peerDependencies": { - "@angular/common": ">=16.0.0 <17.0.0", - "@angular/core": ">=16.0.0 <17.0.0", + "@angular/common": ">=16.0.0", + "@angular/core": ">=16.0.0", "ngx-bootstrap": ">=10.0.0" }, "dependencies": { diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html new file mode 100644 index 0000000..090f520 --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html @@ -0,0 +1 @@ +

date-picker works!

diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.scss b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.spec.ts new file mode 100644 index 0000000..603f369 --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatePickerComponent } from './date-picker.component'; + +describe('DatePickerComponent', () => { + let component: DatePickerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DatePickerComponent] + }); + fixture = TestBed.createComponent(DatePickerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.ts b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.ts new file mode 100644 index 0000000..671ba1e --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.ts @@ -0,0 +1,52 @@ +import { Component, Input, forwardRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +@Component({ + selector: 'olt-ngx-date-picker, [formGroupName] olt-ngx-date-picker, [formGroup] olt-ngx-date-picker', + templateUrl: './date-picker.component.html', + styleUrls: ['./date-picker.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DatePickerComponent), + multi: true + } + ] +}) +export class DatePickerComponent implements ControlValueAccessor { + @Input() min: Date = new Date('0001-01-01T00:00:00Z'); + @Input() max: Date = new Date('9999-12-31T23:59:59Z'); + + value: Date | any | null = null; + + disabled = false; + touched = false; + + onChange: any = () => { }; + onTouched: any = () => { }; + + + writeValue(value: Date | null): void { + this.value = value; + } + + modelChanged(event: any) { + if (event != null) { + this.onChange(new Date(event.toDateString())) + } else { + this.onChange(event); + } + } + + registerOnChange(fn: any): void { + this.onChange = fn; + } + + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } +} diff --git a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts index 12e4e7a..c50c9c8 100644 --- a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts +++ b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts @@ -1,12 +1,15 @@ import { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; import { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; +import { DatePickerComponent } from './date-picker/date-picker.component'; export const DECLARE_COMPONENTS = [ DynamicTableComponent, DateTimeEntryComponent, + DatePickerComponent, ]; export const EXPORT_COMPONENTS = [ DynamicTableComponent, DateTimeEntryComponent, + DatePickerComponent, ]; diff --git a/projects/olt-ngx-bootstrap/src/lib/components/index.ts b/projects/olt-ngx-bootstrap/src/lib/components/index.ts index b2b6c60..391ace7 100644 --- a/projects/olt-ngx-bootstrap/src/lib/components/index.ts +++ b/projects/olt-ngx-bootstrap/src/lib/components/index.ts @@ -1,2 +1,3 @@ export { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; export { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; +export { DatePickerComponent } from './date-picker/date-picker.component'; \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts index 131b4c0..118287c 100644 --- a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -14,7 +14,7 @@ import { DECLARE_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; @NgModule({ declarations: [ - DECLARE_COMPONENTS, + DECLARE_COMPONENTS, DECLARE_MODAL_COMPONENTS ], imports: [ diff --git a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html index 3899443..2bd82c7 100644 --- a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html @@ -1,18 +1,10 @@ -
-
- -
-
- -
- -
-
-
- +
+ +
+
-
\ No newline at end of file +
diff --git a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts index fa75aea..2a7d0fc 100644 --- a/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts @@ -1,6 +1,5 @@ import { Component, Input, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OltBaseFormGroupComponent } from '@olt-core'; // const guid = () => { // function s4() { @@ -24,7 +23,7 @@ import { OltBaseFormGroupComponent } from '@olt-core'; } ] }) -export class TestDateEntryComponent extends OltBaseFormGroupComponent implements ControlValueAccessor { +export class TestDateEntryComponent implements ControlValueAccessor { // @Input() formControlName!: string; @Input() min: Date = new Date('0001-01-01T00:00:00Z'); @Input() max: Date = new Date('9999-12-31T23:59:59Z'); @@ -66,7 +65,14 @@ export class TestDateEntryComponent extends OltBaseFormGroupComponent implements writeValue(value: Date | null): void { console.log('date', value); + // if(value != null && OltUtility.isDate(value)) { + // this.value = new Date(value.toDateString()); + // } else { + // this.value = value; + // } + this.value = value; + // if (this.value === true) { // this.yesOption.nativeElement.checked = false; // } else if (this.value === false) { diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html index 6beed9e..d019c73 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html @@ -1,17 +1,22 @@

date-time-picker works!

-
- -
+ +
+ +
+ + Date3 + + +
-
- +
+ Date2
- +
-
-
- -
- - - \ No newline at end of file +
+
+ +
+ diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts index df83786..0d4eb11 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { OltUtility } from '@olt-core'; @Component({ @@ -14,6 +14,7 @@ export class DateTimePickerComponent { return new FormGroup({ date: new FormControl(null), date2: new FormControl(null), + date3: new FormControl(new Date(), [Validators.required]), time: new FormControl(null) }) } From 2867ed2d6016823b1875a3fc67224d0bf0cc205b Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Mon, 10 Jul 2023 21:03:01 -0400 Subject: [PATCH 08/12] wip --- .../olt-ngx-bootstrap/date-picker/index.ts | 1 + .../date-picker/ng-package.json | 6 +++++ .../date-picker/public-api.ts | 2 ++ .../src/date-picker.component.html | 9 ++++++++ .../src}/date-picker.component.scss | 0 .../src}/date-picker.component.spec.ts | 0 .../src}/date-picker.component.ts | 0 .../date-picker/src/date-picker.module.ts | 23 +++++++++++++++++++ .../date-picker/date-picker.component.html | 1 - .../src/lib/components/exports.ts | 4 +--- .../src/lib/components/index.ts | 1 - projects/test-app/src/app/app.module.ts | 6 +++-- .../date-time-picker.component.html | 3 ++- tsconfig.json | 10 ++++++-- 14 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 projects/olt-ngx-bootstrap/date-picker/index.ts create mode 100644 projects/olt-ngx-bootstrap/date-picker/ng-package.json create mode 100644 projects/olt-ngx-bootstrap/date-picker/public-api.ts create mode 100644 projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.html rename projects/olt-ngx-bootstrap/{src/lib/components/date-picker => date-picker/src}/date-picker.component.scss (100%) rename projects/olt-ngx-bootstrap/{src/lib/components/date-picker => date-picker/src}/date-picker.component.spec.ts (100%) rename projects/olt-ngx-bootstrap/{src/lib/components/date-picker => date-picker/src}/date-picker.component.ts (100%) create mode 100644 projects/olt-ngx-bootstrap/date-picker/src/date-picker.module.ts delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html diff --git a/projects/olt-ngx-bootstrap/date-picker/index.ts b/projects/olt-ngx-bootstrap/date-picker/index.ts new file mode 100644 index 0000000..7e1a213 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/olt-ngx-bootstrap/date-picker/ng-package.json b/projects/olt-ngx-bootstrap/date-picker/ng-package.json new file mode 100644 index 0000000..8ce4c79 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/date-picker/public-api.ts b/projects/olt-ngx-bootstrap/date-picker/public-api.ts new file mode 100644 index 0000000..19502e9 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/public-api.ts @@ -0,0 +1,2 @@ +export * from './src/date-picker.component'; +export * from './src/date-picker.module'; diff --git a/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.html b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.html new file mode 100644 index 0000000..dd87cc3 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.html @@ -0,0 +1,9 @@ +
+ +
+ +
+
diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.scss b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.scss similarity index 100% rename from projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.scss rename to projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.scss diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.spec.ts b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.spec.ts similarity index 100% rename from projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.spec.ts rename to projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.spec.ts diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.ts b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.ts similarity index 100% rename from projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.ts rename to projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.ts diff --git a/projects/olt-ngx-bootstrap/date-picker/src/date-picker.module.ts b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.module.ts new file mode 100644 index 0000000..0155027 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; + +import { DatePickerComponent } from './date-picker.component'; + + +@NgModule({ + declarations: [ + DatePickerComponent + ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + BsDatepickerModule.forRoot(), + ], + exports: [ + DatePickerComponent + ] +}) +export class OltNgxDatePickerModule { } diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html b/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html deleted file mode 100644 index 090f520..0000000 --- a/projects/olt-ngx-bootstrap/src/lib/components/date-picker/date-picker.component.html +++ /dev/null @@ -1 +0,0 @@ -

date-picker works!

diff --git a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts index c50c9c8..dd11f54 100644 --- a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts +++ b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts @@ -1,15 +1,13 @@ import { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; import { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; -import { DatePickerComponent } from './date-picker/date-picker.component'; + export const DECLARE_COMPONENTS = [ DynamicTableComponent, DateTimeEntryComponent, - DatePickerComponent, ]; export const EXPORT_COMPONENTS = [ DynamicTableComponent, DateTimeEntryComponent, - DatePickerComponent, ]; diff --git a/projects/olt-ngx-bootstrap/src/lib/components/index.ts b/projects/olt-ngx-bootstrap/src/lib/components/index.ts index 391ace7..b2b6c60 100644 --- a/projects/olt-ngx-bootstrap/src/lib/components/index.ts +++ b/projects/olt-ngx-bootstrap/src/lib/components/index.ts @@ -1,3 +1,2 @@ export { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; export { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; -export { DatePickerComponent } from './date-picker/date-picker.component'; \ No newline at end of file diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index 834899a..d8ade54 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -3,7 +3,8 @@ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDatepickerConfig, BsDatepickerModule } from 'ngx-bootstrap/datepicker'; -import { OltNgxBootstrapModule } from '@olt-ngx-bootstrap'; +// import { OltNgxBootstrapModule } from '@olt-ngx-bootstrap'; +import { OltNgxDatePickerModule } from '@olt-ngx-bootstrap/date-picker'; import { OltCoreModule } from '@olt-core'; import { AppRoutingModule } from './app-routing.module'; @@ -38,7 +39,8 @@ export function getBsDatepickerConfig(): BsDatepickerConfig { BrowserAnimationsModule, AppRoutingModule, OltCoreModule, - OltNgxBootstrapModule, + // OltNgxBootstrapModule, + OltNgxDatePickerModule, BsDatepickerModule.forRoot(), ], providers: [ diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html index d019c73..a17e1d4 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html @@ -8,7 +8,8 @@
Date3 - + +
diff --git a/tsconfig.json b/tsconfig.json index 9d693b4..92dfecb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,9 +18,15 @@ "@olt-core": [ "dist/olt-core" ], + "@olt-ngx-bootstrap/*": [ + "projects/olt-ngx-bootstrap/*", + ], "@olt-ngx-bootstrap": [ - "dist/olt-ngx-bootstrap" - ] + "projects/olt-ngx-bootstrap", + ] + // "@olt-ngx-bootstrap": [ + // "dist/olt-ngx-bootstrap" + // ] }, "importHelpers": true, "target": "ES2022", From d7c42642b33f7908e4d5b7cc64c8b80a872f78dd Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Tue, 11 Jul 2023 08:35:35 -0400 Subject: [PATCH 09/12] working test sample --- .../date-time-picker/index.ts | 1 + .../date-time-picker/ng-package.json | 6 + .../date-time-picker/public-api.ts | 2 + .../src/date-time-picker.component.html | 9 ++ .../src/date-time-picker.component.scss | 0 .../src/date-time-picker.component.spec.ts | 21 +++ .../src/date-time-picker.component.ts | 53 +++++++ .../src/date-time-picker.module.ts | 24 +++ projects/olt-ngx-bootstrap/package.json | 2 +- .../src/lib/olt-ngx-bootstrap.module.ts | 1 + projects/test-app/src/app/app.module.ts | 11 +- .../test-date-time-entry.component.html | 32 ++++ .../test-date-time-entry.component.scss | 0 .../test-date-time-entry.component.spec.ts | 21 +++ .../test-date-time-entry.component.ts | 137 ++++++++++++++++++ .../app/directives/bs-datepicker.component.ts | 69 +++++++++ .../src/app/directives/date-mask.directive.ts | 30 ++++ .../date-time-picker.component.html | 23 +++ .../date-time-picker.component.ts | 19 ++- 19 files changed, 455 insertions(+), 6 deletions(-) create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/index.ts create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/ng-package.json create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/public-api.ts create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.html create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.scss create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.spec.ts create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts create mode 100644 projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.module.ts create mode 100644 projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html create mode 100644 projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.scss create mode 100644 projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.spec.ts create mode 100644 projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.ts create mode 100644 projects/test-app/src/app/directives/bs-datepicker.component.ts create mode 100644 projects/test-app/src/app/directives/date-mask.directive.ts diff --git a/projects/olt-ngx-bootstrap/date-time-picker/index.ts b/projects/olt-ngx-bootstrap/date-time-picker/index.ts new file mode 100644 index 0000000..7e1a213 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/olt-ngx-bootstrap/date-time-picker/ng-package.json b/projects/olt-ngx-bootstrap/date-time-picker/ng-package.json new file mode 100644 index 0000000..8ce4c79 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/date-time-picker/public-api.ts b/projects/olt-ngx-bootstrap/date-time-picker/public-api.ts new file mode 100644 index 0000000..3c71542 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/public-api.ts @@ -0,0 +1,2 @@ +export * from './src/date-time-picker.component'; +export * from './src/date-time-picker.module'; diff --git a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.html b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.html new file mode 100644 index 0000000..9785ee6 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.html @@ -0,0 +1,9 @@ +
+ +
+ +
+
diff --git a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.scss b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.spec.ts b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.spec.ts new file mode 100644 index 0000000..8bf6096 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DateTimePickerComponent } from './date-time-picker.component'; + +describe('DateTimePickerComponent', () => { + let component: DateTimePickerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DateTimePickerComponent] + }); + fixture = TestBed.createComponent(DateTimePickerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts new file mode 100644 index 0000000..4e52441 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, forwardRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +@Component({ + selector: 'olt-ngx-date-time-picker, [formGroupName] olt-ngx-date-time-picker, [formGroup] olt-ngx-date-time-picker', + templateUrl: './date-time-picker.component.html', + styleUrls: ['./date-time-picker.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DateTimePickerComponent), + multi: true + } + ] +}) +export class DateTimePickerComponent implements ControlValueAccessor { + @Input() min: Date = new Date('0001-01-01T00:00:00Z'); + @Input() max: Date = new Date('9999-12-31T23:59:59Z'); + + value: Date | any | null = null; + + disabled = false; + touched = false; + + onChange: any = () => { }; + onTouched: any = () => { }; + + + writeValue(value: Date | null): void { + this.value = value; + } + + dateChanged(event: any) { + if (event != null) { + this.onChange(new Date(event.toDateString())) + } else { + this.onChange(event); + } + } + + registerOnChange(fn: any): void { + this.onChange = fn; + } + + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + +} diff --git a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.module.ts b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.module.ts new file mode 100644 index 0000000..95f8673 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { DateTimePickerComponent } from './date-time-picker.component'; + + +@NgModule({ + declarations: [ + DateTimePickerComponent + ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + BsDatepickerModule.forRoot(), + TimepickerModule.forRoot(), + ], + exports: [ + DateTimePickerComponent + ] +}) +export class OltNgxDateTimePickerModule { } diff --git a/projects/olt-ngx-bootstrap/package.json b/projects/olt-ngx-bootstrap/package.json index 3066af2..bc56a30 100644 --- a/projects/olt-ngx-bootstrap/package.json +++ b/projects/olt-ngx-bootstrap/package.json @@ -1,5 +1,5 @@ { - "name": "@outerlimitstech/app-ngx-bootstrap", + "name": "@outerlimitstech/ngx-bootstrap", "version": "16.0.0-beta.1", "peerDependencies": { "@angular/common": ">=16.0.0", diff --git a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts index 118287c..5bc7623 100644 --- a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -12,6 +12,7 @@ import { DECLARE_MODAL_COMPONENTS, EXPORT_MODAL_COMPONENTS } from './modals/expo import { DECLARE_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; + @NgModule({ declarations: [ DECLARE_COMPONENTS, diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index d8ade54..88acff8 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -14,6 +14,10 @@ import { DateTimePickerComponent } from './views/ngx-bootstrap/date-time-picker/ import { LandingComponent } from './views/landing/landing.component'; import { NavBarComponent } from './components/nav-bar/nav-bar.component'; import { TestDateEntryComponent } from './components/test-date-entry/test-date-entry.component'; +import { TestDateTimeEntryComponent } from './components/test-date-time-entry/test-date-time-entry.component'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { DateMaskInputDirective } from './directives/date-mask.directive'; +import { OltBsDatepickerDirective, OltNgxBsDatepickerInputDirective } from './directives/bs-datepicker.component'; export function getBsDatepickerConfig(): BsDatepickerConfig { return Object.assign(new BsDatepickerConfig(), { @@ -30,7 +34,11 @@ export function getBsDatepickerConfig(): BsDatepickerConfig { LandingComponent, SideBarComponent, NavBarComponent, - TestDateEntryComponent + TestDateEntryComponent, + TestDateTimeEntryComponent, + DateMaskInputDirective, + OltNgxBsDatepickerInputDirective, + OltBsDatepickerDirective ], imports: [ BrowserModule, @@ -42,6 +50,7 @@ export function getBsDatepickerConfig(): BsDatepickerConfig { // OltNgxBootstrapModule, OltNgxDatePickerModule, BsDatepickerModule.forRoot(), + TimepickerModule.forRoot(), ], providers: [ { diff --git a/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html new file mode 100644 index 0000000..2b0f2ae --- /dev/null +++ b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html @@ -0,0 +1,32 @@ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ diff --git a/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.scss b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.spec.ts b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.spec.ts new file mode 100644 index 0000000..eeb4041 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestDateTimeEntryComponent } from './test-date-time-entry.component'; + +describe('TestDateTimeEntryComponent', () => { + let component: TestDateTimeEntryComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestDateTimeEntryComponent] + }); + fixture = TestBed.createComponent(TestDateTimeEntryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.ts b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.ts new file mode 100644 index 0000000..bfe4763 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.ts @@ -0,0 +1,137 @@ +import { Component, Input, forwardRef } from '@angular/core'; +import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms'; +import { OltUtility } from '@olt-core'; + +@Component({ + selector: 'olt-test-date-time-entry, [formGroupName] olt-test-date-time-entry, [formGroup] olt-test-date-time-entry', + templateUrl: './test-date-time-entry.component.html', + styleUrls: ['./test-date-time-entry.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TestDateTimeEntryComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => TestDateTimeEntryComponent), + multi: true, + } + ] +}) +export class TestDateTimeEntryComponent implements ControlValueAccessor, Validator { + @Input() placeholder: string | null = "mm/dd/yyyy"; + @Input() min: Date = new Date('0001-01-01T00:00:00Z'); + @Input() max: Date = new Date('9999-12-31T23:59:59Z'); + @Input() showMeridian = true; + + + dateValue: Date | any | null = null; + timeValue: Date | any | null = null; + _timeValue: Date | any | null = null; + + disabled = false; + //touched = false; + + onChange: any = () => { }; + onTouched: any = () => { }; + onValidatorChange?: any = () => { }; + + + writeValue(value: Date | null): void { + console.log('writeValue', value, value?.toLocaleTimeString()); + this._timeValue = value; + this.dateValue = value; + this.timeValue = value; + } + + valueChanged(date: Date | null, time: Date | null){ + if (date != null && time != null) { + this.dateValue = OltUtility.combineDateAndTime(new Date(date.toDateString()), time); + this.onChange(this.dateValue); + return; + } + this.onChange(null); + } + + dateChanged(event: Date | null) { + this.valueChanged(event, this.timeValue); + } + + timeChanged(event: Date | null) { + if (this._timeValue?.toLocaleTimeString() != event?.toLocaleTimeString()) { + this._timeValue = event; + this.valueChanged(this.dateValue, event); + } + } + + registerOnChange(fn: any): void { + this.onChange = fn; + } + + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + + validate(control: AbstractControl): ValidationErrors | null { + console.log('validate', this.dateValue, control); + + + if (this.dateValue != null) { + const maxTime = this.max?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); + const minTime = this.min?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); + + + if (this.dateValue < this.min) { + + if (new Date(this.dateValue.toLocaleDateString()) == new Date(this.min.toLocaleDateString())){ + return { minDateTime : { valid: false, message: `Time is before ${minTime}` } }; + } else{ + return { minDateTime : { valid: false, message: `Date/Time is before ${this.min?.toLocaleDateString()} ${minTime}` } }; + } + + } else if (this.dateValue > this.max) { + + if (new Date(this.dateValue.toLocaleDateString()) == new Date(this.max.toLocaleDateString())){ + return { minDateTime : { valid: false, message: `Time is after ${maxTime}` } }; + } else{ + return { minDateTime : { valid: false, message: `Date/Time is after ${this.max?.toLocaleDateString()} ${maxTime}` } }; + } + + } + } + + + const invalidDate = this.dateValue == null && this.timeValue != null; + const invalidTime = this.dateValue != null && this.timeValue == null; + + if (invalidDate) { + return { invalidDate: { valid: false, message: 'Invalid Date' } }; + } + + if (invalidTime) { + return { invalidTime: { valid: false, message: 'Invalid Time' } }; } + + + + return null; + } + registerOnValidatorChange?(fn: () => void): void { + this.onValidatorChange = fn; + } + + // @HostListener('window:keydown', ['$event']) + // onKeyDown(event: KeyboardEvent) { + // console.log(event); + + // // if (this.appMaskValue && (this.appMaskValue.length === 2 || this.appMaskValue.length === 5) && event.key !== 'Backspace') { + // // this.renderer.setProperty(this.elRef.nativeElement, 'value', this.appMaskValue + '/'); + // // } + // } + + +} diff --git a/projects/test-app/src/app/directives/bs-datepicker.component.ts b/projects/test-app/src/app/directives/bs-datepicker.component.ts new file mode 100644 index 0000000..c3f0566 --- /dev/null +++ b/projects/test-app/src/app/directives/bs-datepicker.component.ts @@ -0,0 +1,69 @@ +import { ChangeDetectorRef, Directive, ElementRef, Host, Input, Renderer2 } from "@angular/core"; +import { AbstractControl, ValidationErrors } from '@angular/forms'; +import { BsDatepickerInputDirective, BsLocaleService } from 'ngx-bootstrap/datepicker'; +import { + isAfter, + isBefore, + isDate, + isDateValid, + } from 'ngx-bootstrap/chronos'; + + +import { BsDatepickerDirective } from "ngx-bootstrap/datepicker"; + +@Directive({ + selector: '[oltDatepicker]', + exportAs: 'oltDatepicker' +}) +export class OltBsDatepickerDirective extends BsDatepickerDirective { + +} + + +@Directive({ + selector: `input[oltDatepicker]`, +}) +export class OltNgxBsDatepickerInputDirective extends BsDatepickerInputDirective { +@Input() dateMaskValue: string | Date | null = null; +private _oltPicker: OltBsDatepickerDirective; + +constructor( + @Host() picker: OltBsDatepickerDirective, + localeService: BsLocaleService, + renderer: Renderer2, + elRef: ElementRef, + changeDetection: ChangeDetectorRef) { + super(picker, localeService, renderer, elRef, changeDetection); + this._oltPicker = picker; +} + + override validate(c: AbstractControl): ValidationErrors | null { + const _value: Date | string = c.value; + + if (_value === null || _value === undefined || _value === '') { + return null; + } + + if (isDate(_value)) { + const _isDateValid = isDateValid(_value); + if (!_isDateValid) { + return { bsDate: { invalid: _value } }; + } + + if (this._oltPicker && this._oltPicker.minDate && isBefore(_value, this._oltPicker.minDate, 'date')) { + this.writeValue(this._oltPicker.minDate); + + return { bsDate: { minDate: this._oltPicker.minDate } }; + } + + if (this._oltPicker && this._oltPicker.maxDate && isAfter(_value, this._oltPicker.maxDate, 'date')) { + this.writeValue(this._oltPicker.maxDate); + + return { bsDate: { maxDate: this._oltPicker.maxDate } }; + } + } + + return null; + } +} + diff --git a/projects/test-app/src/app/directives/date-mask.directive.ts b/projects/test-app/src/app/directives/date-mask.directive.ts new file mode 100644 index 0000000..6e6f609 --- /dev/null +++ b/projects/test-app/src/app/directives/date-mask.directive.ts @@ -0,0 +1,30 @@ +import { Directive, Input, HostListener, ElementRef } from '@angular/core'; + + + + + +// https://medium.com/@victor.loh95/create-date-masking-custom-directive-for-ngbdatepicker-ff4cc73097c1 + + + +@Directive({ + selector: '[dateMaskInput]' +}) +export class DateMaskInputDirective { +@Input() dateMaskValue: string | Date | null = null; + +constructor( + private elRef: ElementRef, + ) { } + +@HostListener('window:keydown', ['$event']) + handleKeyDown(event: KeyboardEvent) { + console.log(this.dateMaskValue, event); + console.log(this.elRef.nativeElement) + // if ((this.dateMaskValue?.length === 2 || this.dateMaskValue?.length === 5) && event.key !== 'Backspace') { + // this.renderer.setProperty(this.elRef.nativeElement, 'value', this.dateMaskValue + '/'); + // } + } +} + diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html index a17e1d4..4b0f2ea 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html @@ -26,6 +26,29 @@
+ +
+ + Date/Time 1 + + +
+ +
+ + Date/Time 2 + + +
+ + +
+ + Time Only (Local) + + +
+
+
+
+
+ +
+ +
+
+
+ +
+
+ diff --git a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts index 4e52441..35c5941 100644 --- a/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts @@ -1,8 +1,9 @@ import { Component, Input, forwardRef } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms'; +import { OltUtility } from '@olt-core'; @Component({ - selector: 'olt-ngx-date-time-picker, [formGroupName] olt-ngx-date-time-picker, [formGroup] olt-ngx-date-time-picker', + selector: 'olt-ngx-datetime-picker, [formGroupName] olt-ngx-datetime-picker, [formGroup] olt-ngx-datetime-picker', templateUrl: './date-time-picker.component.html', styleUrls: ['./date-time-picker.component.scss'], providers: [ @@ -13,29 +14,48 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; } ] }) -export class DateTimePickerComponent implements ControlValueAccessor { +export class DateTimePickerComponent implements ControlValueAccessor, Validator { + @Input() placeholder: string | null = "mm/dd/yyyy"; @Input() min: Date = new Date('0001-01-01T00:00:00Z'); - @Input() max: Date = new Date('9999-12-31T23:59:59Z'); - - value: Date | any | null = null; + @Input() max: Date = new Date('9999-12-31T23:59:59Z'); + + dateValue: Date | any | null = null; + timeValue: Date | any | null = null; + _timeValue: Date | any | null = null; + disabled = false; - touched = false; onChange: any = () => { }; onTouched: any = () => { }; + onValidatorChange?: any = () => { }; - writeValue(value: Date | null): void { - this.value = value; + writeValue(value: Date | null): void { + console.log('writeValue', value, value?.toLocaleTimeString()); + this._timeValue = value; + this.dateValue = value; + this.timeValue = value; } - dateChanged(event: any) { - if (event != null) { - this.onChange(new Date(event.toDateString())) - } else { - this.onChange(event); - } + valueChanged(date: Date | null, time: Date | null){ + if (date != null && time != null) { + this.dateValue = OltUtility.combineDateAndTime(new Date(date.toDateString()), time); + this.onChange(this.dateValue); + return; + } + this.onChange(null); + } + + dateChanged(event: Date | null) { + this.valueChanged(event, this.timeValue); + } + + timeChanged(event: Date | null) { + if (this._timeValue?.toLocaleTimeString() != event?.toLocaleTimeString()) { + this._timeValue = event; + this.valueChanged(this.dateValue, event); + } } registerOnChange(fn: any): void { @@ -50,4 +70,61 @@ export class DateTimePickerComponent implements ControlValueAccessor { this.disabled = isDisabled; } + validate(control: AbstractControl): ValidationErrors | null { + console.log('validate', this.dateValue, control); + + + if (this.dateValue != null) { + const maxTime = this.max?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); + const minTime = this.min?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); + + + if (this.dateValue < this.min) { + + if (new Date(this.dateValue.toLocaleDateString()) == new Date(this.min.toLocaleDateString())){ + return { minDateTime : { valid: false, message: `Time is before ${minTime}` } }; + } else{ + return { minDateTime : { valid: false, message: `Date/Time is before ${this.min?.toLocaleDateString()} ${minTime}` } }; + } + + } else if (this.dateValue > this.max) { + + if (new Date(this.dateValue.toLocaleDateString()) == new Date(this.max.toLocaleDateString())){ + return { minDateTime : { valid: false, message: `Time is after ${maxTime}` } }; + } else{ + return { minDateTime : { valid: false, message: `Date/Time is after ${this.max?.toLocaleDateString()} ${maxTime}` } }; + } + + } + } + + + const invalidDate = this.dateValue == null && this.timeValue != null; + const invalidTime = this.dateValue != null && this.timeValue == null; + + if (invalidDate) { + return { invalidDate: { valid: false, message: 'Invalid Date' } }; + } + + if (invalidTime) { + return { invalidTime: { valid: false, message: 'Invalid Time' } }; } + + + + return null; + } + registerOnValidatorChange?(fn: () => void): void { + this.onValidatorChange = fn; + } + + // @HostListener('window:keydown', ['$event']) + // onKeyDown(event: KeyboardEvent) { + // console.log(event); + + // // if (this.appMaskValue && (this.appMaskValue.length === 2 || this.appMaskValue.length === 5) && event.key !== 'Backspace') { + // // this.renderer.setProperty(this.elRef.nativeElement, 'value', this.appMaskValue + '/'); + // // } + // } + + } diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index 88acff8..cb908a0 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDatepickerConfig, BsDatepickerModule } from 'ngx-bootstrap/datepicker'; // import { OltNgxBootstrapModule } from '@olt-ngx-bootstrap'; + import { OltNgxDatePickerModule } from '@olt-ngx-bootstrap/date-picker'; +import { OltNgxDateTimePickerModule } from '@olt-ngx-bootstrap/date-time-picker'; + import { OltCoreModule } from '@olt-core'; import { AppRoutingModule } from './app-routing.module'; @@ -15,10 +18,11 @@ import { LandingComponent } from './views/landing/landing.component'; import { NavBarComponent } from './components/nav-bar/nav-bar.component'; import { TestDateEntryComponent } from './components/test-date-entry/test-date-entry.component'; import { TestDateTimeEntryComponent } from './components/test-date-time-entry/test-date-time-entry.component'; -import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { TimepickerConfig, TimepickerModule } from 'ngx-bootstrap/timepicker'; import { DateMaskInputDirective } from './directives/date-mask.directive'; import { OltBsDatepickerDirective, OltNgxBsDatepickerInputDirective } from './directives/bs-datepicker.component'; + export function getBsDatepickerConfig(): BsDatepickerConfig { return Object.assign(new BsDatepickerConfig(), { dateInputFormat: 'M/D/YYYY', @@ -27,6 +31,22 @@ export function getBsDatepickerConfig(): BsDatepickerConfig { }); } +export function getBsTimepickerConfig(): TimepickerConfig { + return Object.assign(new TimepickerConfig(), { + hourStep: 2, + minuteStep: 10, + showMeridian: false, + readonlyInput: false, + mousewheel: true, + showMinutes: true, + showSeconds: false, + showSpinners: false, + labelHours: 'Hours', + labelMinutes: 'Minutes', + labelSeconds: 'Seconds' + }); +} + @NgModule({ declarations: [ AppComponent, @@ -49,6 +69,7 @@ export function getBsDatepickerConfig(): BsDatepickerConfig { OltCoreModule, // OltNgxBootstrapModule, OltNgxDatePickerModule, + OltNgxDateTimePickerModule, BsDatepickerModule.forRoot(), TimepickerModule.forRoot(), ], @@ -56,7 +77,11 @@ export function getBsDatepickerConfig(): BsDatepickerConfig { { provide: BsDatepickerConfig, useFactory: getBsDatepickerConfig - }, + }, + // { + // provide: TimepickerConfig, + // useFactory: getBsTimepickerConfig + // }, ], bootstrap: [AppComponent] }) diff --git a/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html index 2b0f2ae..498aa71 100644 --- a/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html +++ b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html @@ -22,7 +22,6 @@
Date/Time 1 - +
Date/Time 2 - +
diff --git a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts index 427a8fb..16f0e2f 100644 --- a/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts @@ -4,7 +4,7 @@ import { OltUtility } from '@olt-core'; @Component({ templateUrl: './date-time-picker.component.html', - styleUrls: ['./date-time-picker.component.scss'] + styleUrls: ['./date-time-picker.component.scss'], }) export class DateTimePickerComponent implements OnInit { From 69444d4fb39bcbddc025424a4e9dbbad50390319 Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Tue, 11 Jul 2023 18:34:35 -0400 Subject: [PATCH 11/12] clean build --- README.md | 6 +++ README.md.bak.txt | 14 ------ package.json | 2 +- projects/olt-core/README.md | 8 ++++ projects/olt-core/package.json | 2 +- .../src/lib/enums/modal-input-type.enum.ts | 4 +- projects/olt-ngx-bootstrap/README.md | 10 +--- .../olt-ngx-bootstrap/html-table/index.ts | 1 + .../html-table/ng-package.json | 6 +++ .../html-table/public-api.ts | 2 + .../src}/dynamic-table.component.html | 0 .../src}/dynamic-table.component.scss | 0 .../src}/dynamic-table.component.spec.ts | 0 .../src}/dynamic-table.component.ts | 4 +- .../html-table/src/table.module.ts | 23 +++++++++ projects/olt-ngx-bootstrap/package.json | 2 +- .../date-time-entry.component.html | 25 ---------- .../date-time-entry.component.scss | 0 .../date-time-entry.component.spec.ts | 23 --------- .../date-time-entry.component.ts | 47 ------------------- .../src/lib/components/exports.ts | 13 ----- .../src/lib/components/index.ts | 2 - .../src/lib/modals/exports.ts | 2 - .../input-modal/input-modal.component.html | 8 ++-- .../src/lib/olt-ngx-bootstrap.module.ts | 26 +++------- projects/olt-ngx-bootstrap/src/public-api.ts | 1 - projects/test-app/src/app/app.module.ts | 2 +- 27 files changed, 66 insertions(+), 167 deletions(-) create mode 100644 README.md delete mode 100644 README.md.bak.txt create mode 100644 projects/olt-ngx-bootstrap/html-table/index.ts create mode 100644 projects/olt-ngx-bootstrap/html-table/ng-package.json create mode 100644 projects/olt-ngx-bootstrap/html-table/public-api.ts rename projects/olt-ngx-bootstrap/{src/lib/components/dynamic-table => html-table/src}/dynamic-table.component.html (100%) rename projects/olt-ngx-bootstrap/{src/lib/components/dynamic-table => html-table/src}/dynamic-table.component.scss (100%) rename projects/olt-ngx-bootstrap/{src/lib/components/dynamic-table => html-table/src}/dynamic-table.component.spec.ts (100%) rename projects/olt-ngx-bootstrap/{src/lib/components/dynamic-table => html-table/src}/dynamic-table.component.ts (94%) create mode 100644 projects/olt-ngx-bootstrap/html-table/src/table.module.ts delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.html delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.scss delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.spec.ts delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/exports.ts delete mode 100644 projects/olt-ngx-bootstrap/src/lib/components/index.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..d8dec3d --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ + + +# OLT Angular Application Libraries + +[Base Core](./projects//olt-core//README.md) +[ngx-boostrap components](./projects/olt-ngx-bootstrap//README.md) diff --git a/README.md.bak.txt b/README.md.bak.txt deleted file mode 100644 index 546adc7..0000000 --- a/README.md.bak.txt +++ /dev/null @@ -1,14 +0,0 @@ - - -# OLT Angular Library - -_This library contains common Angular components, models, directives, and utilities._ - -## Model Definitions - -_Some of the models work in conjunction with the OLT Core Library Json Models_ - -| TypeScript | OLT Core Model | Definition | -| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -| [Paged](./projects/olt-core/src/lib/models/paged.model.ts) | [OltPagedJson](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/Json/OltPagedJson.cs) | Paged Result | -| [PersonName](./projects/olt-core/src/lib/models/person-name.model.ts) | [OltPersonName](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/PersonName/OltPersonName.cs) | Person's Name with (F/M/L/S) | diff --git a/package.json b/package.json index cf7284c..3694bb8 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "watch-core": "ng build olt-core --watch --configuration development", "watch-ngx-bootstrap": "ng build olt-ngx-bootstrap --watch --configuration development", "test": "ng test", - "postbuild": "xcopy \"projects\\olt-core\\README.md\" \".\\dist\\olt-core\" /Y" + "postbuild": "xcopy \"projects\\olt-core\\README.md\" \".\\dist\\olt-core\" /Y && xcopy \"projects\\olt-ngx-bootstrap\\README.md\" \".\\dist\\olt-ngx-bootstrap\" /Y" }, "private": true, "dependencies": { diff --git a/projects/olt-core/README.md b/projects/olt-core/README.md index 83277bb..6e085f7 100644 --- a/projects/olt-core/README.md +++ b/projects/olt-core/README.md @@ -6,5 +6,13 @@ _Components that utilize ngx-bootstrap._ +## Models + +_Some of the models work in conjunction with the OLT Core Library Json Models_ + +| TypeScript | OLT Core Model | Definition | +| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| [Paged](./src/lib/models/paged.model.ts) | [OltPagedJson](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/Json/OltPagedJson.cs) | Paged Result | +| [PersonName](./src/lib/models/person-name.model.ts) | [OltPersonName](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/PersonName/OltPersonName.cs) | Person's Name with (F/M/L/S) | diff --git a/projects/olt-core/package.json b/projects/olt-core/package.json index a6b9968..b81d996 100644 --- a/projects/olt-core/package.json +++ b/projects/olt-core/package.json @@ -1,6 +1,6 @@ { "name": "@outerlimitstech/ngx-app-core", - "version": "16.0.0-beta.1", + "version": "16.0.0-beta.2", "description": "Common Angular components, models, etc. for OuterLimits Technologies applications", "bugs": "https://github.com/OuterlimitsTech/olt-angular-libraries/issues", "homepage": "https://github.com/OuterlimitsTech/olt-angular-libraries#readme", diff --git a/projects/olt-core/src/lib/enums/modal-input-type.enum.ts b/projects/olt-core/src/lib/enums/modal-input-type.enum.ts index 4095c06..9d64053 100644 --- a/projects/olt-core/src/lib/enums/modal-input-type.enum.ts +++ b/projects/olt-core/src/lib/enums/modal-input-type.enum.ts @@ -1,6 +1,4 @@ export const enum ModalInputTypeEnum { Text = 'text', - TextArea = 'text-area', - DatePicker = 'datepicker', - DateTimePicker = 'datetimepicker', + TextArea = 'text-area' } diff --git a/projects/olt-ngx-bootstrap/README.md b/projects/olt-ngx-bootstrap/README.md index 546adc7..b96f9e0 100644 --- a/projects/olt-ngx-bootstrap/README.md +++ b/projects/olt-ngx-bootstrap/README.md @@ -1,14 +1,8 @@ -# OLT Angular Library +# @outerlimitstech/ngx-bootstrap -_This library contains common Angular components, models, directives, and utilities._ +Extension Library for [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/) -## Model Definitions -_Some of the models work in conjunction with the OLT Core Library Json Models_ -| TypeScript | OLT Core Model | Definition | -| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -| [Paged](./projects/olt-core/src/lib/models/paged.model.ts) | [OltPagedJson](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/Json/OltPagedJson.cs) | Paged Result | -| [PersonName](./projects/olt-core/src/lib/models/person-name.model.ts) | [OltPersonName](https://github.com/OuterlimitsTech/olt-dotnet-core/blob/master/src/OLT.Core.Common/Models/PersonName/OltPersonName.cs) | Person's Name with (F/M/L/S) | diff --git a/projects/olt-ngx-bootstrap/html-table/index.ts b/projects/olt-ngx-bootstrap/html-table/index.ts new file mode 100644 index 0000000..7e1a213 --- /dev/null +++ b/projects/olt-ngx-bootstrap/html-table/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/olt-ngx-bootstrap/html-table/ng-package.json b/projects/olt-ngx-bootstrap/html-table/ng-package.json new file mode 100644 index 0000000..8ce4c79 --- /dev/null +++ b/projects/olt-ngx-bootstrap/html-table/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/html-table/public-api.ts b/projects/olt-ngx-bootstrap/html-table/public-api.ts new file mode 100644 index 0000000..5adc146 --- /dev/null +++ b/projects/olt-ngx-bootstrap/html-table/public-api.ts @@ -0,0 +1,2 @@ +export * from './src/dynamic-table.component'; +export * from './src/table.module'; diff --git a/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.html b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.html similarity index 100% rename from projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.html rename to projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.html diff --git a/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.scss b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.scss similarity index 100% rename from projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.scss rename to projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.scss diff --git a/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.spec.ts b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.spec.ts similarity index 100% rename from projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.spec.ts rename to projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.spec.ts diff --git a/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.ts b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.ts similarity index 94% rename from projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.ts rename to projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.ts index f8efc02..bdf0322 100644 --- a/projects/olt-ngx-bootstrap/src/lib/components/dynamic-table/dynamic-table.component.ts +++ b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.ts @@ -3,14 +3,14 @@ import { IPaged, IPagerChangeEvent, PagerChangeEvent } from '@olt-core'; import { timer } from 'rxjs'; @Component({ - selector: 'olt-dynamic-table', + selector: 'olt-dynamic-table, olt-ngx-table', templateUrl: './dynamic-table.component.html', styleUrls: ['./dynamic-table.component.scss'] }) export class DynamicTableComponent implements OnChanges { @Input() loading = false; @Input() showSizes = true; - @Input() paged!: IPaged; + @Input() paged!: IPaged; // = { page: 1, size: 10, count: 0, data: [] }; @Input() tableCss = 'table table-striped table-hover'; @Input() tableResponsiveCss = 'table-responsive-xl'; @Input() showPager = true; diff --git a/projects/olt-ngx-bootstrap/html-table/src/table.module.ts b/projects/olt-ngx-bootstrap/html-table/src/table.module.ts new file mode 100644 index 0000000..f857635 --- /dev/null +++ b/projects/olt-ngx-bootstrap/html-table/src/table.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DynamicTableComponent } from './dynamic-table.component'; +import { PaginationModule } from 'ngx-bootstrap/pagination'; +import { OltCoreModule } from '@olt-core'; +import { FormsModule } from '@angular/forms'; + + +@NgModule({ + declarations: [ + DynamicTableComponent + ], + imports: [ + CommonModule, + FormsModule, + PaginationModule.forRoot(), + OltCoreModule + ], + exports: [ + DynamicTableComponent + ] +}) +export class OltNgxTableModule { } diff --git a/projects/olt-ngx-bootstrap/package.json b/projects/olt-ngx-bootstrap/package.json index bc56a30..83996e3 100644 --- a/projects/olt-ngx-bootstrap/package.json +++ b/projects/olt-ngx-bootstrap/package.json @@ -1,6 +1,6 @@ { "name": "@outerlimitstech/ngx-bootstrap", - "version": "16.0.0-beta.1", + "version": "16.0.0-beta.2", "peerDependencies": { "@angular/common": ">=16.0.0", "@angular/core": ">=16.0.0", diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.html b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.html deleted file mode 100644 index d2580b7..0000000 --- a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.html +++ /dev/null @@ -1,25 +0,0 @@ - -
-
- - Date -
- -
- -
-
- -
-
- - Time - - - -
-
- \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.scss b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.spec.ts b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.spec.ts deleted file mode 100644 index a4f7778..0000000 --- a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DateTimeEntryComponent } from './date-time-entry.component'; - -describe('DateTimeEntryComponent', () => { - let component: DateTimeEntryComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ DateTimeEntryComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(DateTimeEntryComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts b/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts deleted file mode 100644 index 497edea..0000000 --- a/projects/olt-ngx-bootstrap/src/lib/components/date-time-entry/date-time-entry.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { map, merge } from 'rxjs'; -import { OltBaseFormGroupComponent, OltUtility } from '@olt-core'; - -@Component({ - selector: 'olt-date-time-entry, [formGroupName] olt-date-time-entry, [formGroup] olt-date-time-entry', - templateUrl: './date-time-entry.component.html', - styleUrls: ['./date-time-entry.component.scss'] -}) -export class DateTimeEntryComponent extends OltBaseFormGroupComponent implements OnInit { - @Input() min: Date = new Date('0001-01-01T00:00:00Z'); - @Input() max: Date = new Date('9999-12-31T23:59:59Z'); - @Output() changed = new EventEmitter(); - - constructor() { super(); } - - ngOnInit(): void { - this.formGroup.addControl('dateTime', new FormControl(null)); - this.unsub = merge( - this.formGroup.get('date')!.valueChanges.pipe(map((value) => ({ date: value, time: this.formGroup.get('time')?.value, timeChg: false }))), - this.formGroup.get('time')!.valueChanges.pipe(map((value) => ({ date: this.formGroup.get('date')?.value, time: value, timeChg: true }))), - ).subscribe(values => { - if (OltUtility.isDate(values.date) && OltUtility.isDate(values.time)) { - const dt = OltUtility.combineDateAndTime(values.date, values.time); - this.formGroup.get('dateTime')?.setValue(dt, { emitEvent: false }); - - if (values.timeChg === true) { - this.formGroup.get('date')?.setValue(dt, { emitEvent: false }); - this.formGroup.get('date')?.updateValueAndValidity({ emitEvent: false }); - } - } else { - this.formGroup.get('dateTime')?.reset(); - } - }); - } - - get firstError(): string | null { - const errors = (OltUtility.getFormValidationErrors(this.formGroup, 'Date/Time') ?? []).filter(p => p.control == this.formGroup); - return errors?.length > 0 ? errors[0].message : null; - } - - get showError(): boolean { - return (this.formGroup?.touched === true || this.formGroup?.dirty === true) && this.formGroup?.invalid === true; - } - -} diff --git a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts b/projects/olt-ngx-bootstrap/src/lib/components/exports.ts deleted file mode 100644 index dd11f54..0000000 --- a/projects/olt-ngx-bootstrap/src/lib/components/exports.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; -import { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; - - -export const DECLARE_COMPONENTS = [ - DynamicTableComponent, - DateTimeEntryComponent, -]; - -export const EXPORT_COMPONENTS = [ - DynamicTableComponent, - DateTimeEntryComponent, -]; diff --git a/projects/olt-ngx-bootstrap/src/lib/components/index.ts b/projects/olt-ngx-bootstrap/src/lib/components/index.ts deleted file mode 100644 index b2b6c60..0000000 --- a/projects/olt-ngx-bootstrap/src/lib/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { DynamicTableComponent } from './dynamic-table/dynamic-table.component'; -export { DateTimeEntryComponent } from './date-time-entry/date-time-entry.component'; diff --git a/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts b/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts index 39550c5..cc76a9c 100644 --- a/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts @@ -10,6 +10,4 @@ export const DECLARE_MODAL_COMPONENTS = [ InputModalComponent ]; -export const EXPORT_MODAL_COMPONENTS = [ -]; diff --git a/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html index d0a5971..70d6e9b 100644 --- a/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html +++ b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html @@ -9,7 +9,7 @@
{{ settings?.message }}
- +
- +
diff --git a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts index 5bc7623..ee7991f 100644 --- a/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -1,21 +1,13 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { OltCoreModule } from '@olt-core'; - import { ModalModule } from 'ngx-bootstrap/modal'; -import { PaginationModule } from 'ngx-bootstrap/pagination'; -import { TimepickerModule } from 'ngx-bootstrap/timepicker'; -import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; - -import { DECLARE_MODAL_COMPONENTS, EXPORT_MODAL_COMPONENTS } from './modals/exports'; -import { DECLARE_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; - +import { OltCoreModule } from '@olt-core'; +import { DECLARE_MODAL_COMPONENTS } from './modals/exports'; @NgModule({ declarations: [ - DECLARE_COMPONENTS, DECLARE_MODAL_COMPONENTS ], imports: [ @@ -23,14 +15,10 @@ import { DECLARE_COMPONENTS, EXPORT_COMPONENTS } from './components/exports'; FormsModule, ReactiveFormsModule, ModalModule.forRoot(), - PaginationModule.forRoot(), - TimepickerModule.forRoot(), - BsDatepickerModule.forRoot(), + //PaginationModule.forRoot(), + //TimepickerModule.forRoot(), + //BsDatepickerModule.forRoot(), OltCoreModule - ], - exports: [ - EXPORT_COMPONENTS, - EXPORT_MODAL_COMPONENTS - ] + ] }) -export class OltNgxBootstrapModule { } +export class OltNgxModalModule { } \ No newline at end of file diff --git a/projects/olt-ngx-bootstrap/src/public-api.ts b/projects/olt-ngx-bootstrap/src/public-api.ts index 7ddb579..8adbea8 100644 --- a/projects/olt-ngx-bootstrap/src/public-api.ts +++ b/projects/olt-ngx-bootstrap/src/public-api.ts @@ -2,6 +2,5 @@ * Public API Surface of olt-ngx-bootstrap */ -export * from './lib/components/index'; export * from './lib/services/index'; export * from './lib/olt-ngx-bootstrap.module'; diff --git a/projects/test-app/src/app/app.module.ts b/projects/test-app/src/app/app.module.ts index cb908a0..8f89319 100644 --- a/projects/test-app/src/app/app.module.ts +++ b/projects/test-app/src/app/app.module.ts @@ -67,7 +67,7 @@ export function getBsTimepickerConfig(): TimepickerConfig { BrowserAnimationsModule, AppRoutingModule, OltCoreModule, - // OltNgxBootstrapModule, + // OltNgxModuleModule, OltNgxDatePickerModule, OltNgxDateTimePickerModule, BsDatepickerModule.forRoot(), From 5825611f04d0cec9253141a93dc490248685b217 Mon Sep 17 00:00:00 2001 From: Chris Straw Date: Tue, 11 Jul 2023 18:38:35 -0400 Subject: [PATCH 12/12] publish of new ngx-bootstrap library --- projects/olt-ngx-bootstrap/package.json | 17 ++++++++-- .../input-modal/input-modal.component.html | 31 +------------------ 2 files changed, 16 insertions(+), 32 deletions(-) diff --git a/projects/olt-ngx-bootstrap/package.json b/projects/olt-ngx-bootstrap/package.json index 83996e3..8544d91 100644 --- a/projects/olt-ngx-bootstrap/package.json +++ b/projects/olt-ngx-bootstrap/package.json @@ -1,9 +1,22 @@ { "name": "@outerlimitstech/ngx-bootstrap", "version": "16.0.0-beta.2", + "description": "Components that utilize ngx-bootstrap for OuterLimits Technologies applications", + "bugs": "https://github.com/OuterlimitsTech/olt-angular-libraries/issues", + "homepage": "https://github.com/OuterlimitsTech/olt-angular-libraries#readme", + "repository": "https://github.com/OuterlimitsTech/olt-angular-libraries.git", + "license": "MIT", + "author": "Chris Straw", + "publishConfig": { + "access": "public" + }, + "keywords": [ + "angular" + ], "peerDependencies": { - "@angular/common": ">=16.0.0", - "@angular/core": ">=16.0.0", + "@angular/common": ">=15.0.0", + "@angular/core": ">=15.0.0", + "@angular/forms": ">=15.0.0", "ngx-bootstrap": ">=10.0.0" }, "dependencies": { diff --git a/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html index 70d6e9b..cbf844c 100644 --- a/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html +++ b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html @@ -7,36 +7,7 @@

{{ settings?.title }}

{{ settings?.message }}
-
-
- -
- -
- -
+