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

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

@@ -25,7 +25,9 @@ class ProgressCircleComponent {
         this._percentage = value;
         this._progressInfo = this._getProgress();
     }
-    get percentage() { return this._percentage; }
+    get percentage() {
+        return this._percentage;
+    }
     radius = 15;
     circumference = 2 * Math.PI * this.radius;
     _progressInfo;
@@ -33,11 +35,11 @@ class ProgressCircleComponent {
         return {
             dashoffset: calcDashoffset(this.percentage || 0, this.circumference),
             circumference: this.circumference,
-            percent: Math.floor(this.percentage || 0)
+            percent: Math.floor(this.percentage || 0),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ProgressCircleComponent, isStandalone: false, selector: "seam-progress-circle", inputs: { fillBackground: "fillBackground", showText: "showText", hiddenOnEmpty: "hiddenOnEmpty", pending: "pending", percentage: "percentage" }, ngImport: i0, template: "<div class=\"seam-progress-circle\" *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\">\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg class=\"seam-progress-circle--icon-spinner\" viewBox=\"0 0 40 40\" [attr.data-percent]=\"p.percent\">\n        <circle class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\" cx=\"20\" cy=\"20\" r=\"15\" fill=\"none\"\n          stroke-width=\"4\">\n        </circle>\n        <circle class=\"seam-progress-circle--icon-spinner-path\" cx=\"20\" cy=\"20\" r=\"15\" fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\">\n        </circle>\n        <!-- Checkmark -->\n        <path *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\">\n        </path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\">\n        </path>\n      </svg>\n    </ng-container>\n    <div class=\"seam-progress-circle--icon-text\" *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\">\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ProgressCircleComponent, isStandalone: false, selector: "seam-progress-circle", inputs: { fillBackground: "fillBackground", showText: "showText", hiddenOnEmpty: "hiddenOnEmpty", pending: "pending", percentage: "percentage" }, ngImport: i0, template: "<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 __decorate([
     InputBoolean()
@@ -54,9 +56,9 @@ __decorate([
 __decorate([
     InputNumber()
 ], ProgressCircleComponent.prototype, "percentage", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ProgressCircleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-progress-circle', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"seam-progress-circle\" *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\">\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg class=\"seam-progress-circle--icon-spinner\" viewBox=\"0 0 40 40\" [attr.data-percent]=\"p.percent\">\n        <circle class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\" cx=\"20\" cy=\"20\" r=\"15\" fill=\"none\"\n          stroke-width=\"4\">\n        </circle>\n        <circle class=\"seam-progress-circle--icon-spinner-path\" cx=\"20\" cy=\"20\" r=\"15\" fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\">\n        </circle>\n        <!-- Checkmark -->\n        <path *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\">\n        </path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\">\n        </path>\n      </svg>\n    </ng-container>\n    <div class=\"seam-progress-circle--icon-text\" *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\">\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"] }]
+            args: [{ selector: 'seam-progress-circle', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"] }]
         }], propDecorators: { fillBackground: [{
                 type: Input
             }], showText: [{
@@ -70,22 +72,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class TheSeamProgressModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamProgressModule, declarations: [ProgressCircleComponent], imports: [CommonModule], exports: [ProgressCircleComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamProgressModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, declarations: [ProgressCircleComponent], imports: [CommonModule], exports: [ProgressCircleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        ProgressCircleComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        ProgressCircleComponent
-                    ]
+                    declarations: [ProgressCircleComponent],
+                    imports: [CommonModule],
+                    exports: [ProgressCircleComponent],
                 }]
         }] });
 

package/fesm2022/theseam-ui-common-progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theseam-ui-common-progress.mjs","sources":["../../../projects/ui-common/progress/progress-circle/progress-circle.component.ts","../../../projects/ui-common/progress/progress-circle/progress-circle.component.html","../../../projects/ui-common/progress/progress.module.ts","../../../projects/ui-common/progress/theseam-ui-common-progress.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion'\nimport { Component, Input, ViewEncapsulation } from '@angular/core'\n\nimport { InputBoolean, InputNumber } from '@theseam/ui-common/core'\n\ninterface IProgressInfo {\n  dashoffset: number\n  circumference: number\n  percent: number\n}\n\nexport function calcDashoffset(value: number, circumference: number) {\n  const progress = value / 100\n  const dashoffset = circumference * (1 - progress)\n  return dashoffset\n}\n\n@Component({\n    selector: 'seam-progress-circle',\n    templateUrl: './progress-circle.component.html',\n    styleUrls: ['./progress-circle.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    standalone: false\n})\nexport class ProgressCircleComponent {\n  static ngAcceptInputType_fillBackground: BooleanInput\n  static ngAcceptInputType_showText: BooleanInput\n  static ngAcceptInputType_hiddenOnEmpty: BooleanInput\n  static ngAcceptInputType_percentage: NumberInput\n  static ngAcceptInputType_pending: BooleanInput\n\n  private _percentage = 0\n\n  @Input() @InputBoolean() fillBackground = false\n  @Input() @InputBoolean() showText = false\n  @Input() @InputBoolean() hiddenOnEmpty = true\n  @Input() @InputBoolean() pending = false\n\n  @Input() @InputNumber()\n  set percentage(value: number) {\n    this._percentage = value\n    this._progressInfo = this._getProgress()\n  }\n  get percentage(): number { return this._percentage }\n\n  public readonly radius = 15\n  public readonly circumference = 2 * Math.PI * this.radius\n\n  _progressInfo?: IProgressInfo | null\n\n  private _getProgress(): IProgressInfo {\n    return {\n      dashoffset: calcDashoffset(this.percentage || 0, this.circumference),\n      circumference: this.circumference,\n      percent: Math.floor(this.percentage || 0)\n    }\n  }\n}\n","<div class=\"seam-progress-circle\" *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\">\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg class=\"seam-progress-circle--icon-spinner\" viewBox=\"0 0 40 40\" [attr.data-percent]=\"p.percent\">\n        <circle class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\" cx=\"20\" cy=\"20\" r=\"15\" fill=\"none\"\n          stroke-width=\"4\">\n        </circle>\n        <circle class=\"seam-progress-circle--icon-spinner-path\" cx=\"20\" cy=\"20\" r=\"15\" fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\">\n        </circle>\n        <!-- Checkmark -->\n        <path *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\">\n        </path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\">\n        </path>\n      </svg>\n    </ng-container>\n    <div class=\"seam-progress-circle--icon-text\" *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\">\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { ProgressCircleComponent } from './progress-circle/progress-circle.component'\n\n@NgModule({\n  declarations: [\n    ProgressCircleComponent\n  ],\n  imports: [\n    CommonModule\n  ],\n  exports: [\n    ProgressCircleComponent\n  ]\n})\nexport class TheSeamProgressModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"theseam-ui-common-progress.mjs","sources":["../../../projects/ui-common/progress/progress-circle/progress-circle.component.ts","../../../projects/ui-common/progress/progress-circle/progress-circle.component.html","../../../projects/ui-common/progress/progress.module.ts","../../../projects/ui-common/progress/theseam-ui-common-progress.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion'\nimport { Component, Input, ViewEncapsulation } from '@angular/core'\n\nimport { InputBoolean, InputNumber } from '@theseam/ui-common/core'\n\ninterface IProgressInfo {\n  dashoffset: number\n  circumference: number\n  percent: number\n}\n\nexport function calcDashoffset(value: number, circumference: number) {\n  const progress = value / 100\n  const dashoffset = circumference * (1 - progress)\n  return dashoffset\n}\n\n@Component({\n  selector: 'seam-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class ProgressCircleComponent {\n  static ngAcceptInputType_fillBackground: BooleanInput\n  static ngAcceptInputType_showText: BooleanInput\n  static ngAcceptInputType_hiddenOnEmpty: BooleanInput\n  static ngAcceptInputType_percentage: NumberInput\n  static ngAcceptInputType_pending: BooleanInput\n\n  private _percentage = 0\n\n  @Input() @InputBoolean() fillBackground = false\n  @Input() @InputBoolean() showText = false\n  @Input() @InputBoolean() hiddenOnEmpty = true\n  @Input() @InputBoolean() pending = false\n\n  @Input()\n  @InputNumber()\n  set percentage(value: number) {\n    this._percentage = value\n    this._progressInfo = this._getProgress()\n  }\n  get percentage(): number {\n    return this._percentage\n  }\n\n  public readonly radius = 15\n  public readonly circumference = 2 * Math.PI * this.radius\n\n  _progressInfo?: IProgressInfo | null\n\n  private _getProgress(): IProgressInfo {\n    return {\n      dashoffset: calcDashoffset(this.percentage || 0, this.circumference),\n      circumference: this.circumference,\n      percent: Math.floor(this.percentage || 0),\n    }\n  }\n}\n","<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { ProgressCircleComponent } from './progress-circle/progress-circle.component'\n\n@NgModule({\n  declarations: [ProgressCircleComponent],\n  imports: [CommonModule],\n  exports: [ProgressCircleComponent],\n})\nexport class TheSeamProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/theseam-ui-common-rich-text.mjs

@@ -24,10 +24,10 @@ const THESEAM_QUILL_TOOLBAR_OPTIONS_DEFAULT = [
 const THESEAM_QUILL_MENTION_OPTIONS_DEFAULT = {
     spaceAfterInsert: false,
     positioningStrategy: 'fixed',
-    dataAttributes: ['type']
+    dataAttributes: ['type'],
 };
 const THESEAM_QUILL_MODULES_DEFAULT = {
-    toolbar: THESEAM_QUILL_TOOLBAR_OPTIONS_DEFAULT
+    toolbar: THESEAM_QUILL_TOOLBAR_OPTIONS_DEFAULT,
 };
 const THESEAM_QUILL_FORMATS_DEFAULT = [
     'align',
@@ -40,7 +40,7 @@ const THESEAM_QUILL_FORMATS_DEFAULT = [
     'size',
     'strike',
     'underline',
-    'mention'
+    'mention',
 ];
 const THESEAM_QUILL_EDITOR_CONFIG_DEFAULT = {
     format: 'html',
@@ -53,17 +53,19 @@ const THESEAM_QUILL_EDITOR_CONFIG_DEFAULT = {
     customModules: [],
     trimOnValidation: false,
     compareValues: false,
-    filterNull: false
+    filterNull: false,
 };
 const THESEAM_QUILL_EDITOR_CONFIG = new InjectionToken('TheSeamQuillEditorConfig');
 const defaultHtmlCharacterCounterFn = (value, format) => {
     if (format === 'html') {
-        return value.replace(HTML_ENTITY_REGEX, ' ').replace(/\s\s+/g, ' ').trim().length;
+        return value.replace(HTML_ENTITY_REGEX, ' ').replace(/\s\s+/g, ' ').trim()
+            .length;
     }
     else if (format === 'text') {
         return value.replace(/\s\s+/g, ' ').trim().length;
     }
     else {
+        // eslint-disable-next-line no-console
         console.warn(`Format ${format} not supported!`);
         return 0;
     }
@@ -75,7 +77,7 @@ function isMentionMenuOption(value) {
     return Object.prototype.hasOwnProperty.call(value, 'id');
 }
 const defaultMentionSearchFn = (source, textAfter, mentionChar) => {
-    return source.filter(u => {
+    return source.filter((u) => {
         if (!isMentionMenuOption(u) || u.searchIgnore === true) {
             return true;
         }
@@ -91,14 +93,16 @@ const defaultMentionRenderListFn = (source, searchFn, emptyListItem, textAfter,
         let reduceIdx = 0;
         list = list.reduce((acc, mention) => {
             const previousMenuItem = acc[reduceIdx - 1];
-            const previousMenuItemGroupName = isMentionMenuOption(previousMenuItem) ? previousMenuItem.groupName : undefined;
+            const previousMenuItemGroupName = isMentionMenuOption(previousMenuItem)
+                ? previousMenuItem.groupName
+                : undefined;
             if (isMentionMenuOption(mention) &&
                 notNullOrUndefinedOrEmpty(mention.groupName) &&
                 mention.groupName !== previousMenuItemGroupName) {
                 acc.push({
                     value: mention.groupName,
                     disabled: true,
-                    type: 'groupName'
+                    type: 'groupName',
                 });
                 reduceIdx++;
             }
@@ -323,7 +327,7 @@ class RichTextComponent {
         }
     }
     _mentionItems = new BehaviorSubject(undefined);
-    mentionItems$ = this._mentionItems.asObservable().pipe(filter(mentions => notNullOrUndefined(mentions) && mentions.length > 0), shareReplay({ bufferSize: 1, refCount: true }));
+    mentionItems$ = this._mentionItems.asObservable().pipe(filter((mentions) => notNullOrUndefined(mentions) && mentions.length > 0), shareReplay({ bufferSize: 1, refCount: true }));
     /**
      * Set to override default search function when user is typing a mention.
      */
@@ -383,7 +387,7 @@ class RichTextComponent {
             id: 'undefined',
             value: this.mentionListEmptyText,
             disabled: true,
-            emptyList: true
+            emptyList: true,
         };
     }
     quillEditorCreated = new EventEmitter();
@@ -408,7 +412,9 @@ class RichTextComponent {
     _handleKeydown(event) {
         if (event.code === 'Escape') {
             const qlEditor = this._quillEditor?.editorElem?.querySelector('.ql-editor');
-            if (notNullOrUndefined(qlEditor) && qlEditor === document.activeElement && qlEditor instanceof HTMLElement) {
+            if (notNullOrUndefined(qlEditor) &&
+                qlEditor === document.activeElement &&
+                qlEditor instanceof HTMLElement) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 qlEditor.blur();
@@ -434,27 +440,36 @@ class RichTextComponent {
             this._configSet.asObservable(),
             this._stylesSet.asObservable(),
             this._templateSet.asObservable(),
-        ]).pipe(map(sets => sets.findIndex(s => !s) === -1));
-        this.characterCount$ = this.initialized$.pipe(filter(i => i), switchMap(() => {
+        ]).pipe(map((sets) => sets.findIndex((s) => !s) === -1));
+        this.characterCount$ = this.initialized$.pipe(filter((i) => i), switchMap(() => {
             if (notNullOrUndefined(this.formControl)) {
-                return this.formControl.valueChanges.pipe(startWith(this.formControl.value), map(v => this.characterCounterFn(v || '', this._config.value?.format)));
+                return this.formControl.valueChanges.pipe(startWith(this.formControl.value), map((v) => this.characterCounterFn(v || '', this._config.value?.format)));
             }
             return of(0);
         }));
-        this.selectedMentions$.pipe(tap(mentions => this.mentionsUpdated.emit(mentions))).subscribe();
+        this.selectedMentions$
+            .pipe(tap((mentions) => this.mentionsUpdated.emit(mentions)))
+            .subscribe();
     }
     ngOnInit() {
         // TODO: test this more
         // ignore quill initial valueChange event, to keep functionality in line with other inputs
         let initialEmitComplete = false;
-        this._configSet.pipe(filter(s => s), switchMap(() => this.formControl.valueChanges.pipe(
+        this._configSet
+            .pipe(filter((s) => s), switchMap(() => this.formControl.valueChanges.pipe(
         // skip(1),
-        take(1), tap(() => initialEmitComplete = true)))).subscribe();
-        this.formControl.valueChanges.pipe(filter(() => !this._isWritingValue && initialEmitComplete), tap(value => this.value = value)).subscribe();
-        this._pollCalculatedRowHeight.asObservable().pipe(tap(() => {
+        take(1), tap(() => (initialEmitComplete = true)))))
+            .subscribe();
+        this.formControl.valueChanges
+            .pipe(filter(() => !this._isWritingValue && initialEmitComplete), tap((value) => (this.value = value)))
+            .subscribe();
+        this._pollCalculatedRowHeight
+            .asObservable()
+            .pipe(tap(() => {
             this._stylesSet.next(false);
             const calculatedRowsHeight = `${this.rows * 1.5}rem`;
-            if (notNullOrUndefined(this.rows) && notNullOrUndefined(this._quillEditor)) {
+            if (notNullOrUndefined(this.rows) &&
+                notNullOrUndefined(this._quillEditor)) {
                 const editorEl = this._elementRef.nativeElement.querySelector('.ql-editor');
                 if (notNullOrUndefined(editorEl)) {
                     this._renderer.setStyle(editorEl, 'height', calculatedRowsHeight);
@@ -462,7 +477,8 @@ class RichTextComponent {
                 }
             }
             this._stylesSet.next(true);
-        })).subscribe();
+        }))
+            .subscribe();
         this._buildQuillConfig();
     }
     ngAfterViewInit() {
@@ -482,20 +498,20 @@ class RichTextComponent {
     _buildQuillConfig() {
         this._configSet.next(false);
         const config = {
-            ...THESEAM_QUILL_EDITOR_CONFIG_DEFAULT
+            ...THESEAM_QUILL_EDITOR_CONFIG_DEFAULT,
         };
         if (this.disableRichText) {
             config.format = 'text';
             config.formats = [];
             config.modules = {
-                toolbar: false
+                toolbar: false,
             };
         }
         else {
             config.format = this._getConfigOrDefault('format');
             config.formats = this._getConfigOrDefault('formats');
             config.modules = {
-                ...this._getConfigOrDefault('modules')
+                ...this._getConfigOrDefault('modules'),
             };
         }
         if (this.useMentions) {
@@ -513,7 +529,7 @@ class RichTextComponent {
                         }
                     },
                     ...config.modules?.mention,
-                }
+                },
             };
             config.modules = mentionModules;
         }
@@ -540,7 +556,8 @@ class RichTextComponent {
         }, 0);
     }
     _getConfigOrDefault(prop) {
-        if (this._customConfig && Object.prototype.hasOwnProperty.call(this._customConfig, prop)) {
+        if (this._customConfig &&
+            Object.prototype.hasOwnProperty.call(this._customConfig, prop)) {
             return this._customConfig[prop];
         }
         return THESEAM_QUILL_EDITOR_CONFIG_DEFAULT[prop];
@@ -618,15 +635,18 @@ class RichTextComponent {
      */
     _updateMentionsFromDelta(content) {
         if (notNullOrUndefined(content.ops)) {
-            const contentMentionIds = content.ops.map((o) => o.insert?.mention?.id).filter(notNullOrUndefined);
+            const contentMentionIds = content.ops
+                .map((o) => o.insert?.mention?.id)
+                .filter(notNullOrUndefined);
             const selectedMentions = [...this._selectedMentions.value];
-            const mentionOptions = [...this._mentionItems.value || []];
+            const mentionOptions = [...(this._mentionItems.value || [])];
             const newMentions = contentMentionIds.reduce((acc, mentionId) => {
                 const insertMention = mentionOptions.find((m) => isMentionMenuOption(m) && m.id === mentionId);
                 if (notNullOrUndefined(insertMention)) {
                     acc.push(insertMention);
                 }
                 else {
+                    // eslint-disable-next-line no-console
                     console.warn('Mention addition failed! Selected mention option not found:', mentionId);
                 }
                 return acc;
@@ -638,10 +658,11 @@ class RichTextComponent {
             }
             else {
                 // otherwise, test ids for old and new items to see if we need to emit a change
-                const selectedMentionIds = this._selectedMentions.value.map(m => m.id);
-                const newMentionIds = newMentions.map(m => m.id);
-                if (selectedMentionIds.findIndex(m => !newMentionIds.includes(m)) !== -1 ||
-                    newMentionIds.findIndex(m => !selectedMentionIds.includes(m)) !== -1) {
+                const selectedMentionIds = this._selectedMentions.value.map((m) => m.id);
+                const newMentionIds = newMentions.map((m) => m.id);
+                if (selectedMentionIds.findIndex((m) => !newMentionIds.includes(m)) !==
+                    -1 ||
+                    newMentionIds.findIndex((m) => !selectedMentionIds.includes(m)) !== -1) {
                     emitUpdate = true;
                 }
             }
@@ -650,16 +671,12 @@ class RichTextComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RichTextComponent, deps: [{ token: i0.Renderer2 }, { token: THESEAM_QUILL_EDITOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: RichTextComponent, isStandalone: true, selector: "seam-rich-text", inputs: { val: ["value", "val"], required: "required", placeholder: "placeholder", rows: "rows", resizable: "resizable", disableRichText: "disableRichText", displayCharacterCounter: "displayCharacterCounter", minLength: "minLength", maxLength: "maxLength", characterCounterTpl: "characterCounterTpl", characterCounterFn: "characterCounterFn", useMentions: "useMentions", mentionItems: "mentionItems", mentionSearchFn: "mentionSearchFn", mentionRenderListFn: "mentionRenderListFn", mentionListLoadingText: "mentionListLoadingText", mentionListEmptyText: "mentionListEmptyText" }, outputs: { quillEditorCreated: "quillEditorCreated", quillEditorChanged: "quillEditorChanged", quillContentChanged: "quillContentChanged", quillSelectionChanged: "quillSelectionChanged", quillFocus: "quillFocus", quillBlur: "quillBlur", mentionsUpdated: "mentionsUpdated" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
-            RICH_TEXT_VALUE_ACCESSOR,
-        ], viewQueries: [{ propertyName: "quillEditor", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "defaultCharacterCounterTpl", first: true, predicate: ["characterCounter"], descendants: true }], ngImport: i0, template: "<div class=\"editor\" *ngIf=\"configSet$ | async\" [class.initializing]=\"!(initialized$ | async)\">\n  <ng-container *ngIf=\"config$ | async as config\">\n    <quill-editor\n      #quillEditor\n      seamInput\n      [class.disabled]=\"readOnly\"\n      [attr.disabled]=\"readOnly\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readOnly]=\"readOnly\"\n      [required]=\"required\"\n      [minLength]=\"$any(minLength)\"\n      [maxLength]=\"$any(maxLength)\"\n      [format]=\"config.format\"\n      [theme]=\"$any(config.theme)\"\n      [modules]=\"$any(config.modules)\"\n      [debug]=\"$any(config.debug)\"\n      [formats]=\"$any(config.formats)\"\n      [customToolbarPosition]=\"config.customToolbarPosition\"\n      [sanitize]=\"config.sanitize\"\n      [styles]=\"config.styles\"\n      [bounds]=\"$any(config.bounds)\"\n      [customOptions]=\"config.customOptions\"\n      [customModules]=\"config.customModules\"\n      [trackChanges]=\"$any(config.trackChanges)\"\n      [classes]=\"$any(config.classes)\"\n      [trimOnValidation]=\"config.trimOnValidation\"\n      [linkPlaceholder]=\"$any(config.linkPlaceholder)\"\n      [compareValues]=\"config.compareValues\"\n      [filterNull]=\"config.filterNull\"\n      [debounceTime]=\"$any(config.debounceTime)\"\n      [class.can-resize]=\"resizable\"\n      (onEditorCreated)=\"_onEditorCreated($event)\"\n      (onEditorChanged)=\"_onEditorChanged($event)\"\n      (onContentChanged)=\"_onContentChanged($event)\"\n      (onSelectionChanged)=\"_onSelectionChanged($event)\"\n      (onFocus)=\"_onFocus($event)\"\n      (onBlur)=\"_onBlur($event)\"></quill-editor>\n    <ng-container *ngIf=\"displayCharacterCounter\">\n      <ng-container\n        [ngTemplateOutlet]=\"characterCounterTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: characterCount$ | async, minLength: minLength, maxLength: maxLength, characterCount: characterCount$ | async }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #characterCounter let-implicit let-minLength=\"minLength\" let-maxLength=\"maxLength\" let-characterCount=\"characterCount\">\n  <div class=\"small text-black-50 text-right\">\n    <ng-container *ngIf=\"characterCount || characterCount === 0\">\n      Character Count:\n      <span [class.text-danger]=\"characterCount && ((maxLength && characterCount > maxLength) || (minLength && characterCount < minLength))\">\n        {{ characterCount | number }}\n      </span>\n      <ng-container *ngIf=\"maxLength\">\n        / {{ maxLength }}\n      </ng-container>\n      <span *ngIf=\"minLength\" class=\"font-italic\">\n        (minimum {{ minLength }} expected)\n      </span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host .editor{position:relative}:host .editor.initializing:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;z-index:1}:host quill-editor.can-resize ::ng-deep .ql-editor{overflow:auto;resize:vertical}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2.QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RichTextComponent, deps: [{ token: i0.Renderer2 }, { token: THESEAM_QUILL_EDITOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: RichTextComponent, isStandalone: true, selector: "seam-rich-text", inputs: { val: ["value", "val"], required: "required", placeholder: "placeholder", rows: "rows", resizable: "resizable", disableRichText: "disableRichText", displayCharacterCounter: "displayCharacterCounter", minLength: "minLength", maxLength: "maxLength", characterCounterTpl: "characterCounterTpl", characterCounterFn: "characterCounterFn", useMentions: "useMentions", mentionItems: "mentionItems", mentionSearchFn: "mentionSearchFn", mentionRenderListFn: "mentionRenderListFn", mentionListLoadingText: "mentionListLoadingText", mentionListEmptyText: "mentionListEmptyText" }, outputs: { quillEditorCreated: "quillEditorCreated", quillEditorChanged: "quillEditorChanged", quillContentChanged: "quillContentChanged", quillSelectionChanged: "quillSelectionChanged", quillFocus: "quillFocus", quillBlur: "quillBlur", mentionsUpdated: "mentionsUpdated" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [RICH_TEXT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "quillEditor", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "defaultCharacterCounterTpl", first: true, predicate: ["characterCounter"], descendants: true }], ngImport: i0, template: "<div\n  class=\"editor\"\n  *ngIf=\"configSet$ | async\"\n  [class.initializing]=\"!(initialized$ | async)\"\n>\n  <ng-container *ngIf=\"config$ | async as config\">\n    <quill-editor\n      #quillEditor\n      seamInput\n      [class.disabled]=\"readOnly\"\n      [attr.disabled]=\"readOnly\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readOnly]=\"readOnly\"\n      [required]=\"required\"\n      [minLength]=\"$any(minLength)\"\n      [maxLength]=\"$any(maxLength)\"\n      [format]=\"config.format\"\n      [theme]=\"$any(config.theme)\"\n      [modules]=\"$any(config.modules)\"\n      [debug]=\"$any(config.debug)\"\n      [formats]=\"$any(config.formats)\"\n      [customToolbarPosition]=\"config.customToolbarPosition\"\n      [sanitize]=\"config.sanitize\"\n      [styles]=\"config.styles\"\n      [bounds]=\"$any(config.bounds)\"\n      [customOptions]=\"config.customOptions\"\n      [customModules]=\"config.customModules\"\n      [trackChanges]=\"$any(config.trackChanges)\"\n      [classes]=\"$any(config.classes)\"\n      [trimOnValidation]=\"config.trimOnValidation\"\n      [linkPlaceholder]=\"$any(config.linkPlaceholder)\"\n      [compareValues]=\"config.compareValues\"\n      [filterNull]=\"config.filterNull\"\n      [debounceTime]=\"$any(config.debounceTime)\"\n      [class.can-resize]=\"resizable\"\n      (onEditorCreated)=\"_onEditorCreated($event)\"\n      (onEditorChanged)=\"_onEditorChanged($event)\"\n      (onContentChanged)=\"_onContentChanged($event)\"\n      (onSelectionChanged)=\"_onSelectionChanged($event)\"\n      (onFocus)=\"_onFocus($event)\"\n      (onBlur)=\"_onBlur($event)\"\n    ></quill-editor>\n    <ng-container *ngIf=\"displayCharacterCounter\">\n      <ng-container\n        [ngTemplateOutlet]=\"characterCounterTpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: characterCount$ | async,\n          minLength: minLength,\n          maxLength: maxLength,\n          characterCount: characterCount$ | async,\n        }\"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #characterCounter\n  let-implicit\n  let-minLength=\"minLength\"\n  let-maxLength=\"maxLength\"\n  let-characterCount=\"characterCount\"\n>\n  <div class=\"small text-black-50 text-right\">\n    <ng-container *ngIf=\"characterCount || characterCount === 0\">\n      Character Count:\n      <span\n        [class.text-danger]=\"\n          characterCount &&\n          ((maxLength && characterCount > maxLength) ||\n            (minLength && characterCount < minLength))\n        \"\n      >\n        {{ characterCount | number }}\n      </span>\n      <ng-container *ngIf=\"maxLength\"> / {{ maxLength }} </ng-container>\n      <span *ngIf=\"minLength\" class=\"font-italic\">\n        (minimum {{ minLength }} expected)\n      </span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host .editor{position:relative}:host .editor.initializing:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;z-index:1}:host quill-editor.can-resize ::ng-deep .ql-editor{overflow:auto;resize:vertical}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2.QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RichTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RichTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-rich-text', providers: [
-                        RICH_TEXT_VALUE_ACCESSOR,
-                    ], imports: [
+            args: [{ selector: 'seam-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], imports: [
                         NgIf,
                         NgTemplateOutlet,
                         AsyncPipe,
@@ -667,7 +684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         ReactiveFormsModule,
                         QuillModule,
                         TheSeamFormFieldModule,
-                    ], template: "<div class=\"editor\" *ngIf=\"configSet$ | async\" [class.initializing]=\"!(initialized$ | async)\">\n  <ng-container *ngIf=\"config$ | async as config\">\n    <quill-editor\n      #quillEditor\n      seamInput\n      [class.disabled]=\"readOnly\"\n      [attr.disabled]=\"readOnly\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readOnly]=\"readOnly\"\n      [required]=\"required\"\n      [minLength]=\"$any(minLength)\"\n      [maxLength]=\"$any(maxLength)\"\n      [format]=\"config.format\"\n      [theme]=\"$any(config.theme)\"\n      [modules]=\"$any(config.modules)\"\n      [debug]=\"$any(config.debug)\"\n      [formats]=\"$any(config.formats)\"\n      [customToolbarPosition]=\"config.customToolbarPosition\"\n      [sanitize]=\"config.sanitize\"\n      [styles]=\"config.styles\"\n      [bounds]=\"$any(config.bounds)\"\n      [customOptions]=\"config.customOptions\"\n      [customModules]=\"config.customModules\"\n      [trackChanges]=\"$any(config.trackChanges)\"\n      [classes]=\"$any(config.classes)\"\n      [trimOnValidation]=\"config.trimOnValidation\"\n      [linkPlaceholder]=\"$any(config.linkPlaceholder)\"\n      [compareValues]=\"config.compareValues\"\n      [filterNull]=\"config.filterNull\"\n      [debounceTime]=\"$any(config.debounceTime)\"\n      [class.can-resize]=\"resizable\"\n      (onEditorCreated)=\"_onEditorCreated($event)\"\n      (onEditorChanged)=\"_onEditorChanged($event)\"\n      (onContentChanged)=\"_onContentChanged($event)\"\n      (onSelectionChanged)=\"_onSelectionChanged($event)\"\n      (onFocus)=\"_onFocus($event)\"\n      (onBlur)=\"_onBlur($event)\"></quill-editor>\n    <ng-container *ngIf=\"displayCharacterCounter\">\n      <ng-container\n        [ngTemplateOutlet]=\"characterCounterTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: characterCount$ | async, minLength: minLength, maxLength: maxLength, characterCount: characterCount$ | async }\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #characterCounter let-implicit let-minLength=\"minLength\" let-maxLength=\"maxLength\" let-characterCount=\"characterCount\">\n  <div class=\"small text-black-50 text-right\">\n    <ng-container *ngIf=\"characterCount || characterCount === 0\">\n      Character Count:\n      <span [class.text-danger]=\"characterCount && ((maxLength && characterCount > maxLength) || (minLength && characterCount < minLength))\">\n        {{ characterCount | number }}\n      </span>\n      <ng-container *ngIf=\"maxLength\">\n        / {{ maxLength }}\n      </ng-container>\n      <span *ngIf=\"minLength\" class=\"font-italic\">\n        (minimum {{ minLength }} expected)\n      </span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host .editor{position:relative}:host .editor.initializing:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;z-index:1}:host quill-editor.can-resize ::ng-deep .ql-editor{overflow:auto;resize:vertical}\n"] }]
+                    ], template: "<div\n  class=\"editor\"\n  *ngIf=\"configSet$ | async\"\n  [class.initializing]=\"!(initialized$ | async)\"\n>\n  <ng-container *ngIf=\"config$ | async as config\">\n    <quill-editor\n      #quillEditor\n      seamInput\n      [class.disabled]=\"readOnly\"\n      [attr.disabled]=\"readOnly\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readOnly]=\"readOnly\"\n      [required]=\"required\"\n      [minLength]=\"$any(minLength)\"\n      [maxLength]=\"$any(maxLength)\"\n      [format]=\"config.format\"\n      [theme]=\"$any(config.theme)\"\n      [modules]=\"$any(config.modules)\"\n      [debug]=\"$any(config.debug)\"\n      [formats]=\"$any(config.formats)\"\n      [customToolbarPosition]=\"config.customToolbarPosition\"\n      [sanitize]=\"config.sanitize\"\n      [styles]=\"config.styles\"\n      [bounds]=\"$any(config.bounds)\"\n      [customOptions]=\"config.customOptions\"\n      [customModules]=\"config.customModules\"\n      [trackChanges]=\"$any(config.trackChanges)\"\n      [classes]=\"$any(config.classes)\"\n      [trimOnValidation]=\"config.trimOnValidation\"\n      [linkPlaceholder]=\"$any(config.linkPlaceholder)\"\n      [compareValues]=\"config.compareValues\"\n      [filterNull]=\"config.filterNull\"\n      [debounceTime]=\"$any(config.debounceTime)\"\n      [class.can-resize]=\"resizable\"\n      (onEditorCreated)=\"_onEditorCreated($event)\"\n      (onEditorChanged)=\"_onEditorChanged($event)\"\n      (onContentChanged)=\"_onContentChanged($event)\"\n      (onSelectionChanged)=\"_onSelectionChanged($event)\"\n      (onFocus)=\"_onFocus($event)\"\n      (onBlur)=\"_onBlur($event)\"\n    ></quill-editor>\n    <ng-container *ngIf=\"displayCharacterCounter\">\n      <ng-container\n        [ngTemplateOutlet]=\"characterCounterTpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: characterCount$ | async,\n          minLength: minLength,\n          maxLength: maxLength,\n          characterCount: characterCount$ | async,\n        }\"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #characterCounter\n  let-implicit\n  let-minLength=\"minLength\"\n  let-maxLength=\"maxLength\"\n  let-characterCount=\"characterCount\"\n>\n  <div class=\"small text-black-50 text-right\">\n    <ng-container *ngIf=\"characterCount || characterCount === 0\">\n      Character Count:\n      <span\n        [class.text-danger]=\"\n          characterCount &&\n          ((maxLength && characterCount > maxLength) ||\n            (minLength && characterCount < minLength))\n        \"\n      >\n        {{ characterCount | number }}\n      </span>\n      <ng-container *ngIf=\"maxLength\"> / {{ maxLength }} </ng-container>\n      <span *ngIf=\"minLength\" class=\"font-italic\">\n        (minimum {{ minLength }} expected)\n      </span>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host .editor{position:relative}:host .editor.initializing:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;z-index:1}:host quill-editor.can-resize ::ng-deep .ql-editor{overflow:auto;resize:vertical}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -754,23 +771,19 @@ const THESEAM_QUILL_FORMATS = [
     'strike',
     'underline',
     'video',
-    'mention'
+    'mention',
 ];
 
 class TheSeamRichTextModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, imports: [RichTextComponent], exports: [RichTextComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, imports: [RichTextComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamRichTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamRichTextModule, imports: [RichTextComponent], exports: [RichTextComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamRichTextModule, imports: [RichTextComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamRichTextModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamRichTextModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        RichTextComponent,
-                    ],
-                    exports: [
-                        RichTextComponent,
-                    ],
+                    imports: [RichTextComponent],
+                    exports: [RichTextComponent],
                 }]
         }] });