@theseam/ui-common 0.3.15-beta.0 → 0.3.15-beta.1

package/fesm2015/theseam-ui-common-shared.mjs

@@ -0,0 +1,739 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { Component, Input, Directive, Optional, EventEmitter, Output, HostListener, Self, HostBinding, Pipe, NgModule } from '@angular/core';
+import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
+import * as i1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i1$1 from '@theseam/ui-common/modal';
+import { getClosestModal, TheSeamModalModule } from '@theseam/ui-common/modal';
+import * as i1$2 from '@angular/forms';
+import { ResizeSensor } from 'css-element-queries';
+import { Subject, fromEvent } from 'rxjs';
+import { takeUntil, filter, tap } from 'rxjs/operators';
+import * as i1$3 from '@ng-select/ng-select';
+import * as i1$4 from 'ngx-quill';
+import { padStart, padEnd } from '@theseam/ui-common/utils';
+import { CommonModule } from '@angular/common';
+import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
+import { TheSeamScrollbarModule } from '@theseam/ui-common/scrollbar';
+
+class PasswordInputRevealComponent {
+    constructor() {
+        this.faEye = faEye;
+        this.faEyeSlash = faEyeSlash;
+        this._passwordVisible = false;
+    }
+    get inputRef() { return this._passwordInput; }
+    set inputRef(value) {
+        this._passwordInput = value;
+        this.updateRevealState();
+        if (this._passwordInput) {
+            this._passwordInput.style.paddingRight = '40px';
+            this._passwordInput.classList.add('no-native-eye');
+        }
+    }
+    get passwordVisible() { return this._passwordVisible; }
+    set passwordVisible(value) {
+        this._passwordVisible = coerceBooleanProperty(value);
+        this.updateRevealState();
+    }
+    updateRevealState() {
+        if (this._passwordInput) {
+            this._passwordInput.type = this.passwordVisible ? 'text' : 'password';
+        }
+    }
+    revealPassword() {
+        this.passwordVisible = !this.passwordVisible;
+    }
+}
+PasswordInputRevealComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PasswordInputRevealComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PasswordInputRevealComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PasswordInputRevealComponent, selector: "seam-password-input-reveal", inputs: { inputRef: "inputRef", passwordVisible: "passwordVisible" }, ngImport: i0, template: `
+    <fa-icon [icon]="passwordVisible ? faEyeSlash : faEye" class="password-reveal-icon" (click)="revealPassword()"></fa-icon>
+  `, isInline: true, styles: [":host{display:flex;align-items:center;position:absolute;top:0;right:0;bottom:0;width:30px;transform:translateZ(0);z-index:50}:host fa-icon{opacity:1;color:#bababa;margin-top:3px;cursor:pointer}:host fa-icon ::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PasswordInputRevealComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-password-input-reveal', template: `
+    <fa-icon [icon]="passwordVisible ? faEyeSlash : faEye" class="password-reveal-icon" (click)="revealPassword()"></fa-icon>
+  `, styles: [":host{display:flex;align-items:center;position:absolute;top:0;right:0;bottom:0;width:30px;transform:translateZ(0);z-index:50}:host fa-icon{opacity:1;color:#bababa;margin-top:3px;cursor:pointer}:host fa-icon ::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+        }], propDecorators: { inputRef: [{
+                type: Input
+            }], passwordVisible: [{
+                type: Input
+            }] } });
+
+class AutoFocusDirective {
+    constructor(_elementRef, _modal, _modalRef) {
+        this._elementRef = _elementRef;
+        this._modal = _modal;
+        this._modalRef = _modalRef;
+        this._focus = true;
+        this.modalRef = _modalRef;
+    }
+    ngOnInit() {
+        if (!this.modalRef) {
+            // When this directive is included in a dialog via TemplateRef (rather than being
+            // in a Component), the DialogRef isn't available via injection because embedded
+            // views cannot be given a custom injector. Instead, we look up the DialogRef by
+            // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
+            // be resolved at constructor time.
+            this.modalRef = getClosestModal(this._elementRef, this._modal.openDialogs);
+        }
+        if (!this.modalRef) {
+            if (this._focus) {
+                setTimeout(() => { this.focus(); });
+            }
+        }
+        else {
+            this.modalRef.afterOpened().subscribe(() => {
+                setTimeout(() => { this.focus(); });
+            });
+        }
+    }
+    set seamAutoFocus(condition) {
+        this._focus = coerceBooleanProperty(condition) !== false;
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+}
+AutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Modal }, { token: i1$1.ModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+AutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: AutoFocusDirective, selector: "[seamAutoFocus]", inputs: { seamAutoFocus: "seamAutoFocus" }, exportAs: ["seamAutoFocus"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamAutoFocus]',
+                    exportAs: 'seamAutoFocus'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1$1.Modal }, { type: i1$1.ModalRef, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { seamAutoFocus: [{
+                type: Input
+            }] } });
+
+class ClickOutsideDirective {
+    get seamClickOutsideActive() {
+        return this._active;
+    }
+    set seamClickOutsideActive(value) {
+        if (this._active === value) {
+            return;
+        }
+        if (value) {
+            // `setTimeout` is used to avoid the click event triggering when the value
+            // changes if the value was changed with a click.
+            setTimeout(() => { this._active = value; });
+        }
+        else {
+            this._active = value;
+        }
+    }
+    // NOTE: This should probably be changed from a `HostListener` to allow the
+    // subscription to be unsubscribed.
+    onDocumentClick(event) {
+        if (this._active) {
+            const targetElement = event.target;
+            // Check if the click was outside the element
+            if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
+                this.seamClickOutside.emit(event);
+            }
+        }
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._active = true;
+        this.seamClickOutside = new EventEmitter();
+    }
+}
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClickOutsideDirective, selector: "[seamClickOutside]", inputs: { seamClickOutsideActive: "seamClickOutsideActive" }, outputs: { seamClickOutside: "seamClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamClickOutside]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { seamClickOutsideActive: [{
+                type: Input
+            }], seamClickOutside: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// Source: https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110
+class DisableControlDirective {
+    set seamDisableControl(condition) {
+        const action = condition ? 'disable' : 'enable';
+        const control = this.ngControl.control;
+        if (control) {
+            control[action]();
+        }
+    }
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+    }
+}
+DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DisableControlDirective, deps: [{ token: i1$2.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+DisableControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DisableControlDirective, selector: "[seamDisableControl]", inputs: { seamDisableControl: "seamDisableControl" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DisableControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDisableControl]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.NgControl }]; }, propDecorators: { seamDisableControl: [{
+                type: Input
+            }] } });
+
+class ElemResizedDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.seamElemResized = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        this.sensor = new ResizeSensor(this.elementRef.nativeElement, event => {
+            this.seamElemResized.emit({ element: this.elementRef.nativeElement, size: event });
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.sensor) === null || _a === void 0 ? void 0 : _a.detach();
+    }
+}
+ElemResizedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElemResizedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElemResizedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ElemResizedDirective, selector: "[seamElemResized]", outputs: { seamElemResized: "seamElemResized" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElemResizedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamElemResized]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { seamElemResized: [{
+                type: Output
+            }] } });
+
+/**
+ * Don't use this directive unless there is a reason not to use css `:hover`,
+ * because the accuracy of detecting the hover is not as good. If an element is
+ * moved while the mouse is idle the hover class will remain until the mouse
+ * enters and leaves again.
+ *
+ * I have tried multiple ways of detecting the mouse no longer hovering, but all
+ * have introduced a slight performance issue that just builds for each element
+ * containing this directive.
+ */
+class HoverClassToggleDirective {
+    onMouseOver($event) {
+        this._setHovered(true);
+    }
+    onMouseOut($event) {
+        this._setHovered(false);
+    }
+    onPointerOver($event) {
+        this._setHovered(true);
+    }
+    onPointerOut($event) {
+        this._setHovered(false);
+    }
+    set seamHoverClassToggle(value) {
+        if (value) {
+            if (value.default) {
+                this._defaultClasses = value.default.split(' ').filter(c => c.length > 0);
+            }
+            if (value.hover) {
+                this._hoverClasses = value.hover.split(' ').filter(c => c.length > 0);
+            }
+        }
+        this._hoverClasses = this._hoverClasses.filter(v => !this._defaultClasses.find(_v => _v === v));
+        this._update();
+    }
+    constructor(_element) {
+        this._element = _element;
+        this._hovered = false;
+        this._defaultClasses = [];
+        this._hoverClasses = [];
+    }
+    _update() {
+        for (const c of this._defaultClasses) {
+            this._hovered ? this._removeClass(c) : this._addClass(c);
+        }
+        for (const c of this._hoverClasses) {
+            this._hovered ? this._addClass(c) : this._removeClass(c);
+        }
+    }
+    _setHovered(hovered) {
+        const doUpdate = this._hovered !== hovered;
+        this._hovered = hovered;
+        if (doUpdate) {
+            this._update();
+        }
+    }
+    _addClass(c) {
+        this._element.nativeElement.classList.add(c);
+    }
+    _removeClass(c) {
+        this._element.nativeElement.classList.remove(c);
+    }
+}
+HoverClassToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HoverClassToggleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+HoverClassToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: HoverClassToggleDirective, selector: "[seamHoverClassToggle]", inputs: { seamHoverClassToggle: "seamHoverClassToggle" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "pointerover": "onPointerOver($event)", "pointerout": "onPointerOut($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HoverClassToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamHoverClassToggle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover', ['$event']]
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout', ['$event']]
+            }], onPointerOver: [{
+                type: HostListener,
+                args: ['pointerover', ['$event']]
+            }], onPointerOut: [{
+                type: HostListener,
+                args: ['pointerout', ['$event']]
+            }], seamHoverClassToggle: [{
+                type: Input
+            }] } });
+
+/**
+ * Don't use this directive unless there is a reason not to use css `:hover`,
+ * because the accuracy of detecting the hover is not as good. If an element is
+ * moved while the mouse is idle the hover class will remain until the mouse
+ * enters and leaves again.
+ *
+ * I have tried multiple ways of detecting the mouse no longer hovering, but all
+ * have introduced a slight performance issue that just builds for each element
+ * containing this directive.
+ */
+class HoverClassDirective {
+    onMouseOver($event) {
+        this._setHovered(true);
+    }
+    onMouseOut($event) {
+        this._setHovered(false);
+    }
+    onPointerOver($event) {
+        this._setHovered(true);
+    }
+    onPointerOut($event) {
+        this._setHovered(false);
+    }
+    set seamHoverClass(classList) {
+        const newClasses = classList.split(' ').filter(c => c.length > 0);
+        for (const c of this._classes) {
+            if (newClasses.indexOf(c) !== 0) {
+                this._removeClass(c);
+            }
+        }
+        this._classes = newClasses;
+        this._update();
+    }
+    constructor(_element) {
+        this._element = _element;
+        this._hovered = false;
+        this._classes = [];
+    }
+    _update() {
+        for (const c of this._classes) {
+            this._hovered ? this._addClass(c) : this._removeClass(c);
+        }
+    }
+    _setHovered(hovered) {
+        const doUpdate = this._hovered !== hovered;
+        this._hovered = hovered;
+        if (doUpdate) {
+            this._update();
+        }
+    }
+    _addClass(c) {
+        this._element.nativeElement.classList.add(c);
+    }
+    _removeClass(c) {
+        this._element.nativeElement.classList.remove(c);
+    }
+}
+HoverClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HoverClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+HoverClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: HoverClassDirective, selector: "[seamHoverClass]", inputs: { seamHoverClass: "seamHoverClass" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "pointerover": "onPointerOver($event)", "pointerout": "onPointerOut($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HoverClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamHoverClass]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover', ['$event']]
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout', ['$event']]
+            }], onPointerOver: [{
+                type: HostListener,
+                args: ['pointerover', ['$event']]
+            }], onPointerOut: [{
+                type: HostListener,
+                args: ['pointerout', ['$event']]
+            }], seamHoverClass: [{
+                type: Input
+            }] } });
+
+class NgSelectExtraDirective {
+    /**
+     * Set the tab index to `-1` to allow the root element of the ng-select
+     * component to receive `focus` event from javascript, but not get focused by
+     * keyboard navigation.
+     */
+    get _tabIndex() { return this.ngSelect.disabled ? undefined : -1; }
+    /**
+     * Listening for focus event on root of component to allow javascript
+     * `focus()` function to trigger the components focus.
+     */
+    onFocus($event) {
+        const target = $event.target;
+        if (target === this.elementRef.nativeElement && !this.ngSelect.disabled) {
+            this.ngSelect.focus();
+        }
+        // ng-select has an input `labelForId` that sets the autocomplete attribute
+        // in ngOnInit. I am not positive that it is wrong by doing that, but this
+        // hack makes it set the attributes again on focus, because that gives the
+        // result I was expecting, since we don't manually set the `labelForId`
+        // input.
+        const _ngSelect = this.ngSelect;
+        _ngSelect._setInputAttributes();
+    }
+    get _isInvalid() {
+        return this.ngControl ? this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched) : false;
+    }
+    get _isEmptyStringValue() {
+        return this.ngControl ? this.ngControl.value === '' : false;
+    }
+    constructor(elementRef, _ngZone, ngSelect, ngControl) {
+        this.elementRef = elementRef;
+        this._ngZone = _ngZone;
+        this.ngSelect = ngSelect;
+        this.ngControl = ngControl;
+        this._ngUnsubscribe = new Subject();
+        this._markedItem = null;
+        this._checkMarked = false;
+        this._keyPressWorkaroundSub = null;
+        this._resizedEvent = new EventEmitter();
+        this._onScroll = (event) => {
+            if (this.ngSelect && this.ngSelect.isOpen) {
+                const isScrollingInScrollHost = event.target.className.indexOf('ng-dropdown-panel-items') !== -1;
+                const isInSensor = event.target.className.indexOf('resize-sensor-shrink') !== -1 ||
+                    event.target.className.indexOf('os-resize-observer-host') !== -1;
+                if (isScrollingInScrollHost || isInSensor) {
+                    return;
+                }
+                this.ngSelect.close();
+            }
+        };
+    }
+    ngOnInit() {
+        this.ngSelect.focusEvent
+            .subscribe(v => this._enableKeyPressWorkaround());
+        this.ngSelect.blurEvent
+            .subscribe(v => this._disableKeyPressWorkaround());
+        window.addEventListener('scroll', this._onScroll, true);
+        // When the input is allowed to change its height the position doesn't update itself.
+        // this._resizedEvent.pipe(
+        //   auditTime(30)
+        // ).subscribe(event => {
+        //   if (this.elementRef && this.elementRef.nativeElement) {
+        //     if (this.elementRef.nativeElement.classList.contains('ng-select-value-grow-h')) {
+        //       if (this.ngSelect.isOpen && this.ngSelect.dropdownPanel) {
+        //         this.ngSelect.dropdownPanel.updateDropdownPosition()
+        //       }
+        //     } else {
+        //       this.elementRef.nativeElement.classList.remove('ng-select-value-grow-h')
+        //     }
+        //   }
+        // })
+        // this._patch_ngSelect_open()
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._resizeSensor) === null || _a === void 0 ? void 0 : _a.detach();
+        window.removeEventListener('scroll', this._onScroll, true);
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    ngAfterViewChecked() {
+        if (this.ngSelect.dropdownPanel) {
+            if (this._checkMarked) {
+                if (this.ngSelect.dropdownPanel && this._markedItem !== null) {
+                    if (this._markedItem.index !== this.ngSelect.dropdownPanel.markedItem.index) {
+                        this.ngSelect.dropdownPanel.scrollTo(this.ngSelect.dropdownPanel.markedItem);
+                    }
+                }
+            }
+        }
+        this._checkMarked = false;
+        this._resizeSensor = new ResizeSensor(this.elementRef.nativeElement, event => {
+            this._resizedEvent.emit({ element: this.elementRef.nativeElement, size: event });
+        });
+    }
+    /**
+     * Temp fix for: https://github.com/ng-select/ng-select/issues/1122
+     */
+    // private _patch_ngSelect_open() {
+    //   const original = this.ngSelect.open
+    //   const _self = this
+    //   this.ngSelect.open = function() {
+    //     original.apply(this, arguments)
+    //     _self._patch_ngSelectDropdownPanel_updateDropdownPosition()
+    //   }
+    // }
+    /** Should ONLY be called by `_patch_ngSelect_open`. */
+    // private _patch_ngSelectDropdownPanel_updateDropdownPosition() {
+    //   if (!this.ngSelect.dropdownPanel) { return }
+    //   const drop: any = this.ngSelect.dropdownPanel
+    //   // Only needed once, to update the position before the timeout in
+    //   // `updateDropdownPosition()`. So, using this variable to check if I already called
+    //   // `_updateAppendedDropdownPosition()`.
+    //   if (!drop.__libPatched) {
+    //     drop.__libPatched = 'patched'
+    //     const original = drop.updateDropdownPosition
+    //     const _self = this
+    //     drop.updateDropdownPosition = function() {
+    //       original.apply(this, arguments)
+    //       if (!!_self.ngSelect.appendTo) {
+    //         drop._updateAppendedDropdownPosition()
+    //       }
+    //     }
+    //   }
+    // }
+    _enableKeyPressWorkaround() {
+        if (this._keyPressWorkaroundSub) {
+            return;
+        }
+        const _ngSelect = this.ngSelect;
+        this._keyPressWorkaroundSub = _ngSelect._keyPress$
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(filter(() => !this.ngSelect.searchable))
+            .subscribe(() => {
+            this._ngZone.runOutsideAngular(() => {
+                window.requestAnimationFrame(() => {
+                    if (this.ngSelect.dropdownPanel) {
+                        this._markedItem = this.ngSelect.dropdownPanel.markedItem;
+                    }
+                    this._checkMarked = true;
+                });
+            });
+        });
+    }
+    _disableKeyPressWorkaround() {
+        if (this._keyPressWorkaroundSub) {
+            this._keyPressWorkaroundSub.unsubscribe();
+            this._keyPressWorkaroundSub = null;
+        }
+    }
+}
+NgSelectExtraDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgSelectExtraDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$3.NgSelectComponent }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+NgSelectExtraDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NgSelectExtraDirective, selector: "ng-select", host: { listeners: { "focus": "onFocus($event)" }, properties: { "attr.tabIndex": "this._tabIndex", "class.is-invalid": "this._isInvalid", "class.ng-empty-string-value": "this._isEmptyStringValue" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgSelectExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$3.NgSelectComponent }, { type: i1$2.NgControl, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Self
+                    }] }];
+    }, propDecorators: { _tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabIndex']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], _isInvalid: [{
+                type: HostBinding,
+                args: ['class.is-invalid']
+            }], _isEmptyStringValue: [{
+                type: HostBinding,
+                args: ['class.ng-empty-string-value']
+            }] } });
+
+class NgxQuillExtraDirective {
+    /**
+     * Set the tab index to `-1` to allow the root element of the
+     * component to receive `focus` event from javascript, but not get focused by
+     * keyboard navigation.
+     */
+    set tabIndex(value) { this._tabIndex = coerceNumberProperty(value); }
+    get tabIndex() { return this._tabIndex; }
+    get _attrTabIndex() { return this._quillEditor.disabled ? -1 : (this.tabIndex || 0); }
+    constructor(_elementRef, _quillEditor) {
+        this._elementRef = _elementRef;
+        this._quillEditor = _quillEditor;
+        this._ngUnsubscribe = new Subject();
+        this._tabIndex = -1;
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    ngAfterViewInit() {
+        const parent = this._getParentElementForLabelFocusIssue();
+        if (parent) {
+            // NOTE: This is a hack to avoid an issue letting a label with "for"
+            // attribute focus the control.
+            fromEvent(parent, 'click').pipe(takeUntil(this._ngUnsubscribe), filter(e => { var _a; return ((_a = e.target) === null || _a === void 0 ? void 0 : _a.getAttribute('for')) === this._elementRef.nativeElement.id; }), tap(() => this._quillEditor.quillEditor.focus())).subscribe();
+        }
+    }
+    _getParentElementForLabelFocusIssue() {
+        const findElem = (elem) => {
+            if (elem.nodeName.toLowerCase() === 'seam-form-field') {
+                return elem;
+            }
+            if (elem.parentElement) {
+                return findElem(elem.parentElement);
+            }
+            return elem;
+        };
+        return findElem(this._elementRef.nativeElement);
+    }
+}
+NgxQuillExtraDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxQuillExtraDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.QuillEditorComponent }], target: i0.ɵɵFactoryTarget.Directive });
+NgxQuillExtraDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NgxQuillExtraDirective, selector: "quill-editor", inputs: { tabIndex: "tabIndex" }, host: { properties: { "attr.tabindex": "this._attrTabIndex" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxQuillExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'quill-editor'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.QuillEditorComponent }]; }, propDecorators: { tabIndex: [{
+                type: Input
+            }], _attrTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+
+class MaskCharsPipe {
+    transform(value, replacementChar = '*', ignoreCount = 0, ignoreFrom = 'right') {
+        if (ignoreFrom === 'right') {
+            const s = value || '';
+            return padStart(s.substring(s.length - ignoreCount, s.length), s.length, replacementChar);
+        }
+        else if (ignoreFrom === 'left') {
+            const s = value || '';
+            return padEnd(s.substring(0, ignoreCount), s.length, replacementChar);
+        }
+        return value;
+    }
+}
+MaskCharsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaskCharsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MaskCharsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MaskCharsPipe, name: "maskChars" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaskCharsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'maskChars'
+                }]
+        }] });
+
+class TruncatePipe {
+    transform(value, length = 30, appendEllipsis = true) {
+        let val = value;
+        if (value && typeof value === 'string' && value.length > length) {
+            val = value.substr(0, length);
+            if (appendEllipsis) {
+                val += '...';
+            }
+        }
+        return val;
+    }
+}
+TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TruncatePipe, name: "truncate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate'
+                }]
+        }] });
+
+class TheSeamSharedModule {
+}
+TheSeamSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheSeamSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TheSeamSharedModule, declarations: [AutoFocusDirective,
+        ElemResizedDirective,
+        PasswordInputRevealComponent,
+        NgSelectExtraDirective,
+        HoverClassDirective,
+        HoverClassToggleDirective,
+        ClickOutsideDirective,
+        DisableControlDirective,
+        MaskCharsPipe,
+        TruncatePipe,
+        NgxQuillExtraDirective], imports: [CommonModule,
+        FontAwesomeModule,
+        TheSeamModalModule,
+        TheSeamLoadingModule], exports: [AutoFocusDirective,
+        ElemResizedDirective,
+        PasswordInputRevealComponent,
+        NgSelectExtraDirective,
+        HoverClassDirective,
+        HoverClassToggleDirective,
+        ClickOutsideDirective,
+        DisableControlDirective,
+        MaskCharsPipe,
+        TruncatePipe,
+        NgxQuillExtraDirective,
+        // Exporting scrollbars here for backwards compatibility for now.
+        TheSeamScrollbarModule] });
+TheSeamSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheSeamSharedModule, imports: [CommonModule,
+        FontAwesomeModule,
+        TheSeamModalModule,
+        TheSeamLoadingModule,
+        // Exporting scrollbars here for backwards compatibility for now.
+        TheSeamScrollbarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheSeamSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        TheSeamModalModule,
+                        TheSeamLoadingModule
+                    ],
+                    declarations: [
+                        AutoFocusDirective,
+                        ElemResizedDirective,
+                        PasswordInputRevealComponent,
+                        NgSelectExtraDirective,
+                        HoverClassDirective,
+                        HoverClassToggleDirective,
+                        ClickOutsideDirective,
+                        DisableControlDirective,
+                        MaskCharsPipe,
+                        TruncatePipe,
+                        NgxQuillExtraDirective
+                    ],
+                    exports: [
+                        AutoFocusDirective,
+                        ElemResizedDirective,
+                        PasswordInputRevealComponent,
+                        NgSelectExtraDirective,
+                        HoverClassDirective,
+                        HoverClassToggleDirective,
+                        ClickOutsideDirective,
+                        DisableControlDirective,
+                        MaskCharsPipe,
+                        TruncatePipe,
+                        NgxQuillExtraDirective,
+                        // Exporting scrollbars here for backwards compatibility for now.
+                        TheSeamScrollbarModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutoFocusDirective, ClickOutsideDirective, DisableControlDirective, ElemResizedDirective, HoverClassDirective, HoverClassToggleDirective, MaskCharsPipe, NgSelectExtraDirective, NgxQuillExtraDirective, PasswordInputRevealComponent, TheSeamSharedModule, TruncatePipe };
+//# sourceMappingURL=theseam-ui-common-shared.mjs.map