@myrmidon/gve-core 7.0.16 → 7.0.17

package/fesm2022/myrmidon-gve-core.mjs

@@ -1539,11 +1539,11 @@ class BaseTextPeepholeComponent {
         this.recenter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextPeepholeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTextPeepholeComponent, isStandalone: true, selector: "gve-base-text-peephole", inputs: { windowWidth: { classPropertyName: "windowWidth", publicName: "windowWidth", isSignal: true, isRequired: false, transformFunction: null }, emSize: { classPropertyName: "emSize", publicName: "emSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"peephole\">\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    class=\"nav-btn\"\r\n    [disabled]=\"windowStart() === 0\"\r\n    (click)=\"scrollLeft()\"\r\n    aria-label=\"Scroll window left\"\r\n  >\r\n    <mat-icon>chevron_left</mat-icon>\r\n  </button>\r\n\r\n  <div class=\"hidden-count left\">\r\n    @if (hiddenLeftCount() > 0) {\r\n      {{ hiddenLeftCount() }}\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    class=\"window\"\r\n    tabindex=\"0\"\r\n    [class.dragging]=\"isDragging()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    (dblclick)=\"onWindowDblClick()\"\r\n    (pointerdown)=\"onPointerDown($event)\"\r\n    (pointermove)=\"onPointerMove($event)\"\r\n    (pointerup)=\"onPointerUp()\"\r\n    (pointercancel)=\"onPointerUp()\"\r\n  >\r\n    @for (c of visibleChars(); track c.id; let i = $index) {\r\n      @let selected = isSelected(windowStart() + i);\r\n      <div class=\"char-cell\" [style.transform]=\"'scale(' + getScale(i) + ')'\">\r\n        <div\r\n          class=\"c-label\"\r\n          [class.selected]=\"selected\"\r\n          [style.fontSize.em]=\"emSize()\"\r\n        >\r\n          {{ c.label }}\r\n        </div>\r\n        <div\r\n          class=\"c-id\"\r\n          [class.selected]=\"selected\"\r\n          [style.fontSize.em]=\"emSize() / 2\"\r\n        >\r\n          {{ c.id }}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"hidden-count right\">\r\n    @if (hiddenRightCount() > 0) {\r\n      {{ hiddenRightCount() }}\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    class=\"nav-btn\"\r\n    [disabled]=\"hiddenRightCount() === 0\"\r\n    (click)=\"scrollRight()\"\r\n    aria-label=\"Scroll window right\"\r\n  >\r\n    <mat-icon>chevron_right</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".peephole{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}.nav-btn{flex:0 0 auto}.hidden-count{flex:0 0 auto;min-width:1.5em;display:flex;align-items:center;justify-content:center;font-size:.75em;color:var(--mat-sys-on-surface-variant)}.window{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden;padding:8px 4px;cursor:grab;touch-action:none;outline:none}.window:focus-visible{border-radius:6px;outline:2px solid var(--mat-sys-primary);outline-offset:2px}.window.dragging{cursor:grabbing}.char-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;transition:transform .2s ease}.c-label{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px 2px;overflow:hidden;text-align:center;transition:font-size .2s ease,border-color .15s ease}.c-label.selected{border-color:var(--mat-sys-primary)}.c-id{box-sizing:border-box;width:100%;margin-top:4px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:2px;overflow:hidden;color:var(--mat-sys-on-surface-variant);background-color:transparent;text-align:center;white-space:nowrap;text-overflow:clip;transition:font-size .2s ease,background-color .15s ease,border-color .15s ease,color .15s ease}.c-id.selected{background-color:var(--mat-sys-primary);border-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTextPeepholeComponent, isStandalone: true, selector: "gve-base-text-peephole", inputs: { windowWidth: { classPropertyName: "windowWidth", publicName: "windowWidth", isSignal: true, isRequired: false, transformFunction: null }, emSize: { classPropertyName: "emSize", publicName: "emSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"peephole\">\n  <button\n    type=\"button\"\n    mat-icon-button\n    class=\"nav-btn\"\n    [disabled]=\"windowStart() === 0\"\n    (click)=\"scrollLeft()\"\n    aria-label=\"Scroll window left\"\n  >\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div class=\"hidden-count left\">\n    @if (hiddenLeftCount() > 0) {\n      {{ hiddenLeftCount() }}\n    }\n  </div>\n\n  <div\n    class=\"window\"\n    tabindex=\"0\"\n    [class.dragging]=\"isDragging()\"\n    (keydown)=\"onKeyDown($event)\"\n    (dblclick)=\"onWindowDblClick()\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp()\"\n    (pointercancel)=\"onPointerUp()\"\n  >\n    @for (c of visibleChars(); track c.id; let i = $index) {\n      @let selected = isSelected(windowStart() + i);\n      <div class=\"char-cell\" [style.transform]=\"'scale(' + getScale(i) + ')'\">\n        <div\n          class=\"c-label\"\n          [class.selected]=\"selected\"\n          [style.fontSize.em]=\"emSize()\"\n        >\n          {{ c.label }}\n        </div>\n        <div\n          class=\"c-id\"\n          [class.selected]=\"selected\"\n          [style.fontSize.em]=\"emSize() / 2\"\n        >\n          {{ c.id }}\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"hidden-count right\">\n    @if (hiddenRightCount() > 0) {\n      {{ hiddenRightCount() }}\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    mat-icon-button\n    class=\"nav-btn\"\n    [disabled]=\"hiddenRightCount() === 0\"\n    (click)=\"scrollRight()\"\n    aria-label=\"Scroll window right\"\n  >\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n</div>\n", styles: [".peephole{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}.nav-btn{flex:0 0 auto}.hidden-count{flex:0 0 auto;min-width:1.5em;display:flex;align-items:center;justify-content:center;font-size:.75em;color:var(--mat-sys-on-surface-variant)}.window{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden;padding:8px 4px;cursor:grab;touch-action:none;outline:none}.window:focus-visible{border-radius:6px;outline:2px solid var(--mat-sys-primary);outline-offset:2px}.window.dragging{cursor:grabbing}.char-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;transition:transform .2s ease}.c-label{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px 2px;overflow:hidden;text-align:center;transition:font-size .2s ease,border-color .15s ease}.c-label.selected{border-color:var(--mat-sys-primary)}.c-id{box-sizing:border-box;width:100%;margin-top:4px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:2px;overflow:hidden;color:var(--mat-sys-on-surface-variant);background-color:transparent;text-align:center;white-space:nowrap;text-overflow:clip;transition:font-size .2s ease,background-color .15s ease,border-color .15s ease,color .15s ease}.c-id.selected{background-color:var(--mat-sys-primary);border-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTextPeepholeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gve-base-text-peephole', imports: [MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"peephole\">\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    class=\"nav-btn\"\r\n    [disabled]=\"windowStart() === 0\"\r\n    (click)=\"scrollLeft()\"\r\n    aria-label=\"Scroll window left\"\r\n  >\r\n    <mat-icon>chevron_left</mat-icon>\r\n  </button>\r\n\r\n  <div class=\"hidden-count left\">\r\n    @if (hiddenLeftCount() > 0) {\r\n      {{ hiddenLeftCount() }}\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    class=\"window\"\r\n    tabindex=\"0\"\r\n    [class.dragging]=\"isDragging()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    (dblclick)=\"onWindowDblClick()\"\r\n    (pointerdown)=\"onPointerDown($event)\"\r\n    (pointermove)=\"onPointerMove($event)\"\r\n    (pointerup)=\"onPointerUp()\"\r\n    (pointercancel)=\"onPointerUp()\"\r\n  >\r\n    @for (c of visibleChars(); track c.id; let i = $index) {\r\n      @let selected = isSelected(windowStart() + i);\r\n      <div class=\"char-cell\" [style.transform]=\"'scale(' + getScale(i) + ')'\">\r\n        <div\r\n          class=\"c-label\"\r\n          [class.selected]=\"selected\"\r\n          [style.fontSize.em]=\"emSize()\"\r\n        >\r\n          {{ c.label }}\r\n        </div>\r\n        <div\r\n          class=\"c-id\"\r\n          [class.selected]=\"selected\"\r\n          [style.fontSize.em]=\"emSize() / 2\"\r\n        >\r\n          {{ c.id }}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"hidden-count right\">\r\n    @if (hiddenRightCount() > 0) {\r\n      {{ hiddenRightCount() }}\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    class=\"nav-btn\"\r\n    [disabled]=\"hiddenRightCount() === 0\"\r\n    (click)=\"scrollRight()\"\r\n    aria-label=\"Scroll window right\"\r\n  >\r\n    <mat-icon>chevron_right</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".peephole{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}.nav-btn{flex:0 0 auto}.hidden-count{flex:0 0 auto;min-width:1.5em;display:flex;align-items:center;justify-content:center;font-size:.75em;color:var(--mat-sys-on-surface-variant)}.window{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden;padding:8px 4px;cursor:grab;touch-action:none;outline:none}.window:focus-visible{border-radius:6px;outline:2px solid var(--mat-sys-primary);outline-offset:2px}.window.dragging{cursor:grabbing}.char-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;transition:transform .2s ease}.c-label{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px 2px;overflow:hidden;text-align:center;transition:font-size .2s ease,border-color .15s ease}.c-label.selected{border-color:var(--mat-sys-primary)}.c-id{box-sizing:border-box;width:100%;margin-top:4px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:2px;overflow:hidden;color:var(--mat-sys-on-surface-variant);background-color:transparent;text-align:center;white-space:nowrap;text-overflow:clip;transition:font-size .2s ease,background-color .15s ease,border-color .15s ease,color .15s ease}.c-id.selected{background-color:var(--mat-sys-primary);border-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}\n"] }]
+            args: [{ selector: 'gve-base-text-peephole', imports: [MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"peephole\">\n  <button\n    type=\"button\"\n    mat-icon-button\n    class=\"nav-btn\"\n    [disabled]=\"windowStart() === 0\"\n    (click)=\"scrollLeft()\"\n    aria-label=\"Scroll window left\"\n  >\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div class=\"hidden-count left\">\n    @if (hiddenLeftCount() > 0) {\n      {{ hiddenLeftCount() }}\n    }\n  </div>\n\n  <div\n    class=\"window\"\n    tabindex=\"0\"\n    [class.dragging]=\"isDragging()\"\n    (keydown)=\"onKeyDown($event)\"\n    (dblclick)=\"onWindowDblClick()\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp()\"\n    (pointercancel)=\"onPointerUp()\"\n  >\n    @for (c of visibleChars(); track c.id; let i = $index) {\n      @let selected = isSelected(windowStart() + i);\n      <div class=\"char-cell\" [style.transform]=\"'scale(' + getScale(i) + ')'\">\n        <div\n          class=\"c-label\"\n          [class.selected]=\"selected\"\n          [style.fontSize.em]=\"emSize()\"\n        >\n          {{ c.label }}\n        </div>\n        <div\n          class=\"c-id\"\n          [class.selected]=\"selected\"\n          [style.fontSize.em]=\"emSize() / 2\"\n        >\n          {{ c.id }}\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"hidden-count right\">\n    @if (hiddenRightCount() > 0) {\n      {{ hiddenRightCount() }}\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    mat-icon-button\n    class=\"nav-btn\"\n    [disabled]=\"hiddenRightCount() === 0\"\n    (click)=\"scrollRight()\"\n    aria-label=\"Scroll window right\"\n  >\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n</div>\n", styles: [".peephole{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}.nav-btn{flex:0 0 auto}.hidden-count{flex:0 0 auto;min-width:1.5em;display:flex;align-items:center;justify-content:center;font-size:.75em;color:var(--mat-sys-on-surface-variant)}.window{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden;padding:8px 4px;cursor:grab;touch-action:none;outline:none}.window:focus-visible{border-radius:6px;outline:2px solid var(--mat-sys-primary);outline-offset:2px}.window.dragging{cursor:grabbing}.char-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;transition:transform .2s ease}.c-label{box-sizing:border-box;width:100%;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:6px 2px;overflow:hidden;text-align:center;transition:font-size .2s ease,border-color .15s ease}.c-label.selected{border-color:var(--mat-sys-primary)}.c-id{box-sizing:border-box;width:100%;margin-top:4px;border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:2px;overflow:hidden;color:var(--mat-sys-on-surface-variant);background-color:transparent;text-align:center;white-space:nowrap;text-overflow:clip;transition:font-size .2s ease,background-color .15s ease,border-color .15s ease,color .15s ease}.c-id.selected{background-color:var(--mat-sys-primary);border-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { windowWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowWidth", required: false }] }], emSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "emSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", required: false }] }] } });
 
 /**