npm - carbon-components-angular - Versions diffs - 3.14.7 → 3.15.3 - Mend

carbon-components-angular 3.14.7 → 3.15.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/datepicker/datepicker.component.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@
  */
-import { EventEmitter, ElementRef, OnDestroy, TemplateRef, AfterViewInit, OnChanges, SimpleChanges } from "@angular/core";
+import { EventEmitter, ElementRef, OnDestroy, TemplateRef, OnChanges, SimpleChanges, AfterViewChecked } from "@angular/core";
 /**
  * [See demo](../../?path=/story/date-picker--single)
  *
@@ -28,7 +28,7 @@ import { EventEmitter, ElementRef, OnDestroy, TemplateRef, AfterViewInit, OnChan
  * @class DatePicker
  * @implements {OnDestroy}
  */
-export declare class DatePicker implements OnDestroy, AfterViewInit, OnChanges {
+export declare class DatePicker implements OnDestroy, OnChanges, AfterViewChecked {
     protected elementRef: ElementRef;
     private static datePickerCount;
     /**
@@ -70,11 +70,11 @@ export declare class DatePicker implements OnDestroy, AfterViewInit, OnChanges {
     protected flatpickrInstance: any;
     constructor(elementRef: ElementRef);
     ngOnChanges(changes: SimpleChanges): void;
-    ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
     onFocus(): void;
     /**
      * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
-     * @param value value recived from the model
+     * @param value value received from the model
      */
     writeValue(value: (Date | string)[]): void;
     registerOnChange(fn: any): void;
@@ -104,4 +104,8 @@ export declare class DatePicker implements OnDestroy, AfterViewInit, OnChanges {
     protected setDateValues(dates: (Date | string)[]): void;
     protected doSelect(selectedValue: (Date | string)[]): void;
     protected didDateValueChange(currentValue: any, previousValue: any): boolean;
+    /**
+     * More advanced checking of the loaded state of flatpickr
+     */
+    protected isFlatpickrLoaded(): boolean;
 }

package/datepicker/datepicker.component.js CHANGED Viewed

@@ -66,6 +66,7 @@ var DatePicker = /** @class */ (function () {
             onOpen: function () { _this.updateClassNames(); },
             value: this.value
         };
+        this.flatpickrInstance = null;
         this.onTouched = function () { };
         this.propagateChange = function (_) { };
     }
@@ -114,7 +115,7 @@ var DatePicker = /** @class */ (function () {
         configurable: true
     });
     DatePicker.prototype.ngOnChanges = function (changes) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var dates = this.flatpickrInstance.selectedDates;
             if (changes.value && this.didDateValueChange(changes.value.currentValue, changes.value.previousValue)) {
                 dates = changes.value.currentValue;
@@ -124,10 +125,18 @@ var DatePicker = /** @class */ (function () {
             this.setDateValues(dates);
         }
     };
-    DatePicker.prototype.ngAfterViewInit = function () {
-        this.flatpickrInstance = flatpickr("#" + this.id, this.flatpickrOptions);
-        if (this.value.length > 0) {
-            this.setDateValues(this.value);
+    // because the actual view may be delayed in loading (think projection into a tab pane)
+    // and because we rely on a library that operates outside the Angular view of the world
+    // we need to keep trying to load the library, until the relevant DOM is actually live
+    DatePicker.prototype.ngAfterViewChecked = function () {
+        if (!this.isFlatpickrLoaded()) {
+            this.flatpickrInstance = flatpickr("#" + this.id, this.flatpickrOptions);
+            // if (and only if) the initialization succeeded, we can set the date values
+            if (this.isFlatpickrLoaded()) {
+                if (this.value.length > 0) {
+                    this.setDateValues(this.value);
+                }
+            }
         }
     };
     DatePicker.prototype.onFocus = function () {
@@ -135,7 +144,7 @@ var DatePicker = /** @class */ (function () {
     };
     /**
      * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
-     * @param value value recived from the model
+     * @param value value received from the model
      */
     DatePicker.prototype.writeValue = function (value) {
         this.value = value;
@@ -151,7 +160,7 @@ var DatePicker = /** @class */ (function () {
      * Cleans up our flatpickr instance
      */
     DatePicker.prototype.ngOnDestroy = function () {
-        if (!this.flatpickrInstance) {
+        if (!this.isFlatpickrLoaded()) {
             return;
         }
         this.flatpickrInstance.destroy();
@@ -160,7 +169,7 @@ var DatePicker = /** @class */ (function () {
      * Handles the `valueChange` event from the primary/single input
      */
     DatePicker.prototype.onValueChange = function (event) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var date = this.flatpickrInstance.parseDate(event, this.dateFormat);
             if (this.range) {
                 this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);
@@ -175,7 +184,7 @@ var DatePicker = /** @class */ (function () {
      * Handles the `valueChange` event from the range input
      */
     DatePicker.prototype.onRangeValueChange = function (event) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var date = this.flatpickrInstance.parseDate(event, this.dateFormat);
             this.setDateValues([this.flatpickrInstance.selectedDates[0], date]);
             this.doSelect(this.flatpickrInstance.selectedDates);
@@ -233,7 +242,7 @@ var DatePicker = /** @class */ (function () {
      * @param dates the date values to apply
      */
     DatePicker.prototype.setDateValues = function (dates) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var singleInput = this.elementRef.nativeElement.querySelector("#" + this.id);
             var rangeInput = this.elementRef.nativeElement.querySelector("#" + this.id + "-rangeInput");
             // set the date on the instance
@@ -275,6 +284,13 @@ var DatePicker = /** @class */ (function () {
     DatePicker.prototype.didDateValueChange = function (currentValue, previousValue) {
         return currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];
     };
+    /**
+     * More advanced checking of the loaded state of flatpickr
+     */
+    DatePicker.prototype.isFlatpickrLoaded = function () {
+        // cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`
+        return !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;
+    };
     DatePicker.datePickerCount = 0;
     DatePicker.decorators = [
         { type: Component, args: [{

package/datepicker/datepicker.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datepicker.component.js","sourceRoot":"","sources":["../src/datepicker/datepicker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tAfterViewInit,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\n\n/*\n [See demo](../../?path=/story/date-picker--single)\n \n <example-url>../../iframe.html?id=date-picker--single</example-url>\n \n @export\n * @class DatePicker\n * @implements {OnDestroy}\n /\n@Component({\n\tselector: \"ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\n\t\t\t\t<div ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tstyles: [\n\t\t`.dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}`\n\t],\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements OnDestroy, AfterViewInit, OnChanges {\n\tprivate static datePickerCount = 0;\n\n\t/*\n\t Select calendar range mode\n\t /\n\t@Input() range = false;\n\n\t/\n\t Format of date\n\t \n\t For reference: https://flatpickr.js.org/formatting/\n\t /\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t@Input() label: string \| TemplateRef<any>;\n\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date \| string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t@Input() theme: \"light\" \| \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() invalid = false;\n\n\t@Input() invalidText: string \| TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions() {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\"}));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat\n\t\t});\n\t}\n\n\tset flatpickrOptionsRange (options) {\n\t\tconsole.warn(\"flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead\");\n\t\tthis.range = true;\n\t\tthis.flatpickrOptions = options;\n\t}\n\tget flatpickrOptionsRange () {\n\t\tconsole.warn(\"flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead\");\n\t\treturn this.flatpickrOptions;\n\t}\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => { this.updateClassNames(); },\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.flatpickrInstance) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (changes.value && this.didDateValueChange(changes.value.currentValue, changes.value.previousValue)) {\n\t\t\t\tdates = changes.value.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.flatpickrInstance = flatpickr(`#${this.id}`, this.flatpickrOptions);\n\n\t\tif (this.value.length > 0) {\n\t\t\tthis.setDateValues(this.value);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\tthis.onTouched();\n\t}\n\n\t/\n\t Writes a value from the model to the component. Expects the value to be `null` or `(Date \| string)[]`\n\t * @param value value recived from the model\n\t /\n\twriteValue(value: (Date \| string)[]) {\n\t\tthis.value = value;\n\t\tthis.setDateValues(this.value);\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => {};\n\n\tpropagateChange = (_: any) => {};\n\n\t/\n\t Cleans up our flatpickr instance\n\t /\n\tngOnDestroy() {\n\t\tif (!this.flatpickrInstance) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/\n\t Handles the `valueChange` event from the primary/single input\n\t /\n\tonValueChange(event: string) {\n\t\tif (this.flatpickrInstance) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/\n\t Handles the `valueChange` event from the range input\n\t /\n\tonRangeValueChange(event: string) {\n\t\tif (this.flatpickrInstance) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/\n\t Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t /\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"bx--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"bx--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"bx--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\t/\n\t Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date \| string)[]) {\n\t\tif (this.flatpickrInstance) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof dates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(dates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!dates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(dates[0], this.dateFormat);\n\t\t\t}\n\t\t\t// apply the value\n\t\t\tsingleInput.value = singleDate;\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof dates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(dates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!dates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(dates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\t// apply the value\n\t\t\t\trangeInput.value = rangeDate;\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected doSelect(selectedValue: (Date \| string)[]) {\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] \|\| currentValue[1] !== previousValue[1];\n\t}\n}\n"]}
1	+ {"version":3,"file":"datepicker.component.js","sourceRoot":"","sources":["../src/datepicker/datepicker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\n\n/*\n [See demo](../../?path=/story/date-picker--single)\n \n <example-url>../../iframe.html?id=date-picker--single</example-url>\n \n @export\n * @class DatePicker\n * @implements {OnDestroy}\n /\n@Component({\n\tselector: \"ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\n\t\t\t\t<div ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tstyles: [\n\t\t`.dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}`\n\t],\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements OnDestroy, OnChanges, AfterViewChecked {\n\tprivate static datePickerCount = 0;\n\n\t/*\n\t Select calendar range mode\n\t /\n\t@Input() range = false;\n\n\t/\n\t Format of date\n\t \n\t For reference: https://flatpickr.js.org/formatting/\n\t /\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t@Input() label: string \| TemplateRef<any>;\n\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date \| string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t@Input() theme: \"light\" \| \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() invalid = false;\n\n\t@Input() invalidText: string \| TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions() {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\"}));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat\n\t\t});\n\t}\n\n\tset flatpickrOptionsRange (options) {\n\t\tconsole.warn(\"flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead\");\n\t\tthis.range = true;\n\t\tthis.flatpickrOptions = options;\n\t}\n\tget flatpickrOptionsRange () {\n\t\tconsole.warn(\"flatpickrOptionsRange is deprecated, use flatpickrOptions and set the range to true instead\");\n\t\treturn this.flatpickrOptions;\n\t}\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => { this.updateClassNames(); },\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (changes.value && this.didDateValueChange(changes.value.currentValue, changes.value.previousValue)) {\n\t\t\t\tdates = changes.value.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}`, this.flatpickrOptions);\n\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\tthis.onTouched();\n\t}\n\n\t/\n\t Writes a value from the model to the component. Expects the value to be `null` or `(Date \| string)[]`\n\t * @param value value received from the model\n\t /\n\twriteValue(value: (Date \| string)[]) {\n\t\tthis.value = value;\n\t\tthis.setDateValues(this.value);\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => {};\n\n\tpropagateChange = (_: any) => {};\n\n\t/\n\t Cleans up our flatpickr instance\n\t /\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/\n\t Handles the `valueChange` event from the primary/single input\n\t /\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/\n\t Handles the `valueChange` event from the range input\n\t /\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/\n\t Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t /\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"bx--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"bx--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"bx--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\t/\n\t Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t /\n\tprotected setDateValues(dates: (Date \| string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof dates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(dates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!dates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(dates[0], this.dateFormat);\n\t\t\t}\n\t\t\t// apply the value\n\t\t\tsingleInput.value = singleDate;\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof dates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(dates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!dates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(dates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\t// apply the value\n\t\t\t\trangeInput.value = rangeDate;\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected doSelect(selectedValue: (Date \| string)[]) {\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] \|\| currentValue[1] !== previousValue[1];\n\t}\n\n\t/\n\t More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n}\n"]}

package/datepicker/datepicker.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"DatePicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"ibm-date-picker","template":"\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t","styles":[".dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":83,"character":12},"useExisting":{"__symbolic":"reference","name":"DatePicker"},"multi":true}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":88,"character":16},"member":"None"}}]}],"members":{"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":2}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":2}}]}],"rangeLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":2}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":2}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":2}}]}],"plugins":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":2}}]}],"flatpickrOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":2}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":164,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":182,"character":35}]}],"ngOnChanges":[{"__symbolic":"method"}],"~~ngAfterViewInit~~":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":~~204~~,"character":2},"arguments":["focusin"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onRangeValueChange":[{"__symbolic":"method"}],"updateClassNames":[{"__symbolic":"method"}],"setDateValues":[{"__symbolic":"method"}],"doSelect":[{"__symbolic":"method"}],"didDateValueChange":[{"__symbolic":"method"}]},"statics":{"datePickerCount":0}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"DatePicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"ibm-date-picker","template":"\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t","styles":[".dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":83,"character":12},"useExisting":{"__symbolic":"reference","name":"DatePicker"},"multi":true}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":88,"character":16},"member":"None"}}]}],"members":{"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":2}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":2}}]}],"rangeLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":2}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":2}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":2}}]}],"plugins":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":2}}]}],"flatpickrOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":2}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":164,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":182,"character":35}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":212,"character":2},"arguments":["focusin"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onRangeValueChange":[{"__symbolic":"method"}],"updateClassNames":[{"__symbolic":"method"}],"setDateValues":[{"__symbolic":"method"}],"doSelect":[{"__symbolic":"method"}],"didDateValueChange":[{"__symbolic":"method"}],"isFlatpickrLoaded":[{"__symbolic":"method"}]},"statics":{"datePickerCount":0}}}}]

package/datepicker/datepicker.component.ngfactory.js CHANGED Viewed

@@ -44,7 +44,7 @@ export function View_DatePicker_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0,
 export function View_DatePicker_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-date-picker", [], null, [[null, "focusin"]], function (_v, en, $event) { var ad = true; if (("focusin" === en)) {
         var pd_0 = (i0.ɵnov(_v, 2).onFocus() !== false);
         ad = (pd_0 && ad);
-    } return ad; }, View_DatePicker_0, RenderType_DatePicker)), i0.ɵprd(5120, null, i2.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i5.DatePicker]), i0.ɵdid(2, 4898816, null, 0, i5.DatePicker, [i0.ElementRef], null, null)], null, null); }
+    } return ad; }, View_DatePicker_0, RenderType_DatePicker)), i0.ɵprd(5120, null, i2.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i5.DatePicker]), i0.ɵdid(2, 9093120, null, 0, i5.DatePicker, [i0.ElementRef], null, null)], null, null); }
 var DatePickerNgFactory = i0.ɵccf("ibm-date-picker", i5.DatePicker, View_DatePicker_Host_0, { range: "range", dateFormat: "dateFormat", label: "label", rangeLabel: "rangeLabel", placeholder: "placeholder", pattern: "pattern", id: "id", value: "value", theme: "theme", disabled: "disabled", invalid: "invalid", invalidText: "invalidText", skeleton: "skeleton", plugins: "plugins", flatpickrOptions: "flatpickrOptions" }, { valueChange: "valueChange" }, []);
 export { DatePickerNgFactory as DatePickerNgFactory };
 //# sourceMappingURL=datepicker.component.ngfactory.js.map

package/datepicker/datepicker.component.ngsummary.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"rangeLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"plugins":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"flatpickrOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":3,"members":[]}]}],"ngOnChanges":[{"__symbolic":"method"}],"~~ngAfterViewInit~~":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["focusin"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onRangeValueChange":[{"__symbolic":"method"}],"updateClassNames":[{"__symbolic":"method"}],"setDateValues":[{"__symbolic":"method"}],"doSelect":[{"__symbolic":"method"}],"didDateValueChange":[{"__symbolic":"method"}]},"statics":{"datePickerCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":3,"members":[]}}}}],"lifecycleHooks":[1,3,6]},"isComponent":true,"selector":"ibm-date-picker","exportAs":null,"inputs":{"range":"range","dateFormat":"dateFormat","label":"label","rangeLabel":"rangeLabel","placeholder":"placeholder","pattern":"pattern","id":"id","value":"value","theme":"theme","disabled":"disabled","invalid":"invalid","invalidText":"invalidText","skeleton":"skeleton","plugins":"plugins","flatpickrOptions":"flatpickrOptions"},"outputs":{"valueChange":"valueChange"},"hostListeners":{"focusin":"onFocus()"},"hostProperties":{},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":5,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":0,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[],"guards":{},"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":[],"encapsulation":2},"componentViewType":{"__symbol":6,"members":[]},"rendererType":{"__symbol":7,"members":[]},"componentFactory":{"__symbol":8,"members":[]}}}],"symbols":[{"__symbol":0,"name":"DatePicker","filePath":"./datepicker.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"Output","filePath":"@angular/core"},{"__symbol":3,"name":"ElementRef","filePath":"@angular/core"},{"__symbol":4,"name":"HostListener","filePath":"@angular/core"},{"__symbol":5,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":6,"name":"View_DatePicker_0","filePath":"./datepicker.component.ngfactory"},{"__symbol":7,"name":"RenderType_DatePicker","filePath":"./datepicker.component.ngfactory"},{"__symbol":8,"name":"DatePickerNgFactory","filePath":"./datepicker.component.ngfactory"}]}
1	+ {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"rangeLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"plugins":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"flatpickrOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":3,"members":[]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["focusin"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onRangeValueChange":[{"__symbolic":"method"}],"updateClassNames":[{"__symbolic":"method"}],"setDateValues":[{"__symbolic":"method"}],"doSelect":[{"__symbolic":"method"}],"didDateValueChange":[{"__symbolic":"method"}],"isFlatpickrLoaded":[{"__symbolic":"method"}]},"statics":{"datePickerCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":3,"members":[]}}}}],"lifecycleHooks":[1,3,7]},"isComponent":true,"selector":"ibm-date-picker","exportAs":null,"inputs":{"range":"range","dateFormat":"dateFormat","label":"label","rangeLabel":"rangeLabel","placeholder":"placeholder","pattern":"pattern","id":"id","value":"value","theme":"theme","disabled":"disabled","invalid":"invalid","invalidText":"invalidText","skeleton":"skeleton","plugins":"plugins","flatpickrOptions":"flatpickrOptions"},"outputs":{"valueChange":"valueChange"},"hostListeners":{"focusin":"onFocus()"},"hostProperties":{},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":5,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":0,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[],"guards":{},"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":[],"encapsulation":2},"componentViewType":{"__symbol":6,"members":[]},"rendererType":{"__symbol":7,"members":[]},"componentFactory":{"__symbol":8,"members":[]}}}],"symbols":[{"__symbol":0,"name":"DatePicker","filePath":"./datepicker.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"Output","filePath":"@angular/core"},{"__symbol":3,"name":"ElementRef","filePath":"@angular/core"},{"__symbol":4,"name":"HostListener","filePath":"@angular/core"},{"__symbol":5,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":6,"name":"View_DatePicker_0","filePath":"./datepicker.component.ngfactory"},{"__symbol":7,"name":"RenderType_DatePicker","filePath":"./datepicker.component.ngfactory"},{"__symbol":8,"name":"DatePickerNgFactory","filePath":"./datepicker.component.ngfactory"}]}

package/dialog/dialog.component.js CHANGED Viewed

@@ -19,11 +19,12 @@
 import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, HostListener } from "@angular/core";
-import { Subscription, fromEvent, merge } from "rxjs";
+import { Subscription, fromEvent } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 // the AbsolutePosition is required to import the declaration correctly
 import Position, { position } from "@carbon/utils-position";
 import { cycleTabs, getFocusElementList } from "./../common/tab.service";
+import { scrollableParentsObservable, isVisibleInContainer } from "./../utils/scroll";
 /**
  * Implements a `Dialog` that can be positioned anywhere on the page.
  * Used to implement a popover or tooltip.
@@ -93,7 +94,7 @@ var Dialog = /** @class */ (function () {
     Dialog.prototype.ngAfterViewInit = function () {
         var _this = this;
         var dialogElement = this.dialog.nativeElement;
-        // split the wrapper class list and apply separately to avoid IE from
+        // split the wrapper class list and apply separately to avoid IE
         // 1. throwing an error due to assigning a readonly property (classList)
         // 2. throwing a SyntaxError due to passing an empty string to `add`
         if (this.dialogConfig.wrapperClass) {
@@ -106,38 +107,13 @@ var Dialog = /** @class */ (function () {
         if (getFocusElementList(this.dialog.nativeElement).length > 0) {
             dialogElement.focus();
         }
-        var parentEl = this.dialogConfig.parentRef.nativeElement;
-        var node = parentEl;
-        var observables = [];
-        // if the element has an overflow set as part of
-        // its computed style it can scroll
-        var isScrollableElement = function (element) {
-            var computedStyle = getComputedStyle(element);
-            return (computedStyle.overflow === "auto" ||
-                computedStyle.overflow === "scroll" ||
-                computedStyle["overflow-y"] === "auto" ||
-                computedStyle["overflow-y"] === "scroll" ||
-                computedStyle["overflow-x"] === "auto" ||
-                computedStyle["overflow-x"] === "scroll");
-        };
-        var isVisibleInContainer = function (element, container) {
-            var elementRect = element.getBoundingClientRect();
-            var containerRect = container.getBoundingClientRect();
-            return elementRect.bottom <= containerRect.bottom && elementRect.top >= containerRect.top;
-        };
+        var parentElement = this.dialogConfig.parentRef.nativeElement;
         var placeDialogInContainer = function () {
             // only do the work to find the scroll containers if we're appended to body
             // or skip this work if we're inline
             if (!_this.dialogConfig.appendInline) {
-                // walk the parents and subscribe to all the scroll events we can
-                while (node.parentElement && node !== document.body) {
-                    if (isScrollableElement(node)) {
-                        observables.push(fromEvent(node, "scroll"));
-                    }
-                    node = node.parentElement;
-                }
                 // subscribe to the observable, and update the position and visibility
-                var scrollObservable = merge.apply(void 0, observables);
+                var scrollObservable = scrollableParentsObservable(parentElement);
                 _this.scrollSubscription = scrollObservable.subscribe(function (event) {
                     _this.placeDialog();
                     if (!isVisibleInContainer(_this.dialogConfig.parentRef.nativeElement, event.target)) {

package/dialog/dialog.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../src/dialog/dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tViewChild,\n\tOnInit,\n\tAfterViewInit,\n\tOnDestroy,\n\tHostListener\n} from \"@angular/core\";\nimport {\n\tObservable,\n\tSubscription,\n\tfromEvent,\n\tmerge\n} from \"rxjs\";\nimport { throttleTime } from \"rxjs/operators\";\n// the AbsolutePosition is required to import the declaration correctly\nimport Position, { position, AbsolutePosition, Positions } from \"@carbon/utils-position\";\nimport { cycleTabs, getFocusElementList } from \"./../common/tab.service\";\nimport { DialogConfig } from \"./dialog-config.interface\";\n\n\n/*\n Implements a `Dialog` that can be positioned anywhere on the page.\n * Used to implement a popover or tooltip.\n \n @export\n * @class Dialog\n * @implements {OnInit}\n * @implements {AfterViewInit}\n * @implements {OnDestroy}\n /\n@Component({\n\tselector: \"ibm-dialog\",\n\ttemplate: \"\"\n})\nexport class Dialog implements OnInit, AfterViewInit, OnDestroy {\n\t/\n\t One static event observable to handle window resizing.\n\t /\n\tprotected static resizeObservable: Observable<any> = fromEvent(window, \"resize\").pipe(throttleTime(100));\n\t/\n\t Emits event that handles the closing of a `Dialog` object.\n\t /\n\t@Output() close: EventEmitter<any> = new EventEmitter();\n\t/\n\t Receives `DialogConfig` interface object with properties of `Dialog`\n\t * explicitly defined.\n\t /\n\t@Input() dialogConfig: DialogConfig;\n\t/\n\t Maintains a reference to the view DOM element of the `Dialog`.\n\t /\n\t@ViewChild(\"dialog\") dialog: ElementRef;\n\n\t/\n\t Stores the data received from `dialogConfig`.\n\t /\n\tpublic data = {};\n\n\t/\n\t The placement of the `Dialog` is received from the `Position` service.\n\t /\n\tpublic placement: string;\n\n\t/\n\t `Subscription` used to update placement in the event of a window resize.\n\t /\n\tprotected resizeSubscription: Subscription;\n\t/\n\t Subscription to all the scrollable parents `scroll` event\n\t /\n\t// add a new subscription temporarily so that contexts (such as tests)\n\t// that don't run ngAfterViewInit have something to unsubscribe in ngOnDestroy\n\tprotected scrollSubscription: Subscription = new Subscription();\n\t/\n\t Handles offsetting the `Dialog` item based on the defined position\n\t * to not obscure the content beneath.\n\t /\n\tprotected addGap = {\n\t\t\"left\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right\": pos => position.addOffset(pos, 0, this.dialogConfig.gap),\n\t\t\"top\": pos => position.addOffset(pos, -this.dialogConfig.gap),\n\t\t\"bottom\": pos => position.addOffset(pos, this.dialogConfig.gap),\n\t\t\"left-bottom\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right-bottom\": pos => position.addOffset(pos, 0, this.dialogConfig.gap)\n\t};\n\n\t/\n\t Extra placements. Child classes can add to this for use in `placeDialog`.\n\t /\n\tprotected placements: Positions = {};\n\n\t/\n\t Creates an instance of `Dialog`.\n\t * @param {ElementRef} elementRef\n\t /\n\tconstructor(protected elementRef: ElementRef) {\t}\n\n\t/\n\t Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.\n\t /\n\tngOnInit() {\n\t\tthis.placement = this.dialogConfig.placement.split(\",\")[0];\n\t\tthis.data = this.dialogConfig.data;\n\n\t\tthis.resizeSubscription = Dialog.resizeObservable.subscribe(() => {\n\t\t\tthis.placeDialog();\n\t\t});\n\n\t\t// run any additional initialization code that consuming classes may have\n\t\tthis.onDialogInit();\n\t}\n\n\t/\n\t After the DOM is ready, focus is set and dialog is placed\n\t * in respect to the parent element.\n\t /\n\tngAfterViewInit() {\n\t\tconst dialogElement = this.dialog.nativeElement;\n\t\t// split the wrapper class list and apply separately to avoid IE from\n\t\t// 1. throwing an error due to assigning a readonly property (classList)\n\t\t// 2. throwing a SyntaxError due to passing an empty string to `add`\n\t\tif (this.dialogConfig.wrapperClass) {\n\t\t\tfor (const extraClass of this.dialogConfig.wrapperClass.split(\" \")) {\n\t\t\t\tdialogElement.classList.add(extraClass);\n\t\t\t}\n\t\t}\n\t\tthis.placeDialog();\n\t\tif (getFocusElementList(this.dialog.nativeElement).length > 0) {\n\t\t\tdialogElement.focus();\n\t\t}\n\t\tconst parentEl: HTMLElement = this.dialogConfig.parentRef.nativeElement;\n\t\tlet node = parentEl;\n\t\tlet observables = [];\n\n\t\t// if the element has an overflow set as part of\n\t\t// its computed style it can scroll\n\t\tconst isScrollableElement = (element: HTMLElement) => {\n\t\t\tconst computedStyle = getComputedStyle(element);\n\t\t\treturn (\n\t\t\t\tcomputedStyle.overflow === \"auto\" \|\|\n\t\t\t\tcomputedStyle.overflow === \"scroll\" \|\|\n\t\t\t\tcomputedStyle[\"overflow-y\"] === \"auto\" \|\|\n\t\t\t\tcomputedStyle[\"overflow-y\"] === \"scroll\" \|\|\n\t\t\t\tcomputedStyle[\"overflow-x\"] === \"auto\" \|\|\n\t\t\t\tcomputedStyle[\"overflow-x\"] === \"scroll\"\n\t\t\t);\n\t\t};\n\n\t\tconst isVisibleInContainer = (element, container) => {\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst containerRect = container.getBoundingClientRect();\n\t\t\treturn elementRect.bottom <= containerRect.bottom && elementRect.top >= containerRect.top;\n\t\t};\n\n\t\tconst placeDialogInContainer = () => {\n\t\t\t// only do the work to find the scroll containers if we're appended to body\n\t\t\t// or skip this work if we're inline\n\t\t\tif (!this.dialogConfig.appendInline) {\n\t\t\t\t// walk the parents and subscribe to all the scroll events we can\n\t\t\t\twhile (node.parentElement && node !== document.body) {\n\t\t\t\t\tif (isScrollableElement(node)) {\n\t\t\t\t\t\tobservables.push(fromEvent(node, \"scroll\"));\n\t\t\t\t\t}\n\t\t\t\t\tnode = node.parentElement;\n\t\t\t\t}\n\t\t\t\t// subscribe to the observable, and update the position and visibility\n\t\t\t\tconst scrollObservable = merge(...observables);\n\t\t\t\tthis.scrollSubscription = scrollObservable.subscribe((event: any) => {\n\t\t\t\t\tthis.placeDialog();\n\t\t\t\t\tif (!isVisibleInContainer(this.dialogConfig.parentRef.nativeElement, event.target)) {\n\t\t\t\t\t\tthis.doClose();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\t// settimeout to let the DOM settle before attempting to place the dialog\n\t\t// and before notifying components that the DOM is ready\n\t\tsetTimeout(() => {\n\t\t\tplaceDialogInContainer();\n\t\t\tthis.afterDialogViewInit();\n\t\t});\n\t}\n\n\t/\n\t Empty method to be overridden by consuming classes to run any additional initialization code.\n\t /\n\tonDialogInit() {}\n\n\t/\n\t Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\n\t * NOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n\t /\n\tafterDialogViewInit() {}\n\n\t/\n\t Uses the position service to position the `Dialog` in screen space\n\t /\n\tplaceDialog(): void {\n\t\tconst positionService = new Position(this.placements);\n\t\t// helper to find the position based on the current/given environment\n\t\tconst findPosition = (reference, target, placement) => {\n\t\t\tlet pos;\n\t\t\tif (this.dialogConfig.appendInline) {\n\t\t\t\tpos = this.addGap[placement](positionService.findRelative(reference, target, placement));\n\t\t\t} else {\n\t\t\t\tpos = this.addGap[placement](positionService.findAbsolute(reference, target, placement));\n\t\t\t}\n\t\t\treturn pos;\n\t\t};\n\n\t\tlet parentEl = this.dialogConfig.parentRef.nativeElement;\n\t\tlet el = this.dialog.nativeElement;\n\t\tlet dialogPlacement = this.placement;\n\n\t\t// split always returns an array, so we can just use the auto position logic\n\t\t// for single positions too\n\t\tconst placements = this.dialogConfig.placement.split(\",\");\n\n\t\t// find the best placement\n\t\tdialogPlacement = positionService.findBestPlacement(parentEl, el, placements);\n\n\t\t// calculate the final position\n\t\tconst pos = findPosition(parentEl, el, dialogPlacement);\n\n\t\t// update the element\n\t\tpositionService.setElement(el, pos);\n\t\tsetTimeout(() => { this.placement = dialogPlacement; });\n\t}\n\n\t/\n\t Sets up a KeyboardEvent to close `Dialog` with Escape key.\n\t * @param {KeyboardEvent} event\n\t /\n\t@HostListener(\"keydown\", [\"$event\"])\n\tescapeClose(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Esc\": // IE specific value\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\tthis.doClose();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.elementRef.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Sets up a event Listener to close `Dialog` if click event occurs outside\n\t * `Dialog` object.\n\t * @param {any} event\n\t /\n\t@HostListener(\"document:click\", [\"$event\"])\n\tclickClose(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target)\n\t\t\t&& !this.dialogConfig.parentRef.nativeElement.contains(event.target) ) {\n\t\t\tthis.doClose();\n\t\t}\n\t}\n\n\t/\n\t Closes `Dialog` object by emitting the close event upwards to parents.\n\t /\n\tpublic doClose() {\n\t\tthis.close.emit();\n\t}\n\n\t/\n\t At destruction of component, `Dialog` unsubscribes from handling window resizing changes.\n\t */\n\tngOnDestroy() {\n\t\tthis.resizeSubscription.unsubscribe();\n\t\tthis.scrollSubscription.unsubscribe();\n\t}\n}\n"]}
1	+ {"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../src/dialog/dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tViewChild,\n\tOnInit,\n\tAfterViewInit,\n\tOnDestroy,\n\tHostListener\n} from \"@angular/core\";\nimport {\n\tObservable,\n\tSubscription,\n\tfromEvent,\n\tmerge\n} from \"rxjs\";\nimport { throttleTime, map } from \"rxjs/operators\";\n// the AbsolutePosition is required to import the declaration correctly\nimport Position, { position, AbsolutePosition, Positions } from \"@carbon/utils-position\";\nimport { cycleTabs, getFocusElementList } from \"./../common/tab.service\";\nimport { DialogConfig } from \"./dialog-config.interface\";\nimport { scrollableParentsObservable, isVisibleInContainer } from \"./../utils/scroll\";\n\n/*\n Implements a `Dialog` that can be positioned anywhere on the page.\n * Used to implement a popover or tooltip.\n \n @export\n * @class Dialog\n * @implements {OnInit}\n * @implements {AfterViewInit}\n * @implements {OnDestroy}\n /\n@Component({\n\tselector: \"ibm-dialog\",\n\ttemplate: \"\"\n})\nexport class Dialog implements OnInit, AfterViewInit, OnDestroy {\n\t/\n\t One static event observable to handle window resizing.\n\t /\n\tprotected static resizeObservable: Observable<any> = fromEvent(window, \"resize\").pipe(throttleTime(100));\n\t/\n\t Emits event that handles the closing of a `Dialog` object.\n\t /\n\t@Output() close: EventEmitter<any> = new EventEmitter();\n\t/\n\t Receives `DialogConfig` interface object with properties of `Dialog`\n\t * explicitly defined.\n\t /\n\t@Input() dialogConfig: DialogConfig;\n\t/\n\t Maintains a reference to the view DOM element of the `Dialog`.\n\t /\n\t@ViewChild(\"dialog\") dialog: ElementRef;\n\n\t/\n\t Stores the data received from `dialogConfig`.\n\t /\n\tpublic data = {};\n\n\t/\n\t The placement of the `Dialog` is received from the `Position` service.\n\t /\n\tpublic placement: string;\n\n\t/\n\t `Subscription` used to update placement in the event of a window resize.\n\t /\n\tprotected resizeSubscription: Subscription;\n\t/\n\t Subscription to all the scrollable parents `scroll` event\n\t /\n\t// add a new subscription temporarily so that contexts (such as tests)\n\t// that don't run ngAfterViewInit have something to unsubscribe in ngOnDestroy\n\tprotected scrollSubscription: Subscription = new Subscription();\n\t/\n\t Handles offsetting the `Dialog` item based on the defined position\n\t * to not obscure the content beneath.\n\t /\n\tprotected addGap = {\n\t\t\"left\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right\": pos => position.addOffset(pos, 0, this.dialogConfig.gap),\n\t\t\"top\": pos => position.addOffset(pos, -this.dialogConfig.gap),\n\t\t\"bottom\": pos => position.addOffset(pos, this.dialogConfig.gap),\n\t\t\"left-bottom\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right-bottom\": pos => position.addOffset(pos, 0, this.dialogConfig.gap)\n\t};\n\n\t/\n\t Extra placements. Child classes can add to this for use in `placeDialog`.\n\t /\n\tprotected placements: Positions = {};\n\n\t/\n\t Creates an instance of `Dialog`.\n\t * @param {ElementRef} elementRef\n\t /\n\tconstructor(protected elementRef: ElementRef) {\t}\n\n\t/\n\t Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.\n\t /\n\tngOnInit() {\n\t\tthis.placement = this.dialogConfig.placement.split(\",\")[0];\n\t\tthis.data = this.dialogConfig.data;\n\n\t\tthis.resizeSubscription = Dialog.resizeObservable.subscribe(() => {\n\t\t\tthis.placeDialog();\n\t\t});\n\n\t\t// run any additional initialization code that consuming classes may have\n\t\tthis.onDialogInit();\n\t}\n\n\t/\n\t After the DOM is ready, focus is set and dialog is placed\n\t * in respect to the parent element.\n\t /\n\tngAfterViewInit() {\n\t\tconst dialogElement = this.dialog.nativeElement;\n\t\t// split the wrapper class list and apply separately to avoid IE\n\t\t// 1. throwing an error due to assigning a readonly property (classList)\n\t\t// 2. throwing a SyntaxError due to passing an empty string to `add`\n\t\tif (this.dialogConfig.wrapperClass) {\n\t\t\tfor (const extraClass of this.dialogConfig.wrapperClass.split(\" \")) {\n\t\t\t\tdialogElement.classList.add(extraClass);\n\t\t\t}\n\t\t}\n\t\tthis.placeDialog();\n\t\tif (getFocusElementList(this.dialog.nativeElement).length > 0) {\n\t\t\tdialogElement.focus();\n\t\t}\n\t\tconst parentElement = this.dialogConfig.parentRef.nativeElement;\n\n\t\tconst placeDialogInContainer = () => {\n\t\t\t// only do the work to find the scroll containers if we're appended to body\n\t\t\t// or skip this work if we're inline\n\t\t\tif (!this.dialogConfig.appendInline) {\n\t\t\t\t// subscribe to the observable, and update the position and visibility\n\t\t\t\tconst scrollObservable = scrollableParentsObservable(parentElement);\n\t\t\t\tthis.scrollSubscription = scrollObservable.subscribe((event: any) => {\n\t\t\t\t\tthis.placeDialog();\n\t\t\t\t\tif (!isVisibleInContainer(this.dialogConfig.parentRef.nativeElement, event.target)) {\n\t\t\t\t\t\tthis.doClose();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\t// settimeout to let the DOM settle before attempting to place the dialog\n\t\t// and before notifying components that the DOM is ready\n\t\tsetTimeout(() => {\n\t\t\tplaceDialogInContainer();\n\t\t\tthis.afterDialogViewInit();\n\t\t});\n\t}\n\n\t/\n\t Empty method to be overridden by consuming classes to run any additional initialization code.\n\t /\n\tonDialogInit() {}\n\n\t/\n\t Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\n\t * NOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n\t /\n\tafterDialogViewInit() {}\n\n\t/\n\t Uses the position service to position the `Dialog` in screen space\n\t /\n\tplaceDialog(): void {\n\t\tconst positionService = new Position(this.placements);\n\t\t// helper to find the position based on the current/given environment\n\t\tconst findPosition = (reference, target, placement) => {\n\t\t\tlet pos;\n\t\t\tif (this.dialogConfig.appendInline) {\n\t\t\t\tpos = this.addGap[placement](positionService.findRelative(reference, target, placement));\n\t\t\t} else {\n\t\t\t\tpos = this.addGap[placement](positionService.findAbsolute(reference, target, placement));\n\t\t\t}\n\t\t\treturn pos;\n\t\t};\n\n\t\tlet parentEl = this.dialogConfig.parentRef.nativeElement;\n\t\tlet el = this.dialog.nativeElement;\n\t\tlet dialogPlacement = this.placement;\n\n\t\t// split always returns an array, so we can just use the auto position logic\n\t\t// for single positions too\n\t\tconst placements = this.dialogConfig.placement.split(\",\");\n\n\t\t// find the best placement\n\t\tdialogPlacement = positionService.findBestPlacement(parentEl, el, placements);\n\n\t\t// calculate the final position\n\t\tconst pos = findPosition(parentEl, el, dialogPlacement);\n\n\t\t// update the element\n\t\tpositionService.setElement(el, pos);\n\t\tsetTimeout(() => { this.placement = dialogPlacement; });\n\t}\n\n\t/\n\t Sets up a KeyboardEvent to close `Dialog` with Escape key.\n\t * @param {KeyboardEvent} event\n\t /\n\t@HostListener(\"keydown\", [\"$event\"])\n\tescapeClose(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Esc\": // IE specific value\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\tthis.doClose();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.elementRef.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Sets up a event Listener to close `Dialog` if click event occurs outside\n\t * `Dialog` object.\n\t * @param {any} event\n\t /\n\t@HostListener(\"document:click\", [\"$event\"])\n\tclickClose(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target)\n\t\t\t&& !this.dialogConfig.parentRef.nativeElement.contains(event.target) ) {\n\t\t\tthis.doClose();\n\t\t}\n\t}\n\n\t/\n\t Closes `Dialog` object by emitting the close event upwards to parents.\n\t /\n\tpublic doClose() {\n\t\tthis.close.emit();\n\t}\n\n\t/\n\t At destruction of component, `Dialog` unsubscribes from handling window resizing changes.\n\t */\n\tngOnDestroy() {\n\t\tthis.resizeSubscription.unsubscribe();\n\t\tthis.scrollSubscription.unsubscribe();\n\t}\n}\n"]}

package/dialog/dialog.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"Dialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"ibm-dialog","template":""}]}],"members":{"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":2}}]}],"dialogConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"dialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":2},"arguments":["dialog"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":100,"character":35}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onDialogInit":[{"__symbolic":"method"}],"afterDialogViewInit":[{"__symbolic":"method"}],"placeDialog":[{"__symbolic":"method"}],"escapeClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":~~239~~,"character":2},"arguments":["keydown",["$event"]]}]}],"clickClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":~~260~~,"character":2},"arguments":["document:click",["$event"]]}]}],"doClose":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]},"statics":{"resizeObservable":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs","name":"fromEvent","line":43,"character":54},"arguments":[{"__symbolic":"reference","name":"window"},"resize"]},"member":"pipe"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs/operators","name":"throttleTime","line":43,"character":87},"arguments":[100]}]}}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"Dialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"ibm-dialog","template":""}]}],"members":{"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":2}}]}],"dialogConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"dialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":2},"arguments":["dialog"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":100,"character":35}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onDialogInit":[{"__symbolic":"method"}],"afterDialogViewInit":[{"__symbolic":"method"}],"placeDialog":[{"__symbolic":"method"}],"escapeClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":210,"character":2},"arguments":["keydown",["$event"]]}]}],"clickClose":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":231,"character":2},"arguments":["document:click",["$event"]]}]}],"doClose":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]},"statics":{"resizeObservable":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs","name":"fromEvent","line":43,"character":54},"arguments":[{"__symbolic":"reference","name":"window"},"resize"]},"member":"pipe"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"rxjs/operators","name":"throttleTime","line":43,"character":87},"arguments":[100]}]}}}}}]

package/dialog/overflow-menu/overflow-menu-option.component.js CHANGED Viewed

@@ -84,7 +84,7 @@ var OverflowMenuOption = /** @class */ (function () {
     OverflowMenuOption.decorators = [
         { type: Component, args: [{
                     selector: "ibm-overflow-menu-option",
-                    template: "\n\t\t<button\n\t\t\t*ngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\t*ngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t"
+                    template: "\n\t\t<button\n\t\t\t*ngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\t*ngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t"
                 },] },
     ];
     /** @nocollapse */

package/dialog/overflow-menu/overflow-menu-option.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overflow-menu-option.component.js","sourceRoot":"","sources":["../../src/dialog/overflow-menu/overflow-menu-option.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,WAAW,EACX,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,YAAY,EAEZ,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;GAWG;AACH;IAoEC,4BAAsB,UAAsB;QAAtB,eAAU,GAAV,UAAU,CAAY;QA9BtB,gBAAW,GAAG,mCAAmC,CAAC;QAC9C,SAAI,GAAG,cAAc,CAAC;QAWhD;;WAEG;QACM,SAAI,GAAwB,QAAQ,CAAC;QAC9C;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAIhB,aAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;QAEpD,aAAQ,GAAG,CAAC,CAAC,CAAC;QACrB,kFAAkF;QAClF,8BAA8B;QACvB,UAAK,GAAG,IAAI,CAAC;IAE2B,CAAC;IA3BhD,sBACW,wCAAQ;aADnB;YAEC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;QAC/B,CAAC;;;OAAA;IAED,sBACW,0CAAU;aADrB;YAEC,OAAO,IAAI,CAAC,QAAQ,CAAC;QACtB,CAAC;;;OAAA;IAqBD,oCAAO,GAAP;QACC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,oCAAO,GAAP;QAAA,iBAEC;QADA,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,QAAQ,GAAG,CAAC,EAAjB,CAAiB,CAAC,CAAC;IACrC,CAAC;IAED,mCAAM,GAAN;QAAA,iBAEC;QADA,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAlB,CAAkB,CAAC,CAAC;IACtC,CAAC;IAED,4CAAe,GAAf;QACC,IAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACxE,IAAI,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;YAC5C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;SAChC;IACF,CAAC;;gBAvFD,SAAS,SAAC;oBACV,QAAQ,EAAE,0BAA0B;oBACpC,QAAQ,EAAE,~~o7BAiCT~~;iBACD;;;;gBAtDA,UAAU;;;8BAwDT,WAAW,SAAC,OAAO;uBACnB,WAAW,SAAC,WAAW;2BAEvB,WAAW,SAAC,iDAAiD;6BAK7D,WAAW,SAAC,mDAAmD;uBAO/D,KAAK;2BAIL,KAAK;uBAEL,KAAK;2BAEL,MAAM;;IA2BR,yBAAC;CAAA,AAxFD,IAwFC;SAnDY,kBAAkB","sourcesContent":["import {\n\tHostBinding,\n\tComponent,\n\tInput,\n\tElementRef,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\n/*\n `OverflowMenuOption` represents a single option in an overflow menu\n \n Presently it has three possible states - normal, disabled, and danger:\n * ```\n * <ibm-overflow-menu-option>Simple option</ibm-overflow-menu-option>\n * <ibm-overflow-menu-option disabled=\"true\">Disabled</ibm-overflow-menu-option>\n * <ibm-overflow-menu-option type=\"danger\">Danger option</ibm-overflow-menu-option>\n * ```\n \n For content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.\n /\n@Component({\n\tselector: \"ibm-overflow-menu-option\",\n\ttemplate: `\n\t\t<button\n\t\t\tngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick(~~$event~~)\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\tngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick(~~$event~~)\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class OverflowMenuOption implements AfterViewInit {\n\t@HostBinding(\"class\") optionClass = \"bx--overflow-menu-options__option\";\n\t@HostBinding(\"attr.role\") role = \"presentation\";\n\n\t@HostBinding(\"class.bx--overflow-menu-options__option--danger\")\n\tpublic get isDanger(): Boolean {\n\t\treturn this.type === \"danger\";\n\t}\n\n\t@HostBinding(\"class.bx--overflow-menu-options__option--disabled\")\n\tpublic get isDisabled(): Boolean {\n\t\treturn this.disabled;\n\t}\n\t/\n\t toggles between `normal` and `danger` states\n\t /\n\t@Input() type: \"normal\" \| \"danger\" = \"normal\";\n\t/\n\t disable/enable interactions\n\t */\n\t@Input() disabled = false;\n\n\t@Input() href: string;\n\n\t@Output() selected: EventEmitter<any> = new EventEmitter();\n\n\tpublic tabIndex = -1;\n\t// note: title must be a real attribute (i.e. not a getter) as of Angular@6 due to\n\t// change after checked errors\n\tpublic title = null;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tonClick() {\n\t\tthis.selected.emit();\n\t}\n\n\tonFocus() {\n\t\tsetTimeout(() => this.tabIndex = 0);\n\t}\n\n\tonBlur() {\n\t\tsetTimeout(() => this.tabIndex = -1);\n\t}\n\n\tngAfterViewInit() {\n\t\tconst button = this.elementRef.nativeElement.querySelector(\"button, a\");\n\t\tif (button.scrollWidth > button.offsetWidth) {\n\t\t\tthis.title = button.textContent;\n\t\t}\n\t}\n}\n"]}
1	+ {"version":3,"file":"overflow-menu-option.component.js","sourceRoot":"","sources":["../../src/dialog/overflow-menu/overflow-menu-option.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,WAAW,EACX,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,YAAY,EAEZ,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;GAWG;AACH;IAoEC,4BAAsB,UAAsB;QAAtB,eAAU,GAAV,UAAU,CAAY;QA9BtB,gBAAW,GAAG,mCAAmC,CAAC;QAC9C,SAAI,GAAG,cAAc,CAAC;QAWhD;;WAEG;QACM,SAAI,GAAwB,QAAQ,CAAC;QAC9C;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAIhB,aAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;QAEpD,aAAQ,GAAG,CAAC,CAAC,CAAC;QACrB,kFAAkF;QAClF,8BAA8B;QACvB,UAAK,GAAG,IAAI,CAAC;IAE2B,CAAC;IA3BhD,sBACW,wCAAQ;aADnB;YAEC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;QAC/B,CAAC;;;OAAA;IAED,sBACW,0CAAU;aADrB;YAEC,OAAO,IAAI,CAAC,QAAQ,CAAC;QACtB,CAAC;;;OAAA;IAqBD,oCAAO,GAAP;QACC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,oCAAO,GAAP;QAAA,iBAEC;QADA,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,QAAQ,GAAG,CAAC,EAAjB,CAAiB,CAAC,CAAC;IACrC,CAAC;IAED,mCAAM,GAAN;QAAA,iBAEC;QADA,UAAU,CAAC,cAAM,OAAA,KAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAlB,CAAkB,CAAC,CAAC;IACtC,CAAC;IAED,4CAAe,GAAf;QACC,IAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACxE,IAAI,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;YAC5C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;SAChC;IACF,CAAC;;gBAvFD,SAAS,SAAC;oBACV,QAAQ,EAAE,0BAA0B;oBACpC,QAAQ,EAAE,w6BAiCT;iBACD;;;;gBAtDA,UAAU;;;8BAwDT,WAAW,SAAC,OAAO;uBACnB,WAAW,SAAC,WAAW;2BAEvB,WAAW,SAAC,iDAAiD;6BAK7D,WAAW,SAAC,mDAAmD;uBAO/D,KAAK;2BAIL,KAAK;uBAEL,KAAK;2BAEL,MAAM;;IA2BR,yBAAC;CAAA,AAxFD,IAwFC;SAnDY,kBAAkB","sourcesContent":["import {\n\tHostBinding,\n\tComponent,\n\tInput,\n\tElementRef,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\n/*\n `OverflowMenuOption` represents a single option in an overflow menu\n \n Presently it has three possible states - normal, disabled, and danger:\n * ```\n * <ibm-overflow-menu-option>Simple option</ibm-overflow-menu-option>\n * <ibm-overflow-menu-option disabled=\"true\">Disabled</ibm-overflow-menu-option>\n * <ibm-overflow-menu-option type=\"danger\">Danger option</ibm-overflow-menu-option>\n * ```\n \n For content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.\n /\n@Component({\n\tselector: \"ibm-overflow-menu-option\",\n\ttemplate: `\n\t\t<button\n\t\t\tngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\tngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class OverflowMenuOption implements AfterViewInit {\n\t@HostBinding(\"class\") optionClass = \"bx--overflow-menu-options__option\";\n\t@HostBinding(\"attr.role\") role = \"presentation\";\n\n\t@HostBinding(\"class.bx--overflow-menu-options__option--danger\")\n\tpublic get isDanger(): Boolean {\n\t\treturn this.type === \"danger\";\n\t}\n\n\t@HostBinding(\"class.bx--overflow-menu-options__option--disabled\")\n\tpublic get isDisabled(): Boolean {\n\t\treturn this.disabled;\n\t}\n\t/\n\t toggles between `normal` and `danger` states\n\t /\n\t@Input() type: \"normal\" \| \"danger\" = \"normal\";\n\t/\n\t disable/enable interactions\n\t */\n\t@Input() disabled = false;\n\n\t@Input() href: string;\n\n\t@Output() selected: EventEmitter<any> = new EventEmitter();\n\n\tpublic tabIndex = -1;\n\t// note: title must be a real attribute (i.e. not a getter) as of Angular@6 due to\n\t// change after checked errors\n\tpublic title = null;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tonClick() {\n\t\tthis.selected.emit();\n\t}\n\n\tonFocus() {\n\t\tsetTimeout(() => this.tabIndex = 0);\n\t}\n\n\tonBlur() {\n\t\tsetTimeout(() => this.tabIndex = -1);\n\t}\n\n\tngAfterViewInit() {\n\t\tconst button = this.elementRef.nativeElement.querySelector(\"button, a\");\n\t\tif (button.scrollWidth > button.offsetWidth) {\n\t\t\tthis.title = button.textContent;\n\t\t}\n\t}\n}\n"]}

package/dialog/overflow-menu/overflow-menu-option.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"OverflowMenuOption":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"ibm-overflow-menu-option","template":"\n\t\t<button\n\t\t\tngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick(~~$event~~)\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\tngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick(~~$event~~)\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t"}]}],"members":{"optionClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":60,"character":2},"arguments":["class"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":61,"character":2},"arguments":["attr.role"]}]}],"isDanger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":63,"character":2},"arguments":["class.bx--overflow-menu-options__option--danger"]}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":68,"character":2},"arguments":["class.bx--overflow-menu-options__option--disabled"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":2}}]}],"href":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":90,"character":35}]}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"OverflowMenuOption":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"ibm-overflow-menu-option","template":"\n\t\t<button\n\t\t\tngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\tngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t"}]}],"members":{"optionClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":60,"character":2},"arguments":["class"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":61,"character":2},"arguments":["attr.role"]}]}],"isDanger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":63,"character":2},"arguments":["class.bx--overflow-menu-options__option--danger"]}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":68,"character":2},"arguments":["class.bx--overflow-menu-options__option--disabled"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":2}}]}],"href":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":90,"character":35}]}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}}}]

package/dialog/overflow-menu/overflow-menu-option.component.ngfactory.js CHANGED Viewed

@@ -38,7 +38,7 @@ function View_OverflowMenuOption_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0
         var pd_1 = (_co.onBlur() !== false);
         ad = (pd_1 && ad);
     } if (("click" === en)) {
-        var pd_2 = (_co.onClick($event) !== false);
+        var pd_2 = (_co.onClick() !== false);
         ad = (pd_2 && ad);
     } return ad; }, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_OverflowMenuOption_2)), i0.ɵdid(2, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null)], function (_ck, _v) { var currVal_3 = i0.ɵnov(_v.parent, 4); _ck(_v, 2, 0, currVal_3); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.tabIndex; var currVal_1 = _co.disabled; var currVal_2 = _co.title; _ck(_v, 0, 0, currVal_0, currVal_1, currVal_2); }); }
 function View_OverflowMenuOption_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 0, null, null, null, null, null, null, null))], null, null); }
@@ -49,7 +49,7 @@ function View_OverflowMenuOption_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0
         var pd_1 = (_co.onBlur() !== false);
         ad = (pd_1 && ad);
     } if (("click" === en)) {
-        var pd_2 = (_co.onClick($event) !== false);
+        var pd_2 = (_co.onClick() !== false);
         ad = (pd_2 && ad);
     } return ad; }, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_OverflowMenuOption_4)), i0.ɵdid(2, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null)], function (_ck, _v) { var currVal_4 = i0.ɵnov(_v.parent, 4); _ck(_v, 2, 0, currVal_4); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.tabIndex; var currVal_1 = _co.disabled; var currVal_2 = _co.href; var currVal_3 = _co.title; _ck(_v, 0, 0, currVal_0, currVal_1, currVal_2, currVal_3); }); }
 function View_OverflowMenuOption_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "div", [["class", "bx--overflow-menu-options__option-content"]], null, null, null, null, null)), i0.ɵncd(null, 0)], null, null); }