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/README.md b/README.md index 546adc7..d8dec3d 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,6 @@ -# OLT Angular Library +# OLT Angular Application Libraries -_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) | +[Base Core](./projects//olt-core//README.md) +[ngx-boostrap components](./projects/olt-ngx-bootstrap//README.md) diff --git a/angular.json b/angular.json index af7f83f..930856a 100644 --- a/angular.json +++ b/angular.json @@ -33,6 +33,141 @@ } } } + }, + "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" + ] + } + } + } + }, + "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": { + "allowedCommonJsDependencies": [ + "error-stack-parser" + ], + "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/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 b51b31b..3694bb8 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,12 @@ "version": "16.0.0", "scripts": { "ng": "ng", - "start": "ng serve", - "build": "ng build --configuration production", - "watch": "ng build --watch --configuration development", + "start": "ng serve test-app", + "build": "ng build olt-core --configuration production && ng build olt-ngx-bootstrap --configuration production", + "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 \"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": { @@ -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/olt-core/README.md b/projects/olt-core/README.md index fb28370..6e085f7 100644 --- a/projects/olt-core/README.md +++ b/projects/olt-core/README.md @@ -1,24 +1,18 @@ -# 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. +## Models -## Publishing +_Some of the models work in conjunction with the OLT Core Library Json Models_ -After building your library with `ng build olt-core`, go to the dist folder `cd dist/olt-core` and run `npm publish`. +| 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) | -## 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/package.json b/projects/olt-core/package.json index 6712176..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", @@ -14,15 +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-bootstrap": ">=10.0.0 <11.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-core/src/lib/components/date-time-entry/date-time-entry.component.html b/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.html deleted file mode 100644 index d2580b7..0000000 --- a/projects/olt-core/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-core/src/lib/components/date-time-entry/date-time-entry.component.spec.ts b/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.spec.ts deleted file mode 100644 index a4f7778..0000000 --- a/projects/olt-core/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-core/src/lib/components/date-time-entry/date-time-entry.component.ts b/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.ts deleted file mode 100644 index 7690978..0000000 --- a/projects/olt-core/src/lib/components/date-time-entry/date-time-entry.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -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'; - -@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-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/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-core/src/lib/modals/input-modal/input-modal.component.html b/projects/olt-core/src/lib/modals/input-modal/input-modal.component.html deleted file mode 100644 index d0a5971..0000000 --- a/projects/olt-core/src/lib/modals/input-modal/input-modal.component.html +++ /dev/null @@ -1,64 +0,0 @@ - - -
- - - - - -
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 new file mode 100644 index 0000000..b96f9e0 --- /dev/null +++ b/projects/olt-ngx-bootstrap/README.md @@ -0,0 +1,8 @@ + + +# @outerlimitstech/ngx-bootstrap + +Extension Library for [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/) + + + 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-core/src/lib/components/date-time-entry/date-time-entry.component.scss b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.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/date-picker/src/date-picker.component.scss diff --git a/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.spec.ts b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.spec.ts new file mode 100644 index 0000000..603f369 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/src/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/date-picker/src/date-picker.component.ts b/projects/olt-ngx-bootstrap/date-picker/src/date-picker.component.ts new file mode 100644 index 0000000..671ba1e --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-picker/src/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/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/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..498aa71 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.html @@ -0,0 +1,31 @@ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ diff --git a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.scss b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.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/date-time-picker/src/date-time-picker.component.scss 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..35c5941 --- /dev/null +++ b/projects/olt-ngx-bootstrap/date-time-picker/src/date-time-picker.component.ts @@ -0,0 +1,130 @@ +import { Component, Input, forwardRef } from '@angular/core'; +import { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms'; +import { OltUtility } from '@olt-core'; + +@Component({ + 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: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DateTimePickerComponent), + multi: true + } + ] +}) +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'); + + + dateValue: Date | any | null = null; + timeValue: Date | any | null = null; + _timeValue: Date | any | null = null; + + disabled = 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/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/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-core/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-core/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-core/src/lib/modals/alert-modal/alert-modal.component.scss b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.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/html-table/src/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/html-table/src/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/html-table/src/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/html-table/src/dynamic-table.component.ts similarity index 87% rename from projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.ts rename to projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.ts index c718ddf..bdf0322 100644 --- a/projects/olt-core/src/lib/components/dynamic-table/dynamic-table.component.ts +++ b/projects/olt-ngx-bootstrap/html-table/src/dynamic-table.component.ts @@ -1,18 +1,16 @@ 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', + 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/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..8544d91 --- /dev/null +++ b/projects/olt-ngx-bootstrap/package.json @@ -0,0 +1,26 @@ +{ + "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": ">=15.0.0", + "@angular/core": ">=15.0.0", + "@angular/forms": ">=15.0.0", + "ngx-bootstrap": ">=10.0.0" + }, + "dependencies": { + "tslib": "^2.3.0" + }, + "sideEffects": false +} 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/confirm-modal/confirm-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/confirm-modal/confirm-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/input-modal/input-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/input-modal/input-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 63% rename from projects/olt-core/src/lib/modals/exports.ts rename to projects/olt-ngx-bootstrap/src/lib/modals/exports.ts index 1c83636..cc76a9c 100644 --- a/projects/olt-core/src/lib/modals/exports.ts +++ b/projects/olt-ngx-bootstrap/src/lib/modals/exports.ts @@ -3,19 +3,11 @@ 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, InputModalComponent ]; -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-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 new file mode 100644 index 0000000..cbf844c --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.html @@ -0,0 +1,35 @@ + + +
+ + + + + +
diff --git a/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.scss b/projects/olt-ngx-bootstrap/src/lib/modals/input-modal/input-modal.component.scss new file mode 100644 index 0000000..e69de29 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 new file mode 100644 index 0000000..ee7991f --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/lib/olt-ngx-bootstrap.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ModalModule } from 'ngx-bootstrap/modal'; +import { OltCoreModule } from '@olt-core'; + +import { DECLARE_MODAL_COMPONENTS } from './modals/exports'; + +@NgModule({ + declarations: [ + DECLARE_MODAL_COMPONENTS + ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + ModalModule.forRoot(), + //PaginationModule.forRoot(), + //TimepickerModule.forRoot(), + //BsDatepickerModule.forRoot(), + OltCoreModule + ] +}) +export class OltNgxModalModule { } \ No newline at end of file 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 new file mode 100644 index 0000000..8adbea8 --- /dev/null +++ b/projects/olt-ngx-bootstrap/src/public-api.ts @@ -0,0 +1,6 @@ +/* + * Public API Surface of olt-ngx-bootstrap + */ + +export * from './lib/services/index'; +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/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..f3a1849 --- /dev/null +++ b/projects/test-app/src/app/app-routing.module.ts @@ -0,0 +1,28 @@ +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 = [ + { + path: '', + component: LandingComponent, + }, + { + path: 'ngx-bootstrap', + children: [ + { + path: 'date-time-picker', + component: DateTimePickerComponent, + } + ] + }, + +]; + +@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..981e4bb --- /dev/null +++ b/projects/test-app/src/app/app.component.html @@ -0,0 +1,27 @@ + + +
+ + + +
+ +
+ +
+
+ +
+ \ 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 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..1d5dc8d --- /dev/null +++ b/projects/test-app/src/app/app.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'test-app'; + + status: boolean = false; + + 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 new file mode 100644 index 0000000..8f89319 --- /dev/null +++ b/projects/test-app/src/app/app.module.ts @@ -0,0 +1,88 @@ +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 { 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'; +import { AppComponent } from './app.component'; +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'; +import { TestDateTimeEntryComponent } from './components/test-date-time-entry/test-date-time-entry.component'; +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', + containerClass: 'theme-default', + showWeekNumbers: false + }); +} + +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, + DateTimePickerComponent, + LandingComponent, + SideBarComponent, + NavBarComponent, + TestDateEntryComponent, + TestDateTimeEntryComponent, + DateMaskInputDirective, + OltNgxBsDatepickerInputDirective, + OltBsDatepickerDirective + ], + imports: [ + BrowserModule, + FormsModule, + ReactiveFormsModule, + BrowserAnimationsModule, + AppRoutingModule, + OltCoreModule, + // OltNgxModuleModule, + OltNgxDatePickerModule, + OltNgxDateTimePickerModule, + BsDatepickerModule.forRoot(), + TimepickerModule.forRoot(), + ], + providers: [ + { + provide: BsDatepickerConfig, + useFactory: getBsDatepickerConfig + }, + // { + // provide: TimepickerConfig, + // useFactory: getBsTimepickerConfig + // }, + ], + bootstrap: [AppComponent] +}) +export class AppModule { } 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 new file mode 100644 index 0000000..8591612 --- /dev/null +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.html @@ -0,0 +1,13 @@ + + + \ 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..d0ee0ed --- /dev/null +++ b/projects/test-app/src/app/components/side-bar/side-bar.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-side-bar', + templateUrl: './side-bar.component.html', + styleUrls: ['./side-bar.component.scss'] +}) +export class SideBarComponent { +@Input() status: boolean = false; +} 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..2bd82c7 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.html @@ -0,0 +1,10 @@ +
+ +
+ +
+
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..2a7d0fc --- /dev/null +++ b/projects/test-app/src/app/components/test-date-entry/test-date-entry.component.ts @@ -0,0 +1,111 @@ +import { Component, Input, forwardRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +// 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 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); + // 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) { + // 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/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..498aa71 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.html @@ -0,0 +1,31 @@ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ 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..4db6c27 --- /dev/null +++ b/projects/test-app/src/app/components/test-date-time-entry/test-date-time-entry.component.ts @@ -0,0 +1,135 @@ +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'); + + 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/landing/landing.component.html b/projects/test-app/src/app/views/landing/landing.component.html new file mode 100644 index 0000000..474aade --- /dev/null +++ b/projects/test-app/src/app/views/landing/landing.component.html @@ -0,0 +1,4 @@ +

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/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..696d425 --- /dev/null +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.html @@ -0,0 +1,58 @@ +

date-time-picker works!

+ +
+
+ +
+ +
+ + Date3 + + + +
+ +
+ + Date2 +
+ +
+ +
+
+
+
+ +
+ + Date/Time 1 + + +
+ +
+ + Date/Time 2 + + +
+ + +
+ + Time Only (Local) + + +
+ +
+ +
+
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..16f0e2f --- /dev/null +++ b/projects/test-app/src/app/views/ngx-bootstrap/date-time-picker/date-time-picker.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { OltUtility } from '@olt-core'; + +@Component({ + templateUrl: './date-time-picker.component.html', + styleUrls: ['./date-time-picker.component.scss'], +}) +export class DateTimePickerComponent implements OnInit { + + entryForm = this.formGroup(); + now = new Date(); + midnight = new Date(); + oneWeekAgo = new Date(); + + ngOnInit(): void { + this.midnight.setUTCHours(10, 0, 0, 0); + this.oneWeekAgo.setDate(this.oneWeekAgo.getDate() - 7); + } + + formGroup(): FormGroup { + return new FormGroup({ + date: new FormControl(null), + date2: new FormControl(null), + date3: new FormControl(new Date(), [Validators.required]), + dateTime1: new FormControl(new Date(), [Validators.required]), + // dateTime2: new FormControl(null, [Validators.required]), + dateTime2: new FormControl(null), + timeOnly: 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/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 0000000..997406a Binary files /dev/null and b/projects/test-app/src/favicon.ico differ diff --git a/projects/test-app/src/index.html b/projects/test-app/src/index.html new file mode 100644 index 0000000..f4f254f --- /dev/null +++ b/projects/test-app/src/index.html @@ -0,0 +1,15 @@ + + + + + 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/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..206d5d5 --- /dev/null +++ b/projects/test-app/src/scss/_app-bootstrap.scss @@ -0,0 +1,93 @@ +// 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/_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 new file mode 100644 index 0000000..d82a751 --- /dev/null +++ b/projects/test-app/src/scss/_theme.scss @@ -0,0 +1,8 @@ +// @import "app-bootstrap-variables"; +// @import "bootstrap-variables"; + +@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; diff --git a/projects/test-app/src/styles.scss b/projects/test-app/src/styles.scss new file mode 100644 index 0000000..a60af41 --- /dev/null +++ b/projects/test-app/src/styles.scss @@ -0,0 +1 @@ +@import "./scss/theme"; 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" + ] +} diff --git a/tsconfig.json b/tsconfig.json index e303a8e..92dfecb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,10 +15,18 @@ "experimentalDecorators": true, "moduleResolution": "node", "paths": { - "olt-core": [ - "dist/olt-core/olt-core", + "@olt-core": [ "dist/olt-core" - ] + ], + "@olt-ngx-bootstrap/*": [ + "projects/olt-ngx-bootstrap/*", + ], + "@olt-ngx-bootstrap": [ + "projects/olt-ngx-bootstrap", + ] + // "@olt-ngx-bootstrap": [ + // "dist/olt-ngx-bootstrap" + // ] }, "importHelpers": true, "target": "ES2022",