integra-ng 21.0.19 → 21.0.22
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.
- package/fesm2022/integra-ng.mjs +59 -9
- package/fesm2022/integra-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/types/integra-ng.d.ts +15 -0
package/fesm2022/integra-ng.mjs
CHANGED
|
@@ -938,12 +938,55 @@ class IInputText {
|
|
|
938
938
|
: 'Invalid value';
|
|
939
939
|
}
|
|
940
940
|
}
|
|
941
|
+
/**
|
|
942
|
+
* Checks if the input has a value (works for all input types including number)
|
|
943
|
+
* @internal
|
|
944
|
+
*/
|
|
945
|
+
get hasValue() {
|
|
946
|
+
if (this.value === null || this.value === undefined)
|
|
947
|
+
return false;
|
|
948
|
+
if (typeof this.value === 'string')
|
|
949
|
+
return this.value.length > 0;
|
|
950
|
+
return true; // For numbers including 0
|
|
951
|
+
}
|
|
952
|
+
/**
|
|
953
|
+
* Increment number input value
|
|
954
|
+
* @internal
|
|
955
|
+
*/
|
|
956
|
+
incrementNumber(inputElement) {
|
|
957
|
+
const step = parseFloat(inputElement.step) || 1;
|
|
958
|
+
const currentValue = parseFloat(this.value || '0');
|
|
959
|
+
const newValue = currentValue + step;
|
|
960
|
+
// Check max constraint if exists
|
|
961
|
+
if (inputElement.max && newValue > parseFloat(inputElement.max)) {
|
|
962
|
+
return;
|
|
963
|
+
}
|
|
964
|
+
this.value = newValue.toString();
|
|
965
|
+
this.onChange(this.value);
|
|
966
|
+
inputElement.value = this.value;
|
|
967
|
+
}
|
|
968
|
+
/**
|
|
969
|
+
* Decrement number input value
|
|
970
|
+
* @internal
|
|
971
|
+
*/
|
|
972
|
+
decrementNumber(inputElement) {
|
|
973
|
+
const step = parseFloat(inputElement.step) || 1;
|
|
974
|
+
const currentValue = parseFloat(this.value || '0');
|
|
975
|
+
const newValue = currentValue - step;
|
|
976
|
+
// Check min constraint if exists
|
|
977
|
+
if (inputElement.min && newValue < parseFloat(inputElement.min)) {
|
|
978
|
+
return;
|
|
979
|
+
}
|
|
980
|
+
this.value = newValue.toString();
|
|
981
|
+
this.onChange(this.value);
|
|
982
|
+
inputElement.value = this.value;
|
|
983
|
+
}
|
|
941
984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IInputText, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n [id]=\"id || componentId\"\n [type]=\"type\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated ||
|
|
985
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === 'number' && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-secondary)}.i-input[disabled]{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}Ch .i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
|
|
943
986
|
}
|
|
944
987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IInputText, decorators: [{
|
|
945
988
|
type: Component,
|
|
946
|
-
args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n [id]=\"id || componentId\"\n [type]=\"type\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated ||
|
|
989
|
+
args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n class=\"i-input-wrapper\"\n [class.invalid]=\"showErrors\"\n [class.i-input--fluid]=\"fluid\"\n [class.i-input--no-float]=\"!useFloatLabel\"\n [attr.id]=\"componentId\"\n>\n <div\n [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n class=\"i-input-container\"\n [class.has-icon]=\"icon\"\n >\n <div class=\"i-input-icon-wrapper\">\n @if (icon) {\n <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n </span>\n }\n <input\n #inputElement\n [id]=\"id || componentId\"\n [type]=\"type\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hideText ? '' : value || ''\"\n (input)=\"handleInput($event)\"\n (blur)=\"touch()\"\n [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n class=\"i-input\"\n [class.has-icon]=\"icon\"\n [class.hide-text]=\"hideText\"\n [class.readonly]=\"readonly\"\n [class.component-border]=\"backgroundStyle === 'component'\"\n [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n tooltipPosition=\"below\"\n [tooltipDelay]=\"100\"\n />\n @if (type === 'number' && !disabled && !readonly) {\n <div class=\"i-input-spinners\">\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-up\"\n (click)=\"incrementNumber(inputElement)\"\n [attr.aria-label]=\"'Increment ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-up\"></i>\n </button>\n <button\n type=\"button\"\n class=\"i-input-spinner-button i-input-spinner-down\"\n (click)=\"decrementNumber(inputElement)\"\n [attr.aria-label]=\"'Decrement ' + label\"\n tabindex=\"-1\"\n >\n <i class=\"pi pi-chevron-down\"></i>\n </button>\n </div>\n }\n </div>\n @if (useFloatLabel) {\n <label\n [for]=\"id || componentId\"\n class=\"i-label\"\n [class.floated]=\"forceFloated || hasValue\"\n >{{ label }}</label\n >\n }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-secondary)}.i-input[disabled]{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}Ch .i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"] }]
|
|
947
990
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
948
991
|
type: Optional
|
|
949
992
|
}, {
|
|
@@ -2103,11 +2146,11 @@ class IDialogActions {
|
|
|
2103
2146
|
this.submitEvent.emit();
|
|
2104
2147
|
}
|
|
2105
2148
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity", showCancel: "showCancel", showSubmit: "showSubmit", submitDisabled: "submitDisabled" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n
|
|
2149
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity", showCancel: "showCancel", showSubmit: "showSubmit", submitDisabled: "submitDisabled" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n }\n @if (showSubmit) {\n <i-button\n [outlined]=\"true\"\n [severity]=\"severity\"\n [disabled]=\"submitDisabled\"\n (click)=\"onSubmit()\"\n >{{ submitLabel }}</i-button\n >\n }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
|
|
2107
2150
|
}
|
|
2108
2151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, decorators: [{
|
|
2109
2152
|
type: Component,
|
|
2110
|
-
args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n
|
|
2153
|
+
args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n @if (showCancel) {\n <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n cancelLabel\n }}</i-button>\n }\n @if (showSubmit) {\n <i-button\n [outlined]=\"true\"\n [severity]=\"severity\"\n [disabled]=\"submitDisabled\"\n (click)=\"onSubmit()\"\n >{{ submitLabel }}</i-button\n >\n }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"] }]
|
|
2111
2154
|
}], propDecorators: { submitLabel: [{
|
|
2112
2155
|
type: Input
|
|
2113
2156
|
}], cancelLabel: [{
|
|
@@ -2383,7 +2426,12 @@ class IDialog extends AbstractDialog {
|
|
|
2383
2426
|
* @internal
|
|
2384
2427
|
*/
|
|
2385
2428
|
onOverlayClick(event) {
|
|
2386
|
-
if (
|
|
2429
|
+
// Check if click was directly on overlay (not on dialog container or its children)
|
|
2430
|
+
const target = event.target;
|
|
2431
|
+
const overlay = event.currentTarget;
|
|
2432
|
+
if (this.modal &&
|
|
2433
|
+
this.closable &&
|
|
2434
|
+
target === overlay) {
|
|
2387
2435
|
this.hide();
|
|
2388
2436
|
}
|
|
2389
2437
|
}
|
|
@@ -2435,11 +2483,11 @@ class IDialog extends AbstractDialog {
|
|
|
2435
2483
|
this.cdr.detectChanges();
|
|
2436
2484
|
}
|
|
2437
2485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"currentWidth || width\"\n [style.height]=\"currentHeight || height\"\n
|
|
2486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"currentWidth || width\"\n [style.height]=\"currentHeight || height\"\n >\n <i-card\n [title]=\"header\"\n [closable]=\"closable\"\n [fullHeight]=\"true\"\n (closeCard)=\"onCloseClick()\"\n >\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n <!-- Footer content -->\n <ng-content slot=\"footer\" select=\"[slot='footer']\"></ng-content>\n </i-card>\n </div>\n </div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
|
|
2439
2487
|
}
|
|
2440
2488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, decorators: [{
|
|
2441
2489
|
type: Component,
|
|
2442
|
-
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"currentWidth || width\"\n [style.height]=\"currentHeight || height\"\n
|
|
2490
|
+
args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n <div\n class=\"i-dialog-overlay\"\n (click)=\"onOverlayClick($event)\"\n [attr.id]=\"componentId\"\n >\n <div\n #dialogElement\n class=\"i-dialog-container\"\n [style.width]=\"currentWidth || width\"\n [style.height]=\"currentHeight || height\"\n >\n <i-card\n [title]=\"header\"\n [closable]=\"closable\"\n [fullHeight]=\"true\"\n (closeCard)=\"onCloseClick()\"\n >\n <!-- Main content -->\n <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n <!-- Footer content -->\n <ng-content slot=\"footer\" select=\"[slot='footer']\"></ng-content>\n </i-card>\n </div>\n </div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"] }]
|
|
2443
2491
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dialogElement: [{
|
|
2444
2492
|
type: ViewChild,
|
|
2445
2493
|
args: ['dialogElement', { static: false }]
|
|
@@ -4740,7 +4788,8 @@ class IMultiSelect {
|
|
|
4740
4788
|
* @internal
|
|
4741
4789
|
*/
|
|
4742
4790
|
onDocumentClick(event) {
|
|
4743
|
-
if (this.
|
|
4791
|
+
if (this.isOpen &&
|
|
4792
|
+
this.dropdownRef &&
|
|
4744
4793
|
!this.dropdownRef.nativeElement.contains(event.target)) {
|
|
4745
4794
|
this.isOpen = false;
|
|
4746
4795
|
this.filterValue.set('');
|
|
@@ -5656,7 +5705,8 @@ class ISelect {
|
|
|
5656
5705
|
* @internal
|
|
5657
5706
|
*/
|
|
5658
5707
|
onDocumentClick(event) {
|
|
5659
|
-
if (this.
|
|
5708
|
+
if (this.isOpen &&
|
|
5709
|
+
this.dropdownRef &&
|
|
5660
5710
|
!this.dropdownRef.nativeElement.contains(event.target)) {
|
|
5661
5711
|
this.isOpen = false;
|
|
5662
5712
|
this.filterValue.set('');
|