npm - @ng-doc/ui-kit - Versions diffs - 22.0.0-beta.2 → 22.0.0 - Mend

@ng-doc/ui-kit 22.0.0-beta.2 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

package/fesm2022/ng-doc-ui-kit-components-input-wrapper.mjs CHANGED Viewed

@@ -1,54 +1,69 @@
-import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ChangeDetectorRef, HostBinding, ViewChild, ContentChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, viewChild, contentChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocBaseInput } from '@ng-doc/ui-kit/classes/base-input';
 import { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';
 import { NgDocFloatedBorderComponent } from '@ng-doc/ui-kit/components/floated-border';
 import { NgDocWrapperComponent } from '@ng-doc/ui-kit/components/wrapper';
-import { ngDocMakePure } from '@ng-doc/ui-kit/decorators';
 import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
+/**
+ * The frame of a text field: it draws the border and the focus state around an `ngDocInputString`
+ * or `ngDocInputNumber` input, holds content at its left and right, and can show `blurContent`
+ * instead of the text while the field is not being edited.
+ */
 class NgDocInputWrapperComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.blurContent = '';
-        this.blurContext = null;
-        this.align = 'left';
+        /** Content shown instead of the text while the field is not being edited. */
+        this.blurContent = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blurContent" }] : /* istanbul ignore next */ []));
+        /** The `$implicit` context of `blurContent`. */
+        this.blurContext = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blurContext" }] : /* istanbul ignore next */ []));
+        /** Alignment of the text. */
+        this.align = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /** Focus state of the frame. */
+        this.focusCatcher = viewChild.required(NgDocFocusCatcherDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusCatcher" }] : /* istanbul ignore next */ []));
+        this.inputQuery = contentChild(NgDocBaseInput, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputQuery" }] : /* istanbul ignore next */ []));
     }
-    ngAfterViewChecked() {
-        this.changeDetectorRef.markForCheck();
+    /** The input in the frame. */
+    get input() {
+        return this.inputQuery();
     }
-    getBlurContext($implicit) {
-        return { $implicit };
+    /** The input in the frame, as its input host exposes it. */
+    get inputControl() {
+        return this.inputQuery();
     }
+    /** Whether the input is disabled. The control keeps it in a signal, so this is reactive. */
     get disabled() {
         return !!this.inputControl?.disabled;
     }
+    /** Whether the input has a value. */
     inputHasValue() {
         return !!this.inputControl?.hasValue;
     }
+    /**
+     * Whether `blurContent` is shown: the field is not focused (focus changes re-render the frame
+     * through its `focusin`/`focusout` listeners), or it is read-only.
+     */
     get blurContentIsVisible() {
-        return !!this.blurContent && (!this.input?.isFocused || this.input?.isReadonly);
+        return !!this.blurContent() && (!this.input?.isFocused || !!this.input?.isReadonly);
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // Focus events only need to trigger change detection of the frame.
     emptyEvent() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocInputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocInputWrapperComponent, isStandalone: true, selector: "ng-doc-input-wrapper", inputs: { blurContent: "blurContent", blurContext: "blurContext", align: "align" }, host: { properties: { "attr.data-ng-doc-align": "this.align", "attr.data-ng-doc-input-disabled": "this.disabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocInputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocInputWrapperComponent, isStandalone: true, selector: "ng-doc-input-wrapper", inputs: { blurContent: { classPropertyName: "blurContent", publicName: "blurContent", isSignal: true, isRequired: false, transformFunction: null }, blurContext: { classPropertyName: "blurContext", publicName: "blurContext", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-align": "align()", "attr.data-ng-doc-input-disabled": "disabled" } }, providers: [
             {
                 provide: NgDocInputHost,
                 useExisting: NgDocInputWrapperComponent,
             },
-        ], queries: [{ propertyName: "input", first: true, predicate: NgDocBaseInput, descendants: true }, { propertyName: "inputControl", first: true, predicate: NgDocBaseInput, descendants: true }], viewQueries: [{ propertyName: "focusCatcher", first: true, predicate: NgDocFocusCatcherDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-doc-wrapper ngDocFocusCatcher>\n  <ng-doc-floated-border>\n    <label\n      class=\"ng-doc-input-container\"\n      (focusin)=\"emptyEvent()\"\n      (focusout)=\"emptyEvent()\"\n      [class.-input-hidden]=\"blurContentIsVisible\">\n      <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n      <div class=\"ng-doc-original-input\">\n        <ng-content></ng-content>\n        @if (blurContentIsVisible) {\n          <div class=\"ng-doc-blur-container ng-doc-input\">\n            <div class=\"ng-doc-blur-content\">\n              <ng-container\n                *polymorpheusOutlet=\"blurContent as text; context: getBlurContext(blurContext)\">\n                {{ text }}\n              </ng-container>\n            </div>\n          </div>\n        }\n      </div>\n      <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n    </label>\n  </ng-doc-floated-border>\n</ng-doc-wrapper>\n", styles: [":host{position:relative;display:block;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);--ng-doc-icon-width: 40px;--ng-doc-icon-height: var(--ng-doc-input-height)}:host:hover:not([data-ng-doc-input-disabled=true]){--ng-doc-input-border: var(--ng-doc-input-border-hover)}:host:not([data-ng-doc-input-disabled=true]) ::ng-deep .ng-doc-input:read-only{--ng-doc-input-cursor: pointer}:host[data-ng-doc-align=left]{--ng-doc-input-text-align: left}:host[data-ng-doc-align=center]{--ng-doc-input-text-align: center}:host[data-ng-doc-align=right]{--ng-doc-input-text-align: right}:host .ng-doc-input-container{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);background-color:var(--ng-doc-input-background-color);border-radius:var(--ng-doc-floated-border-radius)}:host .ng-doc-input-container:after{position:absolute;content:\"\";left:0;top:0;z-index:2;width:100%;height:100%;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);pointer-events:none}:host .ng-doc-input-container.-input-hidden ::ng-deep input{opacity:0}:host .ng-doc-input-container .ng-doc-original-input{width:100%;padding:var(--ng-doc-base-gutter) var(--ng-doc-input-padding-right) var(--ng-doc-base-gutter) var(--ng-doc-input-padding-left)}:host .ng-doc-input-container .ng-doc-original-input:first-child{padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-original-input:last-child{padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-input,:host .ng-doc-input-container ::ng-deep .ng-doc-input{width:100%;height:100%;overflow:hidden;box-sizing:border-box;outline:none;text-align:var(--ng-doc-input-text-align);border:0;border-radius:var(--ng-doc-floated-border-radius);background-color:transparent;cursor:var(--ng-doc-input-cursor);color:var(--ng-doc-input-color, var(--ng-doc-text));font-family:var(--ng-doc-input-font-family, var(--ng-doc-font-family));font-size:var(--ng-doc-input-font-size, var(--ng-doc-font-size));font-weight:var(--ng-doc-input-font-weight, var(--ng-doc-font-weight))}:host .ng-doc-input-container .ng-doc-input::placeholder,:host .ng-doc-input-container ::ng-deep .ng-doc-input::placeholder{color:var(--ng-doc-text-muted)}:host .ng-doc-input-container .ng-doc-input.-blink,:host .ng-doc-input-container ::ng-deep .ng-doc-input.-blink{animation:blink-animation .3s}@keyframes blink-animation{0%{background-color:rgba(var(--ng-doc-primary-rgb),.1)}to{background-color:initial}}:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-outer-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .ng-doc-input-container{--ng-doc-line-height: 22px}:host .ng-doc-content{--ng-doc-icon-width: 40px;--ng-doc-icon-height: 40px}ng-doc-floated-border{width:var(--ng-doc-input-width);height:var(--ng-doc-input-height)}.ng-doc-button-content{display:flex}.ng-doc-blur-container{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none}.ng-doc-blur-container .ng-doc-blur-content{width:100%;white-space:nowrap;overflow:hidden;padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2));padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}\n"], dependencies: [{ kind: "component", type: NgDocWrapperComponent, selector: "ng-doc-wrapper" }, { kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "component", type: NgDocFloatedBorderComponent, selector: "ng-doc-floated-border" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "inputQuery", first: true, predicate: NgDocBaseInput, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "focusCatcher", first: true, predicate: NgDocFocusCatcherDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-doc-wrapper ngDocFocusCatcher>\n  <ng-doc-floated-border>\n    <label\n      class=\"ng-doc-input-container\"\n      (focusin)=\"emptyEvent()\"\n      (focusout)=\"emptyEvent()\"\n      [class.-input-hidden]=\"blurContentIsVisible\">\n      <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n      <div class=\"ng-doc-original-input\">\n        <ng-content></ng-content>\n        @if (blurContentIsVisible) {\n          <div class=\"ng-doc-blur-container ng-doc-input\">\n            <div class=\"ng-doc-blur-content\">\n              <ng-container\n                *polymorpheusOutlet=\"blurContent() as text; context: { $implicit: blurContext() }\">\n                {{ text }}\n              </ng-container>\n            </div>\n          </div>\n        }\n      </div>\n      <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n    </label>\n  </ng-doc-floated-border>\n</ng-doc-wrapper>\n", styles: [":host{position:relative;display:block;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);--ng-doc-icon-width: 40px;--ng-doc-icon-height: var(--ng-doc-input-height)}:host:hover:not([data-ng-doc-input-disabled=true]){--ng-doc-input-border: var(--ng-doc-input-border-hover)}:host:not([data-ng-doc-input-disabled=true]) ::ng-deep .ng-doc-input:read-only{--ng-doc-input-cursor: pointer}:host[data-ng-doc-align=left]{--ng-doc-input-text-align: left}:host[data-ng-doc-align=center]{--ng-doc-input-text-align: center}:host[data-ng-doc-align=right]{--ng-doc-input-text-align: right}:host .ng-doc-input-container{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);background-color:var(--ng-doc-input-background-color);border-radius:var(--ng-doc-floated-border-radius)}:host .ng-doc-input-container:after{position:absolute;content:\"\";left:0;top:0;z-index:2;width:100%;height:100%;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);pointer-events:none}:host .ng-doc-input-container:has(.ng-doc-input:focus-visible){box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-input-container.-input-hidden ::ng-deep input{opacity:0}:host .ng-doc-input-container .ng-doc-original-input{width:100%;padding:var(--ng-doc-base-gutter) var(--ng-doc-input-padding-right) var(--ng-doc-base-gutter) var(--ng-doc-input-padding-left)}:host .ng-doc-input-container .ng-doc-original-input:first-child{padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-original-input:last-child{padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-input,:host .ng-doc-input-container ::ng-deep .ng-doc-input{width:100%;height:100%;overflow:hidden;box-sizing:border-box;outline:none;text-align:var(--ng-doc-input-text-align);border:0;border-radius:var(--ng-doc-floated-border-radius);background-color:transparent;cursor:var(--ng-doc-input-cursor);color:var(--ng-doc-input-color, var(--ng-doc-text));font-family:var(--ng-doc-input-font-family, var(--ng-doc-font-family));font-size:var(--ng-doc-input-font-size, var(--ng-doc-font-size));font-weight:var(--ng-doc-input-font-weight, var(--ng-doc-font-weight))}:host .ng-doc-input-container .ng-doc-input::placeholder,:host .ng-doc-input-container ::ng-deep .ng-doc-input::placeholder{color:var(--ng-doc-text-muted)}:host .ng-doc-input-container .ng-doc-input.-blink,:host .ng-doc-input-container ::ng-deep .ng-doc-input.-blink{animation:blink-animation .3s}@keyframes blink-animation{0%{background-color:color-mix(in srgb,var(--ng-doc-primary) 10%,transparent)}to{background-color:initial}}:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-outer-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .ng-doc-input-container{--ng-doc-line-height: 22px}:host .ng-doc-content{--ng-doc-icon-width: 40px;--ng-doc-icon-height: 40px}ng-doc-floated-border{width:var(--ng-doc-input-width);height:var(--ng-doc-input-height)}.ng-doc-button-content{display:flex}.ng-doc-blur-container{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none}.ng-doc-blur-container .ng-doc-blur-content{width:100%;white-space:nowrap;overflow:hidden;padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2));padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}\n"], dependencies: [{ kind: "component", type: NgDocWrapperComponent, selector: "ng-doc-wrapper" }, { kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "component", type: NgDocFloatedBorderComponent, selector: "ng-doc-floated-border" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    ngDocMakePure,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Object)
-], NgDocInputWrapperComponent.prototype, "getBlurContext", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocInputWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocInputWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-input-wrapper', providers: [
                         {
@@ -60,29 +75,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         NgDocFocusCatcherDirective,
                         NgDocFloatedBorderComponent,
                         PolymorpheusOutlet,
-                    ], template: "<ng-doc-wrapper ngDocFocusCatcher>\n  <ng-doc-floated-border>\n    <label\n      class=\"ng-doc-input-container\"\n      (focusin)=\"emptyEvent()\"\n      (focusout)=\"emptyEvent()\"\n      [class.-input-hidden]=\"blurContentIsVisible\">\n      <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n      <div class=\"ng-doc-original-input\">\n        <ng-content></ng-content>\n        @if (blurContentIsVisible) {\n          <div class=\"ng-doc-blur-container ng-doc-input\">\n            <div class=\"ng-doc-blur-content\">\n              <ng-container\n                *polymorpheusOutlet=\"blurContent as text; context: getBlurContext(blurContext)\">\n                {{ text }}\n              </ng-container>\n            </div>\n          </div>\n        }\n      </div>\n      <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n    </label>\n  </ng-doc-floated-border>\n</ng-doc-wrapper>\n", styles: [":host{position:relative;display:block;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);--ng-doc-icon-width: 40px;--ng-doc-icon-height: var(--ng-doc-input-height)}:host:hover:not([data-ng-doc-input-disabled=true]){--ng-doc-input-border: var(--ng-doc-input-border-hover)}:host:not([data-ng-doc-input-disabled=true]) ::ng-deep .ng-doc-input:read-only{--ng-doc-input-cursor: pointer}:host[data-ng-doc-align=left]{--ng-doc-input-text-align: left}:host[data-ng-doc-align=center]{--ng-doc-input-text-align: center}:host[data-ng-doc-align=right]{--ng-doc-input-text-align: right}:host .ng-doc-input-container{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);background-color:var(--ng-doc-input-background-color);border-radius:var(--ng-doc-floated-border-radius)}:host .ng-doc-input-container:after{position:absolute;content:\"\";left:0;top:0;z-index:2;width:100%;height:100%;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);pointer-events:none}:host .ng-doc-input-container.-input-hidden ::ng-deep input{opacity:0}:host .ng-doc-input-container .ng-doc-original-input{width:100%;padding:var(--ng-doc-base-gutter) var(--ng-doc-input-padding-right) var(--ng-doc-base-gutter) var(--ng-doc-input-padding-left)}:host .ng-doc-input-container .ng-doc-original-input:first-child{padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-original-input:last-child{padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-input,:host .ng-doc-input-container ::ng-deep .ng-doc-input{width:100%;height:100%;overflow:hidden;box-sizing:border-box;outline:none;text-align:var(--ng-doc-input-text-align);border:0;border-radius:var(--ng-doc-floated-border-radius);background-color:transparent;cursor:var(--ng-doc-input-cursor);color:var(--ng-doc-input-color, var(--ng-doc-text));font-family:var(--ng-doc-input-font-family, var(--ng-doc-font-family));font-size:var(--ng-doc-input-font-size, var(--ng-doc-font-size));font-weight:var(--ng-doc-input-font-weight, var(--ng-doc-font-weight))}:host .ng-doc-input-container .ng-doc-input::placeholder,:host .ng-doc-input-container ::ng-deep .ng-doc-input::placeholder{color:var(--ng-doc-text-muted)}:host .ng-doc-input-container .ng-doc-input.-blink,:host .ng-doc-input-container ::ng-deep .ng-doc-input.-blink{animation:blink-animation .3s}@keyframes blink-animation{0%{background-color:rgba(var(--ng-doc-primary-rgb),.1)}to{background-color:initial}}:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-outer-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .ng-doc-input-container{--ng-doc-line-height: 22px}:host .ng-doc-content{--ng-doc-icon-width: 40px;--ng-doc-icon-height: 40px}ng-doc-floated-border{width:var(--ng-doc-input-width);height:var(--ng-doc-input-height)}.ng-doc-button-content{display:flex}.ng-doc-blur-container{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none}.ng-doc-blur-container .ng-doc-blur-content{width:100%;white-space:nowrap;overflow:hidden;padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2));padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { blurContent: [{
-                type: Input
-            }], blurContext: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-align']
-            }], input: [{
-                type: ContentChild,
-                args: [NgDocBaseInput]
-            }], inputControl: [{
-                type: ContentChild,
-                args: [NgDocBaseInput]
-            }], focusCatcher: [{
-                type: ViewChild,
-                args: [NgDocFocusCatcherDirective, { static: true }]
-            }], getBlurContext: [], disabled: [{
-                type: HostBinding,
-                args: ['attr.data-ng-doc-input-disabled']
-            }] } });
+                    ], host: {
+                        '[attr.data-ng-doc-align]': 'align()',
+                        '[attr.data-ng-doc-input-disabled]': 'disabled',
+                    }, template: "<ng-doc-wrapper ngDocFocusCatcher>\n  <ng-doc-floated-border>\n    <label\n      class=\"ng-doc-input-container\"\n      (focusin)=\"emptyEvent()\"\n      (focusout)=\"emptyEvent()\"\n      [class.-input-hidden]=\"blurContentIsVisible\">\n      <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n      <div class=\"ng-doc-original-input\">\n        <ng-content></ng-content>\n        @if (blurContentIsVisible) {\n          <div class=\"ng-doc-blur-container ng-doc-input\">\n            <div class=\"ng-doc-blur-content\">\n              <ng-container\n                *polymorpheusOutlet=\"blurContent() as text; context: { $implicit: blurContext() }\">\n                {{ text }}\n              </ng-container>\n            </div>\n          </div>\n        }\n      </div>\n      <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n    </label>\n  </ng-doc-floated-border>\n</ng-doc-wrapper>\n", styles: [":host{position:relative;display:block;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);--ng-doc-icon-width: 40px;--ng-doc-icon-height: var(--ng-doc-input-height)}:host:hover:not([data-ng-doc-input-disabled=true]){--ng-doc-input-border: var(--ng-doc-input-border-hover)}:host:not([data-ng-doc-input-disabled=true]) ::ng-deep .ng-doc-input:read-only{--ng-doc-input-cursor: pointer}:host[data-ng-doc-align=left]{--ng-doc-input-text-align: left}:host[data-ng-doc-align=center]{--ng-doc-input-text-align: center}:host[data-ng-doc-align=right]{--ng-doc-input-text-align: right}:host .ng-doc-input-container{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);background-color:var(--ng-doc-input-background-color);border-radius:var(--ng-doc-floated-border-radius)}:host .ng-doc-input-container:after{position:absolute;content:\"\";left:0;top:0;z-index:2;width:100%;height:100%;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);pointer-events:none}:host .ng-doc-input-container:has(.ng-doc-input:focus-visible){box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-input-container.-input-hidden ::ng-deep input{opacity:0}:host .ng-doc-input-container .ng-doc-original-input{width:100%;padding:var(--ng-doc-base-gutter) var(--ng-doc-input-padding-right) var(--ng-doc-base-gutter) var(--ng-doc-input-padding-left)}:host .ng-doc-input-container .ng-doc-original-input:first-child{padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-original-input:last-child{padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-input,:host .ng-doc-input-container ::ng-deep .ng-doc-input{width:100%;height:100%;overflow:hidden;box-sizing:border-box;outline:none;text-align:var(--ng-doc-input-text-align);border:0;border-radius:var(--ng-doc-floated-border-radius);background-color:transparent;cursor:var(--ng-doc-input-cursor);color:var(--ng-doc-input-color, var(--ng-doc-text));font-family:var(--ng-doc-input-font-family, var(--ng-doc-font-family));font-size:var(--ng-doc-input-font-size, var(--ng-doc-font-size));font-weight:var(--ng-doc-input-font-weight, var(--ng-doc-font-weight))}:host .ng-doc-input-container .ng-doc-input::placeholder,:host .ng-doc-input-container ::ng-deep .ng-doc-input::placeholder{color:var(--ng-doc-text-muted)}:host .ng-doc-input-container .ng-doc-input.-blink,:host .ng-doc-input-container ::ng-deep .ng-doc-input.-blink{animation:blink-animation .3s}@keyframes blink-animation{0%{background-color:color-mix(in srgb,var(--ng-doc-primary) 10%,transparent)}to{background-color:initial}}:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-outer-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .ng-doc-input-container{--ng-doc-line-height: 22px}:host .ng-doc-content{--ng-doc-icon-width: 40px;--ng-doc-icon-height: 40px}ng-doc-floated-border{width:var(--ng-doc-input-width);height:var(--ng-doc-input-height)}.ng-doc-button-content{display:flex}.ng-doc-blur-container{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none}.ng-doc-blur-container .ng-doc-blur-content{width:100%;white-space:nowrap;overflow:hidden;padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2));padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}\n"] }]
+        }], propDecorators: { blurContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurContent", required: false }] }], blurContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurContext", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], focusCatcher: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocFocusCatcherDirective), { isSignal: true }] }], inputQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgDocBaseInput), { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-input-wrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-input-wrapper.mjs","sources":["../../../../libs/ui-kit/components/input-wrapper/input-wrapper.component.ts","../../../../libs/ui-kit/components/input-wrapper/input-wrapper.component.html","../../../../libs/ui-kit/components/input-wrapper/ng-doc-ui-kit-components-input-wrapper.ts"],"sourcesContent":["import {\n ~~AfterViewChecked,\n~~ ChangeDetectionStrategy,\n ~~ChangeDetectorRef,\n~~ Component,\n ~~ContentChild~~,\n ElementRef,\n ~~HostBinding,\n~~ inject,\n ~~Input~~,\n ~~ViewChild~~,\n} from '@angular/core';\nimport { NgDocBaseInput } from '@ng-doc/ui-kit/classes/base-input';\nimport { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';\nimport { NgDocFloatedBorderComponent } from '@ng-doc/ui-kit/components/floated-border';\nimport { NgDocWrapperComponent } from '@ng-doc/ui-kit/components/wrapper';\nimport { ~~ngDocMakePure } from '@ng-doc/ui-kit/decorators';\nimport {~~ NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';\nimport { NgDocContextWithImplicit } from '@ng-doc/ui-kit/interfaces';\nimport { NgDocContent, NgDocTextAlign } from '@ng-doc/ui-kit/types';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n@Component({\n selector: 'ng-doc-input-wrapper',\n templateUrl: './input-wrapper.component.html',\n styleUrls: ['./input-wrapper.component.scss'],\n providers: [\n {\n provide: NgDocInputHost,\n useExisting: NgDocInputWrapperComponent,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgDocWrapperComponent,\n NgDocFocusCatcherDirective,\n NgDocFloatedBorderComponent,\n PolymorpheusOutlet,\n ],\n})\nexport class NgDocInputWrapperComponent<T, B = unknown~~>\n~~ implements ~~AfterViewChecked,~~ NgDocInputHost<T~~>\n~~{\n elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n ~~protected~~ ~~changeDetectorRef~~ = ~~inject(ChangeDetectorRef);\~~n\n ~~@Input()\n~~ blurContent: NgDocContent<NgDocContextWithImplicit<B \| null~~>> =~~ '';\n\n ~~@Input()\~~n blurContext: B \| null = null;\n\n ~~@Input()\n @HostBinding('attr~~.~~data-ng-doc-align')\~~n align: ~~NgDocTextAlign~~ = 'left';\n\n ~~@ContentChild~~(~~NgDocBaseInput~~)\n ~~input?:~~ NgDocBaseInput<T~~>;\n\n @ContentChild~~(NgDocBaseInput)\n ~~inputControl?: NgDocBaseInput<T>;\n~~\n ~~@ViewChild(NgDocFocusCatcherDirective,~~ { ~~static:~~ ~~true~~ ~~})\n focusCatcher?:~~ ~~NgDocFocusCatcherDirective;\~~n\n ~~constructor()~~ ~~{}\n\n ngAfterViewChecked~~(): ~~void~~ {\n this.~~changeDetectorRef.markForCheck~~();\n }\n\n ~~@ngDocMakePure\~~n ~~getBlurContext~~(~~$implicit: B \| null~~): ~~NgDocContextWithImplicit~~<B \| ~~null>~~ {\n return ~~{ $implicit }~~;\n }\n\n ~~@HostBinding('attr.data-ng-doc-~~input-disabled~~')\~~n get disabled(): boolean {\n return !!this.inputControl?.disabled;\n }\n\n inputHasValue(): boolean {\n return !!this.inputControl?.hasValue;\n }\n\n get blurContentIsVisible(): boolean {\n return !!this.blurContent && (!this.input?.isFocused \|\| this.input?.isReadonly);\n }\n\n // ~~eslint-disable-next-line~~ ~~@typescript-eslint/no-empty-function~~\n emptyEvent(): void {}\n}\n","<ng-doc-wrapper ngDocFocusCatcher>\n <ng-doc-floated-border>\n <label\n class=\"ng-doc-input-container\"\n (focusin)=\"emptyEvent()\"\n (focusout)=\"emptyEvent()\"\n [class.-input-hidden]=\"blurContentIsVisible\">\n <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n <div class=\"ng-doc-original-input\">\n <ng-content></ng-content>\n @if (blurContentIsVisible) {\n <div class=\"ng-doc-blur-container ng-doc-input\">\n <div class=\"ng-doc-blur-content\">\n <ng-container\n polymorpheusOutlet=\"blurContent as text; context: ~~getBlurContext~~(~~blurContext~~)\">\n {{ text }}\n </ng-container>\n </div>\n </div>\n }\n </div>\n <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n </label>\n </ng-doc-floated-border>\n</ng-doc-wrapper>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;;;;;;MAwCa~~,0BAA0B,CAAA;~~AAyBrC~~,IAAA,WAAA,GAAA;~~AAtBA~~,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC~~;AAC9C~~,~~QAAA,~~IAAA,CAAA,~~iBAAiB~~,GAAG,~~MAAM~~,~~CAAC~~,~~iBAAiB,CAAC~~;~~QAGvD~~,IAAA,CAAA,WAAW,~~GAAqD~~,~~EAAE~~;~~QAGlE~~,IAAA,CAAA,~~WAAW~~,~~GAAa~~,~~IAAI~~;~~QAI5B~~,IAAA,CAAA,~~KAAK~~,~~GAAmB~~,~~MAAM~~;~~IAWf~~;~~IAEf~~,~~kBAAkB~~,GAAA;~~AAChB~~,QAAA,IAAI,CAAC,~~iBAAiB~~,~~CAAC,YAAY,~~EAAE;~~IACvC;~~AAGA,IAAA,~~cAAc~~,~~CAAC~~,~~SAAmB,EAAA~~;~~QAChC~~,OAAO,~~EAAE~~,~~SAAS~~,EAAE;~~IACtB;AAEA~~,IAAA,~~IACI~~,QAAQ,GAAA;AACV,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ;IACtC~~;IAEA~~,aAAa,GAAA;AACX,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ;IACtC;AAEA,IAAA,IAAI,oBAAoB,GAAA;QACtB,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;~~IACjF~~;;~~AAGA~~,IAAA,UAAU,KAAU;~~8GAlDT~~,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,wBAAA,EAAA,~~YAAA~~,EAAA,iCAAA,EAAA,~~eAAA~~,EAAA,EAAA,EAAA,SAAA,~~EAd1B~~;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,cAAc;AACvB,gBAAA,WAAW,EAAE,0BAA0B;AACxC,aAAA;AACF,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,~~OAAA~~,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,~~EAyBa~~,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,~~EAAA~~,EAAA,~~YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,~~IAAA,EAAA,~~SAAA,EAGd,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,~~CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,~~EAGjB~~,0BAA0B,EAAA,WAAA,EAAA,IAAA,EAAA,~~MAAA~~,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EC9DvC~~,~~u5BAyBA~~,EAAA,MAAA,EAAA,CAAA,~~uyHAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDSI~~,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACrB,0BAA0B,EAAA,QAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,2BAA2B,~~kEAC3B~~,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~AAmCpB~~,~~UAAA,CAAA;IADC,aAAa;;;;AAGb,CAAA,EAAA,0BAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA;2FAlCU,~~0BAA0B,EAAA,UAAA,EAAA,CAAA;~~kBAlBtC~~,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAAA,SAAA,EAGrB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,cAAc;AACvB,4BAAA,WAAW,EAAA,0BAA4B;AACxC,yBAAA;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,qBAAqB;wBACrB,0BAA0B;wBAC1B,2BAA2B;wBAC3B,kBAAkB;~~AACnB~~,qBAAA,EAAA,QAAA,EAAA,~~u5BAAA~~,EAAA,MAAA,EAAA,CAAA,~~uyHAAA~~,CAAA,EAAA~~;;sBAQA;;sBAGA;;sBAGA;;sBACA,WAAW~~;~~uBAAC~~,~~wBAAwB;;sBAGpC~~,~~YAAY;uBAAC~~,~~cAAc;;sBAG3B~~,~~YAAY;uBAAC~~,~~cAAc;;sBAG3B~~,~~SAAS;AAAC~~,~~gBAAA~~,IAAA,EAAA,CAAA,0BAA0B,~~EAAE~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~IAAI~~,~~EAAE;;sBActD~~,~~WAAW;uBAAC~~,~~iCAAiC;;;AE5EhD~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-input-wrapper.mjs","sources":["../../../../libs/ui-kit/components/input-wrapper/input-wrapper.component.ts","../../../../libs/ui-kit/components/input-wrapper/input-wrapper.component.html","../../../../libs/ui-kit/components/input-wrapper/ng-doc-ui-kit-components-input-wrapper.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n ElementRef,\n inject,\n input,\n viewChild,\n} from '@angular/core';\nimport { NgDocBaseInput } from '@ng-doc/ui-kit/classes/base-input';\nimport { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';\nimport { NgDocFloatedBorderComponent } from '@ng-doc/ui-kit/components/floated-border';\nimport { NgDocWrapperComponent } from '@ng-doc/ui-kit/components/wrapper';\nimport { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';\nimport { NgDocContextWithImplicit } from '@ng-doc/ui-kit/interfaces';\nimport { NgDocContent, NgDocTextAlign } from '@ng-doc/ui-kit/types';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n/*\n The frame of a text field: it draws the border and the focus state around an `ngDocInputString`\n * or `ngDocInputNumber` input, holds content at its left and right, and can show `blurContent`\n * instead of the text while the field is not being edited.\n /\n@Component({\n selector: 'ng-doc-input-wrapper',\n templateUrl: './input-wrapper.component.html',\n styleUrls: ['./input-wrapper.component.scss'],\n providers: [\n {\n provide: NgDocInputHost,\n useExisting: NgDocInputWrapperComponent,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgDocWrapperComponent,\n NgDocFocusCatcherDirective,\n NgDocFloatedBorderComponent,\n PolymorpheusOutlet,\n ],\n host: {\n '[attr.data-ng-doc-align]': 'align()',\n '[attr.data-ng-doc-input-disabled]': 'disabled',\n },\n})\nexport class NgDocInputWrapperComponent<T, B = unknown> implements NgDocInputHost<T> {\n readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /* Content shown instead of the text while the field is not being edited. /\n readonly blurContent = input<NgDocContent<NgDocContextWithImplicit<B \| null>>>('');\n\n /* The `$implicit` context of `blurContent`. /\n readonly blurContext = input<B \| null>(null);\n\n /* Alignment of the text. /\n readonly align = input<NgDocTextAlign>('left');\n\n /* Focus state of the frame. /\n readonly focusCatcher = viewChild.required(NgDocFocusCatcherDirective);\n\n private readonly inputQuery = contentChild<NgDocBaseInput<T>>(NgDocBaseInput);\n\n /* The input in the frame. /\n get input(): NgDocBaseInput<T> \| undefined {\n return this.inputQuery();\n }\n\n /* The input in the frame, as its input host exposes it. /\n get inputControl(): NgDocBaseInput<T> \| undefined {\n return this.inputQuery();\n }\n\n /* Whether the input is disabled. The control keeps it in a signal, so this is reactive. /\n get disabled(): boolean {\n return !!this.inputControl?.disabled;\n }\n\n /* Whether the input has a value. /\n inputHasValue(): boolean {\n return !!this.inputControl?.hasValue;\n }\n\n /\n Whether `blurContent` is shown: the field is not focused (focus changes re-render the frame\n * through its `focusin`/`focusout` listeners), or it is read-only.\n /\n get blurContentIsVisible(): boolean {\n return !!this.blurContent() && (!this.input?.isFocused \|\| !!this.input?.isReadonly);\n }\n\n // Focus events only need to trigger change detection of the frame.\n\n protected emptyEvent(): void {}\n}\n","<ng-doc-wrapper ngDocFocusCatcher>\n <ng-doc-floated-border>\n <label\n class=\"ng-doc-input-container\"\n (focusin)=\"emptyEvent()\"\n (focusout)=\"emptyEvent()\"\n [class.-input-hidden]=\"blurContentIsVisible\">\n <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n <div class=\"ng-doc-original-input\">\n <ng-content></ng-content>\n @if (blurContentIsVisible) {\n <div class=\"ng-doc-blur-container ng-doc-input\">\n <div class=\"ng-doc-blur-content\">\n <ng-container\n polymorpheusOutlet=\"blurContent() as text; context: { $implicit: blurContext() }\">\n {{ text }}\n </ng-container>\n </div>\n </div>\n }\n </div>\n <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n </label>\n </ng-doc-floated-border>\n</ng-doc-wrapper>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-doc-ui-kit-components-label.mjs CHANGED Viewed

@@ -1,27 +1,25 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
+/** A `label` with a caption above its content. */
 class NgDocLabelComponent {
     constructor() {
-        this.label = '';
-        this.align = 'left';
+        /** The caption: a string or a template. */
+        this.label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'ng-doc-label' });
+        /** Alignment of the caption. */
+        this.align = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocLabelComponent, isStandalone: true, selector: "label[ng-doc-label]", inputs: { label: ["ng-doc-label", "label"], align: "align" }, host: { properties: { "attr.data-ng-doc-align": "this.align" } }, ngImport: i0, template: "@if (label) {\n  <span class=\"ng-doc-label\">\n    <ng-container *polymorpheusOutlet=\"label as text\">{{ text }}</ng-container>\n  </span>\n}\n<span class=\"ng-doc-content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}:host[data-ng-doc-align=right] .ng-doc-label{align-self:flex-end;text-align:end}.ng-doc-label{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;flex-direction:row;pointer-events:auto;margin-bottom:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-content{display:flex;flex-direction:column;align-items:flex-start;width:var(--ng-doc-label-content-width, 100%)}.ng-doc-content>*,.ng-doc-content ::ng-deep>*{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocLabelComponent, isStandalone: true, selector: "label[ng-doc-label]", inputs: { label: { classPropertyName: "label", publicName: "ng-doc-label", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-align": "align()" } }, ngImport: i0, template: "@if (label()) {\n  <span class=\"ng-doc-label\">\n    <ng-container *polymorpheusOutlet=\"label() as text\">{{ text }}</ng-container>\n  </span>\n}\n<span class=\"ng-doc-content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}:host[data-ng-doc-align=right] .ng-doc-label{align-self:flex-end;text-align:end}.ng-doc-label{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;flex-direction:row;pointer-events:auto;margin-bottom:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-content{display:flex;flex-direction:column;align-items:flex-start;width:var(--ng-doc-label-content-width, 100%)}.ng-doc-content>*,.ng-doc-content ::ng-deep>*{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'label[ng-doc-label]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusOutlet], template: "@if (label) {\n  <span class=\"ng-doc-label\">\n    <ng-container *polymorpheusOutlet=\"label as text\">{{ text }}</ng-container>\n  </span>\n}\n<span class=\"ng-doc-content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}:host[data-ng-doc-align=right] .ng-doc-label{align-self:flex-end;text-align:end}.ng-doc-label{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;flex-direction:row;pointer-events:auto;margin-bottom:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-content{display:flex;flex-direction:column;align-items:flex-start;width:var(--ng-doc-label-content-width, 100%)}.ng-doc-content>*,.ng-doc-content ::ng-deep>*{pointer-events:auto}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input,
-                args: ['ng-doc-label']
-            }], align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-align']
-            }] } });
+            args: [{ selector: 'label[ng-doc-label]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusOutlet], host: {
+                        '[attr.data-ng-doc-align]': 'align()',
+                    }, template: "@if (label()) {\n  <span class=\"ng-doc-label\">\n    <ng-container *polymorpheusOutlet=\"label() as text\">{{ text }}</ng-container>\n  </span>\n}\n<span class=\"ng-doc-content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}:host[data-ng-doc-align=right] .ng-doc-label{align-self:flex-end;text-align:end}.ng-doc-label{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;flex-direction:row;pointer-events:auto;margin-bottom:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-content{display:flex;flex-direction:column;align-items:flex-start;width:var(--ng-doc-label-content-width, 100%)}.ng-doc-content>*,.ng-doc-content ::ng-deep>*{pointer-events:auto}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "ng-doc-label", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-label.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-label.mjs","sources":["../../../../libs/ui-kit/components/label/label.component.ts","../../../../libs/ui-kit/components/label/label.component.html","../../../../libs/ui-kit/components/label/ng-doc-ui-kit-components-label.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ~~HostBinding,~~ ~~Input~~ } from '@angular/core';\nimport { NgDocContent, NgDocHorizontalAlign } from '@ng-doc/ui-kit/types';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n@Component({\n selector: 'label[ng-doc-label]',\n templateUrl: './label.component.html',\n styleUrls: ['./label.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [PolymorpheusOutlet],\n~~})\nexport~~ ~~class NgDocLabelComponent~~ {\n ~~@Input(~~'ng-doc-~~label~~')\n ~~label:~~ ~~NgDocContent~~ = ~~'';\n~~\n ~~@Input()\~~n ~~@HostBinding~~('~~attr.data-~~ng-doc-~~align~~')\n align: ~~NgDocHorizontalAlign~~ = 'left';\n}\n","@if (label) {\n <span class=\"ng-doc-label\">\n <ng-container polymorpheusOutlet=\"label as text\">{{ text }}</ng-container>\n </span>\n}\n<span class=\"ng-doc-content\">\n <ng-content></ng-content>\n</span>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAWa,mBAAmB,CAAA;~~AAPhC~~,IAAA,WAAA,GAAA~~;QASE~~,IAAA,CAAA,KAAK,~~GAAiB~~,EAAE~~;QAIxB~~,IAAA,CAAA,KAAK,~~GAAyB~~,MAAM;~~AACrC~~,IAAA;~~8GAPY~~,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,~~CAAA~~,~~cAAA~~,EAAA,OAAA,~~CAAA~~,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,wBAAA,EAAA,~~YAAA~~,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECXhC~~,~~0NAQA~~,EAAA,MAAA,EAAA,CAAA,8pBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDCY~~,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAEjB~~,mBAAmB,EAAA,UAAA,EAAA,CAAA;~~kBAP~~/B,SAAS~~;AACE~~,~~YAAA~~,~~IAAA,~~EAAA,~~CAAA~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~qBAAqB~~,~~mBAGd~~,~~uBAAuB~~,CAAC,~~MAAM,~~EAAA,~~OAAA~~,~~EACtC~~,~~CAAC~~,~~kBAAkB~~,~~CAAC~~,EAAA,QAAA,EAAA,~~0NAAA~~,EAAA,MAAA,EAAA,CAAA,8pBAAA,CAAA,EAAA~~;;sBAG5B,KAAK;uBAAC,cAAc;;sBAGpB;;sBACA,WAAW;uBAAC,wBAAwB~~;;;~~AEhBvC~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-label.mjs","sources":["../../../../libs/ui-kit/components/label/label.component.ts","../../../../libs/ui-kit/components/label/label.component.html","../../../../libs/ui-kit/components/label/ng-doc-ui-kit-components-label.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocContent, NgDocHorizontalAlign } from '@ng-doc/ui-kit/types';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n/** A `label` with a caption above its content. /\n@Component({\n selector: 'label[ng-doc-label]',\n templateUrl: './label.component.html',\n styleUrls: ['./label.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [PolymorpheusOutlet],\n host: {\n '[attr.data-ng-doc-align]': 'align()',\n },\n})\nexport class NgDocLabelComponent {\n /* The caption: a string or a template. /\n readonly label = input<NgDocContent>('', { alias: 'ng-doc-label' });\n\n /* Alignment of the caption. /\n readonly align = input<NgDocHorizontalAlign>('left');\n}\n","@if (label()) {\n <span class=\"ng-doc-label\">\n <ng-container polymorpheusOutlet=\"label() as text\">{{ text }}</ng-container>\n </span>\n}\n<span class=\"ng-doc-content\">\n <ng-content></ng-content>\n</span>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;AAIA;MAWa,mBAAmB,CAAA;AAVhC,IAAA,WAAA,GAAA;;QAYW,IAAA,CAAA,KAAK,GAAG,KAAK,CAAe,EAAE,6EAAI,KAAK,EAAE,cAAc,EAAA,CAAG;;QAG1D,IAAA,CAAA,KAAK,GAAG,KAAK,CAAuB,MAAM;kFAAC;AACrD,IAAA;8GANY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,wBAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfhC,8NAQA,EAAA,MAAA,EAAA,CAAA,8pBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKjB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,WACtC,CAAC,kBAAkB,CAAC,EAAA,IAAA,EACvB;AACJ,wBAAA,0BAA0B,EAAE,SAAS;AACtC,qBAAA,EAAA,QAAA,EAAA,8NAAA,EAAA,MAAA,EAAA,CAAA,8pBAAA,CAAA,EAAA;;;AEbH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-line.mjs CHANGED Viewed

@@ -1,13 +1,16 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+/**
+ * Horizontal divider line.
+ */
 class NgDocLineComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocLineComponent, isStandalone: true, selector: "ng-doc-line", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:100%;height:1px;background-color:var(--ng-doc-base-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocLineComponent, isStandalone: true, selector: "ng-doc-line", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:100%;height:1px;background-color:var(--ng-doc-base-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocLineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-line', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;width:100%;height:1px;background-color:var(--ng-doc-base-3)}\n"] }]
+            args: [{ selector: 'ng-doc-line', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:1px;background-color:var(--ng-doc-base-3)}\n"] }]
         }] });
 /**

package/fesm2022/ng-doc-ui-kit-components-line.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-line.mjs","sources":["../../../../libs/ui-kit/components/line/line.component.ts","../../../../libs/ui-kit/components/line/ng-doc-ui-kit-components-line.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n~~\tselector~~: 'ng-doc-line',\n~~\ttemplate~~: '',\n~~\tstyleUrls~~: ['./line.component.scss'],\n~~\tchangeDetection~~: ChangeDetectionStrategy.OnPush,\n~~\tstandalone: true,\n~~})\nexport class NgDocLineComponent {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;~~MASa~~,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,~~uEALpB~~,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAKA~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;~~kBAP9B~~,SAAS;~~AACC~~,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,~~YACb~~,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,~~cACnC,IAAI,~~EAAA,MAAA,EAAA,CAAA,oFAAA,CAAA,EAAA;;;~~ACPjB~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-line.mjs","sources":["../../../../libs/ui-kit/components/line/line.component.ts","../../../../libs/ui-kit/components/line/ng-doc-ui-kit-components-line.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/*\n Horizontal divider line.\n /\n@Component({\n selector: 'ng-doc-line',\n template: '',\n styleUrls: ['./line.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocLineComponent {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;AAEA;;AAEG;MAOU,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,uEAJnB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAID,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,QAAA,EACb,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,oFAAA,CAAA,EAAA;;;ACTjD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-list.mjs CHANGED Viewed

@@ -1,17 +1,20 @@
 import { ListKeyManager } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { asArray } from '@ng-doc/core/helpers/as-array';
 import { NgDocListHost } from '@ng-doc/ui-kit/classes/list-host';
 import { toElement } from '@ng-doc/ui-kit/helpers';
-import { merge, fromEvent, NEVER } from 'rxjs';
+import { merge, fromEvent, timer, NEVER } from 'rxjs';
 import { takeUntil, delayWhen, repeat, filter } from 'rxjs/operators';
+/**
+ * Keyboard navigation for the options inside it: arrow keys move the active option and Enter
+ * selects it. The keys also work from the list host's origin (for example a combobox input).
+ */
 class NgDocListComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.ngZone = inject(NgZone);
         this.listHost = inject(NgDocListHost, { optional: true });
         this.keyManager = null;
         this.items = new Set();
@@ -20,7 +23,12 @@ class NgDocListComponent {
             : null;
         const list = toElement(this.elementRef);
         merge(fromEvent(list, 'keydown'), origin
-            ? fromEvent(origin, 'keydown').pipe(takeUntil(fromEvent(list, 'keydown')), delayWhen(() => this.ngZone.onStable), repeat())
+            ? fromEvent(origin, 'keydown').pipe(takeUntil(fromEvent(list, 'keydown')),
+            // Handle the key in the next macrotask, once the origin's own handlers and the change
+            // detection they schedule have run. `NgZone.onStable` never emits in a zoneless
+            // application, and waiting for the application to be stable would stall the keys
+            // while any timer or request is pending. The timer is cancelled on destroy.
+            delayWhen(() => timer(0)), repeat())
             : NEVER)
             .pipe(filter((event) => !event.defaultPrevented), takeUntilDestroyed())
             .subscribe((event) => {
@@ -38,20 +46,28 @@ class NgDocListComponent {
                 toElement(this.keyManager?.activeItem.elementRef).scrollIntoView({ block: 'nearest' });
         });
     }
+    /**
+     * Adds an item to the keyboard navigation.
+     * @param item - The item to add.
+     */
     registerItem(item) {
         this.items.add(item);
         this.keyManager?.activeItem?.setInactiveStyles();
         this.keyManager = new ListKeyManager(asArray(this.items)).withVerticalOrientation(true);
     }
+    /**
+     * Removes an item from the keyboard navigation.
+     * @param item - The item to remove.
+     */
     unregisterItem(item) {
         this.items.delete(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocListComponent, isStandalone: true, selector: "ng-doc-list", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocListComponent, isStandalone: true, selector: "ng-doc-list", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ng-doc-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 /**

package/fesm2022/ng-doc-ui-kit-components-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-list.mjs","sources":["../../../../libs/ui-kit/components/list/list.component.ts","../../../../libs/ui-kit/components/list/list.component.html","../../../../libs/ui-kit/components/list/ng-doc-ui-kit-components-list.ts"],"sourcesContent":["import { ListKeyManager } from '@angular/cdk/a11y';\nimport { ChangeDetectionStrategy, Component, ElementRef, inject, ~~NgZone~~ } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocListHost } from '@ng-doc/ui-kit/classes/list-host';\nimport { NgDocListItem } from '@ng-doc/ui-kit/classes/list-item';\nimport { toElement } from '@ng-doc/ui-kit/helpers';\nimport { fromEvent, merge, NEVER } from 'rxjs';\nimport { delayWhen, filter, repeat, takeUntil } from 'rxjs/operators';\n\n@Component({\n selector: 'ng-doc-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n ~~standalone: true,\n~~})\nexport class NgDocListComponent {\n private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private ~~ngZone~~ ~~= inject(NgZone);\n private~~ listHost = inject<NgDocListHost>(NgDocListHost, { optional: true });\n\n private keyManager: ListKeyManager<NgDocListItem> \| null = null;\n private readonly items: Set<NgDocListItem> = new Set<NgDocListItem>();\n\n constructor() {\n const origin: HTMLElement \| null = this.listHost?.listHostOrigin\n ? toElement(this.listHost?.listHostOrigin)\n : null;\n const list: HTMLElement = toElement(this.elementRef);\n\n merge(\n fromEvent(list, 'keydown'),\n origin\n ? fromEvent(origin, 'keydown').pipe(\n takeUntil(fromEvent(list, 'keydown')),\n delayWhen(() => ~~this.ngZone.onStable~~),\n repeat(),\n )\n : NEVER,\n )\n .pipe(\n filter((event: Event) => !event.defaultPrevented),\n takeUntilDestroyed(),\n )\n .subscribe((event: Event) => {\n const typedEvent: KeyboardEvent = event as KeyboardEvent;\n\n switch (typedEvent.key) {\n case 'Enter':\n this.keyManager?.activeItem?.selectByUser();\n\n typedEvent.preventDefault();\n break;\n }\n\n this.keyManager?.activeItem?.setInactiveStyles();\n this.keyManager?.onKeydown(typedEvent);\n this.keyManager?.activeItem?.setActiveStyles();\n\n if (this.keyManager?.activeItem)\n toElement(this.keyManager?.activeItem.elementRef).scrollIntoView({ block: 'nearest' });\n });\n }\n\n registerItem(item: NgDocListItem): void {\n this.items.add(item);\n\n this.keyManager?.activeItem?.setInactiveStyles();\n this.keyManager = new ListKeyManager(asArray(this.items)).withVerticalOrientation(true);\n }\n\n unregisterItem(item: NgDocListItem): void {\n this.items.delete(item);\n }\n}\n","<ng-content></ng-content>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;~~MAiBa~~,kBAAkB,CAAA;~~AAQ7B~~,IAAA,WAAA,GAAA;~~AAPQ~~,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;~~AACxD~~,~~QAAA,~~IAAA,CAAA,~~MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QACvB,IAAA,CAAA,~~QAAQ,GAAG,MAAM,CAAgB,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;~~QAEnE~~,IAAA,CAAA,UAAU,GAAyC,IAAI;AAC9C,QAAA,IAAA,CAAA,KAAK,GAAuB,IAAI,GAAG,EAAiB;AAGnE,QAAA,MAAM,MAAM,GAAuB,IAAI,CAAC,QAAQ,EAAE;cAC9C,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc;cACvC,IAAI;QACR,MAAM,IAAI,GAAgB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAEpD,KAAK,CACH,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,EAC1B;AACE,cAAE,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,CAC/B,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,~~EACrC~~,SAAS,CAAC,MAAM,~~IAAI~~,CAAC,~~MAAM~~,CAAC,~~QAAQ,~~CAAC,~~EACrC~~,MAAM,EAAE;cAEV,KAAK;AAER,aAAA,IAAI,CACH,MAAM,CAAC,CAAC,KAAY,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,EACjD,kBAAkB,EAAE;AAErB,aAAA,SAAS,CAAC,CAAC,KAAY,KAAI;YAC1B,MAAM,UAAU,GAAkB,KAAsB;AAExD,YAAA,QAAQ,UAAU,CAAC,GAAG;AACpB,gBAAA,KAAK,OAAO;AACV,oBAAA,IAAI,CAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE;oBAE3C,UAAU,CAAC,cAAc,EAAE;oBAC3B;;AAGJ,YAAA,IAAI,CAAC,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE;AAChD,YAAA,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC;AACtC,YAAA,IAAI,CAAC,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE;AAE9C,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE,UAAU;AAC7B,gBAAA,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAC1F,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,YAAY,CAAC,IAAmB,EAAA;AAC9B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAEpB,QAAA,IAAI,CAAC,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE;AAChD,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,IAAI,CAAC;IACzF;AAEA,IAAA,cAAc,CAAC,IAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;IACzB;~~8GAzDW~~,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,~~uECjB~~/B,6BACA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FDgBa~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;~~kBAP9B~~,SAAS~~;AACE~~,~~YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,~~aAAa,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,~~cACnC,IAAI,~~EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;~~AEflB~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-list.mjs","sources":["../../../../libs/ui-kit/components/list/list.component.ts","../../../../libs/ui-kit/components/list/list.component.html","../../../../libs/ui-kit/components/list/ng-doc-ui-kit-components-list.ts"],"sourcesContent":["import { ListKeyManager } from '@angular/cdk/a11y';\nimport { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocListHost } from '@ng-doc/ui-kit/classes/list-host';\nimport { NgDocListItem } from '@ng-doc/ui-kit/classes/list-item';\nimport { toElement } from '@ng-doc/ui-kit/helpers';\nimport { fromEvent, merge, NEVER, timer } from 'rxjs';\nimport { delayWhen, filter, repeat, takeUntil } from 'rxjs/operators';\n\n/*\n Keyboard navigation for the options inside it: arrow keys move the active option and Enter\n * selects it. The keys also work from the list host's origin (for example a combobox input).\n /\n@Component({\n selector: 'ng-doc-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocListComponent {\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly listHost = inject<NgDocListHost>(NgDocListHost, { optional: true });\n\n private keyManager: ListKeyManager<NgDocListItem> \| null = null;\n private readonly items: Set<NgDocListItem> = new Set<NgDocListItem>();\n\n constructor() {\n const origin: HTMLElement \| null = this.listHost?.listHostOrigin\n ? toElement(this.listHost?.listHostOrigin)\n : null;\n const list: HTMLElement = toElement(this.elementRef);\n\n merge(\n fromEvent(list, 'keydown'),\n origin\n ? fromEvent(origin, 'keydown').pipe(\n takeUntil(fromEvent(list, 'keydown')),\n // Handle the key in the next macrotask, once the origin's own handlers and the change\n // detection they schedule have run. `NgZone.onStable` never emits in a zoneless\n // application, and waiting for the application to be stable would stall the keys\n // while any timer or request is pending. The timer is cancelled on destroy.\n delayWhen(() => timer(0)),\n repeat(),\n )\n : NEVER,\n )\n .pipe(\n filter((event: Event) => !event.defaultPrevented),\n takeUntilDestroyed(),\n )\n .subscribe((event: Event) => {\n const typedEvent: KeyboardEvent = event as KeyboardEvent;\n\n switch (typedEvent.key) {\n case 'Enter':\n this.keyManager?.activeItem?.selectByUser();\n\n typedEvent.preventDefault();\n break;\n }\n\n this.keyManager?.activeItem?.setInactiveStyles();\n this.keyManager?.onKeydown(typedEvent);\n this.keyManager?.activeItem?.setActiveStyles();\n\n if (this.keyManager?.activeItem)\n toElement(this.keyManager?.activeItem.elementRef).scrollIntoView({ block: 'nearest' });\n });\n }\n\n /\n Adds an item to the keyboard navigation.\n * @param item - The item to add.\n /\n registerItem(item: NgDocListItem): void {\n this.items.add(item);\n\n this.keyManager?.activeItem?.setInactiveStyles();\n this.keyManager = new ListKeyManager(asArray(this.items)).withVerticalOrientation(true);\n }\n\n /\n Removes an item from the keyboard navigation.\n * @param item - The item to remove.\n /\n unregisterItem(item: NgDocListItem): void {\n this.items.delete(item);\n }\n}\n","<ng-content></ng-content>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-doc-ui-kit-components-magnifier-controller.mjs CHANGED Viewed

@@ -3,15 +3,19 @@ import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';
 import { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';
+/**
+ * Buttons that pan, zoom and reset an `ng-doc-magnifier`.
+ */
 class MagnifierControllerComponent {
     constructor() {
+        /** The magnifier to control. */
         this.magnifier = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "magnifier" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MagnifierControllerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: MagnifierControllerComponent, isStandalone: true, selector: "ng-doc-magnifier-controller", inputs: { magnifier: { classPropertyName: "magnifier", publicName: "magnifier", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-up\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementY(50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-zoom-in\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().zoom(200)\">\n    <ng-doc-icon icon=\"zoom-in\" />\n  </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-left\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementX(50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-center\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().reset()\">\n    <ng-doc-icon icon=\"maximize\" />\n  </button>\n  <button\n    class=\"ng-doc-button-right\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementX(-50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-down\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementY(-50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-zoom-out\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().zoom(-200)\">\n    <ng-doc-icon icon=\"zoom-out\" />\n  </button>\n</div>\n", styles: [":host{display:inline-flex;flex-direction:column;gap:var(--ng-doc-base-gutter)}:host .ng-doc-controls-row{display:flex;gap:var(--ng-doc-base-gutter);justify-content:center}:host .ng-doc-controls-row:first-child,:host .ng-doc-controls-row:last-child{justify-content:flex-end}:host button.ng-doc-button-up ng-doc-icon[icon=chevron-right]{transform:rotate(270deg)}:host button.ng-doc-button-down ng-doc-icon[icon=chevron-right]{transform:rotate(90deg)}:host button.ng-doc-button-left ng-doc-icon[icon=chevron-right]{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MagnifierControllerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: MagnifierControllerComponent, isStandalone: true, selector: "ng-doc-magnifier-controller", inputs: { magnifier: { classPropertyName: "magnifier", publicName: "magnifier", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-up\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementY(50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-zoom-in\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().zoom(200)\">\n    <ng-doc-icon icon=\"zoom-in\" />\n  </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-left\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementX(50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-center\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().reset()\">\n    <ng-doc-icon icon=\"maximize\" />\n  </button>\n  <button\n    class=\"ng-doc-button-right\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementX(-50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-down\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementY(-50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-zoom-out\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().zoom(-200)\">\n    <ng-doc-icon icon=\"zoom-out\" />\n  </button>\n</div>\n", styles: [":host{display:inline-flex;flex-direction:column;gap:var(--ng-doc-base-gutter)}:host .ng-doc-controls-row{display:flex;gap:var(--ng-doc-base-gutter);justify-content:center}:host .ng-doc-controls-row:first-child,:host .ng-doc-controls-row:last-child{justify-content:flex-end}:host button.ng-doc-button-up ng-doc-icon[icon=chevron-right]{transform:rotate(270deg)}:host button.ng-doc-button-down ng-doc-icon[icon=chevron-right]{transform:rotate(90deg)}:host button.ng-doc-button-left ng-doc-icon[icon=chevron-right]{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MagnifierControllerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MagnifierControllerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-magnifier-controller', imports: [NgDocButtonIconComponent, NgDocIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-up\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementY(50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-zoom-in\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().zoom(200)\">\n    <ng-doc-icon icon=\"zoom-in\" />\n  </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-left\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementX(50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-center\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().reset()\">\n    <ng-doc-icon icon=\"maximize\" />\n  </button>\n  <button\n    class=\"ng-doc-button-right\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementX(-50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n  <button\n    class=\"ng-doc-button-down\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().incrementY(-50)\">\n    <ng-doc-icon icon=\"chevron-right\" />\n  </button>\n  <button\n    class=\"ng-doc-button-zoom-out\"\n    ng-doc-button-icon-raised\n    [rounded]=\"false\"\n    (click)=\"magnifier().zoom(-200)\">\n    <ng-doc-icon icon=\"zoom-out\" />\n  </button>\n</div>\n", styles: [":host{display:inline-flex;flex-direction:column;gap:var(--ng-doc-base-gutter)}:host .ng-doc-controls-row{display:flex;gap:var(--ng-doc-base-gutter);justify-content:center}:host .ng-doc-controls-row:first-child,:host .ng-doc-controls-row:last-child{justify-content:flex-end}:host button.ng-doc-button-up ng-doc-icon[icon=chevron-right]{transform:rotate(270deg)}:host button.ng-doc-button-down ng-doc-icon[icon=chevron-right]{transform:rotate(90deg)}:host button.ng-doc-button-left ng-doc-icon[icon=chevron-right]{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { magnifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "magnifier", required: true }] }] } });

package/fesm2022/ng-doc-ui-kit-components-magnifier-controller.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-magnifier-controller.mjs","sources":["../../../../libs/ui-kit/components/magnifier-controller/magnifier-controller.component.ts","../../../../libs/ui-kit/components/magnifier-controller/magnifier-controller.component.html","../../../../libs/ui-kit/components/magnifier-controller/ng-doc-ui-kit-components-magnifier-controller.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocMagnifierComponent } from '@ng-doc/ui-kit/components/magnifier';\n\n@Component({\n selector: 'ng-doc-magnifier-controller',\n imports: [NgDocButtonIconComponent, NgDocIconComponent],\n templateUrl: './magnifier-controller.component.html',\n styleUrl: './magnifier-controller.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MagnifierControllerComponent {\n magnifier = input.required<NgDocMagnifierComponent>();\n}\n","<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-up\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-in\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(200)\">\n <ng-doc-icon icon=\"zoom-in\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-left\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-center\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().reset()\">\n <ng-doc-icon icon=\"maximize\" />\n </button>\n <button\n class=\"ng-doc-button-right\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-down\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-out\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(-200)\">\n <ng-doc-icon icon=\"zoom-out\" />\n </button>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;~~MAYa~~,4BAA4B,CAAA;AAPzC,IAAA,WAAA,GAAA~~;QAQE~~,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ;sFAA2B;~~AACtD~~,IAAA;~~8GAFY~~,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECZzC~~,ogDAyDA,EAAA,MAAA,EAAA,CAAA,6hBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDlDY~~,wBAAwB,uQAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK3C,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;+BACE,6BAA6B,EAAA,OAAA,EAC9B,CAAC,wBAAwB,EAAE,kBAAkB,CAAC,EAAA,eAAA,EAGtC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ogDAAA,EAAA,MAAA,EAAA,CAAA,6hBAAA,CAAA,EAAA;;;~~AEVjD~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-magnifier-controller.mjs","sources":["../../../../libs/ui-kit/components/magnifier-controller/magnifier-controller.component.ts","../../../../libs/ui-kit/components/magnifier-controller/magnifier-controller.component.html","../../../../libs/ui-kit/components/magnifier-controller/ng-doc-ui-kit-components-magnifier-controller.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocButtonIconComponent } from '@ng-doc/ui-kit/components/button-icon';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';\nimport { NgDocMagnifierComponent } from '@ng-doc/ui-kit/components/magnifier';\n\n/*\n Buttons that pan, zoom and reset an `ng-doc-magnifier`.\n /\n@Component({\n selector: 'ng-doc-magnifier-controller',\n imports: [NgDocButtonIconComponent, NgDocIconComponent],\n templateUrl: './magnifier-controller.component.html',\n styleUrl: './magnifier-controller.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MagnifierControllerComponent {\n /* The magnifier to control. /\n readonly magnifier = input.required<NgDocMagnifierComponent>();\n}\n","<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-up\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-in\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(200)\">\n <ng-doc-icon icon=\"zoom-in\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-left\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-center\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().reset()\">\n <ng-doc-icon icon=\"maximize\" />\n </button>\n <button\n class=\"ng-doc-button-right\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementX(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n</div>\n\n<div class=\"ng-doc-controls-row\">\n <button\n class=\"ng-doc-button-down\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().incrementY(-50)\">\n <ng-doc-icon icon=\"chevron-right\" />\n </button>\n <button\n class=\"ng-doc-button-zoom-out\"\n ng-doc-button-icon-raised\n [rounded]=\"false\"\n (click)=\"magnifier().zoom(-200)\">\n <ng-doc-icon icon=\"zoom-out\" />\n </button>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;AAKA;;AAEG;MAQU,4BAA4B,CAAA;AAPzC,IAAA,WAAA,GAAA;;QASW,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ;sFAA2B;AAC/D,IAAA;8GAHY,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfzC,ogDAyDA,EAAA,MAAA,EAAA,CAAA,6hBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED/CY,wBAAwB,uQAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK3C,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;+BACE,6BAA6B,EAAA,OAAA,EAC9B,CAAC,wBAAwB,EAAE,kBAAkB,CAAC,EAAA,eAAA,EAGtC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ogDAAA,EAAA,MAAA,EAAA,CAAA,6hBAAA,CAAA,EAAA;;;AEbjD;;AAEG;;;;"}