@m1z23r/ngx-ui 1.1.34 → 1.1.35

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -6216,6 +6216,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     standalone: true,
                 }]
         }] });
+/** Directive to mark suffix content (buttons, icons, etc.) */
+class TemplateInputSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TemplateInputSuffixDirective, isStandalone: true, selector: "[uiTemplateInputSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTemplateInputSuffix]',
+                    standalone: true,
+                }]
+        }] });
 class TemplateInputComponent {
     renderer;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -6241,6 +6253,12 @@ class TemplateInputComponent {
     variableHover = output();
     /** Custom popover template for variables. Receives VariablePopoverContext. */
     popoverTemplate = contentChild(VariablePopoverDirective, { ...(ngDevMode ? { debugName: "popoverTemplate" } : {}), read: TemplateRef });
+    /** Detect if suffix content is projected */
+    hasSuffix = contentChildren(TemplateInputSuffixDirective, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : []));
+    suffixRef = viewChild('suffixEl', ...(ngDevMode ? [{ debugName: "suffixRef" }] : []));
+    /** Computed padding-right based on suffix width */
+    suffixPadding = signal(0, ...(ngDevMode ? [{ debugName: "suffixPadding" }] : []));
+    resizeObserver = null;
     static nextId = 0;
     generatedId = `ui-template-input-${++TemplateInputComponent.nextId}`;
     inputId = computed(() => this.id() || this.generatedId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
@@ -6274,6 +6292,29 @@ class TemplateInputComponent {
         this.renderer = renderer;
         this.injectStyles();
     }
+    ngAfterViewInit() {
+        this.observeSuffix();
+    }
+    observeSuffix() {
+        const suffixEl = this.suffixRef()?.nativeElement;
+        if (!suffixEl)
+            return;
+        this.updateSuffixPadding(suffixEl);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateSuffixPadding(suffixEl);
+        });
+        this.resizeObserver.observe(suffixEl);
+    }
+    updateSuffixPadding(el) {
+        const width = el.offsetWidth;
+        if (width > 0) {
+            // Add small gap between content and suffix
+            this.suffixPadding.set(width + 8);
+        }
+        else {
+            this.suffixPadding.set(0);
+        }
+    }
     highlightedHtml = computed(() => {
         const text = this.value();
         if (!text)
@@ -6513,14 +6554,19 @@ class TemplateInputComponent {
             this.removePositionListeners();
             this.isPortaled = false;
         }
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TemplateInputComponent, isStandalone: true, selector: "ui-template-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", variables: "variablesChange", variableHover: "variableHover" }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: VariablePopoverDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "mirrorRef", first: true, predicate: ["mirror"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow:hidden;pointer-events:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TemplateInputComponent, isStandalone: true, selector: "ui-template-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", variables: "variablesChange", variableHover: "variableHover" }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: VariablePopoverDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "hasSuffix", predicate: TemplateInputSuffixDirective, isSignal: true }], viewQueries: [{ propertyName: "suffixRef", first: true, predicate: ["suffixEl"], descendants: true, isSignal: true }, { propertyName: "mirrorRef", first: true, predicate: ["mirror"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n    <div class=\"ui-template-input__suffix\" #suffixEl>\n      <ng-content select=\"[uiTemplateInputSuffix]\" />\n    </div>\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow-x:auto;overflow-y:hidden;pointer-events:none;scrollbar-width:none;-ms-overflow-style:none}.ui-template-input__mirror::-webkit-scrollbar{display:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input__suffix{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--ui-spacing-xs);padding-right:var(--ui-spacing-sm);pointer-events:auto}.ui-template-input__suffix:empty{display:none}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-template-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow:hidden;pointer-events:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: true }] }, { type: i0.Output, args: ["variablesChange"] }], variableHover: [{ type: i0.Output, args: ["variableHover"] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VariablePopoverDirective), { ...{ read: TemplateRef }, isSignal: true }] }], mirrorRef: [{ type: i0.ViewChild, args: ['mirror', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], popoverRef: [{
+            args: [{ selector: 'ui-template-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n    <div class=\"ui-template-input__suffix\" #suffixEl>\n      <ng-content select=\"[uiTemplateInputSuffix]\" />\n    </div>\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow-x:auto;overflow-y:hidden;pointer-events:none;scrollbar-width:none;-ms-overflow-style:none}.ui-template-input__mirror::-webkit-scrollbar{display:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input__suffix{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--ui-spacing-xs);padding-right:var(--ui-spacing-sm);pointer-events:auto}.ui-template-input__suffix:empty{display:none}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: true }] }, { type: i0.Output, args: ["variablesChange"] }], variableHover: [{ type: i0.Output, args: ["variableHover"] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VariablePopoverDirective), { ...{ read: TemplateRef }, isSignal: true }] }], hasSuffix: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateInputSuffixDirective), { isSignal: true }] }], suffixRef: [{ type: i0.ViewChild, args: ['suffixEl', { isSignal: true }] }], mirrorRef: [{ type: i0.ViewChild, args: ['mirror', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], popoverRef: [{
                 type: ViewChild,
                 args: ['popoverRef', { static: true }]
             }] } });
@@ -6534,5 +6580,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map