increase 8px for the date input box

changhuixu · Oct 25, 2019 · 64ec313 · 64ec313
1 parent e810c0f
commit 64ec313
Show file tree

Hide file tree

Showing 7 changed files with 736 additions and 464 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,27 +14,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.2.4",
-    "@angular/common": "~8.2.4",
-    "@angular/compiler": "~8.2.4",
-    "@angular/core": "~8.2.4",
-    "@angular/forms": "~8.2.4",
-    "@angular/platform-browser": "~8.2.4",
-    "@angular/platform-browser-dynamic": "~8.2.4",
-    "@angular/router": "~8.2.4",
+    "@angular/animations": "~8.2.12",
+    "@angular/common": "~8.2.12",
+    "@angular/compiler": "~8.2.12",
+    "@angular/core": "~8.2.12",
+    "@angular/forms": "~8.2.12",
+    "@angular/platform-browser": "~8.2.12",
+    "@angular/platform-browser-dynamic": "~8.2.12",
+    "@angular/router": "~8.2.12",
     "@ng-bootstrap/ng-bootstrap": "^5.1.0",
     "@uiowa/date-range-picker": "^2.0.0",
     "bootstrap": "^4.3.1",
-    "rxjs": "~6.5.2",
+    "rxjs": "~6.5.3",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.1",
-    "@angular-devkit/build-ng-packagr": "~0.803.1",
-    "@angular/cli": "~8.3.1",
-    "@angular/compiler-cli": "~8.2.4",
-    "@angular/language-service": "~8.2.4",
+    "@angular-devkit/build-angular": "~0.803.14",
+    "@angular-devkit/build-ng-packagr": "~0.803.14",
+    "@angular/cli": "~8.3.14",
+    "@angular/compiler-cli": "~8.2.12",
+    "@angular/language-service": "~8.2.12",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
@@ -46,7 +46,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
-    "ng-packagr": "^5.5.0",
+    "ng-packagr": "^5.7.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tsickle": "^0.37.0",

diff --git a/projects/uiowa/date-range-picker/package.json b/projects/uiowa/date-range-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/date-range-picker",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Changhui Xu <[email protected]>",
   "contributors": [
     "Jacob Feuerbach <[email protected]>"

diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html
@@ -1,10 +1,32 @@
 <div class="input-group">
-  <input ngbDatepicker #d="ngbDatepicker" class="form-control" name="dp" [(ngModel)]="ngbDate" (click)="d.toggle()"
-    [disabled]="disabled" readonly (dateSelect)="onDateChange($event)" style="max-width:200px;">
+  <input
+    ngbDatepicker
+    #d="ngbDatepicker"
+    class="form-control"
+    name="dp"
+    [(ngModel)]="ngbDate"
+    (click)="d.toggle()"
+    [disabled]="disabled"
+    readonly
+    (dateSelect)="onDateChange($event)"
+    style="max-width:208px;"
+  />
   <div class="input-group-append">
-    <button class="btn btn-outline-secondary d-flex align-items-center" (click)="d.toggle()" type="button">
-      <svg aria-hidden="true" role="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-        <path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path>
+    <button
+      class="btn btn-outline-secondary d-flex align-items-center"
+      (click)="d.toggle()"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        role="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+      >
+        <path
+          fill="currentColor"
+          d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+        ></path>
       </svg>
     </button>
   </div>

diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts
@@ -19,7 +19,7 @@ export class DatePickerComponent implements OnInit, OnChanges {
   @Input()
   date: Date;
   @Input()
-  disabled ? = false;
+  disabled? = false;
 
   @Output()
   dateChange = new EventEmitter<Date>();

diff --git a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.html b/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.html
@@ -1,20 +1,53 @@
 <div class="input-group">
-  <input ngbDatepicker #dp="ngbDatepicker" type="text" class="form-control" style="max-width:200px;" readonly
-    [disabled]="disabled" [autoClose]="false" [displayMonths]="2" [dayTemplate]="t" [showWeekNumbers]="false"
-    [markDisabled]="isDisabled" [firstDayOfWeek]="7" (click)="dp.toggle()" (dateSelect)="onDateChange($event, dp)">
+  <input
+    ngbDatepicker
+    #dp="ngbDatepicker"
+    type="text"
+    class="form-control"
+    style="max-width:208px;"
+    readonly
+    [disabled]="disabled"
+    [autoClose]="false"
+    [displayMonths]="2"
+    [dayTemplate]="t"
+    [showWeekNumbers]="false"
+    [markDisabled]="isDisabled"
+    [firstDayOfWeek]="7"
+    (click)="dp.toggle()"
+    (dateSelect)="onDateChange($event, dp)"
+  />
   <div class="input-group-append">
-    <button class="btn btn-outline-secondary d-flex align-items-center" (click)="dp.toggle()" type="button">
-      <svg aria-hidden="true" role="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-        <path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path>
+    <button
+      class="btn btn-outline-secondary d-flex align-items-center"
+      (click)="dp.toggle()"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        role="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+      >
+        <path
+          fill="currentColor"
+          d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+        ></path>
       </svg>
     </button>
   </div>
 </div>
 
 <ng-template #t let-date="date" let-focused="focused" let-disabled="disabled">
-  <span class="custom-day" [class.focused]="focused" [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
-    [class.faded]="isHovered(date) || isInside(date)" [class.weekend]="isWeekend(date)" [class.disabled]="disabled"
-    (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
+  <span
+    class="custom-day"
+    [class.focused]="focused"
+    [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
+    [class.faded]="isHovered(date) || isInside(date)"
+    [class.weekend]="isWeekend(date)"
+    [class.disabled]="disabled"
+    (mouseenter)="hoveredDate = date"
+    (mouseleave)="hoveredDate = null"
+  >
     {{ date.day }}
   </span>
 </ng-template>
diff --git a/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-range-picker/date-range-picker.component.ts
@@ -26,7 +26,7 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
   @Input()
   maxDate?: Date;
   @Input()
-  disabled?= false;
+  disabled? = false;
   @Output()
   dateRangeChange = new EventEmitter<DateRange>();
   hoveredDate: NgbDate;
@@ -40,7 +40,7 @@ export class DateRangePickerComponent implements OnInit, OnChanges {
   @ViewChild('dp', { static: true })
   private dp: NgbInputDatepicker;
 
-  constructor(private readonly dateAdapter: NgbDateNativeAdapter) { }
+  constructor(private readonly dateAdapter: NgbDateNativeAdapter) {}
 
   ngOnInit() {
     this.fromDate = this.dateAdapter.fromModel(this.dateRange.start);