@ngx-stoui/core 12.1.5 → 13.0.1

package/fesm2015/ngx-stoui-core.mjs

@@ -0,0 +1,926 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Directive, Input, Output, HostListener, ContentChildren, Injectable, Optional, HostBinding, ElementRef, Host, NgModule, Pipe, Component } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatInput } from '@angular/material/input';
+import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
+import { takeUntil, switchMap, take } from 'rxjs/operators';
+import { LayoutModule } from '@angular/cdk/layout';
+import * as i1 from '@angular/material/menu';
+import { format } from 'date-fns';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+/**
+MIT License
+
+Copyright (c) 2017 Nathan Friend
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. **/
+var Key;
+(function (Key) {
+    Key[Key["Backspace"] = 8] = "Backspace";
+    Key[Key["Tab"] = 9] = "Tab";
+    Key[Key["Enter"] = 13] = "Enter";
+    Key[Key["Shift"] = 16] = "Shift";
+    Key[Key["Ctrl"] = 17] = "Ctrl";
+    Key[Key["Alt"] = 18] = "Alt";
+    Key[Key["PauseBreak"] = 19] = "PauseBreak";
+    Key[Key["CapsLock"] = 20] = "CapsLock";
+    Key[Key["Escape"] = 27] = "Escape";
+    Key[Key["Space"] = 32] = "Space";
+    Key[Key["PageUp"] = 33] = "PageUp";
+    Key[Key["PageDown"] = 34] = "PageDown";
+    Key[Key["End"] = 35] = "End";
+    Key[Key["Home"] = 36] = "Home";
+    Key[Key["LeftArrow"] = 37] = "LeftArrow";
+    Key[Key["UpArrow"] = 38] = "UpArrow";
+    Key[Key["RightArrow"] = 39] = "RightArrow";
+    Key[Key["DownArrow"] = 40] = "DownArrow";
+    Key[Key["Insert"] = 45] = "Insert";
+    Key[Key["Delete"] = 46] = "Delete";
+    Key[Key["Zero"] = 48] = "Zero";
+    Key[Key["ClosedParen"] = 48] = "ClosedParen";
+    Key[Key["One"] = 49] = "One";
+    Key[Key["ExclamationMark"] = 49] = "ExclamationMark";
+    Key[Key["Two"] = 50] = "Two";
+    Key[Key["AtSign"] = 50] = "AtSign";
+    Key[Key["Three"] = 51] = "Three";
+    Key[Key["PoundSign"] = 51] = "PoundSign";
+    Key[Key["Hash"] = 51] = "Hash";
+    Key[Key["Four"] = 52] = "Four";
+    Key[Key["DollarSign"] = 52] = "DollarSign";
+    Key[Key["Five"] = 53] = "Five";
+    Key[Key["PercentSign"] = 53] = "PercentSign";
+    Key[Key["Six"] = 54] = "Six";
+    Key[Key["Caret"] = 54] = "Caret";
+    Key[Key["Hat"] = 54] = "Hat";
+    Key[Key["Seven"] = 55] = "Seven";
+    Key[Key["Ampersand"] = 55] = "Ampersand";
+    Key[Key["Eight"] = 56] = "Eight";
+    Key[Key["Star"] = 56] = "Star";
+    Key[Key["Asterik"] = 56] = "Asterik";
+    Key[Key["Nine"] = 57] = "Nine";
+    Key[Key["OpenParen"] = 57] = "OpenParen";
+    Key[Key["A"] = 65] = "A";
+    Key[Key["B"] = 66] = "B";
+    Key[Key["C"] = 67] = "C";
+    Key[Key["D"] = 68] = "D";
+    Key[Key["E"] = 69] = "E";
+    Key[Key["F"] = 70] = "F";
+    Key[Key["G"] = 71] = "G";
+    Key[Key["H"] = 72] = "H";
+    Key[Key["I"] = 73] = "I";
+    Key[Key["J"] = 74] = "J";
+    Key[Key["K"] = 75] = "K";
+    Key[Key["L"] = 76] = "L";
+    Key[Key["M"] = 77] = "M";
+    Key[Key["N"] = 78] = "N";
+    Key[Key["O"] = 79] = "O";
+    Key[Key["P"] = 80] = "P";
+    Key[Key["Q"] = 81] = "Q";
+    Key[Key["R"] = 82] = "R";
+    Key[Key["S"] = 83] = "S";
+    Key[Key["T"] = 84] = "T";
+    Key[Key["U"] = 85] = "U";
+    Key[Key["V"] = 86] = "V";
+    Key[Key["W"] = 87] = "W";
+    Key[Key["X"] = 88] = "X";
+    Key[Key["Y"] = 89] = "Y";
+    Key[Key["Z"] = 90] = "Z";
+    Key[Key["LeftWindowKey"] = 91] = "LeftWindowKey";
+    Key[Key["RightWindowKey"] = 92] = "RightWindowKey";
+    Key[Key["SelectKey"] = 93] = "SelectKey";
+    Key[Key["Numpad0"] = 96] = "Numpad0";
+    Key[Key["Numpad1"] = 97] = "Numpad1";
+    Key[Key["Numpad2"] = 98] = "Numpad2";
+    Key[Key["Numpad3"] = 99] = "Numpad3";
+    Key[Key["Numpad4"] = 100] = "Numpad4";
+    Key[Key["Numpad5"] = 101] = "Numpad5";
+    Key[Key["Numpad6"] = 102] = "Numpad6";
+    Key[Key["Numpad7"] = 103] = "Numpad7";
+    Key[Key["Numpad8"] = 104] = "Numpad8";
+    Key[Key["Numpad9"] = 105] = "Numpad9";
+    Key[Key["Multiply"] = 106] = "Multiply";
+    Key[Key["Add"] = 107] = "Add";
+    Key[Key["Subtract"] = 109] = "Subtract";
+    Key[Key["DecimalPoint"] = 110] = "DecimalPoint";
+    Key[Key["Divide"] = 111] = "Divide";
+    Key[Key["F1"] = 112] = "F1";
+    Key[Key["F2"] = 113] = "F2";
+    Key[Key["F3"] = 114] = "F3";
+    Key[Key["F4"] = 115] = "F4";
+    Key[Key["F5"] = 116] = "F5";
+    Key[Key["F6"] = 117] = "F6";
+    Key[Key["F7"] = 118] = "F7";
+    Key[Key["F8"] = 119] = "F8";
+    Key[Key["F9"] = 120] = "F9";
+    Key[Key["F10"] = 121] = "F10";
+    Key[Key["F11"] = 122] = "F11";
+    Key[Key["F12"] = 123] = "F12";
+    Key[Key["NumLock"] = 144] = "NumLock";
+    Key[Key["ScrollLock"] = 145] = "ScrollLock";
+    Key[Key["SemiColon"] = 186] = "SemiColon";
+    Key[Key["Equals"] = 187] = "Equals";
+    Key[Key["Comma"] = 188] = "Comma";
+    Key[Key["Dash"] = 189] = "Dash";
+    Key[Key["Period"] = 190] = "Period";
+    Key[Key["UnderScore"] = 189] = "UnderScore";
+    Key[Key["PlusSign"] = 187] = "PlusSign";
+    Key[Key["ForwardSlash"] = 191] = "ForwardSlash";
+    Key[Key["Tilde"] = 192] = "Tilde";
+    Key[Key["GraveAccent"] = 192] = "GraveAccent";
+    Key[Key["OpenBracket"] = 219] = "OpenBracket";
+    Key[Key["ClosedBracket"] = 221] = "ClosedBracket";
+    Key[Key["Quote"] = 222] = "Quote";
+})(Key || (Key = {}));
+
+/**
+ * QuickKeysDirective is used to implement shortcut keys on DOM elements, e.g to submit or reset a form on enter/escape
+ * <form quickKeys (quickSubmit)="save()" (quickCancel)="reset()">
+ */
+class QuickKeysDirective {
+    constructor() {
+        /**
+         * Emits when ctrl + enter is clicked in combination
+         * <form (quickSubmit)="save()">
+         */
+        this.quickSubmit = new EventEmitter();
+        /**
+         * Emits when escape is clicked
+         * <form (quickCancel)="cancel()">
+         */
+        this.quickCancel = new EventEmitter();
+    }
+    /**
+     * Listens on the host element for any keyup events
+     * @param e
+     */
+    onKeyUp(e) {
+        if (this.formGroup) {
+            this.handleFormKeys(e);
+        }
+        this.handleGenericKeydown(e);
+    }
+    /**
+     * Handler for generic keydowns, such as cancel events to close drawers
+     * @param e
+     * void
+     */
+    handleGenericKeydown(e) {
+        // Shortcuts that are useful outside of forms
+        if (e.keyCode === Key.Escape) {
+            this.quickCancel.emit();
+        }
+        if (!this.formGroup && e.keyCode === Key.Enter && e.ctrlKey) {
+            this.quickSubmit.emit();
+        }
+    }
+    /**
+     * Handler for form specific shortcuts, such as saving the form
+     * @param e
+     */
+    handleFormKeys(e) {
+        if (this.formGroup.pristine) {
+            return;
+        }
+        if (e.keyCode === Key.Enter && e.ctrlKey) {
+            this.quickSubmit.emit();
+        }
+    }
+}
+QuickKeysDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: QuickKeysDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+QuickKeysDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: QuickKeysDirective, selector: "[stoQuickKeys]", inputs: { quickKeys: "quickKeys", formGroup: "formGroup" }, outputs: { quickSubmit: "quickSubmit", quickCancel: "quickCancel" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: QuickKeysDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stoQuickKeys]'
+                }]
+        }], propDecorators: { quickKeys: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], quickSubmit: [{
+                type: Output
+            }], quickCancel: [{
+                type: Output
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+/**
+ * Directive that can be placed on mat-form-fields that contains a mat-datepicker.
+ * This directive has two tasks:
+ * Clicking anywhere on the mat-form-field will open the datepicker dialog
+ * When the datepicker is closed in any manner, we shift focus back to the datepicker input
+ */
+class DateFormFieldClickDirective {
+    constructor() {
+        this.destroy$ = new Subject();
+    }
+    clickEvent() {
+        this.stoDateFormFieldClick.open();
+    }
+    ngOnInit() {
+        this.stoDateFormFieldClick.closedStream
+            .pipe(takeUntil(this.destroy$)).subscribe(() => this.inputs.first.focus());
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+}
+DateFormFieldClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DateFormFieldClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DateFormFieldClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DateFormFieldClickDirective, selector: "[stoDateFormFieldClick]", inputs: { stoDateFormFieldClick: "stoDateFormFieldClick" }, host: { listeners: { "click": "clickEvent()" } }, queries: [{ propertyName: "inputs", predicate: MatInput }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DateFormFieldClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stoDateFormFieldClick]'
+                }]
+        }], propDecorators: { inputs: [{
+                type: ContentChildren,
+                args: [MatInput]
+            }], stoDateFormFieldClick: [{
+                type: Input
+            }], clickEvent: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+const preferenceKey = 'TOPS_IM:UserPreferences';
+class StoUserPreferenceService {
+    constructor() {
+        this.hasSelectTextOnFocusEnabled = new BehaviorSubject(true);
+        this.default = {
+            hasSelectTextOnFocusEnabled: true
+        };
+        let sessionPreferences = {};
+        const sessionPreferencesString = this.getPreferences();
+        try {
+            sessionPreferences = JSON.parse(sessionPreferencesString);
+        }
+        catch (e) {
+            console.error('Unable to parse the preferences from local storage. Loading default');
+        }
+        this.preferences = Object.assign(Object.assign({}, this.default), sessionPreferences);
+        this.setHasSelectTextOnFocusEnabled(this.preferences.hasSelectTextOnFocusEnabled);
+    }
+    setHasSelectTextOnFocusEnabled(value) {
+        this.hasSelectTextOnFocusEnabled.next(value);
+        this.preferences.hasSelectTextOnFocusEnabled = value;
+        this.setPreferences(this.preferences);
+    }
+    getPreferences() {
+        return sessionStorage.getItem(preferenceKey) || '{}';
+    }
+    setPreferences(value) {
+        sessionStorage.setItem(preferenceKey, JSON.stringify(value));
+    }
+}
+StoUserPreferenceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+StoUserPreferenceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * stoSelectTextOnFocus listens for input focus events, and selects the contents of the input
+ * A user service is established in {@link StoUserPreferenceService} that allows a user to toggle this feature
+ */
+class StoSelectTextOnFocusDirective {
+    constructor(elementRef, userPreferenceService) {
+        this.elementRef = elementRef;
+        this.userPreferenceService = userPreferenceService;
+        this.destroyed$ = new Subject();
+        this._el = this.elementRef.nativeElement;
+    }
+    /**
+     * Listens for focus events on the host (input) element, and focuses if applicable
+     */
+    onFocus() {
+        if (this._hasSelectTextOnFocusEnabled && this._el.readOnly === false) {
+            this._el.select();
+        }
+    }
+    /**
+     * Subscribes to changes in {@link StoUserPreferenceService}, and binds the variable accordingly.
+     */
+    ngOnInit() {
+        if (this.userPreferenceService) {
+            this.userPreferenceService.hasSelectTextOnFocusEnabled
+                .pipe(takeUntil(this.destroyed$)).subscribe((hasSelectTextOnFocusEnabled) => {
+                this._hasSelectTextOnFocusEnabled = hasSelectTextOnFocusEnabled;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+    }
+}
+StoSelectTextOnFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoSelectTextOnFocusDirective, deps: [{ token: i0.ElementRef }, { token: StoUserPreferenceService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+StoSelectTextOnFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: StoSelectTextOnFocusDirective, selector: "[stoSelectTextOnFocus]", host: { listeners: { "focus": "onFocus()", "dblclick": "onFocus()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoSelectTextOnFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stoSelectTextOnFocus]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: StoUserPreferenceService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }, {
+                type: HostListener,
+                args: ['dblclick']
+            }] } });
+
+const getClass = (width, small = 400, large = 800) => {
+    let cols = 1;
+    if (width > small) {
+        cols += 1;
+    }
+    if (width > large) {
+        cols += 2;
+    }
+    return `sto-f-grid--${cols}`;
+};
+const ALL_GRIDS = ['sto-f-grid--1', 'sto-f-grid--2', 'sto-f-grid--4', 'sto-f-grid--6'];
+class StoGridSpacerDirective {
+    constructor() {
+        this.useClass = true;
+    }
+}
+StoGridSpacerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoGridSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+StoGridSpacerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: StoGridSpacerDirective, selector: "[stoGridSpacer]", host: { properties: { "class.sto-f-grid__col": "this.useClass", "class.sto-f-grid__col--spacer": "this.useClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoGridSpacerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[stoGridSpacer]' }]
+        }], propDecorators: { useClass: [{
+                type: HostBinding,
+                args: ['class.sto-f-grid__col']
+            }, {
+                type: HostBinding,
+                args: ['class.sto-f-grid__col--spacer']
+            }] } });
+class StoGridColumnDirective {
+    constructor() {
+        this.useClass = true;
+    }
+}
+StoGridColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+StoGridColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: StoGridColumnDirective, selector: "[stoGridColumn]", inputs: { stoGridColumnDouble: "stoGridColumnDouble" }, host: { properties: { "class.sto-f-grid__col": "this.useClass", "class.sto-f-grid__col--2": "this.stoGridColumnDouble" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoGridColumnDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[stoGridColumn]' }]
+        }], propDecorators: { useClass: [{
+                type: HostBinding,
+                args: ['class.sto-f-grid__col']
+            }], stoGridColumnDouble: [{
+                type: HostBinding,
+                args: ['class.sto-f-grid__col--2']
+            }, {
+                type: Input
+            }] } });
+class StoGridDirective {
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.maxWidth = 1000;
+        this.minWidth = 250;
+        this.baseClass = true;
+    }
+    ngAfterViewInit() {
+        const el = this.elRef.nativeElement;
+        this.observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const cr = entry.contentRect;
+                const { width } = cr;
+                const breakpoints = this.breakpoints || { 2: 400, 4: 800 };
+                const gridType = getClass(width, breakpoints[2], breakpoints[4]);
+                if (!el.classList.contains(gridType)) {
+                    el.classList.remove(...ALL_GRIDS);
+                    el.classList.add(gridType);
+                }
+            }
+        });
+        this.observer.observe(this.elRef.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+}
+StoGridDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoGridDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+StoGridDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: StoGridDirective, selector: "[stoGrid]", inputs: { maxWidth: "maxWidth", minWidth: "minWidth", breakpoints: "breakpoints" }, host: { properties: { "style.max-width.px": "this.maxWidth", "style.min-width.px": "this.minWidth", "class.sto-f-grid": "this.baseClass" } }, queries: [{ propertyName: "columns", predicate: StoGridColumnDirective, read: ElementRef }], exportAs: ["stoGrid"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoGridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stoGrid]',
+                    exportAs: 'stoGrid'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width.px']
+            }, {
+                type: Input
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.min-width.px']
+            }, {
+                type: Input
+            }], baseClass: [{
+                type: HostBinding,
+                args: ['class.sto-f-grid']
+            }], columns: [{
+                type: ContentChildren,
+                args: [StoGridColumnDirective, { read: ElementRef }]
+            }], breakpoints: [{
+                type: Input
+            }] } });
+
+class MenuOverlayDirective {
+    constructor(trigger, el) {
+        this.trigger = trigger;
+        this.left = 0;
+        this.top = 0;
+        this.menu = trigger.menu;
+        this.trigger.menuOpened.pipe(switchMap(() => fromEvent(document, 'click')
+            .pipe(take(1)))).subscribe(() => {
+            this.trigger.closeMenu();
+        });
+        this.setStyle(el.nativeElement);
+    }
+    updatePosition(event) {
+        this.left = event.x;
+        this.top = event.y;
+    }
+    setStyle(element) {
+        element.style.overflow = 'hidden';
+        element.style.position = 'fixed';
+        element.style.height = '1px';
+        element.style.width = '1px';
+    }
+}
+MenuOverlayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: MenuOverlayDirective, deps: [{ token: i1.MatMenuTrigger, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+MenuOverlayDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: MenuOverlayDirective, selector: "[stoMenuOverlay]", host: { properties: { "style.left.px": "this.left", "style.top.px": "this.top" } }, exportAs: ["stoMenuOverlay"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: MenuOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stoMenuOverlay]',
+                    exportAs: 'stoMenuOverlay'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.MatMenuTrigger, decorators: [{
+                        type: Host
+                    }] }, { type: i0.ElementRef }];
+    }, propDecorators: { left: [{
+                type: HostBinding,
+                args: ['style.left.px']
+            }], top: [{
+                type: HostBinding,
+                args: ['style.top.px']
+            }] } });
+
+class ContextMenuDirective {
+    contextMenu(event) {
+        event.preventDefault();
+        if (this.menuTrigger.menuOpen) {
+            this.menuTrigger.closeMenu();
+        }
+        this.overlayDirective.updatePosition(event);
+        setTimeout(() => {
+            this.menuTrigger.menuData = this.menuContext;
+            this.menuTrigger.openMenu();
+        }, 150);
+    }
+}
+ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ContextMenuDirective, selector: "[stoContextMenu]", inputs: { menuTrigger: "menuTrigger", overlayDirective: "overlayDirective", menuContext: "menuContext" }, host: { listeners: { "contextmenu": "contextMenu($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stoContextMenu]'
+                }]
+        }], propDecorators: { menuTrigger: [{
+                type: Input
+            }], overlayDirective: [{
+                type: Input
+            }], menuContext: [{
+                type: Input
+            }], contextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
+class StoDirectivesModule {
+}
+StoDirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StoDirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoDirectivesModule, declarations: [QuickKeysDirective,
+        DateFormFieldClickDirective,
+        StoSelectTextOnFocusDirective,
+        StoGridDirective,
+        StoGridColumnDirective,
+        StoGridSpacerDirective,
+        MenuOverlayDirective,
+        ContextMenuDirective], imports: [CommonModule, LayoutModule], exports: [QuickKeysDirective,
+        DateFormFieldClickDirective,
+        StoSelectTextOnFocusDirective,
+        StoGridDirective,
+        StoGridColumnDirective,
+        StoGridSpacerDirective,
+        MenuOverlayDirective,
+        ContextMenuDirective] });
+StoDirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoDirectivesModule, imports: [[CommonModule, LayoutModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoDirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, LayoutModule],
+                    declarations: [
+                        QuickKeysDirective,
+                        DateFormFieldClickDirective,
+                        StoSelectTextOnFocusDirective,
+                        StoGridDirective,
+                        StoGridColumnDirective,
+                        StoGridSpacerDirective,
+                        MenuOverlayDirective,
+                        ContextMenuDirective
+                    ],
+                    exports: [
+                        QuickKeysDirective,
+                        DateFormFieldClickDirective,
+                        StoSelectTextOnFocusDirective,
+                        StoGridDirective,
+                        StoGridColumnDirective,
+                        StoGridSpacerDirective,
+                        MenuOverlayDirective,
+                        ContextMenuDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Formats numbers to use our standard formatting (d ddd,ddd)
+ *
+ * @example
+ *
+ * {{ 1234,32 | numberFormat }} -> 1 234,320
+ * {{ 1234,32 | numberFormat:'M3' }} -> 1 234,320 M3
+ * {{ -1234,32 | numberFormat:'M3':true }} -> 1 234,320 M3
+ * {{ 1234,32 | numberFormat:'M3':false:false }} -> 1 234 M3
+ * {{ 1234,32 | numberFormat:'M3':false:true:5 }} -> 1 234,32000 M3
+ */
+class NumberFormatPipe {
+    transform(value, unit = '', abs, appendDecimals = true, numberOfDecimals = 3) {
+        if (value !== 0 && !value) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            const newValue = parseFloat(value);
+            if (isNaN(newValue)) {
+                return null;
+            }
+            value = newValue;
+        }
+        if (abs) {
+            value = Math.abs(value);
+        }
+        // We absolute the value to ensure that the rounding rules is always away from zero.
+        // 1.5 => 2 and -1.5 => -2
+        const isNegativeNumber = value < 0;
+        value = Math.abs(value);
+        if (!appendDecimals) {
+            value = Math.round(value);
+        }
+        if (!isNaN(value) && appendDecimals) {
+            value = parseFloat(this.toFixed(value, numberOfDecimals));
+        }
+        // Turn negative numbers back, but only if value is not -0
+        // eslint-disable-next-line no-compare-neg-zero
+        if (isNegativeNumber && value !== -0) {
+            value = value * -1;
+        }
+        const localized = this.prettyPrintValue(value, appendDecimals, numberOfDecimals);
+        return localized.replace(/,/g, ' ').replace('.', ',') + `${unit ? ' ' + unit : ''}`;
+    }
+    prettyPrintValue(value, appendDecimals, numberOfDecimals) {
+        const intlOptions = { minimumFractionDigits: numberOfDecimals, maximumFractionDigits: numberOfDecimals };
+        const intl = new Intl.NumberFormat('en-US', intlOptions).format(value);
+        const split = intl.split('.');
+        let localized = split[0];
+        if (appendDecimals) {
+            const decimals = split.length === 2 ? split[1] : '';
+            split[1] = decimals.padEnd(numberOfDecimals, '0');
+            localized = split.join('.');
+        }
+        return localized;
+    }
+    // Normal toFixed has some issues: https://stackoverflow.com/questions/10015027/javascript-tofixed-not-rounding
+    toFixed(num, precision) {
+        // This method also has some issues - namely, it's unable to parse negative numbers with huge floating points
+        // -8.185452315956354e-12 becomes NaN
+        let returnValue = (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision));
+        if (isNaN(returnValue)) {
+            returnValue = parseFloat(num.toFixed(precision));
+        }
+        return returnValue.toFixed(precision);
+    }
+}
+NumberFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NumberFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NumberFormatPipe, name: "numberFormat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NumberFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'numberFormat'
+                }]
+        }] });
+
+/**
+  * Pipe used to transform numbers to a currency format
+  *
+  * @example
+  *
+  * <span>{{ 5000.5824 | currentFormat:'$':3 }}</span>
+  * Results in
+  * <span>5 000,582 $</span>
+  */
+class CurrencyFormatPipe {
+    transform(value, unit = '', maximumFractionDigits = 3) {
+        if (!value) {
+            return null;
+        }
+        if (typeof value === 'string') {
+            value = parseFloat(value);
+            if (isNaN(value)) {
+                return '';
+            }
+        }
+        const intl = new Intl.NumberFormat('en-US', { maximumFractionDigits }).format(value);
+        return intl.replace(/,/g, ' ').replace('.', ',') + ` ${unit}`;
+    }
+}
+CurrencyFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CurrencyFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CurrencyFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CurrencyFormatPipe, name: "currencyFormat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CurrencyFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'currencyFormat'
+                }]
+        }] });
+
+/**
+ * Transforms an Object to an Array.
+ *
+ * @example
+ *
+ * public obj = {a: 1, b: 2, c: 3};
+ * <span *ngFor="let key of obj | keys "> {{ obj[key] }}, </span> -> 1, 2, 3,
+ */
+class KeysPipe {
+    transform(value) {
+        if (value) {
+            return Object.keys(value);
+        }
+        return [];
+    }
+}
+KeysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+KeysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KeysPipe, name: "keys" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KeysPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keys'
+                }]
+        }] });
+
+/**
+ * Pipe used to transform dates, based on our default formats.
+ *
+ * @example
+ *
+ * public date = "2018-08-27 14:00:30"
+ * <span>{{ date | dateFormat }}</span> -> Aug 27, 2018
+ * <span>{{ date | dateFormat:'long' }}</span> -> Monday Aug 27, 2018
+ */
+class DateFormatPipe {
+    transform(value, format$1) {
+        if (!value) {
+            return null;
+        }
+        if (typeof value === 'string') {
+            value = new Date(value);
+        }
+        switch (format$1) {
+            case 'long':
+                return format(value, 'EEEE MMM d, yyyy');
+            case 'short':
+                return format(value, 'yyyy-MM-dd');
+            case 'datetime':
+                return format(value, 'MMM d, yyyy, HH:mm');
+            case 'datetimezone':
+                return format(value, `MMM d, yyyy, HH:mm:ss ('UTC'xxx)`);
+            case 'datetime-long':
+                return format(value, 'EEEE MMM dd, yyyy, HH:mm');
+            case 'datetime-short':
+                return format(value, 'yyyy-MM-dd, HH:mm');
+            default:
+                return format(value, 'MMM d, yyyy');
+        }
+    }
+}
+DateFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DateFormatPipe, name: "formatDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'formatDate'
+                }]
+        }] });
+
+class GetUnit {
+    transform(value, withParens) {
+        if (value) {
+            const arr = value.split('(');
+            if (arr.length > 0) {
+                if (withParens) {
+                    value = '(' + arr[1];
+                }
+                else {
+                    arr[1].slice(0, -1);
+                    value = arr[1].slice(0, -1);
+                }
+            }
+        }
+        return value;
+    }
+}
+GetUnit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GetUnit, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetUnit.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GetUnit, name: "getUnit" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GetUnit, decorators: [{
+            type: Pipe,
+            args: [{ name: 'getUnit' }]
+        }] });
+class ExcludeUnit {
+    transform(value) {
+        if (value) {
+            const arr = value.split('(');
+            if (arr.length > 0) {
+                value = arr[0];
+            }
+        }
+        return value;
+    }
+}
+ExcludeUnit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ExcludeUnit, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ExcludeUnit.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ExcludeUnit, name: "excludeUnit" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ExcludeUnit, decorators: [{
+            type: Pipe,
+            args: [{ name: 'excludeUnit' }]
+        }] });
+
+class YesNoPipe {
+    transform(value, ignoreNulls = false) {
+        let valueStr = '';
+        if (ignoreNulls) {
+            valueStr = value ? 'Yes' : value === false ? 'No' : '';
+        }
+        else {
+            valueStr = value ? 'Yes' : 'No';
+        }
+        return valueStr;
+    }
+}
+YesNoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: YesNoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+YesNoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: YesNoPipe, name: "yesNo" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: YesNoPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'yesNo' }]
+        }] });
+
+class StoPipesModule {
+}
+StoPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StoPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoPipesModule, declarations: [DateFormatPipe,
+        KeysPipe,
+        NumberFormatPipe,
+        CurrencyFormatPipe,
+        GetUnit,
+        ExcludeUnit,
+        YesNoPipe], imports: [CommonModule], exports: [DateFormatPipe,
+        KeysPipe,
+        NumberFormatPipe,
+        CurrencyFormatPipe,
+        GetUnit,
+        ExcludeUnit,
+        YesNoPipe] });
+StoPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoPipesModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        DateFormatPipe,
+                        KeysPipe,
+                        NumberFormatPipe,
+                        CurrencyFormatPipe,
+                        GetUnit,
+                        ExcludeUnit,
+                        YesNoPipe
+                    ],
+                    exports: [
+                        DateFormatPipe,
+                        KeysPipe,
+                        NumberFormatPipe,
+                        CurrencyFormatPipe,
+                        GetUnit,
+                        ExcludeUnit,
+                        YesNoPipe
+                    ]
+                }]
+        }] });
+
+class StoUserPreferenceComponent {
+    constructor(fb, service) {
+        this.fb = fb;
+        this.service = service;
+        this.destroyed$ = new Subject();
+    }
+    initForm(value) {
+        var _a;
+        this.form = this.fb.group({
+            hasSelectTextOnFocusEnabled: [value]
+        });
+        (_a = this.form.get('hasSelectTextOnFocusEnabled')) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe((hasSelectTextOnFocusEnabled) => {
+            this.service.setHasSelectTextOnFocusEnabled(hasSelectTextOnFocusEnabled);
+        });
+    }
+    ngOnInit() {
+        this.service.hasSelectTextOnFocusEnabled.asObservable()
+            .pipe(take(1))
+            .subscribe((value) => {
+            this.initForm(value);
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+    }
+}
+StoUserPreferenceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceComponent, deps: [{ token: i1$1.FormBuilder }, { token: StoUserPreferenceService }], target: i0.ɵɵFactoryTarget.Component });
+StoUserPreferenceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: StoUserPreferenceComponent, selector: "sto-user-preference", ngImport: i0, template: "<mat-expansion-panel [expanded]=\"false\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>Settings<span style=\"opacity: 0.36\">&nbsp;(beta)</span></mat-panel-title>\n  </mat-expansion-panel-header>\n  <div *ngIf=\"form\" class=\"sto-grid sto-grid--4\">\n\n    <ng-content></ng-content>\n\n  </div>\n</mat-expansion-panel>\n", styles: [""], components: [{ type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sto-user-preference', template: "<mat-expansion-panel [expanded]=\"false\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>Settings<span style=\"opacity: 0.36\">&nbsp;(beta)</span></mat-panel-title>\n  </mat-expansion-panel-header>\n  <div *ngIf=\"form\" class=\"sto-grid sto-grid--4\">\n\n    <ng-content></ng-content>\n\n  </div>\n</mat-expansion-panel>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: StoUserPreferenceService }]; } });
+
+class StoUserPreferenceModule {
+    static forRoot() {
+        return {
+            ngModule: StoUserPreferenceModule,
+            providers: [StoUserPreferenceService]
+        };
+    }
+}
+StoUserPreferenceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StoUserPreferenceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceModule, declarations: [StoUserPreferenceComponent], imports: [CommonModule, MatExpansionModule, ReactiveFormsModule, FormsModule], exports: [StoUserPreferenceComponent] });
+StoUserPreferenceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceModule, imports: [[CommonModule, MatExpansionModule, ReactiveFormsModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoUserPreferenceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MatExpansionModule, ReactiveFormsModule, FormsModule],
+                    exports: [StoUserPreferenceComponent],
+                    declarations: [StoUserPreferenceComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of @ngx-stoui/core
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContextMenuDirective, CurrencyFormatPipe, DateFormFieldClickDirective, DateFormatPipe, ExcludeUnit, GetUnit, Key, KeysPipe, MenuOverlayDirective, NumberFormatPipe, QuickKeysDirective, StoDirectivesModule, StoGridColumnDirective, StoGridDirective, StoGridSpacerDirective, StoPipesModule, StoSelectTextOnFocusDirective, StoUserPreferenceComponent, StoUserPreferenceModule, StoUserPreferenceService, YesNoPipe };
+//# sourceMappingURL=ngx-stoui-core.mjs.map