Merge pull request #2095 from HealthCatalyst/dev

Cashmere 14.1.0

projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.html

@@ -0,0 +1,25 @@
+<div class="select-sample">
+    <hc-form-field inline>
+        <hc-label>Select your facility:</hc-label>
+        <hc-select placeholder="Select a city" [placeholderValue]="phVal" [formControl]="selectVal">
+            <option value="1">Philadelphia</option>
+            <option value="2">Atlanta</option>
+        </hc-select>
+    </hc-form-field>
+    <button hc-button (click)="reset()">Reset to Empty String</button>
+</div>
+
+<em>
+    The placeholder option will default to a value of <code>""</code>.
+    But if you can set it another value as needed.
+    Note that changing the placeholder value below deselects the placeholder.
+</em>
+
+<hc-form-field inline>
+    <hc-label>Placeholder value:</hc-label>
+    <hc-radio-group (change)="updatePlaceholderVal($event)" [inline]="true">
+        <hc-radio-button value="1" [checked]="true">Empty String</hc-radio-button>
+        <hc-radio-button value="2">Null</hc-radio-button>
+        <hc-radio-button value="3">Undefined</hc-radio-button>
+    </hc-radio-group>
+</hc-form-field>

projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.scss → projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.scss

@@ -2,3 +2,7 @@
     max-width: 350px;
     width: 100%;
 }
+
+button {
+    margin: 10px 0 20px;
+}

projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { RadioButtonChangeEvent } from '@healthcatalyst/cashmere';
+
+/**
+ * @title Select Component Placeholder
+ */
+@Component({
+    selector: 'hc-select-placeholder-example',
+    templateUrl: 'select-placeholder-example.component.html',
+    styleUrls: ['select-placeholder-example.component.scss']
+})
+export class SelectPlaceholderExampleComponent {
+    phVal: any = "";
+    selectVal = new FormControl("");
+
+    reset(): void {
+        this.selectVal.setValue("");
+    }
+
+    updatePlaceholderVal( selected: RadioButtonChangeEvent ): void {
+        if ( selected.value === "1" ) {
+            this.phVal = "";
+        } else if ( selected.value === "2" ) {
+            this.phVal = null;
+        } else {
+            this.phVal = undefined;
+        }
+    }
+}

projects/cashmere-examples/src/lib/tooltip-overview/tooltip-overview-example.component.html

@@ -1,5 +1,7 @@
 This is an example of a bottom-aligned
 <u hcTooltip="I'm a tooltip" verticalAlign="below">tooltip in action</u>.
 <br><br>
-And this is a <u [hcTooltip]="veryLongString" maxWidth="400px">very large tooltip</u> with a constrained width.
+This is a <u [hcTooltip]="veryLongString" maxWidth="400px">very large tooltip</u> with a constrained width.
+<br><br>
+And this is a <u hcTooltip="">tooltip with an empty string</u> which means it won't be displayed.
 <br><br>

projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts

@@ -59,7 +59,8 @@ export class HcPopoverAnchorDirective implements OnInit, AfterContentInit, OnDes
         popover.restoreFocus = false;
         popover.maxWidth = this._maxWidth;
         this.attachedPopover = popover;
-        this.trigger = 'hover';
+        // Don't enable the tooltip if the content string is empty
+        this.trigger = value ? 'hover' : 'none';
         this.popoverDelay = 300;
     }
     private _tooltipText: string;

projects/cashmere/src/lib/select/select.component.html

@@ -9,7 +9,7 @@
         (blur)="_onBlur()"
         [required]="required"
     >
-        <option *ngIf="placeholder" value="" selected disabled hidden>{{ placeholder }}</option>
+        <option *ngIf="placeholder" [value]="placeholderValue" selected disabled hidden #selectPlaceholder>{{ placeholder }}</option>
         <ng-content></ng-content>
     </select>
 </div>

projects/cashmere/src/lib/select/select.component.ts

@@ -42,6 +42,7 @@ export class SelectComponent extends HcFormControlComponent implements ControlVa
     private _form: NgForm | FormGroupDirective | null;
     private _unsubscribe = new Subject<void>();
     private _value: any = '';
+    private _placeholderValue: any = '';
     get _optionMap(): Map<string, any> {
         return this.selectService._optionMap;
     }
@@ -50,10 +51,27 @@ export class SelectComponent extends HcFormControlComponent implements ControlVa
     @ViewChild('selectInput')
     _nativeSelect: ElementRef;
 
+    @ViewChild('selectPlaceholder')
+    _nativePlaceholder: ElementRef;
+
     /** Optional string of text to appear before selection is made */
     @Input()
     placeholder: string;
 
+    /** Optional value for when the placeholder should appear -
+     * defaults to the empty string, but could be set to `null` or `undefined` */
+    @Input()
+    get placeholderValue(): any {
+        return this._placeholderValue;
+    }
+    set placeholderValue( val: any ) {
+        if ( this.placeholder && this._nativePlaceholder ) {
+            this._placeholderValue = val;
+            this._renderer.setProperty( this._nativePlaceholder.nativeElement, 'value', val );
+            this._applyValueToNativeControl();
+        }
+    }
+
     /** Enables or disables the component */
     @Input()
     get disabled(): boolean {

src/app/core/cashmere-components-document-items.json

@@ -121,7 +121,7 @@
     "select": {
         "name": "Select",
         "category": "forms",
-        "examples": ["select-standard", "select-forms", "select-disabled", "select-validation", "select-compare-with"],
+        "examples": ["select-standard", "select-forms", "select-placeholder", "select-validation", "select-compare-with"],
         "usageDoc": true
     },
     "slide-toggle": {"name": "Slide Toggle", "category": "forms", "examples": ["slide-toggle-overview", "slide-toggle-forms"], "usageDoc": false},