cax-design-system 2.7.7 → 2.7.9
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/esm2022/dropdown/dropdown.mjs +3 -3
- package/esm2022/inputtext/inputtext.component.mjs +2 -2
- package/esm2022/multiselect/multiselect.mjs +3 -4
- package/esm2022/sidebar/sidebar.mjs +2 -2
- package/esm2022/treeselect/treeselect.mjs +2 -2
- package/fesm2022/cax-design-system-dropdown.mjs +2 -2
- package/fesm2022/cax-design-system-dropdown.mjs.map +1 -1
- package/fesm2022/cax-design-system-inputtext.mjs +2 -2
- package/fesm2022/cax-design-system-inputtext.mjs.map +1 -1
- package/fesm2022/cax-design-system-multiselect.mjs +2 -3
- package/fesm2022/cax-design-system-multiselect.mjs.map +1 -1
- package/fesm2022/cax-design-system-sidebar.mjs +1 -1
- package/fesm2022/cax-design-system-sidebar.mjs.map +1 -1
- package/fesm2022/cax-design-system-treeselect.mjs +2 -2
- package/fesm2022/cax-design-system-treeselect.mjs.map +1 -1
- package/package.json +313 -313
- package/resources/cax.min.scss +1 -1
- package/resources/cax.scss +1 -1
- package/resources/components/inputtext/inputtext.scss +0 -1
- package/resources/components/multiselect/multiselect.scss +3 -2
- package/resources/components/treeselect/treeselect.scss +3 -2
|
@@ -67,7 +67,7 @@ export class InputTextComponent {
|
|
|
67
67
|
useExisting: forwardRef(() => InputTextComponent),
|
|
68
68
|
multi: true
|
|
69
69
|
}
|
|
70
|
-
], ngImport: i0, template: "<div class=\"cax-input-container\"\r\n [class]=\"styleClass\"\r\n [ngClass]=\"'cax-input-size-' + size\"\r\n [ngStyle]=\"style\">\r\n <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\">{{ label }}</label>\r\n\r\n <div class=\"cax-input-wrapper\"\r\n [ngClass]=\"{\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value,\r\n 'input-disabled': disabled\r\n }\"\r\n >\r\n <!-- Left Icon -->\r\n <span *ngIf=\"leftIcon\"\r\n class=\"cax-icon-container cax-icon-left\">\r\n <i [ngClass]=\"leftIconClass\"></i>\r\n </span>\r\n\r\n <!-- Input -->\r\n <input\r\n type=\"text\"\r\n caxInputText\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onInput($event)\"\r\n [maxlength]=\"maxlength\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [required]=\"required\"\r\n [ngStyle]=\"style\"\r\n [ngClass]=\"{\r\n 'cax-inputtext': true,\r\n 'cax-input-invalid': invalid,\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value\r\n }\"\r\n />\r\n\r\n <!-- Clear Icon (before right icon) -->\r\n <span *ngIf=\"clearIcon && value\"\r\n class=\"cax-icon-container cax-clear-icon clickable-icon\"\r\n [ngClass]=\"{'no-right-icon': !rightIcon}\"\r\n (click)=\"clearInput()\">\r\n <i class=\"cax cax-close-circle\"></i>\r\n </span>\r\n\r\n <!-- Right Icon -->\r\n <span *ngIf=\"rightIcon\"\r\n class=\"cax-icon-container cax-icon-right\"\r\n [ngClass]=\"{'clickable-icon': rightIconClickable}\"\r\n (click)=\"rightIconClickable && onRightIconClick()\">\r\n <i [ngClass]=\"rightIconClass\"></i>\r\n </span>\r\n </div>\r\n\r\n <!-- Error Message with conditional opacity -->\r\n <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n <!-- Helper Text with conditional opacity -->\r\n <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtext{font-weight:500;padding:8px 10px;border-radius:8px}.cax-fluid .cax-inputtext{width:100%}.cax-inputgroup{display:flex;align-items:stretch}.cax-inputgroup-addon{display:flex;align-items:center;justify-content:center}.cax-inputgroup .cax-float-label{display:flex;align-items:stretch;width:100%}.cax-inputgroup .cax-inputtext,.cax-fluid .cax-inputgroup .cax-inputtext,.cax-inputgroup .cax-inputwrapper,.cax-inputgroup .cax-inputwrapper>.cax-component{flex:1 1 auto;width:1%}.cax-float-label{display:block;position:relative}.cax-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.cax-float-label textarea~label{top:1rem}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label,.cax-float-label textarea:focus~label,.cax-float-label textarea.cax-filled~label,.cax-float-label .cax-inputwrapper-focus~label,.cax-float-label .cax-inputwrapper-filled~label{top:-.75rem;font-size:12px}.cax-float-label .input:-webkit-autofill~label{top:-20px;font-size:12px}.cax-float-label .cax-placeholder,.cax-float-label input::placeholder,.cax-float-label .cax-inputtext::placeholder{opacity:0;transition-property:all;transition-timing-function:ease}.cax-float-label .cax-focus .cax-placeholder,.cax-float-label input:focus::placeholder,.cax-float-label .cax-inputtext:focus::placeholder{opacity:1;transition-property:all;transition-timing-function:ease}.cax-input-icon-left,.cax-input-icon-right{position:relative;display:inline-block
|
|
70
|
+
], ngImport: i0, template: "<div class=\"cax-input-container\"\r\n [class]=\"styleClass\"\r\n [ngClass]=\"'cax-input-size-' + size\"\r\n [ngStyle]=\"style\">\r\n <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\">{{ label }}</label>\r\n\r\n <div class=\"cax-input-wrapper\"\r\n [ngClass]=\"{\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value,\r\n 'input-disabled': disabled\r\n }\"\r\n >\r\n <!-- Left Icon -->\r\n <span *ngIf=\"leftIcon\"\r\n class=\"cax-icon-container cax-icon-left\">\r\n <i [ngClass]=\"leftIconClass\"></i>\r\n </span>\r\n\r\n <!-- Input -->\r\n <input\r\n type=\"text\"\r\n caxInputText\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onInput($event)\"\r\n [maxlength]=\"maxlength\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [required]=\"required\"\r\n [ngStyle]=\"style\"\r\n [ngClass]=\"{\r\n 'cax-inputtext': true,\r\n 'cax-input-invalid': invalid,\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value\r\n }\"\r\n />\r\n\r\n <!-- Clear Icon (before right icon) -->\r\n <span *ngIf=\"clearIcon && value\"\r\n class=\"cax-icon-container cax-clear-icon clickable-icon\"\r\n [ngClass]=\"{'no-right-icon': !rightIcon}\"\r\n (click)=\"clearInput()\">\r\n <i class=\"cax cax-close-circle\"></i>\r\n </span>\r\n\r\n <!-- Right Icon -->\r\n <span *ngIf=\"rightIcon\"\r\n class=\"cax-icon-container cax-icon-right\"\r\n [ngClass]=\"{'clickable-icon': rightIconClickable}\"\r\n (click)=\"rightIconClickable && onRightIconClick()\">\r\n <i [ngClass]=\"rightIconClass\"></i>\r\n </span>\r\n </div>\r\n\r\n <!-- Error Message with conditional opacity -->\r\n <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n <!-- Helper Text with conditional opacity -->\r\n <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtext{font-weight:500;padding:8px 10px;border-radius:8px}.cax-fluid .cax-inputtext{width:100%}.cax-inputgroup{display:flex;align-items:stretch}.cax-inputgroup-addon{display:flex;align-items:center;justify-content:center}.cax-inputgroup .cax-float-label{display:flex;align-items:stretch;width:100%}.cax-inputgroup .cax-inputtext,.cax-fluid .cax-inputgroup .cax-inputtext,.cax-inputgroup .cax-inputwrapper,.cax-inputgroup .cax-inputwrapper>.cax-component{flex:1 1 auto;width:1%}.cax-float-label{display:block;position:relative}.cax-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.cax-float-label textarea~label{top:1rem}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label,.cax-float-label textarea:focus~label,.cax-float-label textarea.cax-filled~label,.cax-float-label .cax-inputwrapper-focus~label,.cax-float-label .cax-inputwrapper-filled~label{top:-.75rem;font-size:12px}.cax-float-label .input:-webkit-autofill~label{top:-20px;font-size:12px}.cax-float-label .cax-placeholder,.cax-float-label input::placeholder,.cax-float-label .cax-inputtext::placeholder{opacity:0;transition-property:all;transition-timing-function:ease}.cax-float-label .cax-focus .cax-placeholder,.cax-float-label input:focus::placeholder,.cax-float-label .cax-inputtext:focus::placeholder{opacity:1;transition-property:all;transition-timing-function:ease}.cax-input-icon-left,.cax-input-icon-right{position:relative;display:inline-block}.cax-input-icon-left>i,.cax-input-icon-left>.cax-icon-wrapper,.cax-input-icon-right>i,.cax-input-icon-right>.cax-icon-wrapper{position:absolute;top:50%;margin-top:-.5rem}.cax-fluid .cax-input-icon-left,.cax-fluid .cax-input-icon-right{display:block;width:100%}.input-disabled,.disabled-opacity{opacity:.5}input:enabled:focus{outline:none}.non-clickable-icon{cursor:default}.cax-inputtext.full-width{width:100%}.cax-input-wrapper{position:relative;display:inline-flex;align-items:center;width:fit-content}.cax-icon-left{left:10px}.cax-icon-right{right:10px}.cax-fluid .cax-input-wrapper{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }] });
|
|
71
71
|
}
|
|
72
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
@@ -77,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
77
77
|
useExisting: forwardRef(() => InputTextComponent),
|
|
78
78
|
multi: true
|
|
79
79
|
}
|
|
80
|
-
], template: "<div class=\"cax-input-container\"\r\n [class]=\"styleClass\"\r\n [ngClass]=\"'cax-input-size-' + size\"\r\n [ngStyle]=\"style\">\r\n <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\">{{ label }}</label>\r\n\r\n <div class=\"cax-input-wrapper\"\r\n [ngClass]=\"{\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value,\r\n 'input-disabled': disabled\r\n }\"\r\n >\r\n <!-- Left Icon -->\r\n <span *ngIf=\"leftIcon\"\r\n class=\"cax-icon-container cax-icon-left\">\r\n <i [ngClass]=\"leftIconClass\"></i>\r\n </span>\r\n\r\n <!-- Input -->\r\n <input\r\n type=\"text\"\r\n caxInputText\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onInput($event)\"\r\n [maxlength]=\"maxlength\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [required]=\"required\"\r\n [ngStyle]=\"style\"\r\n [ngClass]=\"{\r\n 'cax-inputtext': true,\r\n 'cax-input-invalid': invalid,\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value\r\n }\"\r\n />\r\n\r\n <!-- Clear Icon (before right icon) -->\r\n <span *ngIf=\"clearIcon && value\"\r\n class=\"cax-icon-container cax-clear-icon clickable-icon\"\r\n [ngClass]=\"{'no-right-icon': !rightIcon}\"\r\n (click)=\"clearInput()\">\r\n <i class=\"cax cax-close-circle\"></i>\r\n </span>\r\n\r\n <!-- Right Icon -->\r\n <span *ngIf=\"rightIcon\"\r\n class=\"cax-icon-container cax-icon-right\"\r\n [ngClass]=\"{'clickable-icon': rightIconClickable}\"\r\n (click)=\"rightIconClickable && onRightIconClick()\">\r\n <i [ngClass]=\"rightIconClass\"></i>\r\n </span>\r\n </div>\r\n\r\n <!-- Error Message with conditional opacity -->\r\n <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n <!-- Helper Text with conditional opacity -->\r\n <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtext{font-weight:500;padding:8px 10px;border-radius:8px}.cax-fluid .cax-inputtext{width:100%}.cax-inputgroup{display:flex;align-items:stretch}.cax-inputgroup-addon{display:flex;align-items:center;justify-content:center}.cax-inputgroup .cax-float-label{display:flex;align-items:stretch;width:100%}.cax-inputgroup .cax-inputtext,.cax-fluid .cax-inputgroup .cax-inputtext,.cax-inputgroup .cax-inputwrapper,.cax-inputgroup .cax-inputwrapper>.cax-component{flex:1 1 auto;width:1%}.cax-float-label{display:block;position:relative}.cax-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.cax-float-label textarea~label{top:1rem}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label,.cax-float-label textarea:focus~label,.cax-float-label textarea.cax-filled~label,.cax-float-label .cax-inputwrapper-focus~label,.cax-float-label .cax-inputwrapper-filled~label{top:-.75rem;font-size:12px}.cax-float-label .input:-webkit-autofill~label{top:-20px;font-size:12px}.cax-float-label .cax-placeholder,.cax-float-label input::placeholder,.cax-float-label .cax-inputtext::placeholder{opacity:0;transition-property:all;transition-timing-function:ease}.cax-float-label .cax-focus .cax-placeholder,.cax-float-label input:focus::placeholder,.cax-float-label .cax-inputtext:focus::placeholder{opacity:1;transition-property:all;transition-timing-function:ease}.cax-input-icon-left,.cax-input-icon-right{position:relative;display:inline-block
|
|
80
|
+
], template: "<div class=\"cax-input-container\"\r\n [class]=\"styleClass\"\r\n [ngClass]=\"'cax-input-size-' + size\"\r\n [ngStyle]=\"style\">\r\n <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\">{{ label }}</label>\r\n\r\n <div class=\"cax-input-wrapper\"\r\n [ngClass]=\"{\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value,\r\n 'input-disabled': disabled\r\n }\"\r\n >\r\n <!-- Left Icon -->\r\n <span *ngIf=\"leftIcon\"\r\n class=\"cax-icon-container cax-icon-left\">\r\n <i [ngClass]=\"leftIconClass\"></i>\r\n </span>\r\n\r\n <!-- Input -->\r\n <input\r\n type=\"text\"\r\n caxInputText\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onInput($event)\"\r\n [maxlength]=\"maxlength\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [required]=\"required\"\r\n [ngStyle]=\"style\"\r\n [ngClass]=\"{\r\n 'cax-inputtext': true,\r\n 'cax-input-invalid': invalid,\r\n 'with-left-icon': leftIcon,\r\n 'with-right-icon': rightIcon,\r\n 'with-clear-icon': clearIcon && value\r\n }\"\r\n />\r\n\r\n <!-- Clear Icon (before right icon) -->\r\n <span *ngIf=\"clearIcon && value\"\r\n class=\"cax-icon-container cax-clear-icon clickable-icon\"\r\n [ngClass]=\"{'no-right-icon': !rightIcon}\"\r\n (click)=\"clearInput()\">\r\n <i class=\"cax cax-close-circle\"></i>\r\n </span>\r\n\r\n <!-- Right Icon -->\r\n <span *ngIf=\"rightIcon\"\r\n class=\"cax-icon-container cax-icon-right\"\r\n [ngClass]=\"{'clickable-icon': rightIconClickable}\"\r\n (click)=\"rightIconClickable && onRightIconClick()\">\r\n <i [ngClass]=\"rightIconClass\"></i>\r\n </span>\r\n </div>\r\n\r\n <!-- Error Message with conditional opacity -->\r\n <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error disabled-opacity\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n <!-- Helper Text with conditional opacity -->\r\n <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtext{font-weight:500;padding:8px 10px;border-radius:8px}.cax-fluid .cax-inputtext{width:100%}.cax-inputgroup{display:flex;align-items:stretch}.cax-inputgroup-addon{display:flex;align-items:center;justify-content:center}.cax-inputgroup .cax-float-label{display:flex;align-items:stretch;width:100%}.cax-inputgroup .cax-inputtext,.cax-fluid .cax-inputgroup .cax-inputtext,.cax-inputgroup .cax-inputwrapper,.cax-inputgroup .cax-inputwrapper>.cax-component{flex:1 1 auto;width:1%}.cax-float-label{display:block;position:relative}.cax-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.cax-float-label textarea~label{top:1rem}.cax-float-label input:focus~label,.cax-float-label input.cax-filled~label,.cax-float-label textarea:focus~label,.cax-float-label textarea.cax-filled~label,.cax-float-label .cax-inputwrapper-focus~label,.cax-float-label .cax-inputwrapper-filled~label{top:-.75rem;font-size:12px}.cax-float-label .input:-webkit-autofill~label{top:-20px;font-size:12px}.cax-float-label .cax-placeholder,.cax-float-label input::placeholder,.cax-float-label .cax-inputtext::placeholder{opacity:0;transition-property:all;transition-timing-function:ease}.cax-float-label .cax-focus .cax-placeholder,.cax-float-label input:focus::placeholder,.cax-float-label .cax-inputtext:focus::placeholder{opacity:1;transition-property:all;transition-timing-function:ease}.cax-input-icon-left,.cax-input-icon-right{position:relative;display:inline-block}.cax-input-icon-left>i,.cax-input-icon-left>.cax-icon-wrapper,.cax-input-icon-right>i,.cax-input-icon-right>.cax-icon-wrapper{position:absolute;top:50%;margin-top:-.5rem}.cax-fluid .cax-input-icon-left,.cax-fluid .cax-input-icon-right{display:block;width:100%}.input-disabled,.disabled-opacity{opacity:.5}input:enabled:focus{outline:none}.non-clickable-icon{cursor:default}.cax-inputtext.full-width{width:100%}.cax-input-wrapper{position:relative;display:inline-flex;align-items:center;width:fit-content}.cax-icon-left{left:10px}.cax-icon-right{right:10px}.cax-fluid .cax-input-wrapper{width:100%}}\n"] }]
|
|
81
81
|
}], propDecorators: { value: [{
|
|
82
82
|
type: Input
|
|
83
83
|
}], placeholder: [{
|