integra-ng 21.0.21 → 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 +45 -2
- 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
|
}, {
|