): 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!
+
+
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",