cats-ui-lib 2.0.15 → 2.0.17
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/README.md +179 -223
- package/fesm2022/cats-ui-lib.mjs +29 -4
- package/fesm2022/cats-ui-lib.mjs.map +1 -1
- package/index.d.ts +40 -3
- package/package.json +1 -1
package/fesm2022/cats-ui-lib.mjs
CHANGED
|
@@ -3790,6 +3790,8 @@ class FileUploadComponent {
|
|
|
3790
3790
|
maxSize = null;
|
|
3791
3791
|
minSize = null;
|
|
3792
3792
|
helperText = '';
|
|
3793
|
+
onfileChange = new EventEmitter();
|
|
3794
|
+
onfileRemove = new EventEmitter();
|
|
3793
3795
|
/**
|
|
3794
3796
|
* Accepted MIME types or extensions, comma-separated.
|
|
3795
3797
|
* e.g. 'image/png,image/jpeg' or '.png,.jpg,.pdf'
|
|
@@ -3878,6 +3880,7 @@ class FileUploadComponent {
|
|
|
3878
3880
|
this.value = valid;
|
|
3879
3881
|
this.onChange(this.value);
|
|
3880
3882
|
}
|
|
3883
|
+
this.onfileChange.emit(this.value);
|
|
3881
3884
|
this.onTouched();
|
|
3882
3885
|
input.value = '';
|
|
3883
3886
|
this.isFocused = false;
|
|
@@ -3894,6 +3897,7 @@ class FileUploadComponent {
|
|
|
3894
3897
|
this.value = valid;
|
|
3895
3898
|
this.onChange(this.value);
|
|
3896
3899
|
}
|
|
3900
|
+
this.onfileChange.emit(this.value);
|
|
3897
3901
|
this.onTouched();
|
|
3898
3902
|
this.isFocused = false;
|
|
3899
3903
|
}
|
|
@@ -3905,6 +3909,7 @@ class FileUploadComponent {
|
|
|
3905
3909
|
this.value = this.value.filter((_, i) => i !== index);
|
|
3906
3910
|
this.validationError = '';
|
|
3907
3911
|
this.onChange(this.value);
|
|
3912
|
+
this.onfileRemove.emit(this.value);
|
|
3908
3913
|
if (input)
|
|
3909
3914
|
input.value = '';
|
|
3910
3915
|
}
|
|
@@ -3952,7 +3957,7 @@ class FileUploadComponent {
|
|
|
3952
3957
|
return !!this.displayError;
|
|
3953
3958
|
}
|
|
3954
3959
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3955
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileUploadComponent, isStandalone: true, selector: "cats-ui-file-upload", inputs: { placeholder: "placeholder", errorMessage: "errorMessage", disabled: "disabled", multiple: "multiple", buttonPosition: "buttonPosition", maxSize: "maxSize", minSize: "minSize", helperText: "helperText", accept: "accept" }, providers: [
|
|
3960
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileUploadComponent, isStandalone: true, selector: "cats-ui-file-upload", inputs: { placeholder: "placeholder", errorMessage: "errorMessage", disabled: "disabled", multiple: "multiple", buttonPosition: "buttonPosition", maxSize: "maxSize", minSize: "minSize", helperText: "helperText", accept: "accept" }, outputs: { onfileChange: "onfileChange", onfileRemove: "onfileRemove" }, providers: [
|
|
3956
3961
|
{
|
|
3957
3962
|
provide: NG_VALUE_ACCESSOR,
|
|
3958
3963
|
useExisting: forwardRef(() => FileUploadComponent),
|
|
@@ -3985,6 +3990,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
3985
3990
|
type: Input
|
|
3986
3991
|
}], helperText: [{
|
|
3987
3992
|
type: Input
|
|
3993
|
+
}], onfileChange: [{
|
|
3994
|
+
type: Output
|
|
3995
|
+
}], onfileRemove: [{
|
|
3996
|
+
type: Output
|
|
3988
3997
|
}], accept: [{
|
|
3989
3998
|
type: Input
|
|
3990
3999
|
}] } });
|
|
@@ -4141,13 +4150,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
4141
4150
|
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
|
|
4142
4151
|
|
|
4143
4152
|
class SidebarComponent {
|
|
4153
|
+
config = [];
|
|
4154
|
+
expandedFeatures = new Set();
|
|
4155
|
+
activeItem = null;
|
|
4156
|
+
toggleFeature(key) {
|
|
4157
|
+
this.expandedFeatures.has(key)
|
|
4158
|
+
? this.expandedFeatures.delete(key)
|
|
4159
|
+
: this.expandedFeatures.add(key);
|
|
4160
|
+
}
|
|
4161
|
+
isExpanded(key) {
|
|
4162
|
+
return this.expandedFeatures.has(key);
|
|
4163
|
+
}
|
|
4164
|
+
setActive(key) {
|
|
4165
|
+
this.activeItem = key;
|
|
4166
|
+
}
|
|
4144
4167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SidebarComponent, isStandalone: true, selector: "cats-ui-sidebar", inputs: { config: "config" }, ngImport: i0, template: "<nav class=\"sidebar\">\r\n @for (mod of config; track mod.moduleName) {\r\n @if (mod.isEnable) {\r\n <div class=\"section\">\r\n <div class=\"section-label\">{{ mod.moduleName }}</div>\r\n\r\n @for (feat of mod.features; track feat.featuresName) {\r\n @if (feat.isEnable) {\r\n <div class=\"nav-item-wrapper\">\r\n <!-- Feature row -->\r\n <div\r\n class=\"nav-item\"\r\n [class.active]=\"activeItem === feat.featuresName\"\r\n (click)=\"\r\n feat.expandable\r\n ? toggleFeature(feat.featuresName)\r\n : setActive(feat.featuresName)\r\n \"\r\n >\r\n <span class=\"nav-icon\">\r\n @if (activeItem === feat.featuresName && feat.activeIcon) {\r\n <img [src]=\"feat.activeIcon\" alt=\"\" />\r\n } @else {\r\n @if (feat.icon) {\r\n <img [src]=\"feat.icon\" alt=\"\" />\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"nav-label\">{{ feat.featuresName }}</span>\r\n\r\n @if (feat.expandable) {\r\n <span\r\n class=\"nav-arrow\"\r\n [class.open]=\"isExpanded(feat.featuresName)\"\r\n >\r\n <svg\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n >\r\n <path d=\"M6 4l4 4-4 4\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Sub-items (attributes) -->\r\n @if (feat.expandable && isExpanded(feat.featuresName)) {\r\n <div class=\"sub-items\">\r\n @for (attr of feat.attributes; track attr.attributeName) {\r\n <div\r\n class=\"sub-item\"\r\n [class.active]=\"activeItem === attr.attributeName\"\r\n (click)=\"setActive(attr.attributeName)\"\r\n >\r\n <span class=\"dot\"></span>\r\n <span class=\"nav-label\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n</nav>\r\n", styles: [".sidebar{width:240px;height:100vh;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:99px}.section{padding-top:8px}.section+.section{border-top:1px solid #e5e7eb;margin-top:4px;padding-top:8px}.section-label{padding:8px 16px 4px;font-size:10px;font-weight:600;color:#9ca3af;letter-spacing:.9px;text-transform:uppercase;line-height:1}.nav-item-wrapper{padding:1px 8px}.nav-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;-webkit-user-select:none;user-select:none}.nav-item:hover:not(.active){background:#f3f4f6}.nav-item.active{background:#eff6ff}.nav-item.active .nav-label{color:#2563eb;font-weight:500}.nav-item.active .nav-icon{color:#2563eb}.nav-item.active:before{content:\"\";position:absolute;left:0;top:20%;height:60%;width:3px;border-radius:0 3px 3px 0;background:#2563eb}.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#6b7280}.nav-icon img{width:100%;height:100%;object-fit:contain}.nav-label{font-size:13px;color:#374151;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}.nav-arrow{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#9ca3af;flex-shrink:0;transition:transform .2s ease}.nav-arrow svg{width:12px;height:12px}.nav-arrow.open{transform:rotate(90deg);color:#2563eb}.sub-items{padding:2px 0 4px;animation:slideDown .2s ease forwards;overflow:hidden}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sub-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 42px;border-radius:6px;margin:1px 8px;cursor:pointer;transition:background .15s ease}.sub-item:hover:not(.active){background:#f3f4f6}.sub-item.active{background:#eff6ff}.sub-item.active .nav-label{color:#2563eb;font-weight:500}.sub-item.active .dot{background:#2563eb;transform:scale(1.3)}.dot{width:5px;height:5px;border-radius:50%;background:#d1d5db;flex-shrink:0;transition:background .15s ease,transform .15s ease}@media (prefers-color-scheme: dark){.sidebar{background:#111827;border-color:#1f2937}.section{border-color:#1f2937}.section-label{color:#4b5563}.nav-label{color:#d1d5db}.nav-icon{color:#6b7280}.nav-item:hover:not(.active){background:#1f2937}.nav-item.active{background:#1e3a5f}.nav-item.active .nav-label,.nav-item.active .nav-icon{color:#60a5fa}.nav-item.active:before{background:#3b82f6}.sub-item:hover:not(.active){background:#1f2937}.sub-item.active{background:#1e3a5f}.sub-item.active .nav-label{color:#60a5fa}.sub-item.active .dot{background:#3b82f6}.dot{background:#374151}.nav-arrow{color:#4b5563}}\n"] });
|
|
4146
4169
|
}
|
|
4147
4170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
4148
4171
|
type: Component,
|
|
4149
|
-
args: [{ selector: 'cats-ui-sidebar', imports: [], template: "<
|
|
4150
|
-
}]
|
|
4172
|
+
args: [{ selector: 'cats-ui-sidebar', imports: [], template: "<nav class=\"sidebar\">\r\n @for (mod of config; track mod.moduleName) {\r\n @if (mod.isEnable) {\r\n <div class=\"section\">\r\n <div class=\"section-label\">{{ mod.moduleName }}</div>\r\n\r\n @for (feat of mod.features; track feat.featuresName) {\r\n @if (feat.isEnable) {\r\n <div class=\"nav-item-wrapper\">\r\n <!-- Feature row -->\r\n <div\r\n class=\"nav-item\"\r\n [class.active]=\"activeItem === feat.featuresName\"\r\n (click)=\"\r\n feat.expandable\r\n ? toggleFeature(feat.featuresName)\r\n : setActive(feat.featuresName)\r\n \"\r\n >\r\n <span class=\"nav-icon\">\r\n @if (activeItem === feat.featuresName && feat.activeIcon) {\r\n <img [src]=\"feat.activeIcon\" alt=\"\" />\r\n } @else {\r\n @if (feat.icon) {\r\n <img [src]=\"feat.icon\" alt=\"\" />\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"nav-label\">{{ feat.featuresName }}</span>\r\n\r\n @if (feat.expandable) {\r\n <span\r\n class=\"nav-arrow\"\r\n [class.open]=\"isExpanded(feat.featuresName)\"\r\n >\r\n <svg\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n >\r\n <path d=\"M6 4l4 4-4 4\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Sub-items (attributes) -->\r\n @if (feat.expandable && isExpanded(feat.featuresName)) {\r\n <div class=\"sub-items\">\r\n @for (attr of feat.attributes; track attr.attributeName) {\r\n <div\r\n class=\"sub-item\"\r\n [class.active]=\"activeItem === attr.attributeName\"\r\n (click)=\"setActive(attr.attributeName)\"\r\n >\r\n <span class=\"dot\"></span>\r\n <span class=\"nav-label\">{{ attr.attributeName }}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n</nav>\r\n", styles: [".sidebar{width:240px;height:100vh;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:99px}.section{padding-top:8px}.section+.section{border-top:1px solid #e5e7eb;margin-top:4px;padding-top:8px}.section-label{padding:8px 16px 4px;font-size:10px;font-weight:600;color:#9ca3af;letter-spacing:.9px;text-transform:uppercase;line-height:1}.nav-item-wrapper{padding:1px 8px}.nav-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;-webkit-user-select:none;user-select:none}.nav-item:hover:not(.active){background:#f3f4f6}.nav-item.active{background:#eff6ff}.nav-item.active .nav-label{color:#2563eb;font-weight:500}.nav-item.active .nav-icon{color:#2563eb}.nav-item.active:before{content:\"\";position:absolute;left:0;top:20%;height:60%;width:3px;border-radius:0 3px 3px 0;background:#2563eb}.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#6b7280}.nav-icon img{width:100%;height:100%;object-fit:contain}.nav-label{font-size:13px;color:#374151;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}.nav-arrow{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#9ca3af;flex-shrink:0;transition:transform .2s ease}.nav-arrow svg{width:12px;height:12px}.nav-arrow.open{transform:rotate(90deg);color:#2563eb}.sub-items{padding:2px 0 4px;animation:slideDown .2s ease forwards;overflow:hidden}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sub-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 42px;border-radius:6px;margin:1px 8px;cursor:pointer;transition:background .15s ease}.sub-item:hover:not(.active){background:#f3f4f6}.sub-item.active{background:#eff6ff}.sub-item.active .nav-label{color:#2563eb;font-weight:500}.sub-item.active .dot{background:#2563eb;transform:scale(1.3)}.dot{width:5px;height:5px;border-radius:50%;background:#d1d5db;flex-shrink:0;transition:background .15s ease,transform .15s ease}@media (prefers-color-scheme: dark){.sidebar{background:#111827;border-color:#1f2937}.section{border-color:#1f2937}.section-label{color:#4b5563}.nav-label{color:#d1d5db}.nav-icon{color:#6b7280}.nav-item:hover:not(.active){background:#1f2937}.nav-item.active{background:#1e3a5f}.nav-item.active .nav-label,.nav-item.active .nav-icon{color:#60a5fa}.nav-item.active:before{background:#3b82f6}.sub-item:hover:not(.active){background:#1f2937}.sub-item.active{background:#1e3a5f}.sub-item.active .nav-label{color:#60a5fa}.sub-item.active .dot{background:#3b82f6}.dot{background:#374151}.nav-arrow{color:#4b5563}}\n"] }]
|
|
4173
|
+
}], propDecorators: { config: [{
|
|
4174
|
+
type: Input
|
|
4175
|
+
}] } });
|
|
4151
4176
|
|
|
4152
4177
|
/*
|
|
4153
4178
|
* Public API Surface of cats-ui
|