@m1z23r/ngx-ui 1.1.35 → 1.1.37
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.
|
@@ -922,6 +922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
922
922
|
class ModalComponent {
|
|
923
923
|
dialogRef = inject(DIALOG_REF, { optional: true });
|
|
924
924
|
elementRef = inject(ElementRef);
|
|
925
|
+
/** Tracks if mousedown started on the backdrop (to prevent close on drag-out) */
|
|
926
|
+
mouseDownOnBackdrop = signal(false, ...(ngDevMode ? [{ debugName: "mouseDownOnBackdrop" }] : []));
|
|
925
927
|
/** Title displayed in the modal header */
|
|
926
928
|
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
927
929
|
/** Modal size preset */
|
|
@@ -951,10 +953,17 @@ class ModalComponent {
|
|
|
951
953
|
this.close();
|
|
952
954
|
}
|
|
953
955
|
}
|
|
956
|
+
onBackdropMouseDown(event) {
|
|
957
|
+
this.mouseDownOnBackdrop.set(event.target === event.currentTarget);
|
|
958
|
+
}
|
|
954
959
|
onBackdropClick(event) {
|
|
955
|
-
if
|
|
960
|
+
// Only close if both mousedown AND mouseup happened on the backdrop
|
|
961
|
+
if (this.mouseDownOnBackdrop() &&
|
|
962
|
+
event.target === event.currentTarget &&
|
|
963
|
+
this.closeOnBackdropClick()) {
|
|
956
964
|
this.close();
|
|
957
965
|
}
|
|
966
|
+
this.mouseDownOnBackdrop.set(false);
|
|
958
967
|
}
|
|
959
968
|
close() {
|
|
960
969
|
this.dialogRef?.close();
|
|
@@ -967,11 +976,11 @@ class ModalComponent {
|
|
|
967
976
|
return classes.join(' ');
|
|
968
977
|
}
|
|
969
978
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
970
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n <div\n class=\"ui-modal__container\"\n [class]=\"containerClasses()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n aria-modal=\"true\"\n >\n @if (title()) {\n <div class=\"ui-modal__header\">\n <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"ui-modal__close\"\n aria-label=\"Close\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"ui-modal__body\">\n <ng-content />\n </div>\n\n <div class=\"ui-modal__footer\">\n <ng-content select=\"[footer]\" />\n </div>\n </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: "<div class=\"ui-modal__backdrop\" (mousedown)=\"onBackdropMouseDown($event)\" (click)=\"onBackdropClick($event)\">\n <div\n class=\"ui-modal__container\"\n [class]=\"containerClasses()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n aria-modal=\"true\"\n >\n @if (title()) {\n <div class=\"ui-modal__header\">\n <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"ui-modal__close\"\n aria-label=\"Close\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"ui-modal__body\">\n <ng-content />\n </div>\n\n <div class=\"ui-modal__footer\">\n <ng-content select=\"[footer]\" />\n </div>\n </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
971
980
|
}
|
|
972
981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, decorators: [{
|
|
973
982
|
type: Component,
|
|
974
|
-
args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n <div\n class=\"ui-modal__container\"\n [class]=\"containerClasses()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n aria-modal=\"true\"\n >\n @if (title()) {\n <div class=\"ui-modal__header\">\n <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"ui-modal__close\"\n aria-label=\"Close\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"ui-modal__body\">\n <ng-content />\n </div>\n\n <div class=\"ui-modal__footer\">\n <ng-content select=\"[footer]\" />\n </div>\n </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
983
|
+
args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (mousedown)=\"onBackdropMouseDown($event)\" (click)=\"onBackdropClick($event)\">\n <div\n class=\"ui-modal__container\"\n [class]=\"containerClasses()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n aria-modal=\"true\"\n >\n @if (title()) {\n <div class=\"ui-modal__header\">\n <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"ui-modal__close\"\n aria-label=\"Close\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"ui-modal__body\">\n <ng-content />\n </div>\n\n <div class=\"ui-modal__footer\">\n <ng-content select=\"[footer]\" />\n </div>\n </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
975
984
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], onEscapePress: [{
|
|
976
985
|
type: HostListener,
|
|
977
986
|
args: ['document:keydown.escape']
|
|
@@ -6259,6 +6268,7 @@ class TemplateInputComponent {
|
|
|
6259
6268
|
/** Computed padding-right based on suffix width */
|
|
6260
6269
|
suffixPadding = signal(0, ...(ngDevMode ? [{ debugName: "suffixPadding" }] : []));
|
|
6261
6270
|
resizeObserver = null;
|
|
6271
|
+
mutationObserver = null;
|
|
6262
6272
|
static nextId = 0;
|
|
6263
6273
|
generatedId = `ui-template-input-${++TemplateInputComponent.nextId}`;
|
|
6264
6274
|
inputId = computed(() => this.id() || this.generatedId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
@@ -6293,21 +6303,35 @@ class TemplateInputComponent {
|
|
|
6293
6303
|
this.injectStyles();
|
|
6294
6304
|
}
|
|
6295
6305
|
ngAfterViewInit() {
|
|
6296
|
-
this.
|
|
6306
|
+
this.setupSuffixObservers();
|
|
6297
6307
|
}
|
|
6298
|
-
|
|
6308
|
+
setupSuffixObservers() {
|
|
6299
6309
|
const suffixEl = this.suffixRef()?.nativeElement;
|
|
6300
6310
|
if (!suffixEl)
|
|
6301
6311
|
return;
|
|
6302
|
-
|
|
6312
|
+
// Initial measurement - wait for layout to complete
|
|
6313
|
+
requestAnimationFrame(() => {
|
|
6314
|
+
this.updateSuffixPadding(suffixEl);
|
|
6315
|
+
});
|
|
6316
|
+
// Watch for size changes
|
|
6303
6317
|
this.resizeObserver = new ResizeObserver(() => {
|
|
6304
6318
|
this.updateSuffixPadding(suffixEl);
|
|
6305
6319
|
});
|
|
6306
6320
|
this.resizeObserver.observe(suffixEl);
|
|
6321
|
+
// Watch for content projection changes (children being added/removed)
|
|
6322
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
6323
|
+
// Need RAF here too since DOM change doesn't mean layout is done
|
|
6324
|
+
requestAnimationFrame(() => {
|
|
6325
|
+
this.updateSuffixPadding(suffixEl);
|
|
6326
|
+
});
|
|
6327
|
+
});
|
|
6328
|
+
this.mutationObserver.observe(suffixEl, { childList: true, subtree: true });
|
|
6307
6329
|
}
|
|
6308
6330
|
updateSuffixPadding(el) {
|
|
6309
|
-
|
|
6310
|
-
|
|
6331
|
+
// Only count width if there are actual children (not just whitespace/comments)
|
|
6332
|
+
const hasContent = el.children.length > 0;
|
|
6333
|
+
if (hasContent) {
|
|
6334
|
+
const width = el.offsetWidth;
|
|
6311
6335
|
// Add small gap between content and suffix
|
|
6312
6336
|
this.suffixPadding.set(width + 8);
|
|
6313
6337
|
}
|
|
@@ -6554,18 +6578,22 @@ class TemplateInputComponent {
|
|
|
6554
6578
|
this.removePositionListeners();
|
|
6555
6579
|
this.isPortaled = false;
|
|
6556
6580
|
}
|
|
6557
|
-
// Clean up
|
|
6581
|
+
// Clean up observers
|
|
6558
6582
|
if (this.resizeObserver) {
|
|
6559
6583
|
this.resizeObserver.disconnect();
|
|
6560
6584
|
this.resizeObserver = null;
|
|
6561
6585
|
}
|
|
6586
|
+
if (this.mutationObserver) {
|
|
6587
|
+
this.mutationObserver.disconnect();
|
|
6588
|
+
this.mutationObserver = null;
|
|
6589
|
+
}
|
|
6562
6590
|
}
|
|
6563
6591
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
6564
|
-
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 [
|
|
6592
|
+
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 [style.--ui-tmpl-suffix-width]=\"suffixPadding() + 'px'\"\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 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{width:calc(100% - var(--ui-tmpl-suffix-width, 0px));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:calc(100% - var(--ui-tmpl-suffix-width, 0px));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-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 });
|
|
6565
6593
|
}
|
|
6566
6594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, decorators: [{
|
|
6567
6595
|
type: Component,
|
|
6568
|
-
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 [
|
|
6596
|
+
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 [style.--ui-tmpl-suffix-width]=\"suffixPadding() + 'px'\"\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 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{width:calc(100% - var(--ui-tmpl-suffix-width, 0px));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:calc(100% - var(--ui-tmpl-suffix-width, 0px));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-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"] }]
|
|
6569
6597
|
}], 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: [{
|
|
6570
6598
|
type: ViewChild,
|
|
6571
6599
|
args: ['popoverRef', { static: true }]
|