@theseam/ui-common 1.0.0-beta.0 → 1.0.0-beta.10

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

@@ -1,15 +1,15 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Input, Component, inject, ElementRef, Directive, EventEmitter, HostListener, Output, NgZone, HostBinding, Pipe, NgModule } from '@angular/core';
+import { Input, Component, inject, ElementRef, Directive, EventEmitter, HostListener, Output, HostBinding, Pipe, NgModule } from '@angular/core';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { Modal, ModalRef, getClosestModal } from '@theseam/ui-common/modal';
 import { NgControl } from '@angular/forms';
 import { ResizeSensor } from 'css-element-queries';
+import { NgSelectComponent } from '@ng-select/ng-select';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
-import { NgSelectComponent } from '@ng-select/ng-select';
 import { QuillEditorComponent } from 'ngx-quill';
 import { padStart, padEnd } from '@theseam/ui-common/utils';
 
@@ -17,7 +17,9 @@ class TheSeamPasswordInputRevealComponent {
     static ngAcceptInputType_passwordVisible;
     faEye = faEye;
     faEyeSlash = faEyeSlash;
-    get inputRef() { return this._passwordInput; }
+    get inputRef() {
+        return this._passwordInput;
+    }
     set inputRef(value) {
         this._passwordInput = value;
         this.updateRevealState();
@@ -27,7 +29,9 @@ class TheSeamPasswordInputRevealComponent {
         }
     }
     _passwordInput;
-    get passwordVisible() { return this._passwordVisible; }
+    get passwordVisible() {
+        return this._passwordVisible;
+    }
     set passwordVisible(value) {
         this._passwordVisible = coerceBooleanProperty(value);
         this.updateRevealState();
@@ -41,18 +45,24 @@ class TheSeamPasswordInputRevealComponent {
     revealPassword() {
         this.passwordVisible = !this.passwordVisible;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamPasswordInputRevealComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamPasswordInputRevealComponent, isStandalone: true, 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>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPasswordInputRevealComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamPasswordInputRevealComponent, isStandalone: true, 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;cursor:pointer}:host fa-icon ::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamPasswordInputRevealComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPasswordInputRevealComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-password-input-reveal', template: `
-    <fa-icon [icon]="passwordVisible ? faEyeSlash : faEye" class="password-reveal-icon" (click)="revealPassword()"></fa-icon>
-  `, imports: [
-                        FontAwesomeModule,
-                    ], 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;cursor:pointer}:host fa-icon ::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+    <fa-icon
+      [icon]="passwordVisible ? faEyeSlash : faEye"
+      class="password-reveal-icon"
+      (click)="revealPassword()"
+    ></fa-icon>
+  `, imports: [FontAwesomeModule], 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;cursor:pointer}:host fa-icon ::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: Input
             }], passwordVisible: [{
@@ -93,22 +103,26 @@ class TheSeamAutoFocusDirective {
         }
         if (!this.modalRef) {
             if (this._focus) {
-                setTimeout(() => { this.focus(); });
+                setTimeout(() => {
+                    this.focus();
+                });
             }
         }
         else {
             this.modalRef.afterOpened().subscribe(() => {
-                setTimeout(() => { this.focus(); });
+                setTimeout(() => {
+                    this.focus();
+                });
             });
         }
     }
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamAutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamAutoFocusDirective, isStandalone: true, selector: "[seamAutoFocus]", inputs: { seamAutoFocus: "seamAutoFocus" }, exportAs: ["seamAutoFocus"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamAutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamAutoFocusDirective, isStandalone: true, selector: "[seamAutoFocus]", inputs: { seamAutoFocus: "seamAutoFocus" }, exportAs: ["seamAutoFocus"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamAutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamAutoFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamAutoFocus]',
@@ -130,7 +144,9 @@ class TheSeamClickOutsideDirective {
         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; });
+            setTimeout(() => {
+                this._active = value;
+            });
         }
         else {
             this._active = value;
@@ -144,15 +160,16 @@ class TheSeamClickOutsideDirective {
         if (this._active) {
             const targetElement = event.target;
             // Check if the click was outside the element
-            if (targetElement && !this._elementRef.nativeElement.contains(targetElement)) {
+            if (targetElement &&
+                !this._elementRef.nativeElement.contains(targetElement)) {
                 this.seamClickOutside.emit(event);
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamClickOutsideDirective, isStandalone: true, selector: "[seamClickOutside]", inputs: { seamClickOutsideActive: "seamClickOutsideActive" }, outputs: { seamClickOutside: "seamClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, exportAs: ["seamClickOutside"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamClickOutsideDirective, isStandalone: true, selector: "[seamClickOutside]", inputs: { seamClickOutsideActive: "seamClickOutsideActive" }, outputs: { seamClickOutside: "seamClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, exportAs: ["seamClickOutside"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamClickOutside]',
@@ -177,10 +194,10 @@ class TheSeamDisableControlDirective {
             control[action]();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDisableControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamDisableControlDirective, isStandalone: true, selector: "[seamDisableControl]", inputs: { seamDisableControl: "seamDisableControl" }, exportAs: ["seamDisableControl"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDisableControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamDisableControlDirective, isStandalone: true, selector: "[seamDisableControl]", inputs: { seamDisableControl: "seamDisableControl" }, exportAs: ["seamDisableControl"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDisableControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamDisableControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamDisableControl]',
@@ -195,17 +212,20 @@ class TheSeamElemResizedDirective {
     seamElemResized = new EventEmitter();
     sensor;
     ngAfterViewInit() {
-        this.sensor = new ResizeSensor(this._elementRef.nativeElement, event => {
-            this.seamElemResized.emit({ element: this._elementRef.nativeElement, size: event });
+        this.sensor = new ResizeSensor(this._elementRef.nativeElement, (event) => {
+            this.seamElemResized.emit({
+                element: this._elementRef.nativeElement,
+                size: event,
+            });
         });
     }
     ngOnDestroy() {
         this.sensor?.detach();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamElemResizedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamElemResizedDirective, isStandalone: true, selector: "[seamElemResized]", outputs: { seamElemResized: "seamElemResized" }, exportAs: ["seamElemResized"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamElemResizedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamElemResizedDirective, isStandalone: true, selector: "[seamElemResized]", outputs: { seamElemResized: "seamElemResized" }, exportAs: ["seamElemResized"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamElemResizedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamElemResizedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamElemResized]',
@@ -245,21 +265,33 @@ class TheSeamHoverClassToggleDirective {
     set seamHoverClassToggle(value) {
         if (value) {
             if (value.default) {
-                this._defaultClasses = value.default.split(' ').filter(c => c.length > 0);
+                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 = value.hover.split(' ').filter((c) => c.length > 0);
             }
         }
-        this._hoverClasses = this._hoverClasses.filter(v => !this._defaultClasses.find(_v => _v === v));
+        this._hoverClasses = this._hoverClasses.filter((v) => !this._defaultClasses.find((_v) => _v === v));
         this._update();
     }
     _update() {
         for (const c of this._defaultClasses) {
-            this._hovered ? this._removeClass(c) : this._addClass(c);
+            if (this._hovered) {
+                this._removeClass(c);
+            }
+            else {
+                this._addClass(c);
+            }
         }
         for (const c of this._hoverClasses) {
-            this._hovered ? this._addClass(c) : this._removeClass(c);
+            if (this._hovered) {
+                this._addClass(c);
+            }
+            else {
+                this._removeClass(c);
+            }
         }
     }
     _setHovered(hovered) {
@@ -275,10 +307,10 @@ class TheSeamHoverClassToggleDirective {
     _removeClass(c) {
         this._elementRef.nativeElement.classList.remove(c);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamHoverClassToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamHoverClassToggleDirective, isStandalone: true, selector: "[seamHoverClassToggle]", inputs: { seamHoverClassToggle: "seamHoverClassToggle" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "pointerover": "onPointerOver($event)", "pointerout": "onPointerOut($event)" } }, exportAs: ["seamHoverClassToggle"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamHoverClassToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamHoverClassToggleDirective, isStandalone: true, selector: "[seamHoverClassToggle]", inputs: { seamHoverClassToggle: "seamHoverClassToggle" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "pointerover": "onPointerOver($event)", "pointerout": "onPointerOut($event)" } }, exportAs: ["seamHoverClassToggle"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamHoverClassToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamHoverClassToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamHoverClassToggle]',
@@ -332,7 +364,7 @@ class TheSeamHoverClassDirective {
         this._setHovered(false);
     }
     set seamHoverClass(classList) {
-        const newClasses = classList.split(' ').filter(c => c.length > 0);
+        const newClasses = classList.split(' ').filter((c) => c.length > 0);
         for (const c of this._classes) {
             if (newClasses.indexOf(c) !== 0) {
                 this._removeClass(c);
@@ -343,7 +375,12 @@ class TheSeamHoverClassDirective {
     }
     _update() {
         for (const c of this._classes) {
-            this._hovered ? this._addClass(c) : this._removeClass(c);
+            if (this._hovered) {
+                this._addClass(c);
+            }
+            else {
+                this._removeClass(c);
+            }
         }
     }
     _setHovered(hovered) {
@@ -359,10 +396,10 @@ class TheSeamHoverClassDirective {
     _removeClass(c) {
         this._elementRef.nativeElement.classList.remove(c);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamHoverClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamHoverClassDirective, isStandalone: true, selector: "[seamHoverClass]", inputs: { seamHoverClass: "seamHoverClass" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "pointerover": "onPointerOver($event)", "pointerout": "onPointerOut($event)" } }, exportAs: ["seamHoverClass"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamHoverClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamHoverClassDirective, isStandalone: true, selector: "[seamHoverClass]", inputs: { seamHoverClass: "seamHoverClass" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)", "pointerover": "onPointerOver($event)", "pointerout": "onPointerOut($event)" } }, exportAs: ["seamHoverClass"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamHoverClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamHoverClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamHoverClass]',
@@ -384,51 +421,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 
+// import { ResizeSensor } from 'css-element-queries'
+// import { TheSeamElementResizedEvent } from './elem-resized.directive'
 class TheSeamNgSelectExtraDirective {
     _elementRef = inject((ElementRef));
-    _ngZone = inject(NgZone);
     _ngSelect = inject(NgSelectComponent);
-    _ngControl = inject(NgControl, { optional: true, self: true });
-    _ngUnsubscribe = new Subject();
-    _markedItem = null;
-    _checkMarked = false;
-    _keyPressWorkaroundSub = null;
-    _resizedEvent = new EventEmitter();
-    _resizeSensor;
+    _ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
     /**
      * 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; }
+    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) {
+        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;
+        return this._ngControl
+            ? this._ngControl.invalid &&
+                (this._ngControl.dirty || this._ngControl.touched)
+            : false;
     }
     get _isEmptyStringValue() {
         return this._ngControl ? this._ngControl.value === '' : false;
     }
     ngOnInit() {
-        this._ngSelect.focusEvent
-            .subscribe(v => this._enableKeyPressWorkaround());
-        this._ngSelect.blurEvent
-            .subscribe(v => this._disableKeyPressWorkaround());
+        // 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(
@@ -447,30 +481,32 @@ class TheSeamNgSelectExtraDirective {
         // this._patch_ngSelect_open()
     }
     ngOnDestroy() {
-        this._resizeSensor?.detach();
+        // this._resizeSensor?.detach()
         window.removeEventListener('scroll', this._onScroll, true);
-        this._ngUnsubscribe.next(undefined);
-        this._ngUnsubscribe.complete();
+        // 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 });
-        });
+        // const dropPanel = this._ngSelect.dropdownPanel() as any
+        // if (dropPanel) {
+        //   if (this._checkMarked) {
+        //     if (dropPanel && this._markedItem !== null) {
+        //       if (this._markedItem.index !== dropPanel.markedItem.index) {
+        //         dropPanel.scrollTo(dropPanel.markedItem)
+        //       }
+        //     }
+        //   }
+        // }
+        // this._checkMarked = false
+        // this._resizeSensor = new ResizeSensor(this._elementRef.nativeElement, event => {
+        //   this._resizedEvent.emit({ element: this._elementRef.nativeElement, size: event })
+        // })
     }
     _onScroll = (event) => {
-        if (this._ngSelect && this._ngSelect.isOpen) {
+        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 ||
+            const isInSensor = event.target.className.indexOf('resize-sensor-shrink') !==
+                -1 ||
                 event.target.className.indexOf('os-resize-observer-host') !== -1;
             if (isScrollingInScrollHost || isInSensor) {
                 return;
@@ -478,65 +514,10 @@ class TheSeamNgSelectExtraDirective {
             this._ngSelect.close();
         }
     };
-    /**
-     * 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;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNgSelectExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamNgSelectExtraDirective, isStandalone: true, 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" } }, exportAs: ["seamNgSelectExtra"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNgSelectExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamNgSelectExtraDirective, isStandalone: true, 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" } }, exportAs: ["seamNgSelectExtra"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNgSelectExtraDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNgSelectExtraDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -567,9 +548,15 @@ class TheSeamNgxQuillExtraDirective {
      * 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); }
+    set tabIndex(value) {
+        this._tabIndex = coerceNumberProperty(value);
+    }
+    get tabIndex() {
+        return this._tabIndex;
+    }
+    get _attrTabIndex() {
+        return this._quillEditor.disabled ? -1 : this.tabIndex || 0;
+    }
     ngOnDestroy() {
         this._ngUnsubscribe.next(undefined);
         this._ngUnsubscribe.complete();
@@ -579,7 +566,10 @@ class TheSeamNgxQuillExtraDirective {
         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 => e.target?.getAttribute('for') === this._elementRef.nativeElement.id), tap(() => this._quillEditor.quillEditor.focus())).subscribe();
+            fromEvent(parent, 'click')
+                .pipe(takeUntil(this._ngUnsubscribe), filter((e) => e.target?.getAttribute('for') ===
+                this._elementRef.nativeElement.id), tap(() => this._quillEditor.quillEditor.focus()))
+                .subscribe();
         }
     }
     _getParentElementForLabelFocusIssue() {
@@ -594,10 +584,10 @@ class TheSeamNgxQuillExtraDirective {
         };
         return findElem(this._elementRef.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNgxQuillExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamNgxQuillExtraDirective, isStandalone: true, selector: "quill-editor", inputs: { tabIndex: "tabIndex" }, host: { properties: { "attr.tabindex": "this._attrTabIndex" } }, exportAs: ["seamNgxQuillExtra"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNgxQuillExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamNgxQuillExtraDirective, isStandalone: true, selector: "quill-editor", inputs: { tabIndex: "tabIndex" }, host: { properties: { "attr.tabindex": "this._attrTabIndex" } }, exportAs: ["seamNgxQuillExtra"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNgxQuillExtraDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNgxQuillExtraDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -623,10 +613,10 @@ class TheSeamMaskCharsPipe {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMaskCharsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMaskCharsPipe, isStandalone: true, name: "maskChars" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMaskCharsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMaskCharsPipe, isStandalone: true, name: "maskChars" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMaskCharsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMaskCharsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'maskChars',
@@ -644,10 +634,10 @@ class TheSeamTruncatePipe {
         }
         return val;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTruncatePipe, isStandalone: true, name: "truncate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTruncatePipe, isStandalone: true, name: "truncate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamTruncatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'truncate',
@@ -655,8 +645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }] });
 
 class TheSeamSharedModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSharedModule, imports: [TheSeamAutoFocusDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamSharedModule, imports: [TheSeamAutoFocusDirective,
             TheSeamElemResizedDirective,
             TheSeamHoverClassToggleDirective,
             TheSeamNgSelectExtraDirective,
@@ -677,9 +667,9 @@ class TheSeamSharedModule {
             TheSeamMaskCharsPipe,
             TheSeamTruncatePipe,
             TheSeamNgxQuillExtraDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSharedModule, imports: [TheSeamPasswordInputRevealComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamSharedModule, imports: [TheSeamPasswordInputRevealComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -707,7 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         TheSeamMaskCharsPipe,
                         TheSeamTruncatePipe,
                         TheSeamNgxQuillExtraDirective,
-                    ]
+                    ],
                 }]
         }] });