@m1z23r/ngx-ui 1.1.31 → 1.1.32
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.
|
@@ -6030,10 +6030,14 @@ class TemplateInputComponent {
|
|
|
6030
6030
|
inputId = computed(() => this.id() || this.generatedId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
6031
6031
|
mirrorRef = viewChild('mirror', ...(ngDevMode ? [{ debugName: "mirrorRef" }] : []));
|
|
6032
6032
|
inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
|
|
6033
|
+
popoverRef;
|
|
6034
|
+
hostRef = inject(ElementRef);
|
|
6035
|
+
positionCleanup = null;
|
|
6036
|
+
currentSpanRect = null;
|
|
6037
|
+
isPortaled = false;
|
|
6033
6038
|
// Popover state
|
|
6034
6039
|
popoverVisible = signal(false, ...(ngDevMode ? [{ debugName: "popoverVisible" }] : []));
|
|
6035
|
-
|
|
6036
|
-
popoverLeft = signal(0, ...(ngDevMode ? [{ debugName: "popoverLeft" }] : []));
|
|
6040
|
+
openAbove = signal(true, ...(ngDevMode ? [{ debugName: "openAbove" }] : []));
|
|
6037
6041
|
popoverText = signal('', ...(ngDevMode ? [{ debugName: "popoverText" }] : []));
|
|
6038
6042
|
popoverVarKey = signal('', ...(ngDevMode ? [{ debugName: "popoverVarKey" }] : []));
|
|
6039
6043
|
popoverContext = computed(() => {
|
|
@@ -6127,13 +6131,19 @@ class TemplateInputComponent {
|
|
|
6127
6131
|
const entry = vars.find(v => v.key === varKey);
|
|
6128
6132
|
this.popoverVarKey.set(varKey);
|
|
6129
6133
|
this.popoverText.set(entry ? (entry.value || varKey) : varKey);
|
|
6130
|
-
this.
|
|
6131
|
-
this.popoverLeft.set(spanRect.left + spanRect.width / 2);
|
|
6134
|
+
this.currentSpanRect = spanRect;
|
|
6132
6135
|
this.popoverVisible.set(true);
|
|
6136
|
+
if (!this.isPortaled) {
|
|
6137
|
+
this.portalPopover();
|
|
6138
|
+
}
|
|
6139
|
+
else {
|
|
6140
|
+
this.updatePopoverPosition();
|
|
6141
|
+
}
|
|
6133
6142
|
}
|
|
6134
6143
|
closePopover() {
|
|
6135
6144
|
this.cancelHide();
|
|
6136
6145
|
this.popoverVisible.set(false);
|
|
6146
|
+
this.unportalPopover();
|
|
6137
6147
|
if (this.hoveredVar !== null) {
|
|
6138
6148
|
this.hoveredVar = null;
|
|
6139
6149
|
this.variableHover.emit(null);
|
|
@@ -6190,17 +6200,114 @@ class TemplateInputComponent {
|
|
|
6190
6200
|
this.renderer.setProperty(style, 'textContent', TemplateInputComponent.STYLE_CONTENT);
|
|
6191
6201
|
this.renderer.appendChild(document.head, style);
|
|
6192
6202
|
}
|
|
6203
|
+
portalPopover() {
|
|
6204
|
+
const el = this.popoverRef.nativeElement;
|
|
6205
|
+
document.body.appendChild(el);
|
|
6206
|
+
el.style.display = 'block';
|
|
6207
|
+
this.isPortaled = true;
|
|
6208
|
+
requestAnimationFrame(() => this.updatePopoverPosition());
|
|
6209
|
+
this.addPositionListeners();
|
|
6210
|
+
}
|
|
6211
|
+
unportalPopover() {
|
|
6212
|
+
if (!this.isPortaled)
|
|
6213
|
+
return;
|
|
6214
|
+
const el = this.popoverRef.nativeElement;
|
|
6215
|
+
el.style.display = '';
|
|
6216
|
+
el.style.position = '';
|
|
6217
|
+
el.style.top = '';
|
|
6218
|
+
el.style.bottom = '';
|
|
6219
|
+
el.style.left = '';
|
|
6220
|
+
el.style.zIndex = '';
|
|
6221
|
+
this.hostRef.nativeElement.appendChild(el);
|
|
6222
|
+
this.isPortaled = false;
|
|
6223
|
+
this.currentSpanRect = null;
|
|
6224
|
+
this.removePositionListeners();
|
|
6225
|
+
}
|
|
6226
|
+
updatePopoverPosition() {
|
|
6227
|
+
const el = this.popoverRef.nativeElement;
|
|
6228
|
+
const spanRect = this.getCurrentSpanRect() ?? this.currentSpanRect;
|
|
6229
|
+
if (!spanRect)
|
|
6230
|
+
return;
|
|
6231
|
+
this.currentSpanRect = spanRect;
|
|
6232
|
+
const gap = 6;
|
|
6233
|
+
const edgePadding = 8;
|
|
6234
|
+
const spaceAbove = spanRect.top;
|
|
6235
|
+
const spaceBelow = window.innerHeight - spanRect.bottom;
|
|
6236
|
+
const popoverHeight = el.offsetHeight;
|
|
6237
|
+
const above = spaceAbove >= popoverHeight + gap || spaceAbove >= spaceBelow;
|
|
6238
|
+
this.openAbove.set(above);
|
|
6239
|
+
el.style.position = 'fixed';
|
|
6240
|
+
el.style.zIndex = '10000';
|
|
6241
|
+
if (above) {
|
|
6242
|
+
el.style.top = '';
|
|
6243
|
+
el.style.bottom = `${window.innerHeight - spanRect.top + gap}px`;
|
|
6244
|
+
}
|
|
6245
|
+
else {
|
|
6246
|
+
el.style.top = `${spanRect.bottom + gap}px`;
|
|
6247
|
+
el.style.bottom = '';
|
|
6248
|
+
}
|
|
6249
|
+
// Horizontal: center on span, clamp to viewport
|
|
6250
|
+
const centerX = spanRect.left + spanRect.width / 2;
|
|
6251
|
+
const popoverWidth = el.offsetWidth;
|
|
6252
|
+
let left = centerX - popoverWidth / 2;
|
|
6253
|
+
left = Math.max(edgePadding, Math.min(left, window.innerWidth - popoverWidth - edgePadding));
|
|
6254
|
+
el.style.left = `${left}px`;
|
|
6255
|
+
}
|
|
6256
|
+
getCurrentSpanRect() {
|
|
6257
|
+
const mirrorEl = this.mirrorRef()?.nativeElement;
|
|
6258
|
+
if (!mirrorEl)
|
|
6259
|
+
return null;
|
|
6260
|
+
const varKey = this.popoverVarKey();
|
|
6261
|
+
if (!varKey)
|
|
6262
|
+
return null;
|
|
6263
|
+
const spans = mirrorEl.querySelectorAll('.ui-tmpl__var');
|
|
6264
|
+
for (const span of spans) {
|
|
6265
|
+
const text = (span.textContent || '').replace(/^\{\{|\}\}$/g, '');
|
|
6266
|
+
if (text === varKey) {
|
|
6267
|
+
return span.getBoundingClientRect();
|
|
6268
|
+
}
|
|
6269
|
+
}
|
|
6270
|
+
return null;
|
|
6271
|
+
}
|
|
6272
|
+
onPositionUpdate = () => {
|
|
6273
|
+
if (this.isPortaled && this.popoverVisible()) {
|
|
6274
|
+
this.updatePopoverPosition();
|
|
6275
|
+
}
|
|
6276
|
+
};
|
|
6277
|
+
addPositionListeners() {
|
|
6278
|
+
window.addEventListener('scroll', this.onPositionUpdate, true);
|
|
6279
|
+
window.addEventListener('resize', this.onPositionUpdate);
|
|
6280
|
+
this.positionCleanup = () => {
|
|
6281
|
+
window.removeEventListener('scroll', this.onPositionUpdate, true);
|
|
6282
|
+
window.removeEventListener('resize', this.onPositionUpdate);
|
|
6283
|
+
};
|
|
6284
|
+
}
|
|
6285
|
+
removePositionListeners() {
|
|
6286
|
+
if (this.positionCleanup) {
|
|
6287
|
+
this.positionCleanup();
|
|
6288
|
+
this.positionCleanup = null;
|
|
6289
|
+
}
|
|
6290
|
+
}
|
|
6193
6291
|
ngOnDestroy() {
|
|
6194
6292
|
this.cancelHide();
|
|
6195
|
-
|
|
6293
|
+
// Remove from body if still portaled
|
|
6294
|
+
if (this.isPortaled) {
|
|
6295
|
+
const el = this.popoverRef.nativeElement;
|
|
6296
|
+
el.remove();
|
|
6297
|
+
this.removePositionListeners();
|
|
6298
|
+
this.isPortaled = false;
|
|
6299
|
+
}
|
|
6196
6300
|
}
|
|
6197
6301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
6198
|
-
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 }], 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
|
|
6302
|
+
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 });
|
|
6199
6303
|
}
|
|
6200
6304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, decorators: [{
|
|
6201
6305
|
type: Component,
|
|
6202
|
-
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
|
|
6203
|
-
}], 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 }] }]
|
|
6306
|
+
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"] }]
|
|
6307
|
+
}], 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: [{
|
|
6308
|
+
type: ViewChild,
|
|
6309
|
+
args: ['popoverRef', { static: true }]
|
|
6310
|
+
}] } });
|
|
6204
6311
|
|
|
6205
6312
|
/*
|
|
6206
6313
|
* Public API Surface of @m1z23r/ngx-ui
|