Get generalized ksSizer work. Fix confirmation dialog layout when word wrap occurs.

Author: kshetline

src/app/directives/ks-sizer.directive.ts

@@ -22,7 +22,6 @@
 
 import { Directive, ElementRef, HostBinding, Input, ViewContainerRef } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-import { toNumber } from 'ks-util';
 
 @Directive({
   selector: '[ksSizer]'
@@ -35,12 +34,12 @@ export class KsSizerDirective {
 
     if (!width)
       width = 'auto';
-    else if (toNumber(width) !== 0)
+    else if (!isNaN(Number(width)))
       width += 'px';
 
     if (!height)
       height = 'auto';
-    else if (toNumber(height) !== 0)
+    else if (!isNaN(Number(height)))
       height += 'px';
 
     if (this.hostComponent)
@@ -56,15 +55,11 @@ export class KsSizerDirective {
   constructor(
     private sanitizer: DomSanitizer,
     private elementRef: ElementRef,
-    viewContainerRef: ViewContainerRef
+    private viewContainerRef: ViewContainerRef
   ) {
     const vcr = viewContainerRef as any;
 
-    if (vcr && vcr._data && vcr._data.componentView && vcr._data.componentView.component) {
-      const comp = vcr._data.componentView.component;
-
-      if (comp.el instanceof ElementRef && comp.el.nativeElement)
-        this.hostComponent = comp;
-    }
+    if (vcr && vcr._data && vcr._data.componentView && vcr._data.componentView.component)
+      this.hostComponent = vcr._data.componentView.component;
   }
 }

src/app/svc/svc-atlas-dialog/svc-atlas-dialog.component.html

@@ -11,7 +11,7 @@
         <span><input #searchField type="text" pInputText class="city-field" [(ngModel)]="city" [disabled]="searching"
                  (focus)="searchFocus(true)" (blur)="searchFocus(false)"
                  autocorrect="off" autocapitalize="off" autocomplete="off"/></span>
-        <span><ks-dropdown [(ngModel)]="state" [options]="states" [editable]="true" [style]="{width: '19em'}"></ks-dropdown></span>
+        <span><ks-dropdown [(ngModel)]="state" [options]="states" [editable]="true" ksSizer="19em"></ks-dropdown></span>
         <span><button type="button" pButton icon="fas fa-search" (click)="search()" label="Search" [disabled]="searching || becomingVisible"
                       (focus)="searchFocus(true)" (blur)="searchFocus(false)"></button></span>
       </div>

src/app/svc/svc-location-settings/svc-location-settings.component.html

@@ -23,7 +23,7 @@
   <p-dialog header="Save Location" [modal]="true" [(visible)]="showSaveDialog" ksSizer="350">
     <div style="height: 80px;">
       Save location as:&nbsp;
-      <ks-dropdown #saveNameDropdown [(ngModel)]="selectedName" [options]="saveDialogNames" [editable]="true" [style]="{width: '200px'}"></ks-dropdown>
+      <ks-dropdown #saveNameDropdown [(ngModel)]="selectedName" [options]="saveDialogNames" [editable]="true" ksSizer="200"></ks-dropdown>
       <br><br><p-checkbox [(ngModel)]="makeDefault" binary="true" label="Make this the default location"></p-checkbox>
     </div>
     <p-footer>
@@ -32,13 +32,13 @@
         <button type="button" pButton icon="fas fa-check" (click)="doSave()" label="OK" [disabled]="!selectedName.trim()"></button>
       </div>
     </p-footer>
-    <p-confirmDialog key="save-confirm" header="Same location name in use" icon="fas fa-question-circle" [style]="{width: '400px'}" appendTo="body"></p-confirmDialog>
+    <p-confirmDialog key="save-confirm" header="Same location name in use" icon="fas fa-question-circle" ksSizer="400" appendTo="body"></p-confirmDialog>
   </p-dialog>
   <p-dialog header="Delete Location" [modal]="true" [(visible)]="showDeleteDialog" ksSizer="350">
     <div style="height: 35px;">
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
         <span>Location to delete:&nbsp;</span>
-        <ks-dropdown #deleteNameDropdown [(ngModel)]="selectedName" [options]="deleteDialogNames" [style]="{width: '200px'}"></ks-dropdown>
+        <ks-dropdown #deleteNameDropdown [(ngModel)]="selectedName" [options]="deleteDialogNames" ksSizer="200"></ks-dropdown>
       </div>
     </div>
     <p-footer>

src/app/svc/svc-preferences-dialog/svc-preferences-dialog.component.html

@@ -29,7 +29,7 @@
         <label for="twilightInput">Twilight begin/end events:</label>
       </div>
       <div class="settings-value flex-container" fxLayout="row" fxLayoutAlign="space-between center">
-        <ks-dropdown [options]="twilightOptions" [(ngModel)]="twilightByDegrees" [style]="{width: '27em'}" fxFlex="0 0 auto"></ks-dropdown>
+        <ks-dropdown [options]="twilightOptions" [(ngModel)]="twilightByDegrees" ksSizer="27em" fxFlex="0 0 auto"></ks-dropdown>
         <input type="text" [(ngModel)]="twilightValue" pInputText class="twilight-input form-control" fxFlex="0 0 auto"
                id="twilightInput" required minlength="1" maxlength="3" pattern="\d{1,3}" (input)="onTwilightChange($event.target)"/>
       </div>
@@ -45,7 +45,7 @@
         Calendar:
       </div>
       <div class="settings-value flex-container" fxLayout="row" fxLayoutAlign="space-between center">
-        <ks-dropdown [options]="calendarOptions" [(ngModel)]="calendarOption" [style]="{width: '23em'}" fxFlex="0 0 auto"></ks-dropdown>
+        <ks-dropdown [options]="calendarOptions" [(ngModel)]="calendarOption" ksSizer="23em" fxFlex="0 0 auto"></ks-dropdown>
         <svc-date-editor [pureGregorian]="true" [minYear]="300" [maxYear]="3900"
                          fxFlex="0 0 auto" [blank]="!gcdVisible" [disabled]="gcdDisabled" [(ngModel)]="gcdValue"></svc-date-editor>
       </div>

src/primeng-theme-tweaks.scss

@@ -54,6 +54,11 @@ body {
     }
   }
 
+  .ui-confirmdialog.ui-dialog .ui-dialog-content {
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+
   .ui-dialog {
     .ui-dialog-titlebar {
       font-size: 1.25em;