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

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

@@ -0,0 +1,719 @@
+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 * 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 { 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';
+
+class TheSeamPasswordInputRevealComponent {
+    static ngAcceptInputType_passwordVisible;
+    faEye = faEye;
+    faEyeSlash = faEyeSlash;
+    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');
+        }
+    }
+    _passwordInput;
+    get passwordVisible() { return this._passwordVisible; }
+    set passwordVisible(value) {
+        this._passwordVisible = coerceBooleanProperty(value);
+        this.updateRevealState();
+    }
+    _passwordVisible = false;
+    updateRevealState() {
+        if (this._passwordInput) {
+            this._passwordInput.type = this.passwordVisible ? 'text' : 'password';
+        }
+    }
+    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>
+  `, 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: [{
+            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"] }]
+        }], propDecorators: { inputRef: [{
+                type: Input
+            }], passwordVisible: [{
+                type: Input
+            }] } });
+
+/**
+ * Directive that will focus the element when initialized.
+ *
+ * If the element is inside a modal, it will wait until the modal is opened before focusing.
+ *
+ * If the element will be initialized multiple times or while a form is being filled out
+ * don't use this directive.
+ *
+ * Usage:
+ * ```html
+ * <input type="text" seamAutoFocus />
+ * ```
+ */
+class TheSeamAutoFocusDirective {
+    static ngAcceptInputType_seamAutoFocus;
+    _elementRef = inject((ElementRef));
+    _modal = inject(Modal, { optional: true });
+    _modalRef = inject(ModalRef, { optional: true });
+    _focus = true;
+    modalRef = this._modalRef;
+    set seamAutoFocus(condition) {
+        this._focus = coerceBooleanProperty(condition) !== false;
+    }
+    ngOnInit() {
+        if (!this.modalRef && this._modal) {
+            // 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(); });
+            });
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamAutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamAutoFocus]',
+                    exportAs: 'seamAutoFocus',
+                }]
+        }], propDecorators: { seamAutoFocus: [{
+                type: Input
+            }] } });
+
+class TheSeamClickOutsideDirective {
+    _elementRef = inject((ElementRef));
+    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;
+        }
+    }
+    _active = true;
+    seamClickOutside = new EventEmitter();
+    // 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);
+            }
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamClickOutside]',
+                    exportAs: 'seamClickOutside',
+                }]
+        }], 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 TheSeamDisableControlDirective {
+    _ngControl = inject(NgControl);
+    set seamDisableControl(condition) {
+        const action = condition ? 'disable' : 'enable';
+        const control = this._ngControl.control;
+        if (control) {
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamDisableControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamDisableControl]',
+                    exportAs: 'seamDisableControl',
+                }]
+        }], propDecorators: { seamDisableControl: [{
+                type: Input
+            }] } });
+
+class TheSeamElemResizedDirective {
+    _elementRef = inject((ElementRef));
+    seamElemResized = new EventEmitter();
+    sensor;
+    ngAfterViewInit() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamElemResizedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamElemResized]',
+                    exportAs: 'seamElemResized',
+                }]
+        }], 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 TheSeamHoverClassToggleDirective {
+    _elementRef = inject((ElementRef));
+    _hovered = false;
+    _defaultClasses = [];
+    _hoverClasses = [];
+    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();
+    }
+    _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._elementRef.nativeElement.classList.add(c);
+    }
+    _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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamHoverClassToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamHoverClassToggle]',
+                    exportAs: 'seamHoverClassToggle',
+                }]
+        }], 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
+            }] } });
+
+/**
+ * Changes a css class on mouse pointer hover.
+ *
+ * NOTE: Only use this if css `:hover` can't be used, because css is more
+ * accurate and better performing.
+ *
+ * NOTE: 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.
+ *
+ * NOTE: 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 TheSeamHoverClassDirective {
+    _elementRef = inject((ElementRef));
+    _hovered = false;
+    _classes = [];
+    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();
+    }
+    _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._elementRef.nativeElement.classList.add(c);
+    }
+    _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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamHoverClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[seamHoverClass]',
+                    exportAs: 'seamHoverClass',
+                }]
+        }], 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 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;
+    /**
+     * 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;
+    }
+    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() {
+        this._resizeSensor?.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 });
+        });
+    }
+    _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();
+        }
+    };
+    /**
+     * 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNgSelectExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select',
+                    exportAs: 'seamNgSelectExtra',
+                }]
+        }], 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 TheSeamNgxQuillExtraDirective {
+    _elementRef = inject((ElementRef));
+    _quillEditor = inject(QuillEditorComponent);
+    _ngUnsubscribe = new Subject();
+    _tabIndex = -1;
+    /**
+     * 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); }
+    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 => e.target?.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);
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNgxQuillExtraDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'quill-editor',
+                    exportAs: 'seamNgxQuillExtra',
+                }]
+        }], propDecorators: { tabIndex: [{
+                type: Input
+            }], _attrTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+
+class TheSeamMaskCharsPipe {
+    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;
+    }
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMaskCharsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'maskChars',
+                }]
+        }] });
+
+class TheSeamTruncatePipe {
+    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;
+    }
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamTruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate',
+                }]
+        }] });
+
+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,
+            TheSeamElemResizedDirective,
+            TheSeamHoverClassToggleDirective,
+            TheSeamNgSelectExtraDirective,
+            TheSeamHoverClassDirective,
+            TheSeamClickOutsideDirective,
+            TheSeamDisableControlDirective,
+            TheSeamNgxQuillExtraDirective,
+            TheSeamMaskCharsPipe,
+            TheSeamTruncatePipe,
+            TheSeamPasswordInputRevealComponent], exports: [TheSeamAutoFocusDirective,
+            TheSeamElemResizedDirective,
+            TheSeamPasswordInputRevealComponent,
+            TheSeamNgSelectExtraDirective,
+            TheSeamHoverClassDirective,
+            TheSeamHoverClassToggleDirective,
+            TheSeamClickOutsideDirective,
+            TheSeamDisableControlDirective,
+            TheSeamMaskCharsPipe,
+            TheSeamTruncatePipe,
+            TheSeamNgxQuillExtraDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSharedModule, imports: [TheSeamPasswordInputRevealComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TheSeamAutoFocusDirective,
+                        TheSeamElemResizedDirective,
+                        TheSeamHoverClassToggleDirective,
+                        TheSeamNgSelectExtraDirective,
+                        TheSeamHoverClassDirective,
+                        TheSeamClickOutsideDirective,
+                        TheSeamDisableControlDirective,
+                        TheSeamNgxQuillExtraDirective,
+                        TheSeamMaskCharsPipe,
+                        TheSeamTruncatePipe,
+                        TheSeamPasswordInputRevealComponent,
+                    ],
+                    exports: [
+                        TheSeamAutoFocusDirective,
+                        TheSeamElemResizedDirective,
+                        TheSeamPasswordInputRevealComponent,
+                        TheSeamNgSelectExtraDirective,
+                        TheSeamHoverClassDirective,
+                        TheSeamHoverClassToggleDirective,
+                        TheSeamClickOutsideDirective,
+                        TheSeamDisableControlDirective,
+                        TheSeamMaskCharsPipe,
+                        TheSeamTruncatePipe,
+                        TheSeamNgxQuillExtraDirective,
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TheSeamAutoFocusDirective, TheSeamClickOutsideDirective, TheSeamDisableControlDirective, TheSeamElemResizedDirective, TheSeamHoverClassDirective, TheSeamHoverClassToggleDirective, TheSeamMaskCharsPipe, TheSeamNgSelectExtraDirective, TheSeamNgxQuillExtraDirective, TheSeamPasswordInputRevealComponent, TheSeamSharedModule, TheSeamTruncatePipe };
+//# sourceMappingURL=theseam-ui-common-shared.mjs.map