From 5a13bf6cd60179506504e7e2f845edb75b9c228c Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Fri, 24 Mar 2023 13:26:54 -0600
Subject: [PATCH 1/2] feat(select): placeholder value

adds the ability to set the value of the placeholder option

closes #2092
---
 .../select-disabled-example.component.html    |  9 ------
 .../select-disabled-example.component.ts      | 11 -------
 .../select-placeholder-example.component.html | 25 ++++++++++++++++
 ...select-placeholder-example.component.scss} |  4 +++
 .../select-placeholder-example.component.ts   | 30 +++++++++++++++++++
 .../src/lib/select/select.component.html      |  2 +-
 .../src/lib/select/select.component.ts        | 18 +++++++++++
 .../cashmere-components-document-items.json   |  2 +-
 8 files changed, 79 insertions(+), 22 deletions(-)
 delete mode 100644 projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.html
 delete mode 100644 projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.ts
 create mode 100644 projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.html
 rename projects/cashmere-examples/src/lib/{select-disabled/select-disabled-example.component.scss => select-placeholder/select-placeholder-example.component.scss} (61%)
 create mode 100644 projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.ts

diff --git a/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.html b/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.html
deleted file mode 100644
index a885941e8..000000000
--- a/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="select-sample">
-    <hc-form-field inline>
-        <hc-label>Select your facility:</hc-label>
-        <hc-select disabled placeholder="Select a city">
-            <option value="1">Philadelphia</option>
-            <option value="2">Atlanta</option>
-        </hc-select>
-    </hc-form-field>
-</div>
diff --git a/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.ts b/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.ts
deleted file mode 100644
index b19a8ad9f..000000000
--- a/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Disabled Inline Select Component
- */
-@Component({
-    selector: 'hc-select-disabled-example',
-    templateUrl: 'select-disabled-example.component.html',
-    styleUrls: ['select-disabled-example.component.scss']
-})
-export class SelectDisabledExampleComponent {}
diff --git a/projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.html b/projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.html
new file mode 100644
index 000000000..0a8af94de
--- /dev/null
+++ b/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>
diff --git a/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.scss b/projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.scss
similarity index 61%
rename from projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.scss
rename to projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.scss
index c84634f53..46272947a 100644
--- a/projects/cashmere-examples/src/lib/select-disabled/select-disabled-example.component.scss
+++ b/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;
+}
diff --git a/projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.ts b/projects/cashmere-examples/src/lib/select-placeholder/select-placeholder-example.component.ts
new file mode 100644
index 000000000..f7ffa0362
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/projects/cashmere/src/lib/select/select.component.html b/projects/cashmere/src/lib/select/select.component.html
index ea8e5503f..0e1d33568 100644
--- a/projects/cashmere/src/lib/select/select.component.html
+++ b/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>
diff --git a/projects/cashmere/src/lib/select/select.component.ts b/projects/cashmere/src/lib/select/select.component.ts
index cf8d68592..2bd7b26b4 100644
--- a/projects/cashmere/src/lib/select/select.component.ts
+++ b/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 {
diff --git a/src/app/core/cashmere-components-document-items.json b/src/app/core/cashmere-components-document-items.json
index 3cf276878..127990f10 100644
--- a/src/app/core/cashmere-components-document-items.json
+++ b/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},

From 6641d60995a4c646eed2a08f0fc984730f95b2b1 Mon Sep 17 00:00:00 2001
From: Andrew Frueh <andrew.frueh@healthcatalyst.com>
Date: Fri, 24 Mar 2023 14:04:20 -0600
Subject: [PATCH 2/2] fix(tooltip): disable empty tooltips

change trigger to none for tooltips with empty content

closes #2079
---
 .../tooltip-overview/tooltip-overview-example.component.html  | 4 +++-
 .../src/lib/pop/directives/popover-anchor.directive.ts        | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/projects/cashmere-examples/src/lib/tooltip-overview/tooltip-overview-example.component.html b/projects/cashmere-examples/src/lib/tooltip-overview/tooltip-overview-example.component.html
index df056df0b..d6e611bef 100644
--- a/projects/cashmere-examples/src/lib/tooltip-overview/tooltip-overview-example.component.html
+++ b/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>
diff --git a/projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts b/projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts
index a88c99e16..7dc70251f 100644
--- a/projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts
+++ b/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;